Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 11, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17d0dc2
feat: add a character counter for fields with length limits
aslilac Jan 10, 2024
01fe466
🧪
aslilac Jan 11, 2024
985d8d0
add story
aslilac Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: add a character counter for fields with length limits 
- 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
  • Loading branch information
@aslilac
aslilac committed Jan 10, 2024
commit 17d0dc2b684bf50ce06b792ea7895902f888094c
48 changes: 26 additions & 22 deletions site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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 ||
Expand All @@ -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 ||
Expand Down Expand Up @@ -453,17 +458,16 @@ export const CreateTemplateForm: 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 ||
Expand Down
18 changes: 8 additions & 10 deletions site/src/pages/CreateUserPage/CreateUserForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 3 additions & 4 deletions site/src/pages/GroupsPage/CreateGroupPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down
14 changes: 6 additions & 8 deletions site/src/pages/GroupsPage/SettingsGroupPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -94,11 +93,10 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
</>
)}
<TextField
{...getFieldHelpers(
"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
Expand Down
7 changes: 2 additions & 5 deletions site/src/pages/TemplateSettingsPage/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}`}
Expand Down
8 changes: 6 additions & 2 deletions site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -119,7 +121,9 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
/>

<TextField
{...getFieldHelpers("description")}
{...getFieldHelpers("description", {
maxLength: MAX_DESCRIPTION_CHAR_LIMIT,
})}
multiline
disabled={isSubmitting}
fullWidth
Expand Down
79 changes: 42 additions & 37 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,10 +356,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 }}
Expand All @@ -375,12 +376,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
Expand All @@ -402,13 +404,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 ||
Expand Down Expand Up @@ -463,17 +466,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 ||
Expand Down Expand Up @@ -581,10 +583,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" }}
Expand All @@ -610,12 +613,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
}
Expand Down Expand Up @@ -643,12 +647,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
Expand Down
14 changes: 2 additions & 12 deletions site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,7 @@ export const TemplateSettingsLayout: FC = () => {
</Helmet>

<Margins>
<Stack
css={{
padding: "48px 0",
}}
direction="row"
spacing={10}
>
<Stack css={{ padding: "48px 0" }} direction="row" spacing={10}>
{templateQuery.isError || permissionsQuery.isError ? (
<ErrorAlert error={templateQuery.error} />
) : (
Expand All @@ -74,11 +68,7 @@ export const TemplateSettingsLayout: FC = () => {
>
<Sidebar template={templateQuery.data} />
<Suspense fallback={<Loader />}>
<main
css={{
width: "100%",
}}
>
<main css={{ width: "100%" }}>
<Outlet />
</main>
</Suspense>
Expand Down
Loading