feat: photo form field redesign

app/src/constants/routes.tsx

@@ -28,6 +28,7 @@ export const AUTH_RETURN = '/auth-return/';
 export const NOT_FOUND = '/not-found';
 
 export const INDIVIDUAL_NOTEBOOK_ROUTE = `/${NOTEBOOK_NAME}s/`;
+export const INDIVIDUAL_NOTEBOOK_ROUTE_TAB_Q = 'tab';
 export const NOTEBOOK_LIST_ROUTE = '/';
 
 export const RECORD_LIST = '/records';

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

@@ -31,7 +31,7 @@ import {GridToolbarContainer, GridToolbarFilterButton} from '@mui/x-data-grid';
 import SearchIcon from '@mui/icons-material/Search';
 import ClearIcon from '@mui/icons-material/Clear';
 import TuneIcon from '@mui/icons-material/Tune';
-import {usePrevious} from '../../../utils/custom_hooks';
+import {usePrevious} from '../../../utils/customHooks';
 import {theme} from '../../themes';
 
 interface ToolbarProps {

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

@@ -1,46 +1,58 @@
-import React, {useEffect, useState} from 'react';
+import {ProjectUIModel, ProjectUIViewsets} from '@faims3/data-model';
+import DashboardIcon from '@mui/icons-material/Dashboard';
 import {
-  Tabs,
-  Tab,
-  Typography,
-  Box,
-  Paper,
-  AppBar,
   Alert,
   AlertTitle,
+  AppBar,
+  Box,
   Button,
   Grid,
-  TableContainer,
+  Paper,
+  Tab,
   Table,
   TableBody,
-  TableRow,
   TableCell,
+  TableContainer,
+  TableRow,
+  Tabs,
+  Typography,
 } from '@mui/material';
-import {useNavigate} from 'react-router-dom';
-import {ProjectUIViewsets} from '@faims3/data-model';
-import {getUiSpecForProject} from '../../../uiSpecification';
-import {ProjectUIModel} from '@faims3/data-model';
-import DraftsTable from './draft_table';
-import {RecordsBrowseTable} from './record_table';
-import MetadataRenderer from '../metadataRenderer';
-import AddRecordButtons from './add_record_by_type';
-import NotebookSettings from './settings';
 import {useTheme} from '@mui/material/styles';
-import DraftTabBadge from './draft_tab_badge';
 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 {useQuery} from '@tanstack/react-query';
+import React, {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
 import {
   NOTEBOOK_NAME,
   NOTEBOOK_NAME_CAPITALIZED,
   SHOW_RECORD_SUMMARY_COUNTS,
 } from '../../../buildconfig';
-import {useQuery} from '@tanstack/react-query';
+import * as ROUTES from '../../../constants/routes';
 import {getMetadataValue} from '../../../sync/metadata';
 import {ProjectExtended} from '../../../types/project';
-import RangeHeader from './range_header';
+import {getUiSpecForProject} from '../../../uiSpecification';
+import {useQueryParams} from '../../../utils/customHooks';
+import MetadataRenderer from '../metadataRenderer';
+import CircularLoading from '../ui/circular_loading';
+import AddRecordButtons from './add_record_by_type';
+import DraftTabBadge from './draft_tab_badge';
+import DraftsTable from './draft_table';
 import {OverviewMap} from './overview_map';
+import RangeHeader from './range_header';
+import {RecordsBrowseTable} from './record_table';
+import NotebookSettings from './settings';
+
+// Define how tabs appear in the query string arguments, providing a two way map
+type TabIndex = 'records' | 'details' | 'settings' | 'map';
+const TAB_TO_INDEX = new Map<TabIndex, number>([
+  ['records', 0],
+  ['details', 1],
+  ['settings', 2],
+  ['map', 3],
+]);
+const INDEX_TO_TAB = new Map<number, TabIndex>(
+  Array.from(TAB_TO_INDEX.entries()).map(([k, v]) => [v, k])
+);
 
 /**
  * TabPanelProps defines the properties for the TabPanel component.
@@ -107,7 +119,18 @@ type NotebookComponentProps = {
  * @returns {JSX.Element} - The JSX element for the NotebookComponent.
  */
 export default function NotebookComponent({project}: NotebookComponentProps) {
-  const [notebookTabValue, setNotebookTabValue] = React.useState(0);
+  // This manages the tab using a query string arg
+  const {params, setParam} = useQueryParams<{tab: TabIndex}>({
+    tab: {
+      key: ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE_TAB_Q,
+      defaultValue: 'records',
+    },
+  });
+  const notebookTabValue = TAB_TO_INDEX.get(params.tab ?? 'details') ?? 0;
+  const setNotebookTabValue = (val: number) => {
+    setParam('tab', INDEX_TO_TAB.get(val) ?? 'records');
+  };
+
   const [recordDraftTabValue, setRecordDraftTabValue] = React.useState(0);
   const [totalRecords, setTotalRecords] = useState(0);
   const [myRecords, setMyRecords] = useState(0);

app/src/gui/components/ui/Faims_Attachment_Manager_Dialog.tsx

@@ -18,7 +18,6 @@
  *   TODO: download single file
  */
 
-import React from 'react';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
@@ -59,16 +58,35 @@ export default function FaimsAttachmentManagerDialog(props: DiagProps) {
             position: 'absolute',
             right: 8,
             top: 8,
+            bgcolor: 'rgba(0, 0, 0, 0.5)',
+            '&:hover': {
+              bgcolor: 'rgba(0, 0, 0, 0.7)',
+              transform: 'scale(1.1)',
+            },
+            transition: 'all 0.2s ease-in-out',
           }}
         >
-          <CloseIcon />
+          <CloseIcon
+            sx={{
+              color: 'white',
+              fontSize: 24,
+            }}
+          />
         </IconButton>
       </DialogTitle>
       <DialogContent>
         {path !== null ? (
           <img
             data-testid="dialog-img"
-            style={{objectFit: 'none'}}
+            style={{
+              maxWidth: '100%',
+              maxHeight: '90vh',
+              width: 'auto',
+              height: 'auto',
+              objectFit: 'contain',
+              display: 'block',
+              margin: '0 auto',
+            }}
             src={path}
           />
         ) : isSyncing === 'true' ? (
@@ -88,8 +106,9 @@ export default function FaimsAttachmentManagerDialog(props: DiagProps) {
           </DialogContentText>
         ) : (
           <DialogContentText id="alert-dialog-description">
-            To download attachments and photos, please go to{' '}
-            {NOTEBOOK_NAME_CAPITALIZED} / Settings Tab and enable it.
+            To download existing photos, please go to the{' '}
+            {NOTEBOOK_NAME_CAPITALIZED} Settings Tab and enable attachment
+            download.
           </DialogContentText>
         )}
       </DialogContent>
@@ -104,9 +123,13 @@ export default function FaimsAttachmentManagerDialog(props: DiagProps) {
             color="primary"
             size="large"
             component={RouterLink}
-            to={ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE + project_id}
+            to={
+              ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE +
+              project_id +
+              `?${ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE_TAB_Q}=settings`
+            }
           >
-            CHANGE SETTINGS
+            Go to settings
           </Button>
         </DialogActions>
       )}

app/src/gui/components/workspace/CreateNewSurvey.tsx

@@ -13,7 +13,7 @@ import {
   CREATE_NOTEBOOK_ROLES,
   userHasRoleInSpecificListing,
 } from '../../../users';
-import useGetListings from '../../../utils/custom_hooks';
+import {useGetListings} from '../../../utils/customHooks';
 import {useGetAllUserInfo} from '../../../utils/useGetCurrentUser';
 import NewNotebookForListing from '../notebook/NewNotebookForListing';
 import CircularLoading from '../ui/circular_loading';