Wave8/workspace switcher

src/App.js

@@ -6,6 +6,7 @@ import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
+import ActiveWorkspaceContextProvider from './components/ActiveWorkspace/ActiveWorkspaceProvider';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
 import CustomStatusBarAndBackground from './components/CustomStatusBarAndBackground';
@@ -69,6 +70,7 @@ function App() {
                     PickerStateProvider,
                     EnvironmentProvider,
                     CustomStatusBarAndBackgroundContextProvider,
+                    ActiveWorkspaceContextProvider,
                 ]}
             >
                 <CustomStatusBarAndBackground />

src/CONST.ts

@@ -3065,7 +3065,11 @@ const CONST = {
         DEFAULT: 5,
         CAROUSEL: 3,
     },
+    BRICK_ROAD: {
+        GBR: 'info',
+        RBR: 'error',
 
+    },
     VIOLATIONS: {
         ALL_TAG_LEVELS_REQUIRED: 'allTagLevelsRequired',
         AUTO_REPORTED_REJECTED_EXPENSE: 'autoReportedRejectedExpense',

src/ROUTES.ts

@@ -57,7 +57,7 @@ const ROUTES = {
         route: 'bank-account/:stepToOpen?',
         getRoute: (stepToOpen = '', policyID = '', backTo?: string) => getUrlWithBackToParam(`bank-account/${stepToOpen}?policyID=${policyID}`, backTo),
     },
-
+    WORKSPACE_SWITCHER: 'workspaceSwitcher',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_SHARE_CODE: 'settings/shareCode',

src/SCREENS.ts

@@ -85,6 +85,10 @@ const SCREENS = {
     },
     LEFT_MODAL: {
         SEARCH: 'Search',
+        WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
+    },
+    WORKSPACE_SWITCHER: {
+        ROOT: 'WorkspaceSwitcher_Root',
     },
     RIGHT_MODAL: {
         SETTINGS: 'Settings',

src/components/ActiveWorkspace/ActiveWorkspaceContext.tsx

@@ -0,0 +1,11 @@
+import {createContext} from 'react';
+
+type ActiveWorkspaceContextType = {
+    activeWorkspaceID?: string;
+    setActiveWorkspaceID: (activeWorkspaceID?: string) => void;
+}
+
+const ActiveWorkspaceContext = createContext<ActiveWorkspaceContextType>({activeWorkspaceID: undefined, setActiveWorkspaceID: () => undefined});
+
+export default ActiveWorkspaceContext;
+export {type ActiveWorkspaceContextType};

src/components/ActiveWorkspace/ActiveWorkspaceProvider.tsx

@@ -0,0 +1,17 @@
+import React, {useMemo, useState} from 'react';
+import ActiveWorkspaceContext from './ActiveWorkspaceContext';
+
+function ActiveWorkspaceContextProvider({children}: React.PropsWithChildren) {
+    const [activeWorkspaceID, setActiveWorkspaceID] = useState<string | undefined>(undefined);
+
+    const value = useMemo(
+        () => ({
+            activeWorkspaceID,
+            setActiveWorkspaceID,
+        }), [activeWorkspaceID]
+    )
+
+    return <ActiveWorkspaceContext.Provider value={value}>{children}</ActiveWorkspaceContext.Provider>;
+}
+
+export default ActiveWorkspaceContextProvider;

src/components/EnvironmentBadge.tsx

@@ -32,6 +32,7 @@ function EnvironmentBadge() {
             badgeStyles={[styles.alignSelfStart, styles.headerEnvBadge]}
             textStyles={[styles.headerEnvBadgeText]}
             environment={environment}
+            pressable
         />
     );
 }

src/components/MultipleAvatars.tsx

@@ -153,6 +153,7 @@ function MultipleAvatars({
                     <Avatar
                         source={icons[0].source}
                         size={size}
+                        fill={icons[0].fill ?? theme.iconSuccessFill}
                         name={icons[0].name}
                         type={icons[0].type}
                         fallbackIcon={icons[0].fallbackIcon}

src/components/OptionRow.tsx

@@ -254,6 +254,14 @@ function OptionRow({
                                         />
                                     </View>
                                 )}
+                                {option.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO && (
+                                    <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                        <Icon
+                                            src={Expensicons.DotIndicator}
+                                            fill={theme.iconSuccessFill}
+                                        />
+                                    </View>
+                                )}
                                 {showSelectedState && (
                                     <>
                                         {shouldShowSelectedStateAsButton && !isSelected ? (

src/components/OptionsList/BaseOptionsList.js

@@ -191,6 +191,10 @@ function BaseOptionsList({
                 return true;
             }
 
+            if (option.policyID && option.policyID === item.policyID) {
+                return true;
+            }
+
             if (_.isEmpty(option.name)) {
                 return false;
             }
@@ -201,7 +205,7 @@ function BaseOptionsList({
         return (
             <OptionRow
                 keyForList={item.keyForList}
-                option={item}
+                option={{...item, brickRoadIndicator: isSelected ? undefined : item.brickRoadIndicator}}
                 showTitleTooltip={showTitleTooltip}
                 hoverStyle={optionHoveredStyle}
                 optionIsFocused={!disableFocusOptions && !isItemDisabled && focusedIndex === index + section.indexOffset}
@@ -212,7 +216,7 @@ function BaseOptionsList({
                 selectedStateButtonText={multipleOptionSelectorButtonText}
                 onSelectedStatePressed={onAddToSelection}
                 highlightSelected={highlightSelectedOptions}
-                boldStyle={boldStyle}
+                boldStyle={_.isUndefined(item.boldStyle) ? boldStyle : item.boldStyle}
                 isDisabled={isItemDisabled}
                 shouldHaveOptionSeparator={index > 0 && shouldHaveOptionSeparator}
                 shouldDisableRowInnerPadding={shouldDisableRowInnerPadding}

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -8,7 +8,7 @@ import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
 import Icon from '@components/Icon';
-import {Info} from '@components/Icon/Expensicons';
+import {Info, MagnifyingGlass} from '@components/Icon/Expensicons';
 import OptionsList from '@components/OptionsList';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import ShowMoreButton from '@components/ShowMoreButton';
@@ -492,6 +492,7 @@ class BaseOptionsSelector extends Component {
                 spellCheck={false}
                 shouldInterceptSwipe={this.props.shouldTextInputInterceptSwipe}
                 isLoading={this.props.isLoadingNewOptions}
+                iconLeft={MagnifyingGlass}
                 testID="options-selector-input"
             />
         );
@@ -502,6 +503,7 @@ class BaseOptionsSelector extends Component {
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
                 sections={this.state.sections}
                 focusedIndex={this.state.focusedIndex}
+                disableFocusOptions={this.props.disableFocusOptions}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
                 shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -72,6 +72,9 @@ const propTypes = {
     /** Whether to disable interactivity of option rows */
     isDisabled: PropTypes.bool,
 
+    /** Whether to disable focus options of rows */
+    disableFocusOptions: PropTypes.bool,
+
     /** Display the text of the option in bold font style */
     boldStyle: PropTypes.bool,
 
@@ -163,6 +166,7 @@ const defaultProps = {
     shouldShowOptions: true,
     disableArrowKeysActions: false,
     isDisabled: false,
+    disableFocusOptions: false,
     shouldHaveOptionSeparator: false,
     initiallyFocusedOptionKey: undefined,
     maxLength: CONST.SEARCH_MAX_LENGTH,

src/components/TextInput/BaseTextInput/index.tsx

@@ -36,6 +36,7 @@ function BaseTextInput(
         placeholder = '',
         errorText = '',
         icon = null,
+        iconLeft = null,
         textInputContainerStyles,
         touchableInputWrapperStyle,
         containerStyles,
@@ -317,6 +318,16 @@ function BaseTextInput(
                             </>
                         ) : null}
                         <View style={[styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
+                            {!inputProps.secureTextEntry && iconLeft && (
+                                <View style={[styles.textInputLeftIconContainer, !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone]}>
+                                    <Icon
+                                        src={iconLeft}
+                                        fill={theme.icon}
+                                        height={20}
+                                        width={20}
+                                    />
+                                </View>
+                            )}
                             {Boolean(prefixCharacter) && (
                                 <View style={styles.textInputPrefixWrapper}>
                                     <Text

src/components/TextInput/BaseTextInput/types.ts

@@ -26,6 +26,9 @@ type CustomBaseTextInputProps = {
     /** Icon to display in right side of text input */
     icon?: IconAsset | null;
 
+    /** Icon to display in left side of text input */
+    iconLeft: IconAsset | null;
+
     /** Customize the TextInput container */
     textInputContainerStyles?: StyleProp<ViewStyle>;
 

src/components/WorkspaceSwitcherButton.tsx

@@ -1,22 +1,46 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import useLocalize from '@hooks/useLocalize';
 import CONST from '@src/CONST';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+import useActiveWorkspace from '@hooks/useActiveWorkspace';
+import {getPolicy, getDefaultWorkspaceAvatar} from "@libs/ReportUtils"
 import * as Expensicons from './Icon/Expensicons';
 import {PressableWithFeedback} from './Pressable';
 import SubscriptAvatar from './SubscriptAvatar';
 
 function WorkspaceSwitcherButton() {
     const {translate} = useLocalize();
+    const {activeWorkspaceID} = useActiveWorkspace();
+
+
+    const {source, name, type} = useMemo(() => {
+
+        if(!activeWorkspaceID) {
+            return {source: Expensicons.ExpensifyAppIcon, name: CONST.WORKSPACE_SWITCHER.NAME, type: CONST.ICON_TYPE_AVATAR}
+        }
+
+        const policy = getPolicy(activeWorkspaceID);
+        const avatar = policy?.avatar && policy?.avatar?.length > 0 ? policy.avatar : getDefaultWorkspaceAvatar(policy?.name);
+        return {
+            source: avatar,
+            name: policy?.name,
+            type: CONST.ICON_TYPE_WORKSPACE,
+        }
+    }, [activeWorkspaceID]);
+
 
     return (
         <PressableWithFeedback
             accessibilityRole={CONST.ROLE.BUTTON}
             accessibilityLabel={translate('common.workspaces')}
             accessible
-            onPress={() => {}}
+            onPress={() => {
+                Navigation.navigate(ROUTES.WORKSPACE_SWITCHER);
+            }}
         >
             <SubscriptAvatar
-                mainAvatar={{source: Expensicons.ExpensifyAppIcon, name: CONST.WORKSPACE_SWITCHER.NAME, type: CONST.ICON_TYPE_AVATAR}}
+                mainAvatar={{source, name, type}}
                 subscriptIcon={{source: Expensicons.DownArrow, width: CONST.WORKSPACE_SWITCHER.SUBSCRIPT_ICON_SIZE, height: CONST.WORKSPACE_SWITCHER.SUBSCRIPT_ICON_SIZE}}
                 showTooltip={false}
                 noMargin

src/hooks/useActiveWorkspace.ts

@@ -0,0 +1,9 @@
+import {useContext} from 'react';
+import ActiveWorkspaceContext from '@components/ActiveWorkspace/ActiveWorkspaceContext';
+import type { ActiveWorkspaceContextType } from '@components/ActiveWorkspace/ActiveWorkspaceContext';
+
+function useActiveWorkspace(): ActiveWorkspaceContextType  {
+    return useContext(ActiveWorkspaceContext);
+}
+
+export default useActiveWorkspace;

src/languages/en.ts

@@ -1553,6 +1553,10 @@ export default {
             notFound: 'No workspace found',
             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',
+            everythingSection: 'Everything',
+        },
         new: {
             newWorkspace: 'New workspace',
             getTheExpensifyCardAndMore: 'Get the Expensify Card and more',

src/languages/es.ts

@@ -1576,6 +1576,10 @@ export default {
             notFound: 'No se encontró ningún espacio de trabajo',
             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',
+            everythingSection: 'Todo',
+        },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',
             getTheExpensifyCardAndMore: 'Consigue la Tarjeta Expensify y más',

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -29,6 +29,7 @@ import type {
     TaskDetailsNavigatorParamList,
     TeachersUniteNavigatorParamList,
     WalletStatementNavigatorParamList,
+    WorkspaceSwitcherNavigatorParamList,
 } from '@navigation/types';
 import type {ThemeStyles} from '@styles/index';
 import type {Screen} from '@src/SCREENS';
@@ -195,6 +196,9 @@ const AccountSettingsModalStackNavigator = createModalStackNavigator(
     },
     (styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}),
 );
+const WorkspaceSwitcherModalStackNavigator = createModalStackNavigator<WorkspaceSwitcherNavigatorParamList>({
+    [SCREENS.WORKSPACE_SWITCHER.ROOT]: () => require('../../../pages/WorkspaceSwitcherPage').default as React.ComponentType,
+});
 
 const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorParamList>({
     [SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../pages/ShareCodePage').default as React.ComponentType,
@@ -310,6 +314,7 @@ export {
     PrivateNotesModalStackNavigator,
     ProfileModalStackNavigator,
     ReferralModalStackNavigator,
+    WorkspaceSwitcherModalStackNavigator,
     ReimbursementAccountModalStackNavigator,
     ReportDetailsModalStackNavigator,
     ReportParticipantsModalStackNavigator,

src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx

@@ -35,6 +35,10 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
                         name={SCREENS.LEFT_MODAL.SEARCH}
                         component={ModalStackNavigators.SearchModalStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER}
+                        component={ModalStackNavigators.WorkspaceSwitcherModalStackNavigator}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

src/libs/Navigation/linkingConfig.ts

@@ -80,6 +80,13 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
                             [SCREENS.SEARCH_ROOT]: ROUTES.SEARCH,
                         },
                     },
+                    [SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: {
+                        screens: {
+                            [SCREENS.WORKSPACE_SWITCHER.ROOT]: {
+                                path: ROUTES.WORKSPACE_SWITCHER,
+                            },
+                        },
+                    },
                 },
             },
             [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: {

src/libs/Navigation/types.ts

@@ -79,6 +79,10 @@ type CentralPaneNavigatorParamList = {
     };
 };
 
+type WorkspaceSwitcherNavigatorParamList = {
+    [SCREENS.WORKSPACE_SWITCHER.ROOT]: undefined;
+};
+
 type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.ROOT]: undefined;
     [SCREENS.SETTINGS.SHARE_CODE]: undefined;
@@ -367,6 +371,7 @@ type PrivateNotesNavigatorParamList = {
 
 type LeftModalNavigatorParamList = {
     [SCREENS.LEFT_MODAL.SEARCH]: NavigatorScreenParams<SearchNavigatorParamList>;
+    [SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: NavigatorScreenParams<WorkspaceSwitcherNavigatorParamList>;
 };
 
 type RightModalNavigatorParamList = {
@@ -514,4 +519,5 @@ export type {
     ReferralDetailsNavigatorParamList,
     ReimbursementAccountNavigatorParamList,
     State,
+    WorkspaceSwitcherNavigatorParamList,
 };

src/libs/PolicyUtils.ts

@@ -86,10 +86,7 @@ function getPolicyBrickRoadIndicatorStatus(policy: OnyxEntry<Policy>, policyMemb
  */
 function shouldShowPolicy(policy: OnyxEntry<Policy>, isOffline: boolean): boolean {
     return (
-        !!policy &&
-        policy?.isPolicyExpenseChatEnabled &&
-        policy?.role === CONST.POLICY.ROLE.ADMIN &&
-        (isOffline || policy?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || Object.keys(policy.errors ?? {}).length > 0)
+        !!policy && policy?.isPolicyExpenseChatEnabled && (isOffline || policy?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || Object.keys(policy.errors ?? {}).length > 0)
     );
 }