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)}
- >
+
+ {withEmoji && emoji} {label}
+
);
};
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={
-
+
{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 = ({
{expanded ? : }
diff --git a/src/screens/VisualTests/NoBuild.tsx b/src/screens/VisualTests/NoBuild.tsx
index 8b79e199..54aad19a 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) => (
@@ -48,15 +50,26 @@ export const NoBuild = ({
Take an image snapshot of each story to save their "last known good state" as
test baselines.
-
-
+ {localBuildProgress ? (
+
+
+ {typeof localBuildProgress.buildProgressPercentage === "number" && (
+
+ )}
+
+
+
+ ) : (
+ <>
+
+
+ >
+ )}
)}
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 ? (