Add Registered Model View (#396)

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

clients/ui/bff/api/registered_models_handler.go

@@ -4,11 +4,12 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"net/http"
+
 	"github.com/julienschmidt/httprouter"
 	"github.com/kubeflow/model-registry/pkg/openapi"
 	"github.com/kubeflow/model-registry/ui/bff/integrations"
 	"github.com/kubeflow/model-registry/ui/bff/validation"
-	"net/http"
 )
 
 type RegisteredModelEnvelope Envelope[*openapi.RegisteredModel, None]

clients/ui/bff/internals/mocks/static_data_mock.go

@@ -29,7 +29,19 @@ func GetRegisteredModelMocks() []openapi.RegisteredModel {
 		State:                    stateToPointer(openapi.REGISTEREDMODELSTATE_LIVE),
 	}
 
-	return []openapi.RegisteredModel{model1, model2}
+	model3 := openapi.RegisteredModel{
+		CustomProperties:         newCustomProperties(),
+		Name:                     "Model Three",
+		Description:              stringToPointer("This model does things and stuff"),
+		ExternalId:               stringToPointer("345235989"),
+		Id:                       stringToPointer("3"),
+		CreateTimeSinceEpoch:     stringToPointer("1725282249933"),
+		LastUpdateTimeSinceEpoch: stringToPointer("1725282249933"),
+		Owner:                    stringToPointer("M. Oriarty"),
+		State:                    stateToPointer(openapi.REGISTEREDMODELSTATE_ARCHIVED),
+	}
+
+	return []openapi.RegisteredModel{model1, model2, model3}
 }
 
 func GetRegisteredModelListMock() openapi.RegisteredModelList {
@@ -135,10 +147,28 @@ func GetModelArtifactListMock() openapi.ModelArtifactList {
 
 func newCustomProperties() *map[string]openapi.MetadataValue {
 	result := map[string]openapi.MetadataValue{
-		"my-label9": {
+		"tensorflow": {
+			MetadataStringValue: &openapi.MetadataStringValue{
+				StringValue:  "",
+				MetadataType: "MetadataStringValue",
+			},
+		},
+		"pytorch": {
+			MetadataStringValue: &openapi.MetadataStringValue{
+				StringValue:  "",
+				MetadataType: "MetadataStringValue",
+			},
+		},
+		"mll": {
+			MetadataStringValue: &openapi.MetadataStringValue{
+				StringValue:  "",
+				MetadataType: "MetadataStringValue",
+			},
+		},
+		"rnn": {
 			MetadataStringValue: &openapi.MetadataStringValue{
-				StringValue:  "property9",
-				MetadataType: "string",
+				StringValue:  "",
+				MetadataType: "MetadataStringValue",
 			},
 		},
 	}

clients/ui/frontend/docs/architecture.md

@@ -1,3 +1,7 @@
 # Model Registry UI Architecture
 
-[TBD]
+## Overview
+
+![Overview](./meta/arch-overview.png)
+
+[TBD]

clients/ui/frontend/package.json

@@ -42,6 +42,10 @@
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react-router-dom": "^5.3.3",
+    "@types/classnames": "^2.3.1",
+    "@types/dompurify": "^2.2.6",
+    "@types/showdown": "^2.0.3",
+    "@types/lodash-es": "^4.17.8",
     "chai-subset": "^1.6.0",
     "copy-webpack-plugin": "^12.0.2",
     "core-js": "^3.37.1",
@@ -89,11 +93,15 @@
     "@patternfly/react-core": "6.0.0-alpha.102",
     "@patternfly/react-icons": "6.0.0-alpha.37",
     "@patternfly/react-styles": "6.0.0-alpha.35",
-    "lodash-es": "^4.17.21",
+    "@patternfly/react-table": "6.0.0-alpha.101",
+    "lodash-es": "^4.17.15",
     "npm-run-all": "^4.1.5",
     "react": "^18",
     "react-dom": "^18",
-    "sass": "^1.78.0"
+    "sass": "^1.78.0",
+    "dompurify": "^2.2.6",
+    "showdown": "^2.1.0",
+    "classnames": "^2.2.6"
   },
   "optionalDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.5.0",

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

@@ -0,0 +1,5 @@
+import { ModelRegistryResponse } from '~/app/types';
+
+export const mockBFFResponse = <T>(data: T): ModelRegistryResponse<T> => ({
+  data,
+});

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

@@ -1,4 +1,8 @@
-import { ModelRegistryMetadataType, ModelRegistryStringCustomProperties } from '~/app/types';
+import {
+  ModelRegistryMetadataType,
+  ModelRegistryResponse,
+  ModelRegistryStringCustomProperties,
+} from '~/app/types';
 
 export const createModelRegistryLabelsObject = (
   labels: string[],
@@ -11,3 +15,7 @@ export const createModelRegistryLabelsObject = (
     };
     return acc;
   }, {} as ModelRegistryStringCustomProperties);
+
+export const mockBFFResponse = <T>(data: T): ModelRegistryResponse<T> => ({
+  data,
+});

clients/ui/frontend/src/__tests__/cypress/cypress/pages/components/Contextual.ts

@@ -0,0 +1,7 @@
+export class Contextual<E extends HTMLElement> {
+  constructor(private parentSelector: () => Cypress.Chainable<JQuery<E>>) {}
+
+  find(): Cypress.Chainable<JQuery<E>> {
+    return this.parentSelector();
+  }
+}

clients/ui/frontend/src/__tests__/cypress/cypress/pages/components/Modal.ts

@@ -0,0 +1,29 @@
+import type { ByRoleOptions } from '@testing-library/react';
+
+export class Modal {
+  constructor(private title: ByRoleOptions['name']) {}
+
+  shouldBeOpen(open = true): void {
+    if (open) {
+      this.find().testA11y();
+    } else {
+      this.find().should('not.exist');
+    }
+  }
+
+  find(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('dialog', { name: this.title });
+  }
+
+  findCloseButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByRole('button', { name: 'Close' });
+  }
+
+  findCancelButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.findFooter().findByRole('button', { name: 'Cancel' });
+  }
+
+  findFooter(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().find('footer');
+  }
+}