[202] Update the way change proposals are displayed

Bug: #202
Signed-off-by: Stéphane Bégaudeau <[email protected]>

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

@@ -19,7 +19,6 @@
 
 import { Route, Routes } from 'react-router-dom';
 import { AdminRouter } from '../admin/AdminRouter';
-import { ChangeProposalsRouter } from '../changeproposals/ChangeProposalsRouter';
 import { DomainsRouter } from '../domains/DomainsRouter';
 import { ErrorsRouter } from '../errors/ErrorsRouter';
 import { HelpRouter } from '../help/HelpRouter';
@@ -47,7 +46,6 @@ export const App = () => {
         <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 />} />
         <Route path="/profiles/*" element={<ProfilesRouter />} />

frontend/svalyn-studio-app/src/forms/useForm.tsx

@@ -31,6 +31,10 @@ export function useForm<FormDataType extends Object>({
     isFormValid: false,
   });
 
+  const reset = () => {
+    setState((prevState) => ({ ...prevState, data: initialValue, validationState: {}, isFormValid: false }));
+  };
+
   const getTextFieldProps = (name: keyof FormDataType, helperText?: string): TextFieldProps => {
     let error = false;
     let computedHelperText: string | undefined = helperText;
@@ -73,6 +77,7 @@ export function useForm<FormDataType extends Object>({
   return {
     data: state.data,
     isFormValid: state.isFormValid,
+    reset,
     getTextFieldProps,
   };
 }

frontend/svalyn-studio-app/src/forms/useForm.types.ts

@@ -27,6 +27,7 @@ export interface UseFormProps<FormDataType extends Object> {
 export interface UseFormValue<FormDataType extends Object> {
   data: FormDataType;
   isFormValid: boolean;
+  reset: () => void;
   getTextFieldProps: (name: keyof FormDataType, helperText?: string) => TextFieldProps;
 }
 

frontend/svalyn-studio-app/src/projects/ProjectBreadcrumbs.tsx

@@ -34,6 +34,8 @@ const patterns = [
   '/projects/:projectIdentifier',
   '/projects/:projectIdentifier/activity',
   '/projects/:projectIdentifier/changeproposals',
+  '/projects/:projectIdentifier/changeproposals/:changeProposalIdentifier',
+  '/projects/:projectIdentifier/changeproposals/:changeProposalIdentifier/files',
   '/projects/:projectIdentifier/new/changeproposal',
   '/projects/:projectIdentifier/tags',
   '/projects/:projectIdentifier/settings',
@@ -116,7 +118,7 @@ const AdditionalBreadcrumbEntry = () => {
       label: 'Activity',
       icon: <TimelineIcon fontSize="inherit" />,
     };
-  } else if (currentTab === '/projects/:projectIdentifier/changeproposals') {
+  } else if (currentTab?.startsWith('/projects/:projectIdentifier/changeproposals')) {
     tabBreadcrumbEntry = {
       label: 'Change Proposals',
       icon: <DifferenceIcon fontSize="inherit" />,

frontend/svalyn-studio-app/src/projects/ProjectDrawer.tsx

@@ -32,7 +32,6 @@ import { useRouteMatch } from '../hooks/useRouteMatch';
 import { useProject } from './useProject';
 
 const CompactDrawer = styled('div')(({ theme }) => ({
-  width: '64px',
   backgroundColor: theme.palette.background.paper,
   borderRight: `1px solid ${theme.palette.divider}`,
 }));

frontend/svalyn-studio-app/src/projects/ProjectRouter.tsx

@@ -20,6 +20,7 @@
 import { Route, Routes } from 'react-router-dom';
 import { ProjectShell } from './ProjectShell';
 import { ProjectActivityView } from './activity/ProjectActivityView';
+import { ChangeProposalRouter } from './changeproposal/ChangeProposalRouter';
 import { ProjectChangeProposalsView } from './changeproposals/ProjectChangeProposalsView';
 import { ProjectHomeView } from './home/ProjectHomeView';
 import { NewChangeProposalView } from './new-changeproposal/NewChangeProposalView';
@@ -34,6 +35,7 @@ export const ProjectRouter = () => {
         <Route index element={<ProjectHomeView />} />
         <Route path="activity" element={<ProjectActivityView />} />
         <Route path="changeproposals" element={<ProjectChangeProposalsView />} />
+        <Route path="changeproposals/:changeProposalIdentifier/*" element={<ChangeProposalRouter />} />
         <Route path="tags" element={<ProjectTagsView />} />
         <Route path="settings" element={<ProjectSettingsView />} />
         <Route path="new/changeproposal" element={<NewChangeProposalView />} />

frontend/svalyn-studio-app/src/projects/ProjectShell.tsx

@@ -98,7 +98,7 @@ export const ProjectShell = ({ children }: ProjectShellProps) => {
           sx={{
             display: 'grid',
             gridTemplateRows: '1fr',
-            gridTemplateColumns: 'min-content 1fr',
+            gridTemplateColumns: '64px calc(100vw - 64px)',
             flexGrow: '1',
           }}
         >

frontend/svalyn-studio-app/src/projects/ProjectViewHeader.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 Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import { ProjectViewHeaderProps } from './ProjectViewHeader.types';
+
+export const ProjectViewHeader = ({ children }: ProjectViewHeaderProps) => {
+  return (
+    <Toolbar
+      variant="dense"
+      sx={{
+        backgroundColor: 'white',
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+      }}
+    >
+      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: (theme) => theme.spacing(2) }}>
+        {children}
+      </Box>
+    </Toolbar>
+  );
+};