From d8a80709864e87d826afbf873b873112307317be Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 7 Feb 2024 14:06:48 -0300
Subject: [PATCH] fix(site): enable submit when auto start and stop are both
 disabled (#12055)

---
 site/src/components/Badges/Badges.tsx         | 16 +++++++--
 .../WorkspaceScheduleForm.stories.tsx         | 10 ++++++
 .../WorkspaceScheduleForm.test.tsx            | 34 +++++++++++++++++++
 .../WorkspaceScheduleForm.tsx                 |  7 ++--
 4 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 8473b62e1e..db2917c616 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/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 (
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx
index ec02849805..4efc0c3f2d 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx
+++ b/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,
+    },
+  },
+};
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx
index 889905b2f4..31d8d89637 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx
+++ b/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();
+});
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
index 22f9b8f836..57866aacbc 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
+++ b/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>
   );