Archive and restore registered models

frontend/src/__mocks__/mockModelVersion.ts

@@ -1,4 +1,4 @@
-import { ModelVersion, ModelVersionState } from '~/concepts/modelRegistry/types';
+import { ModelVersion, ModelState } from '~/concepts/modelRegistry/types';
 import { createModelRegistryLabelsObject } from './utils';
 
 type MockModelVersionType = {
@@ -7,7 +7,7 @@ type MockModelVersionType = {
   registeredModelId?: string;
   name?: string;
   labels?: string[];
-  state?: ModelVersionState;
+  state?: ModelState;
   description?: string;
 };
 
@@ -17,7 +17,7 @@ export const mockModelVersion = ({
   name = 'new model version',
   labels = [],
   id = '1',
-  state = ModelVersionState.LIVE,
+  state = ModelState.LIVE,
   description = 'Description of model version',
 }: MockModelVersionType): ModelVersion => ({
   author,

frontend/src/__mocks__/mockRegisteredModel.ts

@@ -1,17 +1,17 @@
-import { RegisteredModel, RegisteredModelState } from '~/concepts/modelRegistry/types';
+import { RegisteredModel, ModelState } from '~/concepts/modelRegistry/types';
 import { createModelRegistryLabelsObject } from './utils';
 
 type MockRegisteredModelType = {
   id?: string;
   name?: string;
-  state?: RegisteredModelState;
+  state?: ModelState;
   description?: string;
   labels?: string[];
 };
 
 export const mockRegisteredModel = ({
   name = 'test',
-  state = RegisteredModelState.LIVE,
+  state = ModelState.LIVE,
   description = '',
   labels = [],
   id = '1',

frontend/src/__mocks__/mockRegisteredModelsList.ts

@@ -3,8 +3,7 @@ import { mockRegisteredModel } from './mockRegisteredModel';
 
 export const mockRegisteredModelList = ({
   size = 5,
-}: Partial<RegisteredModelList>): RegisteredModelList => ({
-  items: [
+  items = [
     mockRegisteredModel({ name: 'test-1' }),
     mockRegisteredModel({ name: 'test-2' }),
     mockRegisteredModel({
@@ -46,6 +45,8 @@ export const mockRegisteredModelList = ({
       ],
     }),
   ],
+}: Partial<RegisteredModelList>): RegisteredModelList => ({
+  items,
   nextPageToken: '',
   pageSize: 0,
   size,

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

@@ -79,10 +79,6 @@ class ModelVersionArchive {
     this.wait();
   }
 
-  findTableKebabMenu() {
-    return cy.findByTestId('model-versions-table-kebab-action');
-  }
-
   findModelVersionsTableKebab() {
     return cy.findByTestId('model-versions-table-kebab-action');
   }

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

@@ -0,0 +1,118 @@
+import {
+  registeredModelArchiveDetailsUrl,
+  registeredModelArchiveUrl,
+  registeredModelUrl,
+} from '~/pages/modelRegistry/screens/routeUtils';
+import { TableRow } from '~/__tests__/cypress/cypress/pages/components/table';
+import { Modal } from '~/__tests__/cypress/cypress/pages/components/Modal';
+
+class ArchiveModelTableRow extends TableRow {
+  findName() {
+    return this.find().findByTestId('model-name');
+  }
+
+  findDescription() {
+    return this.find().findByTestId('description');
+  }
+
+  findLabelPopoverText() {
+    return this.find().findByTestId('popover-label-text');
+  }
+
+  findLabelModalText() {
+    return this.find().findByTestId('modal-label-text');
+  }
+
+  shouldContainsPopoverLabels(labels: string[]) {
+    cy.findByTestId('popover-label-group').within(() => labels.map((label) => cy.contains(label)));
+    return this;
+  }
+}
+
+class RestoreModelModal extends Modal {
+  constructor() {
+    super('Restore model?');
+  }
+
+  findRestoreButton() {
+    return cy.findByTestId('modal-submit-button');
+  }
+}
+
+class ArchiveModelModal extends Modal {
+  constructor() {
+    super('Archive model?');
+  }
+
+  findArchiveButton() {
+    return cy.findByTestId('modal-submit-button');
+  }
+
+  findModalTextInput() {
+    return cy.findByTestId('confirm-archive-input');
+  }
+}
+
+class ModelArchive {
+  private wait() {
+    cy.findByTestId('app-page-title').should('exist');
+    cy.testA11y();
+  }
+
+  visit() {
+    cy.visit(registeredModelArchiveUrl('modelregistry-sample'));
+    this.wait();
+  }
+
+  visitArchiveModelDetail() {
+    cy.visit(registeredModelArchiveDetailsUrl('2', 'modelregistry-sample'));
+  }
+
+  visitModelList() {
+    cy.visit('/modelRegistry/modelregistry-sample');
+    this.wait();
+  }
+
+  visitModelDetails() {
+    cy.visit(registeredModelUrl('2', 'modelregistry-sample'));
+    this.wait();
+  }
+
+  findTableKebabMenu() {
+    return cy.findByTestId('registered-models-table-kebab-action');
+  }
+
+  shouldArchiveVersionsEmpty() {
+    cy.findByTestId('empty-archive-model-state').should('exist');
+  }
+
+  findArchiveModelBreadcrumbItem() {
+    return cy.findByTestId('archive-model-page-breadcrumb');
+  }
+
+  findArchiveModelTable() {
+    return cy.findByTestId('registered-models-archive-table');
+  }
+
+  findArchiveModelsTableRows() {
+    return this.findArchiveModelTable().find('tbody tr');
+  }
+
+  findRestoreButton() {
+    return cy.findByTestId('restore-button');
+  }
+
+  getRow(name: string) {
+    return new ArchiveModelTableRow(() =>
+      this.findArchiveModelTable().find(`[data-label="Model name"]`).contains(name).parents('tr'),
+    );
+  }
+
+  findModelVersionsDetailsHeaderAction() {
+    return cy.findByTestId('model-version-action-toggle');
+  }
+}
+
+export const registeredModelArchive = new ModelArchive();
+export const restoreModelModal = new RestoreModelModal();
+export const archiveModelModal = new ArchiveModelModal();

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

@@ -368,6 +368,12 @@ declare global {
         response: OdhResponse<ModelVersion | undefined>,
       ): Cypress.Chainable<null>;
 
+      interceptOdh(
+        type: 'PATCH /api/service/modelregistry/:serviceName/api/model_registry/:apiVersion/registered_models/:registeredModelId',
+        options: { path: { serviceName: string; apiVersion: string; registeredModelId: number } },
+        response: OdhResponse<RegisteredModel | undefined>,
+      ): Cypress.Chainable<null>;
+
       interceptOdh(
         type: `GET /api/service/pipelines/:namespace/:serviceName/apis/v2beta1/pipelines/:pipelineId/versions/:pipelineVersionId`,
         options: {

frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelRegistry.cy.ts

@@ -10,17 +10,47 @@ import { be } from '~/__tests__/cypress/cypress/utils/should';
 import { ModelRegistryModel, RouteModel } from '~/__tests__/cypress/cypress/utils/models';
 import { mockModelVersionList } from '~/__mocks__/mockModelVersionList';
 import { mockModelVersion } from '~/__mocks__/mockModelVersion';
-import { ModelVersion } from '~/concepts/modelRegistry/types';
+import { ModelVersion, RegisteredModel } from '~/concepts/modelRegistry/types';
+import { mockRegisteredModel } from '~/__mocks__/mockRegisteredModel';
 
 type HandlersProps = {
   disableModelRegistryFeature?: boolean;
-  registeredModelsSize?: number;
+  registeredModels?: RegisteredModel[];
   modelVersions?: ModelVersion[];
 };
 
 const initIntercepts = ({
   disableModelRegistryFeature = false,
-  registeredModelsSize = 4,
+  registeredModels = [
+    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: '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',
+      ],
+    }),
+  ],
   modelVersions = [
     mockModelVersion({ author: 'Author 1' }),
     mockModelVersion({ name: 'model version' }),
@@ -54,7 +84,7 @@ const initIntercepts = ({
     {
       path: { serviceName: 'modelregistry-sample', apiVersion: MODEL_REGISTRY_API_VERSION },
     },
-    mockRegisteredModelList({ size: registeredModelsSize }),
+    mockRegisteredModelList({ items: registeredModels }),
   );
 
   cy.interceptOdh(
@@ -94,7 +124,7 @@ describe('Model Registry', () => {
   it('No registered models in the selected Model Registry', () => {
     initIntercepts({
       disableModelRegistryFeature: false,
-      registeredModelsSize: 0,
+      registeredModels: [],
     });
 
     modelRegistry.visit();

frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/ModelVersionArchive.cy.ts → frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionArchive.cy.ts

@@ -7,7 +7,7 @@ import { mockRegisteredModelList } from '~/__mocks__/mockRegisteredModelsList';
 import { ModelRegistryModel } from '~/__tests__/cypress/cypress/utils/models';
 import { mockModelVersionList } from '~/__mocks__/mockModelVersionList';
 import { mockModelVersion } from '~/__mocks__/mockModelVersion';
-import { ModelVersion, ModelVersionState } from '~/concepts/modelRegistry/types';
+import { ModelVersion, ModelState } from '~/concepts/modelRegistry/types';
 import { mockRegisteredModel } from '~/__mocks__/mockRegisteredModel';
 import { verifyRelativeURL } from '~/__tests__/cypress/cypress/utils/url';
 import {
@@ -39,9 +39,9 @@ const initIntercepts = ({
         'Test label y',
         'Test label z',
       ],
-      state: ModelVersionState.ARCHIVED,
+      state: ModelState.ARCHIVED,
     }),
-    mockModelVersion({ id: '2', name: 'model version 2', state: ModelVersionState.ARCHIVED }),
+    mockModelVersion({ id: '2', name: 'model version 2', state: ModelState.ARCHIVED }),
     mockModelVersion({ id: '3', name: 'model version 3' }),
   ],
 }: HandlersProps) => {
@@ -100,7 +100,7 @@ const initIntercepts = ({
         modelVersionId: 2,
       },
     },
-    mockModelVersion({ id: '2', name: 'model version 2', state: ModelVersionState.ARCHIVED }),
+    mockModelVersion({ id: '2', name: 'model version 2', state: ModelState.ARCHIVED }),
   );
 
   cy.interceptOdh(
@@ -112,7 +112,7 @@ const initIntercepts = ({
         modelVersionId: 3,
       },
     },
-    mockModelVersion({ id: '3', name: 'model version 3', state: ModelVersionState.LIVE }),
+    mockModelVersion({ id: '3', name: 'model version 3', state: ModelState.LIVE }),
   );
 };