Flat ErrorBoundaryState and refactor stories

BrunoQuaresma · BrunoQuaresma · commit c0cfc3cc002c · 2023-09-07T12:47:05.000Z
diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import { Component, ReactNode, PropsWithChildren } from "react";
-import { RuntimeErrorState } from "./RuntimeErrorState/RuntimeErrorState";
+import { RuntimeErrorState } from "./RuntimeErrorState";
 
 type ErrorBoundaryProps = PropsWithChildren<unknown>;
 
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.stories.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RuntimeErrorState } from "./RuntimeErrorState";
+
+const error = new Error("An error occurred");
+
+const meta: Meta<typeof RuntimeErrorState> = {
+  title: "components/RuntimeErrorState",
+  component: RuntimeErrorState,
+  args: {
+    error,
+  },
+  parameters: {
+    // The RuntimeErrorState is noisy for chromatic, because it renders an actual error
+    // along with the stacktrace - and the stacktrace includes the full URL of
+    // scripts in the stack. This is problematic, because every deployment uses
+    // a different URL, causing the validation to fail.
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RuntimeErrorState>;
+
+export const Errored: Story = {};
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
@@ -9,7 +9,7 @@ import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 import { Stack } from "components/Stack/Stack";
 import { FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { Margins } from "../../Margins/Margins";
+import { Margins } from "components/Margins/Margins";
 
 const fetchDynamicallyImportedModuleError =
   "Failed to fetch dynamically imported module";
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState/RuntimeErrorState.stories.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState/RuntimeErrorState.stories.tsx
