Merge pull request #127 from bcgsc/bugfix/DEVSU-1689-fix-routing-when-deployed-to-subfolder

Bugfix/devsu 1689 fix routing when deployed to subfolder

Author: areisle

app/App.tsx

@@ -104,6 +104,13 @@ ModuleRegistry.registerModules([
   CsvExportModule,
 ]);
 
+/**
+ * this is the subfolder (if any) that the application is deployed under
+ * @note a properly formatted 'basename' cannot have a trailing slash
+ * https://v5.reactrouter.com/web/api/BrowserRouter/basename-string
+ */
+const basename = window._env_.PUBLIC_PATH.endsWith('/') ? window._env_.PUBLIC_PATH.slice(0, -1) : window._env_.PUBLIC_PATH;
+
 /**
  * Entry point to application. Handles routing, app theme, and logged in state.
  */
@@ -115,7 +122,7 @@ function App() {
           <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
             <SnackbarUtilsConfigurator />
             <CssBaseline />
-            <BrowserRouter basename={window._env_.PUBLIC_PATH}>
+            <BrowserRouter basename={basename}>
               <CacheBuster>
                 <MainView />
               </CacheBuster>

app/components/Sidebar/__tests__/Sidebar.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { StaticRouter } from 'react-router-dom';
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import Sidebar from '..';
+import ResourceContext from '../../../context/ResourceContext';
+
+const context = {};
+const permissions = {
+  germlineAccess: true,
+  reportAccess: true,
+  adminAccess: true,
+};
+
+// otherwise nothing will render due to the `Hidden` component
+// https://github.com/enzymejs/enzyme/issues/2179#issuecomment-529320192
+const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'md' } } });
+
+test('includes basename in links when provided', async () => {
+  render(
+    <MuiThemeProvider theme={theme}>
+      <ResourceContext.Provider value={permissions}>
+        <StaticRouter location="/ipr" context={context} basename="/ipr">
+          <Sidebar />
+        </StaticRouter>
+      </ResourceContext.Provider>
+    </MuiThemeProvider>,
+  );
+
+  let link = (await screen.findByText('Reports')).closest('a');
+  expect(link.href).toEqual(`${window.location.origin}/ipr/reports`);
+
+  link = (await screen.findByText('Germline')).closest('a');
+  expect(link.href).toEqual(`${window.location.origin}/ipr/germline`);
+
+  link = (await screen.findByText('Users')).closest('a');
+  expect(link.href).toEqual(`${window.location.origin}/ipr/admin/users`);
+});
+
+test('has valid links when no basename provided', async () => {
+  render(
+    <MuiThemeProvider theme={theme}>
+      <ResourceContext.Provider value={permissions}>
+        <StaticRouter location="/" context={context} basename="">
+          <Sidebar />
+        </StaticRouter>
+      </ResourceContext.Provider>
+    </MuiThemeProvider>,
+  );
+
+  let link = (await screen.findByText('Reports')).closest('a');
+  expect(link.href).toEqual(`${window.location.origin}/reports`);
+
+  link = (await screen.findByText('Germline')).closest('a');
+  expect(link.href).toEqual(`${window.location.origin}/germline`);
+
+  link = (await screen.findByText('Users')).closest('a');
+  expect(link.href).toEqual(`${window.location.origin}/admin/users`);
+});

app/components/Sidebar/index.tsx

@@ -1,14 +1,14 @@
 import React, { useContext, useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import {
   Drawer,
   Divider,
   Hidden,
   IconButton,
-  Link,
   List,
   ListItem,
   Typography,
+  Link as MuiLink,
 } from '@material-ui/core';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import AssignmentIcon from '@material-ui/icons/Assignment';
@@ -51,7 +51,7 @@ const Sidebar = (): JSX.Element => {
             `}
             disableGutters
           >
-            <Link className="sidebar__link" href="/reports">
+            <Link className="sidebar__link" to="/reports">
               <AssignmentIcon color="action" />
               <Typography
                 display="inline"
@@ -73,7 +73,7 @@ const Sidebar = (): JSX.Element => {
             `}
             disableGutters
           >
-            <Link className="sidebar__link" href="/germline">
+            <Link className="sidebar__link" to="/germline">
               <GermlineIcon className="sidebar__custom-icon" />
               <Typography
                 display="inline"
@@ -88,7 +88,7 @@ const Sidebar = (): JSX.Element => {
           className="sidebar__list-item"
           disableGutters
         >
-          <Link
+          <MuiLink
             className="sidebar__link"
             href={window._env_.GRAPHKB_URL}
             rel="noopener noreferrer"
@@ -101,7 +101,7 @@ const Sidebar = (): JSX.Element => {
             >
               Graph Knowledgebase
             </Typography>
-          </Link>
+          </MuiLink>
         </ListItem>
         <ListItem
           className={`
@@ -110,7 +110,7 @@ const Sidebar = (): JSX.Element => {
           `}
           disableGutters
         >
-          <Link className="sidebar__link" href="/terms">
+          <Link className="sidebar__link" to="/terms">
             <HelpOutlineIcon color="action" />
             <Typography
               display="inline"
@@ -130,7 +130,7 @@ const Sidebar = (): JSX.Element => {
               `}
               disableGutters
             >
-              <Link className="sidebar__link" href="/admin/users">
+              <Link className="sidebar__link" to="/admin/users">
                 <PersonIcon color="action" />
                 <Typography
                   display="inline"
@@ -147,7 +147,7 @@ const Sidebar = (): JSX.Element => {
               `}
               disableGutters
             >
-              <Link className="sidebar__link" href="/admin/groups">
+              <Link className="sidebar__link" to="/admin/groups">
                 <PeopleIcon color="action" />
                 <Typography
                   display="inline"
@@ -164,7 +164,7 @@ const Sidebar = (): JSX.Element => {
               `}
               disableGutters
             >
-              <Link className="sidebar__link" href="/admin/projects">
+              <Link className="sidebar__link" to="/admin/projects">
                 <FolderSharedIcon color="action" />
                 <Typography
                   display="inline"
@@ -181,7 +181,7 @@ const Sidebar = (): JSX.Element => {
               `}
               disableGutters
             >
-              <Link className="sidebar__link" href="/template">
+              <Link className="sidebar__link" to="/template">
                 <DashboardIcon color="action" />
                 <Typography
                   display="inline"

package-lock.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ipr-client",
-  "version": "6.6.2",
+  "version": "6.6.3",
   "keywords": [],
   "license": "GPL-3.0",
   "sideEffects": false,