Add ui to deprecate a template

coder · Emyrk · Nov 20, 2023 · Nov 16, 2023 · Nov 17, 2023 · Nov 17, 2023
commit 873300f34c256af3fd3581187538edeb0005de03
diff --git a/site/src/components/Dashboard/DashboardProvider.tsx b/site/src/components/Dashboard/DashboardProvider.tsx
@@ -129,3 +129,8 @@ export const useTemplatePoliciesEnabled = (): boolean => {
     experiments.includes("template_update_policies")
   );
 };
+
+export const useAccessControlEntitled = (): boolean => {
+  const { entitlements } = useDashboard();
+  return entitlements.features.access_control.enabled;
+};
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -24,6 +24,7 @@ import {
   HelpTooltip,
   HelpTooltipText,
 } from "components/HelpTooltip/HelpTooltip";
+import { EnterpriseBadge } from "components/Badges/Badges";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 
@@ -49,6 +50,7 @@ export interface TemplateSettingsForm {
   // Helpful to show field errors on Storybook
   initialTouched?: FormikTouched<UpdateTemplateMeta>;
   accessControlEnabled: boolean;
+  templatePoliciesEnabled: boolean;
 }
 
 export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
@@ -59,6 +61,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
   isSubmitting,
   initialTouched,
   accessControlEnabled,
+  templatePoliciesEnabled,
 }) => {
   const validationSchema = getValidationSchema();
   const form: FormikContextType<UpdateTemplateMeta> =
@@ -73,6 +76,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
         update_workspace_last_used_at: false,
         update_workspace_dormant_at: false,
         require_active_version: template.require_active_version,
+        deprecation_message: template.deprecation_message,
       },
       validationSchema,
       onSubmit,
@@ -170,7 +174,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
               </Stack>
             </Stack>
           </label>
-          {accessControlEnabled && (
+          {templatePoliciesEnabled && (
             <label htmlFor="require_active_version">
               <Stack direction="row" spacing={1}>
                 <Checkbox
@@ -205,6 +209,45 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
         </Stack>
       </FormSection>
 
+      <FormSection
+        title="Deprecate"
+        description="Deprecating a template prevents any new workspaces from being created. Existing workspaces will continue to function."
+      >
+        <FormFields>
+          <Stack direction="column" spacing={0.5}>
+            <Stack
+              direction="row"
+              alignItems="center"
+              spacing={0.5}
+              css={styles.optionText}
+            >
+              Deprecation Message
+            </Stack>
+            <span css={styles.optionHelperText}>
+              Leave the message empty to keep the template active. Any message
+              provided will mark the template as deprecated. Use this message to
+              inform users of the deprecation and how to migrate to a new
+              template.
+            </span>
+          </Stack>
+          <TextField
+            {...getFieldHelpers("deprecation_message")}
+            disabled={isSubmitting || !accessControlEnabled}
+            autoFocus
+            fullWidth
+            label="Deprecation Message"
+          />
+          {!accessControlEnabled && (
+            <Stack direction="row">
+              <EnterpriseBadge />
+              <span css={styles.optionHelperText}>
+                Enterprise license required to deprecate templates.
+              </span>
+            </Stack>
+          )}
+        </FormFields>
+      </FormSection>
+
       <FormFooter onCancel={onCancel} isLoading={isSubmitting} />
     </HorizontalForm>
   );

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
@@ -10,15 +10,19 @@ import { useTemplateSettings } from "../TemplateSettingsLayout";
 import { TemplateSettingsPageView } from "./TemplateSettingsPageView";
 import { templateByNameKey } from "api/queries/templates";
 import { useOrganizationId } from "hooks";
-import { useTemplatePoliciesEnabled } from "components/Dashboard/DashboardProvider";
+import {
+  useAccessControlEntitled,
+  useTemplatePoliciesEnabled,
+} from "components/Dashboard/DashboardProvider";
 
 export const TemplateSettingsPage: FC = () => {
   const { template: templateName } = useParams() as { template: string };
   const navigate = useNavigate();
   const orgId = useOrganizationId();
   const { template } = useTemplateSettings();
   const queryClient = useQueryClient();
-  const accessControlEnabled = useTemplatePoliciesEnabled();
+  const accessControlEnabled = useAccessControlEntitled();
+  const templatePoliciesEnabled = useTemplatePoliciesEnabled();
 
   const {
     mutate: updateTemplate,
@@ -55,6 +59,7 @@ export const TemplateSettingsPage: FC = () => {
           });
         }}
         accessControlEnabled={accessControlEnabled}
+        templatePoliciesEnabled={templatePoliciesEnabled}
       />
     </>
   );

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx
@@ -13,6 +13,7 @@ export interface TemplateSettingsPageViewProps {
     typeof TemplateSettingsForm
   >["initialTouched"];
   accessControlEnabled: boolean;
+  templatePoliciesEnabled: boolean;
 }
 
 export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
@@ -23,6 +24,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
   submitError,
   initialTouched,
   accessControlEnabled,
+  templatePoliciesEnabled,
 }) => {
   return (
     <>
@@ -38,6 +40,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
         onCancel={onCancel}
         error={submitError}
         accessControlEnabled={accessControlEnabled}
+        templatePoliciesEnabled={templatePoliciesEnabled}
       />
     </>
   );