Waitp 1202 setup routes (#4608)

* WIP

* WAITP-1202 Working basic routing

* WAITP-1202 Add constants to index

* WAITP-1202 fix merge conflicts

* WAITP-1202 tidy up code

* WAITP-1202 update format

* WAITP-1202 tweaks

* WAITP-1202 Update routing variables

* WAITP-1202 Fix mismatched TS versions

* Revert "WAITP-1202 Fix mismatched TS versions"

This reverts commit 607d341.

* WAITP-1202 fix version of react-router

* WAITP-1202 updated routes for v6.3

* WAITP-1202 fix config and types version

* WAITP-1202 Update validation

packages/central-server/src/apiV2/utilities/constructNewRecordValidationRules.js

@@ -320,6 +320,20 @@ export const constructForSingle = (models, recordType) => {
           hasContent,
           isURLPathSegment,
           constructRecordNotExistsWithField(models.landingPage, 'url_segment'),
+          urlSegment => {
+            const forbiddenRoutes = [
+              'login',
+              'register',
+              'request-access',
+              'reset-password',
+              'request-access',
+              'verify-email',
+            ];
+            if (forbiddenRoutes.includes(urlSegment)) {
+              throw new Error('This url segment is not allowed');
+            }
+            return true;
+          },
         ],
         project_codes: [
           hasContent,

packages/tupaia-web/package.json

@@ -39,6 +39,8 @@
     "axios": "^1.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0", 
     "styled-components": "^5.1.0",
     "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-env-compatible": "^1.1.1"

packages/tupaia-web/src/App.tsx

@@ -3,15 +3,14 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import { Alert } from '@tupaia/ui-components';
-import { AppProviders } from './AppProviders';
+import { AppStyleProviders } from './AppStyleProviders';
+import { Router } from './Router';
 
 const App = () => {
   return (
-    <AppProviders>
-      <Alert>Alert</Alert>
-      <h1>Tupaia web</h1>
-    </AppProviders>
+    <AppStyleProviders>
+      <Router />
+    </AppStyleProviders>
   );
 };
 

packages/tupaia-web/src/AppProviders.tsx → packages/tupaia-web/src/AppStyleProviders.tsx

@@ -27,7 +27,7 @@ const theme = createMuiTheme({
   },
 });
 
-export const AppProviders = ({ children }: { children: ReactNode }) => (
+export const AppStyleProviders = ({ children }: { children: ReactNode }) => (
   <StylesProvider injectFirst>
     <ThemeProvider theme={theme}>
       <MuiThemeProvider theme={theme}>

packages/tupaia-web/src/Router.tsx

@@ -0,0 +1,41 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import {
+  LandingPage,
+  LoginForm,
+  PasswordResetForm,
+  Project,
+  RegisterForm,
+  RequestAccessForm,
+  VerifyEmailForm,
+} from './pages';
+import { DEFAULT_URL } from './constants';
+
+/**
+ * This Router is using [version 6.3]{@link https://reactrouter.com/en/v6.3.0}, as later versions are not supported by our TS setup. See [this issue here]{@link https://github.com/remix-run/react-router/discussions/8364}
+ * This means the newer 'createBrowserRouter' and 'RouterProvider' can't be used here.
+ *
+ * **/
+
+export const Router = () => (
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<Navigate to={`/${DEFAULT_URL}`} replace />} />
+      {/**
+       *  The below user pages will actually be modals, which will be done when each view is created. There is an example at: https://github.com/remix-run/react-router/tree/dev/examples/modal
+       */}
+      <Route path="login" element={<LoginForm />} />
+      <Route path="register" element={<RegisterForm />} />
+      <Route path="reset-password" element={<PasswordResetForm />} />
+      <Route path="request-access" element={<RequestAccessForm />} />
+      <Route path="verify-email" element={<VerifyEmailForm />} />
+      <Route path="/:landingPageUrlSegment" element={<LandingPage />} />
+      {/** Because react-router v 6.3 doesn't support optional url segments, we need to handle dashboardCode with a splat/catch-all instead */}
+      <Route path="/:projectCode/:entityCode/*" element={<Project />} />
+    </Routes>
+  </BrowserRouter>
+);

packages/tupaia-web/src/constants/constants.ts

@@ -0,0 +1,8 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+
+export const DEFAULT_PROJECT_CODE = 'explore';
+export const DEFAULT_ENTITY_CODE = 'explore';
+export const DEFAULT_URL = `${DEFAULT_PROJECT_CODE}/${DEFAULT_ENTITY_CODE}`;

packages/tupaia-web/src/constants/index.ts

@@ -2,3 +2,4 @@
  * Tupaia
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
+export * from './constants';

packages/tupaia-web/src/pages/LandingPage.tsx

@@ -0,0 +1,13 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export const LandingPage = () => {
+  const { landingPageUrlSegment } = useParams();
+  // use the landingPageUrlSegment to query for the landing page.
+  // If found, render landing page. If not, render a default landing page
+  return <div>{landingPageUrlSegment}</div>;
+};

packages/tupaia-web/src/pages/LoginForm.tsx

@@ -0,0 +1,9 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+
+export const LoginForm = () => {
+  return <div>LoginForm</div>;
+};

packages/tupaia-web/src/pages/PasswordResetForm.tsx

@@ -0,0 +1,9 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+
+export const PasswordResetForm = () => {
+  return <div>PasswordResetForm</div>;
+};

packages/tupaia-web/src/pages/Project.tsx

@@ -0,0 +1,19 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export const Project = () => {
+  // Use these to fetch the project and any other entity info you might need
+  const { projectCode, entityCode, '*': dashboardCode } = useParams();
+
+  return (
+    <div>
+      <h1>Project: {projectCode}</h1>
+      <h2>Entity: {entityCode}</h2>
+      <h3>Dashboard: {dashboardCode}</h3>
+    </div>
+  );
+};

packages/tupaia-web/src/pages/RegisterForm.tsx

@@ -0,0 +1,9 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+
+export const RegisterForm = () => {
+  return <div>RegisterForm</div>;
+};

packages/tupaia-web/src/pages/RequestAccessForm.tsx

@@ -0,0 +1,9 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+
+export const RequestAccessForm = () => {
+  return <div>RequestAccessForm</div>;
+};

packages/tupaia-web/src/pages/VerifyEmailForm.tsx

@@ -0,0 +1,9 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+
+export const VerifyEmailForm = () => {
+  return <div>VerifyEmailForm</div>;
+};

packages/tupaia-web/src/pages/index.ts

@@ -2,3 +2,10 @@
  * Tupaia
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
+export { LandingPage } from './LandingPage';
+export { LoginForm } from './LoginForm';
+export { PasswordResetForm } from './PasswordResetForm';
+export { Project } from './Project';
+export { RegisterForm } from './RegisterForm';
+export { RequestAccessForm } from './RequestAccessForm';
+export { VerifyEmailForm } from './VerifyEmailForm';

packages/tupaia-web/vite.config.ts

@@ -2,8 +2,7 @@ import { defineConfig } from 'vite';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
 import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
-export default defineConfig({
+const baseConfig = {
   // ViteEjsPlugin is used to allow the use of EJS templates in the index.html file, for analytics scripts etc
   plugins: [
     ViteEjsPlugin(),
@@ -16,9 +15,6 @@ export default defineConfig({
     open: true,
   },
   envPrefix: 'REACT_APP_', // to allow any existing REACT_APP_ env variables to be used;
-  define: {
-    global: {},
-  },
   resolve: {
     preserveSymlinks: true,
     dedupe: ['@material-ui/core', 'react', 'react-dom', 'styled-components'], // deduplicate these packages to avoid duplicate copies of them in the bundle, which might happen and cause errors with ui component packages
@@ -29,4 +25,18 @@ export default defineConfig({
       ['node-fetch']: 'moduleMock.js',
     },
   },
+};
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command }) => {
+  // Dev specific config. This is because `define.global` breaks the build
+  if (command === 'serve') {
+    return {
+      ...baseConfig,
+      define: {
+        global: {},
+      },
+    };
+  }
+  return baseConfig;
 });

yarn.lock

@@ -8704,6 +8704,8 @@ __metadata:
     npm-run-all: ^4.1.5
     react: ^16.13.1
     react-dom: ^16.13.1
+    react-router: 6.3.0
+    react-router-dom: 6.3.0
     storybook: ^7.0.18
     styled-components: ^5.1.0
     typescript: ^5.0.2
@@ -35291,6 +35293,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:6.3.0, react-router-dom@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "react-router-dom@npm:6.3.0"
+  dependencies:
+    history: ^5.2.0
+    react-router: 6.3.0
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^5.1.2, react-router-dom@npm:^5.2.0":
   version: 5.2.0
   resolution: "react-router-dom@npm:5.2.0"
@@ -35308,19 +35323,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "react-router-dom@npm:6.3.0"
-  dependencies:
-    history: ^5.2.0
-    react-router: 6.3.0
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
-  languageName: node
-  linkType: hard
-
 "react-router@npm:5.2.0":
   version: 5.2.0
   resolution: "react-router@npm:5.2.0"