chore: merge conflicts with DEV resolved

api/src/repositories/observation-subcount-environment-repository.ts

@@ -354,10 +354,19 @@ export class ObservationSubCountEnvironmentRepository extends BaseRepository {
         'environment_qualitative.environment_qualitative_id'
       );
 
+    const searchConditions = [];
+
     for (const searchTerm of searchTerms) {
-      queryBuilder
-        .where('environment_qualitative.name', 'ILIKE', `%${searchTerm}%`)
-        .orWhere('environment_qualitative.description', 'ILIKE', `%${searchTerm}%`);
+      searchConditions.push(
+        knex.raw('environment_qualitative.name ILIKE ? OR environment_qualitative.description ILIKE ?', [
+          `%${searchTerm}%`,
+          `%${searchTerm}%`
+        ])
+      );
+    }
+
+    if (searchConditions.length > 0) {
+      queryBuilder.whereRaw(searchConditions.join(' OR '));
     }
 
     queryBuilder.groupBy(
@@ -381,7 +390,9 @@ export class ObservationSubCountEnvironmentRepository extends BaseRepository {
   async findQuantitativeEnvironmentTypeDefinitions(
     searchTerms: string[]
   ): Promise<QuantitativeEnvironmentTypeDefinition[]> {
-    const queryBuilder = getKnex()
+    const knex = getKnex();
+
+    const queryBuilder = knex
       .select(
         'environment_quantitative.environment_quantitative_id',
         'environment_quantitative.name',
@@ -392,10 +403,19 @@ export class ObservationSubCountEnvironmentRepository extends BaseRepository {
       )
       .from('environment_quantitative');
 
+    const searchConditions = [];
+
     for (const searchTerm of searchTerms) {
-      queryBuilder
-        .where('environment_quantitative.name', 'ILIKE', `%${searchTerm}%`)
-        .orWhere('environment_quantitative.description', 'ILIKE', `%${searchTerm}%`);
+      searchConditions.push(
+        knex.raw('environment_quantitative.name ILIKE ? OR environment_quantitative.description ILIKE ?', [
+          `%${searchTerm}%`,
+          `%${searchTerm}%`
+        ])
+      );
+    }
+
+    if (searchConditions.length > 0) {
+      queryBuilder.whereRaw(searchConditions.join(' OR '));
     }
 
     const response = await this.connection.knex(queryBuilder, QuantitativeEnvironmentTypeDefinition);

api/src/services/observation-service.ts

@@ -834,7 +834,7 @@ export class ObservationService extends DBService {
 
       // if environment is qualitative, find the option id
       if (isEnvironmentQualitativeTypeDefinition(environment)) {
-        const foundOption = environment.options.find((option) => option.name === String(rowData));
+        const foundOption = environment.options.find((option) => option.name === String(rowData).toLowerCase());
 
         if (!foundOption) {
           return;

api/src/utils/csv-utils/csv-config-utils.ts

@@ -22,12 +22,12 @@ export class CSVConfigUtils<StaticHeaderType extends Uppercase<string>> {
   }
 
   /**
-   * The CSV _config static headers.
+   * The CSV config static headers.
    *
-   * @returns {Uppercase<string>[]} - The config headers
+   * @returns {StaticHeaderType[]} - The config headers
    */
-  get configStaticHeaders(): Uppercase<string>[] {
-    return Object.keys(this._config.staticHeadersConfig) as Uppercase<string>[];
+  get configStaticHeaders(): StaticHeaderType[] {
+    return Object.keys(this._config.staticHeadersConfig) as StaticHeaderType[];
   }
 
   /**

api/src/utils/csv-utils/csv-config-validation.ts

@@ -99,9 +99,9 @@ export const validateCSVHeaders = (worksheet: WorkSheet, config: CSVConfig): CSV
       csvErrors.push({
         error: 'A required column is missing',
         solution: `Add all required columns to the file.`,
+        values: [staticHeader, ...config.staticHeadersConfig[staticHeader].aliases],
         header: staticHeader,
         cell: null,
-        values: [staticHeader, ...config.staticHeadersConfig[staticHeader].aliases],
         row: 0
       });
     }
@@ -176,15 +176,15 @@ export const forEachCSVCell = (
 export const executeSetCellValue = (params: CSVParams, headerConfig: CSVHeaderConfig, mutableRows: CSVRow[]) => {
   const row = { ...mutableRows[params.rowIndex] };
 
-  const headerKey = params.staticHeader?.toUpperCase() ?? params.header.toUpperCase();
+  const headerKey = params.staticHeader?.toUpperCase() ?? params.header.toUpperCase()
   const cellValue = headerConfig?.setCellValue?.(params) ?? params.mutateCell;
 
   // Remove the aliased header if it is not the static header
   if (params.staticHeader && params.header !== params.staticHeader) {
-    delete row[params.header];
+    delete row[params.header as Uppercase<string>];
   }
 
-  row[headerKey] = cellValue;
+  row[headerKey as Uppercase<string>] = cellValue;
 
   mutableRows[params.rowIndex] = row;
 };

api/src/utils/observation-xlsx-utils/environment-column-utils.test.ts

@@ -191,7 +191,7 @@ describe('environment-column-utils', () => {
               {
                 environment_qualitative_id: '22-123-456',
                 environment_qualitative_option_id: '33-123-456',
-                name: 'Low',
+                name: 'Low'.toLowerCase(),
                 description: 'Low'
               }
             ]
@@ -207,7 +207,7 @@ describe('environment-column-utils', () => {
               {
                 environment_qualitative_id: '44-123-456',
                 environment_qualitative_option_id: '55-123-456',
-                name: 'North',
+                name: 'North'.toLowerCase(),
                 description: 'North'
               }
             ]
@@ -270,6 +270,7 @@ describe('environment-column-utils', () => {
           value: 100
         }
       ];
+
       const environmentNameTypeDefinitionMap: EnvironmentNameTypeDefinitionMap = new Map([
         [
           'Wind Speed',
@@ -281,7 +282,8 @@ describe('environment-column-utils', () => {
               {
                 environment_qualitative_id: '22-123-456',
                 environment_qualitative_option_id: '33-123-456',
-                name: 'Low',
+                // Name is made lowercase at this point in the code
+                name: 'low',
                 description: 'Low'
               }
             ]
@@ -330,7 +332,8 @@ describe('environment-column-utils', () => {
               {
                 environment_qualitative_id: '22-123-456',
                 environment_qualitative_option_id: '33-123-456',
-                name: 'Low',
+                // Name is made lowercase at this point in the code
+                name: 'low',
                 description: 'Low'
               }
             ]

api/src/utils/observation-xlsx-utils/environment-column-utils.ts

@@ -60,7 +60,13 @@ export function getEnvironmentColumnsTypeDefinitionMap(
     const qualitativeEnvironment = environmentTypeDefinitions.qualitative_environments.find(
       (item) => item.name.toLowerCase() === columnName.toLowerCase()
     );
+
     if (qualitativeEnvironment) {
+      // Lowercase the options for comparison
+      qualitativeEnvironment.options = qualitativeEnvironment.options.map((option) => ({
+        ...option,
+        name: option.name.toLowerCase()
+      }));
       columnNameDefinitionMap.set(columnName, qualitativeEnvironment);
       continue;
     }
@@ -104,7 +110,7 @@ export function validateEnvironments(
 
     if (isEnvironmentQualitativeTypeDefinition(environmentDefinition)) {
       return isQualitativeValueValid(
-        String(environmentToValidate.value),
+        String(environmentToValidate.value).toLowerCase(),
         environmentDefinition.options.map((option) => option.name)
       );
     }

app/src/components/attachments/list/AttachmentsList.tsx

@@ -107,6 +107,7 @@ const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>
       columns={attachmentsListColumnDefs}
       rows={attachments}
       pageSizeOptions={pageSizeOptions}
+      disableRowSelectionOnClick
       initialState={{
         pagination: {
           paginationModel: {

app/src/components/buttons/HelpButtonStack.tsx

@@ -0,0 +1,19 @@
+import Stack, { StackProps } from '@mui/material/Stack';
+import HelpButtonTooltip from 'components/buttons/HelpButtonTooltip';
+import { PropsWithChildren } from 'react';
+
+interface IHelpButtonStackProps extends StackProps {
+  helpText: string;
+}
+
+const HelpButtonStack = (props: PropsWithChildren<IHelpButtonStackProps>) => {
+  const { helpText, children, ...stackProps } = props;
+  return (
+    <Stack flexDirection="row" alignItems="center" gap={0.75} flexGrow={1} mt={-1} {...stackProps}>
+      {children}
+      <HelpButtonTooltip content={helpText} />
+    </Stack>
+  );
+};
+
+export default HelpButtonStack;

app/src/components/buttons/HelpButtonTooltip.tsx

@@ -4,11 +4,10 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Zoom from '@mui/material/Zoom';
-import { ReactNode } from 'react';
+import { useState } from 'react';
 
 interface HelpButtonTooltipProps {
   content: string;
-  children?: ReactNode;
   iconSx?: object;
 }
 
@@ -19,31 +18,23 @@ interface HelpButtonTooltipProps {
  * @param {HelpButtonTooltipProps}
  * @return {*}
  */
-//TODO: Update positioning of the tooltip to be more dynamic (Add Animal form)
-const HelpButtonTooltip = ({ content, children, iconSx }: HelpButtonTooltipProps) => {
+const HelpButtonTooltip = ({ content, iconSx }: HelpButtonTooltipProps) => {
+  const [renderTooltip, setRenderTooltip] = useState(false);
+
   return (
     <Box
       sx={{
         position: 'relative',
-        '& input': {
-          pr: 7,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        },
-        '& .MuiSelect-select': {
-          pr: '80px !important',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        },
-        '& .MuiSelect-icon': {
-          right: '52px'
-        }
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }}>
-      {children}
+      {/* Tooltip should always be there, but only show when hovering */}
       <Tooltip
         arrow
         title={content}
-        placement={'right-start'}
+        placement="right-start"
+        open={renderTooltip}
         TransitionComponent={Zoom}
         PopperProps={{
           sx: {
@@ -58,11 +49,11 @@ const HelpButtonTooltip = ({ content, children, iconSx }: HelpButtonTooltipProps
             }
           }
         }}>
+        {/* IconButton is always displayed */}
         <IconButton
+          onMouseEnter={() => setRenderTooltip(true)}
+          onMouseLeave={() => setRenderTooltip(false)}
           sx={{
-            position: 'absolute',
-            top: '8px',
-            right: '8px',
             color: '#38598A',
             ...iconSx
           }}>

app/src/components/data-grid/StyledDataGrid.tsx

@@ -43,12 +43,31 @@ export const StyledDataGrid = <R extends GridValidRowModel = any>(props: StyledD
             borderBottom: 'none'
           }
         },
-        '& .MuiDataGrid-columnHeader:first-of-type, .MuiDataGrid-cell:first-of-type': {
-          pl: 2
+        // Define custom header padding for the first column vs every other column
+        '& .MuiDataGrid-columnHeader:first-of-type:not(.MuiDataGrid-columnHeaderCheckbox)': {
+          pl: 3 // Add extra padding to the first header, unless it is a checkbox header
         },
-        '& .MuiDataGrid-columnHeader:last-of-type, .MuiDataGrid-cell:last-of-type': {
-          pr: 2
+        '& .MuiDataGrid-columnHeader:first-of-type.MuiDataGrid-columnHeaderCheckbox': {
+          pl: 2 // Add extra padding to the first header when it is a checkbox header
         },
+        '& .MuiDataGrid-columnHeader:not(:first-of-type)': {
+          pl: 1 // Add extra padding to every other header
+        },
+        // Define custom cell padding for the first column vs every other column
+        '& .MuiDataGrid-cell:first-of-type:not(.MuiDataGrid-cellCheckbox)': {
+          pl: 3 // Add extra padding to the first cell, unless it is a checkbox cell
+        },
+        '& .MuiDataGrid-cell:first-of-type.MuiDataGrid-cellCheckbox': {
+          pl: 2 // Add extra padding to the first cell when it is a checkbox cell
+        },
+        '& .MuiDataGrid-cell:not(:first-of-type)': {
+          pl: 1 // Add extra padding to every other cell
+        },
+        // Ensure the draggable container is at least 50px wide
+        '& .MuiDataGrid-columnHeaderDraggableContainer': {
+          minWidth: '50px'
+        },
+        // Custom styling for cell content at different densities
         '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': {
           py: '8px',
           wordWrap: 'anywhere'
@@ -61,9 +80,6 @@ export const StyledDataGrid = <R extends GridValidRowModel = any>(props: StyledD
           py: '22px',
           wordWrap: 'anywhere'
         },
-        '& .MuiDataGrid-columnHeaderDraggableContainer': {
-          minWidth: '50px'
-        },
         ...props.sx
       }}
     />

app/src/components/fields/AutocompleteField.tsx

@@ -4,6 +4,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import grey from '@mui/material/colors/grey';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import HelpButtonTooltip from 'components/buttons/HelpButtonTooltip';
 import { useFormikContext } from 'formik';
 import get from 'lodash-es/get';
 import { SyntheticEvent } from 'react';
@@ -27,6 +28,7 @@ export interface IAutocompleteField<T extends string | number> {
   showValue?: boolean;
   disableClearable?: boolean;
   optionFilter?: 'value' | 'label'; // used to filter existing/ set data for the AutocompleteField, defaults to value in getExistingValue function
+  helpText?: string;
   getOptionDisabled?: (option: IAutocompleteFieldOption<T>) => boolean;
   onChange?: (event: SyntheticEvent<Element, Event>, option: IAutocompleteFieldOption<T> | null) => void;
   renderOption?: (params: React.HTMLAttributes<HTMLLIElement>, option: IAutocompleteFieldOption<T>) => React.ReactNode;
@@ -64,6 +66,7 @@ const AutocompleteField = <T extends string | number>(props: IAutocompleteField<
       blurOnSelect
       handleHomeEndKeys
       id={props.id}
+      fullWidth
       data-testid={props.id}
       value={getExistingValue(get(values, props.name))}
       options={props.options}
@@ -137,6 +140,7 @@ const AutocompleteField = <T extends string | number>(props: IAutocompleteField<
               endAdornment: (
                 <>
                   {props.loading ? <CircularProgress color="inherit" size={20} /> : null}
+                  {props.helpText && <HelpButtonTooltip content={props.helpText} />}
                   {params.InputProps.endAdornment}
                 </>
               )