VizBuilderPrivateRoute

packages/admin-panel/src/VizBuilderApp/App.jsx

@@ -5,13 +5,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { renderMatches, useLocation } from 'react-router';
-import { matchRoutes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { FullPageLoader } from '@tupaia/ui-components';
 import { Main } from './views/Main';
 import { CreateNew } from './views/CreateNew';
 import { VizConfigProvider as StateProvider } from './context';
-import { useVizBuilderBasePath } from './utils';
 import { SimplePageLayout } from '../layout';
 import { useUser } from '../api/queries';
 
@@ -25,29 +23,6 @@ const Container = styled.div`
 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 />;
   }
@@ -56,8 +31,12 @@ export const App = ({ Footer, homeLink, logo }) => {
     <StateProvider>
       <SimplePageLayout logo={logo} homeLink={homeLink}>
         <Container>
-          {/** Workaround for handling issues with this nested app */}
-          {renderMatches(matches)}
+          <Routes>
+            <Route path="/:dashboardItemOrMapOverlay/new" exact element={<CreateNew />} />
+            <Route path="/:dashboardItemOrMapOverlay/:visualisationId" element={<Main />} />
+            <Route path="/:dashboardItemOrMapOverlay" element={<Main />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
           {Footer && <Footer />}
         </Container>
       </SimplePageLayout>

packages/admin-panel/src/authentication/VizBuilderPrivateRoute.jsx

@@ -0,0 +1,24 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useUser } from '../api/queries';
+import { AUTH_ROUTES } from '../routes';
+
+export const VizBuilderPrivateRoute = () => {
+  const location = useLocation();
+  const { isLoggedIn, isLoading, hasVizBuilderAccess } = useUser();
+  if (isLoading) return null;
+
+  if (!isLoggedIn) {
+    return <Navigate to={AUTH_ROUTES.LOGIN} state={{ from: location.pathname }} />;
+  }
+
+  if (!hasVizBuilderAccess) {
+    return <Navigate to="/" state={{ from: location.pathname }} />;
+  }
+
+  return <Outlet />;
+};

packages/admin-panel/src/authentication/index.js

@@ -6,4 +6,5 @@
 export * from './actions';
 export { LOGOUT, PASSWORD_RESET_TOKEN_PARAM } from './constants';
 export { PrivateRoute } from './PrivateRoute';
+export { VizBuilderPrivateRoute } from './VizBuilderPrivateRoute';
 export { RegisterLink } from './RegisterLink';

packages/admin-panel/src/main.jsx

@@ -16,6 +16,7 @@ import { StoreProvider } from './utilities/StoreProvider';
 import { Footer } from './widgets';
 import { TupaiaApi } from './api';
 import { theme } from './theme';
+import { VizBuilderPrivateRoute } from './authentication';
 
 const Wrapper = styled.div`
   display: flex;
@@ -72,7 +73,9 @@ renderReactApp(
                 <ThemeProvider theme={theme}>
                   <CssBaseline />
                   <Routes>
-                    <Route path="/viz-builder/*" element={<VizBuilder Footer={Footer} />} />
+                    <Route path="/viz-builder/*" element={<VizBuilderPrivateRoute />}>
+                      <Route path="*" element={<VizBuilder Footer={Footer} />} />
+                    </Route>
                     <Route path="*" default element={<AdminPanelRoute />} />
                   </Routes>
                 </ThemeProvider>