From baea32ec1c5024253e695b1ab25f05dbd50eda5c Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 15 Sep 2023 15:55:21 +0200
Subject: [PATCH 1/2] Show build progress on 'no build' screen

---
 src/components/BuildProgressLabel.stories.tsx |  6 ++--
 src/components/BuildProgressLabel.tsx         | 13 +++++---
 src/components/SidebarTopButton.tsx           |  2 +-
 src/screens/VisualTests/BuildEyebrow.tsx      |  2 +-
 src/screens/VisualTests/NoBuild.tsx           | 31 +++++++++++++------
 .../VisualTests/VisualTests.stories.tsx       |  3 +-
 src/screens/VisualTests/VisualTests.tsx       |  5 +--
 7 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/BuildProgressLabel.stories.tsx b/src/components/BuildProgressLabel.stories.tsx
index 0bb72c20..fe2745c3 100644
--- 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
index d64ee821..27d7734e 100644
--- 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
index c9a1aee2..a97733b9 100644
--- 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
index 9c1c6534..978ed6d3 100644
--- 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
index 8b79e199..3cbbcfeb 100644
--- 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) => (
@@ -49,14 +51,23 @@ export const NoBuild = ({
             test baselines.
           </CenterText>
           <br />
-          <Button small secondary onClick={startDevBuild} disabled={isLocalBuildStarting}>
-            {isLocalBuildStarting ? (
-              <ProgressIcon parentComponent="Button" style={{ marginRight: 6 }} />
-            ) : (
+          {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>
+          ) : (
+            <Button small secondary onClick={startDevBuild}>
               <Icons icon="play" />
-            )}
-            Take snapshots
-          </Button>
+              Take snapshots
+            </Button>
+          )}
         </Container>
       )}
     </Section>
diff --git a/src/screens/VisualTests/VisualTests.stories.tsx b/src/screens/VisualTests/VisualTests.stories.tsx
index 3e719ee9..cd2a4b94 100644
--- 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
index f8c80694..73de2fd9 100644
--- a/src/screens/VisualTests/VisualTests.tsx
+++ b/src/screens/VisualTests/VisualTests.tsx
@@ -194,9 +194,6 @@ export const VisualTests = ({
     [canSwitchToLastBuildOnBranch, lastBuildOnBranch?.id, storyId]
   );
 
-  const isLocalBuildStarting =
-    localBuildProgress && !["success", "error"].includes(localBuildProgress.currentStep);
-
   return !selectedBuild || error ? (
     <NoBuild
       {...{
@@ -204,7 +201,7 @@ export const VisualTests = ({
         hasData: !!data,
         hasStoryBuild: !!selectedBuild,
         startDevBuild,
-        isLocalBuildStarting,
+        localBuildProgress,
         branch: gitInfo.branch,
         setAccessToken,
       }}

From 70e25d3cdebc2931a5e33f42748e74c96c0ad9ba Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 15 Sep 2023 16:11:41 +0200
Subject: [PATCH 2/2] Avoid layout shift

---
 src/screens/VisualTests/NoBuild.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/screens/VisualTests/NoBuild.tsx b/src/screens/VisualTests/NoBuild.tsx
index 3cbbcfeb..54aad19a 100644
--- a/src/screens/VisualTests/NoBuild.tsx
+++ b/src/screens/VisualTests/NoBuild.tsx
@@ -50,7 +50,6 @@ export const NoBuild = ({
             Take an image snapshot of each story to save their &quot;last known good state&quot; as
             test baselines.
           </CenterText>
-          <br />
           {localBuildProgress ? (
             <CenterText style={{ display: "flex", flexDirection: "column", gap: 10, width: 200 }}>
               <ProgressTrack>
@@ -63,10 +62,13 @@ export const NoBuild = ({
               <BuildProgressLabel localBuildProgress={localBuildProgress} />
             </CenterText>
           ) : (
-            <Button small secondary onClick={startDevBuild}>
-              <Icons icon="play" />
-              Take snapshots
-            </Button>
+            <>
+              <br />
+              <Button small secondary onClick={startDevBuild}>
+                <Icons icon="play" />
+                Take snapshots
+              </Button>
+            </>
           )}
         </Container>
       )}