fix(site): fix storybook error and inconsistent snapshots (#9010)

BrunoQuaresma · web-flow · commit c0d1cacc4946 · 2023-08-09T21:22:13.000Z
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -201,7 +201,8 @@ const StaticWidth = (props: BoxProps) => {
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (!ref.current) {
+    // Ignore this in storybook
+    if (!ref.current || process.env.STORYBOOK === "true") {
       return
     }
 
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -1,46 +1,67 @@
-import { ComponentMeta, Story } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import { mockApiError, MockDeploymentDAUResponse } from "testHelpers/entities"
-import {
-  GeneralSettingsPageView,
-  GeneralSettingsPageViewProps,
-} from "./GeneralSettingsPageView"
+import { GeneralSettingsPageView } from "./GeneralSettingsPageView"
 
-export default {
+const meta: Meta<typeof GeneralSettingsPageView> = {
   title: "pages/GeneralSettingsPageView",
   component: GeneralSettingsPageView,
   args: {
     deploymentOptions: [
       {
         name: "Access URL",
         description:
-          "External URL to access your deployment. This must be accessible by all provisioned workspaces.",
+          "The URL that users will use to access the Coder deployment.",
+        flag: "access-url",
+        flag_shorthand: "",
         value: "https://dev.coder.com",
+        hidden: false,
       },
       {
         name: "Wildcard Access URL",
         description:
           'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".',
+        flag: "wildcard-access-url",
+        flag_shorthand: "",
         value: "*--apps.dev.coder.com",
+        hidden: false,
+      },
+      {
+        name: "Experiments",
+        description:
+          "Enable one or more experiments. These are not ready for production. Separate multiple experiments with commas, or enter '*' to opt-in to all available experiments.",
+        flag: "experiments",
+        value: [
+          "*",
+          "moons",
+          "workspace_actions",
+          "single_tailnet",
+          "deployment_health_page",
+          "template_parameters_insights",
+        ],
+        flag_shorthand: "",
+        hidden: false,
       },
     ],
     deploymentDAUs: MockDeploymentDAUResponse,
   },
-} as ComponentMeta<typeof GeneralSettingsPageView>
+}
+
+export default meta
+type Story = StoryObj<typeof GeneralSettingsPageView>
 
-const Template: Story<GeneralSettingsPageViewProps> = (args) => (
-  <GeneralSettingsPageView {...args} />
-)
-export const Page = Template.bind({})
+export const Page: Story = {}
 
-export const NoDAUs = Template.bind({})
-NoDAUs.args = {
-  deploymentDAUs: undefined,
+export const NoDAUs: Story = {
+  args: {
+    deploymentDAUs: undefined,
+  },
 }
 
-export const DAUError = Template.bind({})
-DAUError.args = {
-  deploymentDAUs: undefined,
-  getDeploymentDAUsError: mockApiError({
-    message: "Error fetching DAUs.",
-  }),
+export const DAUError: Story = {
+  args: {
+    deploymentDAUs: undefined,
+    getDeploymentDAUsError: mockApiError({
+      message: "Error fetching DAUs.",
+    }),
+  },
 }
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
@@ -12,6 +12,11 @@ export const WorkspaceBuildLogsSection = ({
   const scrollRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
+    // Auto scrolling makes hard to snapshot test using Chromatic
+    if (process.env.STORYBOOK === "true") {
+      return
+    }
+
     const scrollEl = scrollRef.current
     if (scrollEl) {
       scrollEl.scrollTop = scrollEl.scrollHeight

Original file line number	Diff line number	Diff line change
`@@ -201,7 +201,8 @@ const StaticWidth = (props: BoxProps) => {`
`201`	`201`	`const ref = useRef<HTMLDivElement>(null)`
`202`	`202`
`203`	`203`	`useEffect(() => {`
`204`		`- if (!ref.current) {`
	`204`	`+ // Ignore this in storybook`
	`205`	`+ if (!ref.current \|\| process.env.STORYBOOK === "true") {`
`205`	`206`	`return`
`206`	`207`	`}`
`207`	`208`