generated from storybookjs/addon-kit
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main' into tom/ap-3633-show-snap…
…shot-outdated-header-as-soon-as-we-have-a-new
- Loading branch information
Showing
18 changed files
with
542 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { type API, useChannel } from "@storybook/manager-api"; | ||
| import { color } from "@storybook/theming"; | ||
| import pluralize from "pluralize"; | ||
| import React, { useEffect, useRef } from "react"; | ||
|
|
||
| import { SidebarTopButton } from "./components/SidebarTopButton"; | ||
| import { | ||
| ADDON_ID, | ||
| IS_OUTDATED, | ||
| RUNNING_BUILD, | ||
| RunningBuildPayload, | ||
| START_BUILD, | ||
| } from "./constants"; | ||
| import { useAddonState } from "./useAddonState/manager"; | ||
| import { useAccessToken } from "./utils/graphQLClient"; | ||
| import { useProjectId } from "./utils/useProjectId"; | ||
|
|
||
| interface SidebarTopProps { | ||
| api: API; | ||
| } | ||
|
|
||
| export const SidebarTop = ({ api }: SidebarTopProps) => { | ||
| const { addNotification, clearNotification } = api; | ||
|
|
||
| const { projectId } = useProjectId(); | ||
| const [accessToken] = useAccessToken(); | ||
| const isLoggedIn = !!accessToken; | ||
|
|
||
| const [isOutdated] = useAddonState<boolean>(IS_OUTDATED); | ||
| const [runningBuild] = useAddonState<RunningBuildPayload>(RUNNING_BUILD); | ||
| const isRunning = !!runningBuild && runningBuild.step !== "complete"; | ||
|
|
||
| const lastStep = useRef(runningBuild?.step); | ||
| useEffect(() => { | ||
| if (runningBuild?.step === lastStep.current) return; | ||
| lastStep.current = runningBuild?.step; | ||
|
|
||
| if (runningBuild?.step === "initialize") { | ||
| addNotification({ | ||
| id: `${ADDON_ID}/build-initialize`, | ||
| content: { | ||
| headline: "Build started", | ||
| subHeadline: "Check the Storybook process on the command line for more details.", | ||
| }, | ||
| icon: { | ||
| name: "passed", | ||
| color: color.positive, | ||
| }, | ||
| link: undefined, | ||
| }); | ||
| setTimeout(() => clearNotification(`${ADDON_ID}/build-initialize`), 10_000); | ||
| } | ||
|
|
||
| if (runningBuild?.step === "complete") { | ||
| addNotification({ | ||
| id: `${ADDON_ID}/build-complete`, | ||
| content: { | ||
| headline: "Build complete", | ||
| // eslint-disable-next-line no-nested-ternary | ||
| subHeadline: runningBuild.errorCount | ||
| ? `Encountered ${pluralize("component error", runningBuild.errorCount, true)}` | ||
| : runningBuild.changeCount | ||
| ? `Found ${pluralize("change", runningBuild.changeCount, true)}` | ||
| : "No visual changes detected", | ||
| }, | ||
| icon: { | ||
| name: "passed", | ||
| color: color.positive, | ||
| }, | ||
| link: undefined, | ||
| }); | ||
| setTimeout(() => clearNotification(`${ADDON_ID}/build-complete`), 10_000); | ||
| } | ||
|
|
||
| if (runningBuild?.step === "error") { | ||
| addNotification({ | ||
| id: `${ADDON_ID}/build-error`, | ||
| content: { | ||
| headline: "Build error", | ||
| subHeadline: "Check the Storybook process on the command line for more details.", | ||
| }, | ||
| icon: { | ||
| name: "failed", | ||
| color: color.negative, | ||
| }, | ||
| link: undefined, | ||
| }); | ||
| } | ||
| }, [ | ||
| addNotification, | ||
| clearNotification, | ||
| runningBuild?.step, | ||
| runningBuild?.errorCount, | ||
| runningBuild?.changeCount, | ||
| ]); | ||
|
|
||
| const emit = useChannel({}); | ||
| const startBuild = () => emit(START_BUILD); | ||
|
|
||
| if (!projectId || isLoggedIn === false) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <SidebarTopButton | ||
| isOutdated={isOutdated} | ||
| isRunning={isRunning} | ||
| runningBuild={runningBuild} | ||
| startBuild={startBuild} | ||
| /> | ||
| ); | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from "react"; | ||
|
|
||
| import { RunningBuildPayload } from "../constants"; | ||
|
|
||
| const messageMap: Record<RunningBuildPayload["step"], (payload: RunningBuildPayload) => string> = { | ||
| initialize: () => `📦 Validating Storybook files...`, | ||
| build: () => `📦 Validating Storybook files...`, | ||
| upload: () => `📡 Uploading to Chromatic...`, // TODO represent progress in bytes | ||
| verify: () => `🛠️ Initiating build...`, // TODO build number | ||
| snapshot: () => `👀 Running visual tests...`, // TODO count | ||
| complete: () => `🎉 Visual tests completed!`, | ||
| error: () => `❌ Build failed`, // TODO error | ||
| }; | ||
|
|
||
| interface BuildProgressLabelProps { | ||
| runningBuild: RunningBuildPayload; | ||
| } | ||
|
|
||
| export const BuildProgressLabel = ({ runningBuild }: BuildProgressLabelProps) => ( | ||
| <>{messageMap[runningBuild.step](runningBuild)}</> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { action } from "@storybook/addon-actions"; | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { userEvent, within } from "@storybook/testing-library"; | ||
|
|
||
| import { playAll } from "../utils/playAll"; | ||
| import { SidebarTopButton } from "./SidebarTopButton"; | ||
|
|
||
| const meta = { | ||
| component: SidebarTopButton, | ||
| args: { | ||
| startBuild: action("startBuild"), | ||
| }, | ||
| } satisfies Meta<typeof SidebarTopButton>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| play: playAll(async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const button = await canvas.findByRole("button", { name: "Run tests" }); | ||
| await userEvent.click(button); | ||
| }), | ||
| }; | ||
|
|
||
| export const Outdated: Story = { | ||
| args: { | ||
| isOutdated: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const IsRunning: Story = { | ||
| args: { | ||
| isRunning: true, | ||
| runningBuild: { | ||
| step: "build", | ||
| buildProgressPercentage: 40, | ||
| }, | ||
| }, | ||
| play: playAll(async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const button = await canvas.findByRole("button", { name: "Run tests" }); | ||
| await userEvent.hover(button); | ||
| }), | ||
| }; |
Oops, something went wrong.