From 5591377c5f82700dd07042d7b8f03243ff162c15 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 30 Jan 2024 11:33:28 +0000 Subject: [PATCH] feat(site): remove complex fields --- .../CreateTemplateForm.stories.tsx | 1 - .../CreateTemplatePage/CreateTemplateForm.tsx | 415 +----------------- site/src/pages/CreateTemplatePage/utils.ts | 5 - 3 files changed, 1 insertion(+), 420 deletions(-) diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx index d5d554ec8b6b9..eb0c8d9a5c847 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx @@ -15,7 +15,6 @@ const meta: Meta = { component: CreateTemplateForm, args: { isSubmitting: false, - allowDisableEveryoneAccess: true, }, }; diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index 2c4bf6f27e2a1..5844988d61820 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -1,5 +1,4 @@ import { type Interpolation, type Theme } from "@emotion/react"; -import Checkbox from "@mui/material/Checkbox"; import TextField from "@mui/material/TextField"; import type { ProvisionerJobLog, @@ -21,14 +20,7 @@ import { } from "utils/formUtils"; import * as Yup from "yup"; import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"; -import { - HelpTooltip, - HelpTooltipContent, - HelpTooltipText, - HelpTooltipTrigger, -} from "components/HelpTooltip/HelpTooltip"; import { IconField } from "components/IconField/IconField"; -import Link from "@mui/material/Link"; import { HorizontalForm, FormSection, @@ -38,23 +30,13 @@ import { import camelCase from "lodash/camelCase"; import capitalize from "lodash/capitalize"; import { VariableInput } from "./VariableInput"; -import { docs } from "utils/docs"; -import { - AutostopRequirementDaysHelperText, - AutostopRequirementWeeksHelperText, -} from "pages/TemplateSettingsPage/TemplateSchedulePage/AutostopRequirementHelperText"; -import MenuItem from "@mui/material/MenuItem"; import { type TemplateAutostartRequirementDaysValue, type TemplateAutostopRequirementDaysValue, } from "utils/schedule"; -import { - TemplateScheduleAutostart, - sortedDays, -} from "components/TemplateScheduleAutostart/TemplateScheduleAutostart"; +import { sortedDays } from "components/TemplateScheduleAutostart/TemplateScheduleAutostart"; const MAX_DESCRIPTION_CHAR_LIMIT = 128; -const MAX_TTL_DAYS = 30; export interface CreateTemplateData { name: string; @@ -83,23 +65,6 @@ const validationSchema = Yup.object({ "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, "Default time until autostop must not be less than 0.") - .max( - 24 * MAX_TTL_DAYS /* 30 days in hours */, - "Please enter a limit that is less than or equal to 720 hours (30 days).", - ), - max_ttl_hours: Yup.number() - .integer() - .min(0, "Maximum time until autostop must not be less than 0.") - .max( - 24 * MAX_TTL_DAYS /* 30 days in hours */, - "Please enter a limit that is less than or equal to 720 hours (30 days).", - ), - autostop_requirement_days_of_week: Yup.string().required(), - autostop_requirement_weeks: Yup.number().required().min(1).max(16), - autostart_requirement_days_of_week: Yup.array().of(Yup.string()).required(), }); const defaultInitialValues: CreateTemplateData = { @@ -207,7 +172,6 @@ export type CreateTemplateFormProps = ( jobError?: string; logs?: ProvisionerJobLog[]; allowAdvancedScheduling: boolean; - allowDisableEveryoneAccess: boolean; }; export const CreateTemplateForm: FC = (props) => { @@ -220,7 +184,6 @@ export const CreateTemplateForm: FC = (props) => { jobError, logs, allowAdvancedScheduling, - allowDisableEveryoneAccess, } = props; const form = useFormik({ initialValues: getInitialValues({ @@ -247,46 +210,6 @@ export const CreateTemplateForm: FC = (props) => { } }, [logs, jobError]); - // Set autostop_requirement weeks to 1 when days_of_week is set to "off" or - // "daily". Technically you can set weeks to a different value in the backend - // and it will work, but this is a UX decision so users don't set days=daily - // and weeks=2 and get confused when workspaces only restart daily during - // every second week. - // - // We want to set the value to 1 when the user selects "off" or "daily" - // because the input gets disabled so they can't change it to 1 themselves. - const { - values: { autostop_requirement_days_of_week }, - setFieldValue, - } = form; - useEffect(() => { - if (!["saturday", "sunday"].includes(autostop_requirement_days_of_week)) { - // This is async but we don't really need to await the value. - void setFieldValue("autostop_requirement_weeks", 1); - } - }, [autostop_requirement_days_of_week, setFieldValue]); - - const handleToggleUseMaxTTL = async () => { - const val = !form.values.use_max_ttl; - if (val) { - // set max_ttl to 1, set autostop_requirement to empty - await form.setValues({ - ...form.values, - use_max_ttl: val, - max_ttl_hours: 1, - autostop_requirement_days_of_week: "off", - autostop_requirement_weeks: 1, - }); - } else { - // set max_ttl to 0 - await form.setValues({ - ...form.values, - use_max_ttl: val, - max_ttl_hours: 0, - }); - } - }; - return ( {/* General info */} @@ -357,296 +280,6 @@ export const CreateTemplateForm: FC = (props) => { - {/* Schedule */} - - - - - ), - })} - disabled={isSubmitting} - onChange={onChangeTrimmed(form)} - fullWidth - label="Default autostop (hours)" - type="number" - /> - - - - - ), - })} - disabled={ - isSubmitting || - form.values.use_max_ttl || - !allowAdvancedScheduling - } - fullWidth - select - value={form.values.autostop_requirement_days_of_week} - label="Days with required stop" - > - - Off - - - Daily - - - Saturday - - - Sunday - - - - - ), - })} - disabled={ - isSubmitting || - form.values.use_max_ttl || - !allowAdvancedScheduling || - !["saturday", "sunday"].includes( - form.values.autostop_requirement_days_of_week || "", - ) - } - fullWidth - inputProps={{ min: 1, max: 16, step: 1 }} - label="Weeks between required stops" - type="number" - /> - - - - - - - - Use a max lifetime instead of a required autostop schedule. - - - Use a maximum lifetime for workspaces created from this - template instead of an autostop requirement as configured - above. - - - - - - ) : ( - <> - You need an enterprise license to use it.{" "} - Learn more. - - ), - })} - disabled={ - isSubmitting || - !form.values.use_max_ttl || - !allowAdvancedScheduling - } - fullWidth - label="Max lifetime (hours)" - type="number" - /> - - - - - { - await form.setFieldValue( - "allow_user_autostart", - !form.values.allow_user_autostart, - ); - }} - name="allow_user_autostart" - checked={form.values.allow_user_autostart} - /> - - - Allow users to automatically start workspaces on a schedule. - - - - - {allowAdvancedScheduling && ( - { - await form.setFieldValue( - "autostart_requirement_days_of_week", - newDaysOfWeek, - ); - }} - /> - )} - - - { - await form.setFieldValue( - "allow_user_autostop", - !form.values.allow_user_autostop, - ); - }} - name="allow-user-autostop" - checked={form.values.allow_user_autostop} - /> - - - Allow users to customize autostop duration for workspaces. - - - Workspaces will always use the default TTL if this is set. - Regardless of this setting, workspaces will still stop due to - the autostop requirement policy. - - - - - - - - {/* Permissions */} - - - - - - - - - - - {/* Variables */} {variables && variables.length > 0 && ( = (props) => { ); }; -const MenuPath = () => { - return >; -}; - const fillNameAndDisplayWithFilename = async ( filename: string, form: ReturnType>, @@ -716,48 +345,6 @@ const fillNameAndDisplayWithFilename = async ( ]); }; -const hours = (h: number) => (h === 1 ? "hour" : "hours"); - -const DefaultTTLHelperText = (props: { ttl?: number }) => { - const { ttl = 0 } = props; - - // Error will show once field is considered touched - if (ttl < 0) { - return null; - } - - if (ttl === 0) { - return Workspaces will run until stopped manually.; - } - - return ( - - Workspaces will default to stopping after {ttl} {hours(ttl)}. This will be - extended by 1 hour after last activity in the workspace was detected. - - ); -}; - -const MaxTTLHelperText = (props: { ttl?: number }) => { - const { ttl = 0 } = props; - - // Error will show once field is considered touched - if (ttl < 0) { - return null; - } - - if (ttl === 0) { - return Workspaces may run indefinitely.; - } - - return ( - - Workspaces must stop within {ttl} {hours(ttl)} of starting, regardless of - any active connections. - - ); -}; - const styles = { ttlFields: { width: "100%", diff --git a/site/src/pages/CreateTemplatePage/utils.ts b/site/src/pages/CreateTemplatePage/utils.ts index 986373bc0902e..b9b9a85bde791 100644 --- a/site/src/pages/CreateTemplatePage/utils.ts +++ b/site/src/pages/CreateTemplatePage/utils.ts @@ -59,14 +59,9 @@ export const newTemplate = (formData: CreateTemplateData) => { export const getFormPermissions = (entitlements: Entitlements) => { const allowAdvancedScheduling = entitlements.features["advanced_template_scheduling"].enabled; - // Requires the template RBAC feature, otherwise disabling everyone access - // means no one can access. - const allowDisableEveryoneAccess = - entitlements.features["template_rbac"].enabled; return { allowAdvancedScheduling, - allowDisableEveryoneAccess, }; };