bugfix/fwf-4843-4663: fixed ui and permission issues in reviewer journey

[fahad-aot]

User description

Issue Tracking

JIRA: https://aottech.atlassian.net/browse/FWF-4843
https://aottech.atlassian.net/browse/FWF-4786
Issue Type: BUG

Changes

1. Permission matrix updated in reviewer journey.
2. fixed ui issues in reviewer journey

---

PR Type

Bug fix, Enhancement

---

Description

• Enhance AssignUser permission-driven logic

  • filter dropdown users by permission
  • show/hide close icon based on assignment

• Update InputDropdown visibility props

  • support showCloseIcon and hideDropDownList

• Refactor filter modals permission checks

  • use createFilters role and simplify notes

• Fix theme styling z-index and padding

---

Changes walkthrough 📝

	Relevant files
Enhancement	3 files AssignUser.tsx Permission-based user assignment enhancements                        +47/-30  InputDropdown.tsx Add dropdown visibility and close icon props                          +64/-61  AttributeFilterDropdown.tsx Clean up attribute filter dropdown options                              +1/-13
Bug fix	3 files AttributeFIlterModalBody.tsx Update filter modal permission logic                                          +5/-17    Notes.tsx Simplify ownership notes permission checks                              +4/-18    SaveFilterTab.tsx Adjust filter tab role and control disables                            +5/-6
Formatting	3 files _card.scss Add padding to task-details view                                                  +3/-1      _forms.scss Adjust select has-value padding                                                    +1/-0      _table.scss Increase header z-index and float fixes                                    +5/-3

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 20062bb)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Icon Fallback renderIcon returns false when showCloseIcon is false, which may result in no icon displayed instead of falling back to ChevronIcon. return showCloseIcon && <CloseIcon onClick={handleClearInput} color={disabled ? disabledColor : primaryColor} data-testid="clear-input" aria-label="Clear input" width={9} height={9}/> User Filtering Logic Complex condition in useMemo may filter out users incorrectly when both manageMyTasks and assignToOthers flags are set; verify intended behavior. const filteredUsers = (!assignedToCurrentUser && manageMyTasks &&!assignToOthers) ? users.filter((user) => user.id === userData.sub) : users; CSS Layout Break Adding float:left to .empty-table-message may conflict with sticky cell layout and cause unexpected wrapping. right: 0; background-color: var(--ff-body-bg); z-index: 101; border-left: 1px solid var(--ff-gray-medium-dark); text-align: left; vertical-align: middle; .empty-table-message{ border-left: none !important; float: left;

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 20062bb

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add missing useMemo dependencies The memoized options depend on manageMyTasks and assignToOthers but they aren’t listed, causing stale dropdown data. Include these flags in the dependency array so the list updates when permissions change. forms-flow-components/src/components/CustomComponents/AssignUser.tsx [109-129] const dropdownOptions = useMemo(() => { if (!Array.isArray(users)) return []; - const filteredUsers = (!assignedToCurrentUser && manageMyTasks &&!assignToOthers) + const filteredUsers = (!assignedToCurrentUser && manageMyTasks && !assignToOthers) ? users.filter((user) => user.id === userData.sub) : users; return filteredUsers.map((user) => { /* ... */ }); -}, [users, optionSelect, assignedToCurrentUser, userData]); +}, [users, optionSelect, assignedToCurrentUser, userData, manageMyTasks, assignToOthers]); Suggestion importance[1-10]: 8 __ Why: Including manageMyTasks and assignToOthers in the useMemo dependency array ensures the dropdownOptions recompute when these permission flags change, preventing stale data.	Medium

---

Previous suggestions

Suggestions up to commit 6c3760f

Category	Suggestion	Impact
Possible issue	Include missing memo dependencies The useMemo hook for dropdownOptions references manageMyTasks and assignToOthers, but they’re not in its dependency array. This can lead to stale dropdown options when those props change. Add both to the deps to ensure the list updates correctly. forms-flow-components/src/components/CustomComponents/AssignUser.tsx [109-129] const dropdownOptions = useMemo(() => { if (!Array.isArray(users)) return []; const filteredUsers = (!assignedToCurrentUser && manageMyTasks && !assignToOthers) ? users.filter((user) => user.id === userData.sub) : users; return filteredUsers.map((user) => { /* ... */ }); -}, [users, optionSelect, assignedToCurrentUser, userData]); +}, [users, optionSelect, assignedToCurrentUser, userData, manageMyTasks, assignToOthers]); Suggestion importance[1-10]: 7 __ Why: Adding manageMyTasks and assignToOthers to the useMemo deps fixes a potential stale dropdownOptions bug when those props change. It’s a correct and important dependency update.	Medium
General	Return null instead of false Returning false when showCloseIcon is false can introduce a boolean into the icon prop. Instead explicitly return null to avoid rendering issues. forms-flow-components/src/components/CustomComponents/InputDropdown.tsx [164-179] const renderIcon = () => { - // Only show CloseIcon when variant is present AND inputValue exists if (variant && inputValue) { - return showCloseIcon && <CloseIcon - onClick={handleClearInput} - /* ... */ />; - } else { - return <ChevronIcon /* ... */ />; + return showCloseIcon + ? <CloseIcon onClick={handleClearInput} /* ... */ /> + : null; } + return <ChevronIcon /* ... */ />; }; Suggestion importance[1-10]: 6 __ Why: Explicitly returning null instead of false avoids passing a boolean into the icon prop and prevents possible React rendering issues.	Low

Suggestions up to commit 366fccc

Category	Suggestion	Impact
General	Include missing useMemo dependencies The useMemo for dropdownOptions references manageMyTasks and assignToOthers but does not list them in its dependency array, which can lead to stale options. Add both values to ensure the options update when permissions change. forms-flow-components/src/components/CustomComponents/AssignUser.tsx [109-129] const dropdownOptions = useMemo(() => { if (!Array.isArray(users)) return []; const filteredUsers = (!assignedToCurrentUser && manageMyTasks && !assignToOthers) ? users.filter((user) => user.id === userData.sub) : users; return filteredUsers.map((user) => { /* ... */ }); -}, [users, optionSelect, assignedToCurrentUser, userData]); +}, [users, optionSelect, assignedToCurrentUser, userData, manageMyTasks, assignToOthers]); Suggestion importance[1-10]: 8 __ Why: Adding manageMyTasks and assignToOthers to the useMemo dependency array prevents stale dropdownOptions when those permission flags change.	Medium

Suggestions up to commit 1fa1a52

Category	Suggestion	Impact
Possible issue	Include missing memo dependencies The memoized dropdown options depend on manageMyTasks and assignToOthers but these are not listed in the dependency array. Add them to ensure the list updates when permissions change. forms-flow-components/src/components/CustomComponents/AssignUser.tsx [109-129] const dropdownOptions = useMemo(() => { if (!Array.isArray(users)) return []; - const filteredUsers = (!assignedToCurrentUser && manageMyTasks &&!assignToOthers) + const filteredUsers = (!assignedToCurrentUser && manageMyTasks && !assignToOthers) ? users.filter((user) => user.id === userData.sub) : users; return filteredUsers.map((user) => { /* ... */ }); -}, [users, optionSelect, assignedToCurrentUser, userData]); +}, [users, optionSelect, assignedToCurrentUser, userData, manageMyTasks, assignToOthers]); Suggestion importance[1-10]: 8 __ Why: Adding manageMyTasks and assignToOthers to the useMemo deps ensures the dropdown recalculates when permissions change, preventing stale user lists.	Medium
General	Always fallback to chevron icon When showCloseIcon is false, renderIcon returns a boolean instead of falling back to the chevron. Adjust the condition so that if the close icon is hidden, the chevron is always rendered. forms-flow-components/src/components/CustomComponents/InputDropdown.tsx [164-173] const renderIcon = () => { - if (variant && inputValue) { - return showCloseIcon && <CloseIcon + if (variant && inputValue && showCloseIcon) { + return <CloseIcon onClick={handleClearInput} color={disabled ? disabledColor : primaryColor} data-testid="clear-input" aria-label="Clear input" width={9} height={9}/>; - } else { - return <ChevronIcon + } + return <ChevronIcon color={disabled ? disabledColor : primaryColor} aria-label="dropdown input" />; - } }; Suggestion importance[1-10]: 8 __ Why: The current showCloseIcon && … can return false instead of a node; tightening the condition ensures you always render a valid icon, avoiding invalid React values.	Medium
	Fix false className values The conditional class expressions can produce literal false strings when the condition is not met. Use a ternary operator to yield an empty string instead of false. forms-flow-components/src/components/CustomComponents/InputDropdown.tsx [215] -className={`${inputClassName} ${(isDropdownOpen && !hideDropDownList) && 'border-input collapsed'} ${disabled && 'disabled-inpudropdown'}`} +className={`${inputClassName} ${isDropdownOpen && !hideDropDownList ? 'border-input collapsed' : ''} ${disabled ? 'disabled-inpudropdown' : ''}`} Suggestion importance[1-10]: 5 __ Why: Switching from && to a ternary prevents the literal false string appearing in className, improving CSS class calculations.	Low

Suggestions up to commit 2db9f28

Category	Suggestion	Impact
Possible issue	Add missing memo dependencies The memoized dropdown options depend on manageMyTasks and assignToOthers as well as userData.sub. Including those in the dependency array prevents stale filtering when task or assign permissions change. Update the dependencies accordingly. forms-flow-components/src/components/CustomComponents/AssignUser.tsx [129] -}, [users, optionSelect, assignedToCurrentUser, userData]); +}, [users, optionSelect, assignedToCurrentUser, userData, manageMyTasks, assignToOthers]); Suggestion importance[1-10]: 6 __ Why: Including manageMyTasks and assignToOthers in the dependency array ensures the memoized list updates when permissions change, preventing stale dropdown options.	Low

[github-actions]

Persistent review updated to latest commit 1fa1a52

[auslin-aot]

please resolve the conflict

[github-actions]

Persistent review updated to latest commit 366fccc

[github-actions]

Persistent review updated to latest commit 6c3760f

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Persistent review updated to latest commit 20062bb