SIMSBIOHUB-346: Survey Interfaces - Implement Sticky Header and Bread…

…crumbs (#1170) * sticky headers+breadcrumb added * convert into Survey header into generic structure for header across pages
bcgov · Nov 17, 2023 · 449edb5 · 449edb5
1 parent 0612e40
commit 449edb5
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 200 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { AuthProvider, AuthProviderProps } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
 import appTheme from 'themes/appTheme';
+import ScrollToTop from 'utils/ScrollToTop';
 import { buildUrl } from 'utils/Utils';
 
 const App: React.FC = () => {
@@ -52,6 +53,7 @@ const App: React.FC = () => {
 
                       return (
                         <BrowserRouter>
+                          <ScrollToTop />
                           <AppRouter />
                         </BrowserRouter>
                       );

diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx
@@ -1,9 +1,10 @@
-import { Theme } from '@mui/material';
+import { Breadcrumbs, Theme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
@@ -27,6 +28,7 @@ import { ICreateSurveyRequest } from 'interfaces/useSurveyApi.interface';
 import moment from 'moment';
 import { useContext, useEffect, useRef, useState } from 'react';
 import { Prompt, useHistory } from 'react-router';
+import { Link as RouterLink } from 'react-router-dom';
 import { getFormattedDate } from 'utils/Utils';
 import yup from 'utils/YupSchema';
 import AgreementsForm, { AgreementsInitialValues, AgreementsYupSchema } from './components/AgreementsForm';
@@ -51,6 +53,7 @@ import SurveyFundingSourceForm, {
 } from './components/SurveyFundingSourceForm';
 import { SurveySiteSelectionInitialValues, SurveySiteSelectionYupSchema } from './components/SurveySiteSelectionForm';
 import SurveyUserForm, { SurveyUserJobFormInitialValues, SurveyUserJobYupSchema } from './components/SurveyUserForm';
+import SurveyBaseHeader from './view/components/SurveyBaseHeader';
 
 const useStyles = makeStyles((theme: Theme) => ({
   actionButton: {
@@ -269,30 +272,41 @@ const CreateSurveyPage = () => {
   if (!codes || !projectData) {
     return <CircularProgress className="pageProgress" size={40} />;
   }
+
   return (
     <>
       <Prompt when={enableCancelCheck} message={handleLocationChange} />
-      <Paper square={true} elevation={0}>
-        <Container maxWidth="xl">
-          <Box py={4}>
-            <Box display="flex" justifyContent="space-between">
-              <Box className={classes.pageTitleContainer}>
-                <Typography variant="h1" className={classes.pageTitle}>
-                  Create New Survey
-                </Typography>
-              </Box>
-              <Box flex="0 0 auto" className={classes.pageTitleActions}>
-                <Button color="primary" variant="contained" onClick={() => formikRef.current?.submitForm()}>
-                  Save and Exit
-                </Button>
-                <Button color="primary" variant="outlined" onClick={handleCancel}>
-                  Cancel
-                </Button>
-              </Box>
-            </Box>
-          </Box>
-        </Container>
-      </Paper>
+      <SurveyBaseHeader
+        title="Create New Survey"
+        breadCrumb={
+          <Breadcrumbs>
+            <Link
+              component={RouterLink}
+              variant="body2"
+              underline="hover"
+              to={`/admin/projects/${projectData.project.project_id}/`}
+              aria-current="page">
+              {projectData.project.project_name}
+            </Link>
+            <Typography variant="body2" component="span">
+              Survey
+            </Typography>
+            <Typography variant="body2" component="span">
+              Create
+            </Typography>
+          </Breadcrumbs>
+        }
+        buttonJSX={
+          <>
+            <Button color="primary" variant="contained" onClick={() => formikRef.current?.submitForm()}>
+              Save and Exit
+            </Button>
+            <Button color="primary" variant="outlined" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </>
+        }
+      />
 
       <Box my={3}>
         <Container maxWidth="xl">

diff --git a/app/src/features/surveys/edit/EditSurveyPage.tsx b/app/src/features/surveys/edit/EditSurveyPage.tsx
@@ -1,11 +1,10 @@
-import { Theme } from '@mui/material';
+import { Breadcrumbs } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Container from '@mui/material/Container';
-import Paper from '@mui/material/Paper';
+import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import { EditSurveyI18N } from 'constants/i18n';
 import { CodesContext } from 'contexts/codesContext';
@@ -20,49 +19,16 @@ import useDataLoader from 'hooks/useDataLoader';
 import { IEditSurveyRequest, SurveyUpdateObject } from 'interfaces/useSurveyApi.interface';
 import { useContext, useEffect, useRef, useState } from 'react';
 import { Prompt, useHistory, useParams } from 'react-router';
+import { Link as RouterLink } from 'react-router-dom';
+import SurveyBaseHeader from '../view/components/SurveyBaseHeader';
 import EditSurveyForm from './EditSurveyForm';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionButton: {
-    minWidth: '6rem',
-    '& + button': {
-      marginLeft: '0.5rem'
-    }
-  },
-  sectionDivider: {
-    height: '1px',
-    marginTop: theme.spacing(5),
-    marginBottom: theme.spacing(5)
-  },
-  pageTitleContainer: {
-    maxWidth: '170ch',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  pageTitle: {
-    display: '-webkit-box',
-    '-webkit-line-clamp': 2,
-    '-webkit-box-orient': 'vertical',
-    paddingTop: theme.spacing(0.5),
-    paddingBottom: theme.spacing(0.5),
-    overflow: 'hidden'
-  },
-  pageTitleActions: {
-    paddingTop: theme.spacing(0.75),
-    paddingBottom: theme.spacing(0.75),
-    '& button': {
-      marginLeft: theme.spacing(1)
-    }
-  }
-}));
-
 /**
  * Page to create a survey.
  *
  * @return {*}
  */
 const EditSurveyPage = () => {
-  const classes = useStyles();
   const biohubApi = useBiohubApi();
   const history = useHistory();
   const urlParams: Record<string, string | number | undefined> = useParams();
@@ -214,27 +180,43 @@ const EditSurveyPage = () => {
   return (
     <>
       <Prompt when={enableCancelCheck} message={handleLocationChange} />
-      <Paper square={true} elevation={0}>
-        <Container maxWidth="xl">
-          <Box py={4}>
-            <Box display="flex" justifyContent="space-between">
-              <Box className={classes.pageTitleContainer}>
-                <Typography variant="h1" className={classes.pageTitle}>
-                  Edit Survey Details
-                </Typography>
-              </Box>
-              <Box flex="0 0 auto" className={classes.pageTitleActions}>
-                <Button color="primary" variant="contained" onClick={() => formikRef.current?.submitForm()}>
-                  Save and Exit
-                </Button>
-                <Button color="primary" variant="outlined" onClick={handleCancel}>
-                  Cancel
-                </Button>
-              </Box>
-            </Box>
-          </Box>
-        </Container>
-      </Paper>
+      <SurveyBaseHeader
+        title="Edit Survey Details"
+        breadCrumb={
+          <Breadcrumbs>
+            <Link
+              component={RouterLink}
+              variant="body2"
+              underline="hover"
+              to={`/admin/projects/${projectData.project.project_id}/`}
+              aria-current="page">
+              {projectData.project.project_name}
+            </Link>
+            <Link
+              component={RouterLink}
+              variant="body2"
+              underline="hover"
+              to={`/admin/projects/${projectData.project.project_id}/surveys/${surveyId}/details`}
+              aria-current="page">
+              {surveyData && surveyData.survey_details && surveyData.survey_details.survey_name}
+            </Link>
+            <Typography variant="body2" component="span">
+              Edit
+            </Typography>
+          </Breadcrumbs>
+        }
+        buttonJSX={
+          <>
+            <Button color="primary" variant="contained" onClick={() => formikRef.current?.submitForm()}>
+              Save and Exit
+            </Button>
+            <Button color="primary" variant="outlined" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </>
+        }
+      />
+
       <Box my={3}>
         <Container maxWidth="xl">
           <EditSurveyForm