Add selector core loader

Signed-off-by: lucferbux <[email protected]>

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__/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();