coder · aslilac · Sep 11, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 8, 2023
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -4,7 +4,6 @@ import { withRouter } from "storybook-addon-react-router-v6";
 import { HelmetProvider } from "react-helmet-async";
 import { dark } from "../src/theme";
 import "../src/theme/globalFonts";
-import "../src/i18n";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export const decorators = [

diff --git 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
diff --git a/site/src/@types/i18n.d.ts b/site/src/@types/i18n.d.ts
diff --git 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(
       <DeleteDialog
         isOpen
@@ -30,18 +28,13 @@ describe("DeleteDialog", () => {
         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(
       <DeleteDialog
         isOpen
@@ -51,11 +44,7 @@ describe("DeleteDialog", () => {
         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
@@ -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<PropsWithChildren<DeleteDialogProps>> = ({
   confirmLoading,
 }) => {
   const styles = useStyles();
-  const { t } = useTranslation("common");
   const [nameValue, setNameValue] = useState("");
   const confirmed = name === nameValue;
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -35,11 +33,12 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
 
   const content = (
     <>
-      <p>{t("deleteDialog.intro", { entity })}</p>
+      <p>Deleting this {entity} is irreversible!</p>
       <Maybe condition={info !== undefined}>
         <p className={styles.warning}>{info}</p>
       </Maybe>
-      <p>{t("deleteDialog.confirm", { entity, name })}</p>
+      <p>Are you sure you want to proceed?</p>
+      <p>Type {name} below to confirm.</p>
 
       <form
         onSubmit={(e) => {
@@ -59,9 +58,12 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
           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" }}
         />
       </form>
     </>
@@ -72,7 +74,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
       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/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<PropsWithChildren<ExpanderProps>> = ({
   children,
 }) => {
   const styles = useStyles();
-  const { t } = useTranslation("common");
 
   const toggleExpanded = () => setExpanded(!expanded);
 
@@ -29,7 +27,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
       {!expanded && (
         <Link onClick={toggleExpanded} className={styles.expandLink}>
           <span className={styles.text}>
-            {t("ctas.expand")}
+            Click here to learn more
             <OpenDropdown margin={false} />
           </span>
         </Link>
@@ -43,7 +41,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
           className={combineClasses([styles.expandLink, styles.collapseLink])}
         >
           <span className={styles.text}>
-            {t("ctas.collapse")}
+            Click here to hide
             <CloseDropdown margin={false} />
           </span>
         </Link>

diff --git 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,15 +25,14 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   const styles = useStyles();
   const emojiButtonRef = useRef<HTMLButtonElement>(null);
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
-  const { t } = useTranslation("templateSettingsPage");
   const hasIcon = textFieldProps.value && textFieldProps.value !== "";
 
   return (
     <Stack spacing={1}>
       <TextField
         {...textFieldProps}
         fullWidth
-        label={t("iconLabel")}
+        label="Icon"
         InputProps={{
           endAdornment: hasIcon ? (
             <InputAdornment position="end" className={styles.adornment}>
@@ -59,7 +57,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
           setIsEmojiPickerOpen((v) => !v);
         }}
       >
-        {t("selectEmoji")}
+        Select emoji
       </Button>
 
       <Popover

diff --git 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<typeof HelpPopover> & {
   agent: WorkspaceAgent;
@@ -30,7 +29,6 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
   anchorEl,
 }) => {
   const styles = useStyles();
-  const { t } = useTranslation("workspacePage");
 
   return (
     <HelpPopover
@@ -43,25 +41,21 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
       <HelpTooltipContext.Provider value={{ open, onClose }}>
         <Stack spacing={1}>
           <div>
-            <HelpTooltipTitle>
-              {t("agentOutdatedTooltip.title")}
-            </HelpTooltipTitle>
+            <HelpTooltipTitle>Agent Outdated</HelpTooltipTitle>
             <HelpTooltipText>
-              {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.
             </HelpTooltipText>
           </div>
 
           <Stack spacing={0.5}>
-            <span className={styles.versionLabel}>
-              {t("agentOutdatedTooltip.agentVersionLabel")}
-            </span>
+            <span className={styles.versionLabel}>Agent version</span>
             <span>{agent.version}</span>
           </Stack>
 
           <Stack spacing={0.5}>
-            <span className={styles.versionLabel}>
-              {t("agentOutdatedTooltip.serverVersionLabel")}
-            </span>
+            <span className={styles.versionLabel}>Server version</span>
             <span>{serverVersion}</span>
           </Stack>
 
@@ -71,7 +65,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
               onClick={onUpdate}
               ariaLabel="Update workspace"
             >
-              {t("agentOutdatedTooltip.updateWorkspaceLabel")}
+              Update workspace
             </HelpTooltipAction>
           </HelpTooltipLinksGroup>
         </Stack>