Fix page preview renderings in storybook?
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	Oct 29 2020, 3:55 PM

Description

Two of our storybook thumbnails appear to not be rendering correctly:
https://doc.wikimedia.org/Popups/master/js/ui/?path=/story/thumbnails--landscape-svg
https://doc.wikimedia.org/Popups/master/js/ui/?path=/story/thumbnails--landscape-thin-thumbnail

Looking a little closer the URL for the image is being modified. For example in .storybook/mocks/models.js the URL for the thumbnail is expressed as img/258px-Barker_poster.jpg but for some reason this gets modified to substitute the URL with the height to img/Barker_poster.jpg/640px-Barker_poster.jpg

We should investigate what's going on here and if there's a larger problem caused by this outside storybook land.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Fix storybook IMG assets	mediawiki/extensions/Popups	master	+2 -2

Customize query in gerrit

Related Objects

Mentioned In: T271763: Give Popups storybook instance some love
Mentioned Here: T271763: Give Popups storybook instance some love
T236589: Page Previews Storybook not available on doc.wikimedia.org and documentation a bit broken
T269336: Preview popups: Replace SVG with clip-path

Event Timeline

Jdlrobson created this task.Oct 29 2020, 3:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 29 2020, 3:55 PM

ovasileva triaged this task as Medium priority.Nov 23 2020, 12:05 PM

ovasileva edited projects, added Web-Team-Backlog-Archived (Kanbanana-FY-2020-21); removed Web-Team-Backlog-Archived.

Needed to test T269336

Change 649957 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Popups@master] Fix storybook IMG assets

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

gerritbot added a project: Patch-For-Review.Dec 16 2020, 8:28 PM

phuedx claimed this task.Jan 4 2021, 6:14 PM

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jan 6 2021, 4:58 PM

Change 649957 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Fix storybook IMG assets

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.26; 2021-01-12).Jan 6 2021, 6:00 PM

I was happy to merge https://gerrit.wikimedia.org/r/649957 as it did fix the positioning issue. However, there still appears to be an issue with (at least my) Storybook where the incorrect thumbnails are being requested:

Screenshot 2021-01-06 at 18.05.44.png (1×2 px, 411 KB)

I think this has something to do with the use of scaleDownThumbnail(), which mangles the thumbnail URL, in createPopup() in .storybook/helpers/createPopup.js.

Maintenance_bot removed a project: Patch-For-Review.Jan 6 2021, 6:11 PM

phuedx moved this task from Ready for Signoff to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jan 6 2021, 6:12 PM

ovasileva set the point value for this task to 3.Jan 7 2021, 6:47 PM

We decided that I'd make a list of the issues that I can see with Page Preview's Storybook codebase, get it reviewed, and then remove this task from the current iteration.

Issues that I've found with Page Preview's Storybook codebase:

We're using Storybook@5.1.10. The current version is 6.1.11
We disabled the Storybook knobs addon in T236589: Page Previews Storybook not available on doc.wikimedia.org and documentation a bit broken, which limited our ability to test layout/extract handling changes
No images are displayed in the previews (see T266797#6726401):

page_previews_storybook_1.png (1×2 px, 419 KB)

The spacing of the previews is still a little… off:

page_previews_storybook_2.png (1×2 px, 340 KB)

@Jdrewniak's CSS resource (which gives everything a red border) isn't shown:

page_previews_storybook_3.png (1×2 px, 242 KB)

Are we repurposing this task as a "fix storybook" or should I create a new task with /T266797#6731438 ?

Note, the images are showing for me.. both locally and in docs.. .https://doc.wikimedia.org/Popups/master/js/ui/?path=/story/thumbnails--portrait-svg

phuedx moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jan 8 2021, 6:25 PM

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jan 11 2021, 6:21 PM

Opened T271763

	F33990641: page_previews_storybook_3.png
	Jan 8 2021, 12:07 PM

	F33990623: page_previews_storybook_1.png
	Jan 8 2021, 12:01 PM

	F33990632: page_previews_storybook_2.png
	Jan 8 2021, 12:01 PM

	F33988221: Screenshot 2021-01-06 at 18.05.44.png
	Jan 6 2021, 6:09 PM

Fix page preview renderings in storybook?Closed, ResolvedPublic3 Estimated Story PointsActions

Description

Details

Related Objects

Event Timeline

Fix page preview renderings in storybook?
Closed, ResolvedPublic3 Estimated Story Points
Actions