Addon Test: Use ProgressSpinner for stop button in Testing Module

[ghengeveld]

What I did

Updated the Testing Module UI to have a progress circle around the stop icon, as was designed. This component originates from the VTA.

Screen.Recording.2024-12-10.at.09.43.20.mov

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	1.48 kB	-0.3	0%
initSize	133 MB	133 MB	8.66 kB	2.98	0%
diffSize	55.1 MB	55.1 MB	7.18 kB	2.96	0%
buildSize	6.87 MB	6.87 MB	3.78 kB	1.23	0.1%
buildSbAddonsSize	1.51 MB	1.51 MB	219 B	3.33	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	2.31 kB	19.19	0.1%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.57 MB	3.57 MB	2.52 kB	6.13	0.1%
buildPreviewSize	3.3 MB	3.3 MB	1.25 kB	1.15	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.4s	6.7s	-631ms	-0.62	-9.3%
generateTime	21.5s	19.1s	-2s -416ms	-0.82	-12.6%
initTime	13.5s	12.6s	-927ms	-0.93	-7.3%
buildTime	8.3s	10.3s	1.9s	2.63	🔺18.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.7s	4.4s	-1s -256ms	-1.09	-28%
devManagerResponsive	4.2s	3.2s	-970ms	-1.16	-29.5%
devManagerHeaderVisible	576ms	500ms	-76ms	-1.07	-15.2%
devManagerIndexVisible	677ms	529ms	-148ms	-1.28	🔰-28%
devStoryVisibleUncached	1.9s	1.8s	-154ms	0.12	-8.6%
devStoryVisible	673ms	528ms	-145ms	-1.25	🔰-27.5%
devAutodocsVisible	686ms	448ms	-238ms	-1.07	-53.1%
devMDXVisible	562ms	437ms	-125ms	-1.03	-28.6%
buildManagerHeaderVisible	748ms	538ms	-210ms	-0.51	-39%
buildManagerIndexVisible	757ms	619ms	-138ms	-0.48	-22.3%
buildStoryVisible	596ms	497ms	-99ms	-0.42	-19.9%
buildAutodocsVisible	426ms	384ms	-42ms	-1.11	-10.9%
buildMDXVisible	510ms	394ms	-116ms	-0.91	-29.4%

Greptile Summary

Introduces a new ProgressSpinner component to replace the stop button in the Testing Module with a circular progress indicator, providing visual feedback during test execution.

• Added code/core/src/components/components/ProgressSpinner/ProgressSpinner.tsx with SVG-based circular progress indicator and configurable styling
• Modified code/addons/test/src/components/TestProviderRender.tsx to integrate ProgressSpinner around stop button
• Added progress calculation in code/addons/test/src/node/reporter.ts based on test completion status
• Added comprehensive stories in ProgressSpinner.stories.tsx demonstrating various states and configurations
• Added 'none' padding option to Button component to accommodate the new spinner UI

[greptile-apps]

_{8 file(s) reviewed, 8 comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 940dbd7. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.