Initial Model Catalog skeleton (kubeflow#1373)

* initial Model Catalog skeleton

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* signed

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* Hide MC as stanalone

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* lint

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* final version

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* added tests

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* removed unit tests, added todo and util

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* updated the tests

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* added removed TODO

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

* fix new imports

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

---------

Signed-off-by: Yulia Krimerman <juliapiterova@hotmail.com>

Author: YuliaKrimerman

clients/ui/frontend/src/__mocks__/mockModelArtifactList.ts

@@ -1,8 +1,9 @@
 /* eslint-disable camelcase */
 import { ModelArtifactList } from '~/app/types';
+import { mockModelArtifact } from './mockModelArtifact';
 
 export const mockModelArtifactList = ({
-  items = [],
+  items = [mockModelArtifact()],
 }: Partial<ModelArtifactList>): ModelArtifactList => ({
   items,
   nextPageToken: '',

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalog.ts

@@ -0,0 +1,63 @@
+class ModelCatalog {
+  visit() {
+    cy.visit('/model-catalog');
+  }
+
+  findModelCatalogCards() {
+    return cy.findAllByTestId('model-catalog-card');
+  }
+
+  findFirstModelCatalogCard() {
+    return this.findModelCatalogCards().first().should('be.visible');
+  }
+
+  findModelCatalogDetailLink() {
+    return cy.findByTestId('model-catalog-detail-link');
+  }
+
+  findModelCatalogDescription() {
+    return cy.findByTestId('model-catalog-card-description');
+  }
+
+  findSourceLabel() {
+    return cy.get('.pf-v6-c-label');
+  }
+
+  findModelLogo() {
+    return cy.get('img[alt="model logo"]');
+  }
+
+  findVersionIcon() {
+    return cy.get('.pf-v6-c-icon');
+  }
+
+  findFrameworkLabel() {
+    return cy.contains('PyTorch');
+  }
+
+  findTaskLabel() {
+    return cy.contains('text-generation');
+  }
+
+  findLicenseLabel() {
+    return cy.contains('apache-2.0');
+  }
+
+  findLabBaseLabel() {
+    return cy.contains('lab-base');
+  }
+
+  findLoadingState() {
+    return cy.contains('Loading model catalog...');
+  }
+
+  findPageTitle() {
+    return cy.contains('Model Catalog');
+  }
+
+  findPageDescription() {
+    return cy.contains('Discover models that are available for your organization');
+  }
+}
+
+export const modelCatalog = new ModelCatalog();

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalog.cy.ts

@@ -0,0 +1,18 @@
+import { modelCatalog } from '~/__tests__/cypress/cypress/pages/modelCatalog';
+
+describe('Model Catalog Page', () => {
+  beforeEach(() => {
+    cy.visit('/model-catalog');
+  });
+
+  it('should display loading state initially', () => {
+    modelCatalog.findLoadingState().should('be.visible');
+  });
+
+  it('should display model catalog content when data is loaded', () => {
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findPageTitle().should('be.visible');
+    modelCatalog.findPageDescription().should('be.visible');
+    modelCatalog.findModelCatalogCards().should('have.length.at.least', 1);
+  });
+});

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogCard.cy.ts

@@ -0,0 +1,63 @@
+import { modelCatalog } from '~/__tests__/cypress/cypress/pages/modelCatalog';
+
+describe('ModelCatalogCard Component', () => {
+  beforeEach(() => {
+    cy.visit('/model-catalog');
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogCards().should('have.length.at.least', 1);
+  });
+
+  describe('Card Layout and Content', () => {
+    it('should render all cards from the mock data', () => {
+      modelCatalog.findModelCatalogCards().should('have.length.at.least', 1);
+    });
+
+    it('should display correct source labels', () => {
+      modelCatalog.findFirstModelCatalogCard().within(() => {
+        modelCatalog.findSourceLabel().should('contain.text', 'Red Hat');
+      });
+    });
+
+    it('should handle cards with logos', () => {
+      modelCatalog.findFirstModelCatalogCard().within(() => {
+        modelCatalog
+          .findModelLogo()
+          .should('exist')
+          .and('have.attr', 'src')
+          .and('include', 'data:image/svg+xml;base64');
+      });
+    });
+  });
+
+  describe('Version Tag Display', () => {
+    it('should extract and display version tags correctly', () => {
+      modelCatalog.findFirstModelCatalogCard().within(() => {
+        modelCatalog.findVersionIcon().should('exist');
+        cy.contains('1.4.0').should('exist');
+      });
+    });
+  });
+
+  describe('Description Handling', () => {
+    it('should display model descriptions', () => {
+      modelCatalog.findFirstModelCatalogCard().within(() => {
+        modelCatalog
+          .findModelCatalogDescription()
+          .should('contain.text', 'Base model for customizing and fine-tuning');
+      });
+    });
+  });
+
+  describe('Navigation and Interaction', () => {
+    it('should show all model metadata correctly', () => {
+      modelCatalog.findFirstModelCatalogCard().within(() => {
+        modelCatalog.findModelCatalogDetailLink().should('contain.text', 'granite-7b-starter');
+
+        modelCatalog.findFrameworkLabel().should('exist');
+        modelCatalog.findTaskLabel().should('exist');
+        modelCatalog.findLicenseLabel().should('exist');
+        modelCatalog.findLabBaseLabel().should('exist');
+      });
+    });
+  });
+});

clients/ui/frontend/src/app/AppRoutes.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { NotFound } from 'mod-arch-shared';
+import { useModularArchContext, DeploymentMode } from 'mod-arch-core';
 import { NavDataItem } from '~/app/standalone/types';
-import ModelRegistrySettingsRoutes from '~/app/pages/settings/ModelRegistrySettingsRoutes';
-import ModelRegistryRoutes from '~/app/pages/modelRegistry/ModelRegistryRoutes';
-import useUser from '~/app/hooks/useUser';
+import ModelRegistrySettingsRoutes from './pages/settings/ModelRegistrySettingsRoutes';
+import ModelRegistryRoutes from './pages/modelRegistry/ModelRegistryRoutes';
+import ModelCatalogPage from './pages/modelCatalog/screens/ModelCatalogPage';
+import { ModelCatalogContextProvider } from './context/modelCatalog/ModelCatalogContext';
+import useUser from './hooks/useUser';
 
 export const useAdminSettings = (): NavDataItem[] => {
   const { clusterAdmin } = useUser();
@@ -21,23 +24,53 @@ export const useAdminSettings = (): NavDataItem[] => {
   ];
 };
 
-export const useNavData = (): NavDataItem[] => [
-  {
-    label: 'Model Registry',
-    path: '/model-registry',
-  },
-  ...useAdminSettings(),
-];
+export const useNavData = (): NavDataItem[] => {
+  const { config } = useModularArchContext();
+  const { deploymentMode } = config;
+  const isStandalone = deploymentMode === DeploymentMode.Standalone;
+  const isFederated = deploymentMode === DeploymentMode.Federated;
+
+  const baseNavItems = [
+    {
+      label: 'Model Registry',
+      path: '/model-registry',
+    },
+  ];
+
+  // Only show Model Catalog in Standalone or Federated mode
+  if (isStandalone || isFederated) {
+    baseNavItems.push({
+      label: 'Model Catalog',
+      path: '/model-catalog',
+    });
+  }
+
+  return [...baseNavItems, ...useAdminSettings()];
+};
 
 const AppRoutes: React.FC = () => {
   const { clusterAdmin } = useUser();
+  const { config } = useModularArchContext();
+  const { deploymentMode } = config;
+  const isStandalone = deploymentMode === DeploymentMode.Standalone;
+  const isFederated = deploymentMode === DeploymentMode.Federated;
 
   return (
     <Routes>
       <Route path="/" element={<Navigate to="/model-registry" replace />} />
       <Route path="/model-registry/*" element={<ModelRegistryRoutes />} />
+      {(isStandalone || isFederated) && (
+        <Route
+          path="/model-catalog"
+          element={
+            <ModelCatalogContextProvider>
+              <ModelCatalogPage />
+            </ModelCatalogContextProvider>
+          }
+        />
+      )}
       <Route path="*" element={<NotFound />} />
-      {/* TODO: [Conditional render] Follow up add testing and conditional rendering when in standalone mode*/}
+      {/* TODO: [Conditional render] Follow up add testing and conditional rendering when in standalone mode */}
       {clusterAdmin && (
         <Route path="/model-registry-settings/*" element={<ModelRegistrySettingsRoutes />} />
       )}

clients/ui/frontend/src/app/context/modelCatalog/ModelCatalogContext.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { ModelCatalogContextType, ModelCatalogSource } from '~/app/modelCatalogTypes';
+
+// Mock data for initial development
+const mockModelCatalogSources: ModelCatalogSource[] = [
+  {
+    name: 'redhat',
+    displayName: 'Red Hat',
+    description: 'Models from Red Hat',
+    provider: 'Red Hat',
+    url: 'https://registry.redhat.io',
+    models: [
+      {
+        id: 'granite-7b-starter',
+        name: 'granite-7b-starter',
+        displayName: 'Granite 7B Starter',
+        description: 'Base model for customizing and fine-tuning',
+        provider: 'Red Hat',
+        url: 'oci://registry.redhat.io/rhelai1/modelcar-granite-7b-starter:1.4.0',
+        logo: 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgMTQ1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZEhhdC1Mb2dvLUhhdC1Db2xvcjwvdGl0bGU+PHBhdGggZD0iTTE1Ny43Nyw2Mi42MWExNCwxNCwwLDAsMSwuMzEsMy40MmMwLDE0Ljg4LTE4LjEsMTcuNDYtMzAuNjEsMTcuNDZDNzguODMsODMuNDksNDIuNTMsNTMuMjYsNDIuNTMsNDRhNi40Myw2LjQzLDAsMCwxLC4yMi0xLjk0bC0zLjY2LDkuMDZhMTguNDUsMTguNDUsMCwwLDAtMS41MSw3LjMzYzAsMTguMTEsNDEsNDUuNDgsODcuNzQsNDUuNDgsMjAuNjksMCwzNi40My03Ljc2LDM2LjQzLTIxLjc3LDAtMS4wOCwwLTEuOTQtMS43My0xMC4xM1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjcuNDcsODMuNDljMTIuNTEsMCwzMC42MS0yLjU4LDMwLjYxLTE3LjQ2YTE0LDE0LDAsMCwwLS4zMS0zLjQybC03LjQ1LTMyLjM2Yy0xLjcyLTcuMTItMy4yMy0xMC4zNS0xNS43My0xNi42QzEyNC44OSw4LjY5LDEwMy43Ni41LDk3LjUxLjUsOTEuNjkuNSw5MCw4LDgzLjA2LDhjLTYuNjgsMC0xMS42NC01LjYtMTcuODktNS42LTYsMC05LjkxLDQuMDktMTIuOTMsMTIuNSwwLDAtOC40MSwyMy43Mi05LjQ5LDI3LjE2QTYuNDMsNi40MywwLDAsMCw0Mi41Myw0NGMwLDkuMjIsMzYuMywzOS40NSw4NC45NCwzOS40NU0xNjAsNzIuMDdjMS43Myw4LjE5LDEuNzMsOS4wNSwxLjczLDEwLjEzLDAsMTQtMTUuNzQsMjEuNzctMzYuNDMsMjEuNzdDNzguNTQsMTA0LDM3LjU4LDc2LjYsMzcuNTgsNTguNDlhMTguNDUsMTguNDUsMCwwLDEsMS41MS03LjMzQzIyLjI3LDUyLC41LDU1LC41LDc0LjIyYzAsMzEuNDgsNzQuNTksNzAuMjgsMTMzLjY1LDcwLjI4LDQ1LjI4LDAsNTYuNy0yMC40OCw1Ni43LTM2LjY1LDAtMTIuNzItMTEtMjcuMTYtMzAuODMtMzUuNzgiLz48L3N2Zz4=',
+        tags: ['1.4.0', 'lab-base'],
+        framework: 'PyTorch',
+        task: 'text-generation',
+        license: 'apache-2.0',
+        metrics: {
+          parameters: '7B',
+        },
+        createdAt: '2025-04-14T20:12:31Z',
+        updatedAt: '2025-04-14T20:12:31Z',
+      },
+      {
+        id: 'granite-7b-redhat-lab',
+        name: 'granite-7b-redhat-lab',
+        displayName: 'Granite 7B Red Hat LAB',
+        description: 'Granite model for inference serving',
+        provider: 'Red Hat',
+        url: 'oci://registry.redhat.io/rhelai1/modelcar-granite-7b-redhat-lab:1.4.0',
+        logo: 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgMTQ1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZEhhdC1Mb2dvLUhhdC1Db2xvcjwvdGl0bGU+PHBhdGggZD0iTTE1Ny43Nyw2Mi42MWExNCwxNCwwLDAsMSwuMzEsMy40MmMwLDE0Ljg4LTE4LjEsMTcuNDYtMzAuNjEsMTcuNDZDNzguODMsODMuNDksNDIuNTMsNTMuMjYsNDIuNTMsNDRhNi40Myw2LjQzLDAsMCwxLC4yMi0xLjk0bC0zLjY2LDkuMDZhMTguNDUsMTguNDUsMCwwLDAtMS41MSw3LjMzYzAsMTguMTEsNDEsNDUuNDgsODcuNzQsNDUuNDgsMjAuNjksMCwzNi40My03Ljc2LDM2LjQzLTIxLjc3LDAtMS4wOCwwLTEuOTQtMS43My0xMC4xM1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjcuNDcsODMuNDljMTIuNTEsMCwzMC42MS0yLjU4LDMwLjYxLTE3LjQ2YTE0LDE0LDAsMCwwLS4zMS0zLjQybC03LjQ1LTMyLjM2Yy0xLjcyLTcuMTItMy4yMy0xMC4zNS0xNS43My0xNi42QzEyNC44OSw4LjY5LDEwMy43Ni41LDk3LjUxLjUsOTEuNjkuNSw5MCw4LDgzLjA2LDhjLTYuNjgsMC0xMS42NC01LjYtMTcuODktNS42LTYsMC05LjkxLDQuMDktMTIuOTMsMTIuNSwwLDAtOC40MSwyMy43Mi05LjQ5LDI3LjE2QTYuNDMsNi40MywwLDAsMCw0Mi41Myw0NGMwLDkuMjIsMzYuMywzOS40NSw4NC45NCwzOS40NU0xNjAsNzIuMDdjMS43Myw4LjE5LDEuNzMsOS4wNSwxLjczLDEwLjEzLDAsMTQtMTUuNzQsMjEuNzctMzYuNDMsMjEuNzdDNzguNTQsMTA0LDM3LjU4LDc2LjYsMzcuNTgsNTguNDlhMTguNDUsMTguNDUsMCwwLDEsMS41MS03LjMzQzIyLjI3LDUyLC41LDU1LC41LDc0LjIyYzAsMzEuNDgsNzQuNTksNzAuMjgsMTMzLjY1LDcwLjI4LDQ1LjI4LDAsNTYuNy0yMC40OCw1Ni43LTM2LjY1LDAtMTIuNzItMTEtMjcuMTYtMzAuODMtMzUuNzgiLz48L3N2Zz4=',
+        tags: ['1.4.0', 'text-generation'],
+        framework: 'PyTorch',
+        task: 'text-generation',
+        license: 'apache-2.0',
+        metrics: {
+          parameters: '7B',
+        },
+        createdAt: '2025-04-14T20:12:31Z',
+        updatedAt: '2025-04-14T20:12:31Z',
+      },
+      {
+        id: 'granite-8b-starter-v1',
+        name: 'granite-8b-starter-v1',
+        displayName: 'Granite 8B Starter V1',
+        description: 'Base model for customizing and fine-tuning',
+        provider: 'Red Hat',
+        url: 'oci://registry.redhat.io/rhelai1/modelcar-granite-8b-starter-v1:1.4.0',
+        logo: 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIgMTQ1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZEhhdC1Mb2dvLUhhdC1Db2xvcjwvdGl0bGU+PHBhdGggZD0iTTE1Ny43Nyw2Mi42MWExNCwxNCwwLDAsMSwuMzEsMy40MmMwLDE0Ljg4LTE4LjEsMTcuNDYtMzAuNjEsMTcuNDZDNzguODMsODMuNDksNDIuNTMsNTMuMjYsNDIuNTMsNDRhNi40Myw2LjQzLDAsMCwxLC4yMi0xLjk0bC0zLjY2LDkuMDZhMTguNDUsMTguNDUsMCwwLDAtMS41MSw3LjMzYzAsMTguMTEsNDEsNDUuNDgsODcuNzQsNDUuNDgsMjAuNjksMCwzNi40My03Ljc2LDM2LjQzLTIxLjc3LDAtMS4wOCwwLTEuOTQtMS43My0xMC4xM1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjcuNDcsODMuNDljMTIuNTEsMCwzMC42MS0yLjU4LDMwLjYxLTE3LjQ2YTE0LDE0LDAsMCwwLS4zMS0zLjQybC03LjQ1LTMyLjM2Yy0xLjcyLTcuMTItMy4yMy0xMC4zNS0xNS43My0xNi42QzEyNC44OSw4LjY5LDEwMy43Ni41LDk3LjUxLjUsOTEuNjkuNSw5MCw4LDgzLjA2LDhjLTYuNjgsMC0xMS42NC01LjYtMTcuODktNS42LTYsMC05LjkxLDQuMDktMTIuOTMsMTIuNSwwLDAtOC40MSwyMy43Mi05LjQ5LDI3LjE2QTYuNDMsNi40MywwLDAsMCw0Mi41Myw0NGMwLDkuMjIsMzYuMywzOS40NSw4NC45NCwzOS40NU0xNjAsNzIuMDdjMS43Myw4LjE5LDEuNzMsOS4wNSwxLjczLDEwLjEzLDAsMTQtMTUuNzQsMjEuNzctMzYuNDMsMjEuNzdDNzguNTQsMTA0LDM3LjU4LDc2LjYsMzcuNTgsNTguNDlhMTguNDUsMTguNDUsMCwwLDEsMS41MS03LjMzQzIyLjI3LDUyLC41LDU1LC41LDc0LjIyYzAsMzEuNDgsNzQuNTksNzAuMjgsMTMzLjY1LDcwLjI4LDQ1LjI4LDAsNTYuNy0yMC40OCw1Ni43LTM2LjY1LDAtMTIuNzItMTEtMjcuMTYtMzAuODMtMzUuNzgiLz48L3N2Zz4=',
+        tags: ['1.4.0', 'lab-base'],
+        framework: 'PyTorch',
+        task: 'text-generation',
+        license: 'apache-2.0',
+        metrics: {
+          parameters: '8B',
+        },
+        createdAt: '2025-04-14T20:12:31Z',
+        updatedAt: '2025-04-14T20:12:31Z',
+      },
+    ],
+  },
+];
+
+export const ModelCatalogContext = React.createContext<ModelCatalogContextType>({
+  sources: [],
+  loading: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  refreshSources: async () => {},
+});
+export const ModelCatalogContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [sources, setSources] = React.useState(mockModelCatalogSources);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error>();
+
+  const refreshSources = React.useCallback(async () => {
+    setLoading(true);
+    try {
+      // TODO: Replace with actual API call
+      // eslint-disable-next-line no-promise-executor-return
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API delay
+      setSources(mockModelCatalogSources);
+      setError(undefined);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error('Failed to fetch catalog sources'));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    refreshSources();
+  }, [refreshSources]);
+
+  const value = React.useMemo(
+    () => ({
+      sources,
+      loading,
+      error,
+      refreshSources,
+    }),
+    [sources, loading, error, refreshSources],
+  );
+
+  return <ModelCatalogContext.Provider value={value}>{children}</ModelCatalogContext.Provider>;
+};

clients/ui/frontend/src/app/hooks/modelCatalog/useModelCatalogSources.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ModelCatalogContext } from '~/app/context/modelCatalog/ModelCatalogContext';
+import { ModelCatalogContextType } from '~/app/modelCatalogTypes';
+// TODO: This is a placeholder for the model catalog sources hook once API are implemented and BFF endpoints are there
+export const useModelCatalogSources = (): ModelCatalogContextType => {
+  const context = React.useContext(ModelCatalogContext);
+
+  return context;
+};

clients/ui/frontend/src/app/modelCatalogTypes.ts

@@ -0,0 +1,34 @@
+export type ModelCatalogSource = {
+  name: string;
+  displayName: string;
+  description?: string;
+  provider?: string;
+  url?: string;
+  models?: ModelCatalogItem[];
+};
+
+export type ModelCatalogItem = {
+  id: string;
+  name: string;
+  displayName: string;
+  description?: string;
+  provider?: string;
+  url?: string;
+  logo?: string;
+  tags?: string[];
+  framework?: string;
+  task?: string;
+  license?: string;
+  metrics?: {
+    [key: string]: string | number;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type ModelCatalogContextType = {
+  sources: ModelCatalogSource[];
+  loading: boolean;
+  error?: Error;
+  refreshSources: () => Promise<void>;
+};