Conditionally render delete modals (#3291)

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

Hide file tree

Showing 38 changed files with 379 additions and 418 deletions.
diff --git a/frontend/src/concepts/pipelines/EnsureCompatiblePipelineServer.tsx b/frontend/src/concepts/pipelines/EnsureCompatiblePipelineServer.tsx
@@ -81,7 +81,7 @@ const EnsureCompatiblePipelineServer: React.FC<EnsureCompatiblePipelineServerPro
             </EmptyStateFooter>
           </EmptyState>
         </Bullseye>
-        <DeleteServerModal isOpen={isDeleting} onClose={() => setIsDeleting(false)} />
+        {isDeleting ? <DeleteServerModal onClose={() => setIsDeleting(false)} /> : null}
       </>
     );
   }

diff --git a/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx
@@ -33,10 +33,13 @@ const DeletePipelineRunsModal: React.FC<DeletePipelineRunsModalProps> = ({
   const resourceCount = toDeleteResources.length;
   const typeCategory = runTypeCategory[type];
 
+  if (!resourceCount) {
+    return null;
+  }
+
   return (
     <DeleteModal
       title={`Delete ${typeCategory}${resourceCount > 1 ? 's' : ''}?`}
-      isOpen={resourceCount !== 0}
       onClose={() => onBeforeClose(false)}
       deleting={deleting}
       error={error}

diff --git a/frontend/src/concepts/pipelines/content/DeletePipelineServerModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelineServerModal.tsx
@@ -5,14 +5,10 @@ import { deleteServer } from '~/concepts/pipelines/utils';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
 
 type DeletePipelineServerModalProps = {
-  isOpen: boolean;
   onClose: (deleted: boolean) => void;
 };
 
-const DeletePipelineServerModal: React.FC<DeletePipelineServerModalProps> = ({
-  isOpen,
-  onClose,
-}) => {
+const DeletePipelineServerModal: React.FC<DeletePipelineServerModalProps> = ({ onClose }) => {
   const [deleting, setDeleting] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>();
   const { project, namespace, pipelinesServer } = usePipelinesAPI();
@@ -26,7 +22,6 @@ const DeletePipelineServerModal: React.FC<DeletePipelineServerModalProps> = ({
   return (
     <DeleteModal
       title="Delete pipeline server?"
-      isOpen={isOpen}
       onClose={() => onBeforeClose(false)}
       deleting={deleting}
       error={error}

diff --git a/frontend/src/concepts/pipelines/content/DeletePipelinesModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelinesModal.tsx
@@ -8,14 +8,12 @@ import DeletePipelineModalExpandableSection from '~/concepts/pipelines/content/D
 import { getPipelineAndVersionDeleteString } from '~/concepts/pipelines/content/utils';
 
 type DeletePipelinesModalProps = {
-  isOpen: boolean;
   toDeletePipelines?: PipelineKFv2[];
   toDeletePipelineVersions?: { pipelineName: string; version: PipelineVersionKFv2 }[];
   onClose: (deleted?: boolean) => void;
 };
 
 const DeletePipelinesModal: React.FC<DeletePipelinesModalProps> = ({
-  isOpen,
   toDeletePipelines = [],
   toDeletePipelineVersions = [],
   onClose,
@@ -79,7 +77,6 @@ const DeletePipelinesModal: React.FC<DeletePipelinesModalProps> = ({
   return (
     <DeleteModal
       title={deleteTitle}
-      isOpen={isOpen}
       onClose={() => onBeforeClose(false)}
       deleting={deleting}
       error={error}

diff --git a/frontend/src/concepts/pipelines/content/PipelineServerActions.tsx b/frontend/src/concepts/pipelines/content/PipelineServerActions.tsx
@@ -107,25 +107,27 @@ const PipelineServerActions: React.FC<PipelineServerActionsProps> = ({ variant,
   return (
     <>
       {DropdownComponent}
-      <DeleteServerModal
-        isOpen={deleteOpen}
-        onClose={() => {
-          setDeleteOpen(false);
-        }}
-      />
+      {deleteOpen ? (
+        <DeleteServerModal
+          onClose={() => {
+            setDeleteOpen(false);
+          }}
+        />
+      ) : null}
       <ViewServerModal isOpen={viewOpen} onClose={() => setViewOpen(false)} />
-      <DeletePipelinesModal
-        isOpen={deletePipelinesOpen}
-        toDeletePipelines={pipelines}
-        toDeletePipelineVersions={versions}
-        onClose={(deleted) => {
-          if (deleted) {
-            refreshAllAPI();
-            clearAfterDeletion();
-          }
-          setDeletePipelinesOpen(false);
-        }}
-      />
+      {deletePipelinesOpen ? (
+        <DeletePipelinesModal
+          toDeletePipelines={pipelines}
+          toDeletePipelineVersions={versions}
+          onClose={(deleted) => {
+            if (deleted) {
+              refreshAllAPI();
+              clearAfterDeletion();
+            }
+            setDeletePipelinesOpen(false);
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -257,9 +257,8 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
           </PageSection>
         )}
       </ApplicationsPage>
-      {pipeline && (
+      {pipeline && isDeletionOpen ? (
         <DeletePipelinesModal
-          isOpen={isDeletionOpen}
           toDeletePipelineVersions={
             pipelineVersion
               ? [{ pipelineName: pipeline.display_name, version: pipelineVersion }]
@@ -272,7 +271,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
             }
           }}
         />
-      )}
+      ) : null}
     </>
   );
 };

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

diff --git a/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTable.tsx
@@ -95,16 +95,17 @@ const PipelinesTable: React.FC<PipelinesTableProps> = ({
         })}
         data-testid="pipelines-table"
       />
-      <DeletePipelinesModal
-        isOpen={deletePipelines.length !== 0}
-        toDeletePipelines={deletePipelines}
-        onClose={(deleted) => {
-          if (deleted) {
-            refreshAllAPI();
-          }
-          setDeletePipelines([]);
-        }}
-      />
+      {deletePipelines.length ? (
+        <DeletePipelinesModal
+          toDeletePipelines={deletePipelines}
+          onClose={(deleted) => {
+            if (deleted) {
+              refreshAllAPI();
+            }
+            setDeletePipelines([]);
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineVersion/PipelineVersionTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineVersion/PipelineVersionTable.tsx
@@ -98,16 +98,17 @@ const PipelineVersionTable: React.FC<PipelineVersionTableProps> = ({
         }
         data-testid="pipeline-versions-table"
       />
-      <DeletePipelinesModal
-        isOpen={deleteVersions.length !== 0}
-        toDeletePipelineVersions={deleteVersions}
-        onClose={(deleted) => {
-          if (deleted) {
-            refreshAllAPI();
-          }
-          setDeleteVersions([]);
-        }}
-      />
+      {deleteVersions.length ? (
+        <DeletePipelinesModal
+          toDeletePipelineVersions={deleteVersions}
+          onClose={(deleted) => {
+            if (deleted) {
+              refreshAllAPI();
+            }
+            setDeleteVersions([]);
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/concepts/pipelines/context/PipelinesContext.tsx b/frontend/src/concepts/pipelines/context/PipelinesContext.tsx
@@ -249,17 +249,10 @@ export const CreatePipelineServerButton: React.FC<CreatePipelineServerButtonProp
   );
 };
 
-export const DeleteServerModal = ({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-}): React.JSX.Element => {
+export const DeleteServerModal = ({ onClose }: { onClose: () => void }): React.JSX.Element => {
   const { refreshState } = React.useContext(PipelinesContext);
   return (
     <DeletePipelineServerModal
-      isOpen={isOpen}
       onClose={(deleted) => {
         if (deleted) {
           refreshState().then(onClose);

diff --git a/frontend/src/concepts/trustyai/content/DeleteTrustyAIModal.tsx b/frontend/src/concepts/trustyai/content/DeleteTrustyAIModal.tsx
@@ -2,19 +2,17 @@ import React from 'react';
 import DeleteModal from '~/pages/projects/components/DeleteModal';
 
 type DeleteTrustyAIModalProps = {
-  isOpen: boolean;
   onDelete: () => Promise<unknown>;
   onClose: (deleted: boolean) => void;
 };
 
-const DeleteTrustyAIModal: React.FC<DeleteTrustyAIModalProps> = ({ isOpen, onDelete, onClose }) => {
+const DeleteTrustyAIModal: React.FC<DeleteTrustyAIModalProps> = ({ onDelete, onClose }) => {
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [error, setError] = React.useState<Error>();
 
   return (
     <DeleteModal
       title="Uninstall TrustyAI"
-      isOpen={isOpen}
       onClose={() => {
         setIsDeleting(false);
         setError(undefined);

diff --git a/frontend/src/concepts/trustyai/content/InstallTrustyAICheckbox.tsx b/frontend/src/concepts/trustyai/content/InstallTrustyAICheckbox.tsx
@@ -47,13 +47,14 @@ const InstallTrustyAICheckbox: React.FC<InstallTrustyAICheckboxProps> = ({
         data-testid="trustyai-service-installation"
         name="TrustyAI service installation status"
       />
-      <DeleteTrustyAIModal
-        isOpen={open}
-        onDelete={onDelete}
-        onClose={() => {
-          setOpen(false);
-        }}
-      />
+      {open ? (
+        <DeleteTrustyAIModal
+          onDelete={onDelete}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/pages/BYONImages/BYONImageModal/DeleteBYONImageModal.tsx b/frontend/src/pages/BYONImages/BYONImageModal/DeleteBYONImageModal.tsx
@@ -4,7 +4,7 @@ import { BYONImage } from '~/types';
 import DeleteModal from '~/pages/projects/components/DeleteModal';
 
 export type DeleteBYONImageModalProps = {
-  image?: BYONImage;
+  image: BYONImage;
   onClose: (deleted: boolean) => void;
 };
 
@@ -18,26 +18,23 @@ const DeleteBYONImageModal: React.FC<DeleteBYONImageModalProps> = ({ image, onCl
     setError(undefined);
   };
 
-  const deleteName = image?.display_name || 'this notebook image';
+  const deleteName = image.display_name;
 
   return (
     <DeleteModal
       title="Delete notebook image?"
-      isOpen={!!image}
       onClose={() => onBeforeClose(false)}
       submitButtonLabel="Delete notebook image"
       onDelete={() => {
-        if (image) {
-          setIsDeleting(true);
-          deleteBYONImage(image)
-            .then(() => {
-              onBeforeClose(true);
-            })
-            .catch((e) => {
-              setError(e);
-              setIsDeleting(false);
-            });
-        }
+        setIsDeleting(true);
+        deleteBYONImage(image)
+          .then(() => {
+            onBeforeClose(true);
+          })
+          .catch((e) => {
+            setError(e);
+            setIsDeleting(false);
+          });
       }}
       deleting={isDeleting}
       error={error}

diff --git a/frontend/src/pages/BYONImages/BYONImagesTable.tsx b/frontend/src/pages/BYONImages/BYONImagesTable.tsx
@@ -94,15 +94,17 @@ export const BYONImagesTable: React.FC<BYONImagesTableProps> = ({ images, refres
           </>
         }
       />
-      <DeleteBYONImageModal
-        image={deleteImage}
-        onClose={(deleted) => {
-          if (deleted) {
-            refresh();
-          }
-          setDeleteImage(undefined);
-        }}
-      />
+      {deleteImage ? (
+        <DeleteBYONImageModal
+          image={deleteImage}
+          onClose={(deleted) => {
+            if (deleted) {
+              refresh();
+            }
+            setDeleteImage(undefined);
+          }}
+        />
+      ) : null}
       <ManageBYONImageModal
         isOpen={!!editImage}
         onClose={(updated) => {

diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTable.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTable.tsx
@@ -83,15 +83,17 @@ const AcceleratorProfilesTable: React.FC<AcceleratorProfilesTableProps> = ({
           </>
         }
       />
-      <DeleteAcceleratorProfileModal
-        acceleratorProfile={deleteAcceleratorProfile}
-        onClose={(deleted) => {
-          if (deleted) {
-            refreshAcceleratorProfiles();
-          }
-          setDeleteAcceleratorProfile(undefined);
-        }}
-      />
+      {deleteAcceleratorProfile ? (
+        <DeleteAcceleratorProfileModal
+          acceleratorProfile={deleteAcceleratorProfile}
+          onClose={(deleted) => {
+            if (deleted) {
+              refreshAcceleratorProfiles();
+            }
+            setDeleteAcceleratorProfile(undefined);
+          }}
+        />
+      ) : null}
     </>
   );
 };