Enable browser back button after clicking on Registered model/version (…

…opendatahub-io#3116)
emilys314 · Aug 27, 2024 · 3e2a54a · 3e2a54a
1 parent 471b93a
commit 3e2a54a
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 4 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts
@@ -46,6 +46,10 @@ class ModelRegistryTableRow extends TableRow {
     cy.findByTestId('popover-label-group').within(() => labels.map((label) => cy.contains(label)));
     return this;
   }
+
+  findModelVersionName() {
+    return this.find().findByTestId('model-version-name');
+  }
 }
 
 class ModelRegistry {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionArchive.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionArchive.cy.ts
@@ -131,6 +131,22 @@ describe('Model version archive list', () => {
     modelVersionArchive.shouldArchiveVersionsEmpty();
   });
 
+  it('Archived version details browser back button should lead to archived versions table', () => {
+    initIntercepts({});
+    modelVersionArchive.visit();
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive');
+    modelVersionArchive.findArchiveVersionBreadcrumbItem().contains('Archived version');
+    const archiveVersionRow = modelVersionArchive.getRow('model version 2');
+    archiveVersionRow.findName().contains('model version 2').click();
+    verifyRelativeURL(
+      '/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive/2/details',
+    );
+    cy.go('back');
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/archive');
+    modelVersionArchive.findArchiveVersionBreadcrumbItem().contains('Archived version');
+    archiveVersionRow.findName().contains('model version 2').should('exist');
+  });
+
   it('Archive version list', () => {
     initIntercepts({});
     modelVersionArchive.visit();

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersions.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersions.cy.ts
@@ -85,6 +85,17 @@ const initIntercepts = ({
     },
     mockRegisteredModel({}),
   );
+  cy.interceptOdh(
+    `GET /api/service/modelregistry/:serviceName/api/model_registry/:apiVersion/model_versions/:modelVersionId`,
+    {
+      path: {
+        serviceName: 'modelregistry-sample',
+        apiVersion: MODEL_REGISTRY_API_VERSION,
+        modelVersionId: 2,
+      },
+    },
+    mockModelVersion({ id: '2', name: 'model version' }),
+  );
 };
 describe('Model Versions', () => {
   it('No model versions in the selected registered model', () => {
@@ -100,6 +111,20 @@ describe('Model Versions', () => {
     modelRegistry.shouldmodelVersionsEmpty();
   });
 
+  it('Model versions table browser back button should lead to Registered models table', () => {
+    initIntercepts({
+      disableModelRegistryFeature: false,
+    });
+
+    modelRegistry.visit();
+    const registeredModelRow = modelRegistry.getRow('Fraud detection model');
+    registeredModelRow.findName().contains('Fraud detection model').click();
+    verifyRelativeURL(`/modelRegistry/modelregistry-sample/registeredModels/1/versions`);
+    cy.go('back');
+    verifyRelativeURL(`/modelRegistry/modelregistry-sample`);
+    registeredModelRow.findName().contains('Fraud detection model').should('exist');
+  });
+
   it('Model versions table', () => {
     initIntercepts({
       disableModelRegistryFeature: false,
@@ -164,4 +189,24 @@ describe('Model Versions', () => {
     modelRegistry.findModelVersionsTableRows().should('have.length', 1);
     modelRegistry.findModelVersionsTableRows().contains('Test author');
   });
+
+  it('Model version details back button should lead to versions table', () => {
+    initIntercepts({
+      disableModelRegistryFeature: false,
+    });
+    modelRegistry.visit();
+    const registeredModelRow = modelRegistry.getRow('Fraud detection model');
+    registeredModelRow.findName().contains('Fraud detection model').click();
+    verifyRelativeURL(`/modelRegistry/modelregistry-sample/registeredModels/1/versions`);
+    const modelVersionRow = modelRegistry.getModelVersionRow('model version');
+    modelVersionRow.findModelVersionName().contains('model version').click();
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions/2/details');
+    cy.findByTestId('app-page-title').should('have.text', 'model version');
+    cy.findByTestId('breadcrumb-version-name').should('have.text', 'model version');
+    // Bypass patternfly ExpandableSection error https://github.com/patternfly/patternfly-react/issues/10410
+    // Cannot destructure property 'offsetWidth' of 'this.expandableContentRef.current' as it is null.
+    Cypress.on('uncaught:exception', () => false);
+    cy.go('back');
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions');
+  });
 });
diff --git a/...end/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/registeredModelArchive.cy.ts b/...end/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/registeredModelArchive.cy.ts
@@ -108,6 +108,20 @@ describe('Model archive list', () => {
     registeredModelArchive.shouldArchiveVersionsEmpty();
   });
 
+  it('Archived model details browser back button should lead to archived models table', () => {
+    initIntercepts({});
+    registeredModelArchive.visit();
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    registeredModelArchive.findArchiveModelBreadcrumbItem().contains('Archived models');
+    const archiveModelRow = registeredModelArchive.getRow('model 2');
+    archiveModelRow.findName().contains('model 2').click();
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive/2/versions');
+    cy.findByTestId('app-page-title').should('have.text', 'model 2Archived');
+    cy.go('back');
+    verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/archive');
+    registeredModelArchive.findArchiveModelTable().should('be.visible');
+  });
+
   it('Archive models list', () => {
     initIntercepts({});
     registeredModelArchive.visit();

diff --git a/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx b/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx
@@ -26,7 +26,7 @@ const ModelRegistryRoutes: React.FC = () => (
     >
       <Route index element={<ModelRegistry empty={false} />} />
       <Route path="registeredModels/:registeredModelId">
-        <Route index element={<Navigate to={ModelVersionsTab.VERSIONS} />} />
+        <Route index element={<Navigate to={ModelVersionsTab.VERSIONS} replace />} />
         <Route
           path={ModelVersionsTab.VERSIONS}
           element={<ModelVersions tab={ModelVersionsTab.VERSIONS} empty={false} />}
@@ -37,7 +37,7 @@ const ModelRegistryRoutes: React.FC = () => (
         />
         <Route path="registerVersion" element={<RegisterVersion />} />
         <Route path="versions/:modelVersionId">
-          <Route index element={<Navigate to={ModelVersionDetailsTab.DETAILS} />} />
+          <Route index element={<Navigate to={ModelVersionDetailsTab.DETAILS} replace />} />
           <Route
             path={ModelVersionDetailsTab.DETAILS}
             element={<ModelVersionsDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />}
@@ -53,7 +53,7 @@ const ModelRegistryRoutes: React.FC = () => (
         <Route path="versions/archive">
           <Route index element={<ModelVersionsArchive empty={false} />} />
           <Route path=":modelVersionId">
-            <Route index element={<Navigate to={ModelVersionDetailsTab.DETAILS} />} />
+            <Route index element={<Navigate to={ModelVersionDetailsTab.DETAILS} replace />} />
             <Route
               path={ModelVersionDetailsTab.DETAILS}
               element={
@@ -78,7 +78,7 @@ const ModelRegistryRoutes: React.FC = () => (
       <Route path="registeredModels/archive">
         <Route index element={<RegisteredModelsArchive empty={false} />} />
         <Route path=":registeredModelId">
-          <Route index element={<Navigate to={ModelVersionsTab.VERSIONS} />} />
+          <Route index element={<Navigate to={ModelVersionsTab.VERSIONS} replace />} />
           <Route
             path={ModelVersionsTab.DETAILS}
             element={