Skip to content

Commit d3d6795

Browse files
mountinymountiny
authored
Merge pull request #59713 from software-mansion-labs/improve-desktop-nav/account-switcher-tooltip
[Desktop Navigation] Add a tooltip to the account switcher on the accounts page
2 parents b1a9d4a + f8dc1e4 commit d3d6795

File tree

3 files changed

+70
-61
lines changed

3 files changed

+70
-61
lines changed

‎src/components/AccountSwitcher.tsx

Lines changed: 68 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import useTheme from '@hooks/useTheme';
1010
import useThemeStyles from '@hooks/useThemeStyles';
1111
import useWindowDimensions from '@hooks/useWindowDimensions';
1212
import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate';
13-
import * as EmojiUtils from '@libs/EmojiUtils';
14-
import * as ErrorUtils from '@libs/ErrorUtils';
15-
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
13+
import {close} from '@libs/actions/Modal';
14+
import {getProcessedText, splitTextWithEmojis} from '@libs/EmojiUtils';
15+
import {getLatestError} from '@libs/ErrorUtils';
16+
import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
1617
import variables from '@styles/variables';
17-
import * as Modal from '@userActions/Modal';
1818
import CONST from '@src/CONST';
1919
import ONYXKEYS from '@src/ONYXKEYS';
2020
import type {PersonalDetails} from '@src/types/onyx';
@@ -27,6 +27,7 @@ import type {PopoverMenuItem} from './PopoverMenu';
2727
import PopoverMenu from './PopoverMenu';
2828
import {PressableWithFeedback} from './Pressable';
2929
import Text from './Text';
30+
import Tooltip from './Tooltip';
3031

3132
function AccountSwitcher() {
3233
const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -47,7 +48,7 @@ function AccountSwitcher() {
4748

4849
const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
4950
const canSwitchAccounts = delegators.length > 0 || isActingAsDelegate;
50-
const processedTextArray = EmojiUtils.splitTextWithEmojis(currentUserPersonalDetails?.displayName);
51+
const processedTextArray = splitTextWithEmojis(currentUserPersonalDetails?.displayName);
5152

5253
const createBaseMenuItem = (
5354
personalDetails: PersonalDetails | undefined,
@@ -58,7 +59,7 @@ function AccountSwitcher() {
5859
return {
5960
text: personalDetails?.displayName ?? personalDetails?.login ?? '',
6061
description: Str.removeSMSDomain(personalDetails?.login ?? ''),
61-
avatarID: personalDetails?.accountID ?? -1,
62+
avatarID: personalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID,
6263
icon: personalDetails?.avatar ?? '',
6364
iconType: CONST.ICON_TYPE_AVATAR,
6465
outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover,
@@ -86,14 +87,14 @@ function AccountSwitcher() {
8687
return [currentUserMenuItem];
8788
}
8889

89-
const delegatePersonalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(delegateEmail);
90-
const error = ErrorUtils.getLatestError(account?.delegatedAccess?.errorFields?.disconnect);
90+
const delegatePersonalDetails = getPersonalDetailByEmail(delegateEmail);
91+
const error = getLatestError(account?.delegatedAccess?.errorFields?.disconnect);
9192

9293
return [
9394
createBaseMenuItem(delegatePersonalDetails, error, {
9495
onSelected: () => {
9596
if (isOffline) {
96-
Modal.close(() => setShouldShowOfflineModal(true));
97+
close(() => setShouldShowOfflineModal(true));
9798
return;
9899
}
99100
disconnect();
@@ -107,13 +108,13 @@ function AccountSwitcher() {
107108
.filter(({email}) => email !== currentUserPersonalDetails.login)
108109
.map(({email, role}) => {
109110
const errorFields = account?.delegatedAccess?.errorFields ?? {};
110-
const error = ErrorUtils.getLatestError(errorFields?.connect?.[email]);
111-
const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
111+
const error = getLatestError(errorFields?.connect?.[email]);
112+
const personalDetails = getPersonalDetailByEmail(email);
112113
return createBaseMenuItem(personalDetails, error, {
113114
badgeText: translate('delegate.role', {role}),
114115
onSelected: () => {
115116
if (isOffline) {
116-
Modal.close(() => setShouldShowOfflineModal(true));
117+
close(() => setShouldShowOfflineModal(true));
117118
return;
118119
}
119120
connect(email);
@@ -126,63 +127,69 @@ function AccountSwitcher() {
126127

127128
return (
128129
<>
129-
<PressableWithFeedback
130-
accessible
131-
accessibilityLabel={translate('common.profile')}
132-
onPress={() => {
133-
setShouldShowDelegatorMenu(!shouldShowDelegatorMenu);
134-
}}
135-
ref={buttonRef}
136-
interactive={canSwitchAccounts}
137-
pressDimmingValue={canSwitchAccounts ? undefined : 1}
138-
wrapperStyle={[styles.flexGrow1, styles.flex1, styles.mnw0, styles.justifyContentCenter]}
130+
<Tooltip
131+
text={translate('delegate.copilotAccess')}
132+
shiftVertical={8}
133+
shiftHorizontal={8}
134+
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM}}
135+
shouldRender={canSwitchAccounts}
139136
>
140-
<View style={[styles.flexRow, styles.gap3]}>
141-
<Avatar
142-
type={CONST.ICON_TYPE_AVATAR}
143-
size={CONST.AVATAR_SIZE.DEFAULT}
144-
avatarID={currentUserPersonalDetails?.accountID}
145-
source={currentUserPersonalDetails?.avatar}
146-
fallbackIcon={currentUserPersonalDetails.fallbackIcon}
147-
/>
148-
<View style={[styles.flex1, styles.flexShrink1, styles.flexBasis0, styles.justifyContentCenter, styles.gap1]}>
149-
<View style={[styles.flexRow, styles.gap1]}>
137+
<PressableWithFeedback
138+
accessible
139+
accessibilityLabel={translate('common.profile')}
140+
onPress={() => {
141+
setShouldShowDelegatorMenu(!shouldShowDelegatorMenu);
142+
}}
143+
ref={buttonRef}
144+
interactive={canSwitchAccounts}
145+
pressDimmingValue={canSwitchAccounts ? undefined : 1}
146+
wrapperStyle={[styles.flexGrow1, styles.flex1, styles.mnw0, styles.justifyContentCenter]}
147+
>
148+
<View style={[styles.flexRow, styles.gap3]}>
149+
<Avatar
150+
type={CONST.ICON_TYPE_AVATAR}
151+
size={CONST.AVATAR_SIZE.DEFAULT}
152+
avatarID={currentUserPersonalDetails?.accountID}
153+
source={currentUserPersonalDetails?.avatar}
154+
fallbackIcon={currentUserPersonalDetails.fallbackIcon}
155+
/>
156+
<View style={[styles.flex1, styles.flexShrink1, styles.flexBasis0, styles.justifyContentCenter, styles.gap1]}>
157+
<View style={[styles.flexRow, styles.gap1]}>
158+
<Text
159+
numberOfLines={1}
160+
style={[styles.textBold, styles.textLarge, styles.flexShrink1]}
161+
>
162+
{processedTextArray.length !== 0 ? getProcessedText(processedTextArray, styles.initialSettingsUsernameEmoji) : currentUserPersonalDetails?.displayName}
163+
</Text>
164+
{!!canSwitchAccounts && (
165+
<View style={styles.justifyContentCenter}>
166+
<Icon
167+
fill={theme.icon}
168+
src={Expensicons.CaretUpDown}
169+
height={variables.iconSizeSmall}
170+
width={variables.iconSizeSmall}
171+
/>
172+
</View>
173+
)}
174+
</View>
150175
<Text
151176
numberOfLines={1}
152-
style={[styles.textBold, styles.textLarge, styles.flexShrink1]}
177+
style={[styles.colorMuted, styles.fontSizeLabel]}
153178
>
154-
{processedTextArray.length !== 0
155-
? EmojiUtils.getProcessedText(processedTextArray, styles.initialSettingsUsernameEmoji)
156-
: currentUserPersonalDetails?.displayName}
179+
{Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')}
157180
</Text>
158-
{!!canSwitchAccounts && (
159-
<View style={styles.justifyContentCenter}>
160-
<Icon
161-
fill={theme.icon}
162-
src={Expensicons.CaretUpDown}
163-
height={variables.iconSizeSmall}
164-
width={variables.iconSizeSmall}
165-
/>
166-
</View>
181+
{!!user?.isDebugModeEnabled && (
182+
<Text
183+
style={[styles.textLabelSupporting, styles.mt1, styles.w100]}
184+
numberOfLines={1}
185+
>
186+
AccountID: {session?.accountID}
187+
</Text>
167188
)}
168189
</View>
169-
<Text
170-
numberOfLines={1}
171-
style={[styles.colorMuted, styles.fontSizeLabel]}
172-
>
173-
{Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')}
174-
</Text>
175-
{!!user?.isDebugModeEnabled && (
176-
<Text
177-
style={[styles.textLabelSupporting, styles.mt1, styles.w100]}
178-
numberOfLines={1}
179-
>
180-
AccountID: {session?.accountID}
181-
</Text>
182-
)}
183190
</View>
184-
</View>
185-
</PressableWithFeedback>
191+
</PressableWithFeedback>
192+
</Tooltip>
186193
{!!canSwitchAccounts && (
187194
<PopoverMenu
188195
isVisible={shouldShowDelegatorMenu}

‎src/languages/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5964,6 +5964,7 @@ const translations = {
59645964
notAllowedMessageStart: `As a`,
59655965
notAllowedMessageHyperLinked: ' copilot',
59665966
notAllowedMessageEnd: ({accountOwnerEmail}: AccountOwnerParams) => ` for ${accountOwnerEmail}, you don't have permission to take this action. Sorry!`,
5967+
copilotAccess: 'Copilot access',
59675968
},
59685969
debug: {
59695970
debug: 'Debug',

‎src/languages/es.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6485,6 +6485,7 @@ const translations = {
64856485
notAllowedMessageStart: `Como`,
64866486
notAllowedMessageHyperLinked: ' copiloto',
64876487
notAllowedMessageEnd: ({accountOwnerEmail}: AccountOwnerParams) => ` de ${accountOwnerEmail}, no tienes permiso para realizar esta acción. ¡Lo siento!`,
6488+
copilotAccess: 'Acceso a Copilot',
64886489
},
64896490
debug: {
64906491
debug: 'Depuración',

0 commit comments

Comments
 (0)