Make SearchFiltersWorkspacePage use new SelectionList

src/components/SelectionList/BaseSelectionList.tsx

@@ -78,6 +78,7 @@ function BaseSelectionList<TItem extends ListItem>({
     shouldPreventDefaultFocusOnSelectRow = false,
     shouldShowTextInput = !!textInputOptions?.label,
     shouldHighlightSelectedItem = true,
+    shouldUseDefaultRightHandSideCheckmark,
     shouldDisableHoverStyle = false,
     setShouldDisableHoverStyle = () => {},
 }: SelectionListProps<TItem>) {
@@ -330,6 +331,7 @@ function BaseSelectionList<TItem extends ListItem>({
                     isDisabled={isItemDisabled}
                     canSelectMultiple={canSelectMultiple}
                     shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}
+                    shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
                     shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                     rightHandSideComponent={rightHandSideComponent}
                     isMultilineSupported={isRowMultilineSupported}

src/components/SelectionList/types.ts

@@ -148,6 +148,9 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to highlight the selected item */
     shouldHighlightSelectedItem?: boolean;
 
+    /** Whether to show the default right hand side checkmark */
+    shouldUseDefaultRightHandSideCheckmark?: boolean;
+
     /** Whether hover style should be disabled */
     shouldDisableHoverStyle?: boolean;
     setShouldDisableHoverStyle?: React.Dispatch<React.SetStateAction<boolean>>;

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx

@@ -1,11 +1,12 @@
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
-import SelectionList from '@components/SelectionListWithSections';
-import UserListItem from '@components/SelectionListWithSections/UserListItem';
+import SelectionList from '@components/SelectionList';
+import UserListItem from '@components/SelectionList/ListItem/UserListItem';
+import type {SelectionListHandle} from '@components/SelectionList/types';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -37,10 +38,11 @@ function SearchFiltersWorkspacePage() {
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const shouldShowLoadingIndicator = isLoadingApp && !isOffline;
+    const selectionListRef = useRef<SelectionListHandle>(null);
 
     const [selectedOptions, setSelectedOptions] = useState<string[]>(() => (searchAdvancedFiltersForm?.policyID ? Array.from(searchAdvancedFiltersForm?.policyID) : []));
 
-    const {sections, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({
+    const {data, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({
         policies,
         currentUserLogin,
         shouldShowPendingDeletePolicy: false,
@@ -58,6 +60,10 @@ function SearchFiltersWorkspacePage() {
 
             if (optionIndex === -1 && option?.policyID) {
                 setSelectedOptions([...selectedOptions, option.policyID]);
+
+                requestAnimationFrame(() => {
+                    selectionListRef.current?.scrollAndHighlightItem([option.keyForList]);
+                });
             } else {
                 const newSelectedOptions = [...selectedOptions.slice(0, optionIndex), ...selectedOptions.slice(optionIndex + 1)];
                 setSelectedOptions(newSelectedOptions);
@@ -75,6 +81,16 @@ function SearchFiltersWorkspacePage() {
         setSelectedOptions([]);
     }, []);
 
+    const textInputOptions = useMemo(
+        () => ({
+            label: shouldShowSearchInput ? translate('common.search') : undefined,
+            value: searchTerm,
+            onChangeText: setSearchTerm,
+            headerMessage: shouldShowNoResultsFoundMessage ? translate('common.noResultsFound') : '',
+        }),
+        [searchTerm, setSearchTerm, shouldShowNoResultsFoundMessage, shouldShowSearchInput, translate],
+    );
+
     return (
         <ScreenWrapper
             testID={SearchFiltersWorkspacePage.displayName}
@@ -95,16 +111,15 @@ function SearchFiltersWorkspacePage() {
                         <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
                     ) : (
                         <SelectionList<WorkspaceListItem>
+                            ref={selectionListRef}
+                            data={data}
                             ListItem={UserListItem}
-                            sections={sections}
+                            onSelectRow={selectWorkspace}
+                            textInputOptions={textInputOptions}
                             canSelectMultiple
                             shouldUseDefaultRightHandSideCheckmark
-                            textInputLabel={shouldShowSearchInput ? translate('common.search') : undefined}
-                            textInputValue={searchTerm}
-                            onChangeText={setSearchTerm}
-                            onSelectRow={selectWorkspace}
-                            headerMessage={shouldShowNoResultsFoundMessage ? translate('common.noResultsFound') : ''}
                             showLoadingPlaceholder={isLoadingOnyxValue(policiesResult) || !didScreenTransitionEnd}
+                            disableMaintainingScrollPosition
                             footerContent={
                                 <SearchFilterPageFooterButtons
                                     applyChanges={applyChanges}