[Wave8] Workspace Switcher

patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch

@@ -43,7 +43,7 @@ index 7558eb3..b7bb75e 100644
          }) : STATE_TRANSITIONING_OR_BELOW_TOP;
        }
 +      
-+      const isHomeScreenAndNotOnTop = route.name === 'Home' && isScreenActive !== STATE_ON_TOP;
++      const isHomeScreenAndNotOnTop = (route.name === 'BottomTabNavigator' || route.name === 'Settings_Root')  && isScreenActive !== STATE_ON_TOP;
 +
        const {
          headerShown = true,

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

@@ -480,6 +480,8 @@ const CONST = {
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
     EXPENSIFY_INBOX_URL: 'https://www.expensify.com/inbox',
+    ADMIN_POLICIES_URL: 'admin_policies',
+    ADMIN_DOMAINS_URL: 'admin_domains',
 
     SIGN_IN_FORM_WIDTH: 300,
 
@@ -993,6 +995,7 @@ const CONST = {
             3: 100,
         },
     },
+    CENTRAL_PANE_ANIMATION_HEIGHT: 200,
     LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {
@@ -1445,7 +1448,7 @@ const CONST = {
     GUIDES_CALL_TASK_IDS: {
         CONCIERGE_DM: 'NewExpensifyConciergeDM',
         WORKSPACE_INITIAL: 'WorkspaceHome',
-        WORKSPACE_SETTINGS: 'WorkspaceGeneralSettings',
+        WORKSPACE_OVERVIEW: 'WorkspaceGeneralSettings',
         WORKSPACE_CARD: 'WorkspaceCorporateCards',
         WORKSPACE_REIMBURSE: 'WorkspaceReimburseReceipts',
         WORKSPACE_BILLS: 'WorkspacePayBills',
@@ -3062,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',
@@ -3106,6 +3113,11 @@ const CONST = {
         EMAIL: 'EMAIL',
         REPORT: 'REPORT',
     },
+
+    WORKSPACE_SWITCHER: {
+        NAME: 'Expensify',
+        SUBSCRIPT_ICON_SIZE: 8,
+    },
 } as const;
 
 export default CONST;

src/NAVIGATORS.ts

@@ -4,6 +4,7 @@
  * */
 export default {
     CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator',
+    BOTTOM_TAB_NAVIGATOR: 'BottomTabNavigator',
     LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator',
     RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator',
     FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',

src/ROUTES.ts

@@ -14,6 +14,8 @@ function getUrlWithBackToParam<TUrl extends string>(url: TUrl, backTo?: string):
 const ROUTES = {
     HOME: '',
 
+    ALL_SETTINGS: 'all-settings',
+
     // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {
@@ -55,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',
@@ -438,13 +440,17 @@ const ROUTES = {
         route: 'workspace/:policyID/invite-message',
         getRoute: (policyID: string) => `workspace/${policyID}/invite-message` as const,
     },
-    WORKSPACE_SETTINGS: {
-        route: 'workspace/:policyID/settings',
-        getRoute: (policyID: string) => `workspace/${policyID}/settings` as const,
+    WORKSPACE_OVERVIEW: {
+        route: 'workspace/:policyID/overview',
+        getRoute: (policyID: string) => `workspace/${policyID}/overview` as const,
+    },
+    WORKSPACE_OVERVIEW_CURRENCY: {
+        route: 'workspace/:policyID/overview/currency',
+        getRoute: (policyID: string) => `workspace/${policyID}/overview/currency` as const,
     },
-    WORKSPACE_SETTINGS_CURRENCY: {
-        route: 'workspace/:policyID/settings/currency',
-        getRoute: (policyID: string) => `workspace/${policyID}/settings/currency` as const,
+    WORKSPACE_OVERVIEW_NAME: {
+        route: 'workspace/:policyID/overview/name',
+        getRoute: (policyID: string) => `workspace/${policyID}/overview/name` as const,
     },
     WORKSPACE_CARD: {
         route: 'workspace/:policyID/card',

src/SCREENS.ts

@@ -12,11 +12,13 @@ const PROTECTED_SCREENS = {
 
 const SCREENS = {
     ...PROTECTED_SCREENS,
+    ALL_SETTINGS: 'AllSettings',
     REPORT: 'Report',
     NOT_FOUND: 'not-found',
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
     VALIDATE_LOGIN: 'ValidateLogin',
     UNLINK_LOGIN: 'UnlinkLogin',
+    SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     SETTINGS: {
         ROOT: 'Settings_Root',
         SHARE_CODE: 'Settings_Share_Code',
@@ -83,6 +85,10 @@ const SCREENS = {
     },
     LEFT_MODAL: {
         SEARCH: 'Search',
+        WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
+    },
+    WORKSPACE_SWITCHER: {
+        ROOT: 'WorkspaceSwitcher_Root',
     },
     RIGHT_MODAL: {
         SETTINGS: 'Settings',
@@ -192,7 +198,7 @@ const SCREENS = {
 
     WORKSPACE: {
         INITIAL: 'Workspace_Initial',
-        SETTINGS: 'Workspace_Settings',
+        OVERVIEW: 'Workspace_Overview',
         CARD: 'Workspace_Card',
         REIMBURSE: 'Workspace_Reimburse',
         RATE_AND_UNIT: 'Workspace_RateAndUnit',
@@ -202,7 +208,8 @@ const SCREENS = {
         MEMBERS: 'Workspace_Members',
         INVITE: 'Workspace_Invite',
         INVITE_MESSAGE: 'Workspace_Invite_Message',
-        CURRENCY: 'Workspace_Settings_Currency',
+        CURRENCY: 'Workspace_Overview_Currency',
+        NAME: 'Workspace_Overview_Name',
     },
 
     EDIT_REQUEST: {

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/AvatarWithImagePicker.js

@@ -95,6 +95,9 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /** Style applied to the avatar */
+    avatarStyle: stylePropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -142,6 +145,7 @@ function AvatarWithImagePicker({
     anchorAlignment,
     onImageSelected,
     editorMaskImage,
+    avatarStyle,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -288,7 +292,7 @@ function AvatarWithImagePicker({
 
     return (
         <View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
-            <View style={[styles.pRelative, styles.avatarLarge]}>
+            <View style={[styles.pRelative, avatarStyle]}>
                 <OfflineWithFeedback
                     pendingAction={pendingAction}
                     errors={errors}
@@ -306,8 +310,8 @@ function AvatarWithImagePicker({
                             <View>
                                 {source ? (
                                     <Avatar
-                                        containerStyles={styles.avatarLarge}
-                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                        containerStyles={avatarStyle}
+                                        imageStyles={[avatarStyle, styles.alignSelfCenter]}
                                         source={source}
                                         fallbackIcon={fallbackIcon}
                                         size={size}
@@ -319,7 +323,7 @@ function AvatarWithImagePicker({
                             </View>
                             <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
                                 <Icon
-                                    src={Expensicons.Camera}
+                                    src={Expensicons.Pencil}
                                     width={variables.iconSizeSmall}
                                     height={variables.iconSizeSmall}
                                     fill={theme.icon}

src/components/ContextMenuItem.js

@@ -40,6 +40,9 @@ const propTypes = {
 
     /** Forwarded ref to ContextMenuItem */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+    /** Should limit width. */
+    shouldLimitWidth: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -50,9 +53,10 @@ const defaultProps = {
     isAnonymousAction: false,
     isFocused: false,
     innerRef: null,
+    shouldLimitWidth: true,
 };
 
-function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
+function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef, shouldLimitWidth}) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
@@ -99,7 +103,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
             success={!isThrottledButtonActive}
             description={description}
             descriptionTextStyle={styles.breakWord}
-            style={StyleUtils.getContextMenuItemStyles(windowWidth)}
+            style={shouldLimitWidth && StyleUtils.getContextMenuItemStyles(windowWidth)}
             isAnonymousAction={isAnonymousAction}
             focused={isFocused}
             interactive={isThrottledButtonActive}

src/components/EnvironmentBadge.tsx

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

src/components/FloatingActionButton.tsx

@@ -97,11 +97,10 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
 
     return (
         <Tooltip text={translate('common.new')}>
-            <View style={styles.floatingActionButtonContainer}>
+            <View style={styles.bottomTabBarItem}>
                 <AnimatedPressable
                     ref={(el) => {
                         fabPressable.current = el;
-
                         if (buttonRef && 'current' in buttonRef) {
                             buttonRef.current = el;
                         }

src/components/HeaderPageLayout.tsx

@@ -36,8 +36,10 @@ type HeaderPageLayoutProps = ChildrenProps &
 
         /** Style to apply to the whole section container */
         style?: StyleProp<ViewStyle>;
-    };
 
+        /** Whether or not to show the offline indicator */
+        shouldShowOfflineIndicator?: boolean;
+    };
 function HeaderPageLayout({
     backgroundColor,
     children,
@@ -47,6 +49,7 @@ function HeaderPageLayout({
     childrenContainerStyles,
     style,
     headerContent,
+    shouldShowOfflineIndicator = false,
     ...rest
 }: HeaderPageLayoutProps) {
     const theme = useTheme();
@@ -70,6 +73,7 @@ function HeaderPageLayout({
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
             testID={HeaderPageLayout.displayName}
+            shouldShowOfflineIndicator={shouldShowOfflineIndicator}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>

src/components/HeaderWithBackButton/index.tsx

@@ -70,7 +70,7 @@ function HeaderWithBackButton({
             // Hover on some part of close icons will not work on Electron if dragArea is true
             // https://github.com/Expensify/App/issues/29598
             dataSet={{dragArea: false}}
-            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2]}
+            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton ? styles.pl2 : styles.pl5]}
         >
             <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
                 {shouldShowBackButton && (