next round

coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
commit c22a879b11e0f5a1c53c2f1f37242cf10473012a
@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockPrimaryWorkspaceProxy,
   MockWorkspaceProxies,
@@ -21,7 +23,6 @@ import {
 } from "testHelpers/entities";
 import { AgentRow, LineWithID } from "./AgentRow";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const defaultAgentMetadata = [
   {
@@ -102,6 +103,7 @@ const storybookLogs: LineWithID[] = [
 
 const meta: Meta<typeof AgentRow> = {
   title: "components/AgentRow",
+  parameters: { chromatic },
   component: AgentRow,
   args: {
     storybookLogs,

@@ -1,9 +1,11 @@
-import { TemplateVersionParameter } from "api/typesGenerated";
-import { RichParameterInput } from "./RichParameterInput";
 import type { Meta, StoryObj } from "@storybook/react";
+import type { TemplateVersionParameter } from "api/typesGenerated";
+import { chromatic } from "testHelpers/chromatic";
+import { RichParameterInput } from "./RichParameterInput";
 
 const meta: Meta<typeof RichParameterInput> = {
   title: "components/RichParameterInput",
+  parameters: { chromatic },
   component: RichParameterInput,
 };
 

@@ -4,6 +4,8 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockAuditLog,
   MockAuditLog2,
@@ -12,7 +14,6 @@ import {
   MockAuditLogGitSSH,
 } from "testHelpers/entities";
 import { AuditLogRow } from "./AuditLogRow";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof AuditLogRow> = {
   title: "pages/AuditPage/AuditLogRow",
@@ -48,13 +49,15 @@ export const NoDiff: Story = {
 };
 
 export const WithDiff: Story = {
+  parameters: { chromatic },
   args: {
     auditLog: MockAuditLog2,
     defaultIsDiffOpen: true,
   },
 };
 
 export const WithLongDiffRow: Story = {
+  parameters: { chromatic },
   args: {
     auditLog: {
       ...MockAuditLog2,

@@ -1,12 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { type ComponentProps } from "react";
+import { chromaticWithTablet } from "testHelpers/chromatic";
 import { MockAuditLog, MockAuditLog2, MockUser } from "testHelpers/entities";
-import { AuditPageView } from "./AuditPageView";
-import { ComponentProps } from "react";
 import {
   mockInitialRenderResult,
   mockSuccessResult,
 } from "components/PaginationWidget/PaginationContainer.mocks";
 import { type UsePaginatedQueryResult } from "hooks/usePaginatedQuery";
+import { AuditPageView } from "./AuditPageView";
 
 import {
   MockMenu,
@@ -43,6 +44,7 @@ export default meta;
 type Story = StoryObj<typeof AuditPageView>;
 
 export const AuditPage: Story = {
+  parameters: { chromatic: chromaticWithTablet },
   args: {
     auditsQuery: mockSuccessResult,
   },
@@ -84,12 +86,3 @@ export const NotVisible: Story = {
     auditsQuery: mockInitialRenderResult,
   },
 };
-
-export const AuditPageSmallViewport: Story = {
-  args: {
-    auditsQuery: mockSuccessResult,
-  },
-  parameters: {
-    chromatic: { viewports: [600] },
-  },
-};
@@ -25,13 +25,14 @@ import {
   defaultSchedule,
   emptySchedule,
 } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/schedule";
-import { ChangeEvent, FC } from "react";
+import { type ChangeEvent, type FC } from "react";
 import * as Yup from "yup";
 import { getFormHelpers } from "utils/formUtils";
 import { timeZones } from "utils/timeZones";
 import { Pill } from "components/Pill/Pill";
 import Tooltip from "@mui/material/Tooltip";
 import { formatDuration, intervalToDuration } from "date-fns";
+import { DisabledBadge } from "components/Badges/Badges";
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
 //         sorted alphabetically.
@@ -290,7 +291,7 @@ export const WorkspaceScheduleForm: FC<
             </div>
             {!enableAutoStart && (
               <Tooltip title="This option can be enabled in the template settings">
-                <Pill text="Disabled" />
+                <DisabledBadge />
               </Tooltip>
             )}
           </>
@@ -378,7 +379,7 @@ export const WorkspaceScheduleForm: FC<
             </div>
             {!enableAutoStop && (
               <Tooltip title="This option can be enabled in the template settings">
-                <Pill text="Disabled" />
+                <DisabledBadge />
               </Tooltip>
             )}
           </>

@@ -69,7 +69,7 @@ export default {
     error: {
       background: colors.red[950],
       outline: colors.red[500],
-      fill: colors.red[600],
+      fill: colors.red[400],
       text: colors.red[50],
     },
     warning: {