Model Registry: Register New Version form (#3078)

* Model Registry: Register New Version form Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu> * Navigate to model page instead of version page after registering version Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu> * Fix test Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu> * Fix DOM warning Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu> --------- Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
opendatahub-io · Aug 16, 2024 · c69451a · c69451a
1 parent efc86f8
commit c69451a
Show file tree

Hide file tree

Showing 33 changed files with 1,623 additions and 464 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -66,6 +66,7 @@
     "@patternfly/react-log-viewer": "^5.2.0",
     "@patternfly/react-styles": "^5.3.1",
     "@patternfly/react-table": "^5.3.3",
+    "@patternfly/react-templates": "^1.0.4",
     "@patternfly/react-tokens": "^5.3.1",
     "@patternfly/react-topology": "^5.4.0-prerelease.10",
     "@patternfly/react-virtualized-extension": "^5.1.0",
@@ -149,13 +150,22 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@cypress/code-coverage": "^3.12.34",
+    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
+    "@testing-library/cypress": "^10.0.1",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/chai-subset": "^1.3.5",
+    "@types/jest": "^28.1.8",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "chai-subset": "^1.6.0",
     "cypress": "^13.10.0",
     "cypress-axe": "^1.5.0",
     "cypress-high-resolution": "^1.0.0",
     "cypress-mochawesome-reporter": "^3.8.2",
     "cypress-multi-reporters": "^1.6.4",
-    "@types/jest": "^28.1.8",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-node": "^0.3.7",
@@ -174,19 +184,10 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.4.3",
     "junit-report-merger": "^7.0.0",
-    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
     "mocha-junit-reporter": "^2.2.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "serve": "^14.2.1",
-    "@testing-library/cypress": "^10.0.1",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/chai-subset": "^1.3.5",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
     "ts-jest": "^28.0.8",
     "wait-on": "^7.2.0"
   },

diff --git a/frontend/src/__mocks__/mockModelArtifact.ts b/frontend/src/__mocks__/mockModelArtifact.ts
@@ -1,6 +1,6 @@
 import { ModelArtifact } from '~/concepts/modelRegistry/types';
 
-export const mockModelArtifact = (): ModelArtifact => ({
+export const mockModelArtifact = (partial?: Partial<ModelArtifact>): ModelArtifact => ({
   createTimeSinceEpoch: '1712234877179',
   id: '1',
   lastUpdateTimeSinceEpoch: '1712234877179',
@@ -13,4 +13,5 @@ export const mockModelArtifact = (): ModelArtifact => ({
   uri: 's3://test-bucket/demo-models/test-path?endpoint=test-endpoint&defaultRegion=test-region',
   modelFormatName: 'test model format',
   modelFormatVersion: 'test version 1',
+  ...partial,
 });
diff --git a/frontend/src/__mocks__/mockModelArtifactList.ts b/frontend/src/__mocks__/mockModelArtifactList.ts
@@ -2,8 +2,10 @@
 import { ModelArtifactList } from '~/concepts/modelRegistry/types';
 import { mockModelArtifact } from './mockModelArtifact';
 
-export const mockModelArtifactList = (): ModelArtifactList => ({
-  items: [mockModelArtifact()],
+export const mockModelArtifactList = ({
+  items = [mockModelArtifact()],
+}: Partial<ModelArtifactList>): ModelArtifactList => ({
+  items,
   nextPageToken: '',
   pageSize: 0,
   size: 1,

diff --git a/frontend/src/__mocks__/mockModelVersion.ts b/frontend/src/__mocks__/mockModelVersion.ts
@@ -9,6 +9,7 @@ type MockModelVersionType = {
   labels?: string[];
   state?: ModelState;
   description?: string;
+  createTimeSinceEpoch?: string;
 };
 
 export const mockModelVersion = ({
@@ -19,9 +20,10 @@ export const mockModelVersion = ({
   id = '1',
   state = ModelState.LIVE,
   description = 'Description of model version',
+  createTimeSinceEpoch = '1712234877179',
 }: MockModelVersionType): ModelVersion => ({
   author,
-  createTimeSinceEpoch: '1712234877179',
+  createTimeSinceEpoch,
   customProperties: createModelRegistryLabelsObject(labels),
   id,
   lastUpdateTimeSinceEpoch: '1712234877179',

diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/registerVersionPage.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/registerVersionPage.ts
@@ -0,0 +1,51 @@
+export enum FormFieldSelector {
+  REGISTERED_MODEL = '#registered-model-container .pf-m-typeahead',
+  VERSION_NAME = '#version-name',
+  VERSION_DESCRIPTION = '#version-description',
+  SOURCE_MODEL_FORMAT = '#source-model-format',
+  SOURCE_MODEL_FORMAT_VERSION = '#source-model-format-version',
+  LOCATION_TYPE_OBJECT_STORAGE = '#location-type-object-storage',
+  LOCATION_ENDPOINT = '#location-endpoint',
+  LOCATION_BUCKET = '#location-bucket',
+  LOCATION_REGION = '#location-region',
+  LOCATION_PATH = '#location-path',
+  LOCATION_TYPE_URI = '#location-type-uri',
+  LOCATION_URI = '#location-uri',
+}
+
+class RegisterVersionPage {
+  visit(registeredModelId?: string) {
+    const preferredModelRegistry = 'modelregistry-sample';
+    cy.visitWithLogin(
+      registeredModelId
+        ? `/modelRegistry/${preferredModelRegistry}/registeredModels/${registeredModelId}/registerVersion`
+        : `/modelRegistry/${preferredModelRegistry}/registerVersion`,
+    );
+    this.wait();
+  }
+
+  private wait() {
+    const preferredModelRegistry = 'modelregistry-sample';
+    cy.findByTestId('app-page-title').should('exist');
+    cy.findByTestId('app-page-title').contains('Register new version');
+    cy.findByText(`Model registry - ${preferredModelRegistry}`).should('exist');
+    cy.testA11y();
+  }
+
+  findFormField(selector: FormFieldSelector) {
+    return cy.get(selector);
+  }
+
+  selectRegisteredModel(name: string) {
+    this.findFormField(FormFieldSelector.REGISTERED_MODEL)
+      .findByRole('button', { name: 'Typeahead menu toggle' })
+      .findSelectOption(name)
+      .click();
+  }
+
+  findSubmitButton() {
+    return cy.findByTestId('create-button');
+  }
+}
+
+export const registerVersionPage = new RegisterVersionPage();
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDeploy.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDeploy.cy.ts
@@ -146,7 +146,7 @@ const initIntercepts = ({
         modelVersionId: 1,
       },
     },
-    mockModelArtifactList(),
+    mockModelArtifactList({}),
   );
 
   cy.interceptK8sList(

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDetails.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDetails.cy.ts
@@ -111,7 +111,7 @@ const initIntercepts = () => {
         modelVersionId: 1,
       },
     },
-    mockModelArtifactList(),
+    mockModelArtifactList({}),
   );
 };