Directory

<img draggable="false" role="img" class="emoji" alt="⚓" src="https://s.w.org/images/core/emoji/15.0.3/svg/2693.svg"> T338800 Create the reporting dialog information component
Page MenuHomePhabricator

Create the reporting dialog information component
Closed, ResolvedPublic2 Estimated Story Points

Description

When I click the report button, I should be taken to a dialog that provides useful information and links. I should be able to decide if I'd like to proceed with filing the report or cancel.

Acceptance criteria:

Link to desktop mocks: https://www.figma.com/file/a1qk95sTQyVFDACoQfBsne/MTP?type=design&node-id=12-12873&t=zTgF1DDiHuycp40l-0
Link to mobile mocks: https://www.figma.com/file/a1qk95sTQyVFDACoQfBsne/MTP?type=design&node-id=184-23472&t=zTgF1DDiHuycp40l-0

DesktopMobile
image.png (1×2 px, 328 KB)
image.png (1×744 px, 177 KB)

Note: Once T338992 and T338815 are implemented, this ticket will be complete.

Event Timeline

Assuming this task is about the Incident-Reporting-System code project, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching per codebase. Please set appropriate project tags when possible. Thanks! :)

MShilova_WMF set the point value for this task to 2.Jun 21 2023, 2:50 PM

Change 944987 had a related patch set uploaded (by Jkieserman; author: Jkieserman):

[mediawiki/extensions/ReportIncident@master] Add first dialog page with explainer text and resource links

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

Test wiki created on Patch demo by JKieserman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/59ac7835db/w

@aishwaryavardhana can you confirm whether the mock links from the description of this ticket contain the most up to date copy?

Change 944987 merged by Eigyan:

[mediawiki/extensions/ReportIncident@master] Add first dialog page with explainer text and resource links

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

@aishwaryavardhana can you confirm whether the mock links from the description of this ticket contain the most up to date copy?

hi, following up on this: @aishwaryavardhana can you please confirm if the Figma files have the latest copy?

@Madalina we could also consider using Phabricator task descriptions or a Google Sheet as the canonical place to look for copy, to avoid confusion with multiple iterations in Figma.

hi all, the page titled "Spec (08/23/23)" in this Figma file is the latest copy of the design yes.

@Madalina @aishwaryavardhana the designs have three small differences between desktop and mobile display, and I wanted to double-check a couple of things:

  1. mobile has a thin grey line underneath the header ("Report an incident" and closing X) of the dialog, while desktop does not. Is this deliberate? It is easier in code to keep this consistent across both, but not a big deal to make it separate.
  2. mobile has a thin grey line above the footer ("Your report will be sent to an admin" plus the action buttons), while desktop does not. Is this deliberate? It is easier in code to keep this consistent across both, but not a big deal to make it separate.
  3. mobile has a stacked display for the action buttons, while desktop does not; double-checking that this is deliberate. For code maintenance, it might be better for us to use Codex stacked actions with the Dialog component for both mobile and desktop because then we can remove our CSS overrides and have less worry about those overrides breaking with some future change in Codex, but it's not a big deal to keep those overrides for now.

@Madalina @aishwaryavardhana the designs have three small differences between desktop and mobile display, and I wanted to double-check a couple of things:

  1. mobile has a thin grey line underneath the header ("Report an incident" and closing X) of the dialog, while desktop does not. Is this deliberate? It is easier in code to keep this consistent across both, but not a big deal to make it separate.
  2. mobile has a thin grey line above the footer ("Your report will be sent to an admin" plus the action buttons), while desktop does not. Is this deliberate? It is easier in code to keep this consistent across both, but not a big deal to make it separate.
  3. mobile has a stacked display for the action buttons, while desktop does not; double-checking that this is deliberate. For code maintenance, it might be better for us to use Codex stacked actions with the Dialog component for both mobile and desktop because then we can remove our CSS overrides and have less worry about those overrides breaking with some future change in Codex, but it's not a big deal to keep those overrides for now.

We discussed these items elsewhere (T344908: Header should have dividing line, T344909: Step 1 of form should have note about sending report to admin in the footer), I guess it is fine to not used stacked actions for now.

Change 960094 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/ReportIncident@master] form: Adjust font and list styles to match Figma spec

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

Reopening to adjust the styles to match the spec.

Change 960094 merged by jenkins-bot:

[mediawiki/extensions/ReportIncident@master] form: Adjust font and list styles to more closely match Figma spec

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

Test wiki on Patch demo by JKieserman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/59ac7835db/w/