[209] Simplify multiple views by sharing common code in their router

frontend/svalyn-studio-app/src/app/App.tsx

@@ -31,12 +31,13 @@ import { NewRouter } from '../new/NewRouter';
 import { NotFoundView } from '../notfound/NotFoundView';
 import { NotificationsRouter } from '../notifications/NotificationsRouter';
 import { OAuth2Router } from '../oauth2/OAuth2Router';
-import { OrganizationsRouter } from '../organizations/OrganizationsRouter';
+import { OrganizationRouter } from '../organizations/OrganizationRouter';
 import { PaletteProvider } from '../palette/PaletteProvider';
 import { ProfilesRouter } from '../profiles/ProfilesRouter';
-import { ProjectsRouter } from '../projects/ProjectsRouter';
+import { ProjectRouter } from '../projects/ProjectRouter';
 import { SearchRouter } from '../search/SearchRouter';
 import { SettingsRouter } from '../settings/SettingsRouter';
+import { WorkspaceView } from '../workspace/WorkspaceView';
 import { AuthenticationRedirectionBoundary } from './AuthenticationRedirectionBoundary';
 import { theme } from './theme';
 
@@ -50,8 +51,9 @@ export const App = () => {
             <Routes>
               <Route path="/" element={<HomeView />} />
               <Route path="/new/*" element={<NewRouter />} />
-              <Route path="/orgs/*" element={<OrganizationsRouter />} />
-              <Route path="/projects/*" element={<ProjectsRouter />} />
+              <Route path="/orgs/:organizationIdentifier/*" element={<OrganizationRouter />} />
+              <Route path="/projects/:projectIdentifier/*" element={<ProjectRouter />} />
+              <Route path="/projects/:projectIdentifier/changes/:changeId" element={<WorkspaceView />} />
               <Route path="/changeproposals/*" element={<ChangeProposalsRouter />} />
               <Route path="/domains/*" element={<DomainsRouter />} />
               <Route path="/search/*" element={<SearchRouter />} />

frontend/svalyn-studio-app/src/domains/DomainView.tsx

@@ -18,13 +18,10 @@
  */
 
 import { gql, useQuery } from '@apollo/client';
-import Container from '@mui/material/Container';
-import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { useParams } from 'react-router-dom';
 import { DiagramEditor } from '../diagram/DiagramEditor';
 import { Diagram } from '../diagram/DiagramEditor.types';
-import { Navbar } from '../navbars/Navbar';
 import { GetDomainData, GetDomainVariables } from './DomainView.types';
 import { convertDomain } from './converters';
 
@@ -71,20 +68,12 @@ export const DomainView = () => {
   const { data } = useQuery<GetDomainData, GetDomainVariables>(getDomainQuery, { variables });
   const diagram: Diagram | null = data ? convertDomain(data.viewer.domain) : null;
 
-  return (
-    <div>
-      <Navbar />
-      <Container maxWidth="lg">
-        {data && diagram ? (
-          <>
-            <Toolbar />
-            <Typography variant="h4" gutterBottom>
-              {data.viewer.domain.label}
-            </Typography>
-            <DiagramEditor diagram={diagram} />
-          </>
-        ) : null}
-      </Container>
-    </div>
-  );
+  return data && diagram ? (
+    <>
+      <Typography variant="h4" gutterBottom>
+        {data.viewer.domain.label}
+      </Typography>
+      <DiagramEditor diagram={diagram} />
+    </>
+  ) : null;
 };

frontend/svalyn-studio-app/src/domains/DomainsRouter.tsx

@@ -17,19 +17,18 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Outlet, Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { DomainView } from './DomainView';
+import { DomainsShell } from './DomainsShell';
 import { DomainsView } from './DomainsView';
 
 export const DomainsRouter = () => {
   return (
-    <>
+    <DomainsShell>
       <Routes>
         <Route index element={<DomainsView />} />
         <Route path=":domainIdentifier" element={<DomainView />} />
       </Routes>
-
-      <Outlet />
-    </>
+    </DomainsShell>
   );
 };

frontend/svalyn-studio-app/src/domains/DomainsShell.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import Container from '@mui/material/Container';
+import Toolbar from '@mui/material/Toolbar';
+import { Navbar } from '../navbars/Navbar';
+import { DomainsShellProps } from './DomainsShell.types';
+
+export const DomainsShell = ({ children }: DomainsShellProps) => {
+  return (
+    <>
+      <div>
+        <Navbar />
+        <Container maxWidth="lg">
+          <Toolbar />
+
+          {children}
+        </Container>
+      </div>
+    </>
+  );
+};

frontend/svalyn-studio-app/src/domains/DomainsShell.types.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export interface DomainsShellProps {
+  children?: React.ReactNode;
+}

frontend/svalyn-studio-app/src/domains/DomainsView.tsx

@@ -19,18 +19,15 @@
 
 import { gql, useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Paper from '@mui/material/Paper';
 import TablePagination from '@mui/material/TablePagination';
-import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { Navbar } from '../navbars/Navbar';
 import { ErrorSnackbar } from '../snackbar/ErrorSnackbar';
 import { Domain, DomainsViewState, GetDomainsData, GetDomainsVariables } from './DomainsView.types';
 
@@ -80,44 +77,38 @@ export const DomainsView = () => {
 
   return (
     <>
-      <div>
-        <Navbar />
-        <Container maxWidth="lg">
-          <Toolbar />
-          <Typography variant="h4" gutterBottom>
-            Domains
+      <Typography variant="h4" gutterBottom>
+        Domains
+      </Typography>
+      {domains.length > 0 ? (
+        <Paper>
+          <List>
+            {domains.map((domain) => {
+              return (
+                <ListItem key={domain.identifier}>
+                  <ListItemButton component={RouterLink} to={`/domains/${domain.identifier}`}>
+                    <ListItemText primary={`${domain.label}`} />
+                  </ListItemButton>
+                </ListItem>
+              );
+            })}
+          </List>
+          <TablePagination
+            component="div"
+            count={count}
+            page={state.page}
+            onPageChange={handlePageChange}
+            rowsPerPage={state.rowsPerPage}
+            rowsPerPageOptions={[state.rowsPerPage]}
+          />
+        </Paper>
+      ) : (
+        <Box sx={{ paddingY: (theme) => theme.spacing(12) }}>
+          <Typography variant="h6" align="center">
+            No domains found
           </Typography>
-          {domains.length > 0 ? (
-            <Paper>
-              <List>
-                {domains.map((domain) => {
-                  return (
-                    <ListItem key={domain.identifier}>
-                      <ListItemButton component={RouterLink} to={`/domains/${domain.identifier}`}>
-                        <ListItemText primary={`${domain.label}`} />
-                      </ListItemButton>
-                    </ListItem>
-                  );
-                })}
-              </List>
-              <TablePagination
-                component="div"
-                count={count}
-                page={state.page}
-                onPageChange={handlePageChange}
-                rowsPerPage={state.rowsPerPage}
-                rowsPerPageOptions={[state.rowsPerPage]}
-              />
-            </Paper>
-          ) : (
-            <Box sx={{ paddingY: (theme) => theme.spacing(12) }}>
-              <Typography variant="h6" align="center">
-                No domains found
-              </Typography>
-            </Box>
-          )}
-        </Container>
-      </div>
+        </Box>
+      )}
       <ErrorSnackbar open={state.message !== null} message={state.message} onClose={handleCloseSnackbar} />
     </>
   );

frontend/svalyn-studio-app/src/hooks/useRouteMatch.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { PathMatch, matchPath, useLocation } from 'react-router-dom';
+
+export const useRouteMatch = (patterns: readonly string[]): PathMatch<string> | null => {
+  const { pathname } = useLocation();
+
+  for (let index = 0; index < patterns.length; index += 1) {
+    const pattern = patterns[index];
+    const pathMatch = matchPath(pattern, pathname);
+    if (pathMatch) {
+      return pathMatch;
+    }
+  }
+
+  return null;
+};