feat(mr): routes etc and empty state for registered deployments

Signed-off-by: gitdallas <[email protected]>

frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx

@@ -36,6 +36,10 @@ const ModelRegistryRoutes: React.FC = () => (
               path={ModelVersionDetailsTab.DETAILS}
               element={<ModelVersionsDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />}
             />
+            <Route
+              path={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
+              element={<ModelVersionsDetails tab={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS} empty={false} />}
+            />
             <Route path="*" element={<Navigate to="." />} />
           </Route>
           <Route path="*" element={<Navigate to="." />} />

frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx

@@ -15,8 +15,8 @@ import * as React from 'react';
 type EmptyModelRegistryStateType = {
   title: string;
   description: string;
-  primaryActionText: string;
-  primaryActionOnClick: () => void;
+  primaryActionText?: string;
+  primaryActionOnClick?: () => void;
   secondaryActionText?: string;
   secondaryActionOnClick?: () => void;
 };
@@ -29,28 +29,30 @@ const EmptyModelRegistryState: React.FC<EmptyModelRegistryStateType> = ({
   primaryActionOnClick,
   secondaryActionOnClick,
 }) => (
-  <EmptyState variant={EmptyStateVariant.sm} data-testid="empty-model-registry">
+  <EmptyState variant={EmptyStateVariant.lg} data-testid="empty-model-registry">
     <EmptyStateHeader titleText={title} icon={<EmptyStateIcon icon={PlusCircleIcon} />} />
     <EmptyStateBody>{description}</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>
-        <Button
-          data-testid="empty-model-registry-primary-action"
-          variant={ButtonVariant.primary}
-          onClick={primaryActionOnClick}
-        >
-          {primaryActionText}
-        </Button>
+        {primaryActionText && (
+          <Button
+            data-testid="empty-model-registry-primary-action"
+            variant={ButtonVariant.primary}
+            onClick={primaryActionOnClick}
+          >
+            {primaryActionText}
+          </Button>
+        )}
+        {secondaryActionText && (
+          <Button
+            data-testid="empty-model-registry-secondary-action"
+            variant="link"
+            onClick={secondaryActionOnClick}
+          >
+            {secondaryActionText}
+          </Button>
+        )}
       </EmptyStateActions>
-      {secondaryActionText && (
-        <Button
-          data-testid="empty-model-registry-secondary-action"
-          variant="link"
-          onClick={secondaryActionOnClick}
-        >
-          {secondaryActionText}
-        </Button>
-      )}
     </EmptyStateFooter>
   </EmptyState>
 );

frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { PageSection, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import '~/pages/pipelines/global/runs/GlobalPipelineRunsTabs.scss';
 import { ModelVersion } from '~/concepts/modelRegistry/types';
 import { ModelVersionDetailsTabTitle, ModelVersionDetailsTab } from './const';
 import ModelVersionDetailsView from './ModelVersionDetailsView';
+import ModelVersionRegisteredDeploymentsView from './ModelVersionRegisteredDeploymentsView';
 
 type ModelVersionDetailTabsProps = {
   tab: ModelVersionDetailsTab;
@@ -13,12 +15,14 @@ type ModelVersionDetailTabsProps = {
 const ModelVersionDetailsTabs: React.FC<ModelVersionDetailTabsProps> = ({
   tab,
   modelVersion: mv,
-}) => (
-  <Tabs
+}) => {
+  const navigate = useNavigate();
+  return (<Tabs
     activeKey={tab}
     aria-label="Model versions details page tabs"
     role="region"
     data-testid="model-versions-details-page-tabs"
+    onSelect={(_event, eventKey) => navigate(`../${eventKey}`, { relative: 'path' })}
   >
     <Tab
       eventKey={ModelVersionDetailsTab.DETAILS}
@@ -37,10 +41,10 @@ const ModelVersionDetailsTabs: React.FC<ModelVersionDetailTabsProps> = ({
       data-testid="registered-deployments-tab"
     >
       <PageSection isFilled variant="light" data-testid="registered-deployments-tab-content">
-        {/* TODO: Fill Model Details Page Component here */}
+        <ModelVersionRegisteredDeploymentsView modelVersion={mv} />
       </PageSection>
     </Tab>
-  </Tabs>
-);
+  </Tabs>);
+};
 
 export default ModelVersionDetailsTabs;

frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ModelVersion } from '~/concepts/modelRegistry/types';
+import useModelArtifactsByVersionId from '~/concepts/modelRegistry/apiHooks/useModelArtifactsByVersionId';
+import EmptyModelRegistryState from '../EmptyModelRegistryState';
+
+type ModelVersionRegisteredDeploymentsViewProps = {
+  modelVersion: ModelVersion;
+};
+
+const ModelVersionRegisteredDeploymentsView: React.FC<ModelVersionRegisteredDeploymentsViewProps> = ({ modelVersion: mv }) => {
+  const [modelArtifact] = useModelArtifactsByVersionId(mv.id);
+  console.log(modelArtifact);
+  return (
+    <EmptyModelRegistryState
+      title="No registered deployments"
+      description={`You can deploy this version using Actions dropdown in the header`}
+    />
+  );
+};
+export default ModelVersionRegisteredDeploymentsView;