Merge pull request #107 from chromaui/ghengeveld/ap-3657-first-build-…

…in-progress-state Show build progress on 'no build' screen
chromaui · Sep 16, 2023 · 05639b3 · 05639b3
2 parents ecacce2 + 70e25d3
commit 05639b3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 26 deletions.
diff --git a/src/components/BuildProgressLabel.stories.tsx b/src/components/BuildProgressLabel.stories.tsx
@@ -37,7 +37,7 @@ export const Upload: Story = {
   args: {
     localBuildProgress: {
       ...INITIAL_BUILD_PAYLOAD,
-      buildProgressPercentage: 50,
+      buildProgressPercentage: 25,
       currentStep: "upload",
       stepProgress: {
         ...INITIAL_BUILD_PAYLOAD.stepProgress,
@@ -58,7 +58,7 @@ export const Verify: Story = {
   args: {
     localBuildProgress: {
       ...INITIAL_BUILD_PAYLOAD,
-      buildProgressPercentage: 75,
+      buildProgressPercentage: 50,
       currentStep: "verify",
     },
   },
@@ -71,7 +71,7 @@ export const Snapshot: Story = {
   args: {
     localBuildProgress: {
       ...INITIAL_BUILD_PAYLOAD,
-      buildProgressPercentage: 90,
+      buildProgressPercentage: 75,
       currentStep: "snapshot",
       stepProgress: {
         ...INITIAL_BUILD_PAYLOAD.stepProgress,

diff --git a/src/components/BuildProgressLabel.tsx b/src/components/BuildProgressLabel.tsx
@@ -5,13 +5,18 @@ import { LocalBuildProgress } from "../types";
 
 interface BuildProgressLabelProps {
   localBuildProgress: LocalBuildProgress;
+  withEmoji?: boolean;
 }
 
-export const BuildProgressLabel = ({ localBuildProgress }: BuildProgressLabelProps) => {
+export const BuildProgressLabel = ({
+  localBuildProgress,
+  withEmoji = false,
+}: BuildProgressLabelProps) => {
   const { emoji, renderProgress } = BUILD_STEP_CONFIG[localBuildProgress.currentStep];
+  const label = renderProgress(localBuildProgress);
   return (
-    <>
-      {emoji} {renderProgress(localBuildProgress)}
-    </>
+    <span>
+      {withEmoji && emoji} {label}
+    </span>
   );
 };
diff --git a/src/components/SidebarTopButton.tsx b/src/components/SidebarTopButton.tsx
@@ -65,7 +65,7 @@ export const SidebarTopButton = ({
         tooltip={
           <TooltipContent>
             <div>
-              <BuildProgressLabel localBuildProgress={localBuildProgress} />
+              <BuildProgressLabel localBuildProgress={localBuildProgress} withEmoji />
             </div>
             <ProgressTrack>
               {typeof buildProgressPercentage === "number" && (

diff --git a/src/screens/VisualTests/BuildEyebrow.tsx b/src/screens/VisualTests/BuildEyebrow.tsx
@@ -160,7 +160,7 @@ export const BuildEyebrow = ({
         <Header onClick={toggleExpanded}>
           <Bar percentage={localBuildProgress.buildProgressPercentage} />
           <Label>
-            <BuildProgressLabel localBuildProgress={localBuildProgress} />
+            <BuildProgressLabel localBuildProgress={localBuildProgress} withEmoji />
           </Label>
           <IconButton as="div">
             {expanded ? <Icons icon="collapse" /> : <Icons icon="expandalt" />}

diff --git a/src/screens/VisualTests/NoBuild.tsx b/src/screens/VisualTests/NoBuild.tsx
@@ -2,20 +2,22 @@ import { Icons, Loader } from "@storybook/components";
 import React from "react";
 import { CombinedError } from "urql";
 
+import { BuildProgressLabel } from "../../components/BuildProgressLabel";
 import { Button } from "../../components/Button";
 import { Container } from "../../components/Container";
 import { FooterMenu } from "../../components/FooterMenu";
 import { Heading } from "../../components/Heading";
-import { ProgressIcon } from "../../components/icons/ProgressIcon";
 import { Bar, Col, Row, Section, Sections, Text } from "../../components/layout";
+import { ProgressBar, ProgressTrack } from "../../components/SidebarTopButton";
 import { Text as CenterText } from "../../components/Text";
+import { LocalBuildProgress } from "../../types";
 
 interface NoBuildProps {
   error: CombinedError;
   hasData: boolean;
   hasStoryBuild: boolean;
   startDevBuild: () => void;
-  isLocalBuildStarting: boolean;
+  localBuildProgress: LocalBuildProgress;
   branch: string;
   setAccessToken: (accessToken: string | null) => void;
 }
@@ -25,7 +27,7 @@ export const NoBuild = ({
   hasData,
   hasStoryBuild,
   startDevBuild,
-  isLocalBuildStarting,
+  localBuildProgress,
   branch,
   setAccessToken,
 }: NoBuildProps) => (
@@ -48,15 +50,26 @@ export const NoBuild = ({
             Take an image snapshot of each story to save their &quot;last known good state&quot; as
             test baselines.
           </CenterText>
-          <br />
-          <Button small secondary onClick={startDevBuild} disabled={isLocalBuildStarting}>
-            {isLocalBuildStarting ? (
-              <ProgressIcon parentComponent="Button" style={{ marginRight: 6 }} />
-            ) : (
-              <Icons icon="play" />
-            )}
-            Take snapshots
-          </Button>
+          {localBuildProgress ? (
+            <CenterText style={{ display: "flex", flexDirection: "column", gap: 10, width: 200 }}>
+              <ProgressTrack>
+                {typeof localBuildProgress.buildProgressPercentage === "number" && (
+                  <ProgressBar
+                    style={{ width: `${localBuildProgress.buildProgressPercentage}%` }}
+                  />
+                )}
+              </ProgressTrack>
+              <BuildProgressLabel localBuildProgress={localBuildProgress} />
+            </CenterText>
+          ) : (
+            <>
+              <br />
+              <Button small secondary onClick={startDevBuild}>
+                <Icons icon="play" />
+                Take snapshots
+              </Button>
+            </>
+          )}
         </Container>
       )}
     </Section>

diff --git a/src/screens/VisualTests/VisualTests.stories.tsx b/src/screens/VisualTests/VisualTests.stories.tsx
@@ -251,6 +251,7 @@ export const EmptyBranchLocalBuildUploading: Story = {
   args: {
     localBuildProgress: {
       ...INITIAL_BUILD_PAYLOAD,
+      buildProgressPercentage: 25,
       currentStep: "upload",
       stepProgress: {
         ...INITIAL_BUILD_PAYLOAD.stepProgress,
@@ -272,7 +273,7 @@ export const EmptyBranchLocalBuildCapturing: Story = {
   args: {
     localBuildProgress: {
       ...INITIAL_BUILD_PAYLOAD,
-      buildProgressPercentage: 60,
+      buildProgressPercentage: 75,
       currentStep: "snapshot",
       stepProgress: {
         ...INITIAL_BUILD_PAYLOAD.stepProgress,

diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
@@ -194,17 +194,14 @@ export const VisualTests = ({
     [canSwitchToLastBuildOnBranch, lastBuildOnBranch?.id, storyId]
   );
 
-  const isLocalBuildStarting =
-    localBuildProgress && !["success", "error"].includes(localBuildProgress.currentStep);
-
   return !selectedBuild || error ? (
     <NoBuild
       {...{
         error,
         hasData: !!data,
         hasStoryBuild: !!selectedBuild,
         startDevBuild,
-        isLocalBuildStarting,
+        localBuildProgress,
         branch: gitInfo.branch,
         setAccessToken,
       }}