From 18d1650d1706f045b1c55c2519cb47ffb26657a8 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 4 Apr 2024 18:55:57 +0700 Subject: [PATCH 1/9] fix: Generate Workspace Avatar Color based on PolicyID instead of Workspace Name --- src/components/Avatar.tsx | 8 ++++++-- src/components/HeaderWithBackButton/index.tsx | 1 + src/components/MentionSuggestions.tsx | 1 + src/components/MultipleAvatars.tsx | 4 ++++ src/components/RoomHeaderAvatars.tsx | 2 ++ src/components/SubscriptAvatar.tsx | 2 ++ src/components/WorkspaceSwitcherButton.tsx | 2 +- src/libs/ReportUtils.ts | 4 ++-- src/pages/WorkspaceSwitcherPage.tsx | 2 +- src/pages/home/report/ReportActionItemSingle.tsx | 1 + src/pages/workspace/WorkspaceInitialPage.tsx | 1 + src/pages/workspace/WorkspaceProfilePage.tsx | 3 ++- src/pages/workspace/WorkspacesListPage.tsx | 1 + src/pages/workspace/WorkspacesListRow.tsx | 5 +++++ src/styles/utils/index.ts | 4 ++-- 15 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 2b2d0a60f6576..62d62a4a1760e 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -49,6 +49,9 @@ type AvatarProps = { /** Owner of the avatar. If user, displayName. If workspace, policy name */ name?: string; + + /** ID of the policy */ + policyID?: number | string; }; function Avatar({ @@ -62,6 +65,7 @@ function Avatar({ fallbackIconTestID = '', type = CONST.ICON_TYPE_AVATAR, name = '', + policyID, }: AvatarProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -84,7 +88,7 @@ function Avatar({ const imageStyle: StyleProp = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius]; const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined; - const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(name).fill : fill; + const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(policyID?.toString() ?? '').fill : fill; const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon'; @@ -110,7 +114,7 @@ function Avatar({ fill={imageError ? theme.offline : iconFillColor} additionalStyles={[ StyleUtils.getAvatarBorderStyle(size, type), - isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(name), + isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(policyID?.toString() ?? ''), imageError && StyleUtils.getBackgroundColorStyle(theme.fallbackIconColor), iconAdditionalStyles, ]} diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index f3293596aa46e..c20f2fdda1d22 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -124,6 +124,7 @@ function HeaderWithBackButton({ containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]} source={policyAvatar?.source} name={policyAvatar?.name} + policyID={policyAvatar?.id} type={policyAvatar?.type} /> )} diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index 23040a242807d..1ed0e64417579 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -72,6 +72,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe source={item.icons[0].source} size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER} name={item.icons[0].name} + policyID={item.icons[0].id} type={item.icons[0].type} fill={isIcon ? theme.success : undefined} fallbackIcon={item.icons[0].fallbackIcon} diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index dedaba500a9c3..14acbd62fc1d4 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -156,6 +156,7 @@ function MultipleAvatars({ size={size} fill={icons[0].fill} name={icons[0].name} + policyID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -205,6 +206,7 @@ function MultipleAvatars({ source={icon.source ?? fallbackIcon} size={size} name={icon.name} + policyID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> @@ -263,6 +265,7 @@ function MultipleAvatars({ imageStyles={[singleAvatarStyle]} name={icons[0].name} type={icons[0].type} + policyID={icons[0].id} fallbackIcon={icons[0].fallbackIcon} /> @@ -282,6 +285,7 @@ function MultipleAvatars({ size={avatarSize} imageStyles={[singleAvatarStyle]} name={icons[1].name} + policyID={icons[1].id} type={icons[1].type} fallbackIcon={icons[1].fallbackIcon} /> diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx index c23108adc0eaf..227db04b1b55c 100644 --- a/src/components/RoomHeaderAvatars.tsx +++ b/src/components/RoomHeaderAvatars.tsx @@ -52,6 +52,7 @@ function RoomHeaderAvatars({icons, reportID, isGroupChat}: RoomHeaderAvatarsProp imageStyles={styles.avatarLarge} size={CONST.AVATAR_SIZE.LARGE} name={icons[0].name} + policyID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -87,6 +88,7 @@ function RoomHeaderAvatars({icons, reportID, isGroupChat}: RoomHeaderAvatarsProp size={CONST.AVATAR_SIZE.LARGE} containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]} name={icon.name} + policyID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx index 3e0f5fb9785ad..7440821918845 100644 --- a/src/components/SubscriptAvatar.tsx +++ b/src/components/SubscriptAvatar.tsx @@ -82,6 +82,7 @@ function SubscriptAvatar({ source={mainAvatar?.source} size={size} name={mainAvatar?.name} + policyID={mainAvatar?.id} type={mainAvatar?.type} fallbackIcon={mainAvatar?.fallbackIcon} /> @@ -108,6 +109,7 @@ function SubscriptAvatar({ size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT} fill={secondaryAvatar.fill} name={secondaryAvatar.name} + policyID={secondaryAvatar.id} type={secondaryAvatar.type} fallbackIcon={secondaryAvatar.fallbackIcon} /> diff --git a/src/components/WorkspaceSwitcherButton.tsx b/src/components/WorkspaceSwitcherButton.tsx index a94f54682c852..6c0d5c2797e35 100644 --- a/src/components/WorkspaceSwitcherButton.tsx +++ b/src/components/WorkspaceSwitcherButton.tsx @@ -31,7 +31,7 @@ function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) { const avatar = policy?.avatar ? policy.avatar : getDefaultWorkspaceAvatar(policy?.name); return { source: avatar, - name: policy?.name ?? '', + name: policy?.id ?? '', type: CONST.ICON_TYPE_WORKSPACE, }; }, [policy]); diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 98577e73766aa..17719331950b3 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1653,7 +1653,7 @@ function getWorkspaceIcon(report: OnyxEntry, policy: OnyxEntry = source: policyExpenseChatAvatarSource ?? '', type: CONST.ICON_TYPE_WORKSPACE, name: workspaceName, - id: -1, + id: report?.policyID, }; return workspaceIcon; } @@ -1800,7 +1800,7 @@ function getIcons( source: policyExpenseChatAvatarSource, type: CONST.ICON_TYPE_WORKSPACE, name: domainName ?? '', - id: -1, + id: report?.policyID, }; return [domainIcon]; } diff --git a/src/pages/WorkspaceSwitcherPage.tsx b/src/pages/WorkspaceSwitcherPage.tsx index 6f077f7644745..28b8f063034a8 100644 --- a/src/pages/WorkspaceSwitcherPage.tsx +++ b/src/pages/WorkspaceSwitcherPage.tsx @@ -134,7 +134,7 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { { source: policy?.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy?.name), fallbackIcon: Expensicons.FallbackWorkspaceAvatar, - name: policy?.name, + name: policy?.id, type: CONST.ICON_TYPE_WORKSPACE, }, ], diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 696cd7a7d850c..5c6edd5ef7a49 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -199,6 +199,7 @@ function ReportActionItemSingle({ source={icon.source} type={icon.type} name={icon.name} + policyID={icon.id} fallbackIcon={fallbackIcon} /> diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 512b637f7f46f..88f6555e99ac9 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -242,6 +242,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r source: avatar, name: policy?.name ?? '', type: CONST.ICON_TYPE_WORKSPACE, + id: policy.id ?? '', }; }, [policy]); diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index 662335d0b358c..06b1e95b7bee0 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -83,10 +83,11 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi fallbackIcon={Expensicons.FallbackWorkspaceAvatar} size={CONST.AVATAR_SIZE.XLARGE} name={policyName} + policyID={policy?.id ?? ''} type={CONST.ICON_TYPE_WORKSPACE} /> ), - [policy?.avatar, policyName, styles.alignSelfCenter, styles.avatarXLarge], + [policy?.avatar, policy?.id, policyName, styles.alignSelfCenter, styles.avatarXLarge], ); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 549d307b2a2f2..9e5f24d8882a2 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -200,6 +200,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r {({hovered}) => ( Date: Thu, 4 Apr 2024 19:32:18 +0700 Subject: [PATCH 2/9] change name props Avatar --- src/components/Avatar.tsx | 10 +++++----- src/components/HeaderWithBackButton/index.tsx | 2 +- src/components/MentionSuggestions.tsx | 2 +- src/components/MultipleAvatars.tsx | 8 ++++---- src/components/RoomHeaderAvatars.tsx | 4 ++-- src/components/SubscriptAvatar.tsx | 4 ++-- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- src/pages/workspace/WorkspaceProfilePage.tsx | 2 +- src/pages/workspace/WorkspacesListRow.tsx | 2 +- 9 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 62d62a4a1760e..af492376a1910 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -50,8 +50,8 @@ type AvatarProps = { /** Owner of the avatar. If user, displayName. If workspace, policy name */ name?: string; - /** ID of the policy */ - policyID?: number | string; + /** ID of the Icon */ + iconID?: number | string; }; function Avatar({ @@ -65,7 +65,7 @@ function Avatar({ fallbackIconTestID = '', type = CONST.ICON_TYPE_AVATAR, name = '', - policyID, + iconID, }: AvatarProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -88,7 +88,7 @@ function Avatar({ const imageStyle: StyleProp = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius]; const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined; - const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(policyID?.toString() ?? '').fill : fill; + const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(iconID?.toString() ?? '').fill : fill; const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon'; @@ -114,7 +114,7 @@ function Avatar({ fill={imageError ? theme.offline : iconFillColor} additionalStyles={[ StyleUtils.getAvatarBorderStyle(size, type), - isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(policyID?.toString() ?? ''), + isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(iconID?.toString() ?? ''), imageError && StyleUtils.getBackgroundColorStyle(theme.fallbackIconColor), iconAdditionalStyles, ]} diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index c20f2fdda1d22..17b79a19bde32 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -124,7 +124,7 @@ function HeaderWithBackButton({ containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]} source={policyAvatar?.source} name={policyAvatar?.name} - policyID={policyAvatar?.id} + iconID={policyAvatar?.id} type={policyAvatar?.type} /> )} diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index 1ed0e64417579..009003b2367c2 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -72,7 +72,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe source={item.icons[0].source} size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER} name={item.icons[0].name} - policyID={item.icons[0].id} + iconID={item.icons[0].id} type={item.icons[0].type} fill={isIcon ? theme.success : undefined} fallbackIcon={item.icons[0].fallbackIcon} diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index 14acbd62fc1d4..cbceace6df166 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -156,7 +156,7 @@ function MultipleAvatars({ size={size} fill={icons[0].fill} name={icons[0].name} - policyID={icons[0].id} + iconID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -206,7 +206,7 @@ function MultipleAvatars({ source={icon.source ?? fallbackIcon} size={size} name={icon.name} - policyID={icon.id} + iconID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> @@ -265,7 +265,7 @@ function MultipleAvatars({ imageStyles={[singleAvatarStyle]} name={icons[0].name} type={icons[0].type} - policyID={icons[0].id} + iconID={icons[0].id} fallbackIcon={icons[0].fallbackIcon} /> @@ -285,7 +285,7 @@ function MultipleAvatars({ size={avatarSize} imageStyles={[singleAvatarStyle]} name={icons[1].name} - policyID={icons[1].id} + iconID={icons[1].id} type={icons[1].type} fallbackIcon={icons[1].fallbackIcon} /> diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx index 227db04b1b55c..5738f58af6ffe 100644 --- a/src/components/RoomHeaderAvatars.tsx +++ b/src/components/RoomHeaderAvatars.tsx @@ -52,7 +52,7 @@ function RoomHeaderAvatars({icons, reportID, isGroupChat}: RoomHeaderAvatarsProp imageStyles={styles.avatarLarge} size={CONST.AVATAR_SIZE.LARGE} name={icons[0].name} - policyID={icons[0].id} + iconID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -88,7 +88,7 @@ function RoomHeaderAvatars({icons, reportID, isGroupChat}: RoomHeaderAvatarsProp size={CONST.AVATAR_SIZE.LARGE} containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]} name={icon.name} - policyID={icon.id} + iconID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx index 7440821918845..d7ddb9ddf9b0d 100644 --- a/src/components/SubscriptAvatar.tsx +++ b/src/components/SubscriptAvatar.tsx @@ -82,7 +82,7 @@ function SubscriptAvatar({ source={mainAvatar?.source} size={size} name={mainAvatar?.name} - policyID={mainAvatar?.id} + iconID={mainAvatar?.id} type={mainAvatar?.type} fallbackIcon={mainAvatar?.fallbackIcon} /> @@ -109,7 +109,7 @@ function SubscriptAvatar({ size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT} fill={secondaryAvatar.fill} name={secondaryAvatar.name} - policyID={secondaryAvatar.id} + iconID={secondaryAvatar.id} type={secondaryAvatar.type} fallbackIcon={secondaryAvatar.fallbackIcon} /> diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 5c6edd5ef7a49..ecfa4f603aa7e 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -199,7 +199,7 @@ function ReportActionItemSingle({ source={icon.source} type={icon.type} name={icon.name} - policyID={icon.id} + iconID={icon.id} fallbackIcon={fallbackIcon} /> diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index 06b1e95b7bee0..c328bea9bb960 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -83,7 +83,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi fallbackIcon={Expensicons.FallbackWorkspaceAvatar} size={CONST.AVATAR_SIZE.XLARGE} name={policyName} - policyID={policy?.id ?? ''} + iconID={policy?.id ?? ''} type={CONST.ICON_TYPE_WORKSPACE} /> ), diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index d3a3ce3f8399d..dfe91b7d1f8ae 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -148,7 +148,7 @@ function WorkspacesListRow({ source={workspaceIcon} fallbackIcon={fallbackWorkspaceIcon} name={title} - policyID={policyID} + iconID={policyID} type={CONST.ICON_TYPE_WORKSPACE} /> Date: Mon, 15 Apr 2024 23:10:57 +0700 Subject: [PATCH 3/9] fix: workspace icon color in workspace switcher --- .../UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx | 1 + src/components/UserDetailsTooltip/types.tsx | 3 +++ src/pages/WorkspaceSwitcherPage.tsx | 3 ++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index 592cec3beca5a..fa301167a230b 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx @@ -59,6 +59,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA type={icon?.type ?? CONST.ICON_TYPE_AVATAR} name={icon?.name ?? userLogin} fallbackIcon={icon?.fallbackIcon} + iconID={icon?.id} /> {title} diff --git a/src/components/UserDetailsTooltip/types.tsx b/src/components/UserDetailsTooltip/types.tsx index b362c44877a95..7a072d4aa8a9e 100644 --- a/src/components/UserDetailsTooltip/types.tsx +++ b/src/components/UserDetailsTooltip/types.tsx @@ -30,6 +30,9 @@ type Icon = { /** Owner of the avatar. If user, displayName. If workspace, policy name */ name?: string; + + /** ID of the Icon */ + id?: string; }; type UserDetailsTooltipProps = ChildrenProps & { diff --git a/src/pages/WorkspaceSwitcherPage.tsx b/src/pages/WorkspaceSwitcherPage.tsx index 2c947af3c2d8b..2bd1ebec2a3c5 100644 --- a/src/pages/WorkspaceSwitcherPage.tsx +++ b/src/pages/WorkspaceSwitcherPage.tsx @@ -131,8 +131,9 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { { source: policy?.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy?.name), fallbackIcon: Expensicons.FallbackWorkspaceAvatar, - name: policy?.id, + name: policy?.name, type: CONST.ICON_TYPE_WORKSPACE, + id: policy?.id, }, ], boldStyle: hasUnreadData(policy?.id), From c4ec0f7db21d5747caaa622305654bf5148d906f Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 16 Apr 2024 10:20:20 +0700 Subject: [PATCH 4/9] fix typescript --- src/components/UserDetailsTooltip/types.tsx | 23 ++----------------- .../home/report/ReportActionItemFragment.tsx | 3 +-- src/types/onyx/OnyxCommon.ts | 4 ++-- 3 files changed, 5 insertions(+), 25 deletions(-) diff --git a/src/components/UserDetailsTooltip/types.tsx b/src/components/UserDetailsTooltip/types.tsx index 7a072d4aa8a9e..07c9310810be1 100644 --- a/src/components/UserDetailsTooltip/types.tsx +++ b/src/components/UserDetailsTooltip/types.tsx @@ -1,5 +1,5 @@ import type {AvatarSource} from '@libs/UserUtils'; -import type {AvatarType} from '@src/types/onyx/OnyxCommon'; +import type {AvatarType, Icon as IconType} from '@src/types/onyx/OnyxCommon'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; type FallbackUserDetails = { @@ -16,25 +16,6 @@ type FallbackUserDetails = { type?: AvatarType; }; -type Icon = { - /** Source for the avatar. Can be a URL or an icon. */ - source?: AvatarSource; - - /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. - * If the avatar is type === workspace, this fallback icon will be ignored and decided based on the name prop. - */ - fallbackIcon?: AvatarSource; - - /** Denotes whether it is an avatar or a workspace avatar */ - type?: AvatarType; - - /** Owner of the avatar. If user, displayName. If workspace, policy name */ - name?: string; - - /** ID of the Icon */ - id?: string; -}; - type UserDetailsTooltipProps = ChildrenProps & { /** User's Account ID */ accountID: number; @@ -43,7 +24,7 @@ type UserDetailsTooltipProps = ChildrenProps & { fallbackUserDetails?: FallbackUserDetails; /** Optionally, pass in the icon instead of calculating it. If defined, will take precedence. */ - icon?: Icon; + icon?: IconType; /** The accountID of the copilot who took this action on behalf of the user */ delegateAccountID?: number; diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index 07fca587ea24d..3091d93858c41 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -1,6 +1,5 @@ import React, {memo} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; -import type {AvatarProps} from '@components/Avatar'; import RenderHTML from '@components/RenderHTML'; import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; @@ -39,7 +38,7 @@ type ReportActionItemFragmentProps = { delegateAccountID?: number; /** icon */ - actorIcon?: AvatarProps; + actorIcon?: OnyxCommon.Icon; /** Whether the comment is a thread parent message/the first message in a thread */ isThreadParentMessage?: boolean; diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts index 8b96a89a2a1b9..c4a3afc3e0b93 100644 --- a/src/types/onyx/OnyxCommon.ts +++ b/src/types/onyx/OnyxCommon.ts @@ -25,10 +25,10 @@ type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPA type Icon = { /** Avatar source to display */ - source: AvatarSource; + source?: AvatarSource; /** Denotes whether it is an avatar or a workspace avatar */ - type: AvatarType; + type?: AvatarType; /** Owner of the avatar. If user, displayName. If workspace, policy name */ name?: string; From 1044bad394543fde51d2e89b6f935444b5fd3779 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 17 Apr 2024 11:49:42 +0700 Subject: [PATCH 5/9] rename props Avatar --- src/components/Avatar.tsx | 6 +++--- src/components/HeaderWithBackButton/index.tsx | 2 +- src/components/MentionSuggestions.tsx | 2 +- src/components/MultipleAvatars.tsx | 8 ++++---- src/components/RoomHeaderAvatars.tsx | 4 ++-- src/components/SubscriptAvatar.tsx | 4 ++-- .../UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx | 2 +- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- src/pages/workspace/WorkspaceProfilePage.tsx | 2 +- src/pages/workspace/WorkspacesListRow.tsx | 2 +- 10 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index dfcf2cc675b90..09d22132b44e2 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -51,7 +51,7 @@ type AvatarProps = { name?: string; /** ID of the Icon */ - iconID?: number | string; + accountID?: number | string; }; function Avatar({ @@ -65,7 +65,7 @@ function Avatar({ fallbackIconTestID = '', type = CONST.ICON_TYPE_AVATAR, name = '', - iconID, + accountID, }: AvatarProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -92,7 +92,7 @@ function Avatar({ let iconColors; if (isWorkspace) { - iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(iconID?.toString() ?? ''); + iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(accountID?.toString() ?? ''); } else if (useFallBackAvatar) { iconColors = StyleUtils.getBackgroundColorAndFill(theme.border, theme.icon); } else { diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 6e649955880a3..29d010d9c8034 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -182,7 +182,7 @@ function HeaderWithBackButton({ containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]} source={policyAvatar?.source} name={policyAvatar?.name} - iconID={policyAvatar?.id} + accountID={policyAvatar?.id} type={policyAvatar?.type} /> )} diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index e69484eacaddb..b11ae4f5ecd8b 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -83,7 +83,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe source={item.icons[0].source} size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER} name={item.icons[0].name} - iconID={item.icons[0].id} + accountID={item.icons[0].id} type={item.icons[0].type} fill={isIcon ? theme.success : undefined} fallbackIcon={item.icons[0].fallbackIcon} diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index cbceace6df166..d5fcf66071799 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -156,7 +156,7 @@ function MultipleAvatars({ size={size} fill={icons[0].fill} name={icons[0].name} - iconID={icons[0].id} + accountID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -206,7 +206,7 @@ function MultipleAvatars({ source={icon.source ?? fallbackIcon} size={size} name={icon.name} - iconID={icon.id} + accountID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> @@ -265,7 +265,7 @@ function MultipleAvatars({ imageStyles={[singleAvatarStyle]} name={icons[0].name} type={icons[0].type} - iconID={icons[0].id} + accountID={icons[0].id} fallbackIcon={icons[0].fallbackIcon} /> @@ -285,7 +285,7 @@ function MultipleAvatars({ size={avatarSize} imageStyles={[singleAvatarStyle]} name={icons[1].name} - iconID={icons[1].id} + accountID={icons[1].id} type={icons[1].type} fallbackIcon={icons[1].fallbackIcon} /> diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx index 341398e44b063..bdb4a0ac78ab8 100644 --- a/src/components/RoomHeaderAvatars.tsx +++ b/src/components/RoomHeaderAvatars.tsx @@ -47,7 +47,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) { imageStyles={styles.avatarLarge} size={CONST.AVATAR_SIZE.LARGE} name={icons[0].name} - iconID={icons[0].id} + accountID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -83,7 +83,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) { size={CONST.AVATAR_SIZE.LARGE} containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]} name={icon.name} - iconID={icon.id} + accountID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx index d7ddb9ddf9b0d..cc36657826f65 100644 --- a/src/components/SubscriptAvatar.tsx +++ b/src/components/SubscriptAvatar.tsx @@ -82,7 +82,7 @@ function SubscriptAvatar({ source={mainAvatar?.source} size={size} name={mainAvatar?.name} - iconID={mainAvatar?.id} + accountID={mainAvatar?.id} type={mainAvatar?.type} fallbackIcon={mainAvatar?.fallbackIcon} /> @@ -109,7 +109,7 @@ function SubscriptAvatar({ size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT} fill={secondaryAvatar.fill} name={secondaryAvatar.name} - iconID={secondaryAvatar.id} + accountID={secondaryAvatar.id} type={secondaryAvatar.type} fallbackIcon={secondaryAvatar.fallbackIcon} /> diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index fa301167a230b..a530bcfddc465 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx @@ -59,7 +59,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA type={icon?.type ?? CONST.ICON_TYPE_AVATAR} name={icon?.name ?? userLogin} fallbackIcon={icon?.fallbackIcon} - iconID={icon?.id} + accountID={icon?.id} /> {title} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 59c5b0e240ad3..ce8d116a0b2de 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -200,7 +200,7 @@ function ReportActionItemSingle({ source={icon.source} type={icon.type} name={icon.name} - iconID={icon.id} + accountID={icon.id} fallbackIcon={fallbackIcon} /> diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index c328bea9bb960..d872cb0275f13 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -83,7 +83,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi fallbackIcon={Expensicons.FallbackWorkspaceAvatar} size={CONST.AVATAR_SIZE.XLARGE} name={policyName} - iconID={policy?.id ?? ''} + accountID={policy?.id ?? ''} type={CONST.ICON_TYPE_WORKSPACE} /> ), diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index 21c14ff8cda42..c9473914eaae1 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -151,7 +151,7 @@ function WorkspacesListRow({ source={workspaceIcon} fallbackIcon={fallbackWorkspaceIcon} name={title} - iconID={policyID} + accountID={policyID} type={CONST.ICON_TYPE_WORKSPACE} /> Date: Fri, 19 Apr 2024 22:26:59 +0700 Subject: [PATCH 6/9] Fix workspace avatar in workspace switcher --- src/components/WorkspaceSwitcherButton.tsx | 7 ++++--- src/pages/WorkspaceSwitcherPage/index.tsx | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/WorkspaceSwitcherButton.tsx b/src/components/WorkspaceSwitcherButton.tsx index 0e2465b09995b..118fcd0f10a93 100644 --- a/src/components/WorkspaceSwitcherButton.tsx +++ b/src/components/WorkspaceSwitcherButton.tsx @@ -26,7 +26,7 @@ function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) { const pressableRef = useRef(null); - const {source, name, type} = useMemo(() => { + const {source, name, type, id} = useMemo(() => { if (!policy) { return {source: Expensicons.ExpensifyAppIcon, name: CONST.WORKSPACE_SWITCHER.NAME, type: CONST.ICON_TYPE_AVATAR}; } @@ -34,8 +34,9 @@ function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) { const avatar = policy?.avatar ? policy.avatar : getDefaultWorkspaceAvatar(policy?.name); return { source: avatar, - name: policy?.id ?? '', + name: policy?.name ?? '', type: CONST.ICON_TYPE_WORKSPACE, + id: policy?.id ?? '', }; }, [policy]); @@ -55,7 +56,7 @@ function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) { > {({hovered}) => ( Date: Thu, 25 Apr 2024 01:48:56 +0700 Subject: [PATCH 7/9] fix lint --- src/components/Avatar.tsx | 2 +- src/components/MultipleAvatars.tsx | 2 -- src/pages/home/report/ReportActionItemSingle.tsx | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 5cccb0408f7d9..ba36a172fb02a 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -52,7 +52,7 @@ type AvatarProps = { name?: string; /** Optional account id if it's user avatar or policy id if it's workspace avatar */ - accountID?: number; + accountID?: number | string; }; function Avatar({ diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index 9916eea7fe228..d5fcf66071799 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -159,7 +159,6 @@ function MultipleAvatars({ accountID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} - accountID={icons[0].id} /> @@ -210,7 +209,6 @@ function MultipleAvatars({ accountID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} - accountID={icon.id} /> diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 6293c1e69a945..707e08ef88d80 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -206,7 +206,6 @@ function ReportActionItemSingle({ name={icon.name} accountID={icon.id} fallbackIcon={fallbackIcon} - accountID={icon.id} /> From 0ea1fb2a7d091fbe300a37606fef7569808b1c06 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 25 Apr 2024 01:53:20 +0700 Subject: [PATCH 8/9] fix typescript check --- src/types/onyx/OnyxCommon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts index de2a889d27d74..c4a3afc3e0b93 100644 --- a/src/types/onyx/OnyxCommon.ts +++ b/src/types/onyx/OnyxCommon.ts @@ -34,7 +34,7 @@ type Icon = { name?: string; /** Avatar id */ - id?: number; + id?: number | string; /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon?: AvatarSource; From 59485006aaa88ca6e8b6b4e351fb31cad16f796c Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 25 Apr 2024 01:59:29 +0700 Subject: [PATCH 9/9] fix ts check --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index ba36a172fb02a..003196e873e27 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -86,7 +86,7 @@ function Avatar({ const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined; // We pass the color styles down to the SVG for the workspace and fallback avatar. - const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, accountID); + const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(accountID)); const useFallBackAvatar = imageError || !source || source === Expensicons.FallbackAvatar; const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';