fix(site): enable submit when auto start and stop are both disabled (#12055)

site/src/components/Badges/Badges.tsx

@@ -1,4 +1,9 @@
-import type { PropsWithChildren, FC } from "react";
+import {
+  type PropsWithChildren,
+  type FC,
+  forwardRef,
+  HTMLAttributes,
+} from "react";
 import Tooltip from "@mui/material/Tooltip";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
@@ -74,9 +79,14 @@ export const NotReachableBadge: FC = () => {
   );
 };
 
-export const DisabledBadge: FC = () => {
+export const DisabledBadge: FC = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement>
+>((props, ref) => {
   return (
     <span
+      {...props}
+      ref={ref}
       css={[
         styles.badge,
         (theme) => ({
@@ -89,7 +99,7 @@ export const DisabledBadge: FC = () => {
       Disabled
     </span>
   );
-};
+});
 
 export const EnterpriseBadge: FC = () => {
   return (

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx

@@ -105,3 +105,13 @@ export const Loading: Story = {
     isLoading: true,
   },
 };
+
+export const AutoStopAndStartOff: Story = {
+  args: {
+    initialValues: {
+      ...defaultInitialValues,
+      autostartEnabled: false,
+      autostopEnabled: false,
+    },
+  },
+};

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx

@@ -379,3 +379,37 @@ describe("templateInheritance", () => {
     expect(ttlInput).toBeDisabled();
   });
 });
+
+test("form should be enabled when both auto stop and auto start features are disabled, given that the template permits these actions", async () => {
+  jest.spyOn(API, "getTemplateByName").mockResolvedValue(MockTemplate);
+  render(
+    <WorkspaceScheduleForm
+      {...defaultFormProps}
+      initialValues={{
+        ...defaultFormProps.initialValues,
+        autostopEnabled: false,
+        autostartEnabled: false,
+      }}
+    />,
+  );
+
+  const submitButton = await screen.findByRole("button", { name: "Submit" });
+  expect(submitButton).toBeEnabled();
+});
+
+test("form should be disabled when both auto stop and auto start features are disabled at template level", async () => {
+  jest.spyOn(API, "getTemplateByName").mockResolvedValue(MockTemplate);
+  render(
+    <WorkspaceScheduleForm
+      {...defaultFormProps}
+      allowTemplateAutoStart={false}
+      allowTemplateAutoStop={false}
+      initialValues={{
+        ...defaultFormProps.initialValues,
+      }}
+    />,
+  );
+
+  const submitButton = await screen.findByRole("button", { name: "Submit" });
+  expect(submitButton).toBeDisabled();
+});

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx

@@ -441,10 +441,9 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
       <FormFooter
         onCancel={onCancel}
         isLoading={isLoading}
-        submitDisabled={
-          (!allowTemplateAutoStart && !allowTemplateAutoStop) ||
-          (!form.values.autostartEnabled && !form.values.autostopEnabled)
-        }
+        // If both options, autostart and autostop, are disabled at the template
+        // level, the form is disabled.
+        submitDisabled={!allowTemplateAutoStart && !allowTemplateAutoStop}
       />
     </HorizontalForm>
   );