Set up model registry context and apiHooks

clients/ui/bff/README.md

@@ -57,27 +57,27 @@ make docker-build
 | URL Pattern                                                                        | Handler                 | Action                                       |
 |------------------------------------------------------------------------------------|-------------------------|----------------------------------------------|
 | GET /v1/healthcheck                                                                | HealthcheckHandler      | Show application information.                |
-| GET /v1/model-registry                                                             | ModelRegistryHandler    | Get all model registries,                    |
-| GET /v1/model-registry/{model_registry_id}/registered_models                       | RegisteredModelsHandler | Gets a list of all RegisteredModel entities. |
-| POST /v1/model-registry/{model_registry_id}/registered_models                      | RegisteredModelsHandler | Create a RegisteredModel entity.             |
-| GET /v1/model-registry/{model_registry_id}/registered_models/{registered_model_id} | RegisteredModelHandler  | Get a RegisteredModel entity by ID           |
+| GET /v1/model_registry                                                             | ModelRegistryHandler    | Get all model registries,                    |
+| GET /v1/model_registry/{model_registry_id}/registered_models                       | RegisteredModelsHandler | Gets a list of all RegisteredModel entities. |
+| POST /v1/model_registry/{model_registry_id}/registered_models                      | RegisteredModelsHandler | Create a RegisteredModel entity.             |
+| GET /v1/model_registry/{model_registry_id}/registered_models/{registered_model_id} | RegisteredModelHandler  | Get a RegisteredModel entity by ID           |
 
 ### Sample local calls
 ```
 # GET /v1/healthcheck
 curl -i localhost:4000/api/v1/healthcheck
 ```
 ```
-# GET /v1/model-registry 
-curl -i localhost:4000/api/v1/model-registry
+# GET /v1/model_registry 
+curl -i localhost:4000/api/v1/model_registry
 ```
 ```
-# GET /v1/model-registry/{model_registry_id}/registered_models
-curl -i localhost:4000/api/v1/model-registry/model-registry/registered_models
+# GET /v1/model_registry/{model_registry_id}/registered_models
+curl -i localhost:4000/api/v1/model_registry/model_registry_1/registered_models
 ```
 ```
-#POST /v1/model-registry/{model_registry_id}/registered_models
-curl -i -X POST "http://localhost:4000/api/v1/model-registry/model-registry/registered_models" \
+#POST /v1/model_registry/{model_registry_id}/registered_models
+curl -i -X POST "http://localhost:4000/api/v1/model_registry/model_registry/registered_models" \
      -H "Content-Type: application/json" \
      -d '{
   "customProperties": {
@@ -94,6 +94,6 @@ curl -i -X POST "http://localhost:4000/api/v1/model-registry/model-registry/regi
 }'
 ```
 ```
-# GET /v1/model-registry/{model_registry_id}/registered_models/{registered_model_id}
-curl -i localhost:4000/api/v1/model-registry/model-registry/registered_models/1
+# GET /v1/model_registry/{model_registry_id}/registered_models/{registered_model_id}
+curl -i localhost:4000/api/v1/model_registry/model_registry/registered_models/1
 ```

clients/ui/bff/api/app.go

@@ -2,13 +2,14 @@ package api
 
 import (
 	"fmt"
+	"log/slog"
+	"net/http"
+
 	"github.com/julienschmidt/httprouter"
 	"github.com/kubeflow/model-registry/ui/bff/config"
 	"github.com/kubeflow/model-registry/ui/bff/data"
 	"github.com/kubeflow/model-registry/ui/bff/integrations"
 	"github.com/kubeflow/model-registry/ui/bff/internals/mocks"
-	"log/slog"
-	"net/http"
 )
 
 const (
@@ -17,7 +18,7 @@ const (
 	ModelRegistryId      = "model_registry_id"
 	RegisteredModelId    = "registered_model_id"
 	HealthCheckPath      = PathPrefix + "/healthcheck"
-	ModelRegistry        = PathPrefix + "/model-registry"
+	ModelRegistry        = PathPrefix + "/model_registry"
 	RegisteredModelsPath = ModelRegistry + "/:" + ModelRegistryId + "/registered_models"
 	RegisteredModelPath  = RegisteredModelsPath + "/:" + RegisteredModelId
 )

clients/ui/frontend/config/webpack.dev.js

@@ -18,7 +18,6 @@ module.exports = merge(common('development'), {
     host: HOST,
     port: PORT,
     historyApiFallback: true,
-    open: true,
     static: {
       directory: path.resolve(relativeDir, 'dist'),
     },

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

@@ -0,0 +1,34 @@
+import { ModelArtifact, ModelArtifactState } from '~/app/types';
+
+type MockModelArtifact = {
+  id?: string;
+  name?: string;
+  uri?: string;
+  state?: ModelArtifactState;
+  author?: string;
+};
+
+export const mockModelArtifact = ({
+  id = '1',
+  name = 'test',
+  uri = 'test',
+  state = ModelArtifactState.LIVE,
+  author = 'Author 1',
+}: MockModelArtifact): ModelArtifact => ({
+  id,
+  name,
+  externalID: '1234132asdfasdf',
+  description: '',
+  createTimeSinceEpoch: '1710404288975',
+  lastUpdateTimeSinceEpoch: '1710404288975',
+  customProperties: {},
+  uri,
+  state,
+  author,
+  modelFormatName: 'test',
+  storageKey: 'test',
+  storagePath: 'test',
+  modelFormatVersion: 'test',
+  serviceAccountName: 'test',
+  artifactType: 'test',
+});

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

@@ -0,0 +1,17 @@
+import { ModelRegistry } from '~/app/types';
+
+type MockModelRegistry = {
+  name?: string;
+  description?: string;
+  displayName?: string;
+};
+
+export const mockModelRegistry = ({
+  name = 'modelregistry-sample',
+  description = 'New model registry',
+  displayName = 'Model Registry Sample',
+}: MockModelRegistry): ModelRegistry => ({
+  name,
+  description,
+  displayName,
+});

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

@@ -0,0 +1,8 @@
+/* eslint-disable camelcase */
+import { ModelRegistryResponse } from '~/app/types';
+
+export const mockModelRegistryResponse = ({
+  model_registry = [],
+}: Partial<ModelRegistryResponse>): ModelRegistryResponse => ({
+  model_registry,
+});

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

@@ -0,0 +1,36 @@
+import { ModelVersion, ModelState } from '~/app/types';
+import { createModelRegistryLabelsObject } from './utils';
+
+type MockModelVersionType = {
+  author?: string;
+  id?: string;
+  registeredModelId?: string;
+  name?: string;
+  labels?: string[];
+  state?: ModelState;
+  description?: string;
+  createTimeSinceEpoch?: string;
+  lastUpdateTimeSinceEpoch?: string;
+};
+
+export const mockModelVersion = ({
+  author = 'Test author',
+  registeredModelId = '1',
+  name = 'new model version',
+  labels = [],
+  id = '1',
+  state = ModelState.LIVE,
+  description = 'Description of model version',
+  createTimeSinceEpoch = '1712234877179',
+  lastUpdateTimeSinceEpoch = '1712234877179',
+}: MockModelVersionType): ModelVersion => ({
+  author,
+  createTimeSinceEpoch,
+  customProperties: createModelRegistryLabelsObject(labels),
+  id,
+  lastUpdateTimeSinceEpoch,
+  name,
+  state,
+  registeredModelId,
+  description,
+});

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

@@ -0,0 +1,11 @@
+/* eslint-disable camelcase */
+import { ModelVersionList } from '~/app/types';
+
+export const mockModelVersionList = ({
+  items = [],
+}: Partial<ModelVersionList>): ModelVersionList => ({
+  items,
+  nextPageToken: '',
+  pageSize: 0,
+  size: items.length,
+});

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

@@ -0,0 +1,53 @@
+import { RegisteredModelList } from '~/app/types';
+import { mockRegisteredModel } from './mockRegisteredModel';
+
+export const mockRegisteredModelList = ({
+  size = 5,
+  items = [
+    mockRegisteredModel({ name: 'test-1' }),
+    mockRegisteredModel({ name: 'test-2' }),
+    mockRegisteredModel({
+      name: 'Fraud detection model',
+      description:
+        'A machine learning model trained to detect fraudulent transactions in financial data',
+      labels: [
+        'Financial data',
+        'Fraud detection',
+        'Test label',
+        'Machine learning',
+        'Next data to be overflow',
+      ],
+    }),
+    mockRegisteredModel({
+      name: 'Credit Scoring',
+      labels: [
+        'Credit Score Predictor',
+        'Creditworthiness scoring system',
+        'Default Risk Analyzer',
+        'Portfolio Management',
+        'Risk Assessment',
+      ],
+    }),
+    mockRegisteredModel({
+      name: 'Label modal',
+      description:
+        'A machine learning model trained to detect fraudulent transactions in financial data',
+      labels: [
+        'Testing label',
+        'Financial data',
+        'Fraud detection',
+        'Long label data to be truncated abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc',
+        'Machine learning',
+        'Next data to be overflow',
+        'Label x',
+        'Label y',
+        'Label z',
+      ],
+    }),
+  ],
+}: Partial<RegisteredModelList>): RegisteredModelList => ({
+  items,
+  nextPageToken: '',
+  pageSize: 0,
+  size,
+});

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

@@ -0,0 +1,45 @@
+class AppChrome {
+  visit() {
+    cy.visit('/');
+    this.wait();
+  }
+
+  private wait() {
+    cy.get('#dashboard-page-main');
+    cy.testA11y();
+  }
+
+  // TODO: implement when authorization is enabled
+  // shouldBeUnauthorized() {
+  //   cy.findByTestId('unauthorized-error');
+  //   return this;
+  // }
+
+  findNavToggle() {
+    return cy.get('#page-nav-toggle');
+  }
+
+  findSideBar() {
+    return cy.get('#page-sidebar');
+  }
+
+  findNavSection(name: string) {
+    return this.findSideBar().findByRole('button', { name });
+  }
+
+  findNavItem(name: string, section?: string) {
+    if (section) {
+      this.findNavSection(section)
+        // do not fail if the section is not found
+        .should('have.length.at.least', 0)
+        .then(($el) => {
+          if ($el.attr('aria-expanded') === 'false') {
+            cy.wrap($el).click();
+          }
+        });
+    }
+    return this.findSideBar().findByRole('link', { name });
+  }
+}
+
+export const appChrome = new AppChrome();