configure pathname prefix depending on build env vars (#194)

* update vite base path by env var; fix .env formatting

* update links to use relative bath including base

* alert content use redux actions

* remove uneeded Link wrapper

.env.production

@@ -1,6 +1,7 @@
-VITE_ALERT_EDITOR: false
-VITE_FORMULA_EDITOR: true
-VITE_INSTRUMENT_CHART: true
-VITE_CROSS_SECTION: true
-VITE_DEVELOPMENT_BANNER: false
-VITE_API_URL: https://midas.sec.usace.army.mil/api
+VITE_ALERT_EDITOR=false
+VITE_FORMULA_EDITOR=true
+VITE_INSTRUMENT_CHART=true
+VITE_CROSS_SECTION=true
+VITE_DEVELOPMENT_BANNER=false
+VITE_API_URL=https://midas.sec.usace.army.mil/api
+VITE_URL_BASE_PATH=/midas

.env.test

@@ -1,6 +1,7 @@
-VITE_ALERT_EDITOR: false
-VITE_FORMULA_EDITOR: true
-VITE_INSTRUMENT_CHART: true
-VITE_CROSS_SECTION: true
-VITE_DEVELOPMENT_BANNER: false
-VITE_API_URL: https://midas-test.cwbi.us/api
+VITE_ALERT_EDITOR=false
+VITE_FORMULA_EDITOR=true
+VITE_INSTRUMENT_CHART=true
+VITE_CROSS_SECTION=true
+VITE_DEVELOPMENT_BANNER=false
+VITE_API_URL=https://midas-test.cwbi.us/api
+VITE_URL_BASE_PATH=/midas

.github/workflows/develop.yml

@@ -18,6 +18,7 @@ jobs:
       VITE_CROSS_SECTION: true
       VITE_DEVELOPMENT_BANNER: true
       VITE_API_URL: https://develop-midas-api.rsgis.dev
+      VITE_URL_BASE_PATH: ''
     runs-on: ubuntu-latest
     strategy:
       matrix:

.github/workflows/stable.yml

@@ -14,6 +14,7 @@ jobs:
     env:
       VITE_FORMULA_EDITOR: true
       VITE_API_URL: https://midas-api.rsgis.dev
+      VITE_URL_BASE_PATH: ''
     runs-on: ubuntu-latest
     strategy:
       matrix:

src/app-bundles/collection-group-bundle.js

@@ -20,11 +20,11 @@ export default createRestBundle({
   urlParamSelectors: ['selectProjectsIdByRoute'],
   prefetch: (store) => {
     const hash = store.selectHash();
-    const url = store.selectUrlObject();
+    const pathname = store.selectRelativePathname();
     const whiteList = ['dashboard'];
 
     return (
-      whiteList.includes(hash) || url.pathname.includes('/collection-groups/')
+      whiteList.includes(hash) || pathname.includes('/collection-groups/')
     );
   },
   addons: {

src/app-bundles/create-auth-bundle.js

@@ -89,7 +89,7 @@ const createAuthBundle = (opts) => {
         });
         store.doRemoveProfile();
         const redirect = store.selectAuthRedirectOnLogout();
-        if (redirect) store.doUpdateUrl(redirect);
+        if (redirect) store.doUpdateRelativeUrl(redirect);
       }
     },
 

src/app-bundles/create-url-base-path-bundle.js

@@ -0,0 +1,13 @@
+import { createSelector } from "redux-bundler";
+
+export default ({ base }) => {
+  return {
+    name: 'urlBasePath',
+
+    selectRelativePathname: createSelector('selectPathname', pathname => pathname.replace(base, '')),
+
+    doUpdateRelativeUrl: (url, opts) => ({ store }) => {
+      store.doUpdateUrl(`${base}${url}`, opts)
+    },
+  }
+};

src/app-bundles/home-data-bundle.js

@@ -11,11 +11,7 @@ export default createRestBundle({
   getTemplate: '/home',
   fetchActions: ['URL_UPDATED', 'AUTH_LOGGED_IN'],
   forceFetchActions: [],
-  prefetch: store => {
-    const url = store.selectUrlObject();
-
-    return url.pathname === '/';
-  },
+  prefetch: store => store.selectRelativePathname() === '/',
   addons: {
     selectHomeData: createSelector('selectHomeItems', (items) => {
       const data = items && items.length ? items[0] : null;

src/app-bundles/inclinometer-measurements.js

@@ -25,12 +25,12 @@ export default createRestBundle({
   mergeItems: true,
   prefetch: (store) => {
     const hash = store.selectHash();
-    const url = store.selectUrlObject();
+    const pathname = store.selectRelativePathname();
 
     const whitelist = [];
     const pathnameWhitelist = ['/instruments/', '/groups/', '/collection-groups/'];
 
-    return whitelist.includes(hash) || pathnameWhitelist.some(elem => url.pathname.includes(elem));
+    return whitelist.includes(hash) || pathnameWhitelist.some(elem => pathname.includes(elem));
   },
   addons: {
     doFetchInclinometerMeasurementsByTimeseriesId: (timeseriesId) => ({ dispatch, apiGet }) => {

src/app-bundles/index.js

@@ -7,6 +7,7 @@ import {
 import createAuthBundle from './create-auth-bundle';
 // Required change from @corpsmap/create-jwt-api-bundle;
 import createJwtApiBundle from './create-jwt-api-bundle';
+import createUrlBasePathBundle from './create-url-base-path-bundle';
 import cache from '../common/helpers/cache';
 
 import alertReadBundle from './alert-read-bundle';
@@ -108,6 +109,7 @@ export default composeBundles(
     cacheFn: cache.set,
   }),
   createUrlBundle(),
+  createUrlBasePathBundle({ base: import.meta.env.VITE_URL_BASE_PATH ?? '' }),
   alertReadBundle,
   alertSubscribeBundle,
   alertUnreadBundle,

src/app-bundles/instrument-bundle.js

@@ -31,7 +31,7 @@ export default createRestBundle({
   urlParamSelectors: ['selectProjectsIdByRoute'],
   prefetch: (store) => {
     const hash = store.selectHash();
-    const url = store.selectUrlObject();
+    const pathname = store.selectRelativePathname();
     const whiteList = [
       'dashboard',
       'uploader',
@@ -49,7 +49,7 @@ export default createRestBundle({
 
     return (
       whiteList.includes(hash) ||
-      pathnameWhitelist.some((elem) => url.pathname.includes(elem))
+      pathnameWhitelist.some((elem) => pathname.includes(elem))
     );
   },
   addons: {

src/app-bundles/instrument-group-bundle.js

@@ -20,10 +20,10 @@ export default createRestBundle({
   urlParamSelectors: ['selectProjectsIdByRoute'],
   prefetch: (store) => {
     const hash = store.selectHash();
-    const url = store.selectUrlObject();
+    const pathname = store.selectRelativePathname();
     const whiteList = ['dashboard', 'explorer'];
 
-    return whiteList.includes(hash) || url.pathname.includes('/groups/');
+    return whiteList.includes(hash) || pathname.includes('/groups/');
   },
   addons: {
     selectInstrumentGroupsIdByRoute: createSelector(

src/app-bundles/profile-bundle.js

@@ -73,15 +73,15 @@ export default createRestBundle({
     }),
     reactProfileExists: createSelector(
       'selectAuthIsLoggedIn',
-      'selectPathname',
+      'selectRelativePathname',
       'selectProfileIsLoading',
       'selectProfileActive',
       (isLoggedIn, path, profileIsLoading, profile) => {
         if (isLoggedIn && !profileIsLoading) {
           if (!profile) {
             if (path !== '/signup')
               return {
-                actionCreator: 'doUpdateUrl',
+                actionCreator: 'doUpdateRelativeUrl',
                 args: ['/signup'],
               };
           }
@@ -91,11 +91,11 @@ export default createRestBundle({
     reactProfileCreatedRedirect: createSelector(
       'selectProfileActive',
       'selectAuthIsLoggedIn',
-      'selectPathname',
+      'selectRelativePathname',
       (profile, isLoggedIn, path) => {
         if (path === '/signup' && (profile || !isLoggedIn))
           return {
-            actionCreator: 'doUpdateUrl',
+            actionCreator: 'doUpdateRelativeUrl',
             args: ['/'],
           };
       }

src/app-bundles/routes-bundle.js

@@ -11,19 +11,21 @@ import Profile from '../app-pages/profile/userProfile';
 import Project from '../app-pages/project';
 import SignUp from '../app-pages/signup/signup';
 
+const base = import.meta.env.VITE_URL_BASE_PATH ?? ''
+
 export default createRouteBundle(
   {
-    '': Home,
-    '/': Home,
-    '/help': Help,
-    '/logout': Logout,
-    '/signup': SignUp,
-    '/profile': Profile,
-    '/not-found': NotFound,
-    '/:projectSlug': Project,
-    '/:projectSlug/groups/:groupSlug': InstrumentGroup,
-    '/:projectSlug/instruments/:instrumentSlug': Instrument,
-    '/:projectSlug/collection-groups/:collectionGroupSlug': CollectionGroup,
+    [`${base}`]: Home,
+    [`${base}/`]: Home,
+    [`${base}/help`]: Help,
+    [`${base}/logout`]: Logout,
+    [`${base}/signup`]: SignUp,
+    [`${base}/profile`]: Profile,
+    [`${base}/not-found`]: NotFound,
+    [`${base}/:projectSlug`]: Project,
+    [`${base}/:projectSlug/groups/:groupSlug`]: InstrumentGroup,
+    [`${base}/:projectSlug/instruments/:instrumentSlug`]: Instrument,
+    [`${base}/:projectSlug/collection-groups/:collectionGroupSlug`]: CollectionGroup,
     '*': NotFound,
   }
 );

src/app-bundles/time-series-measurements-bundle.js

@@ -28,12 +28,12 @@ export default createRestBundle({
   mergeItems: true,
   prefetch: (store) => {
     const hash = store.selectHash();
-    const url = store.selectUrlObject();
+    const pathname = store.selectRelativePathname();
 
     const whitelist = [];
     const pathnameWhitelist = ['/instruments/', '/groups/', '/collection-groups/'];
 
-    return whitelist.includes(hash) || pathnameWhitelist.some(elem => url.pathname.includes(elem));
+    return whitelist.includes(hash) || pathnameWhitelist.some(elem => pathname.includes(elem));
   },
   addons: {
     doTimeseriesMeasurementsFetchById: ({

src/app-components/navigation/navBar.jsx

@@ -27,12 +27,12 @@ const NavBar = connect(
   'doAuthLogin',
   'selectAuthIsLoggedIn',
   'selectProjectsByRoute',
-  'selectPathname',
+  'selectRelativePathname',
   ({
     doAuthLogin,
     authIsLoggedIn,
     projectsByRoute: project,
-    pathname,
+    relativePathname: pathname,
   }) => {
     const [hideBrand, setHideBrand] = useState(false);
     const [brand, setBrand] = useState(null);
@@ -92,7 +92,7 @@ const NavBar = connect(
           <div className='collapse navbar-collapse'>
             <ul className='navbar-nav mr-auto' />
             <ul className='navbar-nav'>
-              {window.location.pathname === '/help' ? (
+              {pathname === '/help' ? (
                 <NavItem href='/'>Home</NavItem>
               ) : (
                 <NavItem href='/help'>Help</NavItem>

src/app-components/navigation/navItem.jsx

@@ -4,8 +4,8 @@ import { connect } from 'redux-bundler-react';
 import { classArray } from '../../common/helpers/utils';
 
 const NavItem = connect(
-  'selectPathname',
-  ({ pathname, href, handler, children, hidden }) => {
+  'selectRelativePathname',
+  ({ relativePathname: pathname, href, handler, children, hidden }) => {
     const cls = classArray([
       'pointer',
       'nav-item',

src/app-components/pageContent.jsx

@@ -7,9 +7,9 @@ const hasDevBanner = import.meta.env.VITE_DEVELOPMENT_BANNER === 'true';
 const blacklist = ['/', '/help'];
 
 const PageContent = connect(
-  'selectPathname',
+  'selectRelativePathname',
   ({
-    pathname,
+    relativePathname: pathname,
     children,
   }) => {
     const pageClasses = classArray([

src/app-pages/home/project-list.jsx

@@ -76,9 +76,9 @@ const FilterItem = ({ item, filter, setFilter, active }) => {
 };
 
 export default connect(
-  'doUpdateUrl',
+  'doUpdateRelativeUrl',
   'selectProjectsItemsWithLinks',
-  ({ doUpdateUrl, projectsItemsWithLinks: projects }) => {
+  ({ doUpdateRelativeUrl, projectsItemsWithLinks: projects }) => {
     const [filter, setFilter] = useState('All');
     const [filteredProjects, setFilteredProjects] = useState(projects);
     const [isTableMode, setIsTableMode] = useState(true);
@@ -94,7 +94,7 @@ export default connect(
 
       const project = projects.find(p => p.title === value);
 
-      doUpdateUrl(project.href);
+      doUpdateRelativeUrl(project.href);
     };
 
     const filterList = projects

src/app-pages/profile/userProfile.jsx

@@ -19,7 +19,7 @@ const buildProjectContent = (projects = []) => {
   );
 };
 
-const buildAlertContent = (alerts = []) => {
+const buildAlertContent = (alerts = [], onClick = () => {}) => {
   if (!alerts.length) return <p>No alerts!</p>;
 
   return (
@@ -32,7 +32,7 @@ const buildAlertContent = (alerts = []) => {
         return (
           <div
             key={i}
-            onClick={() => window.location.assign(url)}
+            onClick={() => onClick(url)}
             className={`alert-container${read ? '' : ' unread'} pointer`}
             title={`Go To ${instrument_name}`}
           >
@@ -53,15 +53,16 @@ const buildAlertContent = (alerts = []) => {
 const UserProfile = connect(
   'selectProfileAlerts',
   'selectAuthTokenPayload',
-  ({ profileAlerts: alerts, authTokenPayload: user }) => {
+  'doUpdateRelativeUrl',
+  ({ profileAlerts: alerts, authTokenPayload: user, doUpdateRelativeUrl }) => {
     const tabs = [
       {
         title: 'Projects',
-        content: buildProjectContent(),
+        content: buildProjectContent([], doUpdateRelativeUrl),
       },
       {
         title: 'Alerts',
-        content: buildAlertContent(alerts),
+        content: buildAlertContent(alerts, doUpdateRelativeUrl),
       }
     ];
 

src/app-pages/project/dashboard/cards/dataLoggerCard.jsx

@@ -16,7 +16,7 @@ const errorCountSort = (rowA, rowB) => {
   return errorsA?.length - errorsB?.length;
 };
 
-const NoDataLoggersDisplay = ({ doUpdateUrl, project }) => (
+const NoDataLoggersDisplay = ({ doUpdateRelativeUrl, project }) => (
   <div className='m-3'>
     No Data Loggers in this project.
     <br />
@@ -30,18 +30,18 @@ const NoDataLoggersDisplay = ({ doUpdateUrl, project }) => (
         variant='info'
         text='Navigate to Data Loggers'
         className='mt-2 d-block'
-        handleClick={() => doUpdateUrl(`/${project.slug}#data-loggers`)}
+        handleClick={() => doUpdateRelativeUrl(`/${project.slug}#data-loggers`)}
       />
     </RoleFilter>
   </div>
 );
 
 const DataLoggerCard = connect(
-  'doUpdateUrl',
+  'doUpdateRelativeUrl',
   'selectProjectsByRoute',
   'selectProjectDataLoggers',
   ({
-    doUpdateUrl,
+    doUpdateRelativeUrl,
     projectsByRoute: project,
     projectDataLoggers,
   }) => (
@@ -83,7 +83,7 @@ const DataLoggerCard = connect(
               ),
             }]}
           />
-        ) : <NoDataLoggersDisplay doUpdateUrl={doUpdateUrl} project={project} />}
+        ) : <NoDataLoggersDisplay doUpdateRelativeUrl={doUpdateRelativeUrl} project={project} />}
       </Card.Body>
     </Card>
   )