coder · rodrimaia · Jun 9, 2023 · Jun 5, 2023 · Jun 9, 2023 · Jun 9, 2023
@@ -64,7 +64,7 @@
     "formik": "2.4.1",
     "front-matter": "4.0.2",
     "history": "5.3.0",
-    "i18next": "21.9.1",
+    "i18next": "22.5.0",
     "jest-environment-jsdom": "29.5.0",
     "jest-location-mock": "1.0.9",
     "just-debounce-it": "3.1.1",

@@ -11,7 +11,7 @@ import { render } from "testHelpers/renderHelpers"
 import { screen } from "@testing-library/react"
 import { i18n } from "i18n"
 
-const t = (str: string, variables?: Record<string, unknown>) =>
+const t = (str: string, variables: Record<string, unknown>) =>
   i18n.t<string>(str, variables)
 
 const getByTextContent = (text: string) => {

@@ -77,7 +77,7 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
         ref={anchorRef}
         size="small"
         className={styles.editButton}
-        title={t("editUserRolesTooltip")}
+        title={t("editUserRolesTooltip") || ""}
         onClick={() => setIsOpen(true)}
       >
         <EditSquare />
@@ -101,7 +101,7 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
         <fieldset
           className={styles.fieldset}
           disabled={isLoading}
-          title={t("fieldSetRolesTooltip")}
+          title={t("fieldSetRolesTooltip") || ""}
         >
           <Stack className={styles.options} spacing={3}>
             {roles.map((role) => (

@@ -118,6 +118,10 @@ export const FormFooter: FC<BaseFormFooterProps> = (props) => {
     />
   )
 }
+const getFlexDirection = ({ direction }: FormContextValue = {}):
+  | "row"
+  | "column" =>
+  direction === "horizontal" ? ("row" as const) : ("column" as const)
 
 const useStyles = makeStyles((theme) => ({
   form: {
@@ -136,8 +140,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "flex-start",
     gap: ({ direction }: FormContextValue = {}) =>
       direction === "horizontal" ? theme.spacing(15) : theme.spacing(3),
-    flexDirection: ({ direction }: FormContextValue = {}) =>
-      direction === "horizontal" ? "row" : "column",
+    flexDirection: getFlexDirection,
 
     [theme.breakpoints.down("md")]: {
       flexDirection: "column",
@@ -156,7 +159,7 @@ const useStyles = makeStyles((theme) => ({
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
-      position: "initial",
+      position: "initial" as const,
     },
   },
 

@@ -19,28 +19,27 @@ import Link from "@mui/material/Link"
 // connected:ready, connected:shutting_down, connected:shutdown_timeout,
 // connected:shutdown_error, connected:off.
 
-const ReadyLifecycle: React.FC = () => {
+const ReadyLifecycle = () => {
   const styles = useStyles()
   const { t } = useTranslation("workspacePage")
 
   return (
     <div
       role="status"
-      aria-label={t("agentStatus.connected.ready")}
+      aria-label={t("agentStatus.connected.ready") || "Ready"}
       className={combineClasses([styles.status, styles.connected])}
     />
   )
 }
 
 const StartingLifecycle: React.FC = () => {
   const styles = useStyles()
-  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={t("agentStatus.connected.starting")}>
+    <Tooltip title="Starting...">
       <div
         role="status"
-        aria-label={t("agentStatus.connected.starting")}
+        aria-label="Starting..."
         className={combineClasses([styles.status, styles.connecting])}
       />
     </Tooltip>
@@ -135,13 +134,12 @@ const StartErrorLifecycle: React.FC<{
 
 const ShuttingDownLifecycle: React.FC = () => {
   const styles = useStyles()
-  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={t("agentStatus.connected.shuttingDown")}>
+    <Tooltip title="Stopping...">
       <div
         role="status"
-        aria-label={t("agentStatus.connected.shuttingDown")}
+        aria-label="Stopping..."
         className={combineClasses([styles.status, styles.connecting])}
       />
     </Tooltip>
@@ -236,13 +234,12 @@ const ShutdownErrorLifecycle: React.FC<{
 
 const OffLifecycle: React.FC = () => {
   const styles = useStyles()
-  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={t("agentStatus.connected.off")}>
+    <Tooltip title="Stopped">
       <div
         role="status"
-        aria-label={t("agentStatus.connected.off")}
+        aria-label="Stopped"
         className={combineClasses([styles.status, styles.disconnected])}
       />
     </Tooltip>
@@ -294,13 +291,12 @@ const ConnectedStatus: React.FC<{
 
 const DisconnectedStatus: React.FC = () => {
   const styles = useStyles()
-  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={t("agentStatus.disconnected")}>
+    <Tooltip title="Disconnected">
       <div
         role="status"
-        aria-label={t("agentStatus.disconnected")}
+        aria-label="Disconnected"
         className={combineClasses([styles.status, styles.disconnected])}
       />
     </Tooltip>
@@ -309,13 +305,12 @@ const DisconnectedStatus: React.FC = () => {
 
 const ConnectingStatus: React.FC = () => {
   const styles = useStyles()
-  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={t("agentStatus.connecting")}>
+    <Tooltip title="Connecting...">
       <div
         role="status"
-        aria-label={t("agentStatus.connecting")}
+        aria-label="Connecting..."
         className={combineClasses([styles.status, styles.connecting])}
       />
     </Tooltip>

@@ -71,25 +71,22 @@ const validationSchema = Yup.object({
   ),
   description: Yup.string().max(
     MAX_DESCRIPTION_CHAR_LIMIT,
-    i18next.t("form.error.descriptionMax", { ns: "createTemplatePage" }),
+    "Please enter a description that is less than or equal to 128 characters.",
   ),
   icon: Yup.string().optional(),
   default_ttl_hours: Yup.number()
     .integer()
-    .min(
-      0,
-      i18next.t("form.error.defaultTTLMin", { ns: "templateSettingsPage" }),
-    )
+    .min(0, "Default time until autostop must not be less than 0.")
     .max(
       24 * MAX_TTL_DAYS /* 7 days in hours */,
-      i18next.t("form.error.defaultTTLMax", { ns: "templateSettingsPage" }),
+      "Please enter a limit that is less than or equal to 168 hours (7 days).",
     ),
   max_ttl_hours: Yup.number()
     .integer()
-    .min(0, i18next.t("form.error.maxTTLMin", { ns: "templateSettingsPage" }))
+    .min(0, "Maximum time until autostop must not be less than 0.")
     .max(
       24 * MAX_TTL_DAYS /* 7 days in hours */,
-      i18next.t("form.error.maxTTLMax", { ns: "templateSettingsPage" }),
+      "Please enter a limit that is less than or equal to 168 hours(7 days).",
     ),
 })
 
@@ -223,8 +220,8 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
     <HorizontalForm onSubmit={form.handleSubmit}>
       {/* General info */}
       <FormSection
-        title={t("form.generalInfo.title")}
-        description={t("form.generalInfo.description")}
+        title="General info"
+        description="The name is used to identify the template in URLs and the API. It must be unique within your organization."
       >
         <FormFields>
           {starterTemplate ? (
@@ -255,8 +252,8 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
 
       {/* Display info  */}
       <FormSection
-        title={t("form.displayInfo.title")}
-        description={t("form.displayInfo.description")}
+        title="Display info"
+        description="Give your template a friendly name, description, and icon."
       >
         <FormFields>
           <TextField
@@ -288,8 +285,8 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
 
       {/* Schedule */}
       <FormSection
-        title={t("form.schedule.title")}
-        description={t("form.schedule.description")}
+        title="Schedule"
+        description="Define when workspaces created from this template automatically stop."
       >
         <FormFields>
           <Stack direction="row" className={styles.ttlFields}>
@@ -384,8 +381,8 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
 
       {/* Operations */}
       <FormSection
-        title={t("form.operations.title")}
-        description={t("form.operations.description")}
+        title="Operations"
+        description="Regulate actions allowed on workspaces created from this template."
       >
         <FormFields>
           <label htmlFor="allow_user_cancel_workspace_jobs">

@@ -47,7 +47,7 @@ const CreateTemplatePage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(t("title"))}</title>
+        <title>{pageTitle("Create Template")}</title>
       </Helmet>
 
       <FullPageHorizontalForm title={t("title")} onCancel={onCancel}>

@@ -62,8 +62,8 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
   return (
     <HorizontalForm onSubmit={form.handleSubmit}>
       <FormSection
-        title={t("createToken.nameSection.title")}
-        description={t("createToken.nameSection.description")}
+        title="Name"
+        description="What is this token for?"
         classes={{ sectionInfo: styles.formSectionInfo }}
       >
         <FormFields>
@@ -78,16 +78,14 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
         </FormFields>
       </FormSection>
       <FormSection
-        title={t("createToken.lifetimeSection.title")}
+        title="Expiration"
         description={
           form.values.lifetime
-            ? t("createToken.lifetimeSection.description", {
-                date: dayjs()
-                  .add(form.values.lifetime, "days")
-                  .utc()
-                  .format("MMMM DD, YYYY"),
-              })
-            : t("createToken.lifetimeSection.emptyDescription")
+            ? `The token will expire on ${dayjs()
+                .add(form.values.lifetime, "days")
+                .utc()
+                .format("MMMM DD, YYYY")}`
+            : "Please set a token expiration."
         }
         classes={{ sectionInfo: styles.formSectionInfo }}
       >
@@ -148,11 +146,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
       <FormFooter
         onCancel={() => navigate("/settings/tokens")}
         isLoading={isCreating}
-        submitLabel={
-          creationFailed
-            ? t("createToken.footer.retry")
-            : t("createToken.footer.submit")
-        }
+        submitLabel={creationFailed ? "Retry" : "Create token"}
       />
     </HorizontalForm>
   )

@@ -85,7 +85,7 @@ export const CreateTokenPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(t("createToken.title"))}</title>
+        <title>{pageTitle("Create Token")}</title>
       </Helmet>
       {tokenFetchFailed && <ErrorAlert error={tokenFetchError} />}
       <FullPageHorizontalForm

@@ -213,7 +213,7 @@ export const CreateWorkspacePageView: FC<
               <UserAutocomplete
                 value={props.owner}
                 onChange={props.setOwner}
-                label={t("ownerLabel")}
+                label={t("ownerLabel").toString()}
                 size="medium"
               />
             </FormFields>
@@ -291,7 +291,7 @@ export const CreateWorkspacePageView: FC<
         <FormFooter
           onCancel={props.onCancel}
           isLoading={props.creatingWorkspace}
-          submitLabel={t("createWorkspace")}
+          submitLabel={t("createWorkspace").toString()}
         />
       </HorizontalForm>
     </FullPageHorizontalForm>

@@ -17,7 +17,7 @@ const StarterTemplatesPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle(t("title"))}</title>
+        <title>{pageTitle(t("title").toString())}</title>
       </Helmet>
 
       <StarterTemplatesPageView context={state.context} />

@@ -36,7 +36,9 @@ export const getValidationSchema = (): Yup.AnyObjectSchema =>
     ),
     description: Yup.string().max(
       MAX_DESCRIPTION_CHAR_LIMIT,
-      i18next.t("descriptionMaxError", { ns: "templateSettingsPage" }),
+      i18next
+        .t("descriptionMaxError", { ns: "templateSettingsPage" })
+        .toString(),
     ),
     allow_user_cancel_workspace_jobs: Yup.boolean(),
     icon: iconValidator,
@@ -82,11 +84,11 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
   return (
     <HorizontalForm
       onSubmit={form.handleSubmit}
-      aria-label={t("formAriaLabel")}
+      aria-label={t("formAriaLabel").toString()}
     >
       <FormSection
-        title={t("generalInfo.title")}
-        description={t("generalInfo.description")}
+        title={t("generalInfo.title").toString()}
+        description={t("generalInfo.description").toString()}
       >
         <FormFields>
           <TextField
@@ -101,8 +103,8 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
       </FormSection>
 
       <FormSection
-        title={t("displayInfo.title")}
-        description={t("displayInfo.description")}
+        title={t("displayInfo.title").toString()}
+        description={t("displayInfo.description").toString()}
       >
         <FormFields>
           <TextField
@@ -133,8 +135,8 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
       </FormSection>
 
       <FormSection
-        title={t("operations.title")}
-        description={t("operations.description")}
+        title={t("operations.title").toString()}
+        description={t("operations.description").toString()}
       >
         <label htmlFor="allow_user_cancel_workspace_jobs">
           <Stack direction="row" spacing={1}>

@@ -107,7 +107,7 @@ describe("TemplateSettingsPage", () => {
     }
     const validate = () => getValidationSchema().validateSync(values)
     expect(validate).toThrowError(
-      t("descriptionMaxError", { ns: "templateSettingsPage" }),
+      t("descriptionMaxError", { ns: "templateSettingsPage" }).toString(),
     )
   })
 })