diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go index d4dfb80cd13b5..a4ce06d7cb2c3 100644 --- a/coderd/apidoc/docs.go +++ b/coderd/apidoc/docs.go @@ -15605,12 +15605,16 @@ const docTemplate = `{ "enum": [ "", "ibm-plex-mono", - "fira-code" + "fira-code", + "source-code-pro", + "jetbrains-mono" ], "x-enum-varnames": [ "TerminalFontUnknown", "TerminalFontIBMPlexMono", - "TerminalFontFiraCode" + "TerminalFontFiraCode", + "TerminalFontSourceCodePro", + "TerminalFontJetBrainsMono" ] }, "codersdk.TimingStage": { diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json index 7e28bf764d9e7..37dbcb4b3ec02 100644 --- a/coderd/apidoc/swagger.json +++ b/coderd/apidoc/swagger.json @@ -14187,11 +14187,19 @@ }, "codersdk.TerminalFontName": { "type": "string", - "enum": ["", "ibm-plex-mono", "fira-code"], + "enum": [ + "", + "ibm-plex-mono", + "fira-code", + "source-code-pro", + "jetbrains-mono" + ], "x-enum-varnames": [ "TerminalFontUnknown", "TerminalFontIBMPlexMono", - "TerminalFontFiraCode" + "TerminalFontFiraCode", + "TerminalFontSourceCodePro", + "TerminalFontJetBrainsMono" ] }, "codersdk.TimingStage": { diff --git a/codersdk/users.go b/codersdk/users.go index bdc9b521367f0..ab51775e5494d 100644 --- a/codersdk/users.go +++ b/codersdk/users.go @@ -192,12 +192,17 @@ type ValidateUserPasswordResponse struct { // TerminalFontName is the name of supported terminal font type TerminalFontName string -var TerminalFontNames = []TerminalFontName{TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode} +var TerminalFontNames = []TerminalFontName{ + TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode, + TerminalFontSourceCodePro, TerminalFontJetBrainsMono, +} const ( - TerminalFontUnknown TerminalFontName = "" - TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono" - TerminalFontFiraCode TerminalFontName = "fira-code" + TerminalFontUnknown TerminalFontName = "" + TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono" + TerminalFontFiraCode TerminalFontName = "fira-code" + TerminalFontSourceCodePro TerminalFontName = "source-code-pro" + TerminalFontJetBrainsMono TerminalFontName = "jetbrains-mono" ) type UserAppearanceSettings struct { diff --git a/docs/reference/api/schemas.md b/docs/reference/api/schemas.md index 35f9f61f7c640..be809670a6d84 100644 --- a/docs/reference/api/schemas.md +++ b/docs/reference/api/schemas.md @@ -6723,11 +6723,13 @@ Restarts will only happen on weekdays in this list on weeks which line up with W #### Enumerated Values -| Value | -|-----------------| -| `` | -| `ibm-plex-mono` | -| `fira-code` | +| Value | +|-------------------| +| `` | +| `ibm-plex-mono` | +| `fira-code` | +| `source-code-pro` | +| `jetbrains-mono` | ## codersdk.TimingStage diff --git a/site/package.json b/site/package.json index 2b5104ddcb283..6f164005ab49e 100644 --- a/site/package.json +++ b/site/package.json @@ -44,6 +44,8 @@ "@fontsource-variable/inter": "5.1.1", "@fontsource/fira-code": "5.2.5", "@fontsource/ibm-plex-mono": "5.1.1", + "@fontsource/jetbrains-mono": "5.2.5", + "@fontsource/source-code-pro": "5.2.5", "@monaco-editor/react": "4.6.0", "@mui/icons-material": "5.16.14", "@mui/lab": "5.0.0-alpha.175", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 7a6dac0d026b6..92382a11b2ad7 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -46,6 +46,12 @@ importers: '@fontsource/ibm-plex-mono': specifier: 5.1.1 version: 5.1.1 + '@fontsource/jetbrains-mono': + specifier: 5.2.5 + version: 5.2.5 + '@fontsource/source-code-pro': + specifier: 5.2.5 + version: 5.2.5 '@monaco-editor/react': specifier: 4.6.0 version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1049,6 +1055,12 @@ packages: '@fontsource/ibm-plex-mono@5.1.1': resolution: {integrity: sha512-1aayqPe/ZkD3MlvqpmOHecfA3f2B8g+fAEkgvcCd3lkPP0pS1T0xG5Zmn2EsJQqr1JURtugPUH+5NqvKyfFZMQ==, tarball: https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.1.1.tgz} + '@fontsource/jetbrains-mono@5.2.5': + resolution: {integrity: sha512-TPZ9b/uq38RMdrlZZkl0RwN8Ju9JxuqMETrw76pUQFbGtE1QbwQaNsLlnUrACNNBNbd0NZRXiJJSkC8ajPgbew==, tarball: https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.5.tgz} + + '@fontsource/source-code-pro@5.2.5': + resolution: {integrity: sha512-1k7b9IdhVSdK/rJ8CkqqGFZ01C3NaXNynPZqKaTetODog/GPJiMYd6E8z+LTwSUTIX8dm2QZORDC+Uh91cjXSg==, tarball: https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-5.2.5.tgz} + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==, tarball: https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz} engines: {node: '>=10.10.0'} @@ -7022,6 +7034,10 @@ snapshots: '@fontsource/ibm-plex-mono@5.1.1': {} + '@fontsource/jetbrains-mono@5.2.5': {} + + '@fontsource/source-code-pro@5.2.5': {} + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts index 1197d6b6e109e..0fd31361e69a3 100644 --- a/site/src/api/typesGenerated.ts +++ b/site/src/api/typesGenerated.ts @@ -2658,11 +2658,18 @@ export interface TemplateVersionsByTemplateRequest extends Pagination { } // From codersdk/users.go -export type TerminalFontName = "fira-code" | "ibm-plex-mono" | ""; +export type TerminalFontName = + | "fira-code" + | "ibm-plex-mono" + | "jetbrains-mono" + | "source-code-pro" + | ""; export const TerminalFontNames: TerminalFontName[] = [ "fira-code", "ibm-plex-mono", + "jetbrains-mono", + "source-code-pro", "", ]; diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx index 9ecee2dfac83a..10b549d23c792 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -16,7 +16,11 @@ import { Stack } from "components/Stack/Stack"; import { ThemeOverride } from "contexts/ThemeProvider"; import type { FC } from "react"; import themes, { DEFAULT_THEME, type Theme } from "theme"; -import { DEFAULT_TERMINAL_FONT, terminalFontLabels } from "theme/constants"; +import { + DEFAULT_TERMINAL_FONT, + terminalFontLabels, + terminalFonts, +} from "theme/constants"; import { Section } from "../Section"; export interface AppearanceFormProps { @@ -115,7 +119,7 @@ export const AppearanceForm: FC = ({ value={name} control={} label={ -
+
{terminalFontLabels[name]}
} diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx index 59dc62980b9f0..6f78fec6b58a0 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx @@ -51,8 +51,8 @@ describe("appearance page", () => { theme_preference: "dark", }); - const ibmPlex = await screen.findByText("Fira Code"); - await userEvent.click(ibmPlex); + const firaCode = await screen.findByText("Fira Code"); + await userEvent.click(firaCode); // Check if the API was called correctly expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1); @@ -61,4 +61,44 @@ describe("appearance page", () => { theme_preference: "dark", }); }); + + it("changes font to fira code, then back to web terminal font", async () => { + renderWithAuth(); + + // given + jest + .spyOn(API, "updateAppearanceSettings") + .mockResolvedValueOnce({ + ...MockUser, + terminal_font: "fira-code", + theme_preference: "dark", + }) + .mockResolvedValueOnce({ + ...MockUser, + terminal_font: "ibm-plex-mono", + theme_preference: "dark", + }); + + // when + const firaCode = await screen.findByText("Fira Code"); + await userEvent.click(firaCode); + + // then + expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1); + expect(API.updateAppearanceSettings).toHaveBeenCalledWith({ + terminal_font: "fira-code", + theme_preference: "dark", + }); + + // when + const ibmPlex = await screen.findByText("Web Terminal Font"); + await userEvent.click(ibmPlex); + + // then + expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(2); + expect(API.updateAppearanceSettings).toHaveBeenNthCalledWith(2, { + terminal_font: "ibm-plex-mono", + theme_preference: "dark", + }); + }); }); diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index 162e67310749c..8a3c6375dce3a 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -7,13 +7,23 @@ export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`; export const terminalFonts: Record = { "fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"), + "jetbrains-mono": MONOSPACE_FONT_FAMILY.replace( + "IBM Plex Mono", + "JetBrains Mono", + ), + "source-code-pro": MONOSPACE_FONT_FAMILY.replace( + "IBM Plex Mono", + "Source Code Pro", + ), "ibm-plex-mono": MONOSPACE_FONT_FAMILY, "": MONOSPACE_FONT_FAMILY, }; export const terminalFontLabels: Record = { "fira-code": "Fira Code", - "ibm-plex-mono": "IBM Plex Mono", + "jetbrains-mono": "JetBrains Mono", + "source-code-pro": "Source Code Pro", + "ibm-plex-mono": "Web Terminal Font", "": "", // needed for enum completeness, otherwise fails the build }; export const DEFAULT_TERMINAL_FONT = "ibm-plex-mono"; diff --git a/site/src/theme/globalFonts.ts b/site/src/theme/globalFonts.ts index db8089f9db266..c30bccca63d53 100644 --- a/site/src/theme/globalFonts.ts +++ b/site/src/theme/globalFonts.ts @@ -3,6 +3,10 @@ import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/600.css"; // Main body copy font import "@fontsource-variable/inter"; -// Alternative font for Terminal +// Alternative fonts for Terminal import "@fontsource/fira-code/400.css"; import "@fontsource/fira-code/600.css"; +import "@fontsource/source-code-pro/400.css"; +import "@fontsource/source-code-pro/600.css"; +import "@fontsource/jetbrains-mono/400.css"; +import "@fontsource/jetbrains-mono/600.css";