From 1815b6783fb504dc6009b3d42c73f0cb5fb73006 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julie=20Gyselov=C3=A1?= Date: Thu, 22 Aug 2024 11:03:08 +0200 Subject: [PATCH] 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 --- .../create-multinode/0-create-cluster.cy.ts | 2 +- .../create-sno/0-create-cluster.cy.ts | 6 +-- .../static-ip/0-create-cluster.cy.ts | 2 +- .../ui-behaviour/cluster-creation.cy.ts | 2 +- .../with-custom-ocp-releases.cy.ts | 2 +- .../support/variables/cluster-details.ts | 1 - libs/ui-lib-tests/cypress/views/common.ts | 4 +- .../cypress/views/pages/ClusterPage.ts | 2 +- .../cypress/views/pages/NewClusterPage.ts | 2 +- libs/ui-lib/lib/ocm/components/Routes.tsx | 41 ++++++++++++++----- .../clusters/ClusterBreadcrumbs.tsx | 4 +- libs/ui-lib/package.json | 2 +- yarn.lock | 2 +- 13 files changed, 47 insertions(+), 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 index aaffb56f16..3ae88a17d4 100644 --- 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 index 669e2838ff..c60f2f2396 100644 --- 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,7 +15,7 @@ describe(`Assisted Installer SNO Cluster Installation`, () => { beforeEach(() => { setTestStartSignal(''); - cy.visit('/clusters'); + cy.visit('/assisted-installer/clusters'); }); describe('Creating a new cluster', () => { @@ -23,7 +23,7 @@ describe(`Assisted Installer SNO Cluster Installation`, () => { 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 index 12935cbdcb..3c3611c897 100644 --- 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 index 5e3f2d038f..e53d7487cf 100644 --- 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/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-custom-ocp-releases.cy.ts b/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-custom-ocp-releases.cy.ts index 6f268fc8b2..a23320aa70 100644 --- a/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-custom-ocp-releases.cy.ts +++ b/libs/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 index 504d8b8761..1e1085d04f 100644 --- 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 index 3dc0f97e43..de53603858 100644 --- 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 index be2d726799..86355d4550 100644 --- 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) { - 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 index 3d29bbbdbc..4b3d07e091 100644 --- 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) { - 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 index 78c270e54a..9972431e7b 100644 --- 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 = ( + + }> + } /> + } /> + } /> + + {children} + } /> + + ); + return ( - - }> - } /> - } /> - } /> - - {children} - } /> - + {history ? ( + + {routes} + + ) : ( + routes + )} ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx index c709c4dac2..9b87dcaa69 100644 --- 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 }) => ( {(clusterName || isInOcm) && ( - Clusters} /> + {isInOcm && ( + Cluster List} /> + )} {clusterName ? ( diff --git a/libs/ui-lib/package.json b/libs/ui-lib/package.json index df4a4b825a..baa665fa3b 100644 --- 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 index 82617a55d5..9b1d377cfa 100644 --- 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