Move buttons on Workspace > Overview page into a More dropdown button

nyomanjyotisa · nyomanjyotisa · commit cce503b7c28c · 2025-07-02T15:35:05.000+08:00
diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -1,5 +1,5 @@
 import type {RefObject} from 'react';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
 import Button from '@components/Button';
@@ -17,41 +17,43 @@ import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
 import type {ButtonWithDropdownMenuProps} from './types';
 
-function ButtonWithDropdownMenu<IValueType>({
-    success = true,
-    isSplitButton = true,
-    isLoading = false,
-    isDisabled = false,
-    pressOnEnter = false,
-    shouldAlwaysShowDropdownMenu = false,
-    menuHeaderText = '',
-    customText,
-    style,
-    disabledStyle,
-    buttonSize = CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
-    anchorAlignment = {
-        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
-    },
-    popoverHorizontalOffsetType,
-    buttonRef,
-    onPress,
-    options,
-    onOptionSelected,
-    onSubItemSelected,
-    onOptionsMenuShow,
-    onOptionsMenuHide,
-    enterKeyEventListenerPriority = 0,
-    wrapperStyle,
-    useKeyboardShortcuts = false,
-    shouldUseStyleUtilityForAnchorPosition = false,
-    defaultSelectedIndex = 0,
-    shouldShowSelectedItemCheck = false,
-    testID,
-    secondLineText = '',
-    icon,
-    shouldUseModalPaddingStyle = true,
-}: ButtonWithDropdownMenuProps<IValueType>) {
+function ButtonWithDropdownMenuInner<IValueType>(props: ButtonWithDropdownMenuProps<IValueType>, ref: React.Ref<{setIsMenuVisible: (visible: boolean) => void}>) {
+    const {
+        success = true,
+        isSplitButton = true,
+        isLoading = false,
+        isDisabled = false,
+        pressOnEnter = false,
+        shouldAlwaysShowDropdownMenu = false,
+        menuHeaderText = '',
+        customText,
+        style,
+        disabledStyle,
+        buttonSize = CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
+        anchorAlignment = {
+            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
+        },
+        popoverHorizontalOffsetType,
+        buttonRef,
+        onPress,
+        options,
+        onOptionSelected,
+        onSubItemSelected,
+        onOptionsMenuShow,
+        onOptionsMenuHide,
+        enterKeyEventListenerPriority = 0,
+        wrapperStyle,
+        useKeyboardShortcuts = false,
+        shouldUseStyleUtilityForAnchorPosition = false,
+        defaultSelectedIndex = 0,
+        shouldShowSelectedItemCheck = false,
+        testID,
+        secondLineText = '',
+        icon,
+        shouldUseModalPaddingStyle = true,
+    } = props;
+
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -138,6 +140,10 @@ function ButtonWithDropdownMenu<IValueType>({
         [isMenuVisible, isSplitButton, onPress, selectedItem?.value],
     );
 
+    useImperativeHandle(ref, () => ({
+        setIsMenuVisible,
+    }));
+
     return (
         <View style={wrapperStyle}>
             {shouldAlwaysShowDropdownMenu || options.length > 1 ? (
@@ -226,7 +232,9 @@ function ButtonWithDropdownMenu<IValueType>({
                     onModalShow={onOptionsMenuShow}
                     onItemSelected={(selectedSubitem, index, event) => {
                         onSubItemSelected?.(selectedSubitem, index, event);
-                        setIsMenuVisible(false);
+                        if (selectedSubitem.shouldCloseModalOnSelect !== false) {
+                            setIsMenuVisible(false);
+                        }
                     }}
                     anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverButtonDropdownMenuOffset(windowWidth) : popoverAnchorPosition}
                     shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
@@ -254,6 +262,6 @@ function ButtonWithDropdownMenu<IValueType>({
     );
 }
 
-ButtonWithDropdownMenu.displayName = 'ButtonWithDropdownMenu';
-
+ButtonWithDropdownMenuInner.displayName = 'ButtonWithDropdownMenu';
+const ButtonWithDropdownMenu = forwardRef(ButtonWithDropdownMenuInner);
 export default ButtonWithDropdownMenu;
diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts
@@ -44,6 +44,8 @@ type DropdownOption<TValueType> = {
     backButtonText?: string;
     avatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
     shouldShow?: boolean;
+    /** Whether to show a loading spinner for this option */
+    shouldShowLoadingSpinnerIcon?: boolean;
 };
 
 type ButtonWithDropdownMenuProps<TValueType> = {
diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -67,6 +67,12 @@ type PopoverMenuItem = MenuItemProps & {
 
     /** Test identifier used to find elements in unit and e2e tests */
     testID?: string;
+
+    /** Whether to show a loading spinner icon for the menu item */
+    shouldShowLoadingSpinnerIcon?: boolean;
+
+    /** Whether to close the modal on select */
+    shouldCloseModalOnSelect?: boolean;
 };
 
 type PopoverModalProps = Pick<ModalProps, 'animationIn' | 'animationOut' | 'animationInTiming' | 'animationOutTiming'> & Pick<ReanimatedModalProps, 'animationInDelay'>;
@@ -236,13 +242,17 @@ function PopoverMenu({
             setFocusedIndex(selectedSubMenuItemIndex);
         } else if (selectedItem.shouldCallAfterModalHide && (!isSafari() || shouldAvoidSafariException)) {
             onItemSelected?.(selectedItem, index, event);
-            close(
-                () => {
-                    selectedItem.onSelected?.();
-                },
-                undefined,
-                selectedItem.shouldCloseAllModals,
-            );
+            if (selectedItem.shouldCloseModalOnSelect !== false) {
+                close(
+                    () => {
+                        selectedItem.onSelected?.();
+                    },
+                    undefined,
+                    selectedItem.shouldCloseAllModals,
+                );
+            } else {
+                selectedItem.onSelected?.();
+            }
         } else {
             onItemSelected?.(selectedItem, index, event);
             selectedItem.onSelected?.();
@@ -287,7 +297,7 @@ function PopoverMenu({
     };
 
     const renderedMenuItems = currentMenuItems.map((item, menuIndex) => {
-        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, key, testID: menuItemTestID, ...menuItemProps} = item;
+        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, key, testID: menuItemTestID, shouldShowLoadingSpinnerIcon, ...menuItemProps} = item;
 
         return (
             <OfflineWithFeedback
@@ -323,6 +333,7 @@ function PopoverMenu({
                     titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
                     // Spread other props dynamically
                     {...menuItemProps}
+                    shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon}
                 />
             </OfflineWithFeedback>
         );
diff --git a/src/pages/workspace/WorkspaceOverviewPage.tsx b/src/pages/workspace/WorkspaceOverviewPage.tsx
@@ -1,11 +1,12 @@
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import type {ImageStyle, StyleProp} from 'react-native';
 import {Image, StyleSheet, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
-import Button from '@components/Button';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import ConfirmModal from '@components/ConfirmModal';
 import {FallbackWorkspaceAvatar, ImageCropSquareMask, QrCode, Trashcan, UserPlus} from '@components/Icon/Expensicons';
 import {Building} from '@components/Icon/Illustrations';
@@ -173,6 +174,8 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
 
     const {setIsDeletingPaidWorkspace, isLoadingBill}: {setIsDeletingPaidWorkspace: (value: boolean) => void; isLoadingBill: boolean | undefined} = usePayAndDowngrade(setIsDeleteModalOpen);
 
+    const dropdownMenuRef = useRef<any>(null);
+
     const confirmDeleteAndHideModal = useCallback(() => {
         if (!policy?.id || !policyName) {
             return;
@@ -186,6 +189,12 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
         }
     }, [policy?.id, policyName, shouldUseNarrowLayout]);
 
+    useEffect(() => {
+        if (!isLoadingBill) {
+            dropdownMenuRef.current.setIsMenuVisible(false);
+        }
+    }, [isLoadingBill]);
+
     const onDeleteWorkspace = useCallback(() => {
         if (shouldCalculateBillNewDot()) {
             setIsDeletingPaidWorkspace(true);
@@ -210,6 +219,59 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
         Navigation.popToSidebar();
     };
 
+    const getHeaderButtons = () => {
+        if (readOnly) {
+            return null;
+        }
+        const secondaryActions: DropdownOption<string>[] = [];
+        if (isPolicyAdmin) {
+            secondaryActions.push({
+                value: 'invite',
+                text: translate('common.invite'),
+                icon: UserPlus,
+                onSelected: () => {
+                    if (isAccountLocked) {
+                        showLockedAccountModal();
+                        return;
+                    }
+                    clearInviteDraft(route.params.policyID);
+                    Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID, Navigation.getActiveRouteWithoutParams()));
+                },
+            });
+        }
+        secondaryActions.push({
+            value: 'share',
+            text: translate('common.share'),
+            icon: QrCode,
+            onSelected: isAccountLocked ? showLockedAccountModal : onPressShare,
+        });
+        if (isOwner) {
+            secondaryActions.push({
+                value: 'delete',
+                text: translate('common.delete'),
+                icon: Trashcan,
+                onSelected: onDeleteWorkspace,
+                disabled: isLoadingBill,
+                shouldShowLoadingSpinnerIcon: isLoadingBill,
+                shouldCloseModalOnSelect: false,
+            });
+        }
+        return (
+            <View style={[!shouldUseNarrowLayout && styles.flexRow, !shouldUseNarrowLayout && styles.gap2]}>
+                <ButtonWithDropdownMenu
+                    ref={dropdownMenuRef}
+                    success={false}
+                    onPress={() => {}}
+                    shouldAlwaysShowDropdownMenu
+                    customText={translate('common.more')}
+                    options={secondaryActions}
+                    isSplitButton={false}
+                    wrapperStyle={styles.flexGrow1}
+                />
+            </View>
+        );
+    };
+
     return (
         <WorkspacePageWithSections
             headerText={translate('workspace.common.profile')}
@@ -223,9 +285,11 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
             shouldShowNotFoundPage={policy === undefined}
             onBackButtonPress={handleBackButtonPress}
             addBottomSafeAreaPadding
+            headerContent={!shouldUseNarrowLayout && getHeaderButtons()}
         >
             {(hasVBA?: boolean) => (
                 <View style={[styles.flex1, styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5, styles.pb5]}>{getHeaderButtons()}</View>}
                     <Section
                         isCentralPane
                         title=""
@@ -375,43 +439,6 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
                                 </View>
                             </OfflineWithFeedback>
                         )}
-                        {!readOnly && (
-                            <View style={[styles.flexRow, styles.mt6, styles.mnw120]}>
-                                {isPolicyAdmin && (
-                                    <Button
-                                        accessibilityLabel={translate('common.invite')}
-                                        text={translate('common.invite')}
-                                        onPress={() => {
-                                            if (isAccountLocked) {
-                                                showLockedAccountModal();
-                                                return;
-                                            }
-                                            clearInviteDraft(route.params.policyID);
-                                            Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID, Navigation.getActiveRouteWithoutParams()));
-                                        }}
-                                        icon={UserPlus}
-                                        style={[styles.mr2]}
-                                    />
-                                )}
-                                <Button
-                                    accessibilityLabel={translate('common.share')}
-                                    text={translate('common.share')}
-                                    onPress={isAccountLocked ? showLockedAccountModal : onPressShare}
-                                    icon={QrCode}
-                                />
-                                {isOwner && (
-                                    <Button
-                                        accessibilityLabel={translate('common.delete')}
-                                        text={translate('common.delete')}
-                                        style={[styles.ml2]}
-                                        onPress={onDeleteWorkspace}
-                                        icon={Trashcan}
-                                        isLoading={isLoadingBill}
-                                        iconStyles={isLoadingBill ? styles.opacity0 : undefined}
-                                    />
-                                )}
-                            </View>
-                        )}
                     </Section>
                     <ConfirmModal
                         title={translate('workspace.common.delete')}
