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

forms-flow-components/src/components/CustomComponents/AssignUser.tsx

@@ -70,14 +70,19 @@ export const AssignUser: React.FC<AssignUserProps> = ({
 
 
   const handleMeClick = () => {
-    const name = username ?? userData?.preferred_username;
-    setSelected("Me");
-    setSelectedName(name);
-    meOnClick?.();
-    if(!username){
-      setSelectedName(`${userData.family_name}, ${userData.given_name}`);
-    }
-  };
+  const defaultName = userData?.preferred_username;
+  const fullName = userData?.family_name && userData?.given_name
+    ? `${userData.family_name}, ${userData.given_name}`
+    : defaultName;
+
+  const name = username ?? fullName;
+
+  setSelected("Me");
+  setSelectedName(name);
+
+  meOnClick?.();
+};
+
 
   const handleOthersClick = () => {
     setSelected("Others");
@@ -91,28 +96,38 @@ export const AssignUser: React.FC<AssignUserProps> = ({
     handleCloseClick?.();
   };
 
-const dropdownOptions = useMemo(() => {
-  if (Array.isArray(users)) {
-    return users.map((user) => {
-      const fullName = getDisplayName(user);
-      const label = user.email ? `${fullName} (${user.email})` : fullName;
-      return {
-        label,
-        value: user.id,
-        onClick: () => {
-          setSelectedName(fullName);
-          optionSelect?.(user.username);
-          setOpenDropdown(false);
-        },
-      };
-    });
-  }
-  return [];
-}, [users, optionSelect]);
-
-
-  const showSelector = selected === null;
+const showSelector = selected === null;
   const selectedOption = selected === "Me" ? selectedName : undefined;
+    //show close icons based on the user permissions
+  const assignedToCurrentUser =
+  selectedOption === userData.preferred_username ||
+  selectedOption === `${userData.family_name}, ${userData.given_name}`;
+
+  const showCloseIcon = (assignedToCurrentUser && manageMyTasks) ||(!assignedToCurrentUser && assignToOthers); 
+
+
+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) => {
+    const fullName = getDisplayName(user);
+    const label = user.email ? `${fullName} (${user.email})` : fullName;
+    return {
+      label,
+      value: user.id,
+      onClick: () => {
+        setSelectedName(fullName);
+        optionSelect?.(user.username);
+        setOpenDropdown(false);
+      },
+    };
+  });
+}, [users, optionSelect, assignedToCurrentUser, userData]);
+
 
   return (
     <>
@@ -142,8 +157,10 @@ const dropdownOptions = useMemo(() => {
         </div>
       )}
       {/* Show InputDropdown when either Me or Others is selected */}
-      {(selected === "Me" || selected === "Others") && (
+      {(selected === "Me" || selected === "Others")  && (
         <InputDropdown
+          showCloseIcon={showCloseIcon}
+          hideDropDownList={(assignedToCurrentUser && !assignToOthers)}
           Options={dropdownOptions}
           variant={variant}
           selectedOption={selectedOption}

forms-flow-components/src/components/CustomComponents/InputDropdown.tsx

@@ -32,6 +32,8 @@ interface InputDropdownProps {
   variant?: 'assign-user-sm' | 'assign-user-md'; 
   handleCloseClick?: () => void;
   openByDefault?: boolean;
+  showCloseIcon?: boolean;
+  hideDropDownList?: boolean;
 }
 
 export const InputDropdown: React.FC<InputDropdownProps> = ({
@@ -55,6 +57,8 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   variant,
   handleCloseClick,
   openByDefault = false,
+  showCloseIcon = true,
+  hideDropDownList = false,
 }) => {
   const { t } = useTranslation();
   const primaryColor = StyleServices.getCSSVariable('--ff-primary');
@@ -160,13 +164,13 @@ useEffect(() => {
   const renderIcon = () => {
     // Only show CloseIcon when variant is present AND inputValue exists
     if (variant && inputValue) {
-    return <CloseIcon 
+    return showCloseIcon && <CloseIcon 
             onClick={handleClearInput} 
             color={disabled ? disabledColor : primaryColor} 
             data-testid="clear-input" 
             aria-label="Clear input"
             width={9}
-            height={9}/>;
+            height={9}/>
     } else {
     // Default to ChevronIcon in all other cases
     return <ChevronIcon 
@@ -180,72 +184,71 @@ useEffect(() => {
   const isItemSelected = (item: DropdownItem) => {
     return item.label === inputValue || item.value === selectedOption;
   };
-
   return (
       <div ref={dropdownRef}  className={`input-dropdown ${variantClass || 'w-100'}`}>
-          {textBoxInput ? (
-              <InputGroup>
-                  <FormInput
-                      autoFocusInput
-                      value={inputValue}
-                      onChange={handleInputChange}
-                      ariaLabel={ariaLabelforInput}
-                     dataTestId={dataTestIdforInput}
-                      isInvalid={isInvalid}
+      {textBoxInput ? (
+        <InputGroup>
+          <FormInput
+            autoFocusInput
+            value={inputValue}
+            onChange={handleInputChange}
+            ariaLabel={ariaLabelforInput}
+            dataTestId={dataTestIdforInput}
+            isInvalid={isInvalid}
                       icon={<CloseIcon onClick={handleClose} color={primaryColor} data-testid="close-input" aria-label="Close input "/>} 
-                      className="input-with-close"
-                      label={t(dropdownLabel)}
-                      feedback={t(feedback)}
-                      variant={variant}
-                  />
-              </InputGroup>
-          ) : (
-              <InputGroup>
-                  <FormInput
-                      placeholder={t(placeholder)}
-                      value={inputValue}
-                      onChange={handleInputDropdownChange}
-                      onClick={toggleDropdown}
-                      ariaLabel={ariaLabelforDropdown}
-                      dataTestId={dataTestIdforDropdown}
-                      icon={renderIcon()}
-                      className={`${inputClassName} ${isDropdownOpen && 'border-input collapsed'} ${disabled && 'disabled-inpudropdown'}`}
-                      onIconClick={toggleDropdown}
-                      label={t(dropdownLabel)}
-                      required={required}
-                      onBlur={onBlurDropDown}
-                      isInvalid={!(isDropdownOpen || selectedOption) && isInvalid}
-                      feedback={t(feedback)}
-                      variant={variant}
-                  />
-              </InputGroup>
+            className="input-with-close"
+            label={t(dropdownLabel)}
+            feedback={t(feedback)}
+            variant={variant}
+          />
+        </InputGroup>
+      ) : (
+        <InputGroup>
+          <FormInput
+            placeholder={t(placeholder)}
+            value={inputValue}
+            onChange={handleInputDropdownChange}
+            onClick={toggleDropdown}
+            ariaLabel={ariaLabelforDropdown}
+            dataTestId={dataTestIdforDropdown}
+            icon={renderIcon()}
+            className={`${inputClassName} ${(isDropdownOpen && !hideDropDownList) && 'border-input collapsed'} ${disabled && 'disabled-inpudropdown'}`}
+            onIconClick={toggleDropdown}
+            label={t(dropdownLabel)}
+            required={required}
+            onBlur={onBlurDropDown}
+            isInvalid={!(isDropdownOpen || selectedOption) && isInvalid}
+            feedback={t(feedback)}
+            variant={variant}
+          />
+        </InputGroup>
+      )}
+
+      {!textBoxInput && isDropdownOpen && !disabled && !hideDropDownList && (
+        <ListGroup className={`${variant ? "assignee-dropdown-border" : ""}`}>
+          {isAllowInput && (
+            <ListGroup.Item
+              onClick={onFirstItemClick}
+              className="list-first-item-btn"
+              data-testid="list-first-item"
+            >
+              {t(firstItemLabel)}
+            </ListGroup.Item>
           )}
-
-          {!textBoxInput && isDropdownOpen && !disabled && (
-              <ListGroup className={`${variant ? "assignee-dropdown-border" : ""}`}>
-                  {isAllowInput && (
-                      <ListGroup.Item
-                          onClick={onFirstItemClick}
-                          className="list-first-item-btn"
-                          data-testid="list-first-item"
-                      >
-                          {t(firstItemLabel)}
-                      </ListGroup.Item>
-                  )}
                   {(filteredItems.length > 0 ? filteredItems : Options).map((item, index) => (
-                      <ListGroup.Item
-                          key={index}
-                          onClick={() => handleSelect(item)}
-                          data-testid={`list-${index}-item`}
-                          aria-label={`list-${item.label}-item`}
+              <ListGroup.Item
+                key={index}
+                onClick={() => handleSelect(item)}
+                data-testid={`list-${index}-item`}
+                aria-label={`list-${item.label}-item`}
                           className={`${isItemSelected(item) ? 'selected-dropdown-item' : ''}`}
-                      >
-                          {t(item.label)}
-                      </ListGroup.Item>
+              >
+                {t(item.label)}
+              </ListGroup.Item>
                   ))}
-              </ListGroup>
-          )}
-      </div>
+        </ListGroup>
+      )}
+    </div>
   );
 };
 

forms-flow-review/src/components/AttributeFilterModal/AttributeFIlterModalBody.tsx

@@ -33,7 +33,7 @@ const AttributeFilterModalBody = ({ onClose, toggleUpdateModal, updateSuccess, t
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const filterNameLength = 50;
-  const { manageAllFilters } = userRoles();
+  const { manageAllFilters,createFilters } = userRoles();
 
   const baseColor = StyleServices.getCSSVariable("--ff-primary");
   const whiteColor = StyleServices.getCSSVariable("--ff-white");
@@ -111,19 +111,9 @@ const AttributeFilterModalBody = ({ onClose, toggleUpdateModal, updateSuccess, t
 
   /* ---------------------------- access management --------------------------- */
 
-  const isCreator =
-    attributeFilter?.createdBy === userDetails?.preferred_username;
   const createdByMe =
     attributeFilter?.createdBy === userDetails?.preferred_username;
-  const publicAccess =
-    attributeFilter?.roles?.length === 0 &&
-    attributeFilter?.users?.length === 0;
-  const roleAccess = attributeFilter?.roles?.some((role) =>
-    userDetails.groups.includes(role)
-  );
-  const canAccess = roleAccess || publicAccess || createdByMe;
-  const viewOnly = !manageAllFilters && canAccess;
-  const editRole = manageAllFilters && canAccess;
+  const editRole = manageAllFilters || (createdByMe && createFilters);
 
   /* ---------------------------- get users groups ---------------------------- */
   useEffect(() => {
@@ -394,7 +384,7 @@ const createFilterShareOption = (labelKey, value) => ({
     }
   const renderActionButtons = () => {
     if (attributeFilter?.id) { 
-      if (canAccess && manageAllFilters) {
+      if (editRole ) {
         return (
           <div className="d-flex">
             <CustomButton
@@ -430,7 +420,7 @@ const createFilterShareOption = (labelKey, value) => ({
       return null;
     }
 
-    if (manageAllFilters) {
+    if (createFilters ) {
       return (
         <div className="pt-4">
           <CustomButton
@@ -480,9 +470,7 @@ const createFilterShareOption = (labelKey, value) => ({
       </div>
       <RenderOwnerShipNotes
         attributeFilter={attributeFilter}
-        isCreator={isCreator}
-        viewOnly={viewOnly}
-        editRole={editRole}
+        isCreator={createdByMe}
       />
       {renderActionButtons()}
     </>

forms-flow-review/src/components/AttributeFilterModal/Notes.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { RootState } from "../../reducers";
 
-const RenderOwnerShipNotes = ({isCreator, viewOnly, editRole, attributeFilter}) => {
+const RenderOwnerShipNotes = ({isCreator, attributeFilter}) => {
   const { t } = useTranslation();
   const isUnsavedFilter = useSelector((state:RootState)=>state.task.isUnsavedFilter);
 
@@ -35,34 +35,20 @@ const RenderOwnerShipNotes = ({isCreator, viewOnly, editRole, attributeFilter})
     );
   }
 
-  if (viewOnly) {
+  if (!isCreator) {
     return (
-      <CustomInfo
+      <div className="pb-4">
+        <CustomInfo
         className="note"
         heading="Note"
         content={t("This filter is created and managed by {{createdBy}}", {
           createdBy: attributeFilter?.createdBy,
         })}
         dataTestId="attribute-filter-save-note"
       />
-    );
-  }
-
-  if (editRole) {
-    return (
-      <div className="pb-4">
-        <CustomInfo
-          className="note"
-          heading="Note"
-          content={t("This filter is created and managed by {{createdBy}}", {
-            createdBy: attributeFilter?.createdBy,
-          })}
-          dataTestId="attribute-filter-save-note"
-        />
       </div>
     );
   }
-
   return null;
 };