diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.tsx index f74f4b69b1..75ee549384 100644 --- a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.tsx +++ b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsHeaderActions.tsx @@ -70,45 +70,47 @@ const ModelVersionsDetailsHeaderActions: React.FC - { - refresh(); - navigate( - modelVersionDeploymentsUrl( - mv.id, - mv.registeredModelId, - preferredModelRegistry?.metadata.name, - ), - ); - }} - onCancel={() => setIsDeployModalOpen(false)} - isOpen={isDeployModalOpen} - modelVersion={mv} - /> - setIsArchiveModalOpen(false)} - onSubmit={() => - apiState.api - .patchModelVersion( - {}, - { - state: ModelState.ARCHIVED, - }, - mv.id, - ) - .then(() => - navigate( - modelVersionArchiveDetailsUrl( - mv.id, - mv.registeredModelId, - preferredModelRegistry?.metadata.name, - ), + {isDeployModalOpen ? ( + { + refresh(); + navigate( + modelVersionDeploymentsUrl( + mv.id, + mv.registeredModelId, + preferredModelRegistry?.metadata.name, ), - ) - } - isOpen={isArchiveModalOpen} - modelVersionName={mv.name} - /> + ); + }} + onCancel={() => setIsDeployModalOpen(false)} + modelVersion={mv} + /> + ) : null} + {isArchiveModalOpen ? ( + 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 index 3bc6ccb344..654d062283 100644 --- 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 = ({ - setIsArchiveModalOpen(false)} - onSubmit={() => - apiState.api - .patchRegisteredModel( - {}, - { - state: ModelState.ARCHIVED, - }, - rm.id, - ) - .then(() => navigate(registeredModelsUrl(preferredModelRegistry?.metadata.name))) - } - isOpen={isArchiveModalOpen} - registeredModelName={rm.name} - /> + {isArchiveModalOpen ? ( + 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 index 88e7fe3a11..33e7dca3ca 100644 --- 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 = ({ {!isArchiveModel && ( - setIsArchiveModalOpen(false)} - onSubmit={() => - apiState.api - .patchModelVersion( - {}, - { - state: ModelState.ARCHIVED, - }, - mv.id, - ) - .then(refresh) - } - isOpen={isArchiveModalOpen} - modelVersionName={mv.name} - /> - - navigate( - modelVersionDeploymentsUrl( - mv.id, - mv.registeredModelId, - preferredModelRegistry?.metadata.name, - ), - ) - } - onCancel={() => setIsDeployModalOpen(false)} - isOpen={isDeployModalOpen} - modelVersion={mv} - /> - setIsRestoreModalOpen(false)} - onSubmit={() => - apiState.api - .patchModelVersion( - {}, - { - state: ModelState.LIVE, - }, - mv.id, - ) - .then(() => - navigate( - modelVersionUrl( - mv.id, - mv.registeredModelId, - preferredModelRegistry?.metadata.name, - ), + {isArchiveModalOpen ? ( + setIsArchiveModalOpen(false)} + onSubmit={() => + apiState.api + .patchModelVersion( + {}, + { + state: ModelState.ARCHIVED, + }, + mv.id, + ) + .then(refresh) + } + modelVersionName={mv.name} + /> + ) : null} + {isDeployModalOpen ? ( + + navigate( + modelVersionDeploymentsUrl( + mv.id, + mv.registeredModelId, + preferredModelRegistry?.metadata.name, ), ) - } - isOpen={isRestoreModalOpen} - modelVersionName={mv.name} - /> + } + onCancel={() => setIsDeployModalOpen(false)} + modelVersion={mv} + /> + ) : null} + {isRestoreModalOpen ? ( + 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} )} diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx index 8fee6dde10..a4e65ab1a9 100644 --- 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 = /> )} - {mv !== null && ( + {mv !== null && isRestoreModalOpen ? ( setIsRestoreModalOpen(false)} onSubmit={() => @@ -125,10 +125,9 @@ const ModelVersionsArchiveDetails: React.FC = 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 index f9f65694f9..4c1b37dbe2 100644 --- 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(undefined); const [connection, setConnection] = React.useState(undefined); return ( - setAutofillModalOpen(false)} - onSubmit={(connection) => { - fillObjectStorageByConnection(connection); - setAutofillModalOpen(false); - }} - /> + {isAutofillModalOpen ? ( + 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 index 02f8e6d077..1abdd11026 100644 --- 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 = ({ - setIsArchiveModalOpen(false)} - onSubmit={() => - apiState.api - .patchRegisteredModel( - {}, - { - state: ModelState.ARCHIVED, - }, - rm.id, - ) - .then(refresh) - } - isOpen={isArchiveModalOpen} - registeredModelName={rm.name} - /> - 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 ? ( + setIsArchiveModalOpen(false)} + onSubmit={() => + apiState.api + .patchRegisteredModel( + {}, + { + state: ModelState.ARCHIVED, + }, + rm.id, + ) + .then(refresh) + } + registeredModelName={rm.name} + /> + ) : null} + {isRestoreModalOpen ? ( + setIsRestoreModalOpen(false)} + onSubmit={() => + apiState.api + .patchRegisteredModel( + {}, + { + state: ModelState.LIVE, + }, + rm.id, + ) + .then(() => + navigate(registeredModelUrl(rm.id, preferredModelRegistry?.metadata.name)), + ) + } + registeredModelName={rm.name} + /> + ) : null} ); diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx index 5b718dc1b9..c201d42da4 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx @@ -84,7 +84,7 @@ const RegisteredModelsArchiveDetails: React.FC - {rm !== null && ( + {rm !== null && isRestoreModalOpen ? ( setIsRestoreModalOpen(false)} onSubmit={() => @@ -100,10 +100,9 @@ const RegisteredModelsArchiveDetails: React.FC - )} + ) : null} ); }; diff --git a/frontend/src/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx b/frontend/src/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx index c1c2ca552c..262c15636d 100644 --- a/frontend/src/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx +++ b/frontend/src/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx @@ -6,14 +6,12 @@ import useNotification from '~/utilities/useNotification'; interface ArchiveModelVersionModalProps { onCancel: () => void; onSubmit: () => void; - isOpen: boolean; modelVersionName: string; } export const ArchiveModelVersionModal: React.FC = ({ onCancel, onSubmit, - isOpen, modelVersionName, }) => { const notification = useNotification(); @@ -45,7 +43,7 @@ export const ArchiveModelVersionModal: React.FC = return ( void; onSubmit: () => void; - isOpen: boolean; registeredModelName: string; } export const ArchiveRegisteredModelModal: React.FC = ({ onCancel, onSubmit, - isOpen, registeredModelName, }) => { const notification = useNotification(); @@ -45,7 +43,7 @@ export const ArchiveRegisteredModelModal: React.FC void; onSubmit?: () => void; } const DeployRegisteredModelModal: React.FC = ({ - isOpen, modelVersion, onCancel, onSubmit, @@ -63,82 +61,57 @@ const DeployRegisteredModelModal: React.FC = ({ [onCancel, onSubmit], ); - if (isOpen) { - if ( - (platform === ServingRuntimePlatform.MULTI && !projectDeployStatusLoaded) || - !selectedProject || - !platform - ) { - return ( - onClose(false)} - actions={[ - , - , - ]} - showClose - > -
- {deployInfoError ? ( - - {deployInfoError.message} - - ) : !deployInfoLoaded ? ( - - ) : ( - - - - )} - -
- ); - } - - if (platform === ServingRuntimePlatform.SINGLE) { - return ( - onClose(false)} + actions={[ + , + , + ]} + showClose + > +
+ {deployInfoError ? ( + + {deployInfoError.message} + + ) : !deployInfoLoaded ? ( + + ) : ( + + + )} - shouldFormHidden={!!error} - registeredModelDeployInfo={registeredModelDeployInfo} - projectContext={{ currentProject: selectedProject, dataConnections }} - projectSection={ - - } - /> - ); - } - // platform === ServingRuntimePlatform.MULTI + +
+ ); + } + + if (platform === ServingRuntimePlatform.SINGLE) { return ( - = ({ /> ); } - return null; + // platform === ServingRuntimePlatform.MULTI + return ( + + } + /> + ); }; export default DeployRegisteredModelModal; diff --git a/frontend/src/pages/modelRegistry/screens/components/ModelLabels.tsx b/frontend/src/pages/modelRegistry/screens/components/ModelLabels.tsx index 37e84e51de..4c8c56b9a1 100644 --- a/frontend/src/pages/modelRegistry/screens/components/ModelLabels.tsx +++ b/frontend/src/pages/modelRegistry/screens/components/ModelLabels.tsx @@ -69,11 +69,11 @@ const ModelLabels: React.FC = ({ name, customProperties }) => ); - const labelModal = ( + const labelModal = isLabelModalOpen ? ( setIsLabelModalOpen(false)} description={ @@ -104,7 +104,7 @@ const ModelLabels: React.FC = ({ name, customProperties }) => {labelsComponent(filteredLabels, '50ch')} - ); + ) : null; if (Object.keys(customProperties).length === 0) { return '-'; diff --git a/frontend/src/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx b/frontend/src/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx index dedfcc9270..cd81c2795c 100644 --- a/frontend/src/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx +++ b/frontend/src/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx @@ -6,14 +6,12 @@ import useNotification from '~/utilities/useNotification'; interface RestoreModelVersionModalProps { onCancel: () => void; onSubmit: () => void; - isOpen: boolean; modelVersionName: string; } export const RestoreModelVersionModal: React.FC = ({ onCancel, onSubmit, - isOpen, modelVersionName, }) => { const notification = useNotification(); @@ -42,7 +40,7 @@ export const RestoreModelVersionModal: React.FC = return ( void; onSubmit: () => void; - isOpen: boolean; registeredModelName: string; } export const RestoreRegisteredModelModal: React.FC = ({ onCancel, onSubmit, - isOpen, registeredModelName, }) => { const notification = useNotification(); @@ -42,7 +40,7 @@ export const RestoreRegisteredModelModal: React.FC