Front-end Clean-up (#1239)

Front-end clean-up on the following interfaces: * Taxonomy Displays * Project team members list (autocomplete) * Project List Page filters * General Layout Updates / Formatting --------- Co-authored-by: Nick Phura <[email protected]> Co-authored-by: Alfred Rosenthal <[email protected]>
bcgov · Mar 13, 2024 · ce20bbb · ce20bbb
1 parent decf49e
commit ce20bbb
Show file tree

Hide file tree

Showing 34 changed files with 453 additions and 576 deletions.
diff --git a/app/src/components/boundary/InferredLocationDetails.tsx b/app/src/components/boundary/InferredLocationDetails.tsx
@@ -23,11 +23,11 @@ const InferredLocationDetails = (props: IInferredLocationDetailsProps) => {
         <Typography component="dt">
           {type} ({layerNames.length})
         </Typography>
-        <Box>
+        <Typography component="dd">
           {layerNames.map((name: string, index: number) => (
             <Typography
               key={name}
-              component="dd"
+              component="span"
               sx={{
                 display: 'inline-block',
                 mr: '5px'
@@ -36,7 +36,7 @@ const InferredLocationDetails = (props: IInferredLocationDetailsProps) => {
               {index < layerNames.length - 1 && ', '}
             </Typography>
           ))}
-        </Box>
+        </Typography>
       </Box>
     );
   };

diff --git a/app/src/components/data-grid/taxonomy/TaxonomyDataGridEditCell.tsx b/app/src/components/data-grid/taxonomy/TaxonomyDataGridEditCell.tsx
@@ -68,8 +68,7 @@ const TaxonomyDataGridEditCell = <DataGridType extends GridValidRowModel, ValueT
           const response = await biohubApi.taxonomy.searchSpeciesByTerms([searchTerm]);
           const options = response.map((item) => ({
             value: item.tsn as ValueType,
-            label: item.scientificName,
-            subtext: item.commonName || undefined
+            label: item.commonName ? `${item.commonName} (${item.scientificName})` : item.scientificName
           }));
           onSearchResults(options);
         },

diff --git a/app/src/components/layout/PageHeader.tsx b/app/src/components/layout/PageHeader.tsx
@@ -1,5 +1,4 @@
 import Box from '@mui/material/Box';
-import { grey } from '@mui/material/colors';
 import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
@@ -21,14 +20,12 @@ const PageHeader = (props: IPageHeader) => {
 
   return (
     <Paper
-      elevation={0}
       square={true}
       id="pageTitle"
       sx={{
         position: { sm: 'relative', lg: 'sticky' },
         top: 0,
-        zIndex: 1002,
-        borderBottom: '1px solid' + grey[300]
+        zIndex: 1002
       }}>
       <Container maxWidth={'xl'} sx={{ py: { xs: 2, sm: 3 } }}>
         {breadCrumbJSX}

diff --git a/app/src/components/search-filter/ProjectAdvancedFilters.tsx b/app/src/components/search-filter/ProjectAdvancedFilters.tsx
@@ -93,10 +93,10 @@ const ProjectAdvancedFilters = () => {
         <Grid item xs={12}>
           <CustomTextField name="keyword" label="Keyword (or any portion of any word)" />
         </Grid>
-        <Grid item xs={12} md={6}>
+        <Grid item xs={12} md={4}>
           <CustomTextField name="project_name" label="Project Name" />
         </Grid>
-        <Grid item xs={12} md={6}>
+        <Grid item xs={12} md={4}>
           <MultiAutocompleteFieldVariableSize
             id="itis_tsns"
             label="Species"

diff --git a/app/src/features/admin/users/AccessRequestList.tsx b/app/src/features/admin/users/AccessRequestList.tsx
@@ -206,7 +206,7 @@ const AccessRequestList: React.FC<IAccessRequestListProps> = (props) => {
           )
         }}
       />
-      <Paper elevation={0}>
+      <Paper>
         <Toolbar>
           <Typography variant="h4" component="h2">
             Access Requests{' '}

diff --git a/app/src/features/admin/users/ActiveUsersList.tsx b/app/src/features/admin/users/ActiveUsersList.tsx
@@ -247,7 +247,7 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
 
   return (
     <>
-      <Paper elevation={0}>
+      <Paper>
         <Toolbar style={{ display: 'flex', justifyContent: 'space-between' }}>
           <Typography variant="h4" component="h2">
             Active Users{' '}

diff --git a/app/src/features/admin/users/ManageUsersPage.tsx b/app/src/features/admin/users/ManageUsersPage.tsx
@@ -119,19 +119,17 @@ const ManageUsersPage: React.FC = () => {
   return (
     <>
       <PageHeader title="Manage Users" />
-      <Container maxWidth="xl">
-        <Box py={3}>
-          <AccessRequestList
-            accessRequests={accessRequests}
-            codes={codes}
-            refresh={() => {
-              refreshAccessRequests();
-              refreshActiveUsers();
-            }}
-          />
-          <Box mt={3}>
-            <ActiveUsersList activeUsers={activeUsers} codes={codes} refresh={refreshActiveUsers} />
-          </Box>
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <AccessRequestList
+          accessRequests={accessRequests}
+          codes={codes}
+          refresh={() => {
+            refreshAccessRequests();
+            refreshActiveUsers();
+          }}
+        />
+        <Box mt={3}>
+          <ActiveUsersList activeUsers={activeUsers} codes={codes} refresh={refreshActiveUsers} />
         </Box>
       </Container>
     </>

diff --git a/app/src/features/admin/users/UsersDetailPage.tsx b/app/src/features/admin/users/UsersDetailPage.tsx
@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Container from '@mui/material/Container';
 import React, { useEffect, useState } from 'react';
@@ -41,10 +40,8 @@ const UsersDetailPage: React.FC = () => {
     <>
       <UsersDetailHeader userDetails={selectedUser} />
 
-      <Container maxWidth="xl">
-        <Box my={3}>
-          <UsersDetailProjects userDetails={selectedUser} />
-        </Box>
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <UsersDetailProjects userDetails={selectedUser} />
       </Container>
     </>
   );

diff --git a/app/src/features/admin/users/UsersDetailProjects.tsx b/app/src/features/admin/users/UsersDetailProjects.tsx
@@ -13,7 +13,6 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router';
 import { Link as RouterLink } from 'react-router-dom';
@@ -28,28 +27,6 @@ import { CodeSet, IGetAllCodeSetsResponse } from '../../../interfaces/useCodesAp
 import { IGetUserProjectsListResponse } from '../../../interfaces/useProjectApi.interface';
 import { ISystemUser } from '../../../interfaces/useUserApi.interface';
 
-const useStyles = makeStyles(() => ({
-  actionButton: {
-    minWidth: '6rem',
-    '& + button': {
-      marginLeft: '0.5rem'
-    }
-  },
-  projectMembersTable: {
-    tableLayout: 'fixed',
-    '& td': {
-      verticalAlign: 'middle'
-    }
-  },
-  toolbarCount: {
-    fontWeight: 400
-  },
-  linkButton: {
-    textAlign: 'left',
-    fontWeight: 700
-  }
-}));
-
 export interface IProjectDetailsProps {
   userDetails: ISystemUser;
 }
@@ -64,7 +41,6 @@ const UsersDetailProjects: React.FC<IProjectDetailsProps> = (props) => {
   const urlParams = useParams();
   const biohubApi = useBiohubApi();
   const dialogContext = useContext(DialogContext);
-  const classes = useStyles();
 
   const [codes, setCodes] = useState<IGetAllCodeSetsResponse>();
   const [isLoadingCodes, setIsLoadingCodes] = useState(true);
@@ -177,18 +153,18 @@ const UsersDetailProjects: React.FC<IProjectDetailsProps> = (props) => {
   }
 
   return (
-    <Paper elevation={0}>
+    <Paper>
       <Toolbar>
         <Typography data-testid="projects_header" variant="h4" component="h2">
           Assigned Projects &zwnj;
-          <Typography className={classes.toolbarCount} component="span" variant="inherit" color="textSecondary">
+          <Typography component="span" variant="inherit" color="textSecondary">
             ({assignedProjects?.length})
           </Typography>
         </Typography>
       </Toolbar>
       <Divider></Divider>
       <Box p={2}>
-        <Table className={classes.projectMembersTable}>
+        <Table sx={{ tableLayout: 'fixed' }}>
           <TableHead>
             <TableRow>
               <TableCell>Project Name</TableCell>

diff --git a/app/src/features/funding-sources/list/FundingSourcesListPage.tsx b/app/src/features/funding-sources/list/FundingSourcesListPage.tsx
@@ -110,41 +110,39 @@ const FundingSourcesListPage: React.FC = () => {
         }
       />
 
-      <Container maxWidth="xl">
-        <Box py={3}>
-          <Paper elevation={0}>
-            <Toolbar style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Typography variant="h4" component="h2" data-testid="funding-source-list-found">
-                Records Found &zwnj;
-                <Typography
-                  component="span"
-                  color="textSecondary"
-                  lineHeight="inherit"
-                  fontSize="inherit"
-                  fontWeight={400}>
-                  ({Number(fundingSourceDataLoader.data?.length ?? 0).toLocaleString()})
-                </Typography>
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <Paper>
+          <Toolbar style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Typography variant="h4" component="h2" data-testid="funding-source-list-found">
+              Records Found &zwnj;
+              <Typography
+                component="span"
+                color="textSecondary"
+                lineHeight="inherit"
+                fontSize="inherit"
+                fontWeight={400}>
+                ({Number(fundingSourceDataLoader.data?.length ?? 0).toLocaleString()})
               </Typography>
-            </Toolbar>
-            <Divider></Divider>
-            <Box p={2}>
-              <FundingSourcesTable
-                fundingSources={fundingSourceDataLoader.data ?? []}
-                onView={(fundingSourceId) => {
-                  openViewModal(fundingSourceId);
-                }}
-                onEdit={(fundingSourceId) => {
-                  setFundingSourceId(fundingSourceId);
-                  setIsEditModalOpen(true);
-                }}
-                onDelete={(fundingSourceId) => {
-                  setFundingSourceId(fundingSourceId);
-                  setIsDeleteModalOpen(true);
-                }}
-              />
-            </Box>
-          </Paper>
-        </Box>
+            </Typography>
+          </Toolbar>
+          <Divider></Divider>
+          <Box p={2}>
+            <FundingSourcesTable
+              fundingSources={fundingSourceDataLoader.data ?? []}
+              onView={(fundingSourceId) => {
+                openViewModal(fundingSourceId);
+              }}
+              onEdit={(fundingSourceId) => {
+                setFundingSourceId(fundingSourceId);
+                setIsEditModalOpen(true);
+              }}
+              onDelete={(fundingSourceId) => {
+                setFundingSourceId(fundingSourceId);
+                setIsDeleteModalOpen(true);
+              }}
+            />
+          </Box>
+        </Paper>
       </Container>
     </>
   );

diff --git a/app/src/features/projects/components/ProjectUserForm.tsx b/app/src/features/projects/components/ProjectUserForm.tsx
@@ -4,6 +4,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Collapse from '@mui/material/Collapse';
+import grey from '@mui/material/colors/grey';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import AlertBar from 'components/alert/AlertBar';
@@ -204,13 +205,23 @@ const ProjectUserForm = (props: IProjectUserFormProps) => {
             )}
             renderOption={(renderProps, renderOption) => {
               return (
-                <Box component="li" {...renderProps} key={renderOption.system_user_id}>
-                  <UserCard
-                    name={renderOption.display_name}
-                    email={renderOption.email}
-                    agency={renderOption.agency}
-                    type={renderOption.identity_source}
-                  />
+                <Box
+                  component="li"
+                  sx={{
+                    '& + li': {
+                      borderTop: '1px solid' + grey[300]
+                    }
+                  }}
+                  key={renderOption.system_user_id}
+                  {...renderProps}>
+                  <Box py={0.5} width="100%">
+                    <UserCard
+                      name={renderOption.display_name}
+                      email={renderOption.email}
+                      agency={renderOption.agency}
+                      type={renderOption.identity_source}
+                    />
+                  </Box>
                 </Box>
               );
             }}

diff --git a/app/src/features/projects/create/CreateProjectPage.tsx b/app/src/features/projects/create/CreateProjectPage.tsx
@@ -1,5 +1,4 @@
 import { LoadingButton } from '@mui/lab';
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Container from '@mui/material/Container';
@@ -197,30 +196,28 @@ const CreateProjectPage = () => {
         }
       />
 
-      <Container maxWidth="xl">
-        <Box py={3}>
-          <Paper elevation={0} sx={{ p: 5 }}>
-            <EditProjectForm
-              initialProjectData={initialProjectData}
-              handleSubmit={(formikData) => createProject(formikData as ICreateProjectRequest)}
-              formikRef={formikRef as unknown as React.RefObject<FormikProps<IUpdateProjectRequest>>}
-            />
-            <Stack mt={4} flexDirection="row" justifyContent="flex-end" gap={1}>
-              <LoadingButton
-                loading={isSaving}
-                type="submit"
-                color="primary"
-                variant="contained"
-                onClick={() => formikRef.current?.submitForm()}
-                data-testid="submit-project-button">
-                Save and Exit
-              </LoadingButton>
-              <Button disabled={isSaving} color="primary" variant="outlined" onClick={handleCancel}>
-                Cancel
-              </Button>
-            </Stack>
-          </Paper>
-        </Box>
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <Paper sx={{ p: 5 }}>
+          <EditProjectForm
+            initialProjectData={initialProjectData}
+            handleSubmit={(formikData) => createProject(formikData as ICreateProjectRequest)}
+            formikRef={formikRef as unknown as React.RefObject<FormikProps<IUpdateProjectRequest>>}
+          />
+          <Stack mt={4} flexDirection="row" justifyContent="flex-end" gap={1}>
+            <LoadingButton
+              loading={isSaving}
+              type="submit"
+              color="primary"
+              variant="contained"
+              onClick={() => formikRef.current?.submitForm()}
+              data-testid="submit-project-button">
+              Save and Exit
+            </LoadingButton>
+            <Button disabled={isSaving} color="primary" variant="outlined" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </Stack>
+        </Paper>
       </Container>
     </>
   );