coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
diff --git a/.github/workflows/pr-deploy.yaml b/.github/workflows/pr-deploy.yaml
@@ -351,6 +351,7 @@ jobs:
       - name: Install/Upgrade Helm chart
         run: |
           set -euo pipefail
+          helm dependency update --skip-refresh ./helm/coder
           helm upgrade --install "pr${{ env.PR_NUMBER }}" ./helm/coder \
           --namespace "pr${{ env.PR_NUMBER }}" \
           --values ./pr-deploy-values.yaml \

diff --git a/site/.storybook/main.js b/site/.storybook/main.js
@@ -3,10 +3,16 @@ import turbosnap from "vite-plugin-turbosnap";
 module.exports = {
   stories: ["../src/**/*.stories.tsx"],
   addons: [
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false,
+      },
+    },
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/addon-mdx-gfm",
     "@storybook/addon-actions",
+    "@storybook/addon-themes",
   ],
   staticDirs: ["../static"],
   framework: {

diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -4,24 +4,33 @@ import {
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { DecoratorHelpers } from "@storybook/addon-themes";
 import { withRouter } from "storybook-addon-react-router-v6";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { HelmetProvider } from "react-helmet-async";
-import theme from "theme";
-import colors from "theme/tailwind";
+import themes from "theme";
 import "theme/globalFonts";
-import { QueryClient, QueryClientProvider } from "react-query";
+
+DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
 
 export const decorators = [
-  (Story) => (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme.dark}>
-        <EmotionThemeProvider theme={theme.dark}>
-          <CssBaseline />
-          <Story />
-        </EmotionThemeProvider>
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  ),
+  (Story, context) => {
+    const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
+    const { themeOverride } = DecoratorHelpers.useThemeParameters();
+
+    const selected = themeOverride || selectedTheme || "dark";
+
+    return (
+      <StyledEngineProvider injectFirst>
+        <MuiThemeProvider theme={themes[selected]}>
+          <EmotionThemeProvider theme={themes[selected]}>
+            <CssBaseline />
+            <Story />
+          </EmotionThemeProvider>
+        </MuiThemeProvider>
+      </StyledEngineProvider>
+    );
+  },
   withRouter,
   (Story) => {
     return (
@@ -50,18 +59,12 @@ export const decorators = [
 ];
 
 export const parameters = {
-  backgrounds: {
-    default: "dark",
-    values: [
-      {
-        name: "dark",
-        value: colors.gray[950],
-      },
-      {
-        name: "light",
-        value: colors.gray[50],
-      },
-    ],
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: ["design", "pages", "components"],
+      locales: "en-US",
+    },
   },
   actions: {
     argTypesRegex: "^(on|handler)[A-Z].*",
@@ -73,4 +76,16 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: {
+      ipad: {
+        name: "iPad Mini",
+        styles: {
+          height: "1024px",
+          width: "768px",
+        },
+        type: "tablet",
+      },
+    },
+  },
 };
diff --git a/site/package.json b/site/package.json
@@ -104,6 +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/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/@types/mui.d.ts b/site/src/@types/mui.d.ts
@@ -1,11 +1,6 @@
 import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
-import type { NewTheme } from "theme/experimental";
 
 declare module "@mui/material/styles" {
-  interface Theme {
-    experimental: NewTheme;
-  }
-
   interface Palette {
     neutral: PaletteColor;
   }

diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import type { FC, ReactNode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
-import { ThemeProviders } from "./contexts/ThemeProviders";
+import { ThemeProvider } from "./contexts/ThemeProvider";
 import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
@@ -30,10 +30,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
     <HelmetProvider>
       <QueryClientProvider client={queryClient}>
         <AuthProvider>
-          <ThemeProviders>
+          <ThemeProvider>
             {children}
             <GlobalSnackbar />
-          </ThemeProviders>
+          </ThemeProvider>
         </AuthProvider>
       </QueryClientProvider>
     </HelmetProvider>

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -96,13 +96,15 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
     },
     scales: {
       y: {
+        grid: { color: theme.palette.divider },
         suggestedMin: 0,
         ticks: {
           precision: 0,
         },
       },
 
       x: {
+        grid: { color: theme.palette.divider },
         ticks: {
           stepSize: data.length > 10 ? 2 : undefined,
         },
@@ -124,11 +126,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
           {
             label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
             data: chartData,
-            pointBackgroundColor: theme.palette.info.light,
-            pointBorderColor: theme.palette.info.light,
-            borderColor: theme.palette.info.light,
-            backgroundColor: theme.palette.info.dark,
-            fill: "origin",
+            pointBackgroundColor: theme.experimental.roles.active.outline,
+            pointBorderColor: theme.experimental.roles.active.outline,
+            borderColor: theme.experimental.roles.active.outline,
           },
         ],
       }}

diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
@@ -2,9 +2,15 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Badges,
   AlphaBadge,
+  BetaBadge,
+  DisabledBadge,
   EnabledBadge,
   EntitledBadge,
   EnterpriseBadge,
+  HealthyBadge,
+  NotHealthyBadge,
+  NotRegisteredBadge,
+  NotReachableBadge,
 } from "./Badges";
 
 const meta: Meta<typeof Badges> = {
@@ -26,11 +32,34 @@ export const Entitled: Story = {
     children: <EntitledBadge />,
   },
 };
+export const ProxyStatus: Story = {
+  args: {
+    children: (
+      <>
+        <HealthyBadge />
+        <HealthyBadge derpOnly />
+        <NotHealthyBadge />
+        <NotRegisteredBadge />
+        <NotReachableBadge />
+      </>
+    ),
+  },
+};
+export const Disabled: Story = {
+  args: {
+    children: <DisabledBadge />,
+  },
+};
 export const Enterprise: Story = {
   args: {
     children: <EnterpriseBadge />,
   },
 };
+export const Beta: Story = {
+  args: {
+    children: <BetaBadge />,
+  },
+};
 export const Alpha: Story = {
   args: {
     children: <AlphaBadge />,

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
@@ -2,7 +2,6 @@ import type { PropsWithChildren, FC } from "react";
 import Tooltip from "@mui/material/Tooltip";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
-import colors from "theme/tailwind";
 
 const styles = {
   badge: {
@@ -22,14 +21,17 @@ const styles = {
   enabledBadge: (theme) => ({
     border: `1px solid ${theme.experimental.roles.success.outline}`,
     backgroundColor: theme.experimental.roles.success.background,
+    color: theme.experimental.roles.success.text,
   }),
   errorBadge: (theme) => ({
     border: `1px solid ${theme.experimental.roles.error.outline}`,
     backgroundColor: theme.experimental.roles.error.background,
+    color: theme.experimental.roles.error.text,
   }),
   warnBadge: (theme) => ({
     border: `1px solid ${theme.experimental.roles.warning.outline}`,
     backgroundColor: theme.experimental.roles.warning.background,
+    color: theme.experimental.roles.warning.text,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -42,10 +44,9 @@ export const EntitledBadge: FC = () => {
 };
 
 interface HealthyBadge {
-  derpOnly: boolean;
+  derpOnly?: boolean;
 }
-export const HealthyBadge: FC<HealthyBadge> = (props) => {
-  const { derpOnly } = props;
+export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
   return (
     <span css={[styles.badge, styles.enabledBadge]}>
       {derpOnly ? "Healthy (DERP only)" : "Healthy"}
@@ -79,8 +80,9 @@ export const DisabledBadge: FC = () => {
       css={[
         styles.badge,
         (theme) => ({
-          border: `1px solid ${theme.palette.divider}`,
-          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.experimental.l1.outline}`,
+          backgroundColor: theme.experimental.l1.background,
+          color: theme.experimental.l1.text,
         }),
       ]}
     >
@@ -95,8 +97,9 @@ export const EnterpriseBadge: FC = () => {
       css={[
         styles.badge,
         (theme) => ({
-          backgroundColor: theme.palette.info.dark,
-          border: `1px solid ${theme.palette.info.light}`,
+          backgroundColor: theme.experimental.roles.info.background,
+          border: `1px solid ${theme.experimental.roles.info.outline}`,
+          color: theme.experimental.roles.info.text,
         }),
       ]}
     >
@@ -105,16 +108,33 @@ export const EnterpriseBadge: FC = () => {
   );
 };
 
+export const BetaBadge: FC = () => {
+  return (
+    <span
+      css={[
+        styles.badge,
+        (theme) => ({
+          border: `1px solid ${theme.experimental.roles.preview.outline}`,
+          backgroundColor: theme.experimental.roles.preview.background,
+          color: theme.experimental.roles.preview.text,
+        }),
+      ]}
+    >
+      Beta
+    </span>
+  );
+};
+
 export const AlphaBadge: FC = () => {
   return (
     <span
       css={[
         styles.badge,
-        {
-          border: `1px solid ${colors.violet[600]}`,
-          backgroundColor: colors.violet[950],
-          color: colors.violet[50],
-        },
+        (theme) => ({
+          border: `1px solid ${theme.experimental.roles.preview.outline}`,
+          backgroundColor: theme.experimental.roles.preview.background,
+          color: theme.experimental.roles.preview.text,
+        }),
       ]}
     >
       Alpha
@@ -127,11 +147,11 @@ export const DeprecatedBadge: FC = () => {
     <span
       css={[
         styles.badge,
-        {
-          border: `1px solid ${colors.orange[600]}`,
-          backgroundColor: colors.orange[950],
-          color: colors.orange[50],
-        },
+        (theme) => ({
+          border: `1px solid ${theme.experimental.roles.danger.outline}`,
+          backgroundColor: theme.experimental.roles.danger.background,
+          color: theme.experimental.roles.danger.text,
+        }),
       ]}
     >
       Deprecated