From acbe466f8ff13b67b4c76c5fd8eb6df947f67957 Mon Sep 17 00:00:00 2001
From: Jarel Fryer <jarelfryer@gmail.com>
Date: Fri, 8 Mar 2024 13:28:51 -0600
Subject: [PATCH 1/2] Show screen when there's no dev server

---
 src/Panel.tsx                                 |  5 ++++
 src/SidebarTop.tsx                            |  4 +++
 .../NoDevServer/NoDevServer.stories.tsx       | 11 ++++++++
 src/screens/NoDevServer/NoDevServer.tsx       | 26 +++++++++++++++++++
 src/types.ts                                  |  5 ++++
 types.d.ts                                    |  2 +-
 6 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/screens/NoDevServer/NoDevServer.stories.tsx
 create mode 100644 src/screens/NoDevServer/NoDevServer.tsx

diff --git a/src/Panel.tsx b/src/Panel.tsx
index 39b7227c..9d2dc68a 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -21,6 +21,7 @@ import { GitNotFound } from "./screens/Errors/GitNotFound";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkingProjectFailed } from "./screens/LinkProject/LinkingProjectFailed";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
+import { NoDevServer } from "./screens/NoDevServer/NoDevServer";
 import { UninstallProvider } from "./screens/Uninstalled/UninstallContext";
 import { Uninstalled } from "./screens/Uninstalled/Uninstalled";
 import { ControlsProvider } from "./screens/VisualTests/ControlsContext";
@@ -89,6 +90,10 @@ export const Panel = ({ active, api }: PanelProps) => {
     </Provider>
   );
 
+  if (global.CONFIG_TYPE !== "DEVELOPMENT") {
+    return withProviders(<NoDevServer />);
+  }
+
   if (addonUninstalled) {
     return withProviders(<Uninstalled />);
   }
diff --git a/src/SidebarTop.tsx b/src/SidebarTop.tsx
index d97a88e9..8892b609 100644
--- a/src/SidebarTop.tsx
+++ b/src/SidebarTop.tsx
@@ -161,6 +161,10 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
   if (gitInfoError) warning = "Visual tests locked due to Git synchronization problem.";
   if (hasConfigProblem) warning = "Visual tests locked due to configuration problem.";
 
+  if (global.CONFIG_TYPE !== "DEVELOPMENT") {
+    return null;
+  }
+
   return (
     <SidebarTopButton
       isDisabled={!!warning}
diff --git a/src/screens/NoDevServer/NoDevServer.stories.tsx b/src/screens/NoDevServer/NoDevServer.stories.tsx
new file mode 100644
index 00000000..500cccb5
--- /dev/null
+++ b/src/screens/NoDevServer/NoDevServer.stories.tsx
@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { NoDevServer } from "./NoDevServer";
+
+const meta = {
+  component: NoDevServer,
+} satisfies Meta<typeof NoDevServer>;
+
+export const Default = {} satisfies StoryObj<typeof meta>;
+
+export default meta;
diff --git a/src/screens/NoDevServer/NoDevServer.tsx b/src/screens/NoDevServer/NoDevServer.tsx
new file mode 100644
index 00000000..7c62d07f
--- /dev/null
+++ b/src/screens/NoDevServer/NoDevServer.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { Container } from "../../components/Container";
+import { Heading } from "../../components/Heading";
+import { VisualTestsIcon } from "../../components/icons/VisualTestsIcon";
+import { Screen } from "../../components/Screen";
+import { Stack } from "../../components/Stack";
+import { Text } from "../../components/Text";
+
+export const NoDevServer = () => {
+  return (
+    <Screen footer={null}>
+      <Container>
+        <Stack>
+          <div>
+            <VisualTestsIcon />
+            <Heading>Visual tests</Heading>
+            <Text>
+              Running this addon with the Storybook dev server is not supported at this time.
+            </Text>
+          </div>
+        </Stack>
+      </Container>
+    </Screen>
+  );
+};
diff --git a/src/types.ts b/src/types.ts
index 0181e8a0..956f922e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,6 +3,11 @@ import type { Configuration, getConfiguration, GitInfo, TaskName } from "chromat
 
 import { SelectedBuildFieldsFragment } from "./gql/graphql";
 
+declare global {
+  // eslint-disable-next-line no-var, vars-on-top
+  var CONFIG_TYPE: string;
+}
+
 export type AnnouncedBuild = Extract<SelectedBuildFieldsFragment, { __typename: "AnnouncedBuild" }>;
 export type PublishedBuild = Extract<SelectedBuildFieldsFragment, { __typename: "PublishedBuild" }>;
 export type StartedBuild = Extract<SelectedBuildFieldsFragment, { __typename: "StartedBuild" }>;
diff --git a/types.d.ts b/types.d.ts
index 7ccb1a28..cbfbd10d 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -1,4 +1,4 @@
 declare module "*.png" {
   const content: any;
   export default content;
-}
\ No newline at end of file
+}

From d4d987c6c4a4280629ee257e84181020baf96fae Mon Sep 17 00:00:00 2001
From: Jarel Fryer <jarelfryer@gmail.com>
Date: Fri, 8 Mar 2024 16:39:47 -0600
Subject: [PATCH 2/2] updated messages

---
 src/screens/NoDevServer/NoDevServer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/screens/NoDevServer/NoDevServer.tsx b/src/screens/NoDevServer/NoDevServer.tsx
index 7c62d07f..0d50d118 100644
--- a/src/screens/NoDevServer/NoDevServer.tsx
+++ b/src/screens/NoDevServer/NoDevServer.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { Code } from "../../components/Code";
 import { Container } from "../../components/Container";
 import { Heading } from "../../components/Heading";
 import { VisualTestsIcon } from "../../components/icons/VisualTestsIcon";
@@ -16,7 +17,8 @@ export const NoDevServer = () => {
             <VisualTestsIcon />
             <Heading>Visual tests</Heading>
             <Text>
-              Running this addon with the Storybook dev server is not supported at this time.
+              Visual tests only runs locally. To test this Storybook, clone it to your machine and
+              run <Code>npx storybook dev</Code>.
             </Text>
           </div>
         </Stack>