Feature 2284 review period employees

web-ui/src/components/member_selector/MemberSelector.css

@@ -15,19 +15,19 @@
 }
 
 .member-selector-card .member-selector-card-title {
-  font-size: 1.5em;
+  font-size: 1rem;
 }
 
 .member-selector-card .member-selector-card-count {
-  font-size: 1.25em;
+  font-size: 1rem;
 }
 
 @media screen and (max-width: 600px) {
   .member-selector-card .member-selector-card-title {
-    font-size: 1.25em;
+    font-size: 0.75rem;
   }
 
   .member-selector-card .member-selector-card-count {
-    font-size: 1em;
+    font-size: 0.75rem;
   }
 }

web-ui/src/components/member_selector/MemberSelector.jsx

@@ -4,30 +4,20 @@ import {
   Avatar,
   Card,
   CardHeader,
-  Collapse,
   Divider,
   IconButton,
   List,
-  ListItem,
-  ListItemAvatar,
   ListItemIcon,
   ListItemText,
-  Menu,
-  MenuItem,
   Tooltip,
   Typography
 } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { Add, FileDownload } from '@mui/icons-material';
 import { getAvatarURL } from '../../api/api';
 
-import ExpandMore from '../expand-more/ExpandMore.jsx';
 import MemberSelectorDialog, {
   FilterType
 } from './member_selector_dialog/MemberSelectorDialog';
-import DownloadIcon from '@mui/icons-material/FileDownload';
 import { reportSelectedMembersCsv } from '../../api/member.js';
 import { AppContext } from '../../context/AppContext.jsx';
 import { selectCsrfToken } from '../../context/selectors.js';
@@ -58,8 +48,6 @@ const propTypes = {
   outlined: PropTypes.bool,
   /** If true, include a button to export the list of members to a CSV file. False by default. */
   exportable: PropTypes.bool,
-  /** Adjusts the height of the scrollable list of selected members (in pixels) */
-  listHeight: PropTypes.number,
   /** If true, members cannot be added to or removed from the current selection. False by default. */
   disabled: PropTypes.bool,
   /** A custom class name to additionally apply to the top-level card */
@@ -76,7 +64,6 @@ const MemberSelector = ({
   expand = true,
   outlined = false,
   exportable = false,
-  listHeight = 400,
   disabled = false,
   className,
   style
@@ -93,7 +80,7 @@ const MemberSelector = ({
     filter => filter.type === FilterType.ROLE
   );
   const roleFilter = filters.find(filter => filter.type === FilterType.ROLE);
-  const memberDescriptor = isFilteredByRole ? roleFilter.value : 'members';
+  const memberDescriptor = isFilteredByRole ? roleFilter.value : 'Members';
 
   const handleExpandClick = () => setExpanded(!expanded);
 
@@ -104,8 +91,8 @@ const MemberSelector = ({
     }
   }, [disabled]);
 
-  const addMembers = membersToAdd => {
-    onChange([...selected, ...membersToAdd]);
+  const replaceSelectedMembers = members => {
+    onChange(members);
     setDialogOpen(false);
   };
 
@@ -115,9 +102,7 @@ const MemberSelector = ({
   };
 
   const downloadMemberCsv = useCallback(() => {
-    if (!exportable) {
-      return;
-    }
+    if (!exportable) return;
 
     const memberIds = selected.map(member => member.id);
     reportSelectedMembersCsv(memberIds, csrf).then(res => {
@@ -152,14 +137,6 @@ const MemberSelector = ({
         style={style}
       >
         <CardHeader
-          avatar={
-            <ExpandMore
-              expand={expanded}
-              onClick={handleExpandClick}
-              aria-expanded={expanded}
-              aria-label="show more"
-            />
-          }
           title={
             <div className="member-selector-card-title-container">
               <Typography
@@ -180,111 +157,37 @@ const MemberSelector = ({
           }
           action={
             <>
-              <Tooltip title={`Add ${memberDescriptor}`} arrow>
+              <Tooltip title={`Change ${memberDescriptor}`} arrow>
                 <IconButton
                   style={{ margin: '4px 8px 0 0' }}
                   onClick={() => setDialogOpen(true)}
                   disabled={disabled}
                 >
-                  <AddIcon />
+                  <Add />
                 </IconButton>
               </Tooltip>
-              <IconButton
-                style={{ margin: '4px 8px 0 0' }}
-                onClick={event => setMenuAnchor(event.currentTarget)}
-              >
-                <MoreVertIcon />
-              </IconButton>
-              <Menu
-                anchorEl={menuAnchor}
-                open={!!menuAnchor}
-                onClose={() => setMenuAnchor(null)}
-              >
-                <MenuItem
-                  onClick={() => {
-                    setMenuAnchor(null);
-                    clearMembers();
-                  }}
-                  disabled={disabled || !selected.length}
-                >
-                  <ListItemIcon>
-                    <HighlightOffIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText>Remove all</ListItemText>
-                </MenuItem>
-                {exportable && (
-                  <MenuItem
-                    onClick={() => {
-                      setMenuAnchor(null);
-                      downloadMemberCsv();
-                    }}
-                    disabled={!selected.length}
+              {exportable && (
+                <Tooltip title="Download">
+                  <IconButton
+                    onClick={downloadMemberCsv}
+                    edge="end"
+                    aria-label="Download"
                   >
-                    <ListItemIcon>
-                      <DownloadIcon fontSize="small" />
-                    </ListItemIcon>
-                    <ListItemText>Download</ListItemText>
-                  </MenuItem>
-                )}
-              </Menu>
+                    <FileDownload />
+                  </IconButton>
+                </Tooltip>
+              )}
             </>
           }
         />
-        <Collapse in={expanded}>
-          <Divider />
-          <List
-            dense
-            role="list"
-            sx={{ maxHeight: listHeight, overflow: 'auto' }}
-          >
-            {selected.length ? (
-              selected.map(member => (
-                <ListItem
-                  key={member.id}
-                  role="listitem"
-                  secondaryAction={
-                    <Tooltip title="Deselect member" arrow>
-                      <IconButton
-                        onClick={() => removeMember(member)}
-                        disabled={disabled}
-                      >
-                        <RemoveIcon />
-                      </IconButton>
-                    </Tooltip>
-                  }
-                >
-                  <ListItemAvatar>
-                    <Avatar src={getAvatarURL(member.workEmail)} />
-                  </ListItemAvatar>
-                  <ListItemText
-                    primary={
-                      <Typography fontWeight="bold">{member.name}</Typography>
-                    }
-                    secondary={
-                      <Typography color="textSecondary" component="h6">
-                        {member.title}
-                      </Typography>
-                    }
-                  />
-                </ListItem>
-              ))
-            ) : (
-              <ListItem>
-                <ListItemText style={{ color: 'gray' }}>
-                  No {memberDescriptor} selected
-                </ListItemText>
-              </ListItem>
-            )}
-          </List>
-        </Collapse>
       </Card>
       <MemberSelectorDialog
         open={dialogOpen}
         initialFilters={filters}
         memberDescriptor={memberDescriptor}
         selectedMembers={selected}
         onClose={() => setDialogOpen(false)}
-        onSubmit={membersToAdd => addMembers(membersToAdd)}
+        onSubmit={replaceSelectedMembers}
       />
     </>
   );

web-ui/src/components/member_selector/MemberSelector.test.jsx

@@ -46,7 +46,6 @@ describe('MemberSelector', () => {
           title="Custom Title"
           outlined
           exportable
-          listHeight={300}
           className="test-class"
           style={{ margin: '10px' }}
         />