Merge pull request #981 from NERC-CEH/ED-111-emails-dropdown

Hide e-mails in autocomplete of Project Settings ED-111
NERC-CEH · Jun 24, 2024 · b8d2726 · b8d2726
2 parents f3fbfba + 9276cb0
commit b8d2726
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/code/workspaces/web-app/src/components/common/input/UserSelect.js b/code/workspaces/web-app/src/components/common/input/UserSelect.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -14,19 +14,26 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const UserSelect = ({ selectedUsers, setSelectedUsers, label, placeholder, multiselect = false, userSelectedToolTip = 'User Selected', ...otherProps }) => {
+const UserSelect = ({ selectedUsers, setSelectedUsers, label, placeholder, multiselect = false, userSelectedToolTip = 'User Selected', isDropdownHidden = false, ...otherProps }) => {
   const { value: users, fetching: loading } = useUsersSortedByName();
+  const [currentInput, setCurrentInput] = useState('');
 
   return (
     <Autocomplete
       {...otherProps}
+      filterOptions={options => options.filter(opt => (isDropdownHidden ? opt.name === currentInput : opt.name.includes(currentInput)))}
       multiple={multiselect}
       freeSolo={true}
       options={users}
       getOptionLabel={getOptionLabel}
       isOptionEqualToValue={val => (multiselect ? selectedUsers.includes(val) : selectedUsers === val)}
       value={selectedUsers}
-      onInputChange={(event, newValue) => setSelectedUsers({ name: newValue, userId: newValue })}
+      onInputChange={(event, newValue) => {
+        setCurrentInput(newValue);
+        if (isDropdownHidden) {
+          setSelectedUsers({ name: newValue, userId: newValue });
+        }
+      }}
       onChange={(event, newValue) => setSelectedUsers(newValue)}
       loading={loading}
       autoHighlight
@@ -69,14 +76,14 @@ export const Option = ({ option, selected, userSelectedToolTip }) => {
     <>
       {getOptionLabel(option)}
       {selected
-      && <Tooltip title={userSelectedToolTip} placement="right">
-        <CheckCircleRoundedIcon
-          className={classes.userSelectedIcon}
-          titleAccess={userSelectedToolTip}
-          color="primary"
-          fontSize="small"
-        />
-      </Tooltip>
+        && <Tooltip title={userSelectedToolTip} placement="right">
+          <CheckCircleRoundedIcon
+            className={classes.userSelectedIcon}
+            titleAccess={userSelectedToolTip}
+            color="primary"
+            fontSize="small"
+          />
+        </Tooltip>
       }
     </>
   );

diff --git a/code/workspaces/web-app/src/components/settings/AddUserPermissions.js b/code/workspaces/web-app/src/components/settings/AddUserPermissions.js
@@ -84,6 +84,7 @@ export function PureAddUserPermission({
         setSelectedUsers={setSelectedUser}
         label="Add User"
         placeholder="Type user's email..."
+        isDropdownHidden={true}
       />
       <PermissionsSelector
         className={classes.permissionsSelector}

diff --git a/.../workspaces/web-app/src/components/settings/__snapshots__/AddUserPermissions.spec.js.snap b/.../workspaces/web-app/src/components/settings/__snapshots__/AddUserPermissions.spec.js.snap
@@ -87,7 +87,7 @@ exports[`AddUserPermissions renders pure component with correct props 1`] = `
   >
     <div>
       UserSelect mock 
-      {"className":"AddUserPermission-usersAutofill-5","selectedUsers":null,"label":"Add User","placeholder":"Type user's email..."}
+      {"className":"AddUserPermission-usersAutofill-5","selectedUsers":null,"label":"Add User","placeholder":"Type user's email...","isDropdownHidden":true}
     </div>
     <div
       class="MuiFormControl-root MuiFormControl-marginDense MuiTextField-root AddUserPermission-permissionsSelector-4 css-4mzek5-MuiFormControl-root-MuiTextField-root"
@@ -235,7 +235,7 @@ exports[`PureAddUserPermission renders to match snapshot 1`] = `
   >
     <div>
       UserSelect mock 
-      {"className":"usersAutofill","selectedUsers":{"name":"Test User One","userId":"test-user-one"},"label":"Add User","placeholder":"Type user's email..."}
+      {"className":"usersAutofill","selectedUsers":{"name":"Test User One","userId":"test-user-one"},"label":"Add User","placeholder":"Type user's email...","isDropdownHidden":true}
     </div>
     <div
       class="MuiFormControl-root MuiFormControl-marginDense MuiTextField-root permissionsSelector css-4mzek5-MuiFormControl-root-MuiTextField-root"