feat: configurable notebook name (#1115)

## JIRA Ticket

[BSS-278](https://jira.csiro.au/browse/BSS-278)

## Description

Naming notebook as survey in theme.

## Proposed Changes

- Added a notebook name .env variable
- Updated all files which referenced the notebook name including URLs to
reference the .env variable

## How to Test

1. Add `VITE_NOTEBOOK_NAME=survey` to `app/.env`
2. Refresh the app and verify that all references of "notebook" are now
"survey"
3. (Optional) Update the variable again/remove it and refresh

## Additional Information

## Checklist

- [x] I have confirmed all commits have been signed.
- [x] I have added JSDoc style comments to any new functions or classes.
- [x] Relevant documentation such as READMEs, guides, and class comments
are updated.

app/.env.dist

@@ -12,4 +12,5 @@ VITE_BUGSNAG_KEY=<your bugsnag API key>
 VITE_DEBUG_APP=true
 VITE_PRODUCTION_BUILD=false
 VITE_POUCHDB_DEBUG=false
-VITE_NOTEBOOK_LIST_TYPE=tabs
+VITE_NOTEBOOK_LIST_TYPE=tabs # tabs or headings
+VITE_NOTEBOOK_NAME=survey

app/src/App.tsx

@@ -93,15 +93,15 @@ export default function App() {
                   }
                 />
                 <Route
-                  path={ROUTES.NOTEBOOK_LIST}
+                  path={ROUTES.NOTEBOOK_LIST_ROUTE}
                   element={
                     <PrivateRoute allowed={Boolean(token)}>
                       <NoteBookList />
                     </PrivateRoute>
                   }
                 />
                 <Route
-                  path={ROUTES.NOTEBOOK + ':project_id'}
+                  path={ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE + ':project_id'}
                   element={
                     <PrivateRoute allowed={Boolean(token)}>
                       <Notebook />
@@ -114,7 +114,7 @@ export default function App() {
                   without one, it immediately mints a UUID and redirects to it */}
                 <Route
                   path={
-                    ROUTES.NOTEBOOK +
+                    ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
                     ':project_id' +
                     ROUTES.RECORD_CREATE +
                     ':type_name' +
@@ -131,7 +131,7 @@ export default function App() {
                 />
                 <Route
                   path={
-                    ROUTES.NOTEBOOK +
+                    ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
                     ':project_id' +
                     ROUTES.RECORD_CREATE +
                     ':type_name'
@@ -152,7 +152,7 @@ export default function App() {
                   record/form.tsx*/}
                 <Route
                   path={
-                    ROUTES.NOTEBOOK +
+                    ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
                     ':project_id' +
                     ROUTES.RECORD_EXISTING +
                     ':record_id' +
@@ -167,7 +167,7 @@ export default function App() {
                 />
                 <Route
                   path={
-                    ROUTES.NOTEBOOK +
+                    ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
                     ':project_id' +
                     ROUTES.RECORD_EXISTING +
                     ':record_id' +

app/src/buildconfig.ts

@@ -310,6 +310,32 @@ function get_notebook_list_type(): 'tabs' | 'headings' {
   }
 }
 
+/**
+ * Retrieves the name of notebooks from the environment variables.
+ * If the environment variable is not set, it returns a default value 'notebook'.
+ *
+ * @returns {string} - The name of notebooks.
+ */
+function get_notebook_name(): string {
+  const notebook_name = import.meta.env.VITE_NOTEBOOK_NAME;
+  if (notebook_name) {
+    return notebook_name;
+  } else {
+    return 'notebook';
+  }
+}
+
+/**
+ * Retrieves the name of the notebooks and capitalizes the first letter.
+ *
+ * @returns {string} - The capitalized name of notebooks.
+ */
+function get_notebook_name_capitalized(): string {
+  const notebook_name = get_notebook_name();
+
+  return notebook_name.charAt(0).toUpperCase() + notebook_name.slice(1);
+}
+
 // this should disappear once we have listing activation set up
 export const AUTOACTIVATE_LISTINGS = true;
 export const CONDUCTOR_URL = get_conductor_url();
@@ -331,3 +357,5 @@ export const DISABLE_SIGNIN_REDIRECT = disable_signin_redirect();
 export const BUILT_LOGIN_TOKEN = get_login_token();
 export const BUGSNAG_KEY = get_bugsnag_key();
 export const NOTEBOOK_LIST_TYPE = get_notebook_list_type();
+export const NOTEBOOK_NAME = get_notebook_name();
+export const NOTEBOOK_NAME_CAPITALIZED = get_notebook_name_capitalized();

app/src/constants/routes.tsx

@@ -19,15 +19,16 @@
  */
 
 import {ProjectID, RecordID, RevisionID} from '@faims3/data-model';
+import {NOTEBOOK_NAME} from '../buildconfig';
 
 export const INDEX = '/';
 export const SIGN_IN = '/signin/';
 
 export const NOT_FOUND = '/not-found';
 export const WORKSPACE = '/workspace';
 
-export const NOTEBOOK = '/notebooks/';
-export const NOTEBOOK_LIST = '/notebooks';
+export const INDIVIDUAL_NOTEBOOK_ROUTE = `/${NOTEBOOK_NAME}s/`;
+export const NOTEBOOK_LIST_ROUTE = `/${NOTEBOOK_NAME}s`;
 
 export const RECORD_LIST = '/records';
 export const RECORD_EXISTING = '/records/';
@@ -46,7 +47,7 @@ export function getRecordRoute(
 ) {
   if (!!project_id && !!record_id && !!revision_id) {
     return (
-      NOTEBOOK +
+      INDIVIDUAL_NOTEBOOK_ROUTE +
       project_id +
       RECORD_EXISTING +
       record_id +
@@ -69,7 +70,7 @@ export function getDraftRoute(
 ) {
   if (existing !== null)
     return (
-      NOTEBOOK +
+      INDIVIDUAL_NOTEBOOK_ROUTE +
       project_id +
       RECORD_EXISTING +
       // existing+
@@ -81,7 +82,7 @@ export function getDraftRoute(
     );
   else {
     return (
-      NOTEBOOK +
+      INDIVIDUAL_NOTEBOOK_ROUTE +
       project_id +
       RECORD_CREATE +
       type_name +

app/src/gui/components/notebook/add_record_by_type.tsx

@@ -88,7 +88,7 @@ export default function AddRecordButtons(props: AddRecordButtonsProps) {
               component={RouterLink}
               key="newRecord"
               to={
-                ROUTES.NOTEBOOK +
+                ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
                 project_id +
                 ROUTES.RECORD_CREATE +
                 visible_types
@@ -103,7 +103,7 @@ export default function AddRecordButtons(props: AddRecordButtonsProps) {
                   <Button
                     component={RouterLink}
                     to={
-                      ROUTES.NOTEBOOK +
+                      ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
                       project.project_id +
                       ROUTES.RECORD_CREATE +
                       viewset_name

app/src/gui/components/notebook/delete.tsx

@@ -115,7 +115,7 @@ export default function RecordDelete(props: RecordDeleteProps) {
           },
         });
         handleClose();
-        history(ROUTES.NOTEBOOK + project_id);
+        history(ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE + project_id);
       })
       .catch(err => {
         console.log('Failed to delete', record_id, draft_id, err);

app/src/gui/components/notebook/index.tsx

@@ -32,6 +32,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import CircularLoading from '../ui/circular_loading';
 import * as ROUTES from '../../../constants/routes';
 import DashboardIcon from '@mui/icons-material/Dashboard';
+import {NOTEBOOK_NAME, NOTEBOOK_NAME_CAPITALIZED} from '../../../buildconfig';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -127,7 +128,7 @@ export default function NotebookComponent(props: NotebookComponentProps) {
         <Alert severity="error">
           <AlertTitle>
             {' '}
-            {props.project.name} notebook cannot sync right now.
+            {props.project.name} {NOTEBOOK_NAME} cannot sync right now.
           </AlertTitle>
           Your device may be offline.
           <br />
@@ -145,7 +146,7 @@ export default function NotebookComponent(props: NotebookComponentProps) {
           </Button>
         </Alert>
       ) : loading ? (
-        <CircularLoading label={'Notebook is loading'} />
+        <CircularLoading label={`${NOTEBOOK_NAME_CAPITALIZED} is loading`} />
       ) : (
         <Box>
           <Box
@@ -166,16 +167,16 @@ export default function NotebookComponent(props: NotebookComponentProps) {
               <Tabs
                 value={notebookTabValue}
                 onChange={handleNotebookTabChange}
-                aria-label="notebook tabs"
+                aria-label={`${NOTEBOOK_NAME} tabs`}
                 indicatorColor="secondary"
                 textColor="inherit"
                 variant="scrollable"
                 scrollButtons="auto"
                 // centered={mq_above_md ? false : true}
               >
-                <Tab label="Records" {...a11yProps(0, 'notebook')} />
-                <Tab label="Info" {...a11yProps(1, 'notebook')} />
-                <Tab label="Settings" {...a11yProps(2, 'notebook')} />
+                <Tab label="Records" {...a11yProps(0, NOTEBOOK_NAME)} />
+                <Tab label="Info" {...a11yProps(1, NOTEBOOK_NAME)} />
+                <Tab label="Settings" {...a11yProps(2, NOTEBOOK_NAME)} />
               </Tabs>
             </AppBar>
           </Box>
@@ -193,12 +194,15 @@ export default function NotebookComponent(props: NotebookComponentProps) {
                 <Tabs
                   value={recordDraftTabValue}
                   onChange={handleRecordDraftTabChange}
-                  aria-label="notebook-records"
+                  aria-label={`${NOTEBOOK_NAME}-records`}
                 >
-                  <Tab label="Records" {...a11yProps(0, 'notebook-records')} />
+                  <Tab
+                    label="Records"
+                    {...a11yProps(0, `${NOTEBOOK_NAME}-records`)}
+                  />
                   <Tab
                     label={<DraftTabBadge project_id={project.project_id} />}
-                    {...a11yProps(1, 'notebook-records')}
+                    {...a11yProps(1, `${NOTEBOOK_NAME}-records`)}
                   />
                 </Tabs>
               </Box>

app/src/gui/components/notebook/refresh.tsx

@@ -4,6 +4,7 @@ import moment from 'moment/moment';
 import {ActionType} from '../../../context/actions';
 import {store} from '../../../context/store';
 import {useInterval} from '../../../utils/useInterval';
+import {NOTEBOOK_NAME_CAPITALIZED} from '../../../buildconfig';
 
 interface RefreshNotebookProps {
   handleRefresh: Function;
@@ -39,7 +40,7 @@ export default function RefreshNotebook(props: RefreshNotebookProps) {
         dispatch({
           type: ActionType.ADD_ALERT,
           payload: {
-            message: `${props.project_name} Notebook refreshed`,
+            message: `${props.project_name} ${NOTEBOOK_NAME_CAPITALIZED} refreshed`,
             severity: 'success',
           },
         });

app/src/gui/components/notebook/settings/activation-switch.tsx

@@ -5,6 +5,7 @@ import {ProjectInformation} from '@faims3/data-model';
 import DialogActions from '@mui/material/DialogActions';
 
 import Dialog from '@mui/material/Dialog';
+import {NOTEBOOK_NAME} from '../../../../buildconfig';
 
 type NotebookActivationSwitchProps = {
   project: ProjectInformation;
@@ -43,8 +44,8 @@ export default function NotebookActivationSwitch(
       >
         <Alert severity={'info'}>
           <AlertTitle>Are you sure?</AlertTitle>
-          Do you want to start syncing the {props.project.name} notebook to your
-          device?
+          Do you want to start syncing the {props.project.name} {NOTEBOOK_NAME}{' '}
+          to your device?
         </Alert>
         <DialogActions style={{justifyContent: 'space-between'}}>
           <Button onClick={handleClose} autoFocus color={'primary'}>

app/src/gui/components/notebook/settings/index.tsx

@@ -45,6 +45,7 @@ import AutoIncrementerSettingsList from './auto_incrementers';
 import NotebookSyncSwitch from './sync_switch';
 import {ProjectUIModel} from '@faims3/data-model';
 import {logError} from '../../../../logging';
+import {NOTEBOOK_NAME_CAPITALIZED} from '../../../../buildconfig';
 
 export default function NotebookSettings(props: {uiSpec: ProjectUIModel}) {
   const {project_id} = useParams<{project_id: ProjectID}>();
@@ -88,7 +89,7 @@ export default function NotebookSettings(props: {uiSpec: ProjectUIModel}) {
             mb={{xs: 1, sm: 2, md: 3}}
           >
             <Typography variant={'h6'} sx={{mb: 2}}>
-              Sync Notebook
+              Sync ${NOTEBOOK_NAME_CAPITALIZED}
             </Typography>
             <NotebookSyncSwitch
               project={projectInfo}
@@ -126,8 +127,8 @@ export default function NotebookSettings(props: {uiSpec: ProjectUIModel}) {
                   label={<Typography>{isSyncing ? 'On' : 'Off'}</Typography>}
                 />
                 <Typography variant={'body2'}>
-                  This control is notebook and device specific. If this option
-                  is enabled, Fieldmark™ will automatically download and show
+                  This control is app and device specific. If this option is
+                  enabled, Fieldmark™ will automatically download and show
                   images and attachments created by other devices. Be aware that
                   this may be resource intensive and use your mobile data plan.
                   Disable this setting to minimise network usage. This setting

app/src/gui/components/notebook/settings/sync_switch.tsx

@@ -46,6 +46,7 @@ import {grey} from '@mui/material/colors';
 import NotebookActivationSwitch from './activation-switch';
 import LoadingButton from '@mui/lab/LoadingButton';
 import {ProjectID} from '@faims3/data-model';
+import {NOTEBOOK_NAME} from '../../../../buildconfig';
 
 type NotebookSyncSwitchProps = {
   project: ProjectInformation;
@@ -144,7 +145,7 @@ export default function NotebookSyncSwitch(props: NotebookSyncSwitchProps) {
           {isWorking ? <FormHelperText>Working...</FormHelperText> : ''}
           {props.showHelperText ? (
             <FormHelperText>
-              Toggle syncing this notebook to the server.
+              Toggle syncing this {NOTEBOOK_NAME} to the server.
             </FormHelperText>
           ) : (
             ''
@@ -158,7 +159,7 @@ export default function NotebookSyncSwitch(props: NotebookSyncSwitchProps) {
             <Alert severity={isSyncing ? 'warning' : 'info'}>
               <AlertTitle>Are you sure?</AlertTitle>
               Do you want to {isSyncing ? 'stop' : 'start'} syncing the{' '}
-              {props.project.name} notebook to your device?
+              {props.project.name} {NOTEBOOK_NAME} to your device?
             </Alert>
             <DialogActions style={{justifyContent: 'space-between'}}>
               <Button onClick={handleClose} autoFocus>
@@ -183,7 +184,7 @@ export default function NotebookSyncSwitch(props: NotebookSyncSwitchProps) {
                           payload: {
                             message: `${
                               !isSyncing ? 'Enabling ' : 'Disabling '
-                            } data sync for notebook  ${project.name}`,
+                            } data sync for ${NOTEBOOK_NAME}  ${project.name}`,
                             severity: 'success',
                           },
                         });
@@ -235,7 +236,7 @@ export default function NotebookSyncSwitch(props: NotebookSyncSwitchProps) {
         variant={'caption'}
         elevation={0}
       >
-        Only published or archived notebooks can be synced.
+        Only published or archived ${NOTEBOOK_NAME}s can be synced.
       </Typography>
     </Box>
   );