NO-ISSUE: Work with OCM-UI router v6 ugprade (#2656)

* Work with OCM-UI router v6 ugprade * make compat package a dependency * yarn lock * Make the standalone work with react-router-dom tweaks * Tweak breadcrumbs * Update path in tests --------- Co-authored-by: Joachim Schuler <jschuler@redhat.com>
openshift-assisted · Aug 22, 2024 · 1815b67 · 1815b67
1 parent 1ce56bb
commit 1815b67
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 25 deletions.
diff --git a/libs/ui-lib-tests/cypress/integration/create-multinode/0-create-cluster.cy.ts b/libs/ui-lib-tests/cypress/integration/create-multinode/0-create-cluster.cy.ts
@@ -14,7 +14,7 @@ describe(`Assisted Installer Multinode Cluster Installation`, () => {
 
   beforeEach(() => {
     setTestStartSignal('');
-    cy.visit('/clusters');
+    cy.visit('/assisted-installer/clusters');
   });
 
   describe('Creating a new cluster', () => {

diff --git a/libs/ui-lib-tests/cypress/integration/create-sno/0-create-cluster.cy.ts b/libs/ui-lib-tests/cypress/integration/create-sno/0-create-cluster.cy.ts
@@ -15,15 +15,15 @@ describe(`Assisted Installer SNO Cluster Installation`, () => {
 
   beforeEach(() => {
     setTestStartSignal('');
-    cy.visit('/clusters');
+    cy.visit('/assisted-installer/clusters');
   });
 
   describe('Creating a new cluster', () => {
     it('Can go to New Cluster Wizard', () => {
       clusterListPage.getCreateNewClusterButton().should('be.visible');
       clusterListPage.getCreateNewClusterButton().click();
 
-      cy.location('pathname').should('eq', Cypress.env('newClusterLocation'));
+      cy.location('pathname').should('eq', '/assisted-installer/clusters/~new');
     });
 
     it('Can submit the form to create a new cluster', () => {
@@ -49,7 +49,7 @@ describe(`Assisted Installer SNO Cluster Installation`, () => {
     describe('When the cluster is created', () => {
       beforeEach(() => {
         setTestStartSignal('CLUSTER_CREATED');
-        cy.visit('/clusters');
+        cy.visit('/assisted-installer/clusters');
       });
 
       it('Lists the new cluster', () => {

diff --git a/libs/ui-lib-tests/cypress/integration/static-ip/0-create-cluster.cy.ts b/libs/ui-lib-tests/cypress/integration/static-ip/0-create-cluster.cy.ts
@@ -15,7 +15,7 @@ describe(`Assisted Installer Static IP Cluster Creation`, () => {
 
   beforeEach(() => {
     setTestStartSignal('');
-    cy.visit('/clusters');
+    cy.visit('/assisted-installer/clusters');
   });
 
   describe('Creating a new cluster', () => {

diff --git a/libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts b/libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts
@@ -14,7 +14,7 @@ describe('Assisted Installer UI behaviour - cluster creation', () => {
 
   beforeEach(() => {
     setTestStartSignal('');
-    cy.visit('/clusters');
+    cy.visit('/assisted-installer/clusters');
   });
 
   describe('OpenShiftVersion tests', () => {

diff --git a/.../ui-lib-tests/cypress/integration/use-cases/create-cluster/with-custom-ocp-releases.cy.ts b/.../ui-lib-tests/cypress/integration/use-cases/create-cluster/with-custom-ocp-releases.cy.ts
@@ -15,7 +15,7 @@ describe('Assisted Installer UI behaviour - cluster creation with custom OCP rel
 
   beforeEach(() => {
     setTestStartSignal('');
-    cy.visit('/clusters');
+    cy.visit('/assisted-installer/clusters');
   });
 
   describe('Custom OpenShiftVersion tests', () => {

diff --git a/libs/ui-lib-tests/cypress/support/variables/cluster-details.ts b/libs/ui-lib-tests/cypress/support/variables/cluster-details.ts
@@ -18,7 +18,6 @@ Cypress.env('cpuArchitectureFieldHelperId', '#form-input-cpuArchitecture-field-h
 Cypress.env('pullSecretFieldHelperId', '#form-input-pullSecret-field-helper');
 Cypress.env('clusterNameFieldHelperId', '#form-input-name-field-helper');
 Cypress.env('baseDnsDomainFieldHelperId', '#form-input-baseDnsDomain-field-helper');
-Cypress.env('newClusterLocation', '/clusters/~new');
 Cypress.env(
   'staticIpNetworkConfigFieldId',
   '#form-radio-hostsNetworkConfigurationType-static-field',

diff --git a/libs/ui-lib-tests/cypress/views/common.ts b/libs/ui-lib-tests/cypress/views/common.ts
@@ -99,10 +99,10 @@ export const commonActions = {
     return cy.get('#form-input-dns-field-helper-error');
   },
   visitNewClusterPage: () => {
-    cy.visit('/clusters/~new');
+    cy.visit('/assisted-installer/clusters/~new');
   },
   visitClusterDetailsPage: () => {
-    cy.visit(`/clusters/${Cypress.env('clusterId')}`);
+    cy.visit(`/assisted-installer/clusters/${Cypress.env('clusterId')}`);
     cy.get('h2').should('exist');
   },
 };
diff --git a/libs/ui-lib-tests/cypress/views/pages/ClusterPage.ts b/libs/ui-lib-tests/cypress/views/pages/ClusterPage.ts
@@ -10,7 +10,7 @@ export class ClusterPage {
   }
 
   static visit(options?: Partial<Cypress.VisitOptions>) {
-    cy.visit(`/clusters/${Cypress.env('clusterId')}`, options);
+    cy.visit(`/assisted-installer/clusters/${Cypress.env('clusterId')}`, options);
   }
 
   get body() {

diff --git a/libs/ui-lib-tests/cypress/views/pages/NewClusterPage.ts b/libs/ui-lib-tests/cypress/views/pages/NewClusterPage.ts
@@ -1,5 +1,5 @@
 export class NewClusterPage {
   static visit(options?: Partial<Cypress.VisitOptions>) {
-    return cy.visit('/clusters/~new', options);
+    return cy.visit('/assisted-installer/clusters/~new', options);
   }
 }
diff --git a/libs/ui-lib/lib/ocm/components/Routes.tsx b/libs/ui-lib/lib/ocm/components/Routes.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom-v5-compat';
+import {
+  Routes,
+  Route,
+  Navigate,
+  Outlet,
+  unstable_HistoryRouter as HistoryRouter,
+  HistoryRouterProps,
+} from 'react-router-dom-v5-compat';
 import { Clusters, ClusterPage, NewClusterPage } from './clusters';
 import type { FeatureListType } from '../../common/features/featureGate';
 import { AssistedUILibVersion } from './ui';
@@ -10,24 +17,38 @@ import { useFeatureDetection } from '../hooks/use-feature-detection';
 export const UILibRoutes = ({
   allEnabledFeatures,
   children,
+  history,
+  basename,
 }: {
   allEnabledFeatures: FeatureListType;
   children?: React.ReactNode;
+  history?: HistoryRouterProps['history'];
+  basename?: string;
 }) => {
   useFeatureDetection(allEnabledFeatures);
 
+  const routes = (
+    <Routes>
+      <Route path="assisted-installer/clusters" element={<Outlet />}>
+        <Route path="~new" element={<NewClusterPage />} />
+        <Route path=":clusterId" element={<ClusterPage />} />
+        <Route index element={<Clusters />} />
+      </Route>
+      {children}
+      <Route path="*" element={<Navigate to="assisted-installer/clusters" />} />
+    </Routes>
+  );
+
   return (
     <Provider store={storeDay1}>
       <AssistedUILibVersion />
-      <Routes>
-        <Route path="clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />} />
-          <Route path=":clusterId" element={<ClusterPage />} />
-          <Route index element={<Clusters />} />
-        </Route>
-        {children}
-        <Route path="*" element={<Navigate to="clusters" />} />
-      </Routes>
+      {history ? (
+        <HistoryRouter history={history} basename={basename || '/'}>
+          {routes}
+        </HistoryRouter>
+      ) : (
+        routes
+      )}
     </Provider>
   );
 };
diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
@@ -12,7 +12,9 @@ const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
   <PageSection variant={PageSectionVariants.light}>
     {(clusterName || isInOcm) && (
       <Breadcrumb>
-        <BreadcrumbItem render={() => <Link to={'/'}>Clusters</Link>} />
+        {isInOcm && (
+          <BreadcrumbItem render={() => <Link to={'/cluster-list'}>Cluster List</Link>} />
+        )}
 
         {clusterName ? (
           <BreadcrumbItem>

diff --git a/libs/ui-lib/package.json b/libs/ui-lib/package.json
@@ -28,6 +28,7 @@
     "prism-react-renderer": "^1.1.1",
     "react-error-boundary": "^3.1.4",
     "react-measure": "^2.5.2",
+    "react-router-dom-v5-compat": "^6.21.2",
     "swr": "^2",
     "tslib": "^2.6.1",
     "unique-names-generator": "^4.2.0"
@@ -101,7 +102,6 @@
     "react-i18next": ">11.7.3",
     "react-monaco-editor": "^0.55.0",
     "react-redux": "^8.0.5",
-    "react-router-dom-v5-compat": "^6.21.2",
     "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",

diff --git a/yarn.lock b/yarn.lock
@@ -902,6 +902,7 @@ __metadata:
     prism-react-renderer: ^1.1.1
     react-error-boundary: ^3.1.4
     react-measure: ^2.5.2
+    react-router-dom-v5-compat: ^6.21.2
     swr: ^2
     tslib: ^2.6.1
     unique-names-generator: ^4.2.0
@@ -916,7 +917,6 @@ __metadata:
     react-i18next: ">11.7.3"
     react-monaco-editor: ^0.55.0
     react-redux: ^8.0.5
-    react-router-dom-v5-compat: ^6.21.2
     react-tagsinput: ^3.20
     redux: ^4
     uuid: ^8.1