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 = ({ )} {config && automationsConfig && showManageAutomationsModal && ( - { - // 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} >
@@ -127,8 +129,8 @@ const ManageQueryAutomationsModal = ({ name={name} onChange={() => { updateQueryItems(id); - !isChecked && - setErrors((errs) => omit(errs, "queryItems")); + // !isChecked && + // setErrors((errs) => omit(errs, "queryItems")); }} > {name}