Merge pull request #603 from Ajay-aot/bugfix/FWF-4675-search-in-dropdown

Feature/FWF-4675-search implemented in buttonDropdown

Author: arun-s-aot

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

@@ -5,6 +5,7 @@ import Dropdown from "react-bootstrap/Dropdown";
 import { ChevronIcon } from "../SvgIcons/index";
 import { useTranslation } from "react-i18next";
 import { StyleServices } from "@formsflow/service";
+import { CustomSearch } from "./Search";
 
 interface DropdownItem {
   content?: React.ReactNode;
@@ -24,11 +25,12 @@ interface ButtonDropdownProps {
   className?: string;
   dropdownType: "DROPDOWN_ONLY" | "DROPDOWN_WITH_EXTRA_ACTION";
   dropdownItems?: DropdownItem[];
+  onSearch?: (searchTerm: string) => void;
   extraActionIcon?: React.ReactNode;
   extraActionOnClick?:() => void; 
   dataTestId?: string;
   ariaLabel?: string; 
-}
+ }
 
 export const ButtonDropdown: React.FC<ButtonDropdownProps> = ({
   dropdownType,
@@ -37,6 +39,7 @@ export const ButtonDropdown: React.FC<ButtonDropdownProps> = ({
   defaultLabel, 
   label,
   dropdownItems = [],
+  onSearch,
   extraActionIcon = false,
   extraActionOnClick,
   className = "",
@@ -51,8 +54,24 @@ export const ButtonDropdown: React.FC<ButtonDropdownProps> = ({
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
   const { t } = useTranslation();
   const primaryBtnBgColor = StyleServices.getCSSVariable('--primary-btn-bg-color');
-  const secondaryBtnBgColor = StyleServices.getCSSVariable('--secondary-btn-bg-color');  
-  // Check if we should use the default label
+  const secondaryBtnBgColor = StyleServices.getCSSVariable('--secondary-btn-bg-color'); 
+  const [search, setSearch] = useState("");
+
+  const handleClearSearch = () => {
+    setSearch("");
+    onSearch?.("");
+  }
+
+  const handleSearch = () => {
+    onSearch?.(search);
+  };
+
+  useEffect(()=>{
+      if (onSearch) {
+    onSearch(search);
+  }
+  },[search]);
+    // Check if we should use the default label
   const isUsingDefaultLabel = !label || label === "";
   // Display label if provided, otherwise use defaultLabel
   const displayLabel = isUsingDefaultLabel ? defaultLabel : label;
@@ -142,6 +161,15 @@ const { extraActionClass, backgroundColor } = getExtraActionStyles(variant);
         </Dropdown.Toggle>
 
         <Dropdown.Menu style={menuStyle}>
+        {onSearch && (<CustomSearch
+          handleClearSearch={handleClearSearch}
+          search={search}
+          setSearch={setSearch}
+          handleSearch={handleSearch}
+          placeholder={t("Search")}
+          title={t("Search")}
+          dataTestId="search-filter"
+        />)}
           {dropdownItems.map((item) => (
             <Dropdown.Item
               key={item.type}

forms-flow-nav/src/sidenav/MenuComponent.jsx

@@ -3,7 +3,6 @@ import Accordion from "react-bootstrap/Accordion";
 import "./Sidebar.scss";
 import { Link, useLocation, useHistory } from "react-router-dom";
 import { ChevronIcon ,ShowPremiumIcons } from "@formsflow/components";
-import { MULTITENANCY_ENABLED} from "../constants/constants";
 import { useTranslation } from "react-i18next";
 import { StorageService } from "@formsflow/service";
 import PropTypes from "prop-types";
@@ -73,6 +72,12 @@ const MenuComponent = ({
       : getComputedStyle(document.documentElement).getPropertyValue("--ff-primary");
   };
 
+  const chevronColor =
+  getComputedStyle(document.documentElement).getPropertyValue(
+    "--navbar-main-menu-active-font-color"
+  )?.trim() || getComputedStyle(document.documentElement).getPropertyValue(
+    "--ff-gray-800"
+  ).trim();
 
   return (
     <Accordion.Item eventKey={eventKey}>
@@ -89,9 +94,7 @@ const MenuComponent = ({
             width="10"
             height="5"
             className="custom-chevron"
-            color={getComputedStyle(document.documentElement).getPropertyValue(
-              "--ff-gray-800"
-            )}
+            color={chevronColor}
           />
         )}
         <span>{t(mainMenu)}</span>

forms-flow-review/src/components/TaskList/TaskFilterDropdown.tsx

@@ -11,7 +11,6 @@ import { updateDefaultFilter } from "../../api/services/filterServices";
 import TaskFilterModal from "../TaskFilterModal/TaskFilterModal";
 import { ReorderTaskFilterModal } from "../ReorderTaskFilterModal";
 import {  UserDetail } from "../../types/taskFilter";
-import { StorageService } from "@formsflow/service";
 
 const TaskListDropdownItems = memo(() => {
   const { t } = useTranslation();
@@ -34,6 +33,7 @@ const TaskListDropdownItems = memo(() => {
 
   const [showTaskFilterModal, setShowTaskFilterModal] = useState(false);
   const [showReorderFilterModal,setShowReorderFilterModal] = useState(false); 
+  const [filterSearchTerm, setFilterSearchTerm] = useState("");
 
   const handleEditTaskFilter = () => {
     // Prevent editing if the active filter is the initial "All Tasks".
@@ -64,7 +64,9 @@ const changeFilterSelection = (filter) => {
   dispatch(setSelectedFilter(upcomingFilter));
 };
 
-
+const onSearch = (searchTerm: string) => {
+  setFilterSearchTerm(searchTerm);
+};
 
   const filterDropdownItems = useMemo(() => {
     const filterDropdownItemsArray = [];
@@ -104,6 +106,15 @@ const changeFilterSelection = (filter) => {
       ariaLabel: t("Re-order And Hide Filters"),
     };
     const mappedItems = filtersAndCount
+    .filter((filter) => {
+    const details = filterList.find((item) => item.id === filter.id);
+    const filterName = t(filter.name).toLowerCase();
+          return (
+        details &&
+        !details.hide &&
+        filterName.includes(filterSearchTerm.toLowerCase())
+      ); // only include visible filters
+  })
     .map((filter) => { 
       const filterDetails = filterList.find((item) => item.id === filter.id);
       let icon = null;
@@ -150,7 +161,7 @@ const changeFilterSelection = (filter) => {
     }
 
     return filterDropdownItemsArray;
-  }, [filtersAndCount, defaultFilter,filterList,userDetails ]);
+  }, [filtersAndCount, defaultFilter,filterList,userDetails, filterSearchTerm ]);
 
 // filter title based on unsaved filter, empty list or selected filter
   let title;
@@ -178,6 +189,7 @@ const changeFilterSelection = (filter) => {
         variant="primary"
         size="md"
         dropdownType="DROPDOWN_WITH_EXTRA_ACTION"
+        onSearch={onSearch}
         dropdownItems={filterDropdownItems}
         extraActionIcon={<PencilIcon color="white" />}
         extraActionOnClick={handleEditTaskFilter}

forms-flow-theme/scss/_forms.scss

@@ -132,7 +132,9 @@ select option:hover {
     padding: var(--spacer-075) var(--spacer-100)  !important;
     height: 2.063rem;
 
-
+    &:hover{
+      background-color: $primary-light !important;
+    }
 
     &.has-value {
       border: 2px solid $primary;