Model Version - View

frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx

@@ -5,6 +5,8 @@ import ModelRegistryCoreLoader from './ModelRegistryCoreLoader';
 import ModelRegistry from './screens/ModelRegistry';
 import { ModelVersionsTabs } from './screens/const';
 import ModelVersions from './screens/ModelVersions';
+import ModelVersionsDetails from './screens/ModelVersionDetails/ModelVersionDetails';
+import { ModelVersionDetailsTab } from './screens/ModelVersionDetails/const';
 
 const ModelRegistryRoutes: React.FC = () => (
   <ModelRegistrySelectorContextProvider>
@@ -28,6 +30,14 @@ const ModelRegistryRoutes: React.FC = () => (
             path={ModelVersionsTabs.DETAILS}
             element={<ModelVersions tab={ModelVersionsTabs.DETAILS} empty={false} />}
           />
+          <Route path="versions/:modelVersionId">
+            <Route index element={<Navigate to={ModelVersionDetailsTab.DETAILS} />} />
+            <Route
+              path={ModelVersionDetailsTab.DETAILS}
+              element={<ModelVersionsDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />}
+            />
+            <Route path="*" element={<Navigate to="." />} />
+          </Route>
           <Route path="*" element={<Navigate to="." />} />
         </Route>
         <Route path="*" element={<Navigate to="." />} />

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { Breadcrumb, BreadcrumbItem, Flex, FlexItem } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import useModelVersionById from '~/concepts/modelRegistry/apiHooks/useModelVersionById';
+import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext';
+import { modelVersionUrl } from '~/pages/modelRegistry/screens/routeUtils';
+import { ModelVersionDetailsTab } from './const';
+import ModelVersionsDetailsHeaderActions from './ModelVersionDetailsHeaderActions';
+import ModelVersionDetailsTabs from './ModelVersionDetailsTabs';
+import ModelVersionSelector from './ModelVersionSelector';
+
+type ModelVersionsDetailProps = {
+  tab: ModelVersionDetailsTab;
+} & Omit<
+  React.ComponentProps<typeof ApplicationsPage>,
+  'breadcrumb' | 'title' | 'description' | 'loadError' | 'loaded' | 'provideChildrenPadding'
+>;
+
+const ModelVersionsDetails: React.FC<ModelVersionsDetailProps> = ({ tab, ...pageProps }) => {
+  const navigate = useNavigate();
+
+  const { preferredModelRegistry } = React.useContext(ModelRegistrySelectorContext);
+
+  const { modelVersionId: mvId, registeredModelId: rmId } = useParams();
+  const [mv, mvLoaded, mvLoadError] = useModelVersionById(mvId);
+
+  return (
+    <ApplicationsPage
+      {...pageProps}
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbItem
+            render={() => (
+              <Link to="/modelRegistry">
+                Registered models - {preferredModelRegistry?.metadata.name}
+              </Link>
+            )}
+          />
+          <BreadcrumbItem
+            render={() => <Link to="/modelRegistry">{preferredModelRegistry?.metadata.name}</Link>}
+          />
+          <BreadcrumbItem isActive>{mv?.name}</BreadcrumbItem>
+        </Breadcrumb>
+      }
+      title={mv?.name}
+      headerAction={
+        mvLoaded &&
+        mv && (
+          <Flex
+            spaceItems={{ default: 'spaceItemsMd' }}
+            alignItems={{ default: 'alignItemsFlexStart' }}
+          >
+            <FlexItem style={{ width: '300px' }}>
+              <ModelVersionSelector
+                rmId={rmId}
+                selection={mv}
+                onSelect={(modelVersionId) =>
+                  navigate(
+                    modelVersionUrl(modelVersionId, rmId, preferredModelRegistry?.metadata.name),
+                  )
+                }
+              />
+            </FlexItem>
+            <FlexItem>
+              <ModelVersionsDetailsHeaderActions />
+            </FlexItem>
+          </Flex>
+        )
+      }
+      description={mv?.description}
+      loadError={mvLoadError}
+      loaded={mvLoaded}
+      provideChildrenPadding
+    >
+      {mv !== null && <ModelVersionDetailsTabs tab={tab} modelVersion={mv} />}
+    </ApplicationsPage>
+  );
+};
+
+export default ModelVersionsDetails;

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Dropdown, DropdownList, MenuToggle, DropdownItem } from '@patternfly/react-core';
+
+const ModelVersionsDetailsHeaderActions: React.FC = () => {
+  const [isOpenActionDropdown, setOpenActionDropdown] = React.useState(false);
+  const tooltipRef = React.useRef<HTMLButtonElement>(null);
+
+  return (
+    <Dropdown
+      isOpen={isOpenActionDropdown}
+      onSelect={() => setOpenActionDropdown(false)}
+      onOpenChange={(open) => setOpenActionDropdown(open)}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          variant="primary"
+          ref={toggleRef}
+          onClick={() => setOpenActionDropdown(!isOpenActionDropdown)}
+          isExpanded={isOpenActionDropdown}
+          aria-label="Model version details action toggle"
+          data-testid="model-version-details-action-button"
+        >
+          Actions
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem
+          id="deploy-button"
+          aria-label="Deploy version"
+          key="deploy-button"
+          onClick={() => undefined}
+          ref={tooltipRef}
+          isDisabled // This feature is currently disabled but will be enabled in a future PR post-summit release.
+        >
+          Deploy
+        </DropdownItem>
+        <DropdownItem
+          id="archive-version-button"
+          aria-label="Archive version"
+          key="archive-version-button"
+          onClick={() => undefined}
+          ref={tooltipRef}
+          isDisabled // This feature is currently disabled but will be enabled in a future PR post-summit release.
+        >
+          Archive version
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+export default ModelVersionsDetailsHeaderActions;

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+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';
+
+type ModelVersionDetailTabsProps = {
+  tab: ModelVersionDetailsTab;
+  modelVersion?: ModelVersion;
+};
+
+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 tab"
+      data-testid="model-versions-tab"
+    >
+      <PageSection isFilled variant="light" data-testid="model-versions-tab-content">
+        {/* <ModelVersionListView modelVersions={modelVersions} registeredModelName={rm?.name} /> */}
+      </PageSection>
+    </Tab>
+    <Tab
+      eventKey={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
+      title={<TabTitleText>{ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}</TabTitleText>}
+      aria-label="Model Details tab"
+      data-testid="model-details-tab"
+    >
+      <PageSection isFilled variant="light" data-testid="model-details-tab-content">
+        {/* TODO: Fill Model Details Page Component here */}
+      </PageSection>
+    </Tab>
+  </Tabs>
+);
+
+export default ModelVersionDetailsTabs;

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import {
+  HelperText,
+  HelperTextItem,
+  Menu,
+  MenuContainer,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  MenuSearch,
+  MenuSearchInput,
+  MenuToggle,
+  SearchInput,
+} from '@patternfly/react-core';
+import useModelVersionsByRegisteredModel from '~/concepts/modelRegistry/apiHooks/useModelVersionsByRegisteredModel';
+import { ModelVersion } from '~/concepts/modelRegistry/types';
+
+type ModelVersionSelectorProps = {
+  rmId?: string;
+  selection: ModelVersion;
+  onSelect: (versionId: string) => void;
+};
+
+const ModelVersionSelector: React.FC<ModelVersionSelectorProps> = ({
+  rmId,
+  selection,
+  onSelect,
+}) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const [input, setInput] = React.useState('');
+
+  const toggleRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+
+  const [modelVersions] = useModelVersionsByRegisteredModel(rmId);
+
+  const menu = (
+    <Menu
+      onSelect={(_e, itemId) => {
+        onSelect(itemId as string);
+        setOpen(false);
+      }}
+      data-id="model-version-selector-menu"
+      ref={menuRef}
+      isScrollable
+      activeItemId={selection.id}
+    >
+      <MenuContent>
+        <MenuSearch>
+          <MenuSearchInput>
+            <SearchInput
+              value={input}
+              aria-label="Filter menu items"
+              onChange={(_event, value) => setInput(value)}
+            />
+          </MenuSearchInput>
+          <HelperText style={{ paddingTop: '0.5rem' }}>
+            <HelperTextItem variant="indeterminate">
+              {`Type a name to search your ${modelVersions.size} versions.`}
+            </HelperTextItem>
+          </HelperText>
+        </MenuSearch>
+        <MenuList>
+          {modelVersions.items.map((mv, idx) => (
+            <MenuItem isSelected={mv.id === selection.id} itemId={mv.id} key={idx}>
+              {mv.name}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <MenuContainer
+      isOpen={isOpen}
+      toggleRef={toggleRef}
+      toggle={
+        <MenuToggle
+          id="model-version-selector"
+          ref={toggleRef}
+          onClick={() => setOpen(!isOpen)}
+          isExpanded={isOpen}
+          isFullWidth
+          data-testid="pipeline-version-toggle-button"
+        >
+          {selection.name}
+        </MenuToggle>
+      }
+      menu={menu}
+      menuRef={menuRef}
+      popperProps={{ maxWidth: 'trigger' }}
+      onOpenChange={(open) => setOpen(open)}
+    />
+  );
+};
+
+export default ModelVersionSelector;

frontend/src/pages/modelRegistry/screens/ModelVersionDetails/const.ts

@@ -0,0 +1,9 @@
+export enum ModelVersionDetailsTab {
+  DETAILS = 'details',
+  REGISTERED_DEPLOYMENTS = 'registered_deployments',
+}
+
+export enum ModelVersionDetailsTabTitle {
+  DETAILS = 'Details',
+  REGISTERED_DEPLOYMENTS = 'Registered deployments',
+}