refactor: sw-2981 remove react-router (#1429)

* app, load productView directly
* productView, Missing, load missing product directly
* routerContext, switch to useLocation from react-use
* routerHelpers, refactor config lookup, add dynamic path
* viewReducer, types, remove unused set product

config/jest.setupTests.js

@@ -56,14 +56,6 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn()
 }));
 
-/**
- * Emulate react router dom useLocation
- */
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({ hash: '', search: '' })
-}));
-
 /**
  * Add the displayName property to function based components. Makes sure that snapshot tests have named components
  * instead of displaying a generic "<Component.../>".

fec.config.js

@@ -32,15 +32,7 @@ module.exports = {
     return undefined;
   })(),
   moduleFederation: {
-    exclude: ['react-router-dom'],
-    shared: [
-      {
-        'react-router-dom': {
-          singleton: true,
-          import: false,
-          version: '^6.3.0'
-        }
-      }
-    ]
+    exclude: [],
+    shared: []
   }
 };

package.json

@@ -105,8 +105,6 @@
     "react-dom": "18.2.0",
     "react-i18next": "^15.0.1",
     "react-redux": "^9.1.2",
-    "react-router": "6.26.2",
-    "react-router-dom": "6.26.2",
     "react-use": "^17.5.1",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",

src/app.js

@@ -4,9 +4,10 @@ import { useMount } from 'react-use';
 import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
 import { reduxActions, storeHooks } from './redux';
 import { I18n } from './components/i18n/i18n';
-import { Router } from './components/router';
 import Authentication from './components/authentication/authentication';
 import { helpers } from './common';
+import { Loader } from './components/loader/loader';
+const ProductView = React.lazy(() => import('./components/productView/productView'));
 
 /**
  * @memberof Base
@@ -47,7 +48,9 @@ const App = ({ getLocale, useDispatch: useAliasDispatch, useSelector: useAliasSe
     <I18n locale={locale}>
       {platformNotifications}
       <Authentication>
-        <Router />
+        <React.Suspense fallback={<Loader variant="title" />}>
+          <ProductView />
+        </React.Suspense>
       </Authentication>
     </I18n>
   );