feat(unified-share-modal): add custom avatars click handler (#3688)

Author: tnastula

src/features/unified-share-modal/UnifiedShareForm.js

@@ -150,13 +150,8 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
 
     onToggleSharedLink = (event: SyntheticInputEvent<HTMLInputElement>) => {
         const { target } = event;
-        const {
-            handleFtuxCloseClick,
-            onAddLink,
-            openConfirmModal,
-            shouldRenderFTUXTooltip,
-            trackingProps,
-        } = this.props;
+        const { handleFtuxCloseClick, onAddLink, openConfirmModal, shouldRenderFTUXTooltip, trackingProps } =
+            this.props;
         const { sharedLinkTracking } = trackingProps;
         const { onToggleLink } = sharedLinkTracking;
 
@@ -178,7 +173,13 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
     };
 
     showCollaboratorList = () => {
-        this.setState({ showCollaboratorList: true });
+        const { onCollaboratorAvatarsClick } = this.props;
+
+        if (onCollaboratorAvatarsClick) {
+            onCollaboratorAvatarsClick();
+        } else {
+            this.setState({ showCollaboratorList: true });
+        }
     };
 
     closeCollaboratorList = () => {

src/features/unified-share-modal/UnifiedShareModal.js

@@ -137,12 +137,14 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
     };
 
     renderUSF = () => {
-        const { sharedLinkEditTagTargetingApi, sharedLinkEditTooltipTargetingApi } = this.props;
+        const { onCollaboratorAvatarsClick, sharedLinkEditTagTargetingApi, sharedLinkEditTooltipTargetingApi } =
+            this.props;
         const { isFetching, sharedLinkLoaded, shouldRenderFTUXTooltip } = this.state;
 
         return (
             <UnifiedShareForm
                 {...this.props}
+                onCollaboratorAvatarsClick={onCollaboratorAvatarsClick}
                 handleFtuxCloseClick={this.handleFtuxCloseClick}
                 isFetching={isFetching}
                 openConfirmModal={this.openConfirmModal}

src/features/unified-share-modal/__tests__/UnifiedShareForm.test.js

@@ -312,6 +312,61 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
             expect(wrapper).toMatchSnapshot();
         });
 
+        test('should render a collaborator list when onCollaboratorAvatarsClick prop is undefined and showCollaboratorList is invoked', () => {
+            const collaborators = [
+                {
+                    name: 'test a',
+                    hasCustomAvatar: false,
+                },
+                {
+                    name: 'test b',
+                    hasCustomAvatar: false,
+                },
+            ];
+
+            const wrapper = getWrapper({
+                collaboratorsList: {
+                    ...collaboratorsList,
+                    collaborators,
+                },
+                onCollaboratorAvatarsClick: undefined,
+            });
+
+            wrapper.setState({ showCollaboratorList: false });
+            wrapper.instance().showCollaboratorList();
+
+            expect(wrapper.exists('CollaboratorList')).toBe(true);
+        });
+
+        test('should not render a collaborator list and invoke onCollaboratorAvatarsClick prop when onCollaboratorAvatarsClick prop is defined and showCollaboratorList is invoked', () => {
+            const collaborators = [
+                {
+                    name: 'test a',
+                    hasCustomAvatar: false,
+                },
+                {
+                    name: 'test b',
+                    hasCustomAvatar: false,
+                },
+            ];
+
+            const onCollaboratorAvatarsClickMock = jest.fn();
+
+            const wrapper = getWrapper({
+                collaboratorsList: {
+                    ...collaboratorsList,
+                    collaborators,
+                },
+                onCollaboratorAvatarsClick: onCollaboratorAvatarsClickMock,
+            });
+
+            wrapper.setState({ showCollaboratorList: false });
+            wrapper.instance().showCollaboratorList();
+
+            expect(wrapper.exists('CollaboratorList')).toBe(false);
+            expect(onCollaboratorAvatarsClickMock).toHaveBeenCalledTimes(1);
+        });
+
         test('should render a default component with ACI toggle if enabled ', () => {
             const wrapper = getWrapper({ onAdvancedContentInsightsToggle: jest.fn() });
             expect(wrapper.exists('AdvancedContentInsightsToggle')).toBe(true);

src/features/unified-share-modal/flowTypes.js

@@ -379,6 +379,8 @@ export type USMProps = BaseUnifiedShareProps & {
     isAllowEditSharedLinkForFileEnabled?: boolean,
     /** Whether the USM is open */
     isOpen?: boolean,
+    /** A custom action to be invoked instead of default behavior when collaborators avatars are clicked */
+    onCollaboratorAvatarsClick?: () => void,
     /** Handler function that removes the shared link, used in the Remove Link Confirm Modal */
     onRemoveLink: () => void,
     /** Handler function for when the USM is closed */
@@ -397,6 +399,8 @@ export type USFProps = BaseUnifiedShareProps & {
     isAllowEditSharedLinkForFileEnabled: boolean,
     /** Whether the data for the USM/USF is being fetched */
     isFetching: boolean,
+    /** A custom action to be invoked instead of default behavior when collaborators avatars are clicked */
+    onCollaboratorAvatarsClick?: () => void,
     /** Function for opening the Remove Link Confirm Modal */
     openConfirmModal: () => void,
     /** Function for opening the Upgrade Plan Modal */