Conditionally render pipeline modals (#3300)

opendatahub-io · Oct 4, 2024 · 1fd4f18 · 1fd4f18
1 parent 3c4f40d
commit 1fd4f18
Show file tree

Hide file tree

Showing 20 changed files with 97 additions and 134 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
@@ -114,7 +114,7 @@ const PipelineServerActions: React.FC<PipelineServerActionsProps> = ({ variant,
           }}
         />
       ) : null}
-      <ViewServerModal isOpen={viewOpen} onClose={() => setViewOpen(false)} />
+      {viewOpen ? <ViewServerModal onClose={() => setViewOpen(false)} /> : null}
       {deletePipelinesOpen ? (
         <DeletePipelinesModal
           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/...src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx b/...src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
@@ -16,7 +16,6 @@ import { configureDSPipelineResourceSpec, objectStorageIsValid } from './utils';
 import { PipelineServerConfigType } from './types';
 
 type ConfigurePipelinesServerModalProps = {
-  open: boolean;
   onClose: () => void;
 };
 
@@ -27,20 +26,13 @@ const FORM_DEFAULTS: PipelineServerConfigType = {
 
 export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerModalProps> = ({
   onClose,
-  open,
 }) => {
   const { project, namespace } = usePipelinesAPI();
-  const [dataConnections, loaded, , refresh] = useDataConnections(namespace);
+  const [dataConnections, loaded] = useDataConnections(namespace);
   const [fetching, setFetching] = React.useState(false);
   const [error, setError] = React.useState<Error>();
   const [config, setConfig] = React.useState<PipelineServerConfigType>(FORM_DEFAULTS);
 
-  React.useEffect(() => {
-    if (open) {
-      refresh();
-    }
-  }, [open, refresh]);
-
   const databaseIsValid = config.database.useDefault
     ? true
     : config.database.value.every(({ key, value }) =>
@@ -101,7 +93,7 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
       title="Configure pipeline server"
       variant="medium"
       description="Configuring a pipeline server enables you to create and manage pipelines."
-      isOpen={open}
+      isOpen
       onClose={onBeforeClose}
       footer={
         <DashboardModalFooter

diff --git a/frontend/src/concepts/pipelines/content/experiment/CreateExperimentButton.tsx b/frontend/src/concepts/pipelines/content/experiment/CreateExperimentButton.tsx
@@ -25,18 +25,19 @@ const CreateExperimentButton: React.FC<CreateExperimentButtonProps> = ({
       >
         {children || 'Create experiment'}
       </Button>
-      <CreateExperimentModal
-        isOpen={open}
-        onClose={(experiment) => {
-          setOpen(false);
-          if (experiment) {
-            if (onCreate) {
-              onCreate(experiment);
+      {open ? (
+        <CreateExperimentModal
+          onClose={(experiment) => {
+            setOpen(false);
+            if (experiment) {
+              if (onCreate) {
+                onCreate(experiment);
+              }
+              refreshAllAPI();
             }
-            refreshAllAPI();
-          }
-        }}
-      />
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/content/experiment/CreateExperimentModal.tsx b/frontend/src/concepts/pipelines/content/experiment/CreateExperimentModal.tsx
@@ -20,11 +20,10 @@ import {
 import { CharLimitHelperText } from '~/components/CharLimitHelperText';
 
 type CreateExperimentModalProps = {
-  isOpen: boolean;
   onClose: (experiment?: ExperimentKFv2) => void;
 };
 
-const CreateExperimentModal: React.FC<CreateExperimentModalProps> = ({ isOpen, onClose }) => {
+const CreateExperimentModal: React.FC<CreateExperimentModalProps> = ({ onClose }) => {
   const { project, api, apiAvailable } = usePipelinesAPI();
   const [submitting, setSubmitting] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>();
@@ -41,7 +40,7 @@ const CreateExperimentModal: React.FC<CreateExperimentModalProps> = ({ isOpen, o
 
   return (
     <Modal
-      isOpen={isOpen}
+      isOpen
       title="Create experiment"
       onClose={() => onBeforeClose()}
       actions={[

diff --git a/frontend/src/concepts/pipelines/content/import/ImportPipelineButton.tsx b/frontend/src/concepts/pipelines/content/import/ImportPipelineButton.tsx
@@ -28,19 +28,20 @@ const ImportPipelineButton: React.FC<ImportPipelineButtonProps> = ({
       >
         {children || 'Import pipeline'}
       </Button>
-      <PipelineImportModal
-        isOpen={open}
-        redirectAfterImport={redirectAfterImport}
-        onClose={(pipeline) => {
-          setOpen(false);
-          if (pipeline) {
-            if (onCreate) {
-              onCreate(pipeline);
+      {open ? (
+        <PipelineImportModal
+          redirectAfterImport={redirectAfterImport}
+          onClose={(pipeline) => {
+            setOpen(false);
+            if (pipeline) {
+              if (onCreate) {
+                onCreate(pipeline);
+              }
+              refreshAllAPI();
             }
-            refreshAllAPI();
-          }
-        }}
-      />
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/content/import/ImportPipelineSplitButton.tsx b/frontend/src/concepts/pipelines/content/import/ImportPipelineSplitButton.tsx
@@ -82,18 +82,19 @@ const ImportPipelineSplitButton: React.FC<ImportPipelineSplitButtonProps> = ({
           </DropdownItem>
         </DropdownList>
       </Dropdown>
-      <PipelineImportModal
-        isOpen={isPipelineModalOpen}
-        onClose={(pipeline) => {
-          setPipelineModalOpen(false);
-          if (pipeline) {
-            if (onImportPipeline) {
-              onImportPipeline(pipeline);
+      {isPipelineModalOpen ? (
+        <PipelineImportModal
+          onClose={(pipeline) => {
+            setPipelineModalOpen(false);
+            if (pipeline) {
+              if (onImportPipeline) {
+                onImportPipeline(pipeline);
+              }
+              refreshAllAPI();
             }
-            refreshAllAPI();
-          }
-        }}
-      />
+          }}
+        />
+      ) : null}
       {isPipelineVersionModalOpen && (
         <PipelineVersionImportModal
           onClose={(pipelineVersion) => {

diff --git a/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx b/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
@@ -29,13 +29,11 @@ import PipelineUploadRadio from './PipelineUploadRadio';
 import { PipelineUploadOption, extractKindFromPipelineYAML } from './utils';
 
 type PipelineImportModalProps = {
-  isOpen: boolean;
   onClose: (pipeline?: PipelineKFv2) => void;
   redirectAfterImport?: boolean;
 };
 
 const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
-  isOpen,
   redirectAfterImport = true,
   onClose,
 }) => {
@@ -152,7 +150,7 @@ const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
   return (
     <Modal
       title="Import pipeline"
-      isOpen={isOpen}
+      isOpen
       onClose={() => onBeforeClose()}
       actions={[
         <Button

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}
       {deleteExperiment ? (
         <DeleteExperimentModal
           onCancel={() => setDeleteExperiment(undefined)}

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>