Page MenuHomePhabricator
Create Task
Maniphest T426443

Header version indicator (current/older/MR colors) + About modal redesign (!55)
Closed, ResolvedPublic
Actions

Description

Scope: rework the page-header version surface and the About modal so users can navigate between releases / MR previews without opening a multi-screen modal, and surface the on-Commons tracking category for files uploaded with this tool.

Header version indicator

src/app.jsx:1402–1425 (the topbar). Today the brand row reads W Upload Workbench · Wikimedia Commons [Beta], with version only visible inside the About modal.

Wanted:

  • Drop the · Wikimedia Commons sub-title and its sibling Beta chip from the topbar (Beta moves into the About modal head).
  • Inline <VersionChip> reading v<X.Y.Z> from __APP_VERSION__ (Vite compile-time define from vite.config.js).
  • Color-coded by __DEPLOY_TARGET__:
    • main → green ("you're on the live release")
    • v<X.Y.Z> → yellow ("you're on an older archived release")
    • mr-<IID> → blue ("you're previewing an unmerged MR")
    • dev → grey (npm run dev local build)
  • Click the chip → small dropdown anchored under it, listing:
    • the latest 5 releases parsed from CHANGELOG.md (each → https://upload-workbench.toolforge.org/v<X.Y.Z>/)
    • every open merge request from fetchOpenMergeRequests() (each → https://upload-workbench.toolforge.org/mr-<IID>/)
    • the currently-active build is marked "you are here"
  • Esc / click-outside closes. Aria-haspopup, button semantics.

About modal redesign

src/ui/info-modal.jsx. The current modal stacks About → Links → Switch version (full list, ~25 versions) → MRs → Full changelog (every CHANGELOG entry rendered inline). Per maintainer: it's too long and dominated by version content; MR list is buried.

Wanted:

  • New link in the Links section: "Files uploaded with this tool" → https://commons.wikimedia.org/wiki/Category:Uploaded_with_Upload_Workbench (the on-Commons hidden tracking category that publish.js already appends to every uploaded file via [[ T426405 ]] / v0.26.0).
  • "Versions" section becomes an accordion, default-open. Inside:
    • Compact list of the latest 5 releases.
    • Each release row is click-to-expand (inner accordion) — expanding inlines that release's CHANGELOG entry (the per-section Added/Changed/Fixed/Removed bullets).
    • Below the latest 5: a "Show all releases" disclosure that reveals the rest of the list (still each click-to-expand).
  • "Open merge requests" section sits below versions — with the versions section foldable, the MR list is no longer buried.
  • The standalone "Full changelog" wall-of-text section is removed — that content is now reachable per-version via the accordion above; no need to render every release's bullets inline a second time.

Acceptance criteria

  • Build passes: npm run build (with the undefined-identifier scanner).
  • Header chip renders v0.27 in green when loaded from /, yellow when loaded from /v0.27.0/, blue when loaded from /mr-<IID>/. Verified on the MR preview itself (this MR's own /mr-<IID>/ view should report blue).
  • Header chip dropdown lists latest-5 releases + open MRs; entries are clickable; current view is marked "you are here".
  • About modal: Commons-category link works (opens the Category page in a new tab); Versions accordion folds; per-version inline expansion shows that release's CHANGELOG bullets; "Show all releases" reveals the rest; MR list is reachable without scrolling past a wall of changelog text.

Out of scope

  • No commit-by-commit history.
  • No persistence of accordion open/closed state across modal opens.
  • No version-chip hover preview / no language switcher / no other dropdown content.
  • The single CHANGELOG.md remains the source of truth for releases.

Related Objects

Event Timeline

Daanvr created this task.May 15 2026, 4:26 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 15 2026, 4:26 PM
Daanvr claimed this task.May 15 2026, 4:32 PM
Daanvr moved this task from To do to Doing on the Tool-upload-workbench board.

Grooming pass (AI)

Description rewritten with investigation findings (see task description above). Original (Dutch, voice-typed) preserved here verbatim:

Ik wil een paar kleine aanpassingen doen aan de user interface wat betreft versies en de About model voor waar je iedere versies en merge requests kan inzien.

de "Wikimedia Commons" text mag weg In het titelstuk van de pagina en daar wil ik zien wat de huidige versie is, die dan groen is. En als je een oudere versie aan het bekijken bent, is die geel. Als je een merge request aan bekijkt bent En als je op klikt krijg je drop down Met de laatste vijf versies en alle merge requests die nog open staan. Op deze manier kun je hier dus bij zonder dat je zelfs de about model opent.

Wat betreft de About Model, die is nu heel lang. En onleesbaar. En ik wil ook een linkje toevoegen naar de categorie oncommons van alle vuilsen geüpload zijn hiermee. En ik wil daar ook een veel compactere view met de versies M de laatste vijf ver En dan, als je erop klikt, dan vouwt hij open en dan zie je de changelog En onderaan staat er alle andere versies. Een knopje en dat is een soort drop-down en dan kun je er eentje selecteren. Uit de droptaan waar alles in staat. This Dit stuk wil ik eigenlijk ook in een soort van Arcodeon vouwbaar stuk, zodat je veel makkelijker en veel sneller naar de pull requests kan die eronder staan.

Investigation notes

Code touched:

  • src/app.jsx:1402–1425 — topbar JSX. Drops the "Wikimedia Commons" title slot and the inline <chip>Beta</chip>; new <VersionChip> lives in their place. Beta chip moves into the About-modal head (no UX loss; it's still visible the moment a user opens the info modal).
  • src/app.css:33–58 — topbar CSS. New .version-chip* rules.
  • src/ui/info-modal.jsx — full rewrite of the body. Compact accordion structure. New <VersionChip> extracted and exported for reuse in the topbar.
  • src/api/gitlab.js — already exposes fetchOpenMergeRequests() and fetchChangelogRaw(), both unauthenticated + CORS-OK + apiCache-wrapped (5min TTL). Reused as-is.

Data sources (no new ones needed):

  • Versions: fetchChangelogRaw() parses CHANGELOG.md the same way info-modal.jsx already does (parseChangelog()).
  • MRs: fetchOpenMergeRequests() hits https://gitlab.wikimedia.org/api/v4/projects/4464/merge_requests?state=opened — already verified working.
  • Current view: __DEPLOY_TARGET__ (Vite compile-time define from .gitlab-ci.yml's VITE_DEPLOY_TARGET). One of main, dev, v<X.Y.Z>, mr-<IID>.
  • Commons tracking category: [[Category:Uploaded with Upload Workbench]] (verified exists, contentmodel=wikitext, hidden via __HIDDENCAT__ per v0.26.0 / [[ T426405 ]]). publish.js already auto-appends it to every published file. Safe to link from About modal.

Defaults chosen (no clarifications batched):

  • Color for MR-preview view → blue (--color-progressive, the Codex progressive blue, ~#36c5f0). Distinct from green (current) and yellow (older). The blue already reads as "preview / draft / in-flight" in the surrounding UI (info-modal current-tag, etc.).
  • Color for dev (local development) → grey/neutral. Not part of the original spec but npm run dev builds need a sensible color too; grey reads as "not a real deploy".
  • Scope → single MR. Header indicator + About-modal redesign + Commons-category link in one MR. The redesign is small enough (~300 LoC including CSS) and the two surfaces share the version-chip/data-fetch wiring; splitting would duplicate boilerplate.

Acceptance criteria

Header:

  • "Wikimedia Commons" sub-title gone; <VersionChip> shows v<X.Y.Z> only.
  • Color: green when __DEPLOY_TARGET__ === 'main'; yellow when starts with v (older archived release); blue when starts with mr- (MR preview); grey for dev.
  • Click chip → dropdown anchored under the chip showing: top-5 most-recent releases (each linkable to /v<X.Y.Z>/) + every open MR (each linkable to /mr-<IID>/). The currently-active build is marked "you are here". Esc / click-outside closes.

About modal:

  • New first row of links: "Files uploaded with this tool" → https://commons.wikimedia.org/wiki/Category:Uploaded_with_Upload_Workbench (alongside the existing live-site / repo / Phab links).
  • "Versions" section is collapsible (accordion), default-open with the latest 5 visible. Each version row is itself click-to-expand to inline-show its CHANGELOG entry (the per-version Added/Changed/Fixed/Removed list). A "Show all releases" disclosure under the latest 5 reveals the rest.
  • "Open merge requests" section sits below versions and is no longer buried beneath a giant changelog blob. The "Full changelog" wall-of-text section is dropped — its content is now reachable per-version via the accordion above.

Out of scope

  • No version-chip dropdown for "switch language" or anything beyond version/MR navigation.
  • The About modal still surfaces only versions parsed from CHANGELOG.md and MRs from GitLab — no commit-by-commit history.
  • No persistence of the About-modal accordion state (each open is a fresh state).
Daanvr renamed this task from Merge Request and versioning to Header version indicator (current/older/MR colors) + About modal redesign.May 15 2026, 4:34 PM
Daanvr updated the task description. (Show Details)
Daanvr renamed this task from Header version indicator (current/older/MR colors) + About modal redesign to Header version indicator (current/older/MR colors) + About modal redesign (!55).May 15 2026, 4:47 PM
Daanvr moved this task from Doing to Reviewing on the Tool-upload-workbench board.

MR: https://gitlab.wikimedia.org/daanvr/upload-workbench/-/merge_requests/55
Preview: https://upload-workbench.toolforge.org/mr-55/
Scope: header version chip (green/yellow/blue/grey by deploy target) with click-to-switch dropdown of latest 5 releases + open MRs; About modal reworked into compact accordion of latest 5 releases (each click-to-expand for changelog) with "Show older" disclosure for the rest, MR list no longer buried; new Commons-category link in Links. Beta chip moved into modal head. CHANGELOG parser shared via new src/ui/changelog-parse.jsx. All in one MR per grooming-pass plan.

Daanvr added a comment.May 15 2026, 5:46 PM

awesome!
some small changes:

  • when in a MR# the chip next to the title still shows the version number of the last live version.
  • the beta indicator should stil exist to the right of the version/mr selector next to the title. it should have a hover tooltip indicating it is a beta, and that many things are not yet working well and that all feedback is verwy welkom!
  • clickign the version in the modal should expand and show the changelog and only then the user can jump to the apge of that specific version
Daanvr moved this task from Reviewing to Doing on the Tool-upload-workbench board.May 15 2026, 5:46 PM
Daanvr moved this task from Doing to Reviewing on the Tool-upload-workbench board.May 15 2026, 6:00 PM

Addressed feedback on !55:

  1. Chip label is now contextual, not just colour-coded: main → v<X.Y.Z>, archived v<X.Y.Z> → v<X.Y.Z>, mr-<IID> → MR !<IID>, dev → dev. A user landing on a preview now sees the MR identifier directly instead of the underlying version number the MR happened to be built against. Verified end-to-end on the redeployed preview itself: https://upload-workbench.toolforge.org/mr-55/ now reads MR !55 in blue (verified by grepping the deployed bundle for the template literal — MR !${s.slic…}).
  1. Beta indicator restored to the topbar, sitting to the right of the version/MR selector. Hover/focus tooltip via browser-native title= (matches the rest of the topbar's chip/button affordances): *"Beta — many things are not yet working well. All feedback is very welcome!"*. Removed from the modal head to avoid duplication. tabIndex={0} on the chip span makes the tooltip reachable for keyboard users too.
  1. Version row click in About modal now only expands the changelog — the row no longer doubles as a navigation link. Inside the expanded panel a new explicit "Open this version → /v<X.Y.Z>/" CTA (styled as a small progressive button) is the navigation affordance. Hidden for the row that already matches the current build. The "main" row stays a direct link (it has no per-version changelog to expand). "Show all releases" disclosure under the latest 5 still works.

New commit cce81a0 pushed to feat/T426443-version-indicator-about-modal; preview redeployed at https://upload-workbench.toolforge.org/mr-55/. CHANGELOG [Unreleased] entries from MR-1 were extended in place to reflect the new behaviour. No version bump.

Daanvr added a comment.May 15 2026, 6:05 PM

samll feedback just before merging: the hover tooltip above te "beta" chip is not displaying.
when you repaire this you can merge right away without waiting for review.

Daanvr moved this task from Reviewing to Done on the Tool-upload-workbench board.May 15 2026, 6:05 PM
Daanvr closed this task as Resolved.May 15 2026, 6:22 PM

Released v0.29.0

Live: https://upload-workbench.toolforge.org/ (also archived at https://upload-workbench.toolforge.org/v0.29.0/).

Lessons learned

Browser-native title= is unreliable as a tooltip primitive. It has a ~700 ms hover delay, doesn't surface on keyboard focus at all, is invisible on touch — so most users walk away before they ever see it. Use a CSS pseudo-element (::after) on :hover / :focus-visible sourced from a data-tooltip attribute, plus an aria-label for screen readers. Appears instantly, keyboard-accessible, styles consistently. (The merger landed this fix as the last commit before merging this MR.)

Verifying a UI affordance exists in the bundle ≠ verifying it works. The implementer's preview-verification step grepped the deployed JS for the tooltip text, found it, and declared done — but the tooltip never displayed in any real browser. For interactive UI affordances (tooltips, hover states, focus rings), bundle-grep is necessary but insufficient; the only real check is opening the page and exercising the interaction. Future implementer agents touching hover/focus/tooltip surfaces should not declare done on bundle-grep alone.

Daanvr mentioned this in T425887: advanced title and caption generation (!54).May 16 2026, 8:39 AM
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