Page MenuHomePhabricator

Create Widget for displaying data asynchronously
Closed, ResolvedPublic3 Estimated Story PointsOct 6 2020

Description

Create a Widget for displaying content from an API.

The widget should:

  • Show a PendingElement until the data are loaded
  • Show an error message if the data are not received within a certain time (Text color: #b32424, Icon: error) <-- This will be handled in T263409

Details

Due Date
Oct 6 2020, 4:00 AM

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptSep 21 2020, 8:36 AM
Tchanders renamed this task from Extend OO.ui.PopupWidget to Extend OO.ui.PopupWidget for asynchronous data.Sep 21 2020, 8:37 AM
Tchanders updated the task description. (Show Details)
Niharika triaged this task as Medium priority.Sep 22 2020, 8:25 PM
ARamirez_WMF set the point value for this task to 3.Sep 23 2020, 4:47 PM

@Tchanders

A few questions for you:

  1. I assume this belong in OOUI (not MediaWiki)?
  2. I imagine the widget will accept a Promise rather than $content ?
  3. Would it be better to update the existing PopupWidget then extend it? (i.e. alter the behavior depending on what is passed into it)
  1. I assume this belong in OOUI (not MediaWiki)?

I was thinking it could be in IPInfo to start with, then be upstreamed... (However, see below...)

  1. I imagine the widget will accept a Promise rather than $content ?

I agree, then it can handle success/failure.

  1. Would it be better to update the existing PopupWidget then extend it? (i.e. alter the behavior depending on what is passed into it)

Having discussed with @Esanders, who pointed me to mw.echo.ui.NotificationsListwidget, I'm now thinking we could make an IpInfoWidget in the IPInfo extension that essentially displays the content inside the popup, rather than extending the popup, i.e.:

button = new OO.ui.PopupButtonWidget( {
    popup: {
        content: ipInfoWidget.$element
    },
    ...
} );

One advantage of this is we could display this anywhere, not just in a popup.

The basic widget could be something along these lines:

mw.IpInfo.IpInfoWidget = function ( config ) {
    // Start in loading state    
    this.pushPending();

    this.config.promise.then(
        this.success,
        this.failure
    );
}

// Extend OO.ui.Widget
// Mixin OO.ui.mixin.PendingElement

...prototype.success = function ( response ) {
	this.popPending();
	// Display contents
};

...prototype.failure = function ( response ) {
	this.popPending();
	// Display error
};

What do you think?

ARamirez_WMF changed the subtype of this task from "Task" to "Deadline".Sep 30 2020, 4:07 PM
ARamirez_WMF set Due Date to Oct 6 2020, 4:00 AM.
Tchanders renamed this task from Extend OO.ui.PopupWidget for asynchronous data to Create Widget for displaying data asynchronously.Sep 30 2020, 5:28 PM
Tchanders updated the task description. (Show Details)

Change 631928 had a related patch set uploaded (by Dbarratt; owner: Dbarratt):
[mediawiki/extensions/IPInfo@master] Create a new widget for Info display

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

Change 631928 merged by jenkins-bot:
[mediawiki/extensions/IPInfo@master] Create a new widget for Info display

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