Skip to content

Commit 0b4dc8d

Browse files
aslilacaslilac
committed
fix some more issues
1 parent 4cc558b commit 0b4dc8d

File tree

17 files changed

+110
-265
lines changed

17 files changed

+110
-265
lines changed

‎site/src/App.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
22
import type { FC, ReactNode } from "react";
33
import { HelmetProvider } from "react-helmet-async";
44
import { AppRouter } from "./AppRouter";
5-
import { ThemeProviders } from "./contexts/ThemeProviders";
5+
import { ThemeProvider } from "./contexts/ThemeProvider";
66
import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
77
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
88
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
@@ -30,10 +30,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
3030
<HelmetProvider>
3131
<QueryClientProvider client={queryClient}>
3232
<AuthProvider>
33-
<ThemeProviders>
33+
<ThemeProvider>
3434
{children}
3535
<GlobalSnackbar />
36-
</ThemeProviders>
36+
</ThemeProvider>
3737
</AuthProvider>
3838
</QueryClientProvider>
3939
</HelmetProvider>

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -426,13 +426,13 @@ const classNames = {
426426
} satisfies Record<string, ClassName>;
427427

428428
const styles = {
429-
statusBadge: css`
429+
statusBadge: (theme) => css`
430430
display: flex;
431431
align-items: center;
432432
justify-content: center;
433433
padding: 0 12px;
434434
height: 100%;
435-
color: #fff;
435+
color: ${theme.experimental.l1.text};
436436
437437
& svg {
438438
width: 16px;

‎site/src/components/HelpTooltip/HelpTooltip.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,7 @@ const styles = {
295295
display: "flex",
296296
alignItems: "center",
297297
...(theme.typography.body2 as CSSObject),
298+
color: theme.experimental.roles.active.fill,
298299
}),
299300

300301
linkIcon: {

‎site/src/components/Resources/AgentMetadata.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export interface AgentMetadataViewProps {
9595

9696
export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
9797
if (metadata.length === 0) {
98-
return <></>;
98+
return null;
9999
}
100100
return (
101101
<div css={styles.root}>
@@ -131,7 +131,7 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
131131
return;
132132
}
133133

134-
let timeout: NodeJS.Timeout | undefined = undefined;
134+
let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
135135

136136
const connect = (): (() => void) => {
137137
const source = watchAgentMetadata(agent.id);
@@ -259,7 +259,9 @@ const styles = {
259259
},
260260

261261
metadataValueSuccess: (theme) => ({
262-
color: theme.palette.success.light,
262+
// color: theme.palette.success.light,
263+
color: theme.experimental.roles.success.fill,
264+
// color: theme.experimental.roles.success.text,
263265
}),
264266

265267
metadataValueError: (theme) => ({

‎site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,20 @@ import { useCoderTheme } from "./coderTheme";
55

66
loader.config({ monaco });
77

8-
export const SyntaxHighlighter: FC<{
8+
interface SyntaxHighlighterProps {
99
value: string;
1010
language: string;
1111
editorProps?: ComponentProps<typeof Editor> &
1212
ComponentProps<typeof DiffEditor>;
1313
compareWith?: string;
14-
}> = ({ value, compareWith, language, editorProps }) => {
14+
}
15+
16+
export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
17+
value,
18+
compareWith,
19+
language,
20+
editorProps,
21+
}) => {
1522
const hasDiff = compareWith && value !== compareWith;
1623
const coderTheme = useCoderTheme();
1724
const commonProps = {

‎site/src/components/SyntaxHighlighter/coderTheme.ts

Lines changed: 2 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -1,222 +1,6 @@
11
import { useMonaco } from "@monaco-editor/react";
2+
import { useTheme } from "@emotion/react";
23
import { useEffect, useState } from "react";
3-
import { editor } from "monaco-editor";
4-
import { type Theme, useTheme } from "@emotion/react";
5-
6-
// Theme based on https://github.com/brijeshb42/monaco-themes/blob/master/themes/Dracula.json
7-
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- The theme is not typed
8-
export const coderTheme = (theme: Theme): editor.IStandaloneThemeData => ({
9-
base: "vs-dark",
10-
inherit: true,
11-
rules: [
12-
{
13-
background: "282a36",
14-
token: "",
15-
},
16-
{
17-
foreground: "6272a4",
18-
token: "comment",
19-
},
20-
{
21-
foreground: "f1fa8c",
22-
token: "string",
23-
},
24-
{
25-
foreground: "bd93f9",
26-
token: "constant.numeric",
27-
},
28-
{
29-
foreground: "bd93f9",
30-
token: "constant.language",
31-
},
32-
{
33-
foreground: "bd93f9",
34-
token: "constant.character",
35-
},
36-
{
37-
foreground: "bd93f9",
38-
token: "constant.other",
39-
},
40-
{
41-
foreground: "ffb86c",
42-
token: "variable.other.readwrite.instance",
43-
},
44-
{
45-
foreground: "ff79c6",
46-
token: "constant.character.escaped",
47-
},
48-
{
49-
foreground: "ff79c6",
50-
token: "constant.character.escape",
51-
},
52-
{
53-
foreground: "ff79c6",
54-
token: "string source",
55-
},
56-
{
57-
foreground: "ff79c6",
58-
token: "string source.ruby",
59-
},
60-
{
61-
foreground: "ff79c6",
62-
token: "keyword",
63-
},
64-
{
65-
foreground: "ff79c6",
66-
token: "storage",
67-
},
68-
{
69-
foreground: "8be9fd",
70-
fontStyle: "italic",
71-
token: "storage.type",
72-
},
73-
{
74-
foreground: "50fa7b",
75-
fontStyle: "underline",
76-
token: "entity.name.class",
77-
},
78-
{
79-
foreground: "50fa7b",
80-
fontStyle: "italic underline",
81-
token: "entity.other.inherited-class",
82-
},
83-
{
84-
foreground: "50fa7b",
85-
token: "entity.name.function",
86-
},
87-
{
88-
foreground: "ffb86c",
89-
fontStyle: "italic",
90-
token: "variable.parameter",
91-
},
92-
{
93-
foreground: "ff79c6",
94-
token: "entity.name.tag",
95-
},
96-
{
97-
foreground: "50fa7b",
98-
token: "entity.other.attribute-name",
99-
},
100-
{
101-
foreground: "8be9fd",
102-
token: "support.function",
103-
},
104-
{
105-
foreground: "6be5fd",
106-
token: "support.constant",
107-
},
108-
{
109-
foreground: "66d9ef",
110-
fontStyle: " italic",
111-
token: "support.type",
112-
},
113-
{
114-
foreground: "66d9ef",
115-
fontStyle: " italic",
116-
token: "support.class",
117-
},
118-
{
119-
foreground: "f8f8f0",
120-
background: "ff79c6",
121-
token: "invalid",
122-
},
123-
{
124-
foreground: "f8f8f0",
125-
background: "bd93f9",
126-
token: "invalid.deprecated",
127-
},
128-
{
129-
foreground: "cfcfc2",
130-
token: "meta.structure.dictionary.json string.quoted.double.json",
131-
},
132-
{
133-
foreground: "6272a4",
134-
token: "meta.diff",
135-
},
136-
{
137-
foreground: "6272a4",
138-
token: "meta.diff.header",
139-
},
140-
{
141-
foreground: "ff79c6",
142-
token: "markup.deleted",
143-
},
144-
{
145-
foreground: "50fa7b",
146-
token: "markup.inserted",
147-
},
148-
{
149-
foreground: "e6db74",
150-
token: "markup.changed",
151-
},
152-
{
153-
foreground: "bd93f9",
154-
token: "constant.numeric.line-number.find-in-files - match",
155-
},
156-
{
157-
foreground: "e6db74",
158-
token: "entity.name.filename",
159-
},
160-
{
161-
foreground: "f83333",
162-
token: "message.error",
163-
},
164-
{
165-
foreground: "eeeeee",
166-
token:
167-
"punctuation.definition.string.begin.json - meta.structure.dictionary.value.json",
168-
},
169-
{
170-
foreground: "eeeeee",
171-
token:
172-
"punctuation.definition.string.end.json - meta.structure.dictionary.value.json",
173-
},
174-
{
175-
foreground: "8be9fd",
176-
token: "meta.structure.dictionary.json string.quoted.double.json",
177-
},
178-
{
179-
foreground: "f1fa8c",
180-
token: "meta.structure.dictionary.value.json string.quoted.double.json",
181-
},
182-
{
183-
foreground: "50fa7b",
184-
token:
185-
"meta meta meta meta meta meta meta.structure.dictionary.value string",
186-
},
187-
{
188-
foreground: "ffb86c",
189-
token: "meta meta meta meta meta meta.structure.dictionary.value string",
190-
},
191-
{
192-
foreground: "ff79c6",
193-
token: "meta meta meta meta meta.structure.dictionary.value string",
194-
},
195-
{
196-
foreground: "bd93f9",
197-
token: "meta meta meta meta.structure.dictionary.value string",
198-
},
199-
{
200-
foreground: "50fa7b",
201-
token: "meta meta meta.structure.dictionary.value string",
202-
},
203-
{
204-
foreground: "ffb86c",
205-
token: "meta meta.structure.dictionary.value string",
206-
},
207-
],
208-
colors: {
209-
"editor.foreground": theme.palette.text.primary,
210-
"editor.background": theme.palette.background.default,
211-
"editor.selectionBackground": theme.palette.action.hover,
212-
"editor.lineHighlightBackground": theme.palette.background.paper,
213-
214-
"editorCursor.foreground": "#f8f8f0",
215-
"editorWhitespace.foreground": "#3B3A32",
216-
"editorIndentGuide.activeBackground": "#9D550FB0",
217-
"editor.selectionHighlightBorder": "#222218",
218-
},
219-
});
2204

2215
export const useCoderTheme = (): { isLoading: boolean; name: string } => {
2226
const [isLoading, setIsLoading] = useState(true);
@@ -226,7 +10,7 @@ export const useCoderTheme = (): { isLoading: boolean; name: string } => {
22610

22711
useEffect(() => {
22812
if (monaco) {
229-
monaco.editor.defineTheme(name, coderTheme(theme));
13+
monaco.editor.defineTheme(name, theme.monaco);
23014
setIsLoading(false);
23115
}
23216
}, [monaco, theme]);

‎site/src/components/TemplateFiles/TemplateFiles.stories.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { action } from "@storybook/addon-actions";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import { chromatic } from "testHelpers/chromatic";
4+
import { TemplateFiles } from "./TemplateFiles";
5+
6+
const exampleFiles = {
7+
"README.md":
8+
"---\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",
9+
"build/Dockerfile":
10+
'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',
11+
"main.tf":
12+
'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',
13+
};
14+
15+
const meta: Meta<typeof TemplateFiles> = {
16+
title: "components/TemplateFiles",
17+
parameters: { chromatic },
18+
component: TemplateFiles,
19+
args: {
20+
currentFiles: exampleFiles,
21+
previousFiles: exampleFiles,
22+
tab: { value: "0", set: action("change tab") },
23+
},
24+
};
25+
26+
export default meta;
27+
type Story = StoryObj<typeof TemplateFiles>;
28+
29+
const Example: Story = {};
30+
31+
export { Example as TemplateFiles };

‎site/src/components/TemplateFiles/TemplateFiles.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,17 @@ const languageByExtension: Record<AllowedExtension, string> = {
3737
protobuf: "protobuf",
3838
};
3939

40-
export const TemplateFiles: FC<{
40+
interface TemplateFilesProps {
4141
currentFiles: TemplateVersionFiles;
4242
previousFiles?: TemplateVersionFiles;
4343
tab: UseTabResult;
44-
}> = ({ currentFiles, previousFiles, tab }) => {
44+
}
45+
46+
export const TemplateFiles: FC<TemplateFilesProps> = ({
47+
currentFiles,
48+
previousFiles,
49+
tab,
50+
}) => {
4551
const filenames = Object.keys(currentFiles);
4652
const selectedFilename = filenames[Number(tab.value)];
4753
const currentFile = currentFiles[selectedFilename];

‎site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
6969
className,
7070
}) => {
7171
if (!workspace.dormant_at) {
72-
return <></>;
72+
return null;
7373
}
7474

7575
const formatDate = (dateStr: string): string => {

‎site/src/contexts/ThemeProviders.tsx renamed to ‎site/src/contexts/ThemeProvider.tsx

File renamed without changes.

0 commit comments

Comments
 (0)