UI – Instead of not rendering, cosmetically hide ManageQueryAutomations modal to maintain its state (#16609)

## 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

@@ -0,0 +1,2 @@
+- Fix a bug where the manage query automations modal would lose its state when the user clicks
+  "Preview data"

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}

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
+    // ManageQueryAutomationsModal will be cosmetically hidden when the preview data modal is open
-    setShowManageAutomationsModal(!showManageAutomationsModal);
     setShowPreviewDataModal(!showPreviewDataModal);
-  }, [
+  }, [showPreviewDataModal, setShowPreviewDataModal]);
-    showPreviewDataModal,
-    setShowPreviewDataModal,
-    showManageAutomationsModal,
-    setShowManageAutomationsModal,
-  ]);
 
   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}

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 &&
+                          // !isChecked &&
-                            setErrors((errs) => omit(errs, "queryItems"));
+                          //   setErrors((errs) => omit(errs, "queryItems"));
                         }}
                       >
                         {name}