Page MenuHomePhabricator

Update the InfoChip on Block log accordion
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
JSengupta-WMF
Feb 28 2025, 3:57 PM
Referenced Files
F58614237: 2025-03-05_11-24-18.mp4.gif
Mar 5 2025, 7:32 PM
F58614241: 2025-03-05_11-27-32.mp4.gif
Mar 5 2025, 7:32 PM
F58614245: 2025-03-05_11-29-24.mp4.gif
Mar 5 2025, 7:32 PM
F58614234: 2025-03-05_11-25-56.mp4.gif
Mar 5 2025, 7:32 PM
F58614184: 2025-03-05_11-19-30.png
Mar 5 2025, 7:32 PM
F58614182: 2025-03-05_11-18-50.png
Mar 5 2025, 7:32 PM
F58614180: 2025-03-05_11-15-59.png
Mar 5 2025, 7:32 PM
F58614151: image.png
Mar 5 2025, 7:32 PM

Description

The current InfoChip on the Block log accordion is in a notice state with history icon which is an outdated design.

Please update it to the same logic of Active block accordion:

When there is no entry in the block log table, InfoChip is in notice state (grey) with info icon
When there is any entry in the block log table, InfoChip is in warning state (yellow) with warning icon

Design: https://www.figma.com/design/3PthdmimQ8FiuhGIsLhmZi/Multiblock?node-id=3646-18787&t=fSmt9UpuSjkFJXqb-1

Derived Requirements

  1. Update InfoChip Design on Block Log Accordion
    • Replace the current notice state with an outdated history icon with the new design.
    • Apply the same state logic as the Active Block accordion.
  1. InfoChip State Logic
    • No entries in the block log table → InfoChip is in notice state (grey) with an info icon.
    • Entries exist in the block log table → InfoChip is in warning state (yellow) with a warning icon.
  1. Ensure Design Consistency
    • Match the design specs from the Figma design.
    • The InfoChip appearance and behavior should be consistent with the Active Block accordion.
Test Steps

Test Case: Update InfoChip on Block Log Accordion

  1. Verify InfoChip for an Empty Block Log Table
    • Go to Special:BlockLog where the block log table has no entries.
    • ✅❓❌⬜ AC1: Confirm that the InfoChip is in notice state (grey) with an info icon.
  1. Verify InfoChip for a Non-Empty Block Log Table
    • Go to Special:BlockLog where the block log table has at least one entry.
    • ✅❓❌⬜ AC2: Confirm that the InfoChip is in warning state (yellow) with a warning icon.
  1. Ensure Design Consistency
    • ✅❓❌⬜ AC3: Check that the InfoChip design matches the Active Block accordion.

QA Results - Test Wiki

ACStatusDetails
1T387576#10607258
2T387576#10607258
3T387576#10607258

Event Timeline

@JSengupta-WMF I'm assuming Suppessed block log works the same?

Change #1123682 had a related patch set uploaded (by Dmaza; author: Dmaza):

[mediawiki/core@master] Update the InfoChip on Suppressed & Block log accordion

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

@JSengupta-WMF are we moving the icon to the right? The figma shows the icon on the far right side and it's currently right next to the right of accordion's title.

Screenshot from 2025-02-28 14-40-09.png (534×1 px, 83 KB)

It's the default behavior on Codex accordion component. Did we override this in the current design?

It's the default behavior on Codex accordion component. Did we override this in the current design?

Unless I'm missing something I don't think we are

Change #1123682 merged by jenkins-bot:

[mediawiki/core@master] Update the InfoChip on Suppressed & Block log accordion

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

Change #1124512 had a related patch set uploaded (by Dmaza; author: Dmaza):

[mediawiki/core@master] SpecialBlock[codex]: replace log count icon status

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

Change #1124512 merged by jenkins-bot:

[mediawiki/core@master] SpecialBlock[codex]: replace log count icon status

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

@dmaza Confirmed that the InfoChip is in notice state (grey) with an info icon, InfoChip is in warning state (yellow) with a warning icon and InfoChip design matches the Active Block accordion as seen in the screenshots and gifs below. I will mark this as Resolved. Thanks for all your work!

Test Result - Beta|Prod

Status: ✅ PASS
Environment: TestWiki
OS: macOS Sonoma 15.3.1
Browser: Chrome 133, Firefox 135, Safari 18.3
Device: MacBook Air

Test Artifact(s):
https://test.wikipedia.beta.wmflabs.org/wiki/Special:Block/Betatester
https://test.wikipedia.beta.wmflabs.org/wiki/Special:Block/Calak

Test Steps

Test Case: Update InfoChip on Block Log Accordion

  1. Verify InfoChip for an Empty Block Log Table
    • Go to Special:BlockLog where the block log table has no entries.
    • AC1: Confirm that the InfoChip is in notice state (grey) with an info icon.
Chrome- VectorChrome- MinervaFirebox- MonobookSafari- Timeless
2025-03-05_11-20-28.png (1×1 px, 140 KB)
2025-03-05_11-20-50.png (931×1 px, 105 KB)
2025-03-05_11-21-05.png (817×1 px, 208 KB)
2025-03-05_11-21-30.png (778×1 px, 120 KB)
  1. Verify InfoChip for a Non-Empty Block Log Table
    • Go to Special:BlockLog where the block log table has at least one entry.
    • AC2: Confirm that the InfoChip is in warning state (yellow) with a warning icon.
Chrome- VectorChrome- MinervaFirebox- MonobookSafari- Timeless
image.png (725×1 px, 106 KB)
2025-03-05_11-15-59.png (808×1 px, 102 KB)
2025-03-05_11-18-50.png (819×1 px, 210 KB)
2025-03-05_11-19-30.png (626×1 px, 107 KB)
  1. Ensure Design Consistency
    • AC3: Check that the InfoChip design matches the Active Block accordion.

gifs

Chrome- VectorChrome- MinervaFirebox- MonobookSafari- Timeless
2025-03-05_11-25-56.mp4.gif (1×1 px, 2 MB)
2025-03-05_11-29-24.mp4.gif (968×1 px, 2 MB)
2025-03-05_11-27-32.mp4.gif (778×1 px, 1 MB)
2025-03-05_11-24-18.mp4.gif (802×1 px, 2 MB)
GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF updated the task description. (Show Details)
dmaza set the point value for this task to 2.Mar 6 2025, 8:42 PM