🧹

coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
commit 6833e6ba49b921c49a2cacd39a4bfc3be770bc47
diff --git a/site/package.json b/site/package.json
@@ -104,7 +104,7 @@
     "@storybook/addon-essentials": "7.5.2",
     "@storybook/addon-links": "7.5.2",
     "@storybook/addon-mdx-gfm": "7.5.2",
-    "@storybook/addon-themes": "^7.6.4",
+    "@storybook/addon-themes": "7.6.4",
     "@storybook/react": "7.5.2",
     "@storybook/react-vite": "7.5.2",
     "@swc/core": "1.3.38",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import { MockUser, MockUser2 } from "testHelpers/entities";
 import { NavbarView } from "./NavbarView";
 
 const meta: Meta<typeof NavbarView> = {
   title: "components/NavbarView",
+  parameters: { chromatic },
   component: NavbarView,
   args: {
     user: MockUser,

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -456,7 +456,7 @@ const styles = {
   },
   link: (theme) => css`
     align-items: center;
-    color: ${theme.colors.gray[6]};
+    color: ${theme.palette.text.secondary};
     display: flex;
     flex: 1;
     font-size: 16px;
@@ -470,7 +470,7 @@ const styles = {
     }
 
     &:hover {
-      background-color: ${theme.palette.action.hover};
+      background-color: ${theme.experimental.l2.hover.background};
     }
 
     ${theme.breakpoints.up("md")} {

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -426,28 +426,14 @@ export const AgentRow: FC<AgentRowProps> = ({
             </AutoSizer>
           </Collapse>
 
-          <div css={styles.logsPanelButtons}>
-            {showLogs ? (
-              <button
-                css={[styles.logsPanelButton, styles.toggleLogsButton]}
-                onClick={() => {
-                  setShowLogs((v) => !v);
-                }}
-              >
-                <DropdownArrow close />
-                Hide logs
-              </button>
-            ) : (
-              <button
-                css={[styles.logsPanelButton, styles.toggleLogsButton]}
-                onClick={() => {
-                  setShowLogs((v) => !v);
-                }}
-              >
-                <DropdownArrow />
-                Show logs
-              </button>
-            )}
+          <div css={{ display: "flex" }}>
+            <button
+              css={styles.logsPanelButton}
+              onClick={() => setShowLogs((v) => !v)}
+            >
+              <DropdownArrow close={showLogs} />
+              {showLogs ? "Hide" : "Show"} logs
+            </button>
           </div>
         </div>
       )}
@@ -673,10 +659,6 @@ const styles = {
     borderTop: `1px solid ${theme.palette.divider}`,
   }),
 
-  logsPanelButtons: {
-    display: "flex",
-  },
-
   logsPanelButton: (theme) => ({
     textAlign: "left",
     background: "transparent",
@@ -689,21 +671,18 @@ const styles = {
     alignItems: "center",
     gap: 8,
     whiteSpace: "nowrap",
+    width: "100%",
 
     "&:hover": {
       color: theme.palette.text.primary,
-      backgroundColor: theme.colors.gray[14],
+      backgroundColor: theme.experimental.l2.hover.background,
     },
 
     "& svg": {
       color: "inherit",
     },
   }),
 
-  toggleLogsButton: {
-    width: "100%",
-  },
-
   buttonSkeleton: {
     borderRadius: 4,
   },

diff --git a/site/src/components/Resources/PortForwardButton.stories.tsx b/site/src/components/Resources/PortForwardButton.stories.tsx
@@ -1,43 +1,31 @@
-import { PortForwardPopoverView } from "./PortForwardButton";
+import { PortForwardButton } from "./PortForwardButton";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   MockListeningPortsResponse,
   MockWorkspaceAgent,
 } from "testHelpers/entities";
 
-const meta: Meta<typeof PortForwardPopoverView> = {
-  title: "components/PortForwardPopoverView",
-  component: PortForwardPopoverView,
-  decorators: [
-    (Story) => (
-      <div
-        css={(theme) => ({
-          width: 304,
-          border: `1px solid ${theme.palette.divider}`,
-          borderRadius: 8,
-          backgroundColor: theme.palette.background.paper,
-        })}
-      >
-        <Story />
-      </div>
-    ),
-  ],
+const meta: Meta<typeof PortForwardButton> = {
+  title: "components/PortForwardButton",
+  component: PortForwardButton,
   args: {
     agent: MockWorkspaceAgent,
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof PortForwardPopoverView>;
+type Story = StoryObj<typeof PortForwardButton>;
 
-export const WithPorts: Story = {
+export const Example: Story = {
   args: {
-    ports: MockListeningPortsResponse.ports,
+    storybook: {
+      portsQueryData: MockListeningPortsResponse,
+    },
   },
 };
 
-export const Empty: Story = {
+export const Loading: Story = {
   args: {
-    ports: [],
+    storybook: {},
   },
 };
diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx
@@ -10,6 +10,7 @@ import { getAgentListeningPorts } from "api/api";
 import type {
   WorkspaceAgent,
   WorkspaceAgentListeningPort,
+  WorkspaceAgentListeningPortsResponse,
 } from "api/typesGenerated";
 import { portForwardURL } from "utils/portForward";
 import { type ClassName, useClassName } from "hooks/useClassName";
@@ -32,34 +33,43 @@ export interface PortForwardButtonProps {
   username: string;
   workspaceName: string;
   agent: WorkspaceAgent;
+
+  /**
+   * Only for use in Storybook
+   */
+  storybook?: {
+    portsQueryData?: WorkspaceAgentListeningPortsResponse;
+  };
 }
 
 export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
-  const { agent } = props;
+  const { agent, storybook } = props;
 
   const paper = useClassName(classNames.paper, []);
 
   const portsQuery = useQuery({
     queryKey: ["portForward", agent.id],
     queryFn: () => getAgentListeningPorts(agent.id),
-    enabled: agent.status === "connected",
+    enabled: !storybook && agent.status === "connected",
     refetchInterval: 5_000,
   });
 
+  const data = storybook ? storybook.portsQueryData : portsQuery.data;
+
   return (
     <Popover>
       <PopoverTrigger>
-        <AgentButton disabled={!portsQuery.data}>
+        <AgentButton disabled={!data}>
           {DisplayAppNameMap["port_forwarding_helper"]}
-          {portsQuery.data ? (
-            <div css={styles.portCount}>{portsQuery.data.ports.length}</div>
+          {data ? (
+            <div css={styles.portCount}>{data.ports.length}</div>
           ) : (
             <CircularProgress size={10} css={{ marginLeft: 8 }} />
           )}
         </AgentButton>
       </PopoverTrigger>
       <PopoverContent horizontal="right" classes={{ paper }}>
-        <PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />
+        <PortForwardPopoverView {...props} ports={data?.ports} />
       </PopoverContent>
     </Popover>
   );
@@ -204,7 +214,7 @@ const styles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.gray[11],
+    backgroundColor: theme.experimental.l2.background,
     marginLeft: 8,
   }),
 

diff --git a/site/src/components/Resources/PortForwardPopoverView.stories.tsx b/site/src/components/Resources/PortForwardPopoverView.stories.tsx
@@ -0,0 +1,43 @@
+import { PortForwardPopoverView } from "./PortForwardButton";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MockListeningPortsResponse,
+  MockWorkspaceAgent,
+} from "testHelpers/entities";
+
+const meta: Meta<typeof PortForwardPopoverView> = {
+  title: "components/PortForwardPopoverView",
+  component: PortForwardPopoverView,
+  decorators: [
+    (Story) => (
+      <div
+        css={(theme) => ({
+          width: 304,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: 8,
+          backgroundColor: theme.palette.background.paper,
+        })}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    agent: MockWorkspaceAgent,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PortForwardPopoverView>;
+
+export const WithPorts: Story = {
+  args: {
+    ports: MockListeningPortsResponse.ports,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    ports: [],
+  },
+};
diff --git a/site/src/components/WorkspaceBuildLogs/Logs.tsx b/site/src/components/WorkspaceBuildLogs/Logs.tsx
@@ -5,6 +5,8 @@ import { type FC, type ReactNode, useMemo } from "react";
 import AnsiToHTML from "ansi-to-html";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
+const convert = new AnsiToHTML();
+
 export interface Line {
   time: string;
   output: string;
@@ -16,9 +18,10 @@ export interface LogsProps {
   lines: Line[];
   hideTimestamps?: boolean;
   className?: string;
+  children?: ReactNode;
 }
 
-export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
+export const Logs: FC<LogsProps> = ({
   hideTimestamps,
   lines,
   className = "",
@@ -50,16 +53,23 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
 
 export const logLineHeight = 20;
 
-const convert = new AnsiToHTML();
-
-export const LogLine: FC<{
+interface LogLineProps {
   line: Line;
   hideTimestamp?: boolean;
   number?: number;
   style?: React.CSSProperties;
   sourceIcon?: ReactNode;
   maxNumber?: number;
-}> = ({ line, hideTimestamp, number, maxNumber, sourceIcon, style }) => {
+}
+
+export const LogLine: FC<LogLineProps> = ({
+  line,
+  hideTimestamp,
+  number,
+  maxNumber,
+  sourceIcon,
+  style,
+}) => {
   const output = useMemo(() => {
     return convert.toHtml(line.output.split(/\r/g).pop() as string);
   }, [line.output]);
@@ -120,15 +130,15 @@ const styles = {
     padding: "0 32px",
 
     "&.error": {
-      backgroundColor: theme.palette.error.dark,
+      backgroundColor: theme.experimental.roles.error.background,
     },
 
     "&.debug": {
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.experimental.roles.info.background,
     },
 
     "&.warn": {
-      backgroundColor: theme.palette.warning.dark,
+      backgroundColor: theme.experimental.roles.warning.background,
     },
   }),
   space: {

diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
@@ -1,9 +1,11 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs";
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import { MockWorkspaceBuildLogs } from "testHelpers/entities";
+import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs";
 
 const meta: Meta<typeof WorkspaceBuildLogs> = {
   title: "components/WorkspaceBuildLogs",
+  parameters: { chromatic },
   component: WorkspaceBuildLogs,
 };
 

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   mockApiError,
   MockTemplate,
@@ -11,6 +12,7 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView";
 
 const meta: Meta<typeof CreateWorkspacePageView> = {
   title: "pages/CreateWorkspacePage",
+  parameters: { chromatic },
   component: CreateWorkspacePageView,
   args: {
     defaultName: "",