Fix Search Workspace Avatars

Author: JakubKorytko

src/components/ReportActionAvatars/index.tsx

@@ -13,12 +13,15 @@ import useReportActionAvatars from './useReportActionAvatars';
 type ReportActionAvatarsProps = {
     horizontalStacking?: HorizontalStacking | boolean;
 
-    /** IOU Report ID for single avatar */
+    /** Report ID for the report action avatars */
     reportID?: string;
 
-    /** IOU Report ID for single avatar */
+    /** Action for the report action avatars */
     action?: OnyxEntry<ReportAction>;
 
+    /** Policy ID for the workspace avatar */
+    policyID?: string;
+
     /** Single avatar container styles */
     singleAvatarContainerStyle?: ViewStyle[];
 
@@ -53,6 +56,7 @@ type ReportActionAvatarsProps = {
 /**
  * The component that renders proper user avatars based on either:
  *
+ * - policyID - this can be passed if we have no other option, and we want to display workspace avatar, it makes component ignore the props below
  * - accountIDs - if this is passed, it is prioritized and render even if report or action has different avatars attached, useful for option items, menu items etc.
  * - action - this is useful when we want to display avatars of chat threads, messages, report/trip previews etc.
  * - reportID - this can be passed without above props, when we want to display chat report avatars, DM chat avatars etc.
@@ -62,6 +66,7 @@ function ReportActionAvatars({
     reportID: potentialReportID,
     action,
     accountIDs: passedAccountIDs = [],
+    policyID,
     size = CONST.AVATAR_SIZE.DEFAULT,
     shouldShowTooltip = true,
     horizontalStacking,
@@ -96,6 +101,7 @@ function ReportActionAvatars({
         shouldStackHorizontally,
         shouldUseCardFeed: !!subscriptCardFeed,
         accountIDs,
+        policyID,
     });
 
     let avatarType: ValueOf<typeof CONST.REPORT_ACTION_AVATARS.TYPE> = notPreciseAvatarType;

src/components/ReportActionAvatars/useReportActionAvatars.ts

@@ -8,6 +8,7 @@ import {
     getDisplayNameForParticipant,
     getIcons,
     getReportActionActorAccountID,
+    getWorkspaceIcon,
     isChatThread,
     isInvoiceReport,
     isPolicyExpenseChat,
@@ -26,12 +27,14 @@ function useReportActionAvatars({
     shouldStackHorizontally = false,
     shouldUseCardFeed = false,
     accountIDs = [],
+    policyID: passedPolicyID,
 }: {
     report: OnyxEntry<Report>;
     action: OnyxEntry<ReportAction>;
     shouldStackHorizontally?: boolean;
     shouldUseCardFeed?: boolean;
     accountIDs?: number[];
+    policyID?: string;
 }) {
     /* Get avatar type */
 
@@ -57,9 +60,33 @@ function useReportActionAvatars({
         chatReport,
     });
 
-    const policyID = chatReport?.policyID === CONST.POLICY.ID_FAKE || !chatReport?.policyID ? (iouReport?.policyID ?? chatReport?.policyID) : chatReport?.policyID;
+    const policyID = passedPolicyID ?? (chatReport?.policyID === CONST.POLICY.ID_FAKE || !chatReport?.policyID ? (iouReport?.policyID ?? chatReport?.policyID) : chatReport?.policyID);
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];
 
+    const {chatReportIDAdmins, chatReportIDAnnounce, workspaceAccountID} = policy ?? {};
+    const [policyChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportIDAnnounce ?? chatReportIDAdmins}`, {canBeMissing: true});
+
+    if (passedPolicyID) {
+        const policyChatReportAvatar = {...getWorkspaceIcon(policyChatReport, policy), id: policyID, name: policy?.name};
+
+        return {
+            avatars: [policyChatReportAvatar],
+            avatarType: CONST.REPORT_ACTION_AVATARS.TYPE.SINGLE,
+            details: {
+                ...(personalDetails?.[workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID] ?? {}),
+                shouldDisplayAllActors: false,
+                isWorkspaceActor: false,
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                actorHint: String(policyID).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''),
+                accountID: workspaceAccountID,
+                delegateAccountID: undefined,
+            },
+            source: {
+                policyChatReport,
+            },
+        };
+    }
+
     const isATripRoom = isTripRoom(chatReport);
     const isWorkspaceWithoutChatReportProp = !chatReport && policy?.type !== CONST.POLICY.TYPE.PERSONAL;
     const isAWorkspaceChat = isPolicyExpenseChat(chatReport) || isWorkspaceWithoutChatReportProp;

src/components/SelectionList/UserListItem.tsx

@@ -99,7 +99,7 @@ function UserListItem<TItem extends ListItem>({
                             </View>
                         </PressableWithFeedback>
                     )}
-                    {!!item.icons && (
+                    {(!!item.reportID || !!item.accountID || !!item.policyID) && (
                         <ReportActionAvatars
                             subscriptAvatarBorderColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
                             shouldShowTooltip={showTooltip}
@@ -110,6 +110,7 @@ function UserListItem<TItem extends ListItem>({
                             ]}
                             reportID={item.reportID}
                             accountIDs={[Number(item.accountID)]}
+                            policyID={!item.reportID && !item.accountID ? item.policyID : undefined}
                             singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
                         />
                     )}

tests/ui/ReportActionAvatarsTest.tsx

@@ -442,5 +442,10 @@ describe('ReportActionAvatars', () => {
             const retrievedData = await retrieveDataFromAvatarView({reportID: iouDMSingleExpenseReport.reportID});
             isSingleAvatarRendered(retrievedData);
         });
+
+        it('renders workspace avatar if policyID is passed as a prop', async () => {
+            const retrievedData = await retrieveDataFromAvatarView({policyID: policy.id});
+            isSingleAvatarRendered({...retrievedData, userAvatar: getDefaultWorkspaceAvatar().name});
+        });
     });
 });