cockpit: switch to hashrouter

The browser router doesn't seem to work inside cockpit, switching
to the hashrouter resolves this.

cockpit/webpack.config.ts

@@ -27,6 +27,9 @@ module.exports = {
   mode,
   devtool,
   plugins,
+  devServer: {
+    historyApiFallback: true, // Ensures all routes are served with `index.html`
+  },
   resolve: {
     fallback: {
       path: require.resolve('path-browserify'),

src/AppCockpit.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 
 import { Router } from './Router';
 import { onPremStore as store } from './store';
@@ -15,9 +15,9 @@ const Application = () => {
   return (
     <React.Fragment>
       <NotificationsPortal />
-      <BrowserRouter>
+      <HashRouter>
         <Router />
-      </BrowserRouter>
+      </HashRouter>
     </React.Fragment>
   );
 };

src/Utilities/path.ts

@@ -1,4 +1,9 @@
 function resolveRelPath(path = '') {
+  if (process.env.IS_ON_PREMISE) {
+    // We're using the hash router
+    // so we can just return the path
+    return path.length > 0 ? path : '/';
+  }
   return `/insights/image-builder${path.length > 0 ? `/${path}` : ''}`;
 }