Add storybook to Vector
Closed, ResolvedPublic3 Estimated Story Points
Actions

Description

As we start working on desktop improvements and freezing the existing Vector it will be imperative to minimise the risk of UI regressions here by being able to easily toggle between the modes without need to logout/manage config/install extensions. It will also be imperative that we are aware of potentially breaking changes to hooks.

I suggest we add Storybook to Vector to aid with this.

Developer notes

JR set one up while testing
It will need somebody to verify the storybook and its contents are complete, and a code review.

One challenge I hit while working on this was that we'll need to overhaul the directory structure. @Niedzielski
suggested doing this in a separate commit which I think is a good idea (and still remains to be done).

Acceptance criteria

A developer can run a storybook locally
A storybook is published to docs.wikimedia.org

Details

Subject	Repo	Branch	Lines +/-
doc: Add link to Vector skin documentation	integration/docroot	master	+1 -0
[fix] [jsduck] Update config JavaScript path	mediawiki/skins/Vector	master	+1 -1
Publish `npm run doc` for Vector	integration/config	master	+1 -0
Add storybook to Vector	mediawiki/skins/Vector	master	+9 K -105
Storybook: Add search, tabs, menus, portals	mediawiki/skins/Vector	master	+431 -146
Dev: Include closed body and html tags in getTrail	mediawiki/skins/Vector	master	+1 -3
Dev: Complete porting of Vector to Mustache	mediawiki/skins/Vector	master	+371 -104

Customize query in gerrit

Related Objects

Mentioned In: T244106: Setup stories for all Minerva templates (components)
Mentioned Here: T240062: Extract components from VectorTemplate to Mustache files

Event Timeline

Jdlrobson created this task.Jan 13 2020, 9:46 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 13 2020, 9:46 PM

Change 563307 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Add storybook to Vector

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

gerritbot added a project: Patch-For-Review.Jan 13 2020, 9:47 PM

Jdlrobson updated the task description. (Show Details)Jan 13 2020, 9:47 PM

Jdlrobson added a subscriber: • Niedzielski.

Change 563314 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Storybook: Add search, tabs, menus, portals

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

Change 563568 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Dev: Complete porting of Vector to Mustache

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

ovasileva triaged this task as Medium priority.Jan 14 2020, 11:10 AM

Change 563568 abandoned by Jdlrobson:
Dev: Complete porting of Vector to Mustache

Reason:
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /564754 Dev: Complete porting of Vector to Mustache

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

ovasileva set the point value for this task to 3.Jan 15 2020, 5:34 PM

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.

Jdlrobson moved this task from Needs triage to Design on the Vector (legacy skin) board.Jan 15 2020, 5:54 PM

Jdlrobson moved this task from Design to Technical on the Vector (legacy skin) board.Jan 15 2020, 5:57 PM

Jdlrobson merged a task: T239263: Add Storybook documentation for components.

Jdlrobson added subscribers: Jdrewniak, Volker_E, ovasileva.

Jdlrobson moved this task from Ready for Development to Needs Code Review on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Jan 15 2020, 9:54 PM

Change 565396 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Dev: Include closed body and html tags in getTrail

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

Handover to whoever picks this up - getting https://gerrit.wikimedia.org/r/565142 merged should be first priority.
Then get https://gerrit.wikimedia.org/r/563307 merged to add storybook.

I'd suggest making sure the lingering patches on T240062 are all merged and signed off before powering ahead with the other patch https://gerrit.wikimedia.org/r/c/563314 - that patch will likely need a rebase anyway as its not chained onto the patches in T240062 that it needs.

Change 565396 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Dev: Include closed body and html tags in getTrail

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.16; 2020-01-21).Jan 17 2020, 9:00 PM

phuedx claimed this task.Jan 20 2020, 6:11 PM

I've -1'd https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/565142/ and https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/563307/.

phuedx moved this task from Needs Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Jan 21 2020, 2:41 PM

Assigning based on history and kickoff meeting chat (without @phuedx ). Might be a conversation for happy dev time.

Jdlrobson moved this task from Needs More Work to Blocked on Others on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Jan 27 2020, 1:24 PM

Jdlrobson moved this task from Blocked on Others to Doing on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Jan 30 2020, 2:37 AM

Change 563314 abandoned by Jdlrobson:
Storybook: Add search, tabs, menus, portals

Reason:
Folded into https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /563307/22

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

Jdlrobson moved this task from Doing to Needs Code Review on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Jan 30 2020, 3:09 AM

As I said during my review, we should standardise on quoting styles for the *stories.js* files rather than allow a free-for-all. Storybook stories are no different from the other parts of the codebase.

IMO we should aim to stay as close to MediaWiki's coding standards as possible to avoid unnecessary cognitive burden while altering the codebase. Note well that with ESLint's parser options set to { "sourceType": "module", "ecmaVersion": 6 }, backticks are allowed when interpolation is used, i.e.

[0]

// 👍
const foo = `bar ${baz}`;

// 👎
const foo = `bar baz`;

/cc @Jdrewniak @nray @Niedzielski

phuedx added a subscriber: • nray.Jan 31 2020, 12:18 PM

Change 563307 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add storybook to Vector

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

Maintenance_bot removed a project: Patch-For-Review.Jan 31 2020, 3:10 PM

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.18; 2020-02-04); removed MW-1.35-notes (1.35.0-wmf.16; 2020-01-21).Jan 31 2020, 4:00 PM

Jdlrobson updated the task description. (Show Details)Feb 3 2020, 5:18 AM

Jdlrobson mentioned this in T244106: Setup stories for all Minerva templates (components).

Change 569390 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[integration/config@master] Publish npm run doc for Vector

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

gerritbot added a project: Patch-For-Review.Feb 3 2020, 5:29 AM

Change 569390 merged by jenkins-bot:
[integration/config@master] Publish npm run doc for Vector

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

Mentioned in SAL (#wikimedia-releng) [2020-02-03T16:28:55Z] <James_F> Zuul: Publish npm run doc for Vector T242674

Enabled, but this is now failing:

00:00:49.742 > jsduck && npm run build-storybook
00:00:49.742 
00:00:49.996 Warning: /src/collapsibleTabs.js File not found
00:00:49.996 Error: You should specify some input files, otherwise there's nothing I can do :(
00:00:50.077 npm ERR! code ELIFECYCLE
00:00:50.077 npm ERR! errno 1
00:00:50.078 npm ERR! @ doc: `jsduck && npm run build-storybook`
00:00:50.078 npm ERR! Exit status 1
00:00:50.078 npm ERR! 
00:00:50.079 npm ERR! Failed at the @ doc script.
00:00:50.079 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Want me to revert, or is there a quick fix?

Change 569576 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [fix] [jsduck] Update config JavaScript path

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

Change 569576 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [fix] [jsduck] Update config JavaScript path

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

Maintenance_bot removed a project: Patch-For-Review.Feb 3 2020, 6:10 PM

Change 569588 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[integration/docroot@master] doc: Add link to Vector skin documentation

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

Change 569588 merged by jenkins-bot:
[integration/docroot@master] doc: Add link to Vector skin documentation

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

Now live on https://doc.wikimedia.org/mediawiki-skins-Vector/master/js/ (and linked from https://doc.wikimedia.org/)

Maintenance_bot removed a project: Patch-For-Review.Feb 3 2020, 7:10 PM

Jdlrobson moved this task from Needs Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Feb 4 2020, 12:38 AM

Want to take a look and sign this off?

This is awesome. Minor question, should we add the good article/page protected icons to storybook for the Skin/Vector stories?

Volker_E closed this task as Resolved.Feb 6 2020, 8:57 PM

Volker_E updated the task description. (Show Details)