chore: add alpha badges to workspace cleanup fields (coder#9802)

sreya · web-flow · commit 9216725698f9 · 2023-09-22T10:41:17.000-05:00
diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -85,6 +85,15 @@ export const EnterpriseBadge: FC = () => {
   );
 };
 
+export const AlphaBadge: FC = () => {
+  const styles = useStyles();
+  return (
+    <span className={combineClasses([styles.badge, styles.alphaBadge])}>
+      Alpha
+    </span>
+  );
+};
+
 export const Badges: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles();
   return (
@@ -123,6 +132,11 @@ const useStyles = makeStyles((theme) => ({
     border: `1px solid ${theme.palette.info.light}`,
   },
 
+  alphaBadge: {
+    border: `1px solid ${theme.palette.error.light}`,
+    backgroundColor: theme.palette.error.dark,
+  },
+
   versionBadge: {
     border: `1px solid ${theme.palette.success.light}`,
     backgroundColor: theme.palette.success.dark,
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -1,4 +1,5 @@
 import { makeStyles } from "@mui/styles";
+import { AlphaBadge } from "components/DeploySettingsLayout/Badges";
 import {
   FormFooterProps as BaseFormFooterProps,
   FormFooter as BaseFormFooter,
@@ -67,8 +68,9 @@ export const FormSection: FC<
       sectionInfo?: string;
       infoTitle?: string;
     };
+    alpha?: boolean;
   }
-> = ({ children, title, description, classes = {} }) => {
+> = ({ children, title, description, classes = {}, alpha = false }) => {
   const formContext = useContext(FormContext);
   const styles = useStyles(formContext);
 
@@ -83,10 +85,12 @@ export const FormSection: FC<
         <h2
           className={combineClasses([
             styles.formSectionInfoTitle,
+            alpha && styles.formSectionInfoTitleAlpha,
             classes.infoTitle,
           ])}
         >
           {title}
+          {alpha && <AlphaBadge />}
         </h2>
         <div className={styles.formSectionInfoDescription}>{description}</div>
       </div>
@@ -171,6 +175,13 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(1),
   },
 
+  formSectionInfoTitleAlpha: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing(1.5),
+  },
+
   formSectionInfoDescription: {
     fontSize: 14,
     color: theme.palette.text.secondary,
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
@@ -464,6 +464,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
           <FormSection
             title="Failure Cleanup"
             description="When enabled, Coder will attempt to stop workspaces that are in a failed state after a specified number of days."
+            alpha
           >
             <FormFields>
               <FormControlLabel
@@ -492,6 +493,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
           <FormSection
             title="Dormancy Threshold"
             description="When enabled, Coder will mark workspaces as dormant after a period of time with no connections. Dormant workspaces can be auto-deleted (see below) or manually reviewed by the workspace owner or admins."
+            alpha
           >
             <FormFields>
               <FormControlLabel
@@ -524,6 +526,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
           <FormSection
             title="Dormancy Auto-Deletion"
             description="When enabled, Coder will permanently delete dormant workspaces after a period of time. Once a workspace is deleted it cannot be recovered."
+            alpha
           >
             <FormFields>
               <FormControlLabel
