Feature 2285 member selector tenure

web-ui/src/components/member_selector/member_selector_dialog/MemberSelectorDialog.css

@@ -1,3 +1,7 @@
+.member-selector-dialog .custom-tenure-picker {
+  width: 8rem;
+}
+
 .member-selector-dialog .toolbar-title-container {
   display: flex;
   flex-direction: row;
@@ -30,15 +34,15 @@
 }
 
 .member-selector-dialog .name-search-field {
-  width: 350px;
-  margin-right: 3rem;
+  width: 300px;
 }
 
 .member-selector-dialog .filter-input-container {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 1rem;
   flex-wrap: wrap;
+  width: 100%;
 }
 
 .member-selector-dialog .direct-reports-only-checkbox {

web-ui/src/components/member_selector/member_selector_dialog/MemberSelectorDialog.jsx

@@ -1,14 +1,20 @@
+import { differenceInMonths } from 'date-fns';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   AppBar,
+  Autocomplete,
   Avatar,
   Button,
   Checkbox,
   Dialog,
   DialogContent,
+  Divider,
+  FormControl,
+  FormControlLabel,
   FormGroup,
   IconButton,
+  InputAdornment,
   InputLabel,
   List,
   ListItem,
@@ -17,16 +23,15 @@ import {
   ListItemText,
   MenuItem,
   Select,
+  Slide,
   TextField,
   Toolbar,
   Typography
 } from '@mui/material';
-import Slide from '@mui/material/Slide';
 import CloseIcon from '@mui/icons-material/Close';
-import InputAdornment from '@mui/material/InputAdornment';
 import SearchIcon from '@mui/icons-material/Search';
-import Autocomplete from '@mui/material/Autocomplete';
-import FormControl from '@mui/material/FormControl';
+import { DatePicker } from '@mui/x-date-pickers';
+
 import { getAvatarURL } from '../../../api/api';
 import { AppContext } from '../../../context/AppContext';
 import {
@@ -47,8 +52,6 @@ import { getMembersByGuild } from '../../../api/guild';
 import { getSkillMembers } from '../../../api/memberskill';
 
 import './MemberSelectorDialog.css';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Divider from '@mui/material/Divider';
 
 const DialogTransition = React.forwardRef((props, ref) => (
   <Slide direction="up" ref={ref} {...props} />
@@ -64,9 +67,29 @@ export const FilterType = Object.freeze({
   MANAGER: 'Manager'
 });
 
+export const Tenures = Object.freeze({
+  All: 'All',
+  Months6: '6 Months',
+  Years1: '1 Year',
+  Years5: '5 Years',
+  Years10: '10 Years',
+  Years20: '20 Years',
+  Custom: 'Custom'
+});
+
+const tenureToMonths = {
+  [Tenures.Months6]: 6,
+  [Tenures.Years1]: 12,
+  [Tenures.Years5]: 60,
+  [Tenures.Years10]: 120,
+  [Tenures.Years20]: 240,
+  [Tenures.Custom]: 0
+};
+
 const propTypes = {
   initialFilters: PropTypes.arrayOf(
     PropTypes.shape({
+      tenure: PropTypes.oneOf(Object.values(Tenures)),
       type: PropTypes.oneOf(Object.values(FilterType)),
       value: PropTypes.oneOfType([
         PropTypes.string,
@@ -108,8 +131,9 @@ const MemberSelectorDialog = ({
   const [filter, setFilter] = useState(null);
   const [filteredMembers, setFilteredMembers] = useState([]);
   const [directReportsOnly, setDirectReportsOnly] = useState(false);
-
   const [selectableMembers, setSelectableMembers] = useState([]);
+  const [tenure, setTenure] = useState(initialFilter?.tenure || Tenures.All);
+  const [customTenure, setCustomTenure] = useState(new Date());
 
   const handleSubmit = useCallback(() => {
     const membersToAdd = members.filter(member => checked.has(member.id));
@@ -230,6 +254,22 @@ const MemberSelectorDialog = ({
         member => !selectedMembers.includes(member)
       );
 
+      // Exclude members that don't have the selected tenure.
+      if (tenure === Tenures.Custom) {
+        filteredMemberList = members.filter(member => {
+          const start = new Date(member.startDate);
+          return start <= customTenure;
+        });
+      } else if (tenure !== Tenures.All) {
+        const now = new Date();
+        const requiredMonths = tenureToMonths[tenure];
+        filteredMemberList = members.filter(member => {
+          const start = new Date(member.startDate);
+          const diffMonths = differenceInMonths(now, start);
+          return diffMonths >= requiredMonths;
+        });
+      }
+
       // If a filter is selected, use it to filter the list of selectable members
       if (filter) {
         switch (filterType) {
@@ -330,15 +370,17 @@ const MemberSelectorDialog = ({
       });
     }
   }, [
-    state,
     csrf,
-    members,
-    filterType,
+    customTenure,
+    directReportsOnly,
     filter,
+    filterType,
+    members,
+    open,
     selectedMembers,
     showError,
-    directReportsOnly,
-    open
+    state,
+    tenure
   ]);
 
   useEffect(() => {
@@ -438,13 +480,32 @@ const MemberSelectorDialog = ({
                 )
               }}
             />
+            <FormControl className="filter-type-select">
+              <InputLabel id="filter-type-label">Filter Type</InputLabel>
+              <Select
+                labelId="filter-type-label"
+                label="Filter Type"
+                value={filterType}
+                onChange={event => {
+                  setFilter(null);
+                  setFilterType(event.target.value);
+                }}
+                disabled={!!initialFilter}
+              >
+                {Object.values(FilterType).map(name => (
+                  <MenuItem key={name} value={name}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
             <Autocomplete
               className="filter-input"
               renderInput={params => (
                 <TextField
                   {...params}
                   variant="outlined"
-                  label="Filter Members"
+                  label="Filter Value"
                   placeholder={`Search for ${filterType.toLowerCase()}`}
                 />
               )}
@@ -458,53 +519,71 @@ const MemberSelectorDialog = ({
               value={filter}
               onChange={(_, value) => setFilter(value)}
             />
+          </div>
+          <Checkbox
+            className="toggle-selectable-members-checkbox"
+            onChange={event => handleToggleAll(event.target.checked)}
+            checked={
+              selectableMembers.length > 0 &&
+              visibleChecked().length === selectableMembers.length
+            }
+            indeterminate={
+              visibleChecked().length > 0 &&
+              visibleChecked().length !== selectableMembers.length
+            }
+            disabled={selectableMembers.length === 0}
+          />
+        </FormGroup>
+        <FormGroup className="dialog-form-group">
+          <div className="filter-input-container">
+            {filterType === FilterType.MANAGER && (
+              <FormControlLabel
+                className="direct-reports-only-checkbox"
+                control={
+                  <Checkbox
+                    checked={directReportsOnly}
+                    onChange={event =>
+                      setDirectReportsOnly(event.target.checked)
+                    }
+                  />
+                }
+                label="Direct reports only"
+              />
+            )}
             <FormControl className="filter-type-select">
-              <InputLabel id="member-filter-label">Filter by</InputLabel>
+              <InputLabel id="member-filter-label">Required Tenure</InputLabel>
               <Select
                 labelId="member-filter-label"
-                label="Filter by"
-                value={filterType}
+                label="Required Tenure"
+                value={tenure}
                 onChange={event => {
-                  setFilter(null);
-                  setFilterType(event.target.value);
+                  const tenure = event.target.value;
+                  setTenure(tenure);
                 }}
                 disabled={!!initialFilter}
               >
-                {Object.values(FilterType).map(name => (
+                {Object.values(Tenures).map(name => (
                   <MenuItem key={name} value={name}>
                     {name}
                   </MenuItem>
                 ))}
               </Select>
             </FormControl>
-            {filterType === FilterType.MANAGER && (
-              <FormControlLabel
-                className="direct-reports-only-checkbox"
-                control={
-                  <Checkbox
-                    checked={directReportsOnly}
-                    onChange={event =>
-                      setDirectReportsOnly(event.target.checked)
-                    }
-                  />
-                }
-                label="Direct reports only"
+            {tenure === Tenures.Custom && (
+              <DatePicker
+                className="custom-tenure-picker"
+                slotProps={{ textField: { className: 'halfWidth' } }}
+                label="Custom Tenure Start"
+                format="MM/dd/yyyy"
+                value={customTenure}
+                openTo="year"
+                onChange={setCustomTenure}
+                KeyboardButtonProps={{
+                  'aria-label': 'Change Date'
+                }}
               />
             )}
           </div>
-          <Checkbox
-            className="toggle-selectable-members-checkbox"
-            onChange={event => handleToggleAll(event.target.checked)}
-            checked={
-              selectableMembers.length > 0 &&
-              visibleChecked().length === selectableMembers.length
-            }
-            indeterminate={
-              visibleChecked().length > 0 &&
-              visibleChecked().length !== selectableMembers.length
-            }
-            disabled={selectableMembers.length === 0}
-          />
         </FormGroup>
         <Divider />
         <List dense role="list" sx={{ height: '85%', overflowY: 'scroll' }}>

web-ui/src/components/member_selector/member_selector_dialog/MemberSelectorDialog.spec.jsx

@@ -122,10 +122,10 @@ describe('MemberSelectorDialog', () => {
     expect(memberList).toHaveLength(initialState.memberProfiles.length);
 
     const filterField = await screen.findByRole('combobox', {
-      name: /filter members/i
+      name: /filter value/i
     });
     let filterTypeField = await screen.findByRole('combobox', {
-      name: /filter by/i
+      name: /filter type/i
     });
     expect(filterField.innerHTML).toBe('');
     expect(filterTypeField.innerHTML).toBe('Team');
@@ -155,10 +155,10 @@ describe('MemberSelectorDialog', () => {
     expect(memberList).toHaveLength(initialState.memberProfiles.length);
 
     const filterField = await screen.findByRole('combobox', {
-      name: /filter members/i
+      name: /filter value/i
     });
     let filterTypeField = await screen.findByRole('combobox', {
-      name: /filter by/i
+      name: /filter type/i
     });
     expect(filterField.innerHTML).toBe('');
     expect(filterTypeField.innerHTML).toBe('Team');