fix(avatars): Add type to Fetch avatar (#3560)

* fix(avatars): Add type for fetchAvatarUrl calls in USM * fix(avatars): Add type for fetchAvatarUrl calls in USM * fix(avatars): Add type for fetchAvatarUrl calls in USM * fix(avatars): Add type for fetchAvatarUrl calls in USM * fix(avatars): Add type for fetchAvatarUrl calls in USM * fix(avatars): Add type for fetchAvatarUrl calls in USM --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · May 30, 2024 · 14a194f · 14a194f
1 parent f07d616
commit 14a194f
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 6 deletions.
diff --git a/src/components/contact-datalist-item/ContactDatalistItem.tsx b/src/components/contact-datalist-item/ContactDatalistItem.tsx
@@ -15,6 +15,7 @@ export interface ContactDatalistItemProps {
     name: string | null | undefined;
     showAvatar?: boolean;
     subtitle?: React.ReactNode;
+    type?: string | null | undefined;
 }
 
 interface ContactDatalistItemState {
@@ -48,11 +49,12 @@ class ContactDatalistItem extends React.PureComponent<ContactDatalistItemProps,
      * @return {void}
      */
     getAvatarUrl() {
-        const { getContactAvatarUrl, id } = this.props;
+        const { getContactAvatarUrl, id, type } = this.props;
         Promise.resolve(
             getContactAvatarUrl && id
                 ? getContactAvatarUrl({
                       id,
+                      type,
                   })
                 : undefined,
         )

diff --git a/src/components/contact-datalist-item/__tests__/ContactDatalistItem.test.tsx b/src/components/contact-datalist-item/__tests__/ContactDatalistItem.test.tsx
@@ -79,5 +79,34 @@ describe('components/contact-datalist-item/ContactDatalistItem', () => {
             expect(wrapper.find(Avatar).length).toBe(1);
             expect(wrapper.find(Avatar).props().avatarUrl).toBeUndefined();
         });
+
+        test.each([['user'], [undefined], [null]])('should have avatar URL when the type prop is %s', type => {
+            const contactID = '123';
+            const getContactAvatarUrlMock = jest
+                .fn()
+                .mockImplementation(() => Promise.resolve(`/test?id=${contactID}`));
+            const wrapper = shallow(
+                <ContactDatalistItem
+                    name="name"
+                    id={contactID}
+                    type={type}
+                    showAvatar
+                    getContactAvatarUrl={getContactAvatarUrlMock}
+                />,
+            );
+            expect(wrapper.state('avatarUrl')).toBe(undefined);
+            const instance = wrapper.instance();
+
+            if (instance.componentDidMount) {
+                instance.componentDidMount();
+            }
+
+            setImmediate(() => {
+                wrapper.update();
+                expect(wrapper.find('LabelPillIcon').length).toBe(2);
+                expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(1);
+                expect(getContactAvatarUrlMock).toHaveBeenCalledWith({ id: contactID, type });
+            });
+        });
     });
 });
diff --git a/src/components/pill-selector-dropdown/PillSelector.js b/src/components/pill-selector-dropdown/PillSelector.js
@@ -258,6 +258,7 @@ class PillSelectorBase extends React.Component<Props, State> {
                                       id={option.id}
                                       hasWarning={option.hasWarning}
                                       isExternal={option.isExternalUser}
+                                      type={option.type}
                                   />
                               );
                           })

diff --git a/src/components/pill-selector-dropdown/RoundPill.js b/src/components/pill-selector-dropdown/RoundPill.js
@@ -22,6 +22,7 @@ type Props = {
     onRemove: () => any,
     showAvatar?: boolean,
     text: string,
+    type?: string | null,
 };
 
 type State = {
@@ -82,8 +83,8 @@ class RoundPill extends React.PureComponent<Props, State> {
      * @return {void}
      */
     getAvatarUrl() {
-        const { getPillImageUrl, id } = this.props;
-        Promise.resolve(getPillImageUrl && id ? getPillImageUrl({ id }) : undefined)
+        const { getPillImageUrl, id, type } = this.props;
+        Promise.resolve(getPillImageUrl && id ? getPillImageUrl({ id, type }) : undefined)
             .then(this.getAvatarUrlHandler)
             .catch(() => {
                 // noop

diff --git a/src/components/pill-selector-dropdown/__tests__/RoundPill.test.js b/src/components/pill-selector-dropdown/__tests__/RoundPill.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import RoundPill from '../RoundPill';
 
 describe('components/RoundPill-selector-dropdown/RoundPill', () => {
@@ -113,4 +112,23 @@ describe('components/RoundPill-selector-dropdown/RoundPill', () => {
         expect(wrapper.find('LabelPillIcon').length).toBe(2);
         expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(0);
     });
+
+    test.each([['user'], [undefined], [null]])('should have avatar URL when the type prop is %s', type => {
+        const contactID = '123';
+        const getPillImageUrlMock = jest.fn().mockImplementation(() => Promise.resolve(`/test?id=${contactID}`));
+        const wrapper = shallow(
+            <RoundPill name="name" id={contactID} type={type} showAvatar getPillImageUrl={getPillImageUrlMock} />,
+        );
+        expect(wrapper.state('avatarUrl')).toBe(undefined);
+        const instance = wrapper.instance();
+
+        instance.componentDidMount();
+
+        setImmediate(() => {
+            wrapper.update();
+            expect(wrapper.find('LabelPillIcon').length).toBe(2);
+            expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(1);
+            expect(getPillImageUrlMock).toHaveBeenCalledWith({ id: contactID, type });
+        });
+    });
 });
diff --git a/src/components/pill-selector-dropdown/flowTypes.js b/src/components/pill-selector-dropdown/flowTypes.js
@@ -19,6 +19,7 @@ export type RoundOption = {
     hasWarning: boolean,
     id?: number | string,
     isExternalUser: boolean,
+    type?: string,
 } & Option;
 
 export type SelectedRoundOptions = Array<RoundOption> | List<RoundOption>;

diff --git a/src/features/unified-share-modal/ContactsField.js b/src/features/unified-share-modal/ContactsField.js
@@ -215,11 +215,12 @@ class ContactsField extends React.Component<Props, State> {
                 validateForError={validateForError}
                 validator={validator}
             >
-                {contacts.map(({ email, isExternalUser, text = null, id }) => (
+                {contacts.map(({ email, isExternalUser, text = null, id, type }) => (
                     <ContactDatalistItem
                         getContactAvatarUrl={getContactAvatarUrl}
                         key={id}
                         id={id}
+                        type={type}
                         isExternal={isExternalUser}
                         name={text}
                         subtitle={email || groupLabel}

diff --git a/src/features/unified-share-modal/__tests__/__snapshots__/ContactsField.test.js.snap b/src/features/unified-share-modal/__tests__/__snapshots__/ContactsField.test.js.snap
@@ -155,6 +155,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="W User"
+    type="user"
   />
   <ContactDatalistItem
     id="12345"
@@ -164,6 +165,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="X User"
+    type="group"
   />
   <ContactDatalistItem
     id="23456"
@@ -173,6 +175,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="Y User"
+    type="user"
   />
   <ContactDatalistItem
     id="34567"
@@ -182,6 +185,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="Z User"
+    type="user"
   />
   <ContactDatalistItem
     id="12"
@@ -191,6 +195,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="a b"
+    type="user"
   />
   <ContactDatalistItem
     id="13"
@@ -200,6 +205,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="a b"
+    type="user"
   />
   <ContactDatalistItem
     id="14"
@@ -209,6 +215,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="a c"
+    type="user"
   />
   <ContactDatalistItem
     id="14"
@@ -218,6 +225,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="a d"
+    type="user"
   />
   <ContactDatalistItem
     id="14"
@@ -227,6 +235,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="[email protected]"
     title="a e"
+    type="user"
   />
 </PillSelectorDropdown>
 `;

diff --git a/src/features/unified-share-modal/types.ts b/src/features/unified-share-modal/types.ts
@@ -4,6 +4,6 @@ export interface ContactType {
     isExternalUser?: boolean;
     name?: string;
     text?: string;
-    type?: string;
+    type?: string | null | undefined;
     value?: string;
 }