Skip to content

Commit 3a222d6

Browse files
chuckdrieschuckdries
authored
Merge pull request Expensify#68120 from software-mansion-labs/korytko/avatar-follow-ups-4
[Avatars] Fix demoted deploy blockers (cont.)
2 parents 68f8f82 + c225aeb commit 3a222d6

5 files changed

Lines changed: 52 additions & 21 deletions

File tree

‎src/components/OptionRow.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,20 @@ import ReportActionAvatars from './ReportActionAvatars';
2222
import SelectCircle from './SelectCircle';
2323
import Text from './Text';
2424

25+
type OptionDataWithOptionalReportID = Omit<OptionData, 'reportID'> & {reportID?: string};
26+
2527
type OptionRowProps = {
2628
/** Style for hovered state */
2729
hoverStyle?: StyleProp<ViewStyle>;
2830

2931
/** Option to allow the user to choose from can be type 'report' or 'user' */
30-
option: OptionData;
32+
option: OptionDataWithOptionalReportID;
3133

3234
/** Whether this option is currently in focus so we can modify its style */
3335
optionIsFocused?: boolean;
3436

3537
/** A function that is called when an option is selected. Selected option is passed as a param */
36-
onSelectRow?: (option: OptionData, refElement: View | HTMLDivElement | null) => void | Promise<void>;
38+
onSelectRow?: (option: OptionDataWithOptionalReportID, refElement: View | HTMLDivElement | null) => void | Promise<void>;
3739

3840
/** Whether we should show the selected state */
3941
showSelectedState?: boolean;
@@ -45,7 +47,7 @@ type OptionRowProps = {
4547
selectedStateButtonText?: string;
4648

4749
/** Callback to fire when the multiple selector (checkbox or button) is clicked */
48-
onSelectedStatePressed?: (option: OptionData) => void;
50+
onSelectedStatePressed?: (option: OptionDataWithOptionalReportID) => void;
4951

5052
/** Whether we highlight selected option */
5153
highlightSelected?: boolean;
@@ -148,12 +150,19 @@ function OptionRow({
148150
const firstIcon = option?.icons?.at(0);
149151

150152
// We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
151-
const displayNamesWithTooltips = getDisplayNamesWithTooltips((option.participantsList ?? (option.accountID ? [option] : [])).slice(0, 10), shouldUseShortFormInTooltip, localeCompare);
153+
const displayNamesWithTooltips = getDisplayNamesWithTooltips(
154+
(option.participantsList ?? (option.accountID ? [option as OptionData] : [])).slice(0, 10),
155+
shouldUseShortFormInTooltip,
156+
localeCompare,
157+
);
152158
let subscriptColor = theme.appBG;
153159
if (optionIsFocused) {
154160
subscriptColor = focusedBackgroundColor;
155161
}
156162

163+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
164+
const reportID = (option.iouReportID ?? option.reportID) || undefined;
165+
157166
return (
158167
<Hoverable>
159168
{(hovered) => (
@@ -209,10 +218,11 @@ function OptionRow({
209218
{!!option.icons?.length && !!firstIcon && (
210219
<ReportActionAvatars
211220
subscriptAvatarBorderColor={hovered && !optionIsFocused ? hoveredBackgroundColor : subscriptColor}
212-
reportID={option.iouReportID ?? option.reportID}
221+
reportID={reportID}
222+
accountIDs={!reportID && option.accountID ? [option.accountID] : []}
213223
size={CONST.AVATAR_SIZE.DEFAULT}
214224
secondaryAvatarContainerStyle={[StyleUtils.getBackgroundAndBorderStyle(hovered && !optionIsFocused ? hoveredBackgroundColor : subscriptColor)]}
215-
shouldShowTooltip={showTitleTooltip && shouldOptionShowTooltip(option)}
225+
shouldShowTooltip={showTitleTooltip && shouldOptionShowTooltip(option as OptionData)}
216226
/>
217227
)}
218228
<View style={contentContainerStyles}>

‎src/components/ReportActionAvatars/useReportActionAvatars.ts‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ function useReportActionAvatars({
6262
action = getReportAction(reportChatReport?.reportID, chatReport.parentReportActionID);
6363
}
6464

65+
const [actionChildReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${action?.childReportID}`, {canBeMissing: true});
66+
67+
const isAReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW;
68+
6569
const isReportArchived = useReportIsArchived(iouReport?.reportID);
6670

6771
const reportPreviewSenderID = useReportPreviewSenderID({
@@ -70,19 +74,26 @@ function useReportActionAvatars({
7074
chatReport,
7175
});
7276

73-
const policyID = passedPolicyID ?? (chatReport?.policyID === CONST.POLICY.ID_FAKE || !chatReport?.policyID ? (iouReport?.policyID ?? chatReport?.policyID) : chatReport?.policyID);
77+
const reportPolicyID = iouReport?.policyID ?? chatReport?.policyID;
78+
const chatReportPolicyIDExists = chatReport?.policyID === CONST.POLICY.ID_FAKE || !chatReport?.policyID;
79+
const changedPolicyID = actionChildReport?.policyID ?? iouReport?.policyID;
80+
const shouldUseChangedPolicyID = !!changedPolicyID && changedPolicyID !== chatReport?.policyID;
81+
const retrievedPolicyID = chatReportPolicyIDExists ? reportPolicyID : chatReport?.policyID;
82+
83+
const policyID = shouldUseChangedPolicyID ? changedPolicyID : (passedPolicyID ?? retrievedPolicyID);
7484
const policy = usePolicy(policyID);
7585

7686
const invoiceReceiverPolicyID = chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : undefined;
7787
const invoiceReceiverPolicy = usePolicy(invoiceReceiverPolicyID);
7888

7989
const {chatReportIDAdmins, chatReportIDAnnounce, workspaceAccountID} = policy ?? {};
80-
const [policyChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportIDAnnounce ?? chatReportIDAdmins}`, {canBeMissing: true});
90+
91+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
92+
const [policyChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportIDAnnounce || chatReportIDAdmins}`, {canBeMissing: true});
8193

8294
const delegatePersonalDetails = action?.delegateAccountID ? personalDetails?.[action?.delegateAccountID] : undefined;
8395
const actorAccountID = getReportActionActorAccountID(action, iouReport, chatReport, delegatePersonalDetails);
8496

85-
const isAReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW;
8697
const isAInvoiceReport = isInvoiceReport(iouReport ?? null);
8798

8899
const shouldUseActorAccountID = isAInvoiceReport && !isAReportPreviewAction;
@@ -267,6 +278,13 @@ function useReportActionAvatars({
267278

268279
let avatars = [primaryAvatar, secondaryAvatar];
269280

281+
const isUserWithWorkspaceAvatar =
282+
avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.SUBSCRIPT && avatars.at(0)?.type === CONST.ICON_TYPE_AVATAR && avatars.at(1)?.type === CONST.ICON_TYPE_WORKSPACE;
283+
const isWorkspaceWithUserAvatar =
284+
avatars.at(0)?.type === CONST.ICON_TYPE_WORKSPACE && avatars.at(1)?.type === CONST.ICON_TYPE_AVATAR && avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE;
285+
// eslint-disable-next-line rulesdir/no-negated-variables
286+
const wasReportPreviewMovedToDifferentPolicy = shouldUseChangedPolicyID && isAReportPreviewAction;
287+
270288
if (shouldUseInvoiceExpenseIcons) {
271289
avatars = getIconsWithDefaults(invoiceReport);
272290
} else if (shouldUseMappedAccountIDs) {
@@ -278,14 +296,13 @@ function useReportActionAvatars({
278296
if (avatars.every(({type}) => type === CONST.ICON_TYPE_WORKSPACE)) {
279297
avatarType = isAReportPreviewAction ? CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE : CONST.REPORT_ACTION_AVATARS.TYPE.SUBSCRIPT;
280298
// But if it is a report preview between workspace and another user it should never be displayed as a multiple avatar
281-
} else if (
282-
avatars.at(0)?.type === CONST.ICON_TYPE_WORKSPACE &&
283-
avatars.at(1)?.type === CONST.ICON_TYPE_AVATAR &&
284-
avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.MULTIPLE &&
285-
isAReportPreviewAction
286-
) {
299+
} else if (isWorkspaceWithUserAvatar && isAReportPreviewAction) {
287300
avatarType = CONST.REPORT_ACTION_AVATARS.TYPE.SUBSCRIPT;
288301
}
302+
} else if (isUserWithWorkspaceAvatar && wasReportPreviewMovedToDifferentPolicy) {
303+
const policyChatReportIcon = {...getWorkspaceIcon(policyChatReport, policy), id: policyID, name: policy?.name};
304+
const [firstAvatar] = avatars;
305+
avatars = [firstAvatar, policyChatReportIcon];
289306
}
290307

291308
return {

‎src/components/SelectionList/UserListItem.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ function UserListItem<TItem extends ListItem>({
6262
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
6363
const itemAccountID = Number(item.accountID || item.icons?.at(1)?.id) || 0;
6464

65+
const isThereOnlyWorkspaceIcon = item.icons?.length === 1 && item.icons?.at(0)?.type === CONST.ICON_TYPE_WORKSPACE;
66+
const shouldUseIconPolicyID = !item.reportID && !item.accountID && !item.policyID;
67+
const policyID = isThereOnlyWorkspaceIcon && shouldUseIconPolicyID ? String(item.icons?.at(0)?.id) : item.policyID;
68+
6569
return (
6670
<BaseListItem
6771
item={item}
@@ -111,7 +115,7 @@ function UserListItem<TItem extends ListItem>({
111115
</View>
112116
</PressableWithFeedback>
113117
)}
114-
{(!!reportExists || !!itemAccountID || !!item.policyID) && (
118+
{(!!reportExists || !!itemAccountID || !!policyID) && (
115119
<ReportActionAvatars
116120
subscriptAvatarBorderColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
117121
shouldShowTooltip={showTooltip}
@@ -123,7 +127,7 @@ function UserListItem<TItem extends ListItem>({
123127
reportID={reportExists ? item.reportID : undefined}
124128
/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */
125129
accountIDs={!reportExists && !!itemAccountID ? [itemAccountID] : []}
126-
policyID={!reportExists && !itemAccountID ? item.policyID : undefined}
130+
policyID={!reportExists && !!policyID ? policyID : undefined}
127131
singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
128132
fallbackDisplayName={item.text ?? item.alternateText ?? undefined}
129133
/>

‎src/libs/MoneyRequestReportUtils.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type {TransactionListItemType} from '@components/SelectionList/types';
44
import CONST from '@src/CONST';
55
import type {OriginalMessageIOU, Policy, Report, ReportAction, ReportMetadata, Transaction} from '@src/types/onyx';
66
import {convertToDisplayString} from './CurrencyUtils';
7-
import {getIOUActionForTransactionID, getOriginalMessage, isDeletedParentAction, isMoneyRequestAction} from './ReportActionsUtils';
7+
import {getIOUActionForTransactionID, getOriginalMessage, isDeletedAction, isDeletedParentAction, isMoneyRequestAction} from './ReportActionsUtils';
88
import {
99
getMoneyRequestSpendBreakdown,
1010
getNonHeldAndFullAmount,
@@ -69,15 +69,15 @@ function getReportIDForTransaction(transactionItem: TransactionListItemType) {
6969
}
7070

7171
/**
72-
* Filters all available transactions and returns the ones that belong to not removed parent action.
72+
* Filters all available transactions and returns the ones that belong to not removed action and not removed parent action.
7373
*/
7474
function getAllNonDeletedTransactions(transactions: OnyxCollection<Transaction>, reportActions: ReportAction[]) {
7575
return Object.values(transactions ?? {}).filter((transaction): transaction is Transaction => {
7676
if (!transaction) {
7777
return false;
7878
}
7979
const action = getIOUActionForTransactionID(reportActions, transaction.transactionID);
80-
return !isDeletedParentAction(action);
80+
return !isDeletedParentAction(action) && (reportActions.length === 0 || !isDeletedAction(action));
8181
});
8282
}
8383

‎src/pages/home/report/ReactionList/BaseReactionList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function BaseReactionList({hasUserReacted = false, users, isVisible = false, emo
6565
});
6666
}}
6767
option={{
68-
reportID: String(item.accountID),
68+
accountID: item.accountID,
6969
text: Str.removeSMSDomain(item.displayName ?? ''),
7070
alternateText: Str.removeSMSDomain(item.login ?? ''),
7171
participantsList: [item],

0 commit comments

Comments
 (0)