Merge pull request #53102 from Krishna2323/krishna2323/issue/52654

Author: flodnv

src/components/SelectionList/BaseSelectionList.tsx

@@ -67,6 +67,7 @@ function BaseSelectionList<TItem extends ListItem>(
         showScrollIndicator = true,
         showLoadingPlaceholder = false,
         showConfirmButton = false,
+        shouldUseDefaultTheme = false,
         shouldPreventDefaultFocusOnSelectRow = false,
         containerStyle,
         sectionListStyle,
@@ -832,7 +833,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     {showConfirmButton && (
                         <FixedFooter style={[styles.mtAuto]}>
                             <Button
-                                success
+                                success={!shouldUseDefaultTheme}
                                 large
                                 style={[styles.w100]}
                                 text={confirmButtonText || translate('common.confirm')}

src/components/SelectionList/types.ts

@@ -476,6 +476,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to show the default confirm button */
     showConfirmButton?: boolean;
 
+    /** Whether to use the default theme for the confirm button */
+    shouldUseDefaultTheme?: boolean;
+
     /** Whether tooltips should be shown */
     shouldShowTooltips?: boolean;
 

src/languages/en.ts

@@ -2481,6 +2481,7 @@ const translations = {
             notAuthorized: `You don't have access to this page. If you're trying to join this workspace, just ask the workspace owner to add you as a member. Something else? Reach out to ${CONST.EMAIL.CONCIERGE}.`,
             goToRoom: ({roomName}: GoToRoomParams) => `Go to ${roomName} room`,
             goToWorkspace: 'Go to workspace',
+            clearFilter: 'Clear filter',
             workspaceName: 'Workspace name',
             workspaceOwner: 'Owner',
             workspaceType: 'Workspace type',
@@ -3706,7 +3707,7 @@ const translations = {
             description: 'Rooms are a great place to discuss and work with multiple people. To begin collaborating, create or join a workspace',
         },
         switcher: {
-            headerTitle: 'Choose a workspace',
+            headerTitle: 'Filter by workspace',
             everythingSection: 'Everything',
             placeholder: 'Find a workspace',
         },

src/languages/es.ts

@@ -2504,6 +2504,7 @@ const translations = {
             notAuthorized: `No tienes acceso a esta página. Si estás intentando unirte a este espacio de trabajo, pide al dueño del espacio de trabajo que te añada como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}: GoToRoomParams) => `Ir a la sala ${roomName}`,
             goToWorkspace: 'Ir al espacio de trabajo',
+            clearFilter: 'Borrar filtro',
             workspaceName: 'Nombre del espacio de trabajo',
             workspaceOwner: 'Dueño',
             workspaceType: 'Tipo de espacio de trabajo',
@@ -3751,7 +3752,7 @@ const translations = {
             description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para comenzar a colaborar, cree o únase a un espacio de trabajo',
         },
         switcher: {
-            headerTitle: 'Elige un espacio de trabajo',
+            headerTitle: 'Filtrar por espacio de trabajo',
             everythingSection: 'Todo',
             placeholder: 'Encuentra un espacio de trabajo',
         },

src/pages/WorkspaceSwitcherPage/index.tsx

@@ -1,19 +1,15 @@
 import React, {useCallback, useMemo} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import type {ListItem, SectionListDataType} from '@components/SelectionList/types';
 import UserListItem from '@components/SelectionList/UserListItem';
-import Text from '@components/Text';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import {sortWorkspacesBySelected} from '@libs/PolicyUtils';
@@ -35,8 +31,6 @@ type WorkspaceListItem = {
 const WorkspaceCardCreateAWorkspaceInstance = <WorkspaceCardCreateAWorkspace />;
 
 function WorkspaceSwitcherPage() {
-    const styles = useThemeStyles();
-    const theme = useTheme();
     const {isOffline} = useNetwork();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const {translate} = useLocalize();
@@ -82,17 +76,13 @@ function WorkspaceSwitcherPage() {
     );
 
     const selectPolicy = useCallback(
-        (option?: WorkspaceListItem) => {
-            if (!option) {
-                return;
-            }
-
-            const {policyID} = option;
+        (policyID?: string) => {
+            const newPolicyID = policyID === activeWorkspaceID ? undefined : policyID;
 
-            setActiveWorkspaceID(policyID);
+            setActiveWorkspaceID(newPolicyID);
             Navigation.goBack();
-            if (policyID !== activeWorkspaceID) {
-                Navigation.navigateWithSwitchPolicyID({policyID});
+            if (newPolicyID !== activeWorkspaceID) {
+                Navigation.navigateWithSwitchPolicyID({policyID: newPolicyID});
             }
         },
         [activeWorkspaceID, setActiveWorkspaceID],
@@ -147,53 +137,22 @@ function WorkspaceSwitcherPage() {
     const headerMessage = filteredAndSortedUserWorkspaces.length === 0 && usersWorkspaces.length ? translate('common.noResultsFound') : '';
     const shouldShowCreateWorkspace = usersWorkspaces.length === 0;
 
-    const defaultPolicy = {
-        text: CONST.WORKSPACE_SWITCHER.NAME,
-        icons: [{source: Expensicons.ExpensifyAppIcon, name: CONST.WORKSPACE_SWITCHER.NAME, type: CONST.ICON_TYPE_AVATAR}],
-        brickRoadIndicator: getIndicatorTypeForPolicy(undefined),
-        keyForList: CONST.WORKSPACE_SWITCHER.NAME,
-        isSelected: activeWorkspaceID === undefined,
-    };
-
     return (
         <ScreenWrapper
             testID={WorkspaceSwitcherPage.displayName}
             includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
         >
             {({didScreenTransitionEnd}) => (
                 <>
                     <HeaderWithBackButton
                         title={translate('workspace.switcher.headerTitle')}
                         onBackButtonPress={Navigation.goBack}
                     />
-                    <View style={[styles.ph5, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb1]}>
-                        <Text
-                            style={styles.label}
-                            color={theme.textSupporting}
-                        >
-                            {translate('workspace.switcher.everythingSection')}
-                        </Text>
-                    </View>
-                    <UserListItem
-                        item={defaultPolicy}
-                        isFocused={activeWorkspaceID === undefined}
-                        showTooltip={false}
-                        onSelectRow={() => selectPolicy(defaultPolicy)}
-                        pressableStyle={styles.flexRow}
-                        shouldSyncFocus={false}
-                    />
-                    <View style={[styles.ph5, styles.mv2]}>
-                        <Text
-                            style={styles.label}
-                            color={theme.textSupporting}
-                        >
-                            {translate('common.workspaces')}
-                        </Text>
-                    </View>
                     <SelectionList<WorkspaceListItem>
                         ListItem={UserListItem}
                         sections={sections}
-                        onSelectRow={selectPolicy}
+                        onSelectRow={(option) => selectPolicy(option.policyID)}
                         textInputLabel={usersWorkspaces.length >= CONST.STANDARD_LIST_ITEM_LIMIT ? translate('common.search') : undefined}
                         textInputValue={searchTerm}
                         onChangeText={setSearchTerm}
@@ -202,6 +161,10 @@ function WorkspaceSwitcherPage() {
                         shouldShowListEmptyContent={shouldShowCreateWorkspace}
                         initiallyFocusedOptionKey={activeWorkspaceID ?? CONST.WORKSPACE_SWITCHER.NAME}
                         showLoadingPlaceholder={fetchStatus.status === 'loading' || !didScreenTransitionEnd}
+                        showConfirmButton={!!activeWorkspaceID}
+                        shouldUseDefaultTheme
+                        confirmButtonText={translate('workspace.common.clearFilter')}
+                        onConfirm={() => selectPolicy(undefined)}
                     />
                 </>
             )}