Release dev-staging changes to dev

api/src/paths/funding-sources/index.ts

@@ -6,6 +6,7 @@ import { FundingSource, FundingSourceSupplementaryData } from '../../repositorie
 import { SystemUser } from '../../repositories/user-repository';
 import { authorizeRequestHandler } from '../../request-handlers/security/authorization';
 import { FundingSourceService, IFundingSourceSearchParams } from '../../services/funding-source-service';
+import { UserService } from '../../services/user-service';
 import { getLogger } from '../../utils/logger';
 
 const defaultLog = getLogger('paths/funding-sources/index');
@@ -121,7 +122,7 @@ export function getFundingSources(): RequestHandler {
       await connection.commit();
 
       const systemUserObject: SystemUser = req['system_user'];
-      if (!isAdmin(systemUserObject)) {
+      if (!UserService.isAdmin(systemUserObject)) {
         // User is not an admin, strip sensitive fields from response
         response = removeNonAdminFieldsFromFundingSourcesResponse(response);
       }
@@ -137,19 +138,6 @@ export function getFundingSources(): RequestHandler {
   };
 }
 
-/**
- * Checks if the system user is an admin (has an admin level system role).
- *
- * @param {SystemUser} systemUserObject
- * @return {*}  {boolean} `true` if the user is an admin, `false` otherwise.
- */
-function isAdmin(systemUserObject: SystemUser): boolean {
-  return (
-    systemUserObject.role_names.includes(SYSTEM_ROLE.SYSTEM_ADMIN) ||
-    systemUserObject.role_names.includes(SYSTEM_ROLE.DATA_ADMINISTRATOR)
-  );
-}
-
 /**
  * Removes sensitive (admin-only) fields from the funding sources response, returning a new sanitized array.
  *

api/src/paths/project/{projectId}/attachments/{attachmentId}/delete.ts

@@ -5,6 +5,7 @@ import { getDBConnection } from '../../../../../database/db';
 import { SystemUser } from '../../../../../repositories/user-repository';
 import { authorizeRequestHandler } from '../../../../../request-handlers/security/authorization';
 import { AttachmentService } from '../../../../../services/attachment-service';
+import { UserService } from '../../../../../services/user-service';
 import { getLogger } from '../../../../../utils/logger';
 import { attachmentApiDocObject } from '../../../../../utils/shared-api-docs';
 
@@ -104,15 +105,12 @@ export function deleteAttachment(): RequestHandler {
       const attachmentService = new AttachmentService(connection);
 
       const systemUserObject: SystemUser = req['system_user'];
-      const isAdmin =
-        systemUserObject.role_names.includes(SYSTEM_ROLE.SYSTEM_ADMIN) ||
-        systemUserObject.role_names.includes(SYSTEM_ROLE.DATA_ADMINISTRATOR);
 
       await attachmentService.handleDeleteProjectAttachment(
         Number(req.params.projectId),
         Number(req.params.attachmentId),
         req.body.attachmentType,
-        isAdmin
+        UserService.isAdmin(systemUserObject)
       );
 
       await connection.commit();

api/src/paths/project/{projectId}/survey/{surveyId}/attachments/{attachmentId}/delete.ts

@@ -5,6 +5,7 @@ import { getDBConnection } from '../../../../../../../database/db';
 import { SystemUser } from '../../../../../../../repositories/user-repository';
 import { authorizeRequestHandler } from '../../../../../../../request-handlers/security/authorization';
 import { AttachmentService } from '../../../../../../../services/attachment-service';
+import { UserService } from '../../../../../../../services/user-service';
 import { getLogger } from '../../../../../../../utils/logger';
 import { attachmentApiDocObject } from '../../../../../../../utils/shared-api-docs';
 
@@ -110,15 +111,12 @@ export function deleteAttachment(): RequestHandler {
       const attachmentService = new AttachmentService(connection);
 
       const systemUserObject: SystemUser = req['system_user'];
-      const isAdmin =
-        systemUserObject.role_names.includes(SYSTEM_ROLE.SYSTEM_ADMIN) ||
-        systemUserObject.role_names.includes(SYSTEM_ROLE.DATA_ADMINISTRATOR);
 
       await attachmentService.handleDeleteSurveyAttachment(
         Number(req.params.surveyId),
         Number(req.params.attachmentId),
         req.body.attachmentType,
-        isAdmin
+        UserService.isAdmin(systemUserObject)
       );
 
       await connection.commit();

api/src/services/user-service.ts

@@ -1,3 +1,4 @@
+import { SYSTEM_ROLE } from '../constants/roles';
 import { IDBConnection } from '../database/db';
 import { ApiExecuteSQLError } from '../errors/api-error';
 import { SystemUser, UserRepository, UserSearchCriteria } from '../repositories/user-repository';
@@ -15,6 +16,19 @@ export class UserService extends DBService {
     this.userRepository = new UserRepository(connection);
   }
 
+  /**
+   * Checks if the given system user is an admin (has an admin level system role).
+   *
+   * @param {SystemUser} systemUser
+   * @return {*}  {boolean} `true` if the user is an admin, `false` otherwise.
+   */
+  static isAdmin(systemUser: SystemUser): boolean {
+    return (
+      systemUser.role_names.includes(SYSTEM_ROLE.SYSTEM_ADMIN) ||
+      systemUser.role_names.includes(SYSTEM_ROLE.DATA_ADMINISTRATOR)
+    );
+  }
+
   /**
    * Fetch a single system user by their system user ID.
    *

app/package.json

@@ -46,6 +46,7 @@
     "@turf/boolean-equal": "~6.3.0",
     "@turf/center-of-mass": "~6.5.0",
     "@turf/centroid": "~6.4.0",
+    "@turf/turf": "^6.5.0",
     "axios": "~0.21.4",
     "clsx": "~1.2.1",
     "express": "~4.17.1",

app/src/components/boundary/InferredLocationDetails.tsx

@@ -1,41 +1,5 @@
-import { Theme } from '@mui/material';
 import Box from '@mui/material/Box';
-import { grey } from '@mui/material/colors';
-import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
-import React from 'react';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  boundaryGroup: {
-    clear: 'both',
-    overflow: 'hidden',
-    '&:first-child': {
-      marginTop: 0
-    }
-  },
-  boundaryList: {
-    margin: 0,
-    padding: 0,
-    listStyleType: 'none',
-    '& li': {
-      display: 'inline-block',
-      float: 'left'
-    },
-    '& li + li': {
-      marginLeft: theme.spacing(1)
-    }
-  },
-  metaSectionHeader: {
-    color: grey[600],
-    fontWeight: 700,
-    textTransform: 'uppercase',
-    '& + hr': {
-      marginTop: theme.spacing(0.75),
-      marginBottom: theme.spacing(0.75)
-    }
-  }
-}));
 
 export interface IInferredLayers {
   parks: string[];
@@ -48,30 +12,32 @@
   layers: IInferredLayers;
 }
 
-const InferredLocationDetails: React.FC<IInferredLocationDetailsProps> = (props) => {
-  const classes = useStyles();
-  const displayInferredLayersInfo = (data: any[], type: string) => {
-    if (!data.length) {
+const InferredLocationDetails = (props: IInferredLocationDetailsProps) => {
+  const displayInferredLayersInfo = (layerNames: string[], type: string) => {
+    if (!layerNames.length) {
       return;
     }
 
     return (
-      <>
-        <Box className={classes.boundaryGroup} mt={3}>
-          <Typography variant="body2" component="h3" className={classes.metaSectionHeader}>
-            {type} ({data.length})
-          </Typography>
-          <Divider></Divider>
-          <Box component="ul" className={classes.boundaryList}>
-            {data.map((item: string, index: number) => (
-              <Typography key={index} variant="body1" component="li">
-                {item}
-                {index < data.length - 1 && ', '}
-              </Typography>
-            ))}
-          </Box>
+      <Box className="row">
+        <Typography component="dt">
+          {type} ({layerNames.length})
+        </Typography>
+        <Box>
+          {layerNames.map((name: string, index: number) => (
+            <Typography
+              key={name}
+              component="dd"
+              sx={{
+                display: 'inline-block',
+                mr: '5px'
+              }}>
+              {name}
+              {index < layerNames.length - 1 && ', '}
+            </Typography>
+          ))}
         </Box>
-      </>
+      </Box>
     );
   };
 

app/src/components/data-grid/autocomplete/AsyncAutocompleteDataGridEditCell.tsx

@@ -1,5 +1,3 @@
-import { mdiMagnify } from '@mdi/js';
-import Icon from '@mdi/react';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -170,16 +168,11 @@ const AsyncAutocompleteDataGridEditCell = <DataGridType extends GridValidRowMode
       renderInput={(params) => (
         <TextField
           {...params}
+          size="small"
           variant="outlined"
-          placeholder={'Type to search...'}
           fullWidth
           InputProps={{
             ...params.InputProps,
-            startAdornment: (
-              <Box mt="6px">
-                <Icon path={mdiMagnify} size={1}></Icon>
-              </Box>
-            ),
             endAdornment: (
               <>
                 {isLoading ? <CircularProgress color="inherit" size={20} /> : null}

app/src/components/data-grid/autocomplete/AutocompleteDataGridEditCell.tsx

@@ -98,8 +98,8 @@ const AutocompleteDataGridEditCell = <DataGridType extends GridValidRowModel, Va
       renderInput={(params) => (
         <TextField
           {...params}
+          size="small"
           variant="outlined"
-          placeholder={'Type to filter...'}
           fullWidth
           InputProps={{
             ...params.InputProps

app/src/components/data-grid/autocomplete/AutocompleteDataGridViewCell.tsx

@@ -1,3 +1,4 @@
+import Typography from '@mui/material/Typography';
 import { GridRenderCellParams, GridValidRowModel } from '@mui/x-data-grid';
 import { IAutocompleteDataGridOption } from 'components/data-grid/autocomplete/AutocompleteDataGrid.interface';
 
@@ -33,7 +34,14 @@
   props: IAutocompleteDataGridViewCellProps<DataGridType, ValueType>
 ) => {
   const { dataGridProps, options } = props;
-  return <>{options.find((item) => item.value === dataGridProps.value)?.label ?? ''}</>;
+  return (
+    <Typography
+      variant="body2"
+      component="div"
+      sx={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+      {options.find((item) => item.value === dataGridProps.value)?.label ?? ''}
+    </Typography>
+  );
 };
 
 export default AutocompleteDataGridViewCell;

app/src/components/data-grid/taxonomy/TaxonomyDataGridEditCell.tsx

@@ -27,7 +27,17 @@
   const getCurrentOption = async (
     speciesId: string | number
   ): Promise<IAutocompleteDataGridOption<ValueType> | null> => {
-    const response = await biohubApi.taxonomy.getSpeciesFromIds([Number(speciesId)]);
+    if (!speciesId) {
+      return null;
+    }
+
+    const id = Number(speciesId);
+
+    if (isNaN(id)) {
+      return null;
+    }
+
+    const response = await biohubApi.taxonomy.getSpeciesFromIds([id]);
 
     if (response.searchResponse.length !== 1) {
       return null;
@@ -43,6 +53,11 @@
           searchTerm: string,
           onSearchResults: (searchedValues: IAutocompleteDataGridOption<ValueType>[]) => void
         ) => {
+          if (!searchTerm) {
+            onSearchResults([]);
+            return;
+          }
+
           const response = await biohubApi.taxonomy.searchSpecies(searchTerm);
           const options = response.searchResponse.map((item) => ({
             value: parseInt(item.id) as ValueType,

app/src/components/data-grid/taxonomy/TaxonomyDataGridViewCell.tsx

@@ -1,3 +1,4 @@
+import Typography from '@mui/material/Typography';
 import { GridRenderCellParams, GridValidRowModel } from '@mui/x-data-grid';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import useDataLoader from 'hooks/useDataLoader';
@@ -20,7 +21,19 @@
 
   const biohubApi = useBiohubApi();
 
-  const taxonomyDataLoader = useDataLoader(() => biohubApi.taxonomy.getSpeciesFromIds([Number(dataGridProps.value)]));
+  const taxonomyDataLoader = useDataLoader(async () => {
+    if (!dataGridProps.value) {
+      return { searchResponse: [] };
+    }
+
+    const id = Number(dataGridProps.value);
+
+    if (isNaN(id)) {
+      return { searchResponse: [] };
+    }
+
+    return biohubApi.taxonomy.getSpeciesFromIds([Number(dataGridProps.value)]);
+  });
 
   taxonomyDataLoader.load();
 
@@ -32,7 +45,14 @@
     return null;
   }
 
-  return <>{taxonomyDataLoader.data?.searchResponse[0].label}</>;
+  return (
+    <Typography
+      variant="body2"
+      component="div"
+      sx={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+      {taxonomyDataLoader.data?.searchResponse[0].label}
+    </Typography>
+  );
 };
 
 export default TaxonomyDataGridViewCell;

app/src/components/map/MapContainer.tsx

@@ -1,7 +1,7 @@
 import { layerContentHandlers } from 'components/map/wfs-utils';
 import { Feature } from 'geojson';
 import { useBiohubApi } from 'hooks/useBioHubApi';
-import L, { LatLngBoundsExpression, LeafletEventHandlerFnMap } from 'leaflet';
+import L, { LatLng, LatLngBoundsExpression, LeafletEventHandlerFnMap } from 'leaflet';
 import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
 import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
 import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
@@ -24,6 +24,10 @@
 import StaticLayers, { IStaticLayer } from './components/StaticLayers';
 import WFSFeatureGroup from './WFSFeatureGroup';
 
+const point = (feature: Feature, latlng: LatLng) => {
+  return new L.CircleMarker(latlng, { radius: 6, fillOpacity: 1, fillColor: '#006edc', color: '#ffffff', weight: 1 });
+};
+
 /*
   Get leaflet icons working
 */
@@ -60,6 +64,7 @@
   additionalLayers?: IAdditionalLayers;
   clusteredPointGeometries?: IClusteredPointGeometries[];
   confirmDeletion?: boolean;
+  hideLayerControls?: boolean;
   setInferredLayersInfo?: (inferredLayersInfo: any) => void;
   onBoundsChange?: IMapBoundsOnChange;
   onDrawChange?: IDrawControlsOnChange;
@@ -197,7 +202,7 @@
       )}
 
       {nonEditableGeometries?.map((nonEditableGeo: INonEditableGeometries) => (
-        <GeoJSON key={uuidv4()} data={nonEditableGeo.feature}>
+        <GeoJSON key={uuidv4()} data={nonEditableGeo.feature} pointToLayer={point}>
           {nonEditableGeo.popupComponent}
         </GeoJSON>
       ))}
@@ -215,13 +220,15 @@
 
       {additionalLayers && <AdditionalLayers layers={additionalLayers} />}
 
-      <LayersControl position="bottomright">
-        <StaticLayers layers={staticLayers} />
+      {props.hideLayerControls !== true && (
+        <LayersControl position="bottomright">
+          <StaticLayers layers={staticLayers} />
 
-        <MarkerCluster layers={markerLayers} />
+          <MarkerCluster layers={markerLayers} />
 
-        <BaseLayerControls />
-      </LayersControl>
+          <BaseLayerControls />
+        </LayersControl>
+      )}
     </LeafletMapContainer>
   );
 };