Sep 11, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 8, 2023
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
 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
    "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",
    "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
 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";

  });

  it("disables confirm button when the text field is filled incorrectly", async () => {
    const { t } = i18next;
    render(
      <DeleteDialog
        isOpen
        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
        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
 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 {
  confirmLoading,
 }) => {
  const styles = useStyles();
  const { t } = useTranslation("common");
  const [nameValue, setNameValue] = useState("");
  const confirmed = name === nameValue;
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

  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) => {
          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>
    </>
      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
 } 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 {
  children,
 }) => {
  const styles = useStyles();
  const { t } = useTranslation("common");

  const toggleExpanded = () => setExpanded(!expanded);

      {!expanded && (
        <Link onClick={toggleExpanded} className={styles.expandLink}>
          <span className={styles.text}>
 {t("ctas.expand")}
 Click here to learn more
            <OpenDropdown margin={false} />
          </span>
        </Link>
          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
 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";

  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}>
          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
 } 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;
  anchorEl,
 }) => {
  const styles = useStyles();
  const { t } = useTranslation("workspacePage");

  return (
    <HelpPopover
      <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>

              onClick={onUpdate}
              ariaLabel="Update workspace"
            >
 {t("agentOutdatedTooltip.updateWorkspaceLabel")}
 Update workspace
            </HelpTooltipAction>
          </HelpTooltipLinksGroup>
        </Stack>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = [
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand All		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";

Expand All		@@ -20,7 +19,6 @@ describe("DeleteDialog", () => {
		});

		it("disables confirm button when the text field is filled incorrectly", async () => {
		const { t } = i18next;
		render(
		<DeleteDialog
		isOpen
Expand All		@@ -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
Expand All		@@ -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();
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 {
Expand All		@@ -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>) => {
Expand All		@@ -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) => {
Expand All		@@ -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>
		</>
Expand All		@@ -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}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 {
Expand All		@@ -20,7 +19,6 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
		children,
		}) => {
		const styles = useStyles();
		const { t } = useTranslation("common");

		const toggleExpanded = () => setExpanded(!expanded);

Expand All		@@ -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>
Expand All		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";

Expand All		@@ -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}>
Expand All		@@ -59,7 +57,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
		setIsEmojiPickerOpen((v) => !v);
		}}
		>
		{t("selectEmoji")}
		Select emoji
		</Button>

		<Popover
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand All		@@ -30,7 +29,6 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
		anchorEl,
		}) => {
		const styles = useStyles();
		const { t } = useTranslation("workspacePage");

		return (
		<HelpPopover
Expand All		@@ -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>

Expand All		@@ -71,7 +65,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
		onClick={onUpdate}
		ariaLabel="Update workspace"
		>
		{t("agentOutdatedTooltip.updateWorkspaceLabel")}
		Update workspace
		</HelpTooltipAction>
		</HelpTooltipLinksGroup>
		</Stack>
Expand Down