fix: fix router & assets to allow usage of non-root PUBLIC_URL

src/AppRoutes.js

@@ -5,17 +5,19 @@ import { Navigate, Route, createBrowserRouter, RouterProvider, createRoutesFromE
 import { getAllTabs } from './AppLayout';
 import { UserStatusGate } from './components/UserStatusGate';
 import { TabLayout } from './layouts';
+import { RouterUtils } from './utils';
 import Workspaces from './views/Workspaces';
 
 const AppRoutes = () => {
   const providedUrl = sessionStorage.getItem('providedUrl');
   const providedUrlBeforeSignIn = sessionStorage.getItem('providedUrlBeforeSignIn');
+  const redirectPath = RouterUtils.getLocationRelativePath(providedUrlBeforeSignIn ?? providedUrl ?? '/workspaces');
   const tabs = getAllTabs();
 
   const router = createBrowserRouter(
     createRoutesFromElements(
       <>
-        <Route path="/" element={<Navigate to={providedUrlBeforeSignIn || providedUrl || '/workspaces'} replace />} />
+        <Route path="/" element={<Navigate to={redirectPath} replace />} />
         <Route
           path="/workspaces"
           element={
@@ -55,7 +57,7 @@ const AppRoutes = () => {
           path="/sign-in"
           element={
             <UserStatusGate>
-              <Navigate to={providedUrlBeforeSignIn || providedUrl || '/workspaces'} />
+              <Navigate to={redirectPath} />
             </UserStatusGate>
           }
         />
@@ -69,7 +71,10 @@ const AppRoutes = () => {
         />
         <Route path="*" element={<Navigate to={'/workspaces'} />} />
       </>
-    )
+    ),
+    {
+      basename: process.env.PUBLIC_URL ?? '',
+    }
   );
 
   return <RouterProvider router={router} />;

src/components/AboutContent/AboutContent.js

@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
 export const AboutContent = ({ isDarkTheme }) => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const logo = isDarkTheme ? pictureDark.darkLogo : pictureLight.lightLogo;
+  const logo = `${process.env?.PUBLIC_URL ?? ''}${isDarkTheme ? pictureDark.darkLogo : pictureLight.lightLogo}`;
 
   const currentWorkspaceData = useWorkspaceData();
   const organizationUrl =

src/components/AppBar/components/Logo.js

@@ -1,6 +1,6 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
-import React from 'react';
+import React, { useMemo } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import { useIsDarkTheme } from '../../../state/hooks/ApplicationHooks';
 import { pictureDark, pictureLight } from '../../../theme';
@@ -13,13 +13,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 export const Logo = () => {
   const isDarkThemeUsed = useIsDarkTheme();
-  const classes = useStyles();
-  return (
-    <img
-      alt="Cosmo Tech"
-      height="28px"
-      src={isDarkThemeUsed ? pictureDark.darkLogo : pictureLight.lightLogo}
-      className={classes.logo}
-    />
+  const logoPath = useMemo(
+    () => `${process.env?.PUBLIC_URL ?? ''}${isDarkThemeUsed ? pictureDark.darkLogo : pictureLight.lightLogo}`,
+    [isDarkThemeUsed]
   );
+  const classes = useStyles();
+  return <img alt="Cosmo Tech" height="28px" src={logoPath} className={classes.logo} />;
 };

src/services/config/Auth.js

@@ -21,7 +21,7 @@ const MSAL_CONFIG = {
   msalConfig: {
     auth: {
       clientId: APP_REGISTRATION_CLIENT_ID,
-      redirectUri: window.location.protocol + '//' + window.location.host + '/sign-in',
+      redirectUri: `${window.location.protocol}//${window.location.host}${process.env?.PUBLIC_URL ?? ''}/sign-in`,
       authority: `https://login.microsoftonline.com/${AZURE_TENANT_ID}`,
       knownAuthorities: [`https://login.microsoftonline.com/${AZURE_TENANT_ID}`],
     },

src/services/config/i18next.js

@@ -27,7 +27,7 @@ i18next
     supportedLngs: Object.keys(LANGUAGES),
     detection: langDetectorOptions,
     backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json',
+      loadPath: `${process.env?.PUBLIC_URL ?? ''}/locales/{{lng}}/{{ns}}.json`,
     },
   });
 

src/state/sagas/app/FetchInitialData/FetchInitialData.js

@@ -5,6 +5,7 @@ import { put, takeEvery, call } from 'redux-saga/effects';
 import ConfigService from '../../../../services/ConfigService';
 import { Api } from '../../../../services/config/Api';
 import { DATASET_PERMISSIONS_MAPPING } from '../../../../services/config/ApiConstants';
+import { RouterUtils } from '../../../../utils';
 import { parseError } from '../../../../utils/ErrorsUtils';
 import { APPLICATION_ACTIONS_KEY } from '../../../commons/ApplicationConstants';
 import { STATUSES } from '../../../commons/Constants';
@@ -16,15 +17,14 @@ import { getAllWorkspaces } from '../../workspace/GetAllWorkspaces/GetAllWorkspa
 const ORGANIZATION_ID = ConfigService.getParameterValue('ORGANIZATION_ID');
 
 const providedUrlBeforeSignIn = sessionStorage.getItem('providedUrlBeforeSignIn');
-const providedUrl = window.location.pathname;
-const path = matchPath(':firstParam/*', providedUrlBeforeSignIn || providedUrl);
-const firstParam = path?.params?.firstParam;
+const relativePath = RouterUtils.getLocationRelativePath(providedUrlBeforeSignIn ?? window.location.pathname);
+const firstParam = matchPath(':firstParam/*', relativePath)?.params?.firstParam;
 const isRedirectedToWorkspaces = !firstParam || ['workspaces', 'sign-in', 'accessDenied'].includes(firstParam);
 let providedWorkspaceId;
 sessionStorage.removeItem('providedUrl');
 if (!isRedirectedToWorkspaces) {
   providedWorkspaceId = firstParam;
-  sessionStorage.setItem('providedUrl', providedUrl);
+  sessionStorage.setItem('providedUrl', relativePath);
 }
 
 export function* fetchAllInitialData() {

src/utils/RouterUtils.js

@@ -0,0 +1,11 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+const getLocationRelativePath = (path) => {
+  const routerBasename = process.env.PUBLIC_URL ?? '';
+  return path.startsWith(routerBasename) ? path.substring(routerBasename.length) : path;
+};
+
+export const RouterUtils = {
+  getLocationRelativePath,
+};

src/utils/index.js

@@ -7,6 +7,7 @@ export { ConfigUtils } from './ConfigUtils';
 export { DatasetsUtils } from './DatasetsUtils';
 export { OrganizationsUtils } from './OrganizationsUtils';
 export { PowerBIUtils } from './PowerBIUtils';
+export { RouterUtils } from './RouterUtils';
 export { TranslationUtils } from './TranslationUtils';
 export { SolutionsUtils } from './SolutionsUtils';
 export { ScenariosUtils } from './ScenariosUtils';

src/views/SignIn/style.js

@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundImage: `url(${theme.picture.auth})`,
+    backgroundImage: `url(${process.env?.PUBLIC_URL ?? ''}${theme.picture.auth})`,
     backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center bottom',