Merge pull request #5651 from beyondessential/release-2024-21

Release 2024-21
beyondessential · May 21, 2024 · bd2afa6 · bd2afa6
2 parents 6f8923b + d812a8c
commit bd2afa6
Show file tree

Hide file tree

Showing 339 changed files with 12,218 additions and 7,178 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -83,6 +83,7 @@ jobs:
 
   run_tests:
     name: Run tests
+    timeout-minutes: 15 # Sometimes Jest doesn’t exit properly for meditrak-app-server tests
     runs-on: ubuntu-latest
     env:
       # common

diff --git a/packages/admin-panel/package.json b/packages/admin-panel/package.json
@@ -66,9 +66,10 @@
     "react-password-strength-bar": "^0.3.2",
     "react-query": "^3.19.0",
     "react-redux": "^5.0.6",
-    "react-router-dom": "^5.2.0",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0",
     "react-select": "^1.2.1",
-    "react-table-v6": "npm:react-table@^6.7.6",
+    "react-table": "^7.8.0",
     "reactstrap": "^5.0.0",
     "redux": "^3.7.2",
     "redux-auth-wrapper": "^2.0.1",

diff --git a/packages/admin-panel/src/App.jsx b/packages/admin-panel/src/App.jsx
@@ -1,18 +1,51 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { Footer, Main, NavPanel, PageContentWrapper, PageWrapper, SecondaryNavbar } from './layout';
+import { AppPageLayout, Footer } from './layout';
 import { ROUTES } from './routes';
 import { PROFILE_ROUTES } from './profileRoutes';
-import { getHasBESAdminPanelAccess, getUser, PrivateRoute } from './authentication';
+import { getHasBESAdminAccess, getUser, PrivateRoute } from './authentication';
 import { LoginPage } from './pages/LoginPage';
 import { LogoutPage } from './pages/LogoutPage';
-import { labelToId } from './utilities';
+import { ResourcePage } from './pages/resources/ResourcePage';
+import { TabPageLayout } from './layout/TabPageLayout';
+
+export const getFlattenedChildViews = (route, basePath = '') => {
+  return route.childViews.reduce((acc, childView) => {
+    const { nestedView } = childView;
+
+    const childViewWithRoute = {
+      ...childView,
+      basePath,
+      path: `${route.path}${childView.path}`,
+      to: `${basePath}${route.path}${childView.path}`, // this is an absolute route so that the breadcrumbs work
+    };
+
+    if (!nestedView) return [...acc, childViewWithRoute];
+
+    const updatedNestedView = nestedView
+      ? {
+          ...nestedView,
+          path: `${route.path}${childView.path}${nestedView.path}`,
+          parent: childViewWithRoute,
+        }
+      : null;
+
+    return [
+      ...acc,
+      {
+        ...childViewWithRoute,
+        nestedView: updatedNestedView,
+      },
+      updatedNestedView,
+    ];
+  }, []);
+};
 
 export const App = ({ user, hasBESAdminAccess }) => {
   const userHasAccessToTab = tab => {
@@ -27,87 +60,54 @@ export const App = ({ user, hasBESAdminAccess }) => {
     return ROUTES.map(route => {
       return {
         ...route,
-        tabs: route.tabs.filter(tab => userHasAccessToTab(tab)),
+        childViews: route.childViews.filter(childView => userHasAccessToTab(childView)),
       };
     }).filter(route => {
       if (route.isBESAdminOnly) return !!hasBESAdminAccess;
-      return route.tabs.length > 0;
+      return route.childViews.length > 0;
     });
   };
 
   const accessibleRoutes = getAccessibleRoutes();
   return (
-    <Switch>
-      <Route path="/login" exact>
-        <LoginPage />
-      </Route>
-      <Route path="/logout" exact>
-        <LogoutPage />
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/logout" element={<LogoutPage />} />
+      <Route path="/" element={<PrivateRoute />}>
+        <Route element={<AppPageLayout user={user} routes={accessibleRoutes} />}>
+          <Route index element={<Navigate to="/surveys" replace />} />
+          <Route path="*" element={<Navigate to="/surveys" replace />} />
+          {[...accessibleRoutes, ...PROFILE_ROUTES].map(route => (
+            <Route
+              key={route.path || route.label}
+              path={route.path}
+              element={
+                <TabPageLayout
+                  routes={route.childViews}
+                  basePath={route.path}
+                  Footer={<Footer />}
+                />
+              }
+            >
+              {getFlattenedChildViews(route).map(childRoute => (
+                <Route
+                  key={childRoute.path || childRoute.title}
+                  path={childRoute.path}
+                  element={
+                    childRoute.Component ? (
+                      <childRoute.Component />
+                    ) : (
+                      <ResourcePage {...childRoute} hasBESAdminAccess={hasBESAdminAccess} />
+                    )
+                  }
+                />
+              ))}
+              <Route path="*" element={<Navigate to={route.childViews[0].path} replace />} />
+            </Route>
+          ))}
+        </Route>
       </Route>
-      <PrivateRoute path="/">
-        <PageWrapper>
-          <NavPanel
-            links={accessibleRoutes.map(route => ({
-              ...route,
-              id: `app-tab-${labelToId(route.label)}`,
-            }))}
-            user={user}
-            userLinks={[
-              { label: 'Profile', to: '/profile' },
-              { label: 'Logout', to: '/logout' },
-            ]}
-          />
-          <Main>
-            <PageContentWrapper>
-              <Switch>
-                {[...accessibleRoutes, ...PROFILE_ROUTES].map(route => (
-                  <Route
-                    key={route.to}
-                    path={route.to}
-                    render={({ match }) => {
-                      return (
-                        <>
-                          <SecondaryNavbar
-                            links={route.tabs.map(tab => ({
-                              ...tab,
-                              id: `app-subTab-${labelToId(tab.label)}`,
-                            }))}
-                            baseRoute={match.url}
-                          />
-                          <Switch>
-                            {route.tabs.map(tab => (
-                              <Route
-                                key={`${route.to}-${tab.to}`}
-                                path={`${route.to}${tab.to}`}
-                                exact
-                              >
-                                <tab.component
-                                  hasBESAdminAccess={hasBESAdminAccess}
-                                  needsBESAdminAccess={tab.needsBESAdminAccess}
-                                />
-                              </Route>
-                            ))}
-                            <Redirect to={route.to} />
-                          </Switch>
-                        </>
-                      );
-                    }}
-                  />
-                ))}
-                <Redirect to="surveys" />
-              </Switch>
-              <Footer />
-            </PageContentWrapper>
-          </Main>
-        </PageWrapper>
-      </PrivateRoute>
-      <Redirect
-        to={{
-          pathname: '/login',
-          state: { from: window.location.pathname },
-        }}
-      />
-    </Switch>
+    </Routes>
   );
 };
 
@@ -128,7 +128,7 @@ App.propTypes = {
 export default connect(
   state => ({
     user: getUser(state),
-    hasBESAdminAccess: getHasBESAdminPanelAccess(state),
+    hasBESAdminAccess: getHasBESAdminAccess(state),
   }),
   null,
 )(App);
diff --git a/packages/admin-panel/src/VizBuilderApp/App.jsx b/packages/admin-panel/src/VizBuilderApp/App.jsx
@@ -5,7 +5,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Switch, Route } from 'react-router-dom';
+import { renderMatches, useLocation } from 'react-router';
+import { matchRoutes } from 'react-router-dom';
 import { FullPageLoader } from '@tupaia/ui-components';
 import { Main } from './views/Main';
 import { CreateNew } from './views/CreateNew';
@@ -33,6 +34,27 @@ export const App = ({ Footer, homeLink, logo }) => {
   const { isLoading: isUserLoading } = useUser();
 
   const basePath = useVizBuilderBasePath();
+  const location = useLocation();
+
+  const matches = matchRoutes(
+    [
+      {
+        path: `${basePath}/viz-builder/:dashboardItemOrMapOverlay/new`,
+        exact: true,
+        element: <CreateNew />,
+      },
+      {
+        path: `${basePath}/viz-builder/:dashboardItemOrMapOverlay/:visualisationId`,
+        element: <Main />,
+      },
+      // react router v6 does not support optional params, so we need to define two routes
+      {
+        path: `${basePath}/viz-builder/:dashboardItemOrMapOverlay`,
+        element: <Main />,
+      },
+    ],
+    location.pathname,
+  );
 
   if (isUserLoading) {
     return <FullPageLoader />;
@@ -44,14 +66,8 @@ export const App = ({ Footer, homeLink, logo }) => {
         <NavPanel logo={logo} homeLink={homeLink} />
 
         <Container>
-          <Switch>
-            <Route path={`${basePath}/viz-builder/:dashboardItemOrMapOverlay/new`} exact>
-              <CreateNew />
-            </Route>
-            <Route path={`${basePath}/viz-builder/:dashboardItemOrMapOverlay/:visualisationId?`}>
-              <Main />
-            </Route>
-          </Switch>
+          {/** Workaround for handling issues with this nested app */}
+          {renderMatches(matches)}
           {Footer && <Footer />}
         </Container>
       </Wrapper>
@@ -60,7 +76,7 @@ export const App = ({ Footer, homeLink, logo }) => {
 };
 
 App.propTypes = {
-  Footer: PropTypes.node,
+  Footer: PropTypes.elementType,
   homeLink: PropTypes.string,
   logo: PropTypes.shape({
     url: PropTypes.string.isRequired,

diff --git a/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/InputField.jsx b/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/InputField.jsx
@@ -20,9 +20,6 @@ const StyledTextField = styled(TextField)`
   & .MuiInputBase-root {
     height: 40px;
   }
-  & .MuiInputBase-input {
-    font-size: 14px;
-  }
 `;
 
 export const InputField = ({ getRootProps, getInputProps, isLoading }) => (

diff --git a/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx b/packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx
@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dialog } from '@material-ui/core';
 import styled from 'styled-components';
-import { DialogHeader } from '@tupaia/ui-components';
+import { ModalHeader } from '../../../../widgets';
 
 const Wrapper = styled.div`
   height: 80vh;
@@ -19,7 +19,7 @@ const Wrapper = styled.div`
 export const TransformModal = ({ onClose, children }) => {
   return (
     <Dialog open onClose={onClose} maxWidth={false}>
-      <DialogHeader onClose={onClose} />
+      <ModalHeader onClose={onClose} />
       <Wrapper>{children}</Wrapper>
     </Dialog>
   );

diff --git a/packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx b/packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx
@@ -3,17 +3,12 @@
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 import React, { useState } from 'react';
-import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
-import { Button, Dialog, DialogFooter, DialogHeader } from '@tupaia/ui-components';
+import { Button, Dialog } from '@tupaia/ui-components';
 import { DashboardItemMetadataForm } from '../DashboardItem';
 import { MapOverlayMetadataForm } from '../MapOverlay';
 import { DASHBOARD_ITEM_OR_MAP_OVERLAY_PARAM } from '../../constants';
-
-export const Body = styled.div`
-  padding: 30px 20px;
-  background-color: #f9f9f9;
-`;
+import { ModalContentProvider, ModalFooter, ModalHeader } from '../../../widgets';
 
 export const EditModal = () => {
   const { dashboardItemOrMapOverlay } = useParams();
@@ -42,15 +37,15 @@ export const EditModal = () => {
       <Dialog onClose={handleClose} open={isOpen}>
         <MetadataForm
           onSubmit={handleClose}
-          Header={() => <DialogHeader onClose={handleClose} title="Edit Details" />}
-          Body={Body}
+          Header={() => <ModalHeader onClose={handleClose} title="Edit Details" />}
+          Body={ModalContentProvider}
           Footer={() => (
-            <DialogFooter>
+            <ModalFooter>
               <Button onClick={handleClose} variant="outlined">
                 Cancel
               </Button>
               <Button type="submit">Save</Button>
-            </DialogFooter>
+            </ModalFooter>
           )}
         />
       </Dialog>