Conditionally render pipeline Archive, Restore, and view server modals

opendatahub-io · Oct 4, 2024 · 2fbdccd · 2fbdccd
1 parent 7ff95e0
commit 2fbdccd
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 77 deletions.
diff --git a/frontend/src/concepts/pipelines/content/ArchiveModal.tsx b/frontend/src/concepts/pipelines/content/ArchiveModal.tsx
@@ -10,7 +10,6 @@ interface ArchiveModalProps {
   onCancel: () => void;
   onSubmit: () => Promise<void[]>;
   children: React.ReactNode;
-  isOpen: boolean;
   testId: string;
 }
 
@@ -21,7 +20,6 @@ export const ArchiveModal: React.FC<ArchiveModalProps> = ({
   title,
   alertTitle,
   children,
-  isOpen,
   testId,
 }) => {
   const { refreshAllAPI } = usePipelinesAPI();
@@ -53,7 +51,7 @@ export const ArchiveModal: React.FC<ArchiveModalProps> = ({
 
   return (
     <Modal
-      isOpen={isOpen}
+      isOpen
       title={title}
       titleIconVariant="warning"
       variant="small"

diff --git a/frontend/src/concepts/pipelines/content/PipelineServerActions.tsx b/frontend/src/concepts/pipelines/content/PipelineServerActions.tsx
@@ -113,7 +113,7 @@ const PipelineServerActions: React.FC<PipelineServerActionsProps> = ({ variant,
           setDeleteOpen(false);
         }}
       />
-      <ViewServerModal isOpen={viewOpen} onClose={() => setViewOpen(false)} />
+      {viewOpen ? <ViewServerModal onClose={() => setViewOpen(false)} /> : null}
       <DeletePipelinesModal
         isOpen={deletePipelinesOpen}
         toDeletePipelines={pipelines}

diff --git a/frontend/src/concepts/pipelines/content/RestoreModal.tsx b/frontend/src/concepts/pipelines/content/RestoreModal.tsx
@@ -9,7 +9,6 @@ interface RestoreModalProps {
   title: string;
   alertTitle: string;
   children: React.ReactNode;
-  isOpen: boolean;
   testId: string;
 }
 
@@ -18,7 +17,6 @@ export const RestoreModal: React.FC<RestoreModalProps> = ({
   onSubmit,
   title,
   children,
-  isOpen,
   testId,
   alertTitle,
 }) => {
@@ -43,7 +41,7 @@ export const RestoreModal: React.FC<RestoreModalProps> = ({
 
   return (
     <Modal
-      isOpen={isOpen}
+      isOpen
       title={title}
       variant="small"
       onClose={onCancel}

diff --git a/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx b/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx
@@ -15,13 +15,11 @@ import { ExternalDatabaseSecret } from '~/concepts/pipelines/content/configurePi
 import { DSPipelineKind } from '~/k8sTypes';
 
 type ViewPipelineServerModalProps = {
-  isOpen: boolean;
   onClose: () => void;
   pipelineNamespaceCR: DSPipelineKind | null;
 };
 
 const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
-  isOpen,
   onClose,
   pipelineNamespaceCR,
 }) => {
@@ -35,7 +33,7 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
   const databaseSecret = dataEntryToRecord(result?.values?.data ?? []);
 
   return (
-    <Modal title="View pipeline server" isOpen={isOpen} onClose={onClose} variant="small">
+    <Modal title="View pipeline server" isOpen onClose={onClose} variant="small">
       {pipelineNamespaceCR && (
         <DescriptionList termWidth="20ch" isHorizontal>
           {!!pipelineNamespaceCR.spec.objectStorage.externalStorage?.s3CredentialsSecret

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -176,11 +176,9 @@ const PipelineRunDetails: React.FC<
           }
         }}
       />
-      <ArchiveRunModal
-        isOpen={archiving}
-        runs={run ? [run] : []}
-        onCancel={() => setArchiving(false)}
-      />
+      {archiving ? (
+        <ArchiveRunModal runs={run ? [run] : []} onCancel={() => setArchiving(false)} />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/ActiveExperimentTable.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/ActiveExperimentTable.tsx
@@ -46,11 +46,12 @@ const ActiveExperimentTable: React.FC<ActiveExperimentTableProps> = ({ ...baseTa
           />
         )}
       />
-      <ArchiveExperimentModal
-        isOpen={isArchiveModalOpen}
-        experiments={archiveExperiments}
-        onCancel={() => setIsArchiveModalOpen(false)}
-      />
+      {isArchiveModalOpen ? (
+        <ArchiveExperimentModal
+          experiments={archiveExperiments}
+          onCancel={() => setIsArchiveModalOpen(false)}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/ArchivedExperimentTable.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/ArchivedExperimentTable.tsx
@@ -55,11 +55,12 @@ const ArchivedExperimentTable: React.FC<ArchivedExperimentTableProps> = ({ ...ba
           />
         )}
       />
-      <RestoreExperimentModal
-        isOpen={isRestoreModalOpen}
-        experiments={restoreExperiments}
-        onCancel={() => setIsRestoreModalOpen(false)}
-      />
+      {isRestoreModalOpen ? (
+        <RestoreExperimentModal
+          experiments={restoreExperiments}
+          onCancel={() => setIsRestoreModalOpen(false)}
+        />
+      ) : null}
       <DeleteExperimentModal
         onCancel={() => setDeleteExperiment(undefined)}
         experiment={deleteExperiment}

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx
@@ -295,22 +295,24 @@ const PipelineRunTableInternal: React.FC<PipelineRunTableInternalProps> = ({
         data-testid={`${runType}-runs-table`}
         id={`${runType}-runs-table`}
       />
-      <ArchiveRunModal
-        isOpen={isArchiveModalOpen}
-        runs={selectedRuns}
-        onCancel={() => {
-          setIsArchiveModalOpen(false);
-          setSelectedIds([]);
-        }}
-      />
-      <RestoreRunModal
-        isOpen={isRestoreModalOpen}
-        runs={selectedRuns}
-        onCancel={() => {
-          setIsRestoreModalOpen(false);
-          setSelectedIds([]);
-        }}
-      />
+      {isArchiveModalOpen ? (
+        <ArchiveRunModal
+          runs={selectedRuns}
+          onCancel={() => {
+            setIsArchiveModalOpen(false);
+            setSelectedIds([]);
+          }}
+        />
+      ) : null}
+      {isRestoreModalOpen ? (
+        <RestoreRunModal
+          runs={selectedRuns}
+          onCancel={() => {
+            setIsRestoreModalOpen(false);
+            setSelectedIds([]);
+          }}
+        />
+      ) : null}
       {isDeleteModalOpen && (
         <DeletePipelineRunsModal
           toDeleteResources={selectedRuns}

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx
@@ -171,16 +171,12 @@ const PipelineRunTableRow: React.FC<PipelineRunTableRowProps> = ({
             items={actions}
             popperProps={{ appendTo: getDashboardMainContainer, position: 'right' }}
           />
-          <RestoreRunModal
-            isOpen={isRestoreModalOpen}
-            runs={[run]}
-            onCancel={() => setIsRestoreModalOpen(false)}
-          />
-          <ArchiveRunModal
-            isOpen={isArchiveModalOpen}
-            runs={[run]}
-            onCancel={() => setIsArchiveModalOpen(false)}
-          />
+          {isRestoreModalOpen ? (
+            <RestoreRunModal runs={[run]} onCancel={() => setIsRestoreModalOpen(false)} />
+          ) : null}
+          {isArchiveModalOpen ? (
+            <ArchiveRunModal runs={[run]} onCancel={() => setIsArchiveModalOpen(false)} />
+          ) : null}
         </Td>
       )}
     </Tr>

diff --git a/frontend/src/concepts/pipelines/context/PipelinesContext.tsx b/frontend/src/concepts/pipelines/context/PipelinesContext.tsx
@@ -271,23 +271,11 @@ export const DeleteServerModal = ({
   );
 };
 
-export const ViewServerModal = ({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-}): React.JSX.Element => {
+export const ViewServerModal = ({ onClose }: { onClose: () => void }): React.JSX.Element => {
   const { namespace } = React.useContext(PipelinesContext);
   const [pipelineNamespaceCR] = usePipelineNamespaceCR(namespace);
 
-  return (
-    <ViewPipelineServerModal
-      isOpen={isOpen}
-      onClose={onClose}
-      pipelineNamespaceCR={pipelineNamespaceCR}
-    />
-  );
+  return <ViewPipelineServerModal onClose={onClose} pipelineNamespaceCR={pipelineNamespaceCR} />;
 };
 
 export const PipelineServerTimedOut: React.FC = () => {

diff --git a/frontend/src/pages/pipelines/global/experiments/ArchiveExperimentModal.tsx b/frontend/src/pages/pipelines/global/experiments/ArchiveExperimentModal.tsx
@@ -6,13 +6,11 @@ import { ArchiveModal } from '~/concepts/pipelines/content/ArchiveModal';
 import { BulkActionExpandableSection } from '~/pages/projects/components/BulkActionExpandableSection';
 
 interface ArchiveExperimentModalProps {
-  isOpen: boolean;
   experiments: ExperimentKFv2[];
   onCancel: () => void;
 }
 
 export const ArchiveExperimentModal: React.FC<ArchiveExperimentModalProps> = ({
-  isOpen,
   experiments,
   onCancel,
 }) => {
@@ -28,7 +26,6 @@ export const ArchiveExperimentModal: React.FC<ArchiveExperimentModalProps> = ({
 
   return (
     <ArchiveModal
-      isOpen={isOpen}
       title={`Archiving experiment${isSingleArchiving ? '' : 's'}?`}
       alertTitle={`Error archiving ${
         isSingleArchiving ? experiments[0].display_name : 'experiments'

diff --git a/frontend/src/pages/pipelines/global/experiments/RestoreExperimentModal.tsx b/frontend/src/pages/pipelines/global/experiments/RestoreExperimentModal.tsx
@@ -10,13 +10,11 @@ import { BulkActionExpandableSection } from '~/pages/projects/components/BulkAct
 interface RestoreExperimentModalProps {
   experiments: ExperimentKFv2[];
   onCancel: () => void;
-  isOpen: boolean;
 }
 
 export const RestoreExperimentModal: React.FC<RestoreExperimentModalProps> = ({
   experiments,
   onCancel,
-  isOpen,
 }) => {
   const isSingleRestoring = experiments.length === 1;
 
@@ -30,7 +28,6 @@ export const RestoreExperimentModal: React.FC<RestoreExperimentModalProps> = ({
   );
   return (
     <RestoreModal
-      isOpen={isOpen}
       onCancel={onCancel}
       onSubmit={onSubmit}
       title={`Restore experiment${isSingleRestoring ? '' : 's'}?`}

diff --git a/frontend/src/pages/pipelines/global/runs/ArchiveRunModal.tsx b/frontend/src/pages/pipelines/global/runs/ArchiveRunModal.tsx
@@ -7,12 +7,11 @@ import { PipelineRunTabTitle } from '~/pages/pipelines/global/runs/types';
 import { BulkActionExpandableSection } from '~/pages/projects/components/BulkActionExpandableSection';
 
 interface ArchiveRunModalProps {
-  isOpen: boolean;
   runs: PipelineRunKFv2[];
   onCancel: () => void;
 }
 
-export const ArchiveRunModal: React.FC<ArchiveRunModalProps> = ({ isOpen, runs, onCancel }) => {
+export const ArchiveRunModal: React.FC<ArchiveRunModalProps> = ({ runs, onCancel }) => {
   const isSingleArchiving = runs.length === 1;
   const { api } = usePipelinesAPI();
   const onSubmit = React.useCallback(
@@ -22,7 +21,6 @@ export const ArchiveRunModal: React.FC<ArchiveRunModalProps> = ({ isOpen, runs,
 
   return (
     <ArchiveModal
-      isOpen={isOpen}
       title={`Archiving run${isSingleArchiving ? '' : 's'}?`}
       alertTitle={`Error archiving ${isSingleArchiving ? runs[0].display_name : 'runs'}`}
       confirmMessage={

diff --git a/frontend/src/pages/pipelines/global/runs/RestoreRunModal.tsx b/frontend/src/pages/pipelines/global/runs/RestoreRunModal.tsx
@@ -7,12 +7,11 @@ import { BulkActionExpandableSection } from '~/pages/projects/components/BulkAct
 import { PipelineRunTabTitle } from './types';
 
 interface RestoreRunModalProps {
-  isOpen: boolean;
   runs: PipelineRunKFv2[];
   onCancel: () => void;
 }
 
-export const RestoreRunModal: React.FC<RestoreRunModalProps> = ({ isOpen, runs, onCancel }) => {
+export const RestoreRunModal: React.FC<RestoreRunModalProps> = ({ runs, onCancel }) => {
   const isSingleRestoring = runs.length === 1;
   const { api } = usePipelinesAPI();
   const onSubmit = React.useCallback(
@@ -24,7 +23,6 @@ export const RestoreRunModal: React.FC<RestoreRunModalProps> = ({ isOpen, runs,
       title={`Restore run${isSingleRestoring ? '' : 's'}?`}
       onCancel={onCancel}
       onSubmit={onSubmit}
-      isOpen={isOpen}
       testId="restore-run-modal"
       alertTitle={`Error restoring ${isSingleRestoring ? runs[0].display_name : 'runs'}`}
     >