Add back missing educational tooltip on Has filter

src/components/Search/FilterComponents/HasSelector.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
+import type {SearchFilterSelectionListProps} from '@components/Search/types';
+import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getHasOptions} from '@libs/SearchUIUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {filterTypeSelector} from '@src/selectors/Search';
+import type {HasFilterValues} from '@src/types/form/SearchAdvancedFiltersForm';
+import MultiSelect from './MultiSelect';
+
+type HasSelectorProps = SearchFilterSelectionListProps & {
+    value: HasFilterValues | undefined;
+    onChange: (item: HasFilterValues) => void;
+};
+
+function HasSelector({value = [], selectionListStyle, footer, onChange}: HasSelectorProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const [type = CONST.SEARCH.DATA_TYPES.EXPENSE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterTypeSelector});
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.HAS_FILTER_NEGATION);
+    const shouldRenderTooltip = shouldShowProductTrainingTooltip && type === CONST.SEARCH.DATA_TYPES.EXPENSE;
+
+    const items = getHasOptions(translate, type);
+    const multiSelectValues = items.filter((item) => value.includes(item.value));
+
+    return (
+        <MultiSelect
+            items={items}
+            value={multiSelectValues}
+            itemWrapper={({children, item}) => (
+                <EducationalTooltip
+                    shouldRender={item.keyForList === CONST.SEARCH.HAS_VALUES.RECEIPT && shouldRenderTooltip}
+                    renderTooltipContent={renderProductTrainingTooltip}
+                    anchorAlignment={{
+                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                    }}
+                    maxWidth={variables.hasFilterNegationTooltipMaxWidth}
+                    wrapperStyle={styles.productTrainingTooltipWrapper}
+                    shiftHorizontal={variables.hasFilterNegationTooltipShiftHorizontal}
+                    shiftVertical={variables.hasFilterNegationTooltipShiftVertical}
+                >
+                    <View>{children}</View>
+                </EducationalTooltip>
+            )}
+            selectionListStyle={selectionListStyle}
+            footer={footer}
+            onChange={(selectedItems) => {
+                if (shouldRenderTooltip) {
+                    hideProductTrainingTooltip();
+                }
+                onChange(selectedItems.map((item) => item.value));
+            }}
+        />
+    );
+}
+
+export default HasSelector;

src/components/Search/FilterComponents/MultiSelect.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import type {ReactNode} from 'react';
+import type {ComponentType, ReactNode} from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
 import type {SearchFilterSelectionListProps} from '@components/Search/types';
@@ -44,6 +44,9 @@
 
     /** Whether the text input should be auto-focused or not. Defaults to true. */
     autoFocus?: boolean;
+
+    /** Optional wrapper component to wrap the MultiSelectListItem */
+    itemWrapper?: ComponentType<{children: ReactNode; item: ListItem}>;
 };
 
 function MultiSelect<T extends string>({
@@ -57,6 +60,7 @@
     autoFocus = true,
     footer,
     onChange,
+    itemWrapper,
 }: MultiSelectProps<T>) {
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -106,6 +110,10 @@
 
     const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'MultiSelectDataLoading'};
 
+    const ListItemComponent = itemWrapper
+        ? (props: any) => React.createElement(itemWrapper, {children: React.createElement(MultiSelectListItem, props), item: props.item})
+        : MultiSelectListItem;
+
     return (
         <ListFilterView
             itemCount={listData.length}
@@ -123,7 +131,7 @@
                 <SelectionList
                     shouldSingleExecuteRowSelect
                     data={listData}
-                    ListItem={MultiSelectListItem}
+                    ListItem={ListItemComponent}
                     onSelectRow={updateSelectedItems}
                     textInputOptions={textInputOptions}
                     style={{contentContainerStyle: [styles.pb0], ...selectionListStyle}}

src/components/Search/FilterComponents/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterSelectionListProps} from '@components/Search/types';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
@@ -9,12 +8,14 @@ import {FILTER_VIEW_MAP, getMultiSelectFilterOptions, getSingleSelectFilterOptio
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
+import {filterTypeSelector} from '@src/selectors/Search';
+import type {HasFilterValues, SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
 import CardSelector from './CardSelector';
 import CategorySelector from './CategorySelector';
 import CurrencySelector from './CurrencySelector';
 import ExportedToSelector from './ExportedToSelector';
 import FeedSelector from './FeedSelector';
+import HasSelector from './HasSelector';
 import InSelector from './InSelector';
 import MultiSelect from './MultiSelect';
 import SingleSelect from './SingleSelect';
@@ -55,7 +56,6 @@ type SingleSelectFilterComponentsProps = SearchFilterSelectionListProps & {
 };
 
 type MultiSelectFilterKeys =
-    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS
     | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.IS
     | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE
     | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS
@@ -103,12 +103,7 @@ function SingleSelectFilterComponents({filterKey, value, selectionListTextInputS
 
 function MultiSelectFilterComponents({filterKey, value = [], selectionListStyle, footer, onChange}: MultiSelectFilterComponentsProps) {
     const {translate} = useLocalize();
-    const typeSelector = (searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) => {
-        return searchAdvancedFiltersForm?.type;
-    };
-    const [type = CONST.SEARCH.DATA_TYPES.EXPENSE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {
-        selector: typeSelector,
-    });
+    const [type = CONST.SEARCH.DATA_TYPES.EXPENSE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterTypeSelector});
     const items = getMultiSelectFilterOptions(filterKey, type, translate);
     const normalizedValue = Array.isArray(value) ? value : value.split(',');
     const multiSelectValues = items.filter((item) => normalizedValue.includes(item.value));
@@ -225,7 +220,17 @@ function FilterComponents({
                 />
             );
         }
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS:
+        case CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS: {
+            return (
+                <HasSelector
+                    value={value as HasFilterValues | undefined}
+                    selectionListTextInputStyle={selectionListTextInputStyle}
+                    selectionListStyle={selectionListStyle}
+                    footer={footer}
+                    onChange={onChange}
+                />
+            );
+        }
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.IS:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS:

src/libs/SearchUIUtils.ts

@@ -5266,10 +5266,6 @@ function getSingleSelectFilterOptions(filterKey: SearchAdvancedFiltersKey, trans
 }
 
 function getMultiSelectFilterOptions(filterKey: SearchAdvancedFiltersKey, type: SearchDataTypes, translate: LocalizedTranslate) {
-    if (filterKey === FILTER_KEYS.HAS) {
-        return getHasOptions(translate, type);
-    }
-
     if (filterKey === FILTER_KEYS.IS) {
         return Object.values(CONST.SEARCH.IS_VALUES).map((value) => ({text: translate(`common.${value}`), value}));
     }

src/selectors/Search.ts

@@ -3,5 +3,6 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
 
 const filterGroupCurrencySelector = (searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) => searchAdvancedFiltersForm?.groupCurrency;
 const filterPolicyIDSelector = (searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) => searchAdvancedFiltersForm?.policyID;
+const filterTypeSelector = (searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) => searchAdvancedFiltersForm?.type;
 
-export {filterGroupCurrencySelector, filterPolicyIDSelector};
+export {filterGroupCurrencySelector, filterPolicyIDSelector, filterTypeSelector};

src/styles/variables.ts

@@ -345,7 +345,7 @@ export default {
     accountSwitcherTooltipShiftHorizontal: 4,
     expenseReportsTypeTooltipShiftHorizontal: 10,
     hasFilterNegationTooltipShiftHorizontal: -16,
-    hasFilterNegationTooltipShiftVertical: 40,
+    hasFilterNegationTooltipShiftVertical: -12,
     hasFilterNegationTooltipMaxWidth: 260,
 
     inlineImagePreviewMinSize: 64,