chore(site): Upgrade storybook to 7.0.4 (#7127)

.github/workflows/ci.yaml

@@ -634,6 +634,9 @@ jobs:
       - name: Publish to Chromatic (non-mainline)
         if: github.ref != 'refs/heads/main' && github.repository_owner == 'coder'
         uses: chromaui/action@v1
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          STORYBOOK: true
         with:
           buildScriptName: "storybook:build"
           exitOnceUploaded: true
@@ -651,6 +654,9 @@ jobs:
       - name: Publish to Chromatic (mainline)
         if: github.ref == 'refs/heads/main' && github.repository_owner == 'coder'
         uses: chromaui/action@v1
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          STORYBOOK: true
         with:
           autoAcceptChanges: true
           buildScriptName: "storybook:build"

site/.storybook/main.js

@@ -1,49 +1,14 @@
-/**
- * @fileoverview This file is configures Storybook
- *
- * @see <https://storybook.js.org/docs/react/configure/overview>
- */
-const path = require("path")
-
 module.exports = {
-  // Automatically loads all stories in source ending in 'stories.tsx'
-  //
-  // SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading
   stories: ["../src/**/*.stories.tsx"],
-
-  // addons are official and community plugins to extend Storybook.
-  //
-  // SEE: https://storybook.js.org/addons
   addons: [
     "@storybook/addon-links",
-    {
+    "@storybook/addon-essentials",
-      name: "@storybook/addon-essentials",
+    "@storybook/addon-mdx-gfm",
-      options: {
+    "@storybook/addon-actions",
-        actions: false,
-      },
-    },
   ],
-
-  // SEE: https://storybook.js.org/docs/react/configure/babel
-  babel: async (options) => ({
-    ...options,
-    plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
-  }),
-
-  // Static files loaded by storybook, relative to this file.
-  //
-  // SEE: https://storybook.js.org/docs/react/configure/overview#using-storybook-api
   staticDirs: ["../static"],
-
+  framework: {
-  // Storybook internally uses its own Webpack configuration instead of ours.
+    name: "@storybook/react-vite",
-  //
+    options: {},
-  // SEE: https://storybook.js.org/docs/react/configure/webpack
-  webpackFinal: async (config) => {
-    config.resolve.modules = [
-      path.resolve(__dirname, ".."),
-      "node_modules",
-      "../src",
-    ]
-    return config
   },
 }

site/.storybook/preview.jsx

@@ -1,35 +1,32 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { createMemoryHistory } from "history"
-import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
 import "../src/i18n"
 
-addDecorator((story) => (
-  <ThemeProvider theme={dark}>
-    <CssBaseline />
-    {story()}
-  </ThemeProvider>
-))
-
 const history = createMemoryHistory()
 
-const routerDecorator = (Story) => {
+export const decorators = [
-  return (
+  (Story) => (
-    <HistoryRouter history={history}>
+    <ThemeProvider theme={dark}>
+      <CssBaseline />
       <Story />
-    </HistoryRouter>
+    </ThemeProvider>
-  )
+  ),
-}
+  (Story) => {
-
+    return (
-addDecorator(routerDecorator)
+      <HistoryRouter history={history}>
+        <Story />
+      </HistoryRouter>
+    )
+  },
+]
 
 export const parameters = {
   actions: {
-    argTypesRegex: "^on[A-Z].*",
+    argTypesRegex: "^(on|handler)[A-Z].*",
-    argTypesRegex: "^handle[A-Z].*",
   },
   controls: {
     expanded: true,

site/package.json

@@ -17,8 +17,8 @@
     "lint:fix": "FIX=true yarn lint",
     "playwright:install": "playwright install --with-deps chromium",
     "playwright:test": "playwright test --config=e2e/playwright.config.ts",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "STORYBOOK=true storybook dev -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook:build": "storybook build",
     "test": "jest --selectProjects test",
     "test:ci": "jest --selectProjects test --silent",
     "test:coverage": "jest --selectProjects test --collectCoverage",
@@ -54,7 +54,7 @@
     "date-fns": "2.29.3",
     "dayjs": "1.11.4",
     "emoji-mart": "5.4.0",
-    "eslint-plugin-testing-library": "^5.10.2",
+    "eslint-plugin-testing-library": "5.10.2",
     "eventsourcemock": "2.0.0",
     "formik": "2.2.9",
     "front-matter": "4.0.2",
@@ -75,8 +75,8 @@
     "react-markdown": "8.0.3",
     "react-router-dom": "6.4.1",
     "react-syntax-highlighter": "15.5.0",
-    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-virtualized-auto-sizer": "1.0.7",
-    "react-window": "^1.8.8",
+    "react-window": "1.8.8",
     "remark-gfm": "3.0.1",
     "rollup-plugin-visualizer": "5.9.0",
     "sourcemapped-stacktrace": "1.1.11",
@@ -84,7 +84,7 @@
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.33",
     "uuid": "9.0.0",
-    "vite": "3.1.3",
+    "vite": "4.2.1",
     "xstate": "4.33.5",
     "xterm": "4.19.0",
     "xterm-addon-fit": "0.5.0",
@@ -93,10 +93,11 @@
   },
   "devDependencies": {
     "@playwright/test": "1.29.2",
-    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-actions": "7.0.4",
-    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-essentials": "7.0.4",
-    "@storybook/addon-links": "6.5.9",
+    "@storybook/addon-links": "7.0.4",
-    "@storybook/react": "6.5.12",
+    "@storybook/addon-mdx-gfm": "7.0.4",
+    "@storybook/react-vite": "7.0.4",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "5.16.5",
@@ -127,6 +128,7 @@
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.1",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-unicorn": "44.0.0",
     "jest": "29.5.0",
     "jest-canvas-mock": "2.4.0",
@@ -139,7 +141,7 @@
     "prettier": "2.8.1",
     "resize-observer": "1.0.4",
     "semver": "7.3.7",
-    "storybook-addon-mock": "^3.2.0",
+    "storybook": "7.0.4",
     "storybook-react-context": "^0.6.0",
     "typescript": "4.8.2"
   },

site/src/components/AppLink/AppLink.tsx

@@ -5,9 +5,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
 import { FC } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import * as TypesGen from "../../api/typesGenerated"
-import { generateRandomString } from "../../util/random"
+import { generateRandomString } from "../../utils/random"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
 

site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { AuditLog } from "api/typesGenerated"
 import { colors } from "theme/colors"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { FC } from "react"
 
 const getDiffValue = (value: unknown): string => {

site/src/components/Avatar/Avatar.tsx

@@ -5,7 +5,7 @@ import MuiAvatar, {
 } from "@material-ui/core/Avatar"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { firstLetter } from "./firstLetter"
 
 export type AvatarProps = MuiAvatarProps & {

site/src/components/BorderedMenuRow/BorderedMenuRow.tsx

@@ -4,7 +4,7 @@ import SvgIcon from "@material-ui/core/SvgIcon"
 import CheckIcon from "@material-ui/icons/Check"
 import { FC } from "react"
 import { NavLink } from "react-router-dom"
-import { ellipsizeText } from "../../util/ellipsizeText"
+import { ellipsizeText } from "../../utils/ellipsizeText"
 import { Typography } from "../Typography/Typography"
 
 type BorderedMenuRowVariant = "narrow" | "wide"

site/src/components/BuildsTable/BuildAvatar.tsx

@@ -5,7 +5,7 @@ import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined"
 import PauseOutlined from "@material-ui/icons/PauseOutlined"
 import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
 import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
-import { getDisplayWorkspaceBuildStatus } from "util/workspace"
+import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
 import { PaletteIndex } from "theme/palettes"
 import { Avatar, AvatarProps } from "components/Avatar/Avatar"
 

site/src/components/BuildsTable/BuildRow.tsx

@@ -10,7 +10,7 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import {
   displayWorkspaceBuildDuration,
   getDisplayWorkspaceBuildInitiatedBy,
-} from "util/workspace"
+} from "utils/workspace"
 import { BuildAvatar } from "./BuildAvatar"
 
 export interface BuildRowProps {

site/src/components/CodeBlock/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { FC, Fragment, ReactElement } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 export interface CodeBlockProps {
   lines: string[]

site/src/components/CodeExample/CodeExample.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { CopyButton } from "../CopyButton/CopyButton"
 
 export interface CodeExampleProps {

site/src/components/CopyButton/CopyButton.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import { useClipboard } from "hooks/useClipboard"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { FileCopyIcon } from "../Icons/FileCopyIcon"
 
 interface CopyButtonProps {

site/src/components/CopyableValue/CopyableValue.tsx

@@ -3,7 +3,7 @@ import Tooltip from "@material-ui/core/Tooltip"
 import { useClickable } from "hooks/useClickable"
 import { useClipboard } from "hooks/useClipboard"
 import { FC, HTMLProps } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
   value: string

site/src/components/CreateUserForm/CreateUserForm.tsx

@@ -8,7 +8,7 @@ import {
   getFormHelpers,
   nameValidator,
   onChangeTrimmed,
-} from "../../util/formUtils"
+} from "../../utils/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
 import { Stack } from "../Stack/Stack"

site/src/components/DeploySettingsLayout/Badges.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { Stack } from "components/Stack/Stack"
 import { PropsWithChildren, FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export const EnabledBadge: FC = () => {
   const styles = useStyles()

site/src/components/DeploySettingsLayout/Sidebar.tsx

@@ -8,7 +8,7 @@ import { GitIcon } from "components/Icons/GitIcon"
 import { Stack } from "components/Stack/Stack"
 import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
 import { NavLink } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 const SidebarNavItem: FC<
   PropsWithChildren<{ href: string; icon: ReactNode }>

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -6,22 +6,16 @@ export default {
   title: "Components/Dialogs/ConfirmDialog",
   component: ConfirmDialog,
   argTypes: {
-    onClose: {
-      action: "onClose",
-      defaultValue: action("onClose"),
-    },
-    onConfirm: {
-      action: "onConfirm",
-      defaultValue: action("onConfirm"),
-    },
     open: {
       control: "boolean",
-      defaultValue: true,
-    },
-    title: {
-      defaultValue: "Confirm Dialog",
     },
   },
+  args: {
+    onClose: action("onClose"),
+    onConfirm: action("onConfirm"),
+    open: true,
+    title: "Confirm Dialog",
+  },
 } as ComponentMeta<typeof ConfirmDialog>
 
 const Template: Story<ConfirmDialogProps> = (args) => (

site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx

@@ -6,29 +6,18 @@ export default {
   title: "Components/Dialogs/DeleteDialog",
   component: DeleteDialog,
   argTypes: {
-    onCancel: {
-      action: "onClose",
-      defaultValue: action("onClose"),
-    },
-    onConfirm: {
-      action: "onConfirm",
-      defaultValue: action("onConfirm"),
-    },
     open: {
       control: "boolean",
-      defaultValue: true,
-    },
-    entity: {
-      defaultValue: "foo",
-    },
-    name: {
-      defaultValue: "MyFoo",
-    },
-    info: {
-      defaultValue:
-        "Here's some info about the foo so you know you're deleting the right one.",
     },
   },
+  args: {
+    onCancel: action("onClose"),
+    onConfirm: action("onConfirm"),
+    open: true,
+    entity: "foo",
+    name: "MyFoo",
+    info: "Here's some info about the foo so you know you're deleting the right one.",
+  },
 } as ComponentMeta<typeof DeleteDialog>
 
 const Template: Story<DeleteDialogProps> = (args) => <DeleteDialog {...args} />

site/src/components/Dialogs/Dialog.tsx

@@ -4,7 +4,7 @@ import MuiDialog, {
 import { alpha, darken, makeStyles } from "@material-ui/core/styles"
 import * as React from "react"
 import { colors } from "theme/colors"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import {
   LoadingButton,
   LoadingButtonProps,

site/src/components/DropdownButton/ActionCtas.tsx

@@ -11,7 +11,7 @@ import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
 import { LoadingButton } from "components/LoadingButton/LoadingButton"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
 
 interface WorkspaceAction {

site/src/components/EmptyState/EmptyState.tsx

@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { FC, ReactNode } from "react"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */

site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx

@@ -5,7 +5,7 @@ import Snackbar, {
 import { makeStyles } from "@material-ui/core/styles"
 import CloseIcon from "@material-ui/icons/Close"
 import { FC } from "react"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 type EnterpriseSnackbarVariant = "error" | "info" | "success"
 

site/src/components/Expander/Expander.tsx

@@ -7,7 +7,7 @@ import {
 import { PropsWithChildren, FC } from "react"
 import Collapse from "@material-ui/core/Collapse"
 import { useTranslation } from "react-i18next"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export interface ExpanderProps {
   expanded: boolean

site/src/components/Form/Form.tsx

@@ -11,7 +11,7 @@ import {
   PropsWithChildren,
   useContext,
 } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 type FormContextValue = { direction?: "horizontal" | "vertical" }
 

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useCallback, useState, FC } from "react"
 import { useCustomEvent } from "../../hooks/events"
-import { CustomEventListener } from "../../util/events"
+import { CustomEventListener } from "../../utils/events"
 import { EnterpriseSnackbar } from "../EnterpriseSnackbar/EnterpriseSnackbar"
 import { ErrorIcon } from "../Icons/ErrorIcon"
 import { Typography } from "../Typography/Typography"

site/src/components/GlobalSnackbar/utils.ts

@@ -1,4 +1,4 @@
-import { dispatchCustomEvent } from "../../util/events"
+import { dispatchCustomEvent } from "../../utils/events"
 
 ///////////////////////////////////////////////////////////////////////////////
 // Notification Types

site/src/components/LoadingButton/LoadingButton.stories.tsx

@@ -5,8 +5,11 @@ export default {
   title: "components/LoadingButton",
   component: LoadingButton,
   argTypes: {
-    loading: { control: { type: "boolean" } },
+    loading: { control: "boolean" },
-    children: { control: "text", defaultValue: "Create workspace" },
+    children: { control: "text" },
+  },
+  args: {
+    children: "Create workspace",
   },
 }
 

site/src/components/Logs/Logs.tsx

@@ -3,7 +3,7 @@ import { LogLevel } from "api/typesGenerated"
 import dayjs from "dayjs"
 import { FC, useMemo } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import AnsiToHTML from "ansi-to-html"
 
 export interface Line {

site/src/components/NavbarView/NavbarView.tsx

@@ -10,7 +10,7 @@ import { NavLink, useLocation } from "react-router-dom"
 import { colors } from "theme/colors"
 import * as TypesGen from "../../api/typesGenerated"
 import { navHeight } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`

site/src/components/PageHeader/PageHeader.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { PropsWithChildren, FC } from "react"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { Stack } from "../Stack/Stack"
 
 export interface PageHeaderProps {

site/src/components/PaginationWidget/PaginationWidget.stories.tsx

@@ -5,19 +5,11 @@ import { createPaginationRef } from "./utils"
 export default {
   title: "components/PaginationWidget",
   component: PaginationWidget,
-  argTypes: {
+  args: {
-    prevLabel: {
+    prevLabel: "Previous",
-      defaultValue: "Previous",
+    nextLabel: "Next",
-    },
+    paginationRef: createPaginationRef({ page: 1, limit: 12 }),
-    nextLabel: {
+    numRecords: 200,
-      defaultValue: "Next",
-    },
-    paginationRef: {
-      defaultValue: createPaginationRef({ page: 1, limit: 12 }),
-    },
-    numRecords: {
-      defaultValue: 200,
-    },
   },
 }
 

site/src/components/Pill/Pill.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import { FC } from "react"
 import { PaletteIndex } from "theme/palettes"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export interface PillProps {
   className?: string

site/src/components/RequireAuth/RequireAuth.tsx

@@ -2,7 +2,7 @@ import { useAuth } from "components/AuthProvider/AuthProvider"
 import { FC } from "react"
 import { Navigate, useLocation } from "react-router"
 import { Outlet } from "react-router-dom"
-import { embedRedirect } from "../../util/redirect"
+import { embedRedirect } from "../../utils/redirect"
 import { FullScreenLoader } from "../Loader/FullScreenLoader"
 
 export const RequireAuth: FC = () => {

site/src/components/Resources/AgentMetadata.tsx

@@ -19,6 +19,7 @@ import {
   useRef,
   useState,
 } from "react"
+import { humanDuration } from "utils/duration"
 
 export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
 
@@ -135,7 +136,6 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
         <div
           className={styles.metadataLabel}
           onMouseEnter={() => setIsOpen(true)}
-          // onMouseLeave={() => setIsOpen(false)}
           role="presentation"
           ref={labelAnchorRef}
         >
@@ -165,17 +165,16 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
         {status === "stale" ? (
           <HelpTooltipText>
             This item is now stale because the agent hasn{"'"}t reported a new
-            value in {dayjs.duration(item.result.age, "s").humanize()}.
+            value in {humanDuration(item.result.age, "s")}.
           </HelpTooltipText>
         ) : (
           <></>
         )}
         {status === "valid" ? (
           <HelpTooltipText>
-            The agent collected this value{" "}
+            The agent collected this value {humanDuration(item.result.age, "s")}{" "}
-            {dayjs.duration(item.result.age, "s").humanize()} ago and will
+            ago and will update it in{" "}
-            update it in{" "}
+            {humanDuration(Math.min(updatesInSeconds, 0), "s")}.
-            {dayjs.duration(Math.min(updatesInSeconds, 0), "s").humanize()}.
           </HelpTooltipText>
         ) : (
           <></>

site/src/components/Resources/AgentRow.tsx

@@ -73,7 +73,6 @@ export const AgentRow: FC<AgentRowProps> = ({
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("agent")
-
   const [logsMachine, sendLogsEvent] = useMachine(workspaceAgentLogsMachine, {
     context: { agentID: agent.id },
     services: process.env.STORYBOOK

site/src/components/Resources/AgentRowPreview.tsx

@@ -3,7 +3,7 @@ import { AppPreviewLink } from "components/AppLink/AppPreviewLink"
 import { Maybe } from "components/Conditionals/Maybe"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { WorkspaceAgent } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
 

site/src/components/Resources/AgentStatus.tsx

@@ -1,6 +1,6 @@
 import Tooltip from "@material-ui/core/Tooltip"
 import { makeStyles } from "@material-ui/core/styles"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { WorkspaceAgent } from "api/typesGenerated"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { useTranslation } from "react-i18next"

site/src/components/Resources/AgentVersion.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, FC } from "react"
 import { makeStyles } from "@material-ui/core/styles"
 import { WorkspaceAgent } from "api/typesGenerated"
-import { getDisplayVersionStatus } from "util/workspace"
+import { getDisplayVersionStatus } from "utils/workspace"
 import { AgentOutdatedTooltip } from "components/Tooltips/AgentOutdatedTooltip"
 
 export const AgentVersion: FC<{

site/src/components/SearchBarWithFilter/SearchBarWithFilter.stories.tsx

@@ -1,5 +1,5 @@
-import { ComponentMeta, Story } from "@storybook/react"
+import { Story } from "@storybook/react"
-import { userFilterQuery, workspaceFilterQuery } from "../../util/filters"
+import { userFilterQuery, workspaceFilterQuery } from "../../utils/filters"
 import {
   SearchBarWithFilter,
   SearchBarWithFilterProps,
@@ -8,12 +8,10 @@ import {
 export default {
   title: "components/SearchBarWithFilter",
   component: SearchBarWithFilter,
-  argTypes: {
+  args: {
-    filter: {
+    filter: workspaceFilterQuery.me,
-      defaultValue: workspaceFilterQuery.me,
-    },
   },
-} as ComponentMeta<typeof SearchBarWithFilter>
+}
 
 const Template: Story<SearchBarWithFilterProps> = (args) => (
   <SearchBarWithFilter {...args} />

site/src/components/Section/Section.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { FC } from "react"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { SectionAction } from "../SectionAction/SectionAction"
 
 type SectionLayout = "fixed" | "fluid"

site/src/components/SettingsAccountForm/SettingsAccountForm.tsx

@@ -6,7 +6,7 @@ import {
   getFormHelpers,
   nameValidator,
   onChangeTrimmed,
-} from "../../util/formUtils"
+} from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"

site/src/components/SettingsLayout/SettingsLayout.tsx

@@ -3,7 +3,7 @@ import { Sidebar } from "./Sidebar"
 import { Stack } from "components/Stack/Stack"
 import { FC, Suspense } from "react"
 import { Helmet } from "react-helmet-async"
-import { pageTitle } from "../../util/page"
+import { pageTitle } from "../../utils/page"
 import { Margins } from "../Margins/Margins"
 import { useMe } from "hooks/useMe"
 import { Loader } from "components/Loader/Loader"

site/src/components/SettingsLayout/Sidebar.tsx

@@ -6,7 +6,7 @@ import { Stack } from "components/Stack/Stack"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { FC, ElementType, PropsWithChildren, ReactNode } from "react"
 import { NavLink } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import AccountIcon from "@material-ui/icons/Person"
 import SecurityIcon from "@material-ui/icons/LockOutlined"
 

site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

@@ -2,7 +2,7 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
-import { getFormHelpers } from "../../util/formUtils"
+import { getFormHelpers } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"

site/src/components/SignInForm/PasswordSignInForm.tsx

@@ -1,6 +1,6 @@
 import { Stack } from "../Stack/Stack"
 import TextField from "@material-ui/core/TextField"
-import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, onChangeTrimmed } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Language } from "./SignInForm"
 import { FormikContextType, FormikTouched, useFormik } from "formik"

site/src/components/Stack/Stack.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { CSSProperties } from "@material-ui/core/styles/withStyles"
 import { FC } from "react"
 import { ReactNode } from "react-markdown/lib/react-markdown"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 type Direction = "column" | "row"
 

site/src/components/SyntaxHighlighter/coderTheme.ts

@@ -1,7 +1,7 @@
 import { Theme, useTheme } from "@material-ui/core/styles"
 import { useMonaco } from "@monaco-editor/react"
 import { useEffect, useState } from "react"
-import { hslToHex } from "util/colors"
+import { hslToHex } from "utils/colors"
 import { editor } from "monaco-editor"
 
 // Theme based on https://github.com/brijeshb42/monaco-themes/blob/master/themes/Dracula.json

site/src/components/TabSidebar/TabSidebar.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 import { NavLink } from "react-router-dom"
 import { sidePadding } from "theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 export interface TabSidebarItem {
   path: string

site/src/components/TableCellLink/TableCellLink.tsx

@@ -2,7 +2,7 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import TableCell, { TableCellProps } from "@material-ui/core/TableCell"
 import { Link as RouterLink } from "react-router-dom"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 // TableCellLink wraps a TableCell filling the entirety with a Link.
 // This allows table rows to be clickable with browser-behavior like ctrl+click.

site/src/components/TemplateExampleCard/TemplateExampleCard.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { TemplateExample } from "api/typesGenerated"
 import { FC } from "react"
 import { Link } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export interface TemplateExampleCardProps {
   example: TemplateExample

site/src/components/TemplateFiles/TemplateFiles.tsx

@@ -5,8 +5,8 @@ import { TerraformIcon } from "components/Icons/TerraformIcon"
 import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"
 import { UseTabResult } from "hooks/useTab"
 import { FC } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
-import { TemplateVersionFiles } from "util/templateVersion"
+import { TemplateVersionFiles } from "utils/templateVersion"
 
 const iconByExtension: Record<string, JSX.Element> = {
   tf: <TerraformIcon />,

site/src/components/TemplateLayout/TemplateLayout.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { createContext, FC, Suspense, useContext } from "react"
 import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
 import { Loader } from "components/Loader/Loader"

site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx

@@ -8,17 +8,11 @@ import {
 export default {
   title: "Components/TemplatePageHeader",
   component: TemplatePageHeader,
-  argTypes: {
+  args: {
-    template: {
+    template: MockTemplate,
-      defaultValue: MockTemplate,
+    activeVersion: MockTemplateVersion,
-    },
-    activeVersion: {
-      defaultValue: MockTemplateVersion,
-    },
     permissions: {
-      defaultValue: {
+      canUpdateTemplate: true,
-        canUpdateTemplate: true,
-      },
     },
   },
 } as ComponentMeta<typeof TemplatePageHeader>

site/src/components/TemplateStats/TemplateStats.tsx

@@ -1,11 +1,11 @@
 import { Stats, StatsItem } from "components/Stats/Stats"
 import { FC } from "react"
 import { Link } from "react-router-dom"
-import { createDayString } from "util/createDayString"
+import { createDayString } from "utils/createDayString"
 import {
   formatTemplateBuildTime,
   formatTemplateActiveDevelopers,
-} from "util/templates"
+} from "utils/templates"
 import { Template, TemplateVersion } from "../../api/typesGenerated"
 
 const Language = {

site/src/components/TemplateVersionEditor/FileDialog.tsx

@@ -3,8 +3,8 @@ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Stack } from "components/Stack/Stack"
 import { ChangeEvent, FC, useState } from "react"
 import Typography from "@material-ui/core/Typography"
-import { allowedExtensions, isAllowedFile } from "util/templateVersion"
+import { allowedExtensions, isAllowedFile } from "utils/templateVersion"
-import { FileTree, isFolder, validatePath } from "util/filetree"
+import { FileTree, isFolder, validatePath } from "utils/filetree"
 
 export const CreateFileDialog: FC<{
   onClose: () => void

site/src/components/TemplateVersionEditor/FileTreeView.tsx

@@ -6,7 +6,7 @@ import TreeItem from "@material-ui/lab/TreeItem"
 import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
 import { CSSProperties, FC, useState } from "react"
-import { FileTree } from "util/filetree"
+import { FileTree } from "utils/filetree"
 import { DockerIcon } from "components/Icons/DockerIcon"
 import { colors } from "theme/colors"
 

site/src/components/TemplateVersionEditor/MonacoEditor.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "@material-ui/core/styles"
 import Editor from "@monaco-editor/react"
 import { FC, useLayoutEffect, useMemo, useState } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import { hslToHex } from "util/colors"
+import { hslToHex } from "utils/colors"
 import type { editor } from "monaco-editor"
 
 export const MonacoEditor: FC<{

site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx

@@ -1,6 +1,6 @@
 import { DialogProps } from "components/Dialogs/Dialog"
 import { FC } from "react"
-import { getFormHelpers } from "util/formUtils"
+import { getFormHelpers } from "utils/formUtils"
 import { FormFields } from "components/Form/Form"
 import { useFormik } from "formik"
 import * as Yup from "yup"

site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx

@@ -29,7 +29,7 @@ import {
   removeFile,
   traverse,
   updateFile,
-} from "util/filetree"
+} from "utils/filetree"
 import {
   CreateFileDialog,
   DeleteFileDialog,

site/src/components/TerminalLink/TerminalLink.tsx

@@ -4,8 +4,8 @@ import { makeStyles } from "@material-ui/core/styles"
 import ComputerIcon from "@material-ui/icons/Computer"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
-import { generateRandomString } from "../../util/random"
+import { generateRandomString } from "../../utils/random"
 
 export const Language = {
   linkText: "Terminal",

site/src/components/Timeline/TimelineEntry.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import TableRow, { TableRowProps } from "@material-ui/core/TableRow"
 import { PropsWithChildren } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 interface TimelineEntryProps {
   clickable?: boolean

site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx

@@ -11,7 +11,7 @@ import {
   FC,
   PropsWithChildren,
 } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { Stack } from "../../Stack/Stack"
 
 type Icon = typeof HelpIcon

site/src/components/Typography/Typography.tsx

@@ -8,7 +8,7 @@ import MuiTypography, {
   TypographyProps as MuiTypographyProps,
 } from "@material-ui/core/Typography"
 import * as React from "react"
-import { appendCSSString, combineClasses } from "../../util/combineClasses"
+import { appendCSSString, combineClasses } from "../../utils/combineClasses"
 
 export interface TypographyProps extends MuiTypographyProps {
   short?: boolean

site/src/components/UserDropdownContent/UserDropdownContent.tsx

@@ -11,7 +11,7 @@ import { Link } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import DocsIcon from "@material-ui/icons/MenuBook"
 import LogoutIcon from "@material-ui/icons/ExitToAppOutlined"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export const Language = {
   accountLabel: "Account",

site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx

@@ -7,7 +7,7 @@ import { Group, User } from "api/typesGenerated"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import debounce from "just-debounce-it"
 import { ChangeEvent, useState } from "react"
-import { getGroupSubtitle } from "util/groups"
+import { getGroupSubtitle } from "utils/groups"
 import { searchUsersAndGroupsMachine } from "xServices/template/searchUsersAndGroupsXService"
 
 export type UserOrGroupAutocompleteValue = User | Group | null

site/src/components/UsersLayout/UsersLayout.tsx

@@ -15,7 +15,7 @@ import {
   Outlet,
   useNavigate,
 } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { authMethodsXService } from "xServices/auth/authMethodsXService"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"

site/src/components/UsersTable/UsersTable.stories.tsx

@@ -9,10 +9,8 @@ import { UsersTable, UsersTableProps } from "./UsersTable"
 export default {
   title: "components/UsersTable",
   component: UsersTable,
-  argTypes: {
+  args: {
-    isNonInitialPage: {
+    isNonInitialPage: false,
-      defaultValue: false,
-    },
   },
 } as ComponentMeta<typeof UsersTable>
 

site/src/components/UsersTable/UsersTableBody.tsx

@@ -8,7 +8,7 @@ import { Pill } from "components/Pill/Pill"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import * as TypesGen from "../../api/typesGenerated"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { AvatarData } from "../AvatarData/AvatarData"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { TableLoaderSkeleton } from "../TableLoader/TableLoader"

site/src/components/VersionsTable/VersionRow.tsx

@@ -10,7 +10,7 @@ import { useClickableTableRow } from "hooks/useClickableTableRow"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import { colors } from "theme/colors"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export interface VersionRowProps {
   version: TemplateVersion

site/src/components/VersionsTable/VersionsTable.stories.tsx

@@ -24,6 +24,7 @@ Example.args = {
     },
     MockTemplateVersion,
   ],
+  onPromoteClick: undefined,
 }
 
 export const CanPromote = Template.bind({})

site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

@@ -3,7 +3,7 @@ import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { WorkspaceBuild } from "../../api/typesGenerated"
-import { displayWorkspaceBuildDuration } from "../../util/workspace"
+import { displayWorkspaceBuildDuration } from "../../utils/workspace"
 
 export interface WorkspaceBuildStatsProps {
   build: WorkspaceBuild

site/src/components/WorkspaceSchedule/WorkspaceSchedule.stories.tsx

@@ -9,10 +9,8 @@ dayjs.extend(utc)
 export default {
   title: "components/WorkspaceSchedule",
   component: WorkspaceSchedule,
-  argTypes: {
+  args: {
-    canUpdateWorkspace: {
+    canUpdateWorkspace: true,
-      defaultValue: true,
-    },
   },
 }
 

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

@@ -15,7 +15,7 @@ import {
   autostopDisplay,
   extractTimezone,
   Language as ScheduleLanguage,
-} from "../../util/schedule"
+} from "../../utils/schedule"
 import { Stack } from "../Stack/Stack"
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're

site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

@@ -28,7 +28,7 @@ import {
 } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/schedule"
 import { ChangeEvent, FC } from "react"
 import * as Yup from "yup"
-import { getFormHelpers } from "../../util/formUtils"
+import { getFormHelpers } from "../../utils/formUtils"
 import { zones } from "./zones"
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're

site/src/components/WorkspaceSection/WorkspaceSection.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react"
 import { CardPadding } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 export interface WorkspaceSectionProps {
   /**

site/src/components/WorkspaceStats/WorkspaceStats.tsx

@@ -2,16 +2,16 @@ import Link from "@material-ui/core/Link"
 import { OutdatedHelpTooltip } from "components/Tooltips"
 import { FC, useRef, useState } from "react"
 import { Link as RouterLink } from "react-router-dom"
-import { createDayString } from "util/createDayString"
+import { createDayString } from "utils/createDayString"
 import {
   getDisplayWorkspaceBuildInitiatedBy,
   getDisplayWorkspaceTemplateName,
   isWorkspaceOn,
-} from "util/workspace"
+} from "utils/workspace"
 import { Workspace } from "../../api/typesGenerated"
 import { Stats, StatsItem } from "components/Stats/Stats"
 import upperFirst from "lodash/upperFirst"
-import { autostartDisplay, autostopDisplay } from "util/schedule"
+import { autostartDisplay, autostopDisplay } from "utils/schedule"
 import IconButton from "@material-ui/core/IconButton"
 import RemoveIcon from "@material-ui/icons/RemoveOutlined"
 import { makeStyles } from "@material-ui/core/styles"

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -6,7 +6,7 @@ import { AvatarData } from "components/AvatarData/AvatarData"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
-import { getDisplayWorkspaceTemplateName } from "util/workspace"
+import { getDisplayWorkspaceTemplateName } from "utils/workspace"
 import { LastUsed } from "../LastUsed/LastUsed"
 import { Workspace } from "api/typesGenerated"
 import { OutdatedHelpTooltip } from "components/Tooltips/OutdatedHelpTooltip"

site/src/hooks/events.test.ts

@@ -1,5 +1,5 @@
 import { renderHook, waitFor } from "@testing-library/react"
-import { dispatchCustomEvent } from "../util/events"
+import { dispatchCustomEvent } from "../utils/events"
 import { useCustomEvent } from "./events"
 
 describe("useCustomEvent", () => {

site/src/hooks/events.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import { CustomEventListener } from "../util/events"
+import { CustomEventListener } from "../utils/events"
 
 /**
  * Handles a custom event with descriptive type information.

site/src/pages/AuditPage/AuditPage.test.tsx

@@ -13,7 +13,7 @@ import {
 } from "testHelpers/renderHelpers"
 import { server } from "testHelpers/server"
 
-import * as CreateDayString from "util/createDayString"
+import * as CreateDayString from "utils/createDayString"
 import AuditPage from "./AuditPage"
 
 interface RenderPageOptions {

site/src/pages/AuditPage/AuditPage.tsx

@@ -7,7 +7,7 @@ import { useFeatureVisibility } from "hooks/useFeatureVisibility"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useSearchParams } from "react-router-dom"
-import { pageTitle } from "util/page"
+import { pageTitle } from "utils/page"
 import { auditMachine } from "xServices/audit/auditXService"
 import { PaginationMachineRef } from "xServices/pagination/paginationXService"
 import { AuditPageView } from "./AuditPageView"

site/src/pages/AuditPage/AuditPageView.stories.tsx

@@ -6,19 +6,11 @@ import { AuditPageView, AuditPageViewProps } from "./AuditPageView"
 export default {
   title: "pages/AuditPageView",
   component: AuditPageView,
-  argTypes: {
+  args: {
-    auditLogs: {
+    auditLogs: [MockAuditLog, MockAuditLog2],
-      defaultValue: [MockAuditLog, MockAuditLog2],
+    count: 1000,
-    },
+    paginationRef: createPaginationRef({ page: 1, limit: 25 }),
-    count: {
+    isAuditLogVisible: true,
-      defaultValue: 1000,
-    },
-    paginationRef: {
-      defaultValue: createPaginationRef({ page: 1, limit: 25 }),
-    },
-    isAuditLogVisible: {
-      defaultValue: true,
-    },
   },
 } as ComponentMeta<typeof AuditPageView>
 

site/src/pages/CliAuthPage/CliAuthPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, FC, PropsWithChildren } from "react"
 import { Helmet } from "react-helmet-async"
 import { getApiKey } from "../../api/api"
-import { pageTitle } from "../../util/page"
+import { pageTitle } from "../../utils/page"
 import { CliAuthPageView } from "./CliAuthPageView"
 
 export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {

site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx

@@ -5,7 +5,10 @@ export default {
   title: "pages/CliAuthPageView",
   component: CliAuthPageView,
   argTypes: {
-    sessionToken: { control: "text", defaultValue: "some-session-token" },
+    sessionToken: { control: "text" },
+  },
+  args: {
+    sessionToken: "some-session-token",
   },
 }
 

site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

@@ -23,7 +23,7 @@ import {
   getFormHelpers,
   onChangeTrimmed,
   templateDisplayNameValidator,
-} from "util/formUtils"
+} from "utils/formUtils"
 import { CreateTemplateData } from "xServices/createTemplate/createTemplateXService"
 import * as Yup from "yup"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"

site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx

@@ -11,7 +11,7 @@ import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
 import { useNavigate, useSearchParams } from "react-router-dom"
-import { pageTitle } from "util/page"
+import { pageTitle } from "utils/page"
 import { createTemplateMachine } from "xServices/createTemplate/createTemplateXService"
 import { CreateTemplateForm } from "./CreateTemplateForm"
 

site/src/pages/CreateTemplatePage/TemplateUpload.tsx

@@ -4,7 +4,7 @@ import { FC, DragEvent, useRef } from "react"
 import UploadIcon from "@material-ui/icons/CloudUploadOutlined"
 import { useClickable } from "hooks/useClickable"
 import CircularProgress from "@material-ui/core/CircularProgress"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import IconButton from "@material-ui/core/IconButton"
 import RemoveIcon from "@material-ui/icons/DeleteOutline"
 import FileIcon from "@material-ui/icons/FolderOutlined"

site/src/pages/CreateTokenPage/CreateTokenForm.tsx

@@ -7,7 +7,7 @@ import {
 } from "components/Form/Form"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 import { useTranslation } from "react-i18next"
-import { onChangeTrimmed, getFormHelpers } from "util/formUtils"
+import { onChangeTrimmed, getFormHelpers } from "utils/formUtils"
 import TextField from "@material-ui/core/TextField"
 import MenuItem from "@material-ui/core/MenuItem"
 import {

site/src/pages/CreateTokenPage/CreateTokenPage.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
+import { pageTitle } from "utils/page"
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm"
 import { useNavigate } from "react-router-dom"
 import { useFormik } from "formik"

site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx

@@ -5,7 +5,7 @@ import { useOrganizationId } from "hooks/useOrganizationId"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate, useParams, useSearchParams } from "react-router-dom"
-import { pageTitle } from "util/page"
+import { pageTitle } from "utils/page"
 import { createWorkspaceMachine } from "xServices/createWorkspace/createWorkspaceXService"
 import {
   CreateWorkspaceErrors,

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx

@@ -135,6 +135,7 @@ RichParameters.args = {
     MockTemplateVersionParameter3,
     {
       name: "Region",
+      required: false,
       description: "",
       description_plaintext: "",
       type: "string",

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -7,7 +7,7 @@ import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "utils/formUtils"
 import * as Yup from "yup"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm"
@@ -25,7 +25,7 @@ import {
   selectInitialRichParametersValues,
   useValidationSchemaForRichParameters,
   workspaceBuildParameterValue,
-} from "util/richParameters"
+} from "utils/richParameters"
 
 export enum CreateWorkspaceErrors {
   GET_TEMPLATES_ERROR = "getTemplatesError",

site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx

@@ -2,7 +2,7 @@ import { UpdateAppearanceConfig } from "api/typesGenerated"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
+import { pageTitle } from "utils/page"
 import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"
 
 // ServiceBanner is unlike the other Deployment Settings pages because it

site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx

@@ -7,24 +7,18 @@ import {
 export default {
   title: "pages/AppearanceSettingsPageView",
   component: AppearanceSettingsPageView,
-  argTypes: {
+  args: {
     appearance: {
-      defaultValue: {
+      logo_url: "https://github.com/coder.png",
-        logo_url: "https://github.com/coder.png",
+      service_banner: {
-        service_banner: {
+        enabled: true,
-          enabled: true,
+        message: "hello world",
-          message: "hello world",
+        background_color: "white",
-          background_color: "white",
-        },
       },
     },
-    isEntitled: {
+    isEntitled: false,
-      defaultValue: false,
+    updateAppearance: () => {
-    },
+      return undefined
-    updateAppearance: {
-      defaultValue: () => {
-        return undefined
-      },
     },
   },
 } as ComponentMeta<typeof AppearanceSettingsPageView>

site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

@@ -8,7 +8,7 @@ import {
 } from "components/DeploySettingsLayout/Badges"
 import InputAdornment from "@material-ui/core/InputAdornment"
 import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
-import { getFormHelpers } from "util/formUtils"
+import { getFormHelpers } from "utils/formUtils"
 import Button from "@material-ui/core/Button"
 import FormControlLabel from "@material-ui/core/FormControlLabel"
 import FormHelperText from "@material-ui/core/FormHelperText"

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx

@@ -1,7 +1,7 @@
 import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
+import { pageTitle } from "utils/page"
 import { GeneralSettingsPageView } from "./GeneralSettingsPageView"
 
 const GeneralSettingsPage: FC = () => {

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx

@@ -11,26 +11,22 @@ import {
 export default {
   title: "pages/GeneralSettingsPageView",
   component: GeneralSettingsPageView,
-  argTypes: {
+  args: {
-    deploymentOptions: {
+    deploymentOptions: [
-      defaultValue: [
+      {
-        {
+        name: "Access URL",
-          name: "Access URL",
+        description:
-          usage:
+          "External URL to access your deployment. This must be accessible by all provisioned workspaces.",
-            "External URL to access your deployment. This must be accessible by all provisioned workspaces.",
+        value: "https://dev.coder.com",
-          value: "https://dev.coder.com",
+      },
-        },
+      {
-        {
+        name: "Wildcard Access URL",
-          name: "Wildcard Access URL",
+        description:
-          usage:
+          'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".',
-            'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".',
+        value: "*--apps.dev.coder.com",
-          value: "*--apps.dev.coder.com",
+      },
-        },
+    ],
-      ],
+    deploymentDAUs: MockDeploymentDAUResponse,
-    },
-    deploymentDAUs: {
-      defaultValue: MockDeploymentDAUResponse,
-    },
   },
 } as ComponentMeta<typeof GeneralSettingsPageView>
 

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

@@ -5,7 +5,7 @@ import { DAUChart } from "components/DAUChart/DAUChart"
 import { Header } from "components/DeploySettingsLayout/Header"
 import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
 import { Stack } from "components/Stack/Stack"
-import { useDeploymentOptions } from "util/deployOptions"
+import { useDeploymentOptions } from "utils/deployOptions"
 
 export type GeneralSettingsPageViewProps = {
   deploymentOptions: DeploymentOption[]