Empty state registered models

frontend/src/__mocks__/mockModelRegistry.ts

@@ -0,0 +1,58 @@
+import { ModelRegistryKind } from '~/k8sTypes';
+
+type MockModelRegistryType = {
+  name?: string;
+  namespace?: string;
+};
+
+export const mockModelRegistry = ({
+  name = 'modelregistry-sample',
+  namespace = 'odh-model-registries',
+}: MockModelRegistryType): ModelRegistryKind => ({
+  apiVersion: 'modelregistry.opendatahub.io/v1alpha1',
+  kind: 'ModelRegistry',
+  metadata: {
+    name,
+    creationTimestamp: '2024-03-14T08:01:42Z',
+    namespace,
+  },
+  spec: {
+    grpc: {
+      port: 9090,
+    },
+    postgres: {
+      database: 'model-registry',
+      host: 'model-registry-db',
+      passwordSecret: {
+        key: 'database-password',
+        name: 'model-registry-db',
+      },
+      port: 5432,
+      skipDBCreation: false,
+      sslMode: 'disable',
+      username: 'mlmduser',
+    },
+    rest: {
+      port: 8080,
+      serviceRoute: 'disabled',
+    },
+  },
+  status: {
+    conditions: [
+      {
+        lastTransitionTime: '2024-03-22T09:30:02Z',
+        message: 'Deployment for custom resource modelregistry-sample was successfully created',
+        reason: 'CreatedDeployment',
+        status: 'True',
+        type: 'Progressing',
+      },
+      {
+        lastTransitionTime: '2024-03-14T08:11:26Z',
+        message: 'Deployment for custom resource modelregistry-sample is available',
+        reason: 'DeploymentAvailable',
+        status: 'True',
+        type: 'Available',
+      },
+    ],
+  },
+});

frontend/src/__mocks__/mockRegisteredModelsList.ts

@@ -1,9 +1,11 @@
 import { RegisteredModelList } from '~/concepts/modelRegistry/types';
 import { mockRegisteredModel } from './mockRegisteredModel';
 
-export const mockRegisteredModelList = (): RegisteredModelList => ({
+export const mockRegisteredModelList = ({
+  size = 2,
+}: Partial<RegisteredModelList>): RegisteredModelList => ({
   items: [mockRegisteredModel({ name: 'test-1' }), mockRegisteredModel({ name: 'test-2' })],
   nextPageToken: '',
   pageSize: 0,
-  size: 4,
+  size,
 });

frontend/src/__mocks__/mockRouteK8sResource.ts

@@ -140,3 +140,60 @@ export const mockRouteK8sResourceModelServing = ({
     ],
   },
 });
+
+export const mockRouteK8sResourceModelRegistry = ({
+  name = 'modelregistry-sample',
+  namespace = 'shared',
+}: MockResourceConfigType): RouteKind => ({
+  kind: 'Route',
+  apiVersion: 'route.openshift.io/v1',
+  metadata: {
+    name,
+    namespace,
+    uid: genUID('route'),
+    resourceVersion: '4789458',
+    creationTimestamp: '2023-02-14T21:44:13Z',
+    labels: {
+      app: name,
+      component: 'model-registry',
+    },
+    annotations: {
+      'openshift.io/host.generated': 'true',
+    },
+    managedFields: [],
+  },
+  spec: {
+    path: '',
+    host: `${name}-${namespace}.apps.user.com`,
+    to: {
+      kind: 'Service',
+      name,
+      weight: 100,
+    },
+    port: {
+      targetPort: 'oauth-proxy',
+    },
+    tls: {
+      termination: 'reencrypt',
+      insecureEdgeTerminationPolicy: 'Redirect',
+    },
+    wildcardPolicy: 'None',
+  },
+  status: {
+    ingress: [
+      {
+        host: `${name}-${namespace}.apps.user.com`,
+        routerName: 'default',
+        conditions: [
+          {
+            type: 'Admitted',
+            status: 'True',
+            lastTransitionTime: '2023-02-14T21:44:13Z',
+          },
+        ],
+        wildcardPolicy: 'None',
+        routerCanonicalHostname: 'router-default.apps.user.com',
+      },
+    ],
+  },
+});

frontend/src/__tests__/cypress/cypress/e2e/modelRegistry/ModelRegistry.cy.ts

@@ -1,20 +1,45 @@
 import { mockComponents } from '~/__mocks__/mockComponents';
 import { mockDashboardConfig } from '~/__mocks__/mockDashboardConfig';
+import { mockRegisteredModelList } from '~/__mocks__/mockRegisteredModelsList';
+import { mockModelRegistry } from '~/__mocks__/mockModelRegistry';
 import { modelRegistry } from '~/__tests__/cypress/cypress/pages/modelRegistry';
+import { mockK8sResourceList, mockRouteK8sResourceModelRegistry } from '~/__mocks__';
+import { ModelRegistryModel, RouteModel } from '~/__tests__/cypress/cypress/utils/models';
+import { MODEL_REGISTRY_API_VERSION } from '~/concepts/modelRegistry/const';
 
 type HandlersProps = {
   disableModelRegistryFeature?: boolean;
+  size?: number;
 };
 
-const initIntercepts = ({ disableModelRegistryFeature = false }: HandlersProps) => {
+const initIntercepts = ({ disableModelRegistryFeature = false, size = 4 }: HandlersProps) => {
   cy.interceptOdh(
     'GET /api/config',
     mockDashboardConfig({
       disableModelRegistry: disableModelRegistryFeature,
     }),
   );
   cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
+  cy.interceptK8sList(
+    ModelRegistryModel,
+    mockK8sResourceList([mockModelRegistry({}), mockModelRegistry({ name: 'test-registry' })]),
+  );
+
+  cy.interceptK8s(ModelRegistryModel, mockModelRegistry({}));
+
+  cy.interceptK8s(
+    RouteModel,
+    mockRouteK8sResourceModelRegistry({
+      name: 'modelregistry-sample-http',
+      namespace: 'odh-model-registries',
+    }),
+  );
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/${MODEL_REGISTRY_API_VERSION}/registered_models`,
+    mockRegisteredModelList({ size }),
+  );
 };
+
 describe('Model Registry Global', () => {
   it('Model Registry Disabled in the cluster', () => {
     initIntercepts({
@@ -35,4 +60,15 @@ describe('Model Registry Global', () => {
 
     modelRegistry.tabEnabled();
   });
+  it('No registered models in the selected Model Registry', () => {
+    initIntercepts({
+      disableModelRegistryFeature: false,
+      size: 0,
+    });
+
+    modelRegistry.visit();
+    modelRegistry.navigate();
+    modelRegistry.shouldtableToolbarExist();
+    modelRegistry.shouldregisteredModelsEmpty();
+  });
 });

frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts

@@ -6,8 +6,8 @@ class ModelRegistry {
     this.waitLanding();
   }
 
-  visit(modelRegistry?: string) {
-    cy.visit(`/modelRegistry${modelRegistry}`);
+  visit() {
+    cy.visit(`/modelRegistry`);
     this.wait();
   }
 
@@ -17,7 +17,7 @@ class ModelRegistry {
   }
 
   private wait() {
-    cy.findByTestId('app-page-title').contains('Model Registry');
+    cy.findByTestId('app-page-title').should('exist');
     cy.testA11y();
   }
 
@@ -30,6 +30,14 @@ class ModelRegistry {
     return this;
   }
 
+  shouldregisteredModelsEmpty() {
+    cy.findByTestId('no-registered-models').should('exist');
+  }
+
+  shouldtableToolbarExist() {
+    cy.findByTestId('registered-models-table-toolbar').should('exist');
+  }
+
   tabEnabled() {
     appChrome.findNavItem('Model Registry').should('exist');
     return this;

frontend/src/__tests__/cypress/cypress/support/commands/odh.ts

@@ -1,6 +1,7 @@
 import { K8sResourceListResult } from '@openshift/dynamic-plugin-sdk-utils';
 import type { GenericStaticResponse, RouteHandlerController } from 'cypress/types/net-stubbing';
 import { BaseMetricCreationResponse, BaseMetricListResponse } from '~/api';
+import { RegisteredModelList } from '~/concepts/modelRegistry/types';
 import type {
   DashboardConfigKind,
   DataScienceClusterInitializationKindStatus,
@@ -252,6 +253,11 @@ declare global {
         response: OdhResponse<BaseMetricCreationResponse>,
       ): Cypress.Chainable<null>;
 
+      interceptOdh(
+        type: `GET /api/service/modelregistry/modelregistry-sample/api/model_registry/v1alpha3/registered_models`,
+        response: OdhResponse<RegisteredModelList | undefined>,
+      ): Cypress.Chainable<null>;
+
       interceptOdh(
         type: 'DELETE /api/service/trustyai/:namespace/trustyai-service/metrics/dir/request',
         options: {

frontend/src/api/models/odh.ts

@@ -34,3 +34,10 @@ export const InferenceServiceModel: K8sModelCommon = {
   kind: 'InferenceService',
   plural: 'inferenceservices',
 };
+
+export const ModelRegistryModel: K8sModelCommon = {
+  apiVersion: 'v1alpha1',
+  apiGroup: 'modelregistry.opendatahub.io',
+  kind: 'ModelRegistry',
+  plural: 'modelregistries',
+};

frontend/src/k8sTypes.ts

@@ -1294,14 +1294,22 @@ export type ModelRegistryKind = K8sResourceCommon & {
       port: number;
       serviceRoute: string;
     };
-    mysql: {
+    mysql?: {
       database: string;
       host: string;
       port?: number;
     };
     postgres: {
       database: string;
       host?: string;
+      passwordSecret?: {
+        key: string;
+        name: string;
+      };
+      port: number;
+      skipDBCreation?: boolean;
+      sslMode?: string;
+      username?: string;
     };
   };
   status?: {

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

@@ -0,0 +1,28 @@
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+
+type EmptyRegisteredModelsType = {
+  preferredModelRegistry?: string;
+};
+const EmptyRegisteredModels: React.FC<EmptyRegisteredModelsType> = ({ preferredModelRegistry }) => (
+  <EmptyState variant={EmptyStateVariant.full} data-testid="no-registered-models">
+    <EmptyStateHeader
+      title="No models in selected registry"
+      icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+    />
+    <EmptyStateBody>
+      {preferredModelRegistry} has no models registered to it. Register a model to this
+      <br />
+      registry or select a different one.
+    </EmptyStateBody>
+  </EmptyState>
+);
+
+export default EmptyRegisteredModels;

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

@@ -2,19 +2,25 @@ import React from 'react';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { ProjectObjectType } from '~/concepts/design/utils';
 import TitleWithIcon from '~/concepts/design/TitleWithIcon';
-import ModelRegistryEmpty from '~/pages/modelRegistry/ModelRegistryEmpty';
 import { ModelRegistryContext } from '~/concepts/modelRegistry/context/ModelRegistryContext';
 import useRegisteredModels from '~/concepts/modelRegistry/apiHooks/useRegisteredModels';
 import RegisteredModelListView from './RegisteredModelListView';
+import EmptyRegisteredModels from './EmptyRegisteredModels';
+import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
 
 const ModelRegistry: React.FC = () => {
-  const { modelRegistries } = React.useContext(ModelRegistryContext);
+  const { preferredModelRegistry } = React.useContext(ModelRegistryContext);
   const [registeredModels, loaded, loadError] = useRegisteredModels();
 
   return (
     <ApplicationsPage
-      empty={modelRegistries.length === 0}
-      emptyStatePage={<ModelRegistryEmpty />}
+      empty={registeredModels.size === 0}
+      emptyStatePage={
+        <>
+          <RegisteredModelsTableToolbar />
+          <EmptyRegisteredModels preferredModelRegistry={preferredModelRegistry?.metadata.name} />
+        </>
+      }
       title={
         <TitleWithIcon title="Registered models" objectType={ProjectObjectType.registeredModels} />
       }