feat: add a character counter for fields with length limits (#11558)

- refactors`getFormHelpers` to accept an options object - adds a `maxLength` option which will display a message and character counter for fields with length limits - set `maxLength` option for template description fields
coder · Emyrk · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024
commit 3a17b89fbe2b168e6344d139019792065eb34ab0
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -337,7 +337,9 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
           />
 
           <TextField
-            {...getFieldHelpers("description")}
+            {...getFieldHelpers("description", {
+              maxLength: MAX_DESCRIPTION_CHAR_LIMIT,
+            })}
             disabled={isSubmitting}
             rows={5}
             multiline
@@ -363,10 +365,11 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
         <FormFields>
           <Stack direction="row" css={styles.ttlFields}>
             <TextField
-              {...getFieldHelpers(
-                "default_ttl_hours",
-                <DefaultTTLHelperText ttl={form.values.default_ttl_hours} />,
-              )}
+              {...getFieldHelpers("default_ttl_hours", {
+                helperText: (
+                  <DefaultTTLHelperText ttl={form.values.default_ttl_hours} />
+                ),
+              })}
               disabled={isSubmitting}
               onChange={onChangeTrimmed(form)}
               fullWidth
@@ -377,12 +380,13 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
 
           <Stack direction="row" css={styles.ttlFields}>
             <TextField
-              {...getFieldHelpers(
-                "autostop_requirement_days_of_week",
-                <AutostopRequirementDaysHelperText
-                  days={form.values.autostop_requirement_days_of_week}
-                />,
-              )}
+              {...getFieldHelpers("autostop_requirement_days_of_week", {
+                helperText: (
+                  <AutostopRequirementDaysHelperText
+                    days={form.values.autostop_requirement_days_of_week}
+                  />
+                ),
+              })}
               disabled={
                 isSubmitting ||
                 form.values.use_max_ttl ||
@@ -408,13 +412,14 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
             </TextField>
 
             <TextField
-              {...getFieldHelpers(
-                "autostop_requirement_weeks",
-                <AutostopRequirementWeeksHelperText
-                  days={form.values.autostop_requirement_days_of_week}
-                  weeks={form.values.autostop_requirement_weeks}
-                />,
-              )}
+              {...getFieldHelpers("autostop_requirement_weeks", {
+                helperText: (
+                  <AutostopRequirementWeeksHelperText
+                    days={form.values.autostop_requirement_days_of_week}
+                    weeks={form.values.autostop_requirement_weeks}
+                  />
+                ),
+              })}
               disabled={
                 isSubmitting ||
                 form.values.use_max_ttl ||
@@ -453,17 +458,16 @@ export const Creat
10000
eTemplateForm: FC<CreateTemplateFormProps> = (props) => {
             </Stack>
 
             <TextField
-              {...getFieldHelpers(
-                "max_ttl_hours",
-                allowAdvancedScheduling ? (
+              {...getFieldHelpers("max_ttl_hours", {
+                helperText: allowAdvancedScheduling ? (
                   <MaxTTLHelperText ttl={form.values.max_ttl_hours} />
                 ) : (
                   <>
                     You need an enterprise license to use it.{" "}
                     <Link href={docs("/enterprise")}>Learn more</Link>.
                   </>
                 ),
-              )}
+              })}
               disabled={
                 isSubmitting ||
                 !form.values.use_max_ttl ||

diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -132,10 +132,9 @@ export const CreateUserForm: FC<
             label={Language.emailLabel}
           />
           <TextField
-            {...getFieldHelpers(
-              "login_type",
-              "Authentication method for this user",
-            )}
+            {...getFieldHelpers("login_type", {
+              helperText: "Authentication method for this user",
+            })}
             select
             id="login_type"
             data-testid="login-type-input"
@@ -180,12 +179,11 @@ export const CreateUserForm: FC<
             })}
           </TextField>
           <TextField
-            {...getFieldHelpers(
-              "password",
-              form.values.login_type === "password"
-                ? ""
-                : "No password required for this login type",
-            )}
+            {...getFieldHelpers("password", {
+              helperText:
+                form.values.login_type !== "password" &&
+                "No password required for this login type",
+            })}
             autoComplete="current-password"
             fullWidth
             id="password"

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -214,10 +214,10 @@ export const AppearanceSettingsPageView: FC<
             />
             <Stack spacing={0}>
               <TextField
-                {...serviceBannerFieldHelpers(
-                  "message",
-                  "Markdown bold, italics, and links are supported.",
-                )}
+                {...serviceBannerFieldHelpers("message", {
+                  helperText:
+                    "Markdown bold, italics, and links are supported.",
+                })}
                 fullWidth
                 label="Message"
                 multiline

diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -52,10 +52,9 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
               label="Name"
             />
             <TextField
-              {...getFieldHelpers(
-                "display_name",
-                "Optional: keep empty to default to the name.",
-              )}
+              {...getFieldHelpers("display_name", {
+                helperText: "Optional: keep empty to default to the name.",
+              })}
               fullWidth
               label="Display Name"
             />

diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -73,10 +73,9 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
           ) : (
             <>
               <TextField
-                {...getFieldHelpers(
-                  "display_name",
-                  "Optional: keep empty to default to the name.",
-                )}
+                {...getFieldHelpers("display_name", {
+                  helperText: "Optional: keep empty to default to the name.",
+                })}
                 onChange={onChangeTrimmed(form)}
                 autoComplete="display_name"
                 autoFocus
@@ -94,11 +93,10 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
             </>
           )}
           <TextField
-            {...getFi
F438
eldHelpers(
-              "quota_allowance",
-              `This group gives ${form.values.quota_allowance} quota credits to each
+            {...getFieldHelpers("quota_allowance", {
+              helperText: `This group gives ${form.values.quota_allowance} quota credits to each
             of its members.`,
-            )}
+            })}
             onChange={onChangeTrimmed(form)}
             autoFocus
             fullWidth

diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
@@ -4,13 +4,12 @@ import GeneralIcon from "@mui/icons-material/SettingsOutlined";
 import SecurityIcon from "@mui/icons-material/LockOutlined";
 import { type FC } from "react";
 import type { Template } from "api/typesGenerated";
-import { Avatar } from "components/Avatar/Avatar";
+import { ExternalAvatar } from "components/Avatar/Avatar";
 import {
   Sidebar as BaseSidebar,
   SidebarHeader,
   SidebarNavItem,
 } from "components/Sidebar/Sidebar";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
 
 interface SidebarProps {
   template: Template;
@@ -21,9 +20,7 @@ export const Sidebar: FC<SidebarProps> = ({ template }) => {
     <BaseSidebar>
       <SidebarHeader
         avatar={
-          <Avatar variant="square" fitImage>
-            <ExternalImage src={template.icon} css={{ width: "100%" }} />
-          </Avatar>
+          <ExternalAvatar src={template.icon} variant="square" fitImage />
         }
         title={template.display_name || template.name}
         linkTo={`/templates/${template.name}`}

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -29,14 +29,16 @@ import {
 import { EnterpriseBadge } from "components/Badges/Badges";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
+const MAX_DESCRIPTION_MESSAGE =
+  "Please enter a description that is no longer than 128 characters.";
 
 export const getValidationSchema = (): Yup.AnyObjectSchema =>
   Yup.object({
     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.",
+      MAX_DESCRIPTION_MESSAGE,
     ),
     allow_user_cancel_workspace_jobs: Yup.boolean(),
     icon: iconValidator,
@@ -119,7 +121,9 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
           />
 
           <TextField
-            {...getFieldHelpers("description")}
+            {...getFieldHelpers("description", {
+              maxLength: MAX_DESCRIPTION_CHAR_LIMIT,
+            })}
             multiline
             disabled={isSubmitting}
             fullWidth

diff --git a/.../src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.test.tsx b/.../src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.test.tsx
@@ -82,7 +82,7 @@ const fillAndSubmitForm = async ({
   await userEvent.type(iconField, icon);
 
   const allowCancelJobsField = screen.getByRole("checkbox", {
-    name: "Allow users to cancel in-progress workspace jobs. Depending on your template, canceling builds may leave workspaces in an unhealthy state. This option isn't recommended for most use cases.",
+    name: /allow users to cancel in-progress workspace jobs/i,
   });
   // checkbox is checked by default, so it must be clicked to get unchecked
   if (!allow_user_cancel_workspace_jobs) {
@@ -123,8 +123,6 @@ describe("TemplateSettingsPage", () => {
         "Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, port a",
     };
     const validate = () => getValidationSchema().validateSync(values);
-    expect(validate).toThrowError(
-      "Please enter a description that is less than or equal to 128 characters.",
-    );
+    expect(validate).toThrowError();
   });
 });
diff --git a/...ges/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.stories.tsx b/...ges/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.stories.tsx
@@ -1,6 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import { mockApiError, MockTemplate } from "testHelpers/entities";
 import { TemplateSettingsPageView } from "./TemplateSettingsPageView";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TemplateSettingsPageView> = {
   title: "pages/TemplateSettingsPage",

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
@@ -354,10 +354,11 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
       >
         <Stack direction="row" css={styles.ttlFields}>
           <TextField
-            {...getFieldHelpers(
-              "default_ttl_ms",
-              <DefaultTTLHelperText ttl={form.values.default_ttl_ms} />,
-            )}
+            {...getFieldHelpers("default_ttl_ms", {
+              helperText: (
+                <DefaultTTLHelperText ttl={form.values.default_ttl_ms} />
+              ),
+            })}
             disabled={isSubmitting}
             fullWidth
             inputProps={{ min: 0, step: 1 }}
@@ -373,12 +374,13 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
       >
         <Stack direction="row" css={styles.ttlFields}>
           <TextField
-            {...getFieldHelpers(
-              "autostop_requirement_days_of_week",
-              <AutostopRequirementDaysHelperText
-                days={form.values.autostop_requirement_days_of_week}
-              />,
-            )}
+            {...getFieldHelpers("autostop_requirement_days_of_week", {
+              helperText: (
+                <AutostopRequirementDaysHelperText
+                  days={form.values.autostop_requirement_days_of_week}
+                />
+              ),
+            })}
             disabled={isSubmitting || form.values.use_max_ttl}
             fullWidth
             select
@@ -400,13 +402,14 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
           </TextField>
 
           <TextField
-            {...getFieldHelpers(
-              "autostop_requirement_weeks",
-              <AutostopRequirementWeeksHelperText
-                days={form.values.autostop_requirement_days_of_week}
-                weeks={form.values.autostop_requirement_weeks}
-              />,
-            )}
+            {...getFieldHelpers("autostop_requirement_weeks", {
+              helperText: (
+                <AutostopRequirementWeeksHelperText
+                  days={form.values.autostop_requirement_days_of_week}
+                  weeks={form.values.autostop_requirement_weeks}
+                />
+              ),
+            })}
             disabled={
               isSubmitting ||
               form.values.use_max_ttl ||
@@ -461,17 +464,16 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
           </Stack>
 
           <TextField
-            {...getFieldHelpers(
-              "max_ttl_ms",
-              allowAdvancedScheduling ? (
+            {...getFieldHelpers("max_ttl_ms", {
+              helperText: allowAdvancedScheduling ? (
                 <MaxTTLHelperText ttl={form.values.max_ttl_ms} />
               ) : (
                 <>
                   You need an enterprise license to use it{" "}
                   <Link href={docs("/enterprise")}>Learn more</Link>.
                 </>
               ),
-            )}
+            })}
             disabled={
               isSubmitting ||
               !form.values.use_max_ttl ||
@@ -579,10 +581,11 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
                 label="Enable Failure Cleanup"
               />
               <TextField
-                {...getFieldHelpers(
-                  "failure_ttl_ms",
-                  <FailureTTLHelperText ttl={form.values.failure_ttl_ms} />,
-                )}
+                {...getFieldHelpers("failure_ttl_ms", {
+                  helperText: (
+                    <FailureTTLHelperText ttl={form.values.failure_ttl_ms} />
+                  ),
+                })}
                 disabled={isSubmitting || !form.values.failure_cleanup_enabled}
                 fullWidth
                 inputProps={{ min: 0, step: "any" }}
@@ -608,12 +611,13 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
                 label="Enable Dormancy Threshold"
               />
               <TextField
-                {...getFieldHelpers(
-                  "time_til_dormant_ms",
-                  <DormancyTTLHelperText
-                    ttl={form.values.time_til_dormant_ms}
-                  />,
-                )}
+                {...getFieldHelpers("time_til_dormant_ms", {
+                  helperText: (
+                    <DormancyTTLHelperText
+                      ttl={form.values.time_til_dormant_ms}
+                    />
+                  ),
+                })}
                 disabled={
                   isSubmitting || !form.values.inactivity_cleanup_enabled
                 }
@@ -641,12 +645,13 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
                 label="Enable Dormancy Auto-Deletion"
               />
               <TextField
-                {...getFieldHelpers(
-                  "time_til_dormant_autodelete_ms",
-                  <DormancyAutoDeletionTTLHelperText
-                    ttl={form.values.time_til_dormant_autodelete_ms}
-                  />,
-                )}
+                {...getFieldHelpers("time_til_dormant_autodelete_ms", {
+                  helperText: (
+                    <DormancyAutoDeletionTTLHelperText
+                      ttl={form.values.time_til_dormant_autodelete_ms}
+                    />
+                  ),
+                })}
                 disabled={
                   isSubmitting ||
                   !form.values.dormant_autodeletion_cleanup_enabled