Upgrade react-router-dom (#1189)

* chore: upgrade react-router-dom, typescript Signed-off-by: Oleksii Kurinnyi <[email protected]> * fix: switching between tabs Signed-off-by: Oleksii Kurinnyi <[email protected]> * fix: open recent workspace Signed-off-by: Oleksii Kurinnyi <[email protected]> * fix: importing createRoot Signed-off-by: Oleksii Kurinnyi <[email protected]> * fix: linter issues Signed-off-by: Oleksii Kurinnyi <[email protected]> * chore: use navigate instead of history on Get Started page Signed-off-by: Oleksii Kurinnyi <[email protected]> * chore: use navigate instead of history on the Loader page Signed-off-by: Oleksii Kurinnyi <[email protected]> * chore: use navigate instead of history on the UserPreferences page Signed-off-by: Oleksii Kurinnyi <[email protected]> * chore: use navigate instead of history on the WorkspaceDetails page Signed-off-by: Oleksii Kurinnyi <[email protected]> * chore: use navigate instead of history on the WorkspacesList page Signed-off-by: Oleksii Kurinnyi <[email protected]> * chore: update the v1 yarn.lock Signed-off-by: Oleksii Kurinnyi <[email protected]> --------- Signed-off-by: Oleksii Kurinnyi <[email protected]>
eclipse-che · Sep 25, 2024 · d48136f · d48136f
1 parent 3350f84
commit d48136f
Show file tree

Hide file tree

Showing 91 changed files with 1,294 additions and 1,175 deletions.
diff --git a/.deps/dev.md b/.deps/dev.md
@@ -161,7 +161,8 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10792 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #13991 |
-| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
+| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
+| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |

diff --git a/.deps/prod.md b/.deps/prod.md
@@ -41,6 +41,7 @@
 | [`@patternfly/[email protected]`](https://github.com/patternfly/patternfly-react.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@patternfly/react-table/4.113.6) |
 | [`@patternfly/[email protected]`](https://github.com/patternfly/patternfly-react.git) | MIT | clearlydefined |
 | [`@pkgjs/[email protected]`]([email protected]:pkgjs/parseargs.git) | MIT | #8236 |
+| [`@remix-run/[email protected]`](https://github.com/remix-run/react-router) | MIT | clearlydefined |
 | `@sideway/[email protected]` | BSD-3-Clause | #3098 |
 | `@sideway/[email protected]` | BSD-3-Clause | clearlydefined |
 | `@sideway/[email protected]` | BSD-3-Clause | clearlydefined |
@@ -115,7 +116,6 @@
 | [`[email protected]`]([email protected]:colorjs/color-name.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](git://github.com/felixge/node-combined-stream.git) | MIT | clearlydefined |
-| [`[email protected]`](https://github.com/supasate/connected-react-router.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/visionmedia/node-cookie-signature.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/cookie-signature/1.2.1) |
 | `[email protected]` | MIT | clearlydefined |
@@ -227,7 +227,6 @@
 | `[email protected]` | ISC | clearlydefined |
 | [`[email protected]`](git://github.com/ashtuchkin/iconv-lite.git) | MIT | clearlydefined |
 | [`[email protected]`](git://github.com/feross/ieee754.git) | BSD-3-Clause | clearlydefined |
-| [`[email protected]`](git://github.com/immutable-js/immutable-js.git) | MIT | #7353 |
 | [`[email protected]`](https://github.com/jensyt/imurmurhash-js) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/npm/inflight.git) | ISC | clearlydefined |
@@ -241,7 +240,6 @@
 | [`[email protected]`](https://github.com/watson/is-lambda.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/jonschlinkert/is-plain-object) | MIT | clearlydefined |
 | [`[email protected]`](git://github.com/hughsk/is-typedarray.git) | MIT | #2531 |
-| [`[email protected]`](git://github.com/juliangruber/isarray.git) | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/isaacs/isexe.git) | ISC | clearlydefined |
 | `[email protected]` | ISC | clearlydefined |
 | [`[email protected]`](git+https://github.com/heineiuo/isomorphic-ws.git) | MIT | clearlydefined |
@@ -268,7 +266,6 @@
 | [`[email protected]`](git://github.com/joyent/node-jsprim.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/fastify/light-my-request.git) | BSD-3-Clause | clearlydefined |
-| [`[email protected]`](https://lodash.com/) | MIT | clearlydefined |
 | [`[email protected]`](https://lodash.com/) | MIT | #2096 |
 | [`[email protected]`](git://github.com/zertosh/loose-envify.git) | MIT | clearlydefined |
 | `[email protected]` | ISC | #11688 |
@@ -328,7 +325,6 @@
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/isaacs/path-scurry) | BlueOak-1.0.0 | #9370 |
 | [`[email protected]`](git+https://github.com/isaacs/path-scurry) | BlueOak-1.0.0 | clearlydefined |
-| [`[email protected]`](https://github.com/pillarjs/path-to-regexp.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/crypto-browserify/pbkdf2.git) | MIT | clearlydefined |
 | [`[email protected]`](git://github.com/braveg1rl/performance-now.git) | MIT | clearlydefined |
 | `[email protected]` | ISC | #14718 |
@@ -370,8 +366,8 @@
 | [`[email protected]`](https://github.com/facebook/react.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/tsmith123/react-pluralize) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/reduxjs/react-redux) | MIT | #2978 |
-| [`react-router-dom@5.3.4`](https://github.com/remix-run/react-router.git) | MIT | #3023 |
-| [`react-router@5.3.4`](https://github.com/remix-run/react-router.git) | MIT | #3024 |
+| [`react-router-dom@6.26.1`](https://github.com/remix-run/react-router) | MIT | #15860 |
+| [`react-router@6.26.1`](https://github.com/remix-run/react-router) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/gaearon/react-side-effect.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/ReactTooltip/react-tooltip#readme) | MIT | #5006 |
 | [`[email protected]`](https://github.com/facebook/react.git) | MIT | clearlydefined |
@@ -403,7 +399,6 @@
 | [`[email protected]`](git+https://github.com/ChALkeR/safer-buffer.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/apostrophecms/sanitize-html.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/facebook/react.git) | MIT | #14588 |
-| [`[email protected]`](https://github.com/rtfeldman/seamless-immutable.git) | BSD-3-Clause | clearlydefined |
 | [`[email protected]`](git+https://github.com/fastify/secure-json-parse.git) | BSD-3-Clause | clearlydefined |
 | [`[email protected]`](https://github.com/npm/node-semver.git) | ISC | clearlydefined |
 | [`[email protected]`](https://github.com/nfriedly/set-cookie-parser) | MIT | clearlydefined |

diff --git a/packages/dashboard-frontend/index.html b/packages/dashboard-frontend/index.html
@@ -23,7 +23,7 @@
   <link rel="manifest" crossorigin="use-credentials" href="/dashboard/assets/branding/manifest.json"/>
 </head>
 <body>
-<div class="ui-container" style="height: 100%;">
+<div id="ui-container" style="height: 100%;">
   <div class="main-page-loader">
     <div class="ide-page-loader-content">
       <img src="./assets/branding/loader.svg" alt="Loading..."/>

diff --git a/packages/dashboard-frontend/package.json b/packages/dashboard-frontend/package.json
@@ -38,7 +38,6 @@
     "axios": "^1.7.0",
     "buffer": "^6.0.3",
     "codemirror": "^5.65.16",
-    "connected-react-router": "^6.9.3",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^3.5.0",
     "detect-browser": "^5.3.0",
@@ -58,8 +57,7 @@
     "react-helmet": "^6.1.0",
     "react-pluralize": "^1.6.3",
     "react-redux": "^7.2.9",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^6.26.1",
     "react-tooltip": "^4.5.1",
     "reconnecting-websocket": "^4.4.0",
     "redux": "^4.2.1",
@@ -83,7 +81,8 @@
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.197",
     "@types/qs": "^6.9.7",
-    "@types/react-copy-to-clipboard": "^4.3.0",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "@types/redux-mock-store": "^1.0.2",
@@ -125,7 +124,7 @@
     "stylelint-webpack-plugin": "^4.1.1",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
+    "typescript": "^5.5.4",
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.0",
     "webpack-cli": "^5.1.4",

diff --git a/packages/dashboard-frontend/src/App.tsx b/packages/dashboard-frontend/src/App.tsx
@@ -12,27 +12,27 @@
 
 import '@/app.css';
 
-import { ConnectedRouter } from 'connected-react-router';
 import { History } from 'history';
 import React, { Suspense } from 'react';
+import { HashRouter } from 'react-router-dom';
 
 import AppAlertGroup from '@/components/AppAlertGroup';
 import Fallback from '@/components/Fallback';
 import Head from '@/components/Head';
 import Layout from '@/Layout';
-import Routes from '@/Routes';
+import { AppRoutes } from '@/Routes';
 
 function AppComponent(props: { history: History }): React.ReactElement {
   return (
-    <ConnectedRouter history={props.history}>
+    <HashRouter>
       <Head />
       <AppAlertGroup />
       <Layout history={props.history}>
         <Suspense fallback={Fallback}>
-          <Routes />
+          <AppRoutes />
         </Suspense>
       </Layout>
-    </ConnectedRouter>
+    </HashRouter>
   );
 }
 AppComponent.displayName = 'AppComponent';

diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/UserMenu/index.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/UserMenu/index.tsx
@@ -16,7 +16,7 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { lazyInject } from '@/inversify.config';
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 import { AppAlerts } from '@/services/alerts/appAlerts';
 import { BrandingData } from '@/services/bootstrap/branding.constant';
 import * as InfrastructureNamespacesStore from '@/store/InfrastructureNamespaces';

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/MainList.tsx b/packages/dashboard-frontend/src/Layout/Navigation/MainList.tsx
@@ -15,7 +15,7 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import NavigationMainItem from '@/Layout/Navigation/MainItem';
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 import { AppState } from '@/store';
 import { selectAllWorkspaces } from '@/store/Workspaces/selectors';
 

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/__tests__/index.spec.tsx
@@ -11,10 +11,9 @@
  */
 
 import { Nav } from '@patternfly/react-core';
-import { createMemoryHistory } from 'history';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 
 import { NavigationRecentItemObject } from '@/Layout/Navigation';
 import { NavigationRecentItem } from '@/Layout/Navigation/RecentItem';
@@ -113,12 +112,11 @@ describe('Navigation Item', () => {
 
 function getComponent(item: NavigationRecentItemObject, activeItem = ''): React.ReactElement {
   const store = new FakeStoreBuilder().build();
-  const history = createMemoryHistory();
   return (
     <Provider store={store}>
       <MemoryRouter>
         <Nav>
-          <NavigationRecentItem history={history} item={item} activePath={activeItem} />
+          <NavigationRecentItem item={item} activePath={activeItem} />
         </Nav>
       </MemoryRouter>
     </Provider>

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/index.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/index.tsx
@@ -11,7 +11,6 @@
  */
 
 import { NavItem } from '@patternfly/react-core';
-import { History } from 'history';
 import React from 'react';
 
 import { WorkspaceStatusIndicator } from '@/components/Workspace/Status/Indicator';
@@ -26,7 +25,6 @@ import { TabManager } from '@/services/tabManager';
 import { Workspace } from '@/services/workspace-adapter';
 
 export type Props = {
-  history: History;
   item: NavigationRecentItemObject;
   activePath: string;
 };
@@ -37,7 +35,7 @@ export class NavigationRecentItem extends React.PureComponent<Props> {
 
   private handleClick(workspace: Workspace) {
     const location = buildIdeLoaderLocation(workspace);
-    const href = toHref(this.props.history, location);
+    const href = toHref(location);
     this.tabManager.open(href);
   }
 

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentList.tsx
@@ -12,10 +12,9 @@
 
 import { NavGroup, NavList } from '@patternfly/react-core';
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { NavigationRecentItem } from '@/Layout/Navigation/RecentItem';
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 import { Workspace } from '@/services/workspace-adapter';
 
 import { NavigationRecentItemObject } from '.';
@@ -35,8 +34,7 @@ function RecentWorkspaceItem(props: {
     label: workspaceName,
     workspace: props.workspace,
   };
-  const history = useHistory();
-  return <NavigationRecentItem history={history} item={item} activePath={props.activePath} />;
+  return <NavigationRecentItem item={item} activePath={props.activePath} />;
 }
 
 function NavigationRecentList(props: {

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainItem.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainItem.spec.tsx
@@ -14,7 +14,7 @@ import { HomeIcon } from '@patternfly/react-icons';
 import { render, RenderResult, screen } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 
 import NavigationMainItem from '@/Layout/Navigation/MainItem';
 import devfileApi from '@/services/devfileApi';

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainList.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainList.spec.tsx
@@ -14,7 +14,7 @@ import { Nav } from '@patternfly/react-core';
 import { render, RenderResult, screen } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Store } from 'redux';
 
 import NavigationMainList from '@/Layout/Navigation/MainList';

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
@@ -14,7 +14,7 @@ import { Nav } from '@patternfly/react-core';
 import { render, RenderResult, screen } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Store } from 'redux';
 
 import NavigationRecentList from '@/Layout/Navigation/RecentList';

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/isActive.spec.ts b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/isActive.spec.ts
@@ -11,7 +11,7 @@
  */
 
 import isActive from '@/Layout/Navigation/isActive';
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 
 describe('Active navigation item', () => {
   it('should match equal paths', () => {

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/index.tsx b/packages/dashboard-frontend/src/Layout/Navigation/index.tsx
@@ -17,7 +17,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import NavigationMainList from '@/Layout/Navigation/MainList';
 import NavigationRecentList from '@/Layout/Navigation/RecentList';
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 import { buildGettingStartedLocation, buildWorkspacesLocation } from '@/services/helpers/location';
 import { Workspace } from '@/services/workspace-adapter';
 import { AppState } from '@/store';

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/isActive.ts b/packages/dashboard-frontend/src/Layout/Navigation/isActive.ts
@@ -10,7 +10,7 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 
 export default function isActive(itemPath: string, activePath: string | undefined): boolean {
   if (itemPath === activePath) {

diff --git a/packages/dashboard-frontend/src/Layout/index.tsx b/packages/dashboard-frontend/src/Layout/index.tsx
@@ -14,7 +14,7 @@ import { AlertVariant, Brand, Page } from '@patternfly/react-core';
 import { History } from 'history';
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { matchPath } from 'react-router';
+import { matchPath } from 'react-router-dom';
 
 import { BannerAlert } from '@/components/BannerAlert';
 import { ToggleBarsContext } from '@/contexts/ToggleBars';
@@ -25,7 +25,7 @@ import { IssueComponent } from '@/Layout/ErrorReporter/Issue';
 import { Header } from '@/Layout/Header';
 import { Sidebar } from '@/Layout/Sidebar';
 import StoreErrorsAlert from '@/Layout/StoreErrorsAlert';
-import { ROUTE } from '@/Routes/routes';
+import { ROUTE } from '@/Routes';
 import { AppAlerts } from '@/services/alerts/appAlerts';
 import { IssuesReporterService } from '@/services/bootstrap/issuesReporter';
 import { WarningsReporterService } from '@/services/bootstrap/warningsReporter';
@@ -87,12 +87,11 @@ export class Layout extends React.PureComponent<Props, State> {
   }
 
   public componentDidMount(): void {
-    const matchFactoryLoaderPath = matchPath(this.props.history.location.pathname, {
-      path: ROUTE.FACTORY_LOADER,
-    });
-    const matchIdeLoaderPath = matchPath(this.props.history.location.pathname, {
-      path: ROUTE.IDE_LOADER,
-    });
+    const matchFactoryLoaderPath = matchPath(
+      ROUTE.FACTORY_LOADER,
+      this.props.history.location.pathname,
+    );
+    const matchIdeLoaderPath = matchPath(ROUTE.IDE_LOADER, this.props.history.location.pathname);
     if (matchFactoryLoaderPath !== null || matchIdeLoaderPath !== null) {
       this.hideAllBars();
     }

diff --git a/packages/dashboard-frontend/src/Routes/Redirects.tsx b/packages/dashboard-frontend/src/Routes/Redirects.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2018-2024 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+
+import { buildFactoryLoaderPath } from '@/preload/main';
+import { ROUTE } from '@/Routes';
+
+/**
+ * Redirects to the correct page based on the path.
+ */
+export function Redirects(): React.ReactElement {
+  const location = useLocation();
+  const { pathname, search } = location;
+
+  if (
+    pathname.startsWith('/http://') ||
+    pathname.startsWith('/https://') ||
+    pathname.startsWith('/ssh://') ||
+    pathname.startsWith('/git@')
+  ) {
+    // get rid of the leading slash
+    const locationPath = pathname.replace(/^\//, '') + search;
+
+    const factoryLoaderPath = buildFactoryLoaderPath(locationPath).replace(
+      /^\/f/,
+      ROUTE.FACTORY_LOADER,
+    );
+
+    return <Navigate key="redirect-to-factory" to={factoryLoaderPath} />;
+  }
+
+  return <Navigate key="redirect-to-home" to={ROUTE.HOME} />;
+}