Page MenuHomePhabricator

Update design for IP Information box on Special:Contribs
Closed, ResolvedPublic3 Estimated Story Points

Description

Goal

Update the UI for the IP Information box to match up with the mockup.

Event Timeline

Niharika triaged this task as Medium priority.Dec 4 2020, 12:10 AM
Niharika created this task.
Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptDec 4 2020, 12:10 AM

As discussed with @Prtksxna, we should do this using either a new "information widget", or a function in the IpInfoWidget that generates the HTML for each piece of information.

Either way, each piece of information has:

  • a title (e.g. "Location")
  • the data itself (e.g. "Porvorim, Goa, India")
  • a "more information" tooltip (optional)
  • a link (optional)
  • an icon (optional)

The IpInfoWidget could have "popup" and "infobox" modes that determine which information is shown, or it could accept a list of information to show. (The latter would make it easier to introduce new modes in the future, but may not be necessary for now.)

Each piece of information would look the same whether it were shown in the popup or the infobox.

@Prtksxna Anything else to add?

ARamirez_WMF set the point value for this task to 3.Dec 7 2020, 7:24 PM

@Prtksxna Anything else to add?

This covers all of it. There are some text style changes in the data part, not sure if it would affect the widget in any way. For example:

  • The ASN is in a monospace font
  • Accuracy or other details might be shown in gray color (#72777d)
  • If the Domain is clickable then it would be a link (different from a link)

@Prtksxna Is the updated design in this figma file?

Yeah, its in the same file but you might have to scroll around a bit. This is the right artboard.

Change 647474 had a related patch set uploaded (by STran; owner: STran):
[mediawiki/extensions/IPInfo@master] [WIP] Modify widget to allow for different data displays in context

https://gerrit.wikimedia.org/r/647474

What it looks like right now:



@Prtksxna Could let me know if I've interpreted your designs correctly? ๐Ÿ™‡

@Prtksxna If there's no data available for a particular IP, should we show the "no data" error, or should we show each property heading with "Not available"?

@Prtksxna Could let me know if I've interpreted your designs correctly? ๐Ÿ™‡

This is looking great, @STran ๐Ÿ™Œ๐Ÿฝ! Thanks.
The only thing that seems off is the padding/margin. You can take a look at the figma file and get the values from the inspect tab. You'll need to login using your WMF Google account to see the the Inspect tab.


@Prtksxna If there's no data available for a particular IP, should we show the "no data" error, or should we show each property heading with "Not available"?

Thats a good question, I hadn't thought about it. Not having data isn't really an error, right? It's just data that isn't available. If that is the case then the "Not available" option seems suitable. Are there other states that are actually errors that we'd still need an error state for?

Are there other states that are actually errors that we'd still need an error state for?

@Prtksxna There would be legitimate errors if the user got logged out (i.e. lost their rights), or the revision ID did not exist or point to the correct IP address. I wouldn't expect these situations to happen much in practice.

I understand, thanks @Tchanders. I don't think we should make any changes for now, but I've noted this for the next round of changes - will make some options and share. I like the idea of showing Not available but I am concerned that once we add all the information the box will become quite large, and we wouldn't want to take up all that space even when we have nothing to show.

Went through and made styles more consistent w/the figma file:



The spacing is a bit off in the infobox (compared to "Search for contributions) but it was awkward to shift the padding based on if the accordion was collapsed or not and since the headings are slightly different, it's going to be a bit off anyway until we do T269878. @Prtksxna thoughts? Happy to make more changes but I wasn't sure if it was a priority atm.

We can make a follow-up task for the padding changes. This looks good as it is.

Change 647474 merged by jenkins-bot:
[mediawiki/extensions/IPInfo@master] Modify widget to allow for different data displays in context

https://gerrit.wikimedia.org/r/647474