Conditionally render model serving modals

frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx

@@ -61,11 +61,35 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
     [onCancel, onSubmit],
   );
 
+  const projectSection = (
+    <ProjectSelector
+      selectedProject={selectedProject}
+      setSelectedProject={setSelectedProject}
+      error={error}
+      isOpen={isProjectSelectorOpen}
+      setOpen={setProjectSelectorOpen}
+    />
+  );
+
   if (
     (platform === ServingRuntimePlatform.MULTI && !projectDeployStatusLoaded) ||
     !selectedProject ||
     !platform
   ) {
+    const modalForm = (
+      <Form>
+        {deployInfoError ? (
+          <Alert variant="danger" isInline title={deployInfoError.name}>
+            {deployInfoError.message}
+          </Alert>
+        ) : !deployInfoLoaded ? (
+          <Spinner />
+        ) : (
+          <FormSection title="Model deployment">{projectSection}</FormSection>
+        )}
+      </Form>
+    );
+
     return (
       <Modal
         title="Deploy model"
@@ -83,25 +107,7 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
         ]}
         showClose
       >
-        <Form>
-          {deployInfoError ? (
-            <Alert variant="danger" isInline title={deployInfoError.name}>
-              {deployInfoError.message}
-            </Alert>
-          ) : !deployInfoLoaded ? (
-            <Spinner />
-          ) : (
-            <FormSection title="Model deployment">
-              <ProjectSelector
-                selectedProject={selectedProject}
-                setSelectedProject={setSelectedProject}
-                error={error}
-                isOpen={isProjectSelectorOpen}
-                setOpen={setProjectSelectorOpen}
-              />
-            </FormSection>
-          )}
-        </Form>
+        {modalForm}
       </Modal>
     );
   }
@@ -110,40 +116,22 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
     return (
       <ManageKServeModal
         onClose={onClose}
-        isOpen
         servingRuntimeTemplates={getKServeTemplates(templates, templateOrder, templateDisablement)}
         shouldFormHidden={!!error}
         registeredModelDeployInfo={registeredModelDeployInfo}
         projectContext={{ currentProject: selectedProject, dataConnections }}
-        projectSection={
-          <ProjectSelector
-            selectedProject={selectedProject}
-            setSelectedProject={setSelectedProject}
-            error={error}
-            isOpen={isProjectSelectorOpen}
-            setOpen={setProjectSelectorOpen}
-          />
-        }
+        projectSection={projectSection}
       />
     );
   }
   // platform === ServingRuntimePlatform.MULTI
   return (
     <ManageInferenceServiceModal
       onClose={onClose}
-      isOpen
       shouldFormHidden={!!error}
       registeredModelDeployInfo={registeredModelDeployInfo}
       projectContext={{ currentProject: selectedProject, dataConnections }}
-      projectSection={
-        <ProjectSelector
-          selectedProject={selectedProject}
-          setSelectedProject={setSelectedProject}
-          error={error}
-          isOpen={isProjectSelectorOpen}
-          setOpen={setProjectSelectorOpen}
-        />
-      }
+      projectSection={projectSection}
     />
   );
 };

frontend/src/pages/modelRegistrySettings/CreateModal.tsx

@@ -20,12 +20,11 @@ import FormSection from '~/components/pf-overrides/FormSection';
 import { AreaContext } from '~/concepts/areas/AreaContext';
 
 type CreateModalProps = {
-  isOpen: boolean;
   onClose: () => void;
   refresh: () => Promise<unknown>;
 };
 
-const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) => {
+const CreateModal: React.FC<CreateModalProps> = ({ onClose, refresh }) => {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [error, setError] = React.useState<Error>();
   const [nameDesc, setNameDesc] = React.useState<NameDescType>({
@@ -125,7 +124,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) =
 
   return (
     <Modal
-      isOpen={isOpen}
+      isOpen
       title="Create model registry"
       onClose={onBeforeClose}
       actions={[

frontend/src/pages/modelRegistrySettings/DeleteModelRegistryModal.tsx

@@ -6,14 +6,12 @@ import { deleteModelRegistryBackend } from '~/services/modelRegistrySettingsServ
 
 type DeleteModelRegistryModalProps = {
   modelRegistry: ModelRegistryKind;
-  isOpen: boolean;
   onClose: () => void;
   refresh: () => Promise<unknown>;
 };
 
 const DeleteModelRegistryModal: React.FC<DeleteModelRegistryModalProps> = ({
   modelRegistry: mr,
-  isOpen,
   onClose,
   refresh,
 }) => {
@@ -49,7 +47,7 @@ const DeleteModelRegistryModal: React.FC<DeleteModelRegistryModalProps> = ({
       data-testid="delete-mr-modal"
       titleIconVariant="warning"
       title="Delete model registry?"
-      isOpen={isOpen}
+      isOpen
       onClose={onClose}
       variant="medium"
       footer={

frontend/src/pages/modelRegistrySettings/ModelRegistriesTableRow.tsx

@@ -57,17 +57,19 @@ const ModelRegistriesTableRow: React.FC<ModelRegistriesTableRowProps> = ({
           />
         </Td>
       </Tr>
-      <ViewDatabaseConfigModal
-        modelRegistry={mr}
-        isOpen={isDatabaseConfigModalOpen}
-        onClose={() => setIsDatabaseConfigModalOpen(false)}
-      />
-      <DeleteModelRegistryModal
-        modelRegistry={mr}
-        isOpen={isDeleteModalOpen}
-        onClose={() => setIsDeleteModalOpen(false)}
-        refresh={refresh}
-      />
+      {isDatabaseConfigModalOpen ? (
+        <ViewDatabaseConfigModal
+          modelRegistry={mr}
+          onClose={() => setIsDatabaseConfigModalOpen(false)}
+        />
+      ) : null}
+      {isDeleteModalOpen ? (
+        <DeleteModelRegistryModal
+          modelRegistry={mr}
+          onClose={() => setIsDeleteModalOpen(false)}
+          refresh={refresh}
+        />
+      ) : null}
     </>
   );
 };

frontend/src/pages/modelRegistrySettings/ModelRegistrySettings.tsx

@@ -71,11 +71,9 @@ const ModelRegistrySettings: React.FC = () => {
           }}
         />
       </ApplicationsPage>
-      <CreateModal
-        isOpen={createModalOpen}
-        onClose={() => setCreateModalOpen(false)}
-        refresh={refreshAll}
-      />
+      {createModalOpen ? (
+        <CreateModal onClose={() => setCreateModalOpen(false)} refresh={refreshAll} />
+      ) : null}
     </>
   );
 };

frontend/src/pages/modelRegistrySettings/ViewDatabaseConfigModal.tsx

@@ -11,19 +11,17 @@ import {
 } from '@patternfly/react-core';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { ModelRegistryKind } from '~/k8sTypes';
-import useFetchState, { NotReadyError } from '~/utilities/useFetchState';
+import useFetchState from '~/utilities/useFetchState';
 import { getModelRegistryBackend } from '~/services/modelRegistrySettingsService';
 import ModelRegistryDatabasePassword from './ModelRegistryDatabasePassword';
 
 type ViewDatabaseConfigModalProps = {
   modelRegistry: ModelRegistryKind;
-  isOpen: boolean;
   onClose: () => void;
 };
 
 const ViewDatabaseConfigModal: React.FC<ViewDatabaseConfigModalProps> = ({
   modelRegistry: mr,
-  isOpen,
   onClose,
 }) => {
   const dbSpec = mr.spec.mysql || mr.spec.postgres;
@@ -34,20 +32,17 @@ const ViewDatabaseConfigModal: React.FC<ViewDatabaseConfigModalProps> = ({
 
   const [password, passwordLoaded, passwordLoadError] = useFetchState(
     React.useCallback(async () => {
-      if (!isOpen) {
-        throw new NotReadyError('Defer load until modal opened');
-      }
       const { databasePassword } = await getModelRegistryBackend(mr.metadata.name);
       return databasePassword;
-    }, [mr, isOpen]),
+    }, [mr]),
     undefined,
   );
 
   return (
     <Modal
       title="View database configuration"
       description="Database configuration cannot be edited after registry creation. To change the database configuration, you must delete the registry and create a new one."
-      isOpen={isOpen}
+      isOpen
       onClose={onClose}
       variant="medium"
       actions={[

frontend/src/pages/modelServing/screens/global/InferenceServiceTable.tsx

@@ -104,41 +104,41 @@
           }}
         />
       ) : null}
-      <ManageInferenceServiceModal
-        isOpen={!!editInferenceService && isModelMesh(editInferenceService)}
-        editInfo={editInferenceService}
-        onClose={(edited) => {
-          fireFormTrackingEvent('Model Updated', {
-            outcome: edited ? TrackingOutcome.submit : TrackingOutcome.cancel,
-            type: 'multi',
-          });
-          if (edited) {
-            refresh?.();
-          }
-          setEditInferenceService(undefined);
-        }}
-      />
-      <ManageKServeModal
-        isOpen={!!editInferenceService && !isModelMesh(editInferenceService)}
-        editInfo={{
-          inferenceServiceEditInfo: editInferenceService,
-          servingRuntimeEditInfo: {
-            servingRuntime: editInferenceService
-              ? servingRuntimes.find(
-                  (sr) => sr.metadata.name === editInferenceService.spec.predictor.model?.runtime,
-                )
-              : undefined,
-            secrets: [],
-          },
-          secrets: filterTokens ? filterTokens(editInferenceService?.metadata.name) : [],
-        }}
-        onClose={(edited) => {
-          if (edited) {
-            refresh?.();
-          }
-          setEditInferenceService(undefined);
-        }}
-      />
+      {!!editInferenceService && isModelMesh(editInferenceService) ? (
+        <ManageInferenceServiceModal
+          editInfo={editInferenceService}
+          onClose={(edited) => {
+            fireFormTrackingEvent('Model Updated', {
+              outcome: edited ? TrackingOutcome.submit : TrackingOutcome.cancel,
+              type: 'multi',
+            });
+            if (edited) {
+              refresh?.();
+            }
+            setEditInferenceService(undefined);
+          }}
+        />
+      ) : null}
+      {!!editInferenceService && !isModelMesh(editInferenceService) ? (
+        <ManageKServeModal
+          editInfo={{
+            inferenceServiceEditInfo: editInferenceService,
+            servingRuntimeEditInfo: {
+              servingRuntime: servingRuntimes.find(
+                (sr) => sr.metadata.name === editInferenceService.spec.predictor.model?.runtime,
+              ),
+              secrets: [],
+            },
+            secrets: filterTokens ? filterTokens(editInferenceService.metadata.name) : [],
+          }}
+          onClose={(edited) => {
+            if (edited) {
+              refresh?.();
+            }
+            setEditInferenceService(undefined);
+          }}
+        />
+      ) : null}
     </>
   );
 };

frontend/src/pages/modelServing/screens/global/ServeModelButton.tsx

@@ -66,42 +66,42 @@
     </Button>
   );
 
+  if (!project) {
+    return (
+      <Tooltip data-testid="deploy-model-tooltip" content="To deploy a model, select a project.">
+        {deployButton}
+      </Tooltip>
+    );
+  }
+
   return (
     <>
-      {!project ? (
-        <Tooltip data-testid="deploy-model-tooltip" content="To deploy a model, select a project.">
-          {deployButton}
-        </Tooltip>
-      ) : (
-        deployButton
-      )}
-      {project && (
-        <>
-          <ManageInferenceServiceModal
-            isOpen={platformSelected === ServingRuntimePlatform.MULTI}
-            projectContext={{
-              currentProject: project,
-              dataConnections,
-            }}
-            onClose={(submit: boolean) => {
-              onSubmit(submit);
-            }}
-          />
-          <ManageKServeModal
-            isOpen={platformSelected === ServingRuntimePlatform.SINGLE}
-            projectContext={{
-              currentProject: project,
-              dataConnections,
-            }}
-            servingRuntimeTemplates={templatesEnabled.filter((template) =>
-              getTemplateEnabledForPlatform(template, ServingRuntimePlatform.SINGLE),
-            )}
-            onClose={(submit: boolean) => {
-              onSubmit(submit);
-            }}
-          />
-        </>
-      )}
+      {deployButton}
+      {platformSelected === ServingRuntimePlatform.MULTI ? (
+        <ManageInferenceServiceModal
+          projectContext={{
+            currentProject: project,
+            dataConnections,
+          }}
+          onClose={(submit: boolean) => {
+            onSubmit(submit);
+          }}
+        />
+      ) : null}
+      {platformSelected === ServingRuntimePlatform.SINGLE ? (
+        <ManageKServeModal
+          projectContext={{
+            currentProject: project,
+            dataConnections,
+          }}
+          servingRuntimeTemplates={templatesEnabled.filter((template) =>
+            getTemplateEnabledForPlatform(template, ServingRuntimePlatform.SINGLE),
+          )}
+          onClose={(submit: boolean) => {
+            onSubmit(submit);
+          }}
+        />
+      ) : null}
     </>
   );
 };