UI: Enable TurboSnap for UI Storybook #19767

ethriel3695 · 2022-11-07T13:41:06Z

Issue:

Storybook is using up quite a bit of its story allotment within Chromatic.
We use Vite to build Storybook, which does not work out of the box with the Chromatic feature TurboSnap

Add a package to allow the Storybook monorepo to use TurboSnap

What I did

Added the package vite-plugin-turbosnap
Updated the main.ts Storybook config file to include the package

How to test

Is this testable with Jest or Chromatic screenshots?
Does this need a new example in the kitchen sink apps?
Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

…dd-turbosnap-for-ui

JReinhold

Thanks Reuben!

We need to change the CircleCI config though, as it doesn't contain any Git history. From the CLI output:

Retrieving git information
⚠ TurboSnap disabled due to missing git history
Could not retrieve changed files since baseline commit(s).
This typically happens after rebasing, force pushing, or when running against an ephemeral merge commit.
ℹ Read more at https://www.chromatic.com/docs/turbosnap#how-it-works

Maybe you can reach out to Chromatic Support and get this resolved? 🤣

code/tsconfig.json

JReinhold

.

ethriel3695 · 2022-11-07T16:28:37Z

Thanks Reuben!

We need to change the CircleCI config though, as it doesn't contain any Git history. From the CLI output:
Retrieving git information
⚠ TurboSnap disabled due to missing git history
Could not retrieve changed files since baseline commit(s).
This typically happens after rebasing, force pushing, or when running against an ephemeral merge commit.
ℹ Read more at https://www.chromatic.com/docs/turbosnap#how-it-works
Maybe you can reach out to Chromatic Support and get this resolved? 🤣

I've updated the depth to 5 for the git-shallow-clone orb that we use for git checkout
https://circleci.com/developer/orbs/orb/guitarrapc/git-shallow-clone

If that does not work, we may want to consider altering this job to utilize the CIrcleCI helper checkout instead.

socket-security · 2022-11-07T17:01:47Z

Socket Security Pull Request Report

Dependency issues detected. If you merge this pull request, you will not be alerted to the instances of these issues again.

😵‍💫 Bin script confusion

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack

Consider removing one of the conflicting packages. Packages should only export bin scripts with their name

Package	Bin script	Location
jest@29.2.2 (added)	`jest`	`test-storybooks/external-docs/package.json` via @storybook/react-webpack5@7.0.0-alpha.43, @storybook/preset-react-webpack@7.0.0-alpha.43, jest-specific-snapshot@4.0.0,`test-storybooks/standalone-preview/package.json` via @storybook/react-webpack5@7.0.0-alpha.43, @storybook/preset-react-webpack@7.0.0-alpha.43, jest-specific-snapshot@4.0.0
jest-cli@29.2.2 (added)	`jest`	`test-storybooks/external-docs/package.json` via @storybook/react-webpack5@7.0.0-alpha.43, @storybook/preset-react-webpack@7.0.0-alpha.43, jest-specific-snapshot@4.0.0, jest@29.2.2,`test-storybooks/standalone-preview/package.json` via @storybook/react-webpack5@7.0.0-alpha.43, @storybook/preset-react-webpack@7.0.0-alpha.43, jest-specific-snapshot@4.0.0, jest@29.2.2

Pull request report summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	⚠️ 2 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@2.4.2

@SocketSecurity ignore jest@29.2.2
@SocketSecurity ignore jest-cli@29.2.2

⚠️ Please accept the latest app permissions to ensure bot commands work properly. Accept the new permissions here.

Powered by socket.dev

ethriel3695 · 2022-11-08T01:14:51Z

@JReinhold @tmeasday
It's interesting that the CI process indicates that TurboSnap was disabled because we could not find the git history
https://app.circleci.com/pipelines/github/storybookjs/storybook/31499/workflows/d5673531-0632-4f9a-b824-32c448749599/jobs/437615

Yet, the build in Chromatic clearly indicates that TurboSnap was successful and skipped snapshots as intended.

I ran Chromatic locally and it appears that TurboSnap is working correctly.

Publish complete in 3 minutes 15 seconds
    → View your Storybook at https://635781f3500dd2c49e189caf-cgzyzceemp.chromatic.com
Verifying your Storybook
    → This may take a few minutes
Starting partial build
    → Snapshots will be limited to 0 story files affected by recent changes
✔ TurboSnap enabled
Capturing 0 snapshots and skipping 380 snapshots.
Started build 373
    → View build details at https://www.chromatic.com/build?appId=635781f3500dd2c49e189caf&number=373
✔ Storybook published
We found 72 components with 383 stories.
ℹ View your Storybook at https://635781f3500dd2c49e189caf-cgzyzceemp.chromatic.com

The change runs correctly on storybook:ui however, not for the chromatic-sandboxes job

I've modified the chromatic.ts task and added --only-changed to see if this might resolve the issue

tmeasday

This is good, with a few tweaks.

It's interesting that the CI process indicates that TurboSnap was disabled because we could not find the git history

I think the message here is a little confusing, the issue is that snapshotting is entirely disabled for the storybook-blocks SB right now: https://www.chromatic.com/manage?appId=63591cc9eaf4e8caec2bb5e9

Yet, the build in Chromatic clearly indicates that TurboSnap was successful and skipped snapshots as intended.

You're mixing the two SBs that are tested in that command up, that's the storybook-ui SB which is working fine it seems.

The change runs correctly on storybook:ui however, not for the chromatic-sandboxes job

I've modified the chromatic.ts task and added --only-changed to see if this might resolve the issue

This is a bit trickier, as we would have to inject the vite config into each sandbox. It can be done, but we are looking to heavily reduce the number of sandboxes we run soon anyway. Otherwise we can take a task to do this on the SB team next cycle.

scripts/tasks/chromatic.ts

.circleci/config.yml

JReinhold · 2022-11-08T07:43:34Z

Yeah sorry for the confusion @ethriel3695
Just to make it clear, we have 3 types of sandboxes running:

The UI Storybook - storybook:ui:chromatic, which contains all the manager and block components. This is the one we want TurboSnap for
The Blocks Storybook - storybook:blocks:chromatic. It is just a subset of the UI Storybook that is for public consumption, and we've disabled UI Tests and UI Reviews for this, it's only for publishing purposes - so TurboSnap is irrelevant. Maybe this is what the CLI is trying to tell us, but with a weird error message?
Sandboxes. @tmeasday I don't think we can ever use TurboSnap for these, because they are not checked into git, so there will never be a git history for them? Even if we checked in their webpack stats file I assume that wouldn't be enough, because TS still looks at changes to package.json, yarn.lock, etc.
and 2. both run in the same CI job outside of the sandboxing tasks.

tmeasday · 2022-11-08T11:50:27Z

@JReinhold you might want to change the storybook:blocks:chromatic script to not pass --only-changed then. Or we can just live with the warning 🤷

Sandboxes. @tmeasday I don't think we can ever use TurboSnap for these, because they are not checked into git, so there will never be a git history for them? Even if we checked in their webpack stats file I assume that wouldn't be enough, because TS still looks at changes to package.json, yarn.lock, etc.

Well, hmm. They are in the same git repo. So they will have git changes. But because of the way they are built I don't think TS will work, as all the file changes will be in node_modules. So certainly, I don't think we should use TS for them.

@ethriel3695 as I mentioned we are reducing the number of sandboxes we run by 2-3x currently, FYI.

JReinhold

Changes look good! 💪
I don't know why CI is failing though, some weird Chromatic CLI error.
Could be because you updated the Chromatic version?

Could you try merging next in and see if that fixed it?

IanVS · 2022-11-08T20:56:11Z

Let me know if vite-plugin-turbosnap is ever misbehaving (I wrote it).

tmeasday

🙌

ethriel3695 added 2 commits November 7, 2022 06:31

Add vite-plugin-turbosnap to storybook ui

9bd507f

Merge branch 'next' of github.com:storybookjs/storybook into reuben/a…

6b27668

…dd-turbosnap-for-ui

ethriel3695 added the build Internal-facing build tooling & test updates label Nov 7, 2022

JReinhold reviewed Nov 7, 2022

View reviewed changes

code/tsconfig.json Outdated Show resolved Hide resolved

JReinhold self-assigned this Nov 7, 2022

JReinhold requested changes Nov 7, 2022

View reviewed changes

JReinhold changed the title ~~Reuben/add turbosnap for UI~~ UI: Enable TurboSnap for UI Storybook Nov 7, 2022

Remove accidental tsconfig change and update ci

d51338b

ethriel3695 requested a review from JReinhold November 7, 2022 16:26

ethriel3695 added 3 commits November 7, 2022 09:37

change fetch-depth to 500

5e707f0

Using the correct flag name

66588c2

Change this step to checkout for full git history

3625a40

ethriel3695 added 4 commits November 7, 2022 18:21

Add a comment to ci file

14f5a2d

Update chromatic to latest version

b817a23

Update sandbox chromatic script

b111529

Add debug flag

fc57faf

tmeasday requested changes Nov 8, 2022

View reviewed changes

scripts/tasks/chromatic.ts Outdated Show resolved Hide resolved

.circleci/config.yml Outdated Show resolved Hide resolved

Revert sandbox changes and formatting

af636f4

JReinhold approved these changes Nov 8, 2022

View reviewed changes

ethriel3695 added 2 commits November 8, 2022 06:39

Reverted additional formatting

06e73b4

Reverted the last of the formatting

f172cc2

ethriel3695 requested a review from tmeasday November 8, 2022 13:44

Merge branch 'next' into reuben/add-turbosnap-for-ui

acf38f1

tmeasday approved these changes Nov 8, 2022

View reviewed changes

tmeasday merged commit 6e927f3 into next Nov 8, 2022

tmeasday deleted the reuben/add-turbosnap-for-ui branch November 8, 2022 23:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Enable TurboSnap for UI Storybook #19767

UI: Enable TurboSnap for UI Storybook #19767

ethriel3695 commented Nov 7, 2022

JReinhold left a comment •

edited

Loading

JReinhold left a comment

ethriel3695 commented Nov 7, 2022

socket-security bot commented Nov 7, 2022

ethriel3695 commented Nov 8, 2022 •

edited

Loading

tmeasday left a comment

JReinhold commented Nov 8, 2022

tmeasday commented Nov 8, 2022

JReinhold left a comment •

edited

Loading

IanVS commented Nov 8, 2022

tmeasday left a comment

UI: Enable TurboSnap for UI Storybook #19767

UI: Enable TurboSnap for UI Storybook #19767

Conversation

ethriel3695 commented Nov 7, 2022

What I did

How to test

JReinhold left a comment • edited Loading

Choose a reason for hiding this comment

JReinhold left a comment

Choose a reason for hiding this comment

ethriel3695 commented Nov 7, 2022

socket-security bot commented Nov 7, 2022

Socket Security Pull Request Report

ethriel3695 commented Nov 8, 2022 • edited Loading

tmeasday left a comment

Choose a reason for hiding this comment

JReinhold commented Nov 8, 2022

tmeasday commented Nov 8, 2022

JReinhold left a comment • edited Loading

Choose a reason for hiding this comment

IanVS commented Nov 8, 2022

tmeasday left a comment

Choose a reason for hiding this comment

JReinhold left a comment •

edited

Loading

ethriel3695 commented Nov 8, 2022 •

edited

Loading

JReinhold left a comment •

edited

Loading