Add search (Autocomplete) in miscellaneous dropdowns (#1367)

### Feature or Bugfix - Feature ### Detail Autocomplete for environments and teams in the following frontend views as requested in #1012. In this case the views required custom dropdowns. ❗ I used `noOptionsText` whenever it was necessary instead of checking groupOptions lenght >0 - [x] DatasetEditForm.js -> ❗ I kept the stewards field as `freesolo` - what that means is that users CAN specify options that are not on the list. I would like the reviewer to confirm this is what we want. At the end stewardship is a delegation of permissions, it makes sense that delegation happens to other teams. Also changed DatasetCreateForm - [X] RequestDashboardAccessModal.js - already implemented, minor changes - [X] EnvironmentTeamInviteForm.js - already implemented, minor changes. -> Kept `freesolo` because invited teams might not be the user teams. Same reason why there is no check for groupOptions == 0, if there are no options there is still the free text option. - [X] EnvironmentRoleAddForm.js - [X] NetworkCreateModal.js ### Relates - #1012 ### Security Please answer the questions below briefly where applicable, or write `N/A`. Based on [OWASP 10](https://owasp.org/Top10/en/). - Does this PR introduce or modify any input fields or queries - this includes fetching data from storage outside the application (e.g. a database, an S3 bucket)? - Is the input sanitized? - What precautions are you taking before deserializing the data you consume? - Is injection prevented by parametrizing queries? - Have you ensured no `eval` or similar functions are used? - Does this PR introduce any functionality or component that requires authorization? - How have you ensured it respects the existing AuthN/AuthZ mechanisms? - Are you logging failed auth attempts? - Are you using or adding any cryptographic features? - Do you use a standard proven implementations? - Are the used keys controlled by the customer? Where are they stored? - Are you introducing any new policies/roles/users? - Have you used the least-privilege principle? How? By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
data-dot-all · Jun 28, 2024 · e913d48 · e913d48
1 parent ee71d7b
commit e913d48
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 92 deletions.
diff --git a/frontend/src/modules/Catalog/components/RequestDashboardAccessModal.js b/frontend/src/modules/Catalog/components/RequestDashboardAccessModal.js
@@ -23,9 +23,6 @@ export const RequestDashboardAccessModal = (props) => {
   const dispatch = useDispatch();
   const client = useClient();
   const groups = useGroups();
-  const idpGroupOptions = groups
-    ? groups.map((g) => ({ value: g, label: g }))
-    : [];
 
   async function submit(values, setStatus, setSubmitting, setErrors) {
     try {
@@ -117,20 +114,24 @@ export const RequestDashboardAccessModal = (props) => {
                   <CardContent>
                     <Autocomplete
                       id="teams"
-                      freeSolo
-                      options={idpGroupOptions.map((option) => option.value)}
+                      disablePortal
+                      options={groups}
                       onChange={(event, value) => {
-                        setFieldValue('groupUri', value);
+                        if (value) {
+                          setFieldValue('groupUri', value);
+                        } else {
+                          setFieldValue('groupUri', '');
+                        }
                       }}
-                      renderInput={(renderParams) => (
+                      inputValue={values.groupUri}
+                      renderInput={(params) => (
                         <TextField
-                          {...renderParams}
+                          {...params}
+                          fullWidth
                           error={Boolean(touched.groupUri && errors.groupUri)}
                           helperText={touched.groupUri && errors.groupUri}
                           label="Team"
-                          margin="normal"
                           onChange={handleChange}
-                          value={values.groupUri}
                           variant="outlined"
                         />
                       )}

diff --git a/frontend/src/modules/Environments/components/EnvironmentRoleAddForm.js b/frontend/src/modules/Environments/components/EnvironmentRoleAddForm.js
@@ -1,12 +1,12 @@
 import { GroupAddOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import {
+  Autocomplete,
   Box,
   CardContent,
   CircularProgress,
   Dialog,
   FormControlLabel,
-  MenuItem,
   Switch,
   TextField,
   Typography
@@ -154,23 +154,31 @@ export const EnvironmentRoleAddForm = (props) => {
                   />
                 </CardContent>
                 <CardContent>
-                  <TextField
-                    fullWidth
-                    error={Boolean(touched.groupUri && errors.groupUri)}
-                    helperText={touched.groupUri && errors.groupUri}
-                    label="Owners"
-                    name="groupUri"
-                    onChange={handleChange}
-                    select
-                    value={values.groupUri}
-                    variant="outlined"
-                  >
-                    {groupOptions.map((group) => (
-                      <MenuItem key={group.value} value={group.value}>
-                        {group.label}
-                      </MenuItem>
-                    ))}
-                  </TextField>
+                  <Autocomplete
+                    id="SamlAdminGroupName"
+                    disablePortal
+                    options={groupOptions.map((option) => option)}
+                    onChange={(event, value) => {
+                      if (value && value.value) {
+                        setFieldValue('groupUri', value.value);
+                      } else {
+                        setFieldValue('groupUri', '');
+                      }
+                    }}
+                    noOptionsText="No teams found for this environment"
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        fullWidth
+                        error={Boolean(touched.groupUri && errors.groupUri)}
+                        helperText={touched.groupUri && errors.groupUri}
+                        label="Owners"
+                        name="groupUri"
+                        variant="outlined"
+                        value={values.groupUri}
+                      />
+                    )}
+                  />
                 </CardContent>
                 <CardContent>
                   <FormControlLabel

diff --git a/frontend/src/modules/Environments/components/EnvironmentTeamInviteForm.js b/frontend/src/modules/Environments/components/EnvironmentTeamInviteForm.js
@@ -210,8 +210,13 @@ export const EnvironmentTeamInviteForm = (props) => {
                       freeSolo
                       options={groupOptions.map((option) => option.value)}
                       onChange={(event, value) => {
-                        setFieldValue('groupUri', value);
+                        if (value) {
+                          setFieldValue('groupUri', value);
+                        } else {
+                          setFieldValue('groupUri', '');
+                        }
                       }}
+                      inputValue={values.groupUri}
                       renderInput={(params) => (
                         <TextField
                           {...params}
@@ -220,7 +225,6 @@ export const EnvironmentTeamInviteForm = (props) => {
                           error={Boolean(touched.groupUri && errors.groupUri)}
                           helperText={touched.groupUri && errors.groupUri}
                           onChange={handleChange}
-                          value={values.groupUri}
                           variant="outlined"
                         />
                       )}

diff --git a/frontend/src/modules/Environments/components/NetworkCreateModal.js b/frontend/src/modules/Environments/components/NetworkCreateModal.js
@@ -1,12 +1,12 @@
 import { LoadingButton } from '@mui/lab';
 import {
+  Autocomplete,
   Box,
   CardContent,
   CardHeader,
   Dialog,
   FormHelperText,
   Grid,
-  MenuItem,
   TextField,
   Typography
 } from '@mui/material';
@@ -60,7 +60,7 @@ export const NetworkCreateModal = (props) => {
           description: values.description,
           label: values.label,
           vpcId: values.vpcId,
-          SamlGroupName: values.SamlGroupName,
+          SamlGroupName: values.SamlAdminGroupName,
           privateSubnetIds: values.privateSubnetIds,
           publicSubnetIds: values.publicSubnetIds
         })
@@ -124,15 +124,15 @@ export const NetworkCreateModal = (props) => {
             initialValues={{
               label: '',
               vpcId: '',
-              SamlGroupName: '',
+              SamlAdminGroupName: '',
               privateSubnetIds: [],
               publicSubnetIds: [],
               tags: []
             }}
             validationSchema={Yup.object().shape({
               label: Yup.string().max(255).required('*VPC name is required'),
               vpcId: Yup.string().max(255).required('*VPC ID is required'),
-              SamlGroupName: Yup.string()
+              SamlAdminGroupName: Yup.string()
                 .max(255)
                 .required('*Team is required'),
               privateSubnetIds: Yup.array().nullable(),
@@ -229,27 +229,37 @@ export const NetworkCreateModal = (props) => {
                     <Box>
                       <CardHeader title="Organize" />
                       <CardContent>
-                        <TextField
-                          fullWidth
-                          error={Boolean(
-                            touched.SamlGroupName && errors.SamlGroupName
+                        <Autocomplete
+                          id="SamlAdminGroupName"
+                          disablePortal
+                          options={groupOptions.map((option) => option)}
+                          noOptionsText="No teams found for this environment"
+                          onChange={(event, value) => {
+                            if (value && value.value) {
+                              setFieldValue('SamlAdminGroupName', value.value);
+                            } else {
+                              setFieldValue('SamlAdminGroupName', '');
+                            }
+                          }}
+                          renderInput={(params) => (
+                            <TextField
+                              {...params}
+                              fullWidth
+                              error={Boolean(
+                                touched.SamlAdminGroupName &&
+                                  errors.SamlAdminGroupName
+                              )}
+                              helperText={
+                                touched.SamlAdminGroupName &&
+                                errors.SamlAdminGroupName
+                              }
+                              label="Team"
+                              name="SamlAdminGroupName"
+                              variant="outlined"
+                              value={values.SamlAdminGroupName}
+                            />
                           )}
-                          helperText={
-                            touched.SamlGroupName && errors.SamlGroupName
-                          }
-                          label="Team"
-                          name="SamlGroupName"
-                          onChange={handleChange}
-                          select
-                          value={values.SamlGroupName}
-                          variant="outlined"
-                        >
-                          {groupOptions.map((group) => (
-                            <MenuItem key={group.value} value={group.value}>
-                              {group.label}
-                            </MenuItem>
-                          ))}
-                        </TextField>
+                        />
                       </CardContent>
                       <CardContent>
                         <ChipInput

diff --git a/frontend/src/modules/S3_Datasets/views/DatasetCreateForm.js b/frontend/src/modules/S3_Datasets/views/DatasetCreateForm.js
@@ -559,7 +559,7 @@ const DatasetCreateForm = (props) => {
                         <CardContent>
                           <Autocomplete
                             id="stewards"
-                            disablePortal
+                            freesolo
                             options={groupOptions.map((option) => option)}
                             onChange={(event, value) => {
                               if (value && value.value) {
@@ -570,37 +570,17 @@ const DatasetCreateForm = (props) => {
                             }}
                             inputValue={values.stewards}
                             renderInput={(params) => (
-                              <Box>
-                                {groupOptions.length > 0 ? (
-                                  <TextField
-                                    {...params}
-                                    fullWidth
-                                    error={Boolean(
-                                      touched.stewards && errors.stewards
-                                    )}
-                                    helperText={
-                                      touched.stewards && errors.stewards
-                                    }
-                                    label="Stewards"
-                                    onChange={handleChange}
-                                    variant="outlined"
-                                  />
-                                ) : (
-                                  <TextField
-                                    error={Boolean(
-                                      touched.stewards && errors.stewards
-                                    )}
-                                    helperText={
-                                      touched.stewards && errors.stewards
-                                    }
-                                    fullWidth
-                                    disabled
-                                    label="Stewards"
-                                    value="No teams found for this environment"
-                                    variant="outlined"
-                                  />
+                              <TextField
+                                {...params}
+                                fullWidth
+                                error={Boolean(
+                                  touched.stewards && errors.stewards
                                 )}
-                              </Box>
+                                helperText={touched.stewards && errors.stewards}
+                                label="Stewards"
+                                onChange={handleChange}
+                                variant="outlined"
+                              />
                             )}
                           />
                         </CardContent>

diff --git a/frontend/src/modules/S3_Datasets/views/DatasetEditForm.js b/frontend/src/modules/S3_Datasets/views/DatasetEditForm.js
@@ -581,18 +581,25 @@ const DatasetEditForm = (props) => {
                           <Autocomplete
                             id="stewards"
                             freeSolo
-                            defaultValue={dataset.stewards}
-                            options={groupOptions.map((option) => option.value)}
+                            options={groupOptions.map((option) => option)}
                             onChange={(event, value) => {
-                              setFieldValue('stewards', value);
+                              if (value && value.value) {
+                                setFieldValue('stewards', value.value);
+                              } else {
+                                setFieldValue('stewards', '');
+                              }
                             }}
-                            renderInput={(renderParams) => (
+                            inputValue={values.stewards}
+                            renderInput={(params) => (
                               <TextField
-                                {...renderParams}
+                                {...params}
+                                fullWidth
+                                error={Boolean(
+                                  touched.stewards && errors.stewards
+                                )}
+                                helperText={touched.stewards && errors.stewards}
                                 label="Stewards"
-                                margin="normal"
                                 onChange={handleChange}
-                                value={values.stewards}
                                 variant="outlined"
                               />
                             )}