fix some more issues

coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
commit 0b4dc8d71c7bee93aabc6b66409518a4af26868a
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/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -426,13 +426,13 @@ const classNames = {
 } satisfies Record<string, ClassName>;
 
 const styles = {
-  statusBadge: css`
+  statusBadge: (theme) => css`
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 12px;
     height: 100%;
-    color: #fff;
+    color: ${theme.experimental.l1.text};
 
     & svg {
       width: 16px;

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -295,6 +295,7 @@ const styles = {
     display: "flex",
     alignItems: "center",
     ...(theme.typography.body2 as CSSObject),
+    color: theme.experimental.roles.active.fill,
   }),
 
   linkIcon: {

diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -95,7 +95,7 @@ export interface AgentMetadataViewProps {
 
 export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
   if (metadata.length === 0) {
-    return <></>;
+    return null;
   }
   return (
     <div css={styles.root}>
@@ -131,7 +131,7 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
       return;
     }
 
-    let timeout: NodeJS.Timeout | undefined = undefined;
+    let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
     const connect = (): (() => void) => {
       const source = watchAgentMetadata(agent.id);
@@ -259,7 +259,9 @@ const styles = {
   },
 
   metadataValueSuccess: (theme) => ({
-    color: theme.palette.success.light,
+    // color: theme.palette.success.light,
+    color: theme.experimental.roles.success.fill,
+    // color: theme.experimental.roles.success.text,
   }),
 
   metadataValueError: (theme) => ({

diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -5,13 +5,20 @@ import { useCoderTheme } from "./coderTheme";
 
 loader.config({ monaco });
 
-export const SyntaxHighlighter: FC<{
+interface SyntaxHighlighterProps {
   value: string;
   language: string;
   editorProps?: ComponentProps<typeof Editor> &
     ComponentProps<typeof DiffEditor>;
   compareWith?: string;
-}> = ({ value, compareWith, language, editorProps }) => {
+}
+
+export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+  value,
+  compareWith,
+  language,
+  editorProps,
+}) => {
   const hasDiff = compareWith && value !== compareWith;
   const coderTheme = useCoderTheme();
   const commonProps = {

diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts
@@ -1,222 +1,6 @@
 import { useMonaco } from "@monaco-editor/react";
+import { useTheme } from "@emotion/react";
 import { useEffect, useState } from "react";
-import { editor } from "monaco-editor";
-import { type Theme, useTheme } from "@emotion/react";
-
-// Theme based on https://github.com/brijeshb42/monaco-themes/blob/master/themes/Dracula.json
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- The theme is not typed
-export const coderTheme = (theme: Theme): editor.IStandaloneThemeData => ({
-  base: "vs-dark",
-  inherit: true,
-  rules: [
-    {
-      background: "282a36",
-      token: "",
-    },
-    {
-      foreground: "6272a4",
-      token: "comment",
-    },
-    {
-      foreground: "f1fa8c",
-      token: "string",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.numeric",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.language",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.character",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.other",
-    },
-    {
-      foreground: "ffb86c",
-      token: "variable.other.readwrite.instance",
-    },
-    {
-      foreground: "ff79c6",
-      token: "constant.character.escaped",
-    },
-    {
-      foreground: "ff79c6",
-      token: "constant.character.escape",
-    },
-    {
-      foreground: "ff79c6",
-      token: "string source",
-    },
-    {
-      foreground: "ff79c6",
-      token: "string source.ruby",
-    },
-    {
-      foreground: "ff79c6",
-      token: "keyword",
-    },
-    {
-      foreground: "ff79c6",
-      token: "storage",
-    },
-    {
-      foreground: "8be9fd",
-      fontStyle: "italic",
-      token: "storage.type",
-    },
-    {
-      foreground: "50fa7b",
-      fontStyle: "underline",
-      token: "entity.name.class",
-    },
-    {
-      foreground: "50fa7b",
-      fontStyle: "italic underline",
-      token: "entity.other.inherited-class",
-    },
-    {
-      foreground: "50fa7b",
-      token: "entity.name.function",
-    },
-    {
-      foreground: "ffb86c",
-      fontStyle: "italic",
-      token: "variable.parameter",
-    },
-    {
-      foreground: "ff79c6",
-      token: "entity.name.tag",
-    },
-    {
-      foreground: "50fa7b",
-      token: "entity.other.attribute-name",
-    },
-    {
-      foreground: "8be9fd",
-      token: "support.function",
-    },
-    {
-      foreground: "6be5fd",
-      token: "support.constant",
-    },
-    {
-      foreground: "66d9ef",
-      fontStyle: " italic",
-      token: "support.type",
-    },
-    {
-      foreground: "66d9ef",
-      fontStyle: " italic",
-      token: "support.class",
-    },
-    {
-      foreground: "f8f8f0",
-      background: "ff79c6",
-      token: "invalid",
-    },
-    {
-      foreground: "f8f8f0",
-      background: "bd93f9",
-      token: "invalid.deprecated",
-    },
-    {
-      foreground: "cfcfc2",
-      token: "meta.structure.dictionary.json string.quoted.double.json",
-    },
-    {
-      foreground: "6272a4",
-      token: "meta.diff",
-    },
-    {
-      foreground: "6272a4",
-      token: "meta.diff.header",
-    },
-    {
-      foreground: "ff79c6",
-      token: "markup.deleted",
-    },
-    {
-      foreground: "50fa7b",
-      token: "markup.inserted",
-    },
-    {
-      foreground: "e6db74",
-      token: "markup.changed",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.numeric.line-number.find-in-files - match",
-    },
-    {
-      foreground: "e6db74",
-      token: "entity.name.filename",
-    },
-    {
-      foreground: "f83333",
-      token: "message.error",
-    },
-    {
-      foreground: "eeeeee",
-      token:
-        "punctuation.definition.string.begin.json - meta.structure.dictionary.value.json",
-    },
-    {
-      foreground: "eeeeee",
-      token:
-        "punctuation.definition.string.end.json - meta.structure.dictionary.value.json",
-    },
-    {
-      foreground: "8be9fd",
-      token: "meta.structure.dictionary.json string.quoted.double.json",
-    },
-    {
-      foreground: "f1fa8c",
-      token: "meta.structure.dictionary.value.json string.quoted.double.json",
-    },
-    {
-      foreground: "50fa7b",
-      token:
-        "meta meta meta meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "ffb86c",
-      token: "meta meta meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "ff79c6",
-      token: "meta meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "bd93f9",
-      token: "meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "50fa7b",
-      token: "meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "ffb86c",
-      token: "meta meta.structure.dictionary.value string",
-    },
-  ],
-  colors: {
-    "editor.foreground": theme.palette.text.primary,
-    "editor.background": theme.palette.background.default,
-    "editor.selectionBackground": theme.palette.action.hover,
-    "editor.lineHighlightBackground": theme.palette.background.paper,
-
-    "editorCursor.foreground": "#f8f8f0",
-    "editorWhitespace.foreground": "#3B3A32",
-    "editorIndentGuide.activeBackground": "#9D550FB0",
-    "editor.selectionHighlightBorder": "#222218",
-  },
-});
 
 export const useCoderTheme = (): { isLoading: boolean; name: string } => {
   const [isLoading, setIsLoading] = useState(true);
@@ -226,7 +10,7 @@ export const useCoderTheme = (): { isLoading: boolean; name: string } => {
 
   useEffect(() => {
     if (monaco) {
-      monaco.editor.defineTheme(name, coderTheme(theme));
+      monaco.editor.defineTheme(name, theme.monaco);
       setIsLoading(false);
     }
   }, [monaco, theme]);

diff --git a/site/src/components/TemplateFiles/TemplateFiles.stories.tsx b/site/src/components/TemplateFiles/TemplateFiles.stories.tsx
@@ -0,0 +1,31 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { TemplateFiles } from "./TemplateFiles";
+
+const exampleFiles = {
+  "README.md":
+    "---\nname: Develop in Docker\ndescription: Develop inside Docker containers using your local daemon\ntags: [local, docker]\nicon: /icon/docker.png\n---\n\n# docker\n\nTo get started, run `coder templates init`. When prompted, select this template.\nFollow the on-screen instructions to proceed.\n\n## Editing the image\n\nEdit the `Dockerfile` and run `coder templates push` to update workspaces.\n\n## code-server\n\n`code-server` is installed via the `startup_script` argument in the `coder_agent`\nresource block. The `coder_app` resource is defined to access `code-server` through\nthe dashboard UI over `localhost:13337`.\n\n## Extending this template\n\nSee the [kreuzwerker/docker](https://registry.terraform.io/providers/kreuzwerker/docker) Terraform provider documentation to\nadd the following features to your Coder template:\n\n- SSH/TCP docker host\n- Registry authentication\n- Build args\n- Volume mounts\n- Custom container spec\n- More\n\nWe also welcome contributions!\n",
+  "build/Dockerfile":
+    'FROM ubuntu\n\nRUN apt-get update \\\n\t&& apt-get install -y \\\n\tcurl \\\n\tgit \\\n\tgolang \\\n\tsudo \\\n\tvim \\\n\twget \\\n\t&& rm -rf /var/lib/apt/lists/*\n\nARG USER=coder\nRUN useradd --groups sudo --no-create-home --shell /bin/bash ${USER} \\\n\t&& echo "${USER} ALL=(ALL) NOPASSWD:ALL" >/etc/sudoers.d/${USER} \\\n\t&& chmod 0440 /etc/sudoers.d/${USER}\nUSER ${USER}\nWORKDIR /home/${USER}\n',
+  "main.tf":
+    'terraform {\n  required_providers {\n    coder = {\n      source = "coder/coder"\n    }\n    docker = {\n      source = "kreuzwerker/docker"\n    }\n  }\n}\n\nlocals {\n  username = data.coder_workspace.me.owner\n}\n\ndata "coder_provisioner" "me" {\n}\n\nprovider "docker" {\n}\n\ndata "coder_workspace" "me" {\n}\n\nresource "coder_agent" "main" {\n  arch                   = data.coder_provisioner.me.arch\n  os                     = "linux"\n  startup_script_timeout = 180\n  startup_script         = <<-EOT\n    set -e\n\n    # install and start code-server\n    curl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.11.0\n    /tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n  EOT\n\n  # These environment variables allow you to make Git commits right away after creating a\n  # workspace. Note that they take precedence over configuration defined in ~/.gitconfig!\n  # You can remove this block if you\'d prefer to configure Git manually or using\n  # dotfiles. (see docs/dotfiles.md)\n  env = {\n    GIT_AUTHOR_NAME     = "${data.coder_workspace.me.owner}"\n    GIT_COMMITTER_NAME  = "${data.coder_workspace.me.owner}"\n    GIT_AUTHOR_EMAIL    = "${data.coder_workspace.me.owner_email}"\n    GIT_COMMITTER_EMAIL = "${data.coder_workspace.me.owner_email}"\n  }\n\n  # The following metadata blocks are optional. They are used to display\n  # information about your workspace in the dashboard. You can remove them\n  # if you don\'t want to display any information.\n  # For basic resources, you can use the `coder stat` command.\n  # If you need more control, you can write your own script.\n  metadata {\n    display_name = "CPU Usage"\n    key          = "0_cpu_usage"\n    script       = "coder stat cpu"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "RAM Usage"\n    key          = "1_ram_usage"\n    script       = "coder stat mem"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "Home Disk"\n    key          = "3_home_disk"\n    script       = "coder stat disk --path $${HOME}"\n    interval     = 60\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "CPU Usage (Host)"\n    key          = "4_cpu_usage_host"\n    script       = "coder stat cpu --host"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "Memory Usage (Host)"\n    key          = "5_mem_usage_host"\n    script       = "coder stat mem --host"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "Load Average (Host)"\n    key          = "6_load_host"\n    # get load avg scaled by number of cores\n    script   = <<EOT\n      echo "`cat /proc/loadavg | awk \'{ print $1 }\'` `nproc`" | awk \'{ printf "%0.2f", $1/$2 }\'\n    EOT\n    interval = 60\n    timeout  = 1\n  }\n\n  metadata {\n    display_name = "Swap Usage (Host)"\n    key          = "7_swap_host"\n    script       = <<EOT\n      free -b | awk \'/^Swap/ { printf("%.1f/%.1f", $3/1024.0/1024.0/1024.0, $2/1024.0/1024.0/1024.0) }\'\n    EOT\n    interval     = 10\n    timeout      = 1\n  }\n}\n\nresource "coder_app" "code-server" {\n  agent_id     = coder_agent.main.id\n  slug         = "code-server"\n  display_name = "code-server"\n  url          = "http://localhost:13337/?folder=/home/${local.username}"\n  icon         = "/icon/code.svg"\n  subdomain    = false\n  share        = "owner"\n\n  healthcheck {\n    url       = "http://localhost:13337/healthz"\n    interval  = 5\n    threshold = 6\n  }\n}\n\nresource "docker_volume" "home_volume" {\n  name = "coder-${data.coder_workspace.me.id}-home"\n  # Protect the volume from being deleted due to changes in attributes.\n  lifecycle {\n    ignore_changes = all\n  }\n  # Add labels in Docker to keep track of orphan resources.\n  labels {\n    label = "coder.owner"\n    value = data.coder_workspace.me.owner\n  }\n  labels {\n    label = "coder.owner_id"\n    value = data.coder_workspace.me.owner_id\n  }\n  labels {\n    label = "coder.workspace_id"\n    value = data.coder_workspace.me.id\n  }\n  # This field becomes outdated if the workspace is renamed but can\n  # be useful for debugging or cleaning out dangling volumes.\n  labels {\n    label = "coder.workspace_name_at_creation"\n    value = data.coder_workspace.me.name\n  }\n}\n\nresource "docker_image" "main" {\n  name = "coder-${data.coder_workspace.me.id}"\n  build {\n    context = "./build"\n    build_args = {\n      USER = local.username\n    }\n  }\n  triggers = {\n    dir_sha1 = sha1(join("", [for f in fileset(path.module, "build/*") : filesha1(f)]))\n  }\n}\n\nresource "docker_container" "workspace" {\n  count = data.coder_workspace.me.start_count\n  image = docker_image.main.name\n  # Uses lower() to avoid Docker restriction on container names.\n  name = "coder-${data.coder_workspace.me.owner}-${lower(data.coder_workspace.me.name)}"\n  # Hostname makes the shell more user friendly: coder@my-workspace:~$\n  hostname = data.coder_workspace.me.name\n  # Use the docker gateway if the access URL is 127.0.0.1\n  entrypoint = ["sh", "-c", replace(coder_agent.main.init_script, "/localhost|127\\\\.0\\\\.0\\\\.1/", "host.docker.internal")]\n  env        = ["CODER_AGENT_TOKEN=${coder_agent.main.token}"]\n  host {\n    host = "host.docker.internal"\n    ip   = "host-gateway"\n  }\n  volumes {\n    container_path = "/home/${local.username}"\n    volume_name    = docker_volume.home_volume.name\n    read_only      = false\n  }\n  # Add labels in Docker to keep track of orphan resources.\n  labels {\n    label = "coder.owner"\n    value = data.coder_workspace.me.owner\n  }\n  labels {\n    label = "coder.owner_id"\n    value = data.coder_workspace.me.owner_id\n  }\n  labels {\n    label = "coder.workspace_id"\n    value = data.coder_workspace.me.id\n  }\n  labels {\n    label = "coder.workspace_name"\n    value = data.coder_workspace.me.name\n  }\n}\n',
+};
+
+const meta: Meta<typeof TemplateFiles> = {
+  title: "components/TemplateFiles",
+  parameters: { chromatic },
+  component: TemplateFiles,
+  args: {
+    currentFiles: exampleFiles,
+    previousFiles: exampleFiles,
+    tab: { value: "0", set: action("change tab") },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateFiles>;
+
+const Example: Story = {};
+
+export { Example as TemplateFiles };
diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx
@@ -37,11 +37,17 @@ const languageByExtension: Record<AllowedExtension, string> = {
   protobuf: "protobuf",
 };
 
-export const TemplateFiles: FC<{
+interface TemplateFilesProps {
   currentFiles: TemplateVersionFiles;
   previousFiles?: TemplateVersionFiles;
   tab: UseTabResult;
-}> = ({ currentFiles, previousFiles, tab }) => {
+}
+
+export const TemplateFiles: FC<TemplateFilesProps> = ({
+  currentFiles,
+  previousFiles,
+  tab,
+}) => {
   const filenames = Object.keys(currentFiles);
   const selectedFilename = filenames[Number(tab.value)];
   const currentFile = currentFiles[selectedFilename];

diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -69,7 +69,7 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
   className,
 }) => {
   if (!workspace.dormant_at) {
-    return <></>;
+    return null;
   }
 
   const formatDate = (dateStr: string): string => {

diff --git a/site/src/contexts/ThemeProviders.tsx → site/src/contexts/ThemeProvider.tsx b/site/src/contexts/ThemeProviders.tsx → site/src/contexts/ThemeProvider.tsx