Page MenuHomePhabricator
Create Task
Maniphest T374979

MPIC: Update app header
Open, LowPublic1 Estimated Story Points
Actions

Assigned To
cjming
Authored By
Sfaci
Sep 17 2024, 3:56 PM
Tags
Referenced Files
F57662995: Screenshot 2024-10-31 at 11.09.46.png
Oct 31 2024, 10:10 AM
F57662990: Screenshot 2024-10-31 at 11.08.13.png
Oct 31 2024, 10:09 AM
F57622245: Screenshot 2024-10-17 at 20.03.27.png
Oct 17 2024, 6:07 PM
F57622196: MP_logo.svg
Oct 17 2024, 5:50 PM
F57622218: new header.png
Oct 17 2024, 5:50 PM
F57619769: image.png
Oct 16 2024, 4:26 PM
F57519088: Screenshot 2024-09-17 at 17.52.26.png
Sep 17 2024, 3:56 PM
Subscribers
Aklapper
cjming
EChukwukere-WMF
Sarai-WMF
Sfaci
VirginiaPoundstone

Description

Description

Some design work was done in T373466: MPIC: Determine user flow between instrument and experiment forms to restyle the user flow after adding A/B tests to MPIC. We worked on T373475: MPIC: Update application to include experiment user flow to update MPIC according to the new design, but some work was deferred because it was not prioritized. Specifically, the application header wasn't updated.

Specifications

  • The header displays a new logo that adjusts its color when rendered in dark mode (find attachment below)
  • The header has a 8px vertical padding
  • The gear button is replaced by the two Log in/Log out and Help links, which color (@color-progressive) also adjusts depending on the scheme (#36c in light, #6D8AF2 in dark mode)
  • There's 16px of spacing between the links
  • The Logo and the links are placed in opposite sides of the header
  • The header displays an Alpha version indicator next (12px) to the logo (this is an InfoChip component with an cdxIconLabFlask icon, see https://phabricator.wikimedia.org/T373474#10263162 for reference)

Screenshot 2024-10-31 at 11.09.46.png (284×3 px, 81 KB)
MP_logo.svg12 KBDownload

See Figma

Acceptance criteria

  • The application logo adjusts its color based on the theme
  • The header has been restyled according to the design

Details

SubjectRepoBranchLines +/-
Metrics Platform Instrument Configuration: Deploying to productionoperations/deployment-chartsmaster+1 -1
Metrics Platform Instrument Configuration: Deploying to stagingoperations/deployment-chartsmaster+1 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

Sfaci created this task.Sep 17 2024, 3:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 17 2024, 3:56 PM
Sfaci set the point value for this task to 1.Sep 17 2024, 3:56 PM
VirginiaPoundstone triaged this task as Low priority.Sep 18 2024, 3:10 PM
EChukwukere-WMF subscribed.Sep 18 2024, 4:05 PM
VirginiaPoundstone edited projects, added Experimentation Lab (Data Products Sprint 20 🎯); removed Experimentation Lab (Data Products Sprint 19).Sep 23 2024, 3:38 PM
cjming claimed this task.Oct 11 2024, 7:03 PM
cjming moved this task from Sprint Backlog to In Process on the Experimentation Lab (Data Products Sprint 20 🎯) board.
Sarai-WMF updated the task description. (Show Details)Oct 14 2024, 8:44 AM
Sarai-WMF added a comment.EditedOct 14 2024, 8:48 AM

Hey there! Please note that the header design specifications and assets required for this task are not ready. They'll be added to the description soon. Besides that, I have a couple of questions:

  1. Regarding AC 1: I wasn't aware it was possible to switch between dark and light themes in MPIC! Where is the option available?
  2. Regarding AC 2 and 4: I would suggest to separate concerns and change font color (of the body and links) in a separate task. These are fixes that needs to be applied across the whole application. Thoughts?

Thank you!

cjming moved this task from In Process to Paused on the Experimentation Lab (Data Products Sprint 20 🎯) board.Oct 15 2024, 5:49 PM
Sarai-WMF added a subscriber: VirginiaPoundstone.Oct 16 2024, 4:26 PM

Here with another question for the subscribers to this task and @VirginiaPoundstone 🙏🏻

When updating the logo as part of this task, should we keep "Metrics Platform Instrument Configuration", go for "Metrics Platform Experimentation Lab" (adding a screenshot below for reference), or something else? We might want to wait to continue to define the name of the tool collaboratively, or just use the new name just as a placeholder too. Thoughts on this appreciated.

image.png (132×1 px, 15 KB)

Sarai-WMF renamed this task from MPIC Update the logo and header according to the new user flow design to MPIC: Update app header.Oct 17 2024, 5:50 PM
Sarai-WMF updated the task description. (Show Details)
Sarai-WMF updated the task description. (Show Details)Oct 17 2024, 5:58 PM
Sarai-WMF added a comment.Oct 17 2024, 6:07 PM

I took the liberty to adjust this tasks' description and removed some ACs that will be covered in other tickets (text and link color).

Some considerations:

  • My assumption is that we only need a single svg for the logo, and that we can use CSS to style its color based on the theme. But please let me know if that's not correct.
  • If we wanted to make the header more responsive in a follow-up iteration, we could apply the current approach below the 640px breakpoint: the header options could be made available through a menu button (see screenshot below). Exposing these important options by default is still the recommended approach, but they'd need to be collapsed to avoid overflow or overlap.

Screenshot 2024-10-17 at 20.03.27.png (638×2 px, 123 KB)

Please let me know if anything about the logo or the header designs needs adjustment!

Sarai-WMF added a parent task: T371928: MPIC: Style and UX review.Oct 18 2024, 3:33 PM
Milimetric edited projects, added Experimentation Lab (Data Products (Data Products Sprint 21 🪂)); removed Experimentation Lab (Data Products Sprint 20 🎯).Oct 18 2024, 7:24 PM
Milimetric moved this task from Sprint Backlog to Paused on the Experimentation Lab (Data Products (Data Products Sprint 21 🪂)) board.
VirginiaPoundstone mentioned this in T378202: [Epic] MPIC: UI & Copy improvement implementation.Oct 25 2024, 5:56 PM
Sarai-WMF mentioned this in T373474: MPIC: Determine language/copy for combined application.Oct 25 2024, 7:26 PM
Sarai-WMF updated the task description. (Show Details)Oct 31 2024, 10:04 AM
Sarai-WMF updated the task description. (Show Details)Oct 31 2024, 10:09 AM
Sarai-WMF updated the task description. (Show Details)
phuedx added a parent task: T375897: [Sprint 20] MPIC Alpha UI Fixes and Enhancements based on Design Validation.Nov 5 2024, 3:19 PM
Milimetric edited projects, added Experimentation Lab (Data Products Sprint 22); removed Experimentation Lab (Data Products (Data Products Sprint 21 🪂)).Nov 7 2024, 7:09 PM
Milimetric moved this task from Sprint Backlog to Paused on the Experimentation Lab (Data Products Sprint 22) board.
Milimetric edited projects, added Experimentation Lab (Data Products Sprint 23); removed Experimentation Lab (Data Products Sprint 22).Mon, Dec 2, 3:10 PM
Milimetric moved this task from Sprint Backlog to Paused on the Experimentation Lab (Data Products Sprint 23) board.
Milimetric moved this task from Paused to Sprint Backlog on the Experimentation Lab (Data Products Sprint 23) board.Mon, Dec 2, 4:21 PM
cjming moved this task from Sprint Backlog to In Process on the Experimentation Lab (Data Products Sprint 23) board.Wed, Dec 4, 4:53 AM
CodeReviewBot added a project: Patch-For-Review.Thu, Dec 5, 8:52 PM

cjming opened https://gitlab.wikimedia.org/repos/data-engineering/mpic/-/merge_requests/146

Update the app header per design review

cjming moved this task from In Process to Needs Review on the Experimentation Lab (Data Products Sprint 23) board.Thu, Dec 5, 8:54 PM
cjming updated the task description. (Show Details)
CodeReviewBot added a comment.Fri, Dec 6, 3:30 PM

milimetric merged https://gitlab.wikimedia.org/repos/data-engineering/mpic/-/merge_requests/146

Update the app header per design review

Maintenance_bot removed a project: Patch-For-Review.Fri, Dec 6, 3:30 PM
cjming moved this task from Needs Review to To Deploy on the Experimentation Lab (Data Products Sprint 23) board.Fri, Dec 6, 5:07 PM
gerritbot added a comment.Wed, Dec 18, 8:27 PM

Change #1105431 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] Metrics Platform Instrument Configuration: Deploying to staging

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

gerritbot added a project: Patch-For-Review.Wed, Dec 18, 8:27 PM
gerritbot added a comment.Wed, Dec 18, 8:29 PM

Change #1105433 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] Metrics Platform Instrument Configuration: Deploying to production

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

gerritbot added a comment.Wed, Dec 18, 8:33 PM

Change #1105431 merged by jenkins-bot:

[operations/deployment-charts@master] Metrics Platform Instrument Configuration: Deploying to staging

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

gerritbot added a comment.Wed, Dec 18, 8:33 PM

Change #1105433 merged by jenkins-bot:

[operations/deployment-charts@master] Metrics Platform Instrument Configuration: Deploying to production

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

cjming moved this task from To Deploy to Done on the Experimentation Lab (Data Products Sprint 23) board.Wed, Dec 18, 9:02 PM
Maintenance_bot removed a project: Patch-For-Review.Wed, Dec 18, 9:32 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits