Conditionally render model registry modals (#3304)

opendatahub-io · Oct 4, 2024 · 215d63d · 215d63d
1 parent 1fd4f18
commit 215d63d
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 247 deletions.
diff --git a/.../src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.tsx b/.../src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.tsx
@@ -70,45 +70,47 @@ const ModelVersionsDetailsHeaderActions: React.FC<ModelVersionsDetailsHeaderActi
           </DropdownItem>
         </DropdownList>
       </Dropdown>
-      <DeployRegisteredModelModal
-        onSubmit={() => {
-          refresh();
-          navigate(
-            modelVersionDeploymentsUrl(
-              mv.id,
-              mv.registeredModelId,
-              preferredModelRegistry?.metadata.name,
-            ),
-          );
-        }}
-        onCancel={() => setIsDeployModalOpen(false)}
-        isOpen={isDeployModalOpen}
-        modelVersion={mv}
-      />
-      <ArchiveModelVersionModal
-        onCancel={() => setIsArchiveModalOpen(false)}
-        onSubmit={() =>
-          apiState.api
-            .patchModelVersion(
-              {},
-              {
-                state: ModelState.ARCHIVED,
-              },
-              mv.id,
-            )
-            .then(() =>
-              navigate(
-                modelVersionArchiveDetailsUrl(
-                  mv.id,
-                  mv.registeredModelId,
-                  preferredModelRegistry?.metadata.name,
-                ),
+      {isDeployModalOpen ? (
+        <DeployRegisteredModelModal
+          onSubmit={() => {
+            refresh();
+            navigate(
+              modelVersionDeploymentsUrl(
+                mv.id,
+                mv.registeredModelId,
+                preferredModelRegistry?.metadata.name,
               ),
-            )
-        }
-        isOpen={isArchiveModalOpen}
-        modelVersionName={mv.name}
-      />
+            );
+          }}
+          onCancel={() => setIsDeployModalOpen(false)}
+          modelVersion={mv}
+        />
+      ) : null}
+      {isArchiveModalOpen ? (
+        <ArchiveModelVersionModal
+          onCancel={() => setIsArchiveModalOpen(false)}
+          onSubmit={() =>
+            apiState.api
+              .patchModelVersion(
+                {},
+                {
+                  state: ModelState.ARCHIVED,
+                },
+                mv.id,
+              )
+              .then(() =>
+                navigate(
+                  modelVersionArchiveDetailsUrl(
+                    mv.id,
+                    mv.registeredModelId,
+                    preferredModelRegistry?.metadata.name,
+                  ),
+                ),
+              )
+          }
+          modelVersionName={mv.name}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsHeaderActions.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsHeaderActions.tsx
@@ -63,22 +63,23 @@ const ModelVersionsHeaderActions: React.FC<ModelVersionsHeaderActionsProps> = ({
           </Dropdown>
         </FlexItem>
       </Flex>
-      <ArchiveRegisteredModelModal
-        onCancel={() => setIsArchiveModalOpen(false)}
-        onSubmit={() =>
-          apiState.api
-            .patchRegisteredModel(
-              {},
-              {
-                state: ModelState.ARCHIVED,
-              },
-              rm.id,
-            )
-            .then(() => navigate(registeredModelsUrl(preferredModelRegistry?.metadata.name)))
-        }
-        isOpen={isArchiveModalOpen}
-        registeredModelName={rm.name}
-      />
+      {isArchiveModalOpen ? (
+        <ArchiveRegisteredModelModal
+          onCancel={() => setIsArchiveModalOpen(false)}
+          onSubmit={() =>
+            apiState.api
+              .patchRegisteredModel(
+                {},
+                {
+                  state: ModelState.ARCHIVED,
+                },
+                rm.id,
+              )
+              .then(() => navigate(registeredModelsUrl(preferredModelRegistry?.metadata.name)))
+          }
+          registeredModelName={rm.name}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTableRow.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTableRow.tsx
@@ -101,60 +101,63 @@ const ModelVersionsTableRow: React.FC<ModelVersionsTableRowProps> = ({
       {!isArchiveModel && (
         <Td isActionCell>
           <ActionsColumn items={actions} />
-          <ArchiveModelVersionModal
-            onCancel={() => setIsArchiveModalOpen(false)}
-            onSubmit={() =>
-              apiState.api
-                .patchModelVersion(
-                  {},
-                  {
-                    state: ModelState.ARCHIVED,
-                  },
-                  mv.id,
-                )
-                .then(refresh)
-            }
-            isOpen={isArchiveModalOpen}
-            modelVersionName={mv.name}
-          />
-          <DeployRegisteredModelModal
-            onSubmit={() =>
-              navigate(
-                modelVersionDeploymentsUrl(
-                  mv.id,
-                  mv.registeredModelId,
-                  preferredModelRegistry?.metadata.name,
-                ),
-              )
-            }
-            onCancel={() => setIsDeployModalOpen(false)}
-            isOpen={isDeployModalOpen}
-            modelVersion={mv}
-          />
-          <RestoreModelVersionModal
-            onCancel={() => setIsRestoreModalOpen(false)}
-            onSubmit={() =>
-              apiState.api
-                .patchModelVersion(
-                  {},
-                  {
-                    state: ModelState.LIVE,
-                  },
-                  mv.id,
-                )
-                .then(() =>
-                  navigate(
-                    modelVersionUrl(
-                      mv.id,
-                      mv.registeredModelId,
-                      preferredModelRegistry?.metadata.name,
-                    ),
+          {isArchiveModalOpen ? (
+            <ArchiveModelVersionModal
+              onCancel={() => setIsArchiveModalOpen(false)}
+              onSubmit={() =>
+                apiState.api
+                  .patchModelVersion(
+                    {},
+                    {
+                      state: ModelState.ARCHIVED,
+                    },
+                    mv.id,
+                  )
+                  .then(refresh)
+              }
+              modelVersionName={mv.name}
+            />
+          ) : null}
+          {isDeployModalOpen ? (
+            <DeployRegisteredModelModal
+              onSubmit={() =>
+                navigate(
+                  modelVersionDeploymentsUrl(
+                    mv.id,
+                    mv.registeredModelId,
+                    preferredModelRegistry?.metadata.name,
                   ),
                 )
-            }
-            isOpen={isRestoreModalOpen}
-            modelVersionName={mv.name}
-          />
+              }
+              onCancel={() => setIsDeployModalOpen(false)}
+              modelVersion={mv}
+            />
+          ) : null}
+          {isRestoreModalOpen ? (
+            <RestoreModelVersionModal
+              onCancel={() => setIsRestoreModalOpen(false)}
+              onSubmit={() =>
+                apiState.api
+                  .patchModelVersion(
+                    {},
+                    {
+                      state: ModelState.LIVE,
+                    },
+                    mv.id,
+                  )
+                  .then(() =>
+                    navigate(
+                      modelVersionUrl(
+                        mv.id,
+                        mv.registeredModelId,
+                        preferredModelRegistry?.metadata.name,
+                      ),
+                    ),
+                  )
+              }
+              modelVersionName={mv.name}
+            />
+          ) : null}
         </Td>
       )}
     </Tr>

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
@@ -109,7 +109,7 @@ const ModelVersionsArchiveDetails: React.FC<ModelVersionsArchiveDetailsProps> =
           />
         )}
       </ApplicationsPage>
-      {mv !== null && (
+      {mv !== null && isRestoreModalOpen ? (
         <RestoreModelVersionModal
           onCancel={() => setIsRestoreModalOpen(false)}
           onSubmit={() =>
@@ -125,10 +125,9 @@ const ModelVersionsArchiveDetails: React.FC<ModelVersionsArchiveDetailsProps> =
                 navigate(modelVersionUrl(mv.id, rm?.id, preferredModelRegistry?.metadata.name)),
               )
           }
-          isOpen={isRestoreModalOpen}
           modelVersionName={mv.name}
         />
-      )}
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/ConnectionModal.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/ConnectionModal.tsx
@@ -5,16 +5,15 @@ import { DataConnection } from '~/pages/projects/types';
 import { ConnectionDropdown } from './ConnectionDropdown';
 
 export const ConnectionModal: React.FC<{
-  isOpen: boolean;
   onClose: () => void;
   onSubmit: (connection: DataConnection) => void;
-}> = ({ isOpen = false, onClose, onSubmit }) => {
+}> = ({ onClose, onSubmit }) => {
   const [project, setProject] = React.useState<string | undefined>(undefined);
   const [connection, setConnection] = React.useState<DataConnection | undefined>(undefined);
 
   return (
     <Modal
-      isOpen={isOpen}
+      isOpen
       data-testid="connection-autofill-modal"
       variant="medium"
       title="Autofill from data connection"

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -235,14 +235,15 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
           }
         />
       </FormSection>
-      <ConnectionModal
-        isOpen={isAutofillModalOpen}
-        onClose={() => setAutofillModalOpen(false)}
-        onSubmit={(connection) => {
-          fillObjectStorageByConnection(connection);
-          setAutofillModalOpen(false);
-        }}
-      />
+      {isAutofillModalOpen ? (
+        <ConnectionModal
+          onClose={() => setAutofillModalOpen(false)}
+          onSubmit={(connection) => {
+            fillObjectStorageByConnection(connection);
+            setAutofillModalOpen(false);
+          }}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTableRow.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelTableRow.tsx
@@ -93,40 +93,42 @@ const RegisteredModelTableRow: React.FC<RegisteredModelTableRowProps> = ({
       </Td>
       <Td isActionCell>
         <ActionsColumn items={actions} />
-        <ArchiveRegisteredModelModal
-          onCancel={() => setIsArchiveModalOpen(false)}
-          onSubmit={() =>
-            apiState.api
-              .patchRegisteredModel(
-                {},
-                {
-                  state: ModelState.ARCHIVED,
-                },
-                rm.id,
-              )
-              .then(refresh)
-          }
-          isOpen={isArchiveModalOpen}
-          registeredModelName={rm.name}
-        />
-        <RestoreRegisteredModelModal
-          onCancel={() => setIsRestoreModalOpen(false)}
-          onSubmit={() =>
-            apiState.api
-              .patchRegisteredModel(
-                {},
-                {
-                  state: ModelState.LIVE,
-                },
-                rm.id,
-              )
-              .then(() =>
-                navigate(registeredModelUrl(rm.id, preferredModelRegistry?.metadata.name)),
-              )
-          }
-          isOpen={isRestoreModalOpen}
-          registeredModelName={rm.name}
-        />
+        {isArchiveModalOpen ? (
+          <ArchiveRegisteredModelModal
+            onCancel={() => setIsArchiveModalOpen(false)}
+            onSubmit={() =>
+              apiState.api
+                .patchRegisteredModel(
+                  {},
+                  {
+                    state: ModelState.ARCHIVED,
+                  },
+                  rm.id,
+                )
+                .then(refresh)
+            }
+            registeredModelName={rm.name}
+          />
+        ) : null}
+        {isRestoreModalOpen ? (
+          <RestoreRegisteredModelModal
+            onCancel={() => setIsRestoreModalOpen(false)}
+            onSubmit={() =>
+              apiState.api
+                .patchRegisteredModel(
+                  {},
+                  {
+                    state: ModelState.LIVE,
+                  },
+                  rm.id,
+                )
+                .then(() =>
+                  navigate(registeredModelUrl(rm.id, preferredModelRegistry?.metadata.name)),
+                )
+            }
+            registeredModelName={rm.name}
+          />
+        ) : null}
       </Td>
     </Tr>
   );