From 3794fb5d67c56866cb6e42c511be50dd8a1740b6 Mon Sep 17 00:00:00 2001
From: Scott Gress <scottmgress@gmail.com>
Date: Fri, 28 Feb 2025 15:22:11 -0600
Subject: [PATCH] allow disabling other workflows (#26717)

For #26711

# Details

Fix for unreleased bug where you are enable to disable "Other
workflows", because after changing the slider from "enabled" to
"disabled" the save button would also be disabled.

The fix (easier to see [with whitespace disabled in the
diff](https://github.com/fleetdm/fleet/pull/26717/files?w=1)) is to pull
the PoliciesPaginatedList out of the `<div>` that gets the `__disabled`
class applied to it when the slider is turned off, and instead disable
it separately using its `disabled` property.

## Screenshota

Before (note disabled "save" button):
<img width="617" alt="image"
src="https://github.com/user-attachments/assets/f2e07969-7d05-4947-b94f-fb4ab144d348"
/>

After:
<img width="620" alt="image"
src="https://github.com/user-attachments/assets/ba104a48-bc68-4e1d-a05c-d477fff7af7a"
/>
---
 .../CalendarEventsModal.tsx                   |  4 +-
 .../OtherWorkflowsModal.tsx                   | 84 ++++++++++---------
 2 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx
index 66c7e6bd99..4fb2144d64 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx
@@ -275,11 +275,11 @@ const CalendarEventsModal = ({
         <PoliciesPaginatedList
           ref={paginatedListRef}
           isSelected="calendar_events_enabled"
-          onToggleItem={(item) => {
+          onToggleItem={(item: IFormPolicy) => {
             item.calendar_events_enabled = !item.calendar_events_enabled;
             return item;
           }}
-          renderItemRow={(item) => {
+          renderItemRow={(item: IFormPolicy) => {
             return (
               <Button
                 variant="text-icon"
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
index d2dddc0c63..242f80ecb2 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
@@ -26,7 +26,9 @@ import CustomLink from "components/CustomLink";
 import ExampleTicket from "../ExampleTicket";
 import ExamplePayload from "../ExamplePayload";
 
-import PoliciesPaginatedList from "../PoliciesPaginatedList/PoliciesPaginatedList";
+import PoliciesPaginatedList, {
+  IFormPolicy,
+} from "../PoliciesPaginatedList/PoliciesPaginatedList";
 
 interface IOtherWorkflowsModalProps {
   automationsConfig: IAutomationsConfig | ITeamAutomationsConfig;
@@ -349,47 +351,47 @@ const OtherWorkflowsModal = ({
             />
           </div>
           {isWebhookEnabled ? renderWebhook() : renderIntegrations()}
-          <div className="form-field">
-            {availablePolicies?.length ? (
-              <PoliciesPaginatedList
-                isSelected={(item) => {
-                  return newPolicyIds?.indexOf(item.id) > -1;
-                }}
-                onToggleItem={(item) => {
-                  const updatedPolicyIds = newPolicyIds.slice();
-                  const index = newPolicyIds?.indexOf(item.id);
-                  if (index > -1) {
-                    updatedPolicyIds.splice(index, 1);
-                  } else {
-                    updatedPolicyIds.push(item.id);
-                  }
-                  setNewPolicyIds(updatedPolicyIds);
-                  return item;
-                }}
-                footer={
-                  <p className={`${baseClass}__help-text`}>
-                    The workflow will be triggered when hosts fail these
-                    policies.{" "}
-                    <CustomLink
-                      url="https://www.fleetdm.com/learn-more-about/policy-automations"
-                      text="Learn more"
-                      newTab
-                      disableKeyboardNavigation={!isPolicyAutomationsEnabled}
-                    />
-                  </p>
+        </div>
+        <div className="form-field">
+          {availablePolicies?.length ? (
+            <PoliciesPaginatedList
+              isSelected={(item: IFormPolicy) => {
+                return newPolicyIds?.indexOf(item.id) > -1;
+              }}
+              onToggleItem={(item: IFormPolicy) => {
+                const updatedPolicyIds = newPolicyIds.slice();
+                const index = newPolicyIds?.indexOf(item.id);
+                if (index > -1) {
+                  updatedPolicyIds.splice(index, 1);
+                } else {
+                  updatedPolicyIds.push(item.id);
                 }
-                isUpdating={isUpdating}
-                onSubmit={onUpdateOtherWorkflows}
-                onCancel={onExit}
-                teamId={teamId}
-              />
-            ) : (
-              <>
-                <b>You have no policies.</b>
-                <p>Add a policy to turn on automations.</p>
-              </>
-            )}
-          </div>
+                setNewPolicyIds(updatedPolicyIds);
+                return item;
+              }}
+              footer={
+                <p className={`${baseClass}__help-text`}>
+                  The workflow will be triggered when hosts fail these policies.{" "}
+                  <CustomLink
+                    url="https://www.fleetdm.com/learn-more-about/policy-automations"
+                    text="Learn more"
+                    newTab
+                    disableKeyboardNavigation={!isPolicyAutomationsEnabled}
+                  />
+                </p>
+              }
+              isUpdating={isUpdating}
+              onSubmit={onUpdateOtherWorkflows}
+              onCancel={onExit}
+              teamId={teamId}
+              disabled={!isPolicyAutomationsEnabled}
+            />
+          ) : (
+            <>
+              <b>You have no policies.</b>
+              <p>Add a policy to turn on automations.</p>
+            </>
+          )}
         </div>
       </div>
     </Modal>