Merge pull request Expensify#75638 from TaduJR/feat-Add-an-exposed-filter-for-workspace-when-a-user-is-a-member-of-several-workspaces

feat: [CFI] Add an exposed filter for workspace when a user is a member of several workspaces

Author: Julesssss

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -105,9 +105,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro
 
     const popoverContent = useMemo(() => {
         return PopoverComponent({closeOverlay: toggleOverlay});
-        // PopoverComponent is stable so we don't need it here as a dep.
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [toggleOverlay]);
+    }, [PopoverComponent, toggleOverlay]);
 
     return (
         <View ref={anchorRef}>

src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

@@ -37,6 +37,7 @@ import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWorkspaceList from '@hooks/useWorkspaceList';
 import {close} from '@libs/actions/Modal';
 import {handleBulkPayItemSelected, updateAdvancedFilters} from '@libs/actions/Search';
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
@@ -116,6 +117,29 @@ function SearchFiltersBar({
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Filter'] as const);
 
     const taxRates = getAllTaxRates(allPolicies);
+
+    // Get workspace data for the filter
+    const {sections: workspaces} = useWorkspaceList({
+        policies: allPolicies,
+        currentUserLogin: email,
+        shouldShowPendingDeletePolicy: false,
+        selectedPolicyIDs: undefined,
+        searchTerm: '',
+        localeCompare,
+    });
+
+    const shouldDisplayWorkspaceFilter = useMemo(() => workspaces.some((section) => section.data.length > 1), [workspaces]);
+
+    const workspaceOptions = useMemo<Array<MultiSelectItem<string>>>(() => {
+        return workspaces
+            .flatMap((section) => section.data)
+            .filter((workspace): workspace is typeof workspace & {policyID: string} => !!workspace.policyID)
+            .map((workspace) => ({
+                text: workspace.text,
+                value: workspace.policyID,
+            }));
+    }, [workspaces]);
+
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]);
     const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);
     const hasMultipleOutputCurrency = useMemo(() => {
@@ -128,6 +152,16 @@ function SearchFiltersBar({
         return buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
     }, [allCards, currencyList, personalDetails, policyCategories, policyTagsLists, queryJSON, reports, taxRates]);
 
+    // Get selected workspace options from filterFormValues or queryJSON
+    const selectedWorkspaceOptions = useMemo(() => {
+        const policyIDs = filterFormValues.policyID ?? queryJSON.policyID;
+        if (!policyIDs) {
+            return [];
+        }
+        const normalizedIDs = Array.isArray(policyIDs) ? policyIDs : [policyIDs];
+        return workspaceOptions.filter((option) => normalizedIDs.includes(option.value));
+    }, [filterFormValues.policyID, queryJSON.policyID, workspaceOptions]);
+
     const hasErrors = Object.keys(searchResultsErrors ?? {}).length > 0 && !isOffline;
     const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || isMobileSelectionModeEnabled);
 
@@ -475,6 +509,15 @@ function SearchFiltersBar({
         [filterFormValues.from, updateFilterForm],
     );
 
+    const workspaceComponent = useMemo(() => {
+        const updateWorkspaceFilterForm = (items: Array<MultiSelectItem<string>>) => {
+            updateFilterForm({policyID: items.map((item) => item.value)});
+        };
+        return createMultiSelectComponent('workspace.common.workspace', workspaceOptions, selectedWorkspaceOptions, updateWorkspaceFilterForm);
+    }, [createMultiSelectComponent, workspaceOptions, selectedWorkspaceOptions, updateFilterForm]);
+
+    const workspaceValue = useMemo(() => selectedWorkspaceOptions.map((option) => option.text), [selectedWorkspaceOptions]);
+
     const {typeFiltersKeys} = useAdvancedSearchFilters();
 
     /**
@@ -596,6 +639,16 @@ function SearchFiltersBar({
                 value: fromValue,
                 filterKey: FILTER_KEYS.FROM,
             },
+            ...(shouldDisplayWorkspaceFilter
+                ? [
+                      {
+                          label: translate('workspace.common.workspace'),
+                          PopoverComponent: workspaceComponent,
+                          value: workspaceValue,
+                          filterKey: FILTER_KEYS.POLICY_ID,
+                      },
+                  ]
+                : []),
         ].filter((filterItem) => isFilterSupported(filterItem.filterKey, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE));
 
         return filterList;
@@ -636,6 +689,9 @@ function SearchFiltersBar({
         hasMultipleOutputCurrency,
         has,
         is,
+        shouldDisplayWorkspaceFilter,
+        workspaceComponent,
+        workspaceValue,
     ]);
 
     const hiddenSelectedFilters = useMemo(() => {

src/hooks/useAdvancedSearchFilters.ts

@@ -259,7 +259,7 @@ function useAdvancedSearchFilters() {
     const shouldDisplayTagFilter = shouldDisplayFilter(tagListsUnpacked.length, areTagsEnabled, !!selectedPolicyTagLists);
     const shouldDisplayCardFilter = shouldDisplayFilter(Object.keys(allCards).length, areCardsEnabled);
     const shouldDisplayTaxFilter = shouldDisplayFilter(Object.keys(taxRates).length, areTaxEnabled);
-    const shouldDisplayWorkspaceFilter = workspaces.some((section) => section.data.length !== 0);
+    const shouldDisplayWorkspaceFilter = workspaces.some((section) => section.data.length > 1);
     const shouldDisplayGroupByFilter = !!groupBy;
     const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter;
     const shouldDisplayReportFieldFilter = Object.values(policies).some((policy): policy is NonNullable<Policy> => {