Change 731187 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: Factor updating process out to a separate service

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

Change 731189 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/extensions/GrowthExperiments@master] Add ApiMentorDashboardUpdateData

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

Change 731191 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/extensions/GrowthExperiments@master] MenteeOverviewDataUpdater: Record timestamp of last update

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

I uploaded the backend patches for this, waiting on the mockups now, so I can update the frontend, too.

Change 731187 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: Factor updating process out to a separate service

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

Change 731189 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add ApiMentorDashboardUpdateData

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

Change 731191 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] MenteeOverviewDataUpdater: Record timestamp of last update

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

Although this isn't currently a high-priority task, it's a clear improvement that serves as a good onboarding task.

That being said, I feel like there are still some open questions before it's actionable. I'm adding some thoughts, although @AAlhazwani-WMF
is welcome to override them.

1. Where on the page do we show this option to reload data?

We can add the reload option above the Filters and Search controls in the Your mentees module.

2. What icon and/or copy should be used for the reload data CTA?
For a Refresh icon, should we use: cdxIconReload?

To make the action clearer, we might combine the icon with a brief text label.

Something like:

Data last updated X minutes ago. [Refresh 🔄]

3. Is Reload confirmation necessary?
Since the worst-case scenario is that a user refreshes data unnecessarily, it may not be worth adding an extra confirmation step. Instead, we could show a short status message such as:

Mentee data is refreshing, page will reload when complete.

(Side note: I'm assuming a page reload is possible, clearly we shouldn't say that if we can't make it so).

after taking a look, this is where we landed:

• if the data has been refreshed in the last hour, we're going to display the update in minutes
• if the data has been refreshed between 1 and 3 hours, we're going to display the update in hours

data update < 1 hr	data updated < 2hr	data updates < 3hr

as we work on this, we'd also like to clean up a few things:

• the i button jumps around at different viewports (it happens both with the vector and the minerva skin)
• we can remove the text "See your mentees below. Use the filters [...]" the UI is self explanatory making this copy redundant
• optimize spacing and layout (see specs on figma or below)

Hi Amin,

I was working on styling this page and trying to get the spacing/margins to match what I see in the screenshot. I haven’t done the horizontal spacing yet between the “filters” bar and the search bar, or the top/bottom margins for the search bar. This is only a question about the margins for the header and the button.

When I added the top margin of 12px for “Your mentees,” plus the 8px top margin for the i button, it looks a bit different than the design. The i button is quite a bit lower than the heading text. Am I missing something?

Thanks, hope you have a good weekend!

In T293454#11331998, @EMcFarland-WMF wrote:

When I added the top margin of 12px for “Your mentees,” plus the 8px top margin for the i button, it looks a bit different than the design. The i button is quite a bit lower than the heading text. Am I missing something?

hey @EMcFarland-WMF if the label "your mentees" and the "i" button are in the same div container

then yes, we should apply negative margins (-4px to the top, and -8px to the right) to the "i" button to achieve the 8px distance from the top and right edge.

alternatively, you could position absolute the "i" button if you set the whole module container to position relative.

@AAlhazwani-WMF Got it, thank you. I will try out the negative margins approach.

In T293454#11299546, @AAlhazwani-WMF wrote:

as we work on this, we'd also like to clean up a few things:

• the i button jumps around at different viewports (it happens both with the vector and the minerva skin)
• we can remove the text "See your mentees below. Use the filters [...]" the UI is self explanatory making this copy redundant
• optimize spacing and layout (see specs on figma or below)

The problem with the "i" icon alignment is because the icon and the associated popover are made with Vue, as opposed to the "module" container, the title and sub-header which are rendered on the server with base MW styles. The reason for this is because the "Mentee overview" was the very first UI we migrated from OOUI to Vue (T297763), and we wanted to keep things very easy. However the resulting interface is imperfect. There are some CSS tricks that we can apply to better align it (@EMcFarland-WMF has a change that improves the alignment to the container top-right corner) but, imo, the ideal scenario would be to use the same technology for the full module, rather than have it built with a mix of PHP-server-side-OOUI and Vue and have to do funky CSS to support it)

For instance, the "Send praise" module does not render anything extra in the server aside from the title of the module and the "JS disabled warning", see:

We could add some loading indicator or follow a skeleton placeholder approach like the impact module does in the homepage, and render the header and sub-header text in the client as well, in that scenario, aligning the popover button to the title would be trivial. What do you think? @Urbanecm_WMF @Michael @AAlhazwani-WMF

Thanks, @Sgs! I agree that it would be better to refactor the interface to use Vue to render the header and subheader. That would make styling much easier. If people agree, we could make a separate task for that work.

I do have an updated screenshot of the current layout. IMO, the “I” icon looks better, but it still isn’t exactly aligned. See below.

thanks @EMcFarland-WMF! i might have missed something here.. what's stopping us from positioning the info button as desired? basically position the button 8px from the top edge of the module, and 8px from the right edge of the module

You're welcome, @AAlhazwani-WMF! To answer your question, I will refer back to a previous comment you left:

hey @EMcFarland-WMF if the label "your mentees" and the "i" button are in the same div container
then yes, we should apply negative margins (-4px to the top, and -8px to the right) to the "i" button to achieve the 8px distance from the top and right edge.

The label “your mentees” and the “I” button are not in the same div container. That’s because the “your mentees” heading is created by php, but the “i” button is created by Vue. That’s why the screenshot Sergio included, which has JavaScript disabled, doesn’t display the “i” button. Does that make sense?

Change #1199799 had a related patch set uploaded (by EMcFarland; author: EMcFarland):

[mediawiki/extensions/GrowthExperiments@master] display last update to mentee data

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

FYSA: Martin and I met today and agreed to split the associated gerrit patch, https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/1199799, into multiple tasks. This task, T293454, will only include

• displaying the last update as a subheader
• modifying the font for the last update subheader

The styling work, such as positioning the (i) icon, will be done in a separate task(s). See https://phabricator.wikimedia.org/T409937.

Change #1199799 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Display last update to mentee data.

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

I am not sure if this comment should in fact be a separate task or not, but fwiw:

I am not so much concerned with an indicator saying when the last update was; I am concerned with how old the data is; maybe your last update was 2.5 hours ago, but you have a two-week backlog, so who cares when the last update was, as it is not the best information? If you never have a backlog older than your last update timestamp, then this is less serious; in that case, it may be sufficient to use a different label than 'last update', or else use it, but explain in the doc that explains the label that it means that no data item in the last update is older than the previous update.

But this difference underlies what I really need, which is not the date of last update, but notification (alerts) when a particular user is assigned. (This is what I thought might be a different task.) I need this in order to be able to issue Welcome templates in a timely manner. The current system is already failing me in this regard in two ways, as:

• mentor dashboard updates are too slow, and other (non-Mentor?) users see my mentees before I do, so my mentee gets the wrong welcome template (i.e., a standard welcome that mentions neither their mentor, nor the Mentorship program)
• there is no alert, requiring constant dashboard refreshes, which however are still not enough.

More details at mw:Talk:Growth.

Thanks for the feedback, @Mathglot !

If you never have a backlog older than your last update timestamp, then this is less serious; in that case, it may be sufficient to use a different label than 'last update',

Hopefully engineers can confirm, but my understanding is that the "last update" timestamp will relate to how old the data is.

Is there a different label you would find more intuitive?

But this difference underlies what I really need, which is not the date of last update, but notification (alerts) when a particular user is assigned. (This is what I thought might be a different task.)

I just responded on mw:Talk:Growth.

I need this in order to be able to issue Welcome templates in a timely manner.

Another task that might help address this need is T345780: Mentor welcome message: automated greeting from Mentors to their Mentees.

I'm seeing the indicator on beta so this can be closed.