From 72ce7bcb74ad11a464546a15d042909228516ea6 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 6 Feb 2024 10:12:54 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Instead=20of=20not=20rendering?=
 =?UTF-8?q?,=20cosmetically=20hide=20ManageQueryAutomations=20modal=20to?=
 =?UTF-8?q?=20maintain=20its=20state=20(#16609)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #16538


![Screenshot-2024-02-05-at-14512PM](https://github.com/fleetdm/fleet/assets/61553566/ed0baf64-7a3c-4787-83b8-b29285f11601)


## Checklist for submitter

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 16538-preserve-manage-query-automations-modal-state |  2 ++
 .../ManagePoliciesPage/ManagePoliciesPage.tsx       |  8 ++------
 .../queries/ManageQueriesPage/ManageQueriesPage.tsx | 13 +++----------
 .../ManageQueryAutomationsModal.tsx                 | 10 ++++++----
 4 files changed, 13 insertions(+), 20 deletions(-)
 create mode 100644 16538-preserve-manage-query-automations-modal-state

diff --git a/16538-preserve-manage-query-automations-modal-state b/16538-preserve-manage-query-automations-modal-state
new file mode 100644
index 000000000..d8ea5ca98
--- /dev/null
+++ b/16538-preserve-manage-query-automations-modal-state
@@ -0,0 +1,2 @@
+- Fix a bug where the manage query automations modal would lose its state when the user clicks
+  "Preview data"
diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
index 9e34ca019..b0c3e9dc8 100644
--- a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
@@ -41,7 +41,7 @@ import TableDataError from "components/DataError";
 import MainContent from "components/MainContent";
 
 import PoliciesTable from "./components/PoliciesTable";
-import ManageAutomationsModal from "./components/ManagePolicyAutomationsModal";
+import ManagePolicyAutomationsModal from "./components/ManagePolicyAutomationsModal";
 import AddPolicyModal from "./components/AddPolicyModal";
 import DeletePolicyModal from "./components/DeletePolicyModal";
 
@@ -369,10 +369,6 @@ const ManagePolicyPage = ({
     }
   };
 
-  // const findAvailableTeam = (id: number) => {
-  //   return availableTeams?.find((t) => t.id === id);
-  // };
-
   const onTeamChange = useCallback(
     (teamId: number) => {
       setSelectedPolicyIds([]);
@@ -801,7 +797,7 @@ const ManagePolicyPage = ({
           </div>
         )}
         {config && automationsConfig && showManageAutomationsModal && (
-          <ManageAutomationsModal
+          <ManagePolicyAutomationsModal
             automationsConfig={automationsConfig}
             availableIntegrations={config.integrations}
             availablePolicies={availablePoliciesForAutomation}
diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
index d5b83d123..09385bb58 100644
--- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
@@ -218,15 +218,9 @@ const ManageQueriesPage = ({
   };
 
   const togglePreviewDataModal = useCallback(() => {
-    // Manage automation modal must close/open every time preview data modal opens/closes
-    setShowManageAutomationsModal(!showManageAutomationsModal);
+    // ManageQueryAutomationsModal will be cosmetically hidden when the preview data modal is open
     setShowPreviewDataModal(!showPreviewDataModal);
-  }, [
-    showPreviewDataModal,
-    setShowPreviewDataModal,
-    showManageAutomationsModal,
-    setShowManageAutomationsModal,
-  ]);
+  }, [showPreviewDataModal, setShowPreviewDataModal]);
 
   const onDeleteQuerySubmit = useCallback(async () => {
     const bulk = selectedQueryIds.length > 1;
@@ -403,8 +397,6 @@ const ManageQueriesPage = ({
     [refetchAllQueries, automatedQueryIds, toggleManageAutomationsModal]
   );
 
-  // const isTableDataLoading = isFetchingFleetQueries || queriesList === null;
-
   const renderModals = () => {
     return (
       <>
@@ -420,6 +412,7 @@ const ManageQueriesPage = ({
             isUpdatingAutomations={isUpdatingAutomations}
             handleSubmit={onSaveQueryAutomations}
             onCancel={toggleManageAutomationsModal}
+            isShowingPreviewDataModal={showPreviewDataModal}
             togglePreviewDataModal={togglePreviewDataModal}
             availableQueries={curTeamEnhancedQueries}
             automatedQueryIds={automatedQueryIds}
diff --git a/frontend/pages/queries/ManageQueriesPage/components/ManageQueryAutomationsModal/ManageQueryAutomationsModal.tsx b/frontend/pages/queries/ManageQueriesPage/components/ManageQueryAutomationsModal/ManageQueryAutomationsModal.tsx
index 4048d640e..d7bf7ab6f 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/ManageQueryAutomationsModal/ManageQueryAutomationsModal.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/ManageQueryAutomationsModal/ManageQueryAutomationsModal.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { omit } from "lodash";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
@@ -15,6 +14,7 @@ interface IManageQueryAutomationsModalProps {
   isUpdatingAutomations: boolean;
   handleSubmit: (formData: any) => void; // TODO
   onCancel: () => void;
+  isShowingPreviewDataModal: boolean;
   togglePreviewDataModal: () => void;
   availableQueries?: ISchedulableQuery[];
   automatedQueryIds: number[];
@@ -59,12 +59,13 @@ const ManageQueryAutomationsModal = ({
   automatedQueryIds,
   handleSubmit,
   onCancel,
+  isShowingPreviewDataModal,
   togglePreviewDataModal,
   availableQueries,
   logDestination,
 }: IManageQueryAutomationsModalProps): JSX.Element => {
   // TODO: Error handling, if any
-  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  // const [errors, setErrors] = useState<{ [key: string]: string }>({});
 
   // Client side sort queries alphabetically
   const sortedAvailableQueries =
@@ -105,6 +106,7 @@ const ManageQueryAutomationsModal = ({
       onExit={onCancel}
       className={baseClass}
       width="large"
+      isHidden={isShowingPreviewDataModal}
     >
       <div className={`${baseClass} form`}>
         <div className={`${baseClass}__heading`}>
@@ -127,8 +129,8 @@ const ManageQueryAutomationsModal = ({
                         name={name}
                         onChange={() => {
                           updateQueryItems(id);
-                          !isChecked &&
-                            setErrors((errs) => omit(errs, "queryItems"));
+                          // !isChecked &&
+                          //   setErrors((errs) => omit(errs, "queryItems"));
                         }}
                       >
                         {name}