i18n: display_name

mtojek · mtojek · commit 6396671dd25c · 2022-11-14T20:45:29.000+01:00
diff --git a/site/src/i18n/en/templatePage.json b/site/src/i18n/en/templatePage.json
@@ -9,5 +9,6 @@
       "deleteTemplateCaption": "Once you delete a template, there is no going back. Please be certain.",
       "deleteCta": "Delete Template"
     }
-  }
+  },
+  "displayNameLabel": "Display name"
 }
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -19,10 +19,11 @@ import {
   onChangeTrimmed,
 } from "util/formUtils"
 import * as Yup from "yup"
+import i18next from "i18next"
+import { useTranslation } from "react-i18next"
 
 export const Language = {
   nameLabel: "Name",
-  displayNameLabel: "Display name",
   descriptionLabel: "Description",
   defaultTtlLabel: "Auto-stop default",
   iconLabel: "Icon",
@@ -42,7 +43,11 @@ const MS_HOUR_CONVERSION = 3600000
 
 export const validationSchema = Yup.object({
   name: nameValidator(Language.nameLabel),
-  display_name: templateDisplayNameValidator(Language.displayNameLabel),
+  display_name: templateDisplayNameValidator(
+    i18next.t("displayNameLabel", {
+      ns: "templatePage",
+    }),
+  ),
   description: Yup.string().max(
     MAX_DESCRIPTION_CHAR_LIMIT,
     Language.descriptionMaxError,
@@ -99,6 +104,8 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
   const hasIcon = form.values.icon && form.values.icon !== ""
   const emojiButtonRef = useRef<HTMLButtonElement>(null)
 
+  const { t } = useTranslation("templatePage")
+
   return (
     <form onSubmit={form.handleSubmit} aria-label={Language.formAriaLabel}>
       <Stack>
@@ -116,7 +123,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
           {...getFieldHelpers("display_name")}
           disabled={isSubmitting}
           fullWidth
-          label={Language.displayNameLabel}
+          label={t("displayNameLabel")}
           variant="outlined"
         />
 
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.test.tsx
@@ -41,9 +41,12 @@ const fillAndSubmitForm = async ({
   await userEvent.clear(nameField)
   await userEvent.type(nameField, name)
 
-  const displayNameField = await screen.findByLabelText(
-    FormLanguage.displayNameLabel,
-  )
+  const { t } = i18next
+  const displayNameLabel = t("displayNameLabel", {
+    ns: "templatePage",
+  })
+
+  const displayNameField = await screen.findByLabelText(displayNameLabel)
   await userEvent.clear(displayNameField)
   await userEvent.type(displayNameField, display_name)
 

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,6 @@`
`9`	`9`	`"deleteTemplateCaption": "Once you delete a template, there is no going back. Please be certain.",`
`10`	`10`	`"deleteCta": "Delete Template"`
`11`	`11`	`}`
`12`		`- }`
	`12`	`+ },`
	`13`	`+ "displayNameLabel": "Display name"`
`13`	`14`	`}`