From 0b0725c7c03a4f5fd4ee5fdaaed5acfe83c5424c Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 18:39:40 +0000 Subject: [PATCH 01/66] remove i18next packages --- site/package.json | 2 -- site/pnpm-lock.yaml | 43 --------------------------------------- site/src/@types/i18n.d.ts | 10 --------- 3 files changed, 55 deletions(-) delete mode 100644 site/src/@types/i18n.d.ts diff --git a/site/package.json b/site/package.json index efd5fd333dafa..18e562cea09ff 100644 --- a/site/package.json +++ b/site/package.json @@ -69,7 +69,6 @@ "eventsourcemock": "2.0.0", "formik": "2.4.1", "front-matter": "4.0.2", - "i18next": "22.5.0", "jest-environment-jsdom": "29.5.0", "lodash": "4.17.21", "monaco-editor": "0.41.0", @@ -82,7 +81,6 @@ "react-dom": "18.2.0", "react-headless-tabs": "6.0.3", "react-helmet-async": "1.3.0", - "react-i18next": "12.2.2", "react-markdown": "8.0.3", "react-router-dom": "6.15.0", "react-syntax-highlighter": "15.5.0", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index ee9c490862c1e..83f8763564638 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -123,9 +123,6 @@ dependencies: front-matter: specifier: 4.0.2 version: 4.0.2 - i18next: - specifier: 22.5.0 - version: 22.5.0 jest-environment-jsdom: specifier: 29.5.0 version: 29.5.0(canvas@2.11.0) @@ -162,9 +159,6 @@ dependencies: react-helmet-async: specifier: 1.3.0 version: 1.3.0(react-dom@18.2.0)(react@18.2.0) - react-i18next: - specifier: 12.2.2 - version: 12.2.2(i18next@22.5.0)(react-dom@18.2.0)(react@18.2.0) react-markdown: specifier: 8.0.3 version: 8.0.3(@types/react@18.2.6)(react@18.2.0) @@ -8944,12 +8938,6 @@ packages: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} dev: true - /html-parse-stringify@3.0.1: - resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} - dependencies: - void-elements: 3.1.0 - dev: false - /html-tags@3.3.1: resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} engines: {node: '>=8'} @@ -9005,12 +8993,6 @@ packages: resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} dev: false - /i18next@22.5.0: - resolution: {integrity: sha512-sqWuJFj+wJAKQP2qBQ+b7STzxZNUmnSxrehBCCj9vDOW9RDYPfqCaK1Hbh2frNYQuPziz6O2CGoJPwtzY3vAYA==} - dependencies: - '@babel/runtime': 7.22.6 - dev: false - /iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -11907,26 +11889,6 @@ packages: shallowequal: 1.1.0 dev: false - /react-i18next@12.2.2(i18next@22.5.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg==} - peerDependencies: - i18next: '>= 19.0.0' - react: '>= 16.8.0' - react-dom: '*' - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - dependencies: - '@babel/runtime': 7.22.6 - html-parse-stringify: 3.0.1 - i18next: 22.5.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /react-inspector@6.0.2(react@18.2.0): resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==} peerDependencies: @@ -13898,11 +13860,6 @@ packages: optionalDependencies: fsevents: 2.3.3 - /void-elements@3.1.0: - resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==} - engines: {node: '>=0.10.0'} - dev: false - /vscode-jsonrpc@6.0.0: resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==} engines: {node: '>=8.0.0 || >=10.0.0'} diff --git a/site/src/@types/i18n.d.ts b/site/src/@types/i18n.d.ts deleted file mode 100644 index 6de407a1e5199..0000000000000 --- a/site/src/@types/i18n.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import "i18next"; - -// https://github.com/i18next/react-i18next/issues/1543#issuecomment-1528679591 -declare module "i18next" { - interface TypeOptions { - returnNull: false; - allowObjectInHTMLChildren: false; - } - export function t(s: string): T; -} From 6a585bc9a5d17f840c34d32d57f2b21f72f3144a Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 18:46:11 +0000 Subject: [PATCH 02/66] remove provider --- site/src/i18n/en/index.ts | 47 -------------------------- site/src/i18n/i18n.ts | 21 ------------ site/src/i18n/index.ts | 1 - site/src/testHelpers/renderHelpers.tsx | 16 +++------ 4 files changed, 5 insertions(+), 80 deletions(-) delete mode 100644 site/src/i18n/en/index.ts delete mode 100644 site/src/i18n/i18n.ts delete mode 100644 site/src/i18n/index.ts diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts deleted file mode 100644 index 4e30de23b6529..0000000000000 --- a/site/src/i18n/en/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -import auditLog from "./auditLog.json"; -import common from "./common.json"; -import createWorkspacePage from "./createWorkspacePage.json"; -import templatePage from "./templatePage.json"; -import templatesPage from "./templatesPage.json"; -import workspacePage from "./workspacePage.json"; -import agent from "./agent.json"; -import buildPage from "./buildPage.json"; -import workspacesPage from "./workspacesPage.json"; -import usersPage from "./usersPage.json"; -import templateSettingsPage from "./templateSettingsPage.json"; -import templateVariablesPage from "./templateVariablesPage.json"; -import templateVersionPage from "./templateVersionPage.json"; -import loginPage from "./loginPage.json"; -import workspaceSchedulePage from "./workspaceSchedulePage.json"; -import appearanceSettings from "./appearanceSettings.json"; -import starterTemplatesPage from "./starterTemplatesPage.json"; -import starterTemplatePage from "./starterTemplatePage.json"; -import createTemplatePage from "./createTemplatePage.json"; -import userSettingsPage from "./userSettingsPage.json"; -import tokensPage from "./tokensPage.json"; -import workspaceSettingsPage from "./workspaceSettingsPage.json"; - -export const en = { - common, - workspacePage, - auditLog, - templatePage, - templatesPage, - createWorkspacePage, - agent, - buildPage, - workspacesPage, - usersPage, - templateSettingsPage, - templateVariablesPage, - templateVersionPage, - loginPage, - workspaceSchedulePage, - appearanceSettings, - starterTemplatesPage, - starterTemplatePage, - createTemplatePage, - userSettingsPage, - tokensPage, - workspaceSettingsPage, -}; diff --git a/site/src/i18n/i18n.ts b/site/src/i18n/i18n.ts deleted file mode 100644 index dcf297d643991..0000000000000 --- a/site/src/i18n/i18n.ts +++ /dev/null @@ -1,21 +0,0 @@ -import i18next from "i18next"; -import { initReactI18next } from "react-i18next"; -import { en } from "./en"; - -export const defaultNS = "common"; -export const resources = { en } as const; - -export const i18n = i18next.use(initReactI18next); - -i18n - .init({ - fallbackLng: "en", - interpolation: { - escapeValue: false, // not needed for react as it escapes by default - }, - resources, - }) - .catch((error) => { - // we are catching here to avoid lint's no-floating-promises error - console.error("[Translation Service]:", error); - }); diff --git a/site/src/i18n/index.ts b/site/src/i18n/index.ts deleted file mode 100644 index 0c4205e06f69e..0000000000000 --- a/site/src/i18n/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./i18n"; diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx index e4a0f856532c9..3e87234d739f5 100644 --- a/site/src/testHelpers/renderHelpers.tsx +++ b/site/src/testHelpers/renderHelpers.tsx @@ -5,10 +5,8 @@ import { } from "@testing-library/react"; import { AppProviders } from "App"; import { DashboardLayout } from "components/Dashboard/DashboardLayout"; -import { i18n } from "i18n"; import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout"; import { WorkspaceSettingsLayout } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout"; -import { I18nextProvider } from "react-i18next"; import { RouterProvider, createMemoryRouter, @@ -18,19 +16,15 @@ import { RequireAuth } from "../components/RequireAuth/RequireAuth"; import { MockUser } from "./entities"; import { ReactNode } from "react"; -const baseRender = (element: ReactNode) => { - return tlRender( - - {element} - , - ); -}; - export const renderWithRouter = ( router: ReturnType, ) => { return { - ...baseRender(), + ...tlRender( + + () + , + ), router, }; }; From 7e63f309f540598aab082765fcfbe851e4439f44 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:02:12 +0000 Subject: [PATCH 03/66] refactor `DeleteDialog` --- .../Dialogs/DeleteDialog/DeleteDialog.test.tsx | 15 ++------------- .../Dialogs/DeleteDialog/DeleteDialog.tsx | 16 +++++++++------- site/src/i18n/en/common.json | 7 ------- 3 files changed, 11 insertions(+), 27 deletions(-) diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx index 688997c1e7168..c88bbea814f03 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx @@ -1,6 +1,5 @@ import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import i18next from "i18next"; import { render } from "testHelpers/renderHelpers"; import { DeleteDialog } from "./DeleteDialog"; @@ -20,7 +19,6 @@ describe("DeleteDialog", () => { }); it("disables confirm button when the text field is filled incorrectly", async () => { - const { t } = i18next; render( { name="MyTemplate" />, ); - const labelText = t("deleteDialog.confirmLabel", { - ns: "common", - entity: "template", - }); - const textField = screen.getByLabelText(labelText); + const textField = screen.getByTestId("delete-dialog-name-confirmation"); await userEvent.type(textField, "MyTemplateWrong"); const confirmButton = screen.getByRole("button", { name: "Delete" }); expect(confirmButton).toBeDisabled(); }); it("enables confirm button when the text field is filled correctly", async () => { - const { t } = i18next; render( { name="MyTemplate" />, ); - const labelText = t("deleteDialog.confirmLabel", { - ns: "common", - entity: "template", - }); - const textField = screen.getByLabelText(labelText); + const textField = screen.getByTestId("delete-dialog-name-confirmation"); await userEvent.type(textField, "MyTemplate"); const confirmButton = screen.getByRole("button", { name: "Delete" }); expect(confirmButton).not.toBeDisabled(); diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index ebca5f3da34ab..0ac7938f5c4c3 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -2,7 +2,6 @@ import makeStyles from "@mui/styles/makeStyles"; import TextField from "@mui/material/TextField"; import { Maybe } from "components/Conditionals/Maybe"; import { ChangeEvent, useState, PropsWithChildren, FC } from "react"; -import { useTranslation } from "react-i18next"; import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"; export interface DeleteDialogProps { @@ -25,7 +24,6 @@ export const DeleteDialog: FC> = ({ confirmLoading, }) => { const styles = useStyles(); - const { t } = useTranslation("common"); const [nameValue, setNameValue] = useState(""); const confirmed = name === nameValue; const handleChange = (event: ChangeEvent) => { @@ -35,11 +33,12 @@ export const DeleteDialog: FC> = ({ const content = ( <> -

{t("deleteDialog.intro", { entity })}

+

Deleting this {entity} is irreversible!

{info}

 -

{t("deleteDialog.confirm", { entity, name })}

+

Are you sure you want to proceed?

+

Type {name} below to confirm.

{ @@ -59,9 +58,12 @@ export const DeleteDialog: FC> = ({ placeholder={name} value={nameValue} onChange={handleChange} - label={t("deleteDialog.confirmLabel", { entity })} + label={`Name of the ${entity} to delete`} error={hasError} - helperText={hasError && t("deleteDialog.incorrectName", { entity })} + helperText={ + hasError && `${nameValue} does not match the name of this ${entity}` + } + inputProps={{ ["data-testid"]: "delete-dialog-name-confirmation" }} /> @@ -72,7 +74,7 @@ export const DeleteDialog: FC> = ({ type="delete" hideCancel={false} open={isOpen} - title={t("deleteDialog.title", { entity })} + title={`Delete ${entity}`} onConfirm={onConfirm} onClose={onCancel} description={content} diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json index 875976e4d8e41..8098d589bde5d 100644 --- a/site/src/i18n/en/common.json +++ b/site/src/i18n/en/common.json @@ -13,13 +13,6 @@ "failed": "Failed", "pending": "Pending" }, - "deleteDialog": { - "title": "Delete {{entity}}", - "intro": "Deleting this {{entity}} is irreversible!", - "confirm": "Are you sure you want to proceed? Type {{name}} below to confirm.", - "confirmLabel": "Name of {{entity}} to delete", - "incorrectName": "Incorrect {{entity}} name." - }, "schedule": { "autostartLabel": "Starts at", "autostopLabel": "Stops at" From 6636ed736b8859c0639ce8c654c25034db70c7f4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:04:52 +0000 Subject: [PATCH 04/66] refactor `Expander` --- site/src/components/Expander/Expander.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx index ce23a412e136c..5fb61376786c7 100644 --- a/site/src/components/Expander/Expander.tsx +++ b/site/src/components/Expander/Expander.tsx @@ -6,7 +6,6 @@ import { } from "components/DropdownArrows/DropdownArrows"; import { PropsWithChildren, FC } from "react"; import Collapse from "@mui/material/Collapse"; -import { useTranslation } from "react-i18next"; import { combineClasses } from "utils/combineClasses"; export interface ExpanderProps { @@ -20,7 +19,6 @@ export const Expander: FC> = ({ children, }) => { const styles = useStyles(); - const { t } = useTranslation("common"); const toggleExpanded = () => setExpanded(!expanded); @@ -29,7 +27,7 @@ export const Expander: FC> = ({ {!expanded && ( - {t("ctas.expand")} + Click here to learn more @@ -43,7 +41,7 @@ export const Expander: FC> = ({ className={combineClasses([styles.expandLink, styles.collapseLink])} > - {t("ctas.collapse")} + Click here to hide From 202c9fa92b36a35a86f2f18ee0ce4dbb64108fc1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:06:49 +0000 Subject: [PATCH 05/66] refactor `IconField` --- site/src/components/IconField/IconField.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 32c334e0eea86..0d11665257f07 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -7,7 +7,6 @@ import { useRef, FC, useState } from "react"; import Picker from "@emoji-mart/react"; import { makeStyles } from "@mui/styles"; import { colors } from "theme/colors"; -import { useTranslation } from "react-i18next"; import data from "@emoji-mart/data/sets/14/twitter.json"; import { Stack } from "components/Stack/Stack"; @@ -26,7 +25,6 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { const styles = useStyles(); const emojiButtonRef = useRef(null); const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false); - const { t } = useTranslation("templateSettingsPage"); const hasIcon = textFieldProps.value && textFieldProps.value !== ""; return ( @@ -34,7 +32,7 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { @@ -59,7 +57,7 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { setIsEmojiPickerOpen((v) => !v); }} > - {t("selectEmoji")} + Select emoji Date: Fri, 8 Sep 2023 19:08:39 +0000 Subject: [PATCH 06/66] refactor `AgentOutdatedTooltip` --- .../Resources/AgentOutdatedTooltip.tsx | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx index c5e03fbf35083..472a80bf4c6b6 100644 --- a/site/src/components/Resources/AgentOutdatedTooltip.tsx +++ b/site/src/components/Resources/AgentOutdatedTooltip.tsx @@ -11,7 +11,6 @@ import { } from "components/HelpTooltip/HelpTooltip"; import { WorkspaceAgent } from "api/typesGenerated"; import { Stack } from "components/Stack/Stack"; -import { useTranslation } from "react-i18next"; type AgentOutdatedTooltipProps = ComponentProps & { agent: WorkspaceAgent; @@ -30,7 +29,6 @@ export const AgentOutdatedTooltip: FC = ({ anchorEl, }) => { const styles = useStyles(); - const { t } = useTranslation("workspacePage"); return ( = ({
- - {t("agentOutdatedTooltip.title")} - + Agent Outdated - {t("agentOutdatedTooltip.description")} + This agent is an older version than the Coder server. This can + happen after you update Coder with running workspaces. To fix + this, you can stop and start the workspace.
- - {t("agentOutdatedTooltip.agentVersionLabel")} - + Agent version {agent.version} - - {t("agentOutdatedTooltip.serverVersionLabel")} - + Server version {serverVersion} @@ -71,7 +65,7 @@ export const AgentOutdatedTooltip: FC = ({ onClick={onUpdate} ariaLabel="Update workspace" > - {t("agentOutdatedTooltip.updateWorkspaceLabel")} + Update workspace From 9d93117cf79d5f2c43065c6eca44578cadf7ab5b Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:10:34 +0000 Subject: [PATCH 07/66] refactor `AgentRowPreview` --- site/src/components/Resources/AgentRowPreview.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index b6a6fa7bb388e..24246f149b7cf 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -2,7 +2,6 @@ import { makeStyles } from "@mui/styles"; import { AppPreviewLink } from "components/Resources/AppLink/AppPreviewLink"; import { Maybe } from "components/Conditionals/Maybe"; import { FC } from "react"; -import { useTranslation } from "react-i18next"; import { combineClasses } from "utils/combineClasses"; import { WorkspaceAgent } from "../../api/typesGenerated"; import { Stack } from "../Stack/Stack"; @@ -21,7 +20,6 @@ export const AgentRowPreview: FC = ({ alignValues, }) => { const styles = useStyles({ alignValues }); - const { t } = useTranslation("agent"); return ( = ({ styles.agentDataName, ])} > - {t("labels.agent").toString()}: + Agent: {agent.name} @@ -65,7 +63,7 @@ export const AgentRowPreview: FC = ({ styles.agentDataOS, ])} > - {t("labels.os").toString()}: + OS: = ({ spacing={1} className={styles.agentDataItem} > - {t("labels.apps").toString()}: + Apps: = ({ ))} - - {t("labels.noApps")} - + None From 8d79655560d411edda6f3b7b403b3802eec6e19a Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:18:43 +0000 Subject: [PATCH 08/66] refactor `AgentStatus` --- site/src/components/Resources/AgentStatus.tsx | 49 ++++++++----------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx index 6e10cce02381e..6b67e957e33ea 100644 --- a/site/src/components/Resources/AgentStatus.tsx +++ b/site/src/components/Resources/AgentStatus.tsx @@ -3,7 +3,6 @@ import { makeStyles } from "@mui/styles"; import { combineClasses } from "utils/combineClasses"; import { WorkspaceAgent } from "api/typesGenerated"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; -import { useTranslation } from "react-i18next"; import WarningRounded from "@mui/icons-material/WarningRounded"; import { HelpPopover, @@ -21,13 +20,12 @@ import Link from "@mui/material/Link"; const ReadyLifecycle = () => { const styles = useStyles(); - const { t } = useTranslation("workspacePage"); return (
); @@ -50,7 +48,6 @@ const StartingLifecycle: React.FC = () => { const StartTimeoutLifecycle: React.FC<{ agent: WorkspaceAgent; }> = ({ agent }) => { - const { t } = useTranslation("agent"); const styles = useStyles(); const anchorRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -63,7 +60,7 @@ const StartTimeoutLifecycle: React.FC<{ onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} role="status" - aria-label={t("status.startTimeout")} + aria-label="Start timeout" className={styles.timeoutWarning} /> setIsOpen(true)} onClose={() => setIsOpen(false)} > - {t("startTimeoutTooltip.title")} + Agent is taking too long to start - {t("startTimeoutTooltip.message")}{" "} + We noticed this agent is taking longer than expected to start.{" "} - {t("startTimeoutTooltip.link")} + Troubleshoot . @@ -93,7 +90,6 @@ const StartTimeoutLifecycle: React.FC<{ const StartErrorLifecycle: React.FC<{ agent: WorkspaceAgent; }> = ({ agent }) => { - const { t } = useTranslation("agent"); const styles = useStyles(); const anchorRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -106,7 +102,7 @@ const StartErrorLifecycle: React.FC<{ onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} role="status" - aria-label={t("status.error")} + aria-label="Start error" className={styles.errorWarning} /> setIsOpen(true)} onClose={() => setIsOpen(false)} > - {t("startErrorTooltip.title")} + Error starting the agent - {t("startErrorTooltip.message")}{" "} + Something went wrong during the agent startup.{" "} - {t("startErrorTooltip.link")} + Troubleshoot . @@ -150,7 +146,6 @@ const ShuttingDownLifecycle: React.FC = () => { const ShutdownTimeoutLifecycle: React.FC<{ agent: WorkspaceAgent; }> = ({ agent }) => { - const { t } = useTranslation("agent"); const styles = useStyles(); const anchorRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -163,7 +158,7 @@ const ShutdownTimeoutLifecycle: React.FC<{ onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} role="status" - aria-label={t("status.shutdownTimeout")} + aria-label="Stop timeout" className={styles.timeoutWarning} /> setIsOpen(true)} onClose={() => setIsOpen(false)} > - {t("shutdownTimeoutTooltip.title")} + Agent is taking too long to stop - {t("shutdownTimeoutTooltip.message")}{" "} + We noticed this agent is taking longer than expected to stop.{" "} - {t("shutdownTimeoutTooltip.link")} + Troubleshoot . @@ -193,7 +188,6 @@ const ShutdownTimeoutLifecycle: React.FC<{ const ShutdownErrorLifecycle: React.FC<{ agent: WorkspaceAgent; }> = ({ agent }) => { - const { t } = useTranslation("agent"); const styles = useStyles(); const anchorRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -206,7 +200,7 @@ const ShutdownErrorLifecycle: React.FC<{ onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} role="status" - aria-label={t("status.error")} + aria-label="Stop error" className={styles.errorWarning} /> setIsOpen(true)} onClose={() => setIsOpen(false)} > - {t("shutdownErrorTooltip.title")} + Error stopping the agent - {t("shutdownErrorTooltip.message")}{" "} + Something went wrong while trying to stop the agent.{" "} - {t("shutdownErrorTooltip.link")} + Troubleshoot . @@ -316,7 +310,6 @@ const ConnectingStatus: React.FC = () => { const TimeoutStatus: React.FC<{ agent: WorkspaceAgent; }> = ({ agent }) => { - const { t } = useTranslation("agent"); const styles = useStyles(); const anchorRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -329,7 +322,7 @@ const TimeoutStatus: React.FC<{ onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} role="status" - aria-label={t("status.timeout")} + aria-label="Timeout" className={styles.timeoutWarning} /> setIsOpen(true)} onClose={() => setIsOpen(false)} > - {t("timeoutTooltip.title")} + Agent is taking too long to connect - {t("timeoutTooltip.message")}{" "} + We noticed this agent is taking longer than expected to connect.{" "} - {t("timeoutTooltip.link")} + Troubleshoot . From 916428642d1c5f4c7f8a44b129b75d6262cd5853 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:20:07 +0000 Subject: [PATCH 09/66] refactor `ShareIcon` --- site/src/components/Resources/AppLink/ShareIcon.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/src/components/Resources/AppLink/ShareIcon.tsx b/site/src/components/Resources/AppLink/ShareIcon.tsx index 7e04a4dd119b2..bde1fa7e8d747 100644 --- a/site/src/components/Resources/AppLink/ShareIcon.tsx +++ b/site/src/components/Resources/AppLink/ShareIcon.tsx @@ -3,31 +3,29 @@ import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined"; import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined"; import * as TypesGen from "../../../api/typesGenerated"; import Tooltip from "@mui/material/Tooltip"; -import { useTranslation } from "react-i18next"; export interface ShareIconProps { app: TypesGen.WorkspaceApp; } export const ShareIcon = ({ app }: ShareIconProps) => { - const { t } = useTranslation("agent"); if (app.external) { return ( - + ); } if (app.sharing_level === "authenticated") { return ( - + ); } if (app.sharing_level === "public") { return ( - + ); From 7ff932b58a7665304c4ad64bf0e00248114f3b46 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:21:48 +0000 Subject: [PATCH 10/66] refactor `UserAutocomplete` --- site/src/components/UserAutocomplete/UserAutocomplete.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 640d86bebb8cb..b144c13bc072d 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -9,7 +9,6 @@ import { AvatarData } from "components/AvatarData/AvatarData"; import debounce from "just-debounce-it"; import { ChangeEvent, ComponentProps, FC, useEffect, useState } from "react"; import { searchUserMachine } from "xServices/users/searchUserXService"; -import { useTranslation } from "react-i18next"; import Box from "@mui/material/Box"; export type UserAutocompleteProps = { @@ -28,7 +27,6 @@ export const UserAutocomplete: FC = ({ size = "small", }) => { const styles = useStyles(); - const { t } = useTranslation("common"); const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false); const [searchState, sendSearch] = useMachine(searchUserMachine); const { searchResults } = searchState.context; @@ -51,7 +49,7 @@ export const UserAutocomplete: FC = ({ return ( = ({ )} renderInput={(params) => ( <> - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Need it */} - {/* @ts-ignore -- Issue from lib https://github.com/i18next/react-i18next/issues/1543 */} Date: Fri, 8 Sep 2023 19:22:45 +0000 Subject: [PATCH 11/66] remove stale comment --- .../UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx index 491a713258cbe..8d400ecac46a5 100644 --- a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx +++ b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx @@ -95,8 +95,6 @@ export const UserOrGroupAutocomplete: React.FC< className={styles.autocomplete} renderInput={(params) => ( <> - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Need it */} - {/* @ts-ignore -- Issue from lib https://github.com/i18next/react-i18next/issues/1543 */} Date: Fri, 8 Sep 2023 19:25:25 +0000 Subject: [PATCH 12/66] refactor `AuditPageView` --- site/src/pages/AuditPage/AuditPageView.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx index db8bb15593c00..26e1b9f975dfc 100644 --- a/site/src/pages/AuditPage/AuditPageView.tsx +++ b/site/src/pages/AuditPage/AuditPageView.tsx @@ -18,7 +18,6 @@ import { TableLoader } from "components/TableLoader/TableLoader"; import { Timeline } from "components/Timeline/Timeline"; import { AuditHelpTooltip } from "./AuditHelpTooltip"; import { ComponentProps, FC } from "react"; -import { useTranslation } from "react-i18next"; import { AuditPaywall } from "./AuditPaywall"; import { AuditFilter } from "./AuditFilter"; import { @@ -55,8 +54,6 @@ export const AuditPageView: FC = ({ error, filterProps, }) => { - const { t } = useTranslation("auditLog"); - const isLoading = (auditLogs === undefined || count === undefined) && !error; const isEmpty = !isLoading && auditLogs?.length === 0; @@ -93,7 +90,7 @@ export const AuditPageView: FC = ({ - + @@ -105,14 +102,14 @@ export const AuditPageView: FC = ({ - + - + From fc043ed49cb6da75fddf46129e2ac5fcfaecf254 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:26:32 +0000 Subject: [PATCH 13/66] refactor `AuditPaywall` --- site/src/pages/AuditPage/AuditPaywall.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/site/src/pages/AuditPage/AuditPaywall.tsx b/site/src/pages/AuditPage/AuditPaywall.tsx index 22f55982ecc5f..bf1ecbeaea421 100644 --- a/site/src/pages/AuditPage/AuditPaywall.tsx +++ b/site/src/pages/AuditPage/AuditPaywall.tsx @@ -4,21 +4,18 @@ import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined"; import { Paywall } from "components/Paywall/Paywall"; import { Stack } from "components/Stack/Stack"; import { FC } from "react"; -import { useTranslation } from "react-i18next"; import { docs } from "utils/docs"; export const AuditPaywall: FC = () => { - const { t } = useTranslation("auditLog"); - return ( { target="_blank" rel="noreferrer" > - {t("paywall.actions.readDocs")} + Read the documentation } From 3eb8d69e165eaeb688bea0441ab34a71b360164b Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:28:04 +0000 Subject: [PATCH 14/66] `AuditLogRow` --- site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx index fafa263030409..64fcc22a6c112 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx @@ -13,7 +13,6 @@ import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useState } from "react"; import userAgentParser from "ua-parser-js"; import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff"; -import { useTranslation } from "react-i18next"; import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription"; import { PaletteIndex } from "theme/theme"; import { determineGroupDiff } from "./AuditLogDiff/auditUtils"; @@ -46,7 +45,6 @@ export const AuditLogRow: React.FC = ({ defaultIsDiffOpen = false, }) => { const styles = useStyles(); - const { t } = useTranslation("auditLog"); const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen); const diffs = Object.entries(auditLog.diff); const shouldDisplayDiff = diffs.length > 0; @@ -114,7 +112,7 @@ export const AuditLogRow: React.FC = ({ {auditLog.is_deleted && ( - <>{t("table.logRow.deletedLabel")} + <>(deleted) )} @@ -126,19 +124,19 @@ export const AuditLogRow: React.FC = ({ {auditLog.ip && ( - <>{t("table.logRow.ip")} + <>IP: {auditLog.ip} )} {os.name && ( - <>{t("table.logRow.os")} + <>OS: {os.name} )} {browser.name && ( - <>{t("table.logRow.browser")} + <>Browser: {browser.name} {browser.version} From b57d555440a3071bf9603d028edce8d2d229b0ad Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:33:07 +0000 Subject: [PATCH 15/66] refactor `AuditLogDescription` --- .../AuditLogDescription.tsx | 39 +++++-------------- 1 file changed, 9 insertions(+), 30 deletions(-) diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx index 8799641e14343..2226bde7cbcc3 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx @@ -2,14 +2,11 @@ import { FC } from "react"; import { AuditLog } from "api/typesGenerated"; import { Link as RouterLink } from "react-router-dom"; import Link from "@mui/material/Link"; -import { Trans, useTranslation } from "react-i18next"; import { BuildAuditDescription } from "./BuildAuditDescription"; export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({ auditLog, }): JSX.Element => { - const { t } = useTranslation("auditLog"); - let target = auditLog.resource_target.trim(); const user = auditLog.user?.username.trim(); @@ -34,35 +31,17 @@ export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({ ? `on behalf of ${auditLog.additional_fields.workspace_owner}` : ""; - if (auditLog.resource_link) { - return ( - - - {"{{truncatedDescription}}"} - - {"{{target}}"} - - {"{{onBehalfOf}}"} - - - ); - } - return ( - - {"{{truncatedDescription}}"} - {"{{target}}"} - {"{{onBehalfOf}}"} - + {truncatedDescription} + {auditLog.resource_link ? ( + + {target} + + ) : ( + {target} + )} + {onBehalfOf} ); }; From b27f9187949815c62d47cff3fa9ddf2ee0dc3d89 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 19:38:48 +0000 Subject: [PATCH 16/66] refactor `BuildAuditDescription` --- .../BuildAuditDescription.tsx | 44 +++++-------------- 1 file changed, 12 insertions(+), 32 deletions(-) diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx index 36d6fa691a957..35ea1a1fed0a8 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx @@ -1,14 +1,11 @@ -import { Trans, useTranslation } from "react-i18next"; import { AuditLog } from "api/typesGenerated"; -import { FC } from "react"; +import { FC, useMemo } from "react"; import { Link as RouterLink } from "react-router-dom"; import Link from "@mui/material/Link"; export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({ auditLog, }): JSX.Element => { - const { t } = useTranslation("auditLog"); - const workspaceName = auditLog.additional_fields?.workspace_name?.trim(); // workspaces can be started/stopped/deleted by a user, or kicked off automatically by Coder const user = @@ -17,7 +14,7 @@ export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({ ? "Coder automatically" : auditLog.user?.username.trim(); - const action: string = (() => { + const action = useMemo(() => { switch (auditLog.action) { case "start": return "started"; @@ -28,36 +25,19 @@ export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({ default: return auditLog.action; } - })(); - - if (auditLog.resource_link) { - return ( - - - {"{{user}}"} - - {"{{action}}"} - - workspace{"{{workspaceName}}"} - - - ); - } + }, [auditLog.action]); return ( - - {"{{user}}"} - {"{{action}}"}workspace{"{{workspaceName}}"} - + {user} + {auditLog.resource_link ? ( + + {action} + + ) : ( + action + )} + {action} workspace {workspaceName} ); }; From f0a92969e51a5b44ddfac896d194093e58a1b5ac Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:09:20 +0000 Subject: [PATCH 17/66] refactor `CreateTemplateForm` --- .../CreateTemplatePage/CreateTemplateForm.tsx | 117 ++++++++++-------- 1 file changed, 64 insertions(+), 53 deletions(-) diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index 49ff828800a91..096215cf3074f 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -12,7 +12,6 @@ import { TemplateUpload, TemplateUploadProps } from "./TemplateUpload"; import { useFormik } from "formik"; import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate"; import { FC, useEffect } from "react"; -import { useTranslation } from "react-i18next"; import { nameValidator, getFormHelpers, @@ -28,7 +27,6 @@ import { } from "components/HelpTooltip/HelpTooltip"; import { LazyIconField } from "components/IconField/LazyIconField"; import { Maybe } from "components/Conditionals/Maybe"; -import i18next from "i18next"; import Link from "@mui/material/Link"; import { HorizontalForm, @@ -49,32 +47,51 @@ import MenuItem from "@mui/material/MenuItem"; const MAX_DESCRIPTION_CHAR_LIMIT = 128; const MAX_TTL_DAYS = 30; -const TTLHelperText = ({ - ttl, - translationName, -}: { - ttl?: number; - translationName: string; -}) => { - const { t } = useTranslation("createTemplatePage"); - const count = typeof ttl !== "number" ? 0 : ttl; +const hours = (h: number) => (h === 1 ? "hour" : "hours"); + +const DefaultTTLHelperText = (props: { ttl?: number }) => { + const { ttl = 0 } = props; + + // Error will show once field is considered touched + if (ttl < 0) { + return null; + } + + if (ttl === 0) { + return Workspaces will run until stopped manually.; + } + return ( - // no helper text if ttl is negative - error will show once field is considered touched - = 0}> - {t(translationName, { count })} - + + Workspaces will default to stopping after {ttl} {hours(ttl)} without + activity. + + ); +}; + +const MaxTTLHelperText = (props: { ttl?: number }) => { + const { ttl = 0 } = props; + + // Error will show once field is considered touched + if (ttl < 0) { + return null; + } + + if (ttl === 0) { + return Workspaces may run indefinitely.; + } + + return ( + + Workspaces must stop within {ttl} {hours(ttl)} of starting, regardless of + any active connections. + ); }; const validationSchema = Yup.object({ - name: nameValidator( - i18next.t("form.fields.name", { ns: "createTemplatePage" }), - ), - display_name: templateDisplayNameValidator( - i18next.t("form.fields.displayName", { - ns: "createTemplatePage", - }), - ), + name: nameValidator("Name"), + display_name: templateDisplayNameValidator("Display name"), description: Yup.string().max( MAX_DESCRIPTION_CHAR_LIMIT, "Please enter a description that is less than or equal to 128 characters.", @@ -225,8 +242,6 @@ export const CreateTemplateForm: FC = ({ onSubmit, }); const getFieldHelpers = getFormHelpers(form, error); - const { t } = useTranslation("createTemplatePage"); - const { t: commonT } = useTranslation("common"); useEffect(() => { if (error) { @@ -288,7 +303,7 @@ export const CreateTemplateForm: FC = ({ autoFocus fullWidth required - label={t("form.fields.name")} + label="Name" /> @@ -303,7 +318,7 @@ export const CreateTemplateForm: FC = ({ {...getFieldHelpers("display_name")} disabled={isSubmitting} fullWidth - label={t("form.fields.displayName")} + label="Display name" /> = ({ rows={5} multiline fullWidth - label={t("form.fields.description")} + label="Description" /> = ({ disabled={isSubmitting} onChange={onChangeTrimmed(form)} fullWidth - label={t("form.fields.icon")} + label="Icon" onPickEmoji={(value) => form.setFieldValue("icon", value)} /> @@ -336,15 +351,12 @@ export const CreateTemplateForm: FC = ({ , + , )} disabled={isSubmitting} onChange={onChangeTrimmed(form)} fullWidth - label={t("form.fields.autostop")} + label="Default autostop (hours)" type="number" /> @@ -353,23 +365,17 @@ export const CreateTemplateForm: FC = ({ {...getFieldHelpers( "max_ttl_hours", allowAdvancedScheduling ? ( - + ) : ( <> - {commonT("licenseFieldTextHelper")}{" "} - - {commonT("learnMore")} - - . + You need an enterprise license to use it.{" "} + Learn more. ), )} disabled={isSubmitting || !allowAdvancedScheduling} fullWidth - label={t("form.fields.maxTTL")} + label="Max lifetime (hours)" type="number" /> )} @@ -388,19 +394,19 @@ export const CreateTemplateForm: FC = ({ fullWidth select value={form.values.autostop_requirement_days_of_week} - label={t("form.fields.autostopRequirementDays")} + label="Days with required stop" > - {t("form.fields.autostopRequirementDays_off")} + Off - {t("form.fields.autostopRequirementDays_daily")} + Daily - {t("form.fields.autostopRequirementDays_saturday")} + Saturday - {t("form.fields.autostopRequirementDays_sunday")} + Sunday @@ -420,7 +426,7 @@ export const CreateTemplateForm: FC = ({ } fullWidth inputProps={{ min: 1, max: 16, step: 1 }} - label={t("form.fields.autostopRequirementWeeks")} + label="Weeks between required stops" type="number" /> @@ -500,16 +506,21 @@ export const CreateTemplateForm: FC = ({ spacing={0.5} className={styles.optionText} > - {t("form.fields.allowUsersToCancel")} + + Allow users to cancel in-progress workspace jobs + - {t("form.tooltip.allowUsersToCancel")} + If checked, users may be able to corrupt their + workspace. - {t("form.helperText.allowUsersToCancel")} + Depending on your template, canceling builds may leave + workspaces in an unhealthy state. This option isn't + recommended for most use cases. From 61fdfe5223eee39891114f2ee26036e45c1d2c01 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:10:23 +0000 Subject: [PATCH 18/66] refactor `CreateTemplatePage` --- site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx index e9be6407be8ff..54838a84a2ae7 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx @@ -8,7 +8,6 @@ import { Stack } from "components/Stack/Stack"; import { useOrganizationId } from "hooks/useOrganizationId"; 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 "utils/page"; import { createTemplateMachine } from "xServices/createTemplate/createTemplateXService"; @@ -16,7 +15,6 @@ import { CreateTemplateForm } from "./CreateTemplateForm"; import { ErrorAlert } from "components/Alert/ErrorAlert"; const CreateTemplatePage: FC = () => { - const { t } = useTranslation("createTemplatePage"); const navigate = useNavigate(); const organizationId = useOrganizationId(); const [searchParams] = useSearchParams(); @@ -57,7 +55,7 @@ const CreateTemplatePage: FC = () => { {pageTitle("Create Template")} - + From f769e6950c7c25eb89e20dd81b608ce3708455bc Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:12:04 +0000 Subject: [PATCH 19/66] refactor `TemplateUpload` --- site/src/pages/CreateTemplatePage/TemplateUpload.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx index c60ae619dad3b..3b532ed536e67 100644 --- a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx +++ b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx @@ -1,7 +1,6 @@ import Link from "@mui/material/Link"; import { FileUpload } from "components/FileUpload/FileUpload"; import { FC } from "react"; -import { useTranslation } from "react-i18next"; import { Link as RouterLink } from "react-router-dom"; export interface TemplateUploadProps { @@ -17,8 +16,6 @@ export const TemplateUpload: FC = ({ onRemove, file, }) => { - const { t } = useTranslation("createTemplatePage"); - const description = ( <> The template has to be a .tar file. You can also use our{" "} @@ -42,8 +39,8 @@ export const TemplateUpload: FC = ({ onUpload={onUpload} onRemove={onRemove} file={file} - removeLabel={t("form.upload.removeFile")} - title={t("form.upload.title")} + removeLabel="Remove file" + title="Upload template" description={description} extension=".tar" fileTypeRequired="application/x-tar" From 3127d575cbe5b1b92fab3de3ed3491cb44ab94d1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:14:03 +0000 Subject: [PATCH 20/66] refactor `CreateTokenForm` --- site/src/pages/CreateTokenPage/CreateTokenForm.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx index 851e4717c4a4c..a31d527d55ea6 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx @@ -6,7 +6,6 @@ import { HorizontalForm, } from "components/Form/Form"; import makeStyles from "@mui/styles/makeStyles"; -import { useTranslation } from "react-i18next"; import { onChangeTrimmed, getFormHelpers } from "utils/formUtils"; import TextField from "@mui/material/TextField"; import MenuItem from "@mui/material/MenuItem"; @@ -40,7 +39,6 @@ export const CreateTokenForm: FC = ({ creationFailed, }) => { const styles = useStyles(); - const { t } = useTranslation("tokensPage"); const navigate = useNavigate(); const [expDays, setExpDays] = useState(1); @@ -69,7 +67,7 @@ export const CreateTokenForm: FC = ({ setFormError(undefined))} autoFocus @@ -93,7 +91,7 @@ export const CreateTokenForm: FC = ({ { @@ -117,7 +115,7 @@ export const CreateTokenForm: FC = ({ {lifetimeDays === "custom" && ( { const lt = Math.ceil( From 9c76a7b1dde4833d2c83fcad714282a5dcc5bf34 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:15:43 +0000 Subject: [PATCH 21/66] refactor `CreateTokenPage` --- site/src/pages/CreateTokenPage/CreateTokenPage.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx index dffb5a5104275..a81be1d429727 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx @@ -1,5 +1,4 @@ import { FC, useState } from "react"; -import { useTranslation } from "react-i18next"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm"; @@ -22,7 +21,6 @@ const initialValues: CreateTokenData = { }; export const CreateTokenPage: FC = () => { - const { t } = useTranslation("tokensPage"); const styles = useStyles(); const navigate = useNavigate(); @@ -46,13 +44,13 @@ export const CreateTokenPage: FC = () => { const [formError, setFormError] = useState(undefined); const onCreateSuccess = () => { - displaySuccess(t("createToken.createSuccess")); + displaySuccess("Token has been created"); navigate("/settings/tokens"); }; const onCreateError = (error: unknown) => { setFormError(error); - displayError(t("createToken.createError")); + displayError("Failed to create token"); }; const form = useFormik({ @@ -73,7 +71,7 @@ export const CreateTokenPage: FC = () => { const tokenDescription = ( <> -

{t("createToken.successModal.description")}

+

Make sure you copy the below token before proceeding:

); @@ -89,8 +87,8 @@ export const CreateTokenPage: FC = () => { {tokenFetchFailed && } { Date: Fri, 8 Sep 2023 20:18:09 +0000 Subject: [PATCH 22/66] refactor `CreateWorkspacePageView` --- .../CreateWorkspacePage/CreateWorkspacePageView.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 6bfd1f990988f..670bc227e2899 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -3,7 +3,6 @@ import * as TypesGen from "api/typesGenerated"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import { FormikContextType, useFormik } from "formik"; import { FC, useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; import { getFormHelpers, nameValidator, @@ -64,7 +63,6 @@ export const CreateWorkspacePageView: FC = ({ onSubmit, onCancel, }) => { - const { t } = useTranslation("createWorkspacePage"); const styles = useStyles(); const [owner, setOwner] = useState(defaultOwner); const { verifyGitAuth, gitAuthErrors } = useGitAuthVerification(gitAuth); @@ -79,7 +77,7 @@ export const CreateWorkspacePageView: FC = ({ ), }, validationSchema: Yup.object({ - name: nameValidator(t("nameLabel", { ns: "createWorkspacePage" })), + name: nameValidator("Workspace Name"), rich_parameter_values: useValidationSchemaForRichParameters( "createWorkspacePage", parameters, @@ -124,7 +122,7 @@ export const CreateWorkspacePageView: FC = ({ disabled fullWidth value={versionId} - label={t("versionLabel")} + label="Version ID" /> This parameter has been preset, and cannot be modified. @@ -137,7 +135,7 @@ export const CreateWorkspacePageView: FC = ({ onChange={onChangeTrimmed(form)} autoFocus fullWidth - label={t("nameLabel")} + label="Workspace Name" /> @@ -153,7 +151,7 @@ export const CreateWorkspacePageView: FC = ({ onChange={(user) => { setOwner(user ?? defaultOwner); }} - label={t("ownerLabel").toString()} + label="Owner" size="medium" /> @@ -222,7 +220,7 @@ export const CreateWorkspacePageView: FC = ({ From 026ddaa711c4fe383eda337fc1989da9126468d7 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:19:40 +0000 Subject: [PATCH 23/66] refactor `AppearanceSettingsPageView` --- site/src/i18n/en/appearanceSettings.json | 5 ----- .../AppearanceSettingsPage/AppearanceSettingsPageView.tsx | 6 ++---- 2 files changed, 2 insertions(+), 9 deletions(-) delete mode 100644 site/src/i18n/en/appearanceSettings.json diff --git a/site/src/i18n/en/appearanceSettings.json b/site/src/i18n/en/appearanceSettings.json deleted file mode 100644 index 9c12c28296ad3..0000000000000 --- a/site/src/i18n/en/appearanceSettings.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "updateLabel": "Update", - "messageHelperText": "Markdown bold, italics, and links are supported.", - "showPreviewLabel": "Show Preview" -} diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 3a41dc8c0f169..313fa5b371be8 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -12,7 +12,6 @@ import { getFormHelpers } from "utils/formUtils"; import Button from "@mui/material/Button"; import FormControlLabel from "@mui/material/FormControlLabel"; import { BlockPicker } from "react-color"; -import { useTranslation } from "react-i18next"; import makeStyles from "@mui/styles/makeStyles"; import Switch from "@mui/material/Switch"; import TextField from "@mui/material/TextField"; @@ -38,7 +37,6 @@ export const AppearanceSettingsPageView = ({ }: AppearanceSettingsPageViewProps): JSX.Element => { const styles = useStyles(); const theme = useTheme(); - const [t] = useTranslation("appearanceSettings"); const logoForm = useFormik<{ logo_url: string; }>({ @@ -138,7 +136,7 @@ export const AppearanceSettingsPageView = ({ ); }} > - {t("showPreviewLabel")} + Show Preview ) } @@ -180,7 +178,7 @@ export const AppearanceSettingsPageView = ({ Date: Fri, 8 Sep 2023 20:23:02 +0000 Subject: [PATCH 24/66] refactor `SettingsGroupPageView` --- site/src/pages/GroupsPage/SettingsGroupPageView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx index d5b4d4142c357..d4912e062474b 100644 --- a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx +++ b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx @@ -8,7 +8,6 @@ import { LazyIconField } from "components/IconField/LazyIconField"; import { Margins } from "components/Margins/Margins"; import { useFormik } from "formik"; import { FC } from "react"; -import { useTranslation } from "react-i18next"; import { getFormHelpers, nameValidator, @@ -48,7 +47,6 @@ const UpdateGroupForm: FC<{ onSubmit, }); const getFieldHelpers = getFormHelpers(form, errors); - const { t } = useTranslation("common"); return ( @@ -83,7 +81,7 @@ const UpdateGroupForm: FC<{ {...getFieldHelpers("avatar_url")} onChange={onChangeTrimmed(form)} fullWidth - label={t("form.fields.icon")} + label="Avatar URL" onPickEmoji={(value) => form.setFieldValue("avatar_url", value)} /> From f5cb010d49bc1b59e9c435028eb9e8e4cc239bc1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:25:15 +0000 Subject: [PATCH 25/66] refactor utils.ts --- site/src/pages/CreateTokenPage/utils.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/site/src/pages/CreateTokenPage/utils.ts b/site/src/pages/CreateTokenPage/utils.ts index ac1a2cb634a8e..be1b9c4f16e0e 100644 --- a/site/src/pages/CreateTokenPage/utils.ts +++ b/site/src/pages/CreateTokenPage/utils.ts @@ -1,5 +1,3 @@ -import i18next from "i18next"; - export const NANO_HOUR = 3600000000000; export interface CreateTokenData { @@ -14,25 +12,25 @@ export interface LifetimeDay { export const lifetimeDayPresets: LifetimeDay[] = [ { - label: i18next.t("tokensPage:createToken.lifetimeSection.7"), + label: "7 days", value: 7, }, { - label: i18next.t("tokensPage:createToken.lifetimeSection.30"), + label: "30 days", value: 30, }, { - label: i18next.t("tokensPage:createToken.lifetimeSection.60"), + label: "60 days", value: 60, }, { - label: i18next.t("tokensPage:createToken.lifetimeSection.90"), + label: "90 days", value: 90, }, ]; export const customLifetimeDay: LifetimeDay = { - label: i18next.t("tokensPage:createToken.lifetimeSection.custom"), + label: "Custom", value: "custom", }; From b1d8c5c5232bfc3eb010b6d42b17c191f23bd12d Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:27:22 +0000 Subject: [PATCH 26/66] refactor `VersionRow` --- .../pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index 56be90d9135f2..ebed1af7517bf 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -7,7 +7,6 @@ import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; -import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { colors } from "theme/colors"; import { combineClasses } from "utils/combineClasses"; @@ -26,7 +25,6 @@ export const VersionRow: React.FC = ({ onPromoteClick, }) => { const styles = useStyles(); - const { t } = useTranslation("templatePage"); const navigate = useNavigate(); const clickableProps = useClickableTableRow(() => { navigate(version.name); @@ -61,8 +59,8 @@ export const VersionRow: React.FC = ({ spacing={1} > - {version.created_by.username}{" "} - {t("createdVersion")} {version.name} + {version.created_by.username} created the + version {version.name} From b448bb0e647fe5980092ffd8b1fd8c630f8576c6 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Sep 2023 20:51:35 +0000 Subject: [PATCH 27/66] refactor `TemplateSettingsForm` --- .../TemplateSettingsForm.tsx | 46 ++++++++----------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx index b6a223dde52d0..4218cff36d396 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx @@ -10,8 +10,6 @@ import { iconValidator, } from "utils/formUtils"; import * as Yup from "yup"; -import i18next from "i18next"; -import { useTranslation } from "react-i18next"; import { LazyIconField } from "components/IconField/LazyIconField"; import { FormFields, @@ -31,17 +29,11 @@ const MAX_DESCRIPTION_CHAR_LIMIT = 128; export const getValidationSchema = (): Yup.AnyObjectSchema => Yup.object({ - name: nameValidator(i18next.t("nameLabel", { ns: "templateSettingsPage" })), - display_name: templateDisplayNameValidator( - i18next.t("displayNameLabel", { - ns: "templateSettingsPage", - }), - ), + name: nameValidator("Name"), + display_name: templateDisplayNameValidator("Display name"), description: Yup.string().max( MAX_DESCRIPTION_CHAR_LIMIT, - i18next - .t("descriptionMaxError", { ns: "templateSettingsPage" }) - .toString(), + "Please enter a description that is less than or equal to 128 characters.", ), allow_user_cancel_workspace_jobs: Yup.boolean(), icon: iconValidator, @@ -83,17 +75,16 @@ export const TemplateSettingsForm: FC = ({ initialTouched, }); const getFieldHelpers = getFormHelpers(form, error); - const { t } = useTranslation("templateSettingsPage"); const styles = useStyles(); return ( = ({ onChange={onChangeTrimmed(form)} autoFocus fullWidth - label={t("nameLabel")} + label="Name" /> = ({ multiline disabled={isSubmitting} fullWidth - label={t("descriptionLabel")} + label="Description" rows={2} /> @@ -133,15 +124,15 @@ export const TemplateSettingsForm: FC = ({ disabled={isSubmitting} onChange={onChangeTrimmed(form)} fullWidth - label={t("iconLabel")} + label="Icon" onPickEmoji={(value) => form.setFieldValue("icon", value)} />