Add Environment Variables - Various improvements.

app/src/features/surveys/observations/observations-table/configure-columns/components/environment/search/EnvironmentsSearchAutocomplete.tsx

@@ -2,6 +2,7 @@
 import Icon from '@mdi/react';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import ListItem from '@mui/material/ListItem';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
@@ -69,6 +70,20 @@
     [getOptions]
   );
 
+  const loadAllOptions = async () => {
+    const response = await getOptions('');
+    const allOptions = [...response.qualitative_environments, ...response.quantitative_environments];
+
+    const sortedOptions = allOptions.sort((a, b) => a.name.localeCompare(b.name));
+    setOptions(sortedOptions);
+  };
+
+  // This function is a repeat of a function in another file for pluralising. It should be edited to an imported function. GridColumnDefinitionsUtils.tsx when PR goes through
+  const getFormattedUnit = (unit: string) => {
+    const unitSuffix = unit.endsWith('er') ? 's' : '';
+    return `${unit}${unitSuffix}`;
+  };
+
   return (
     <Autocomplete
       id="environments-autocomplete"
@@ -119,7 +134,6 @@
 
         if (reason === 'clear') {
           setInputValue('');
-          setOptions([]);
           return;
         }
 
@@ -128,6 +142,9 @@
           setOptions(() => newOptions);
         });
       }}
+      onFocus={() => {
+        loadAllOptions();
+      }}
       value={null} // The selected value is not displayed in the input field or tracked by this component
       onChange={(_, value) => {
         if (!value) {
@@ -157,8 +174,8 @@
                 : renderOption.environment_quantitative_id
             }`}
             data-testid="environments-autocomplete-option">
-            <Stack gap={0.75} mt={-0.25}>
-              <Box>
+            <Stack direction="row" alignItems="center" justifyContent="space-between" width="100%" gap={2}>
+              <Box flex={1}>
                 <Typography component="div" variant="body1" fontWeight={700}>
                   {renderOption.name}
                 </Typography>
@@ -176,6 +193,20 @@
                   {renderOption.description}
                 </Typography>
               </Box>
+              {'environment_quantitative_id' in renderOption && renderOption.unit && (
+                <Chip
+                  label={getFormattedUnit(renderOption.unit)}
+                  size="small"
+                  sx={{
+                    bgcolor: 'grey.200',
+                    color: 'text.secondary',
+                    height: '24px',
+                    borderRadius: '12px',
+                    fontWeight: 500
+                    // This font is not bold enough, but 600 value jumps to super bold and I gave up. Doesn't look right imo
+                  }}
+                />
+              )}
             </Stack>
           </ListItem>
         );