fix: resolve conflicts

Author: koko57

docs/assets/images/ExpensifyHelp_ExpenseRules_02.png

@@ -1,6 +1,7 @@
 /* eslint-disable max-classes-per-file */
 import * as core from '@actions/core';
 import '@shopify/flash-list/jestSetup';
+import {useMemo} from 'react';
 import type * as RNAppLogs from 'react-native-app-logs';
 import type {ReadDirItem} from 'react-native-fs';
 import 'react-native-gesture-handler/jestSetup';
@@ -142,60 +143,70 @@ jest.mock('../modules/hybrid-app/src/NativeReactNativeHybridApp', () => ({
     clearOldDotAfterSignOut: jest.fn(),
 }));
 
+const mockUseMemo = useMemo;
+
 // Mock lazy asset loading to be synchronous in tests
 jest.mock('../src/hooks/useLazyAsset.ts', () => ({
-    useMemoizedLazyAsset: jest.fn(() => {
-        // Return a mock asset immediately to avoid async loading in tests
-        const mockAsset = {
-            src: 'mock-icon',
-            testID: 'mock-asset',
-            // Add common icon properties that tests might expect
-            height: 20,
-            width: 20,
-        };
-
-        return {
-            asset: mockAsset,
-            isLoaded: true,
-            isLoading: false,
-            hasError: false,
-        };
-    }),
-    useMemoizedLazyIllustrations: jest.fn((names: readonly string[]) => {
-        // Return a Record with all requested illustration names
-        const mockIllustrations: Record<string, unknown> = {};
-        for (const name of names) {
-            mockIllustrations[name] = {
-                src: `mock-${name}`,
-                testID: `mock-illustration-${name}`,
+    useMemoizedLazyAsset: jest.fn((importFn) =>
+        mockUseMemo(() => {
+            // Return a mock asset immediately to avoid async loading in tests
+            const mockAsset = {
+                src: 'mock-icon',
+                testID: 'mock-asset',
+                // Add common icon properties that tests might expect
                 height: 20,
                 width: 20,
             };
-        }
-        return mockIllustrations;
-    }),
-    useMemoizedLazyExpensifyIcons: jest.fn((names: readonly string[]) => {
-        // Return a Record with all requested icon names
-        const mockIcons: Record<string, unknown> = {};
-        for (const name of names) {
-            mockIcons[name] = {
-                src: `mock-${name}`,
-                testID: `mock-expensify-icon-${name}`,
-                height: 20,
-                width: 20,
+
+            return {
+                asset: mockAsset,
+                isLoaded: true,
+                isLoading: false,
+                hasError: false,
             };
-        }
-        return mockIcons;
-    }),
-    default: jest.fn(() => {
-        const mockAsset = {src: 'mock-icon', testID: 'mock-asset'};
-        return {
-            asset: mockAsset,
-            isLoaded: true,
-            isLoading: false,
-            hasError: false,
-        };
-    }),
+        }, [importFn]),
+    ),
+    useMemoizedLazyIllustrations: jest.fn((names: readonly string[]) =>
+        mockUseMemo(() => {
+            // Return a Record with all requested illustration names
+            const mockIllustrations: Record<string, unknown> = {};
+            for (const name of names) {
+                mockIllustrations[name] = {
+                    src: `mock-${name}`,
+                    testID: `mock-illustration-${name}`,
+                    height: 20,
+                    width: 20,
+                };
+            }
+            return mockIllustrations;
+        }, [names]),
+    ),
+    useMemoizedLazyExpensifyIcons: jest.fn((names: readonly string[]) =>
+        mockUseMemo(() => {
+            // Return a Record with all requested icon names
+            const mockIcons: Record<string, unknown> = {};
+            for (const name of names) {
+                mockIcons[name] = {
+                    src: `mock-${name}`,
+                    testID: `mock-expensify-icon-${name}`,
+                    height: 20,
+                    width: 20,
+                };
+            }
+            return mockIcons;
+        }, [names]),
+    ),
+    default: jest.fn((importFn) =>
+        mockUseMemo(() => {
+            const mockAsset = {src: 'mock-icon', testID: 'mock-asset'};
+            return {
+                asset: mockAsset,
+                isLoaded: true,
+                isLoading: false,
+                hasError: false,
+            };
+        }, [importFn]),
+    ),
 }));
 
 // Mock icon loading functions to resolve immediately

jest/setup.ts

@@ -713,6 +713,9 @@ const ONYXKEYS = {
 
         /** Used for identifying user as admin of a domain */
         SHARED_NVP_PRIVATE_ADMIN_ACCESS: 'sharedNVP_private_admin_access_',
+
+        /** SAML login metadata for a domain */
+        SAML_METADATA: 'saml_metadata_',
     },
 
     /** List of Form ids */
@@ -1095,6 +1098,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.NVP_EXPENSIFY_ON_CARD_WAITLIST]: OnyxTypes.CardOnWaitlist;
     [ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD]: OnyxTypes.IssueNewCard;
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_ADMIN_ACCESS]: boolean;
+    [ONYXKEYS.COLLECTION.SAML_METADATA]: OnyxTypes.SamlMetadata;
 };
 
 type OnyxValuesMapping = {

src/ONYXKEYS.ts

@@ -66,7 +66,7 @@ type ButtonProps = Partial<ChildrenProps> & {
     onLayout?: (event: LayoutChangeEvent) => void;
 
     /** A function that is called when the button is clicked on */
-    onPress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
+    onPress?: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 
     /** A function that is called when the button is long pressed */
     onLongPress?: (event?: GestureResponderEvent) => void;

src/components/Button/index.tsx

@@ -35,7 +35,7 @@ type DropdownOption<TValueType> = {
     iconFill?: string;
     interactive?: boolean;
     numberOfLinesTitle?: number;
-    titleStyle?: ViewStyle;
+    titleStyle?: StyleProp<TextStyle>;
     shouldCloseModalOnSelect?: boolean;
     description?: string;
     descriptionTextStyle?: StyleProp<TextStyle>;

src/components/ButtonWithDropdownMenu/types.ts

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, {useState} from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
+import Button from '@components/Button';
 import CopyTextToClipboard from '@components/CopyTextToClipboard';
 import Text from '@components/Text';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -12,21 +16,55 @@ type CopyableTextFieldProps = {
 
     /** Should an activity indicator be shown instead of the text and button */
     isLoading?: boolean;
+
+    /** Custom styles for the outer most View */
+    style?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the displayed text */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Whether the text field should be expandable */
+    shouldDisplayShowMoreButton?: boolean;
 };
 
-function CopyableTextField({value, isLoading = false}: CopyableTextFieldProps) {
+function CopyableTextField({value, isLoading = false, style, textStyle, shouldDisplayShowMoreButton = false}: CopyableTextFieldProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {translate} = useLocalize();
+
+    const [expanded, setExpanded] = useState(false);
+    const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'UpArrow'] as const);
+
     return (
-        <View style={[styles.qbdSetupLinkBox, styles.border, styles.flexRow, styles.gap2, styles.justifyContentCenter, styles.alignItemsCenter]}>
+        <View style={[styles.qbdSetupLinkBox, styles.border, styles.gap4, styles.justifyContentCenter, styles.alignItemsCenter, style]}>
             {isLoading ? (
                 <ActivityIndicator color={theme.text} />
             ) : (
                 <>
-                    <Text style={styles.copyableTextField}>{value ?? ''}</Text>
-                    <View style={[styles.reportActionContextMenuMiniButton, styles.overflowHidden, styles.buttonHoveredBG]}>
-                        <CopyTextToClipboard urlToCopy={value ?? ''} />
+                    <View style={[styles.w100, styles.flexRow, styles.gap2, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                        <Text
+                            style={[styles.copyableTextField, textStyle]}
+                            numberOfLines={!shouldDisplayShowMoreButton || expanded ? undefined : 4}
+                        >
+                            {value ?? ''}
+                        </Text>
+                        <CopyTextToClipboard
+                            urlToCopy={value ?? ''}
+                            styles={styles.copyableTextFieldButton}
+                            iconStyles={styles.t0}
+                            shouldHaveActiveBackground
+                            shouldUseButtonBackground
+                        />
                     </View>
+                    {shouldDisplayShowMoreButton && (
+                        <Button
+                            small
+                            text={translate(expanded ? 'common.showLess' : 'common.showMore')}
+                            onPress={() => setExpanded((current) => !current)}
+                            shouldShowRightIcon
+                            iconRight={expanded ? icons.UpArrow : icons.DownArrow}
+                        />
+                    )}
                 </>
             )}
         </View>

src/components/Domain/CopyableTextField.tsx

@@ -1,14 +1,10 @@
-import React from 'react';
-import Icon from '@components/Icon';
-// eslint-disable-next-line no-restricted-imports
-import * as Expensicons from '@components/Icon/Expensicons';
+import React, {useMemo} from 'react';
 import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
@@ -44,27 +40,29 @@ type DomainItem = {
 } & Pick<OfflineWithFeedbackProps, 'pendingAction'>;
 
 function DomainMenuItem({item, index}: DomainMenuItemProps) {
-    const icons = useMemoizedLazyExpensifyIcons(['NewWindow'] as const);
+    const icons = useMemoizedLazyExpensifyIcons(['Globe'] as const);
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isAdmin, isValidated} = item;
-    const theme = useTheme();
+    const {isAdmin, isValidated, action} = item;
 
-    const threeDotsMenuItems: PopoverMenuItem[] | undefined =
-        !isValidated && isAdmin
-            ? [
-                  {
-                      icon: Expensicons.Globe,
-                      text: translate('domain.goToDomain'),
-                      onSelected: item.action,
-                  },
-                  {
-                      icon: Expensicons.Globe,
-                      text: translate('domain.verifyDomain.title'),
-                      onSelected: () => Navigation.navigate(ROUTES.WORKSPACES_VERIFY_DOMAIN.getRoute(item.accountID)),
-                  },
-              ]
-            : undefined;
+    const threeDotsMenuItems: PopoverMenuItem[] | undefined = useMemo(
+        () =>
+            isAdmin
+                ? [
+                      {
+                          icon: icons.Globe,
+                          text: translate('domain.goToDomain'),
+                          onSelected: action,
+                      },
+                      !isValidated && {
+                          icon: icons.Globe,
+                          text: translate('domain.verifyDomain.title'),
+                          onSelected: () => Navigation.navigate(ROUTES.WORKSPACES_VERIFY_DOMAIN.getRoute(item.accountID)),
+                      },
+                  ].filter((menuItem) => !!menuItem)
+                : undefined,
+        [isAdmin, icons.Globe, translate, action, isValidated, item.accountID],
+    );
 
     return (
         <OfflineWithFeedback
@@ -76,7 +74,7 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
                 role={CONST.ROLE.BUTTON}
                 accessibilityLabel="row"
                 style={styles.mh5}
-                onPress={item.action}
+                onPress={action}
                 disabled={!isAdmin}
             >
                 {({hovered}) => (
@@ -85,23 +83,6 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
                         badgeText={isAdmin && !isValidated ? translate('domain.notVerified') : undefined}
                         isHovered={hovered}
                         menuItems={threeDotsMenuItems}
-                        rightIcon={
-                            isValidated ? (
-                                <Icon
-                                    src={icons.NewWindow}
-                                    fill={hovered ? theme.iconHovered : theme.icon}
-                                    isButtonIcon
-                                />
-                            ) : (
-                                <Icon
-                                    src={Expensicons.ArrowRight}
-                                    fill={theme.icon}
-                                    additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
-                                    isButtonIcon
-                                    medium
-                                />
-                            )
-                        }
                     />
                 )}
             </PressableWithoutFeedback>