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?

@Prtksxna Is the updated design in this figma file?

In T269404#6673586, @Tchanders wrote:

@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)

In T269404#6674352, @Niharika wrote:

@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"?

In T269404#6684379, @STran wrote:

@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.

In T269404#6685048, @Tchanders wrote:

@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