From 88232f034a2efe3c5f2b7aaed571d11d506f1b0d Mon Sep 17 00:00:00 2001
From: gitdallas <5322142+gitdallas@users.noreply.github.com>
Date: Tue, 7 May 2024 15:29:57 -0500
Subject: [PATCH] feat(mr): routes etc and empty state for registered
 deployments

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
---
 .../modelRegistry/ModelRegistryRoutes.tsx     |  9 +++
 .../screens/EmptyModelRegistryState.tsx       | 40 ++++++------
 .../ModelVersionDetailsTabs.tsx               | 62 ++++++++++---------
 .../ModelVersionRegisteredDeploymentsView.tsx | 22 +++++++
 4 files changed, 86 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx

diff --git a/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx b/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx
index 1efe05a190..76c1439944 100644
--- a/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx
+++ b/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx
@@ -36,6 +36,15 @@ 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="." />} />
diff --git a/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx b/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx
index 3b62e2312e..2190f60bc8 100644
--- a/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx
+++ b/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>
 );
diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx
index 232095917b..1313003b47 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx
+++ b/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,34 +15,38 @@ type ModelVersionDetailTabsProps = {
 const ModelVersionDetailsTabs: React.FC<ModelVersionDetailTabsProps> = ({
   tab,
   modelVersion: mv,
-}) => (
-  <Tabs
-    activeKey={tab}
-    aria-label="Model versions details page tabs"
-    role="region"
-    data-testid="model-versions-details-page-tabs"
-  >
-    <Tab
-      eventKey={ModelVersionDetailsTab.DETAILS}
-      title={<TabTitleText>{ModelVersionDetailsTabTitle.DETAILS}</TabTitleText>}
-      aria-label="Model versions details tab"
-      data-testid="model-versions-details-tab"
+}) => {
+  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' })}
     >
-      <PageSection isFilled variant="light" data-testid="model-versions-details-tab-content">
-        <ModelVersionDetailsView modelVersion={mv} />
-      </PageSection>
-    </Tab>
-    <Tab
-      eventKey={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
-      title={<TabTitleText>{ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}</TabTitleText>}
-      aria-label="Registered deployments tab"
-      data-testid="registered-deployments-tab"
-    >
-      <PageSection isFilled variant="light" data-testid="registered-deployments-tab-content">
-        {/* TODO: Fill Model Details Page Component here */}
-      </PageSection>
-    </Tab>
-  </Tabs>
-);
+      <Tab
+        eventKey={ModelVersionDetailsTab.DETAILS}
+        title={<TabTitleText>{ModelVersionDetailsTabTitle.DETAILS}</TabTitleText>}
+        aria-label="Model versions details tab"
+        data-testid="model-versions-details-tab"
+      >
+        <PageSection isFilled variant="light" data-testid="model-versions-details-tab-content">
+          <ModelVersionDetailsView modelVersion={mv} />
+        </PageSection>
+      </Tab>
+      <Tab
+        eventKey={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
+        title={<TabTitleText>{ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}</TabTitleText>}
+        aria-label="Registered deployments tab"
+        data-testid="registered-deployments-tab"
+      >
+        <PageSection isFilled variant="light" data-testid="registered-deployments-tab-content">
+          <ModelVersionRegisteredDeploymentsView modelVersion={mv} />
+        </PageSection>
+      </Tab>
+    </Tabs>
+  );
+};
 
 export default ModelVersionDetailsTabs;
diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx
new file mode 100644
index 0000000000..248519ebce
--- /dev/null
+++ b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ModelVersion } from '~/concepts/modelRegistry/types';
+import EmptyModelRegistryState from '~/pages/modelRegistry/screens/EmptyModelRegistryState';
+
+type ModelVersionRegisteredDeploymentsViewProps = {
+  modelVersion: ModelVersion;
+};
+
+const ModelVersionRegisteredDeploymentsView: React.FC<
+  ModelVersionRegisteredDeploymentsViewProps
+> = ({ modelVersion: mv }) => {
+  // eslint-disable-next-line no-console
+  console.log({ mv });
+  //TODO: implement component
+  return (
+    <EmptyModelRegistryState
+      title="No registered deployments"
+      description="You can deploy this version using Actions dropdown in the header"
+    />
+  );
+};
+export default ModelVersionRegisteredDeploymentsView;