box-ui-elements 23.1.0 → 23.2.0

package/src/features/unified-share-modal/RemoveCollaboratorConfirmModal.js

@@ -0,0 +1,67 @@
+// @flow
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Modal, ModalActions } from '../../components/modal';
+import Button from '../../components/button';
+import PrimaryButton from '../../components/primary-button';
+import commonMessages from '../../common/messages';
+import messages from './messages';
+import type { collaboratorType } from './flowTypes';
+
+type Props = {
+    cancelButtonProps?: Object,
+    collaborator: ?collaboratorType,
+    isOpen: boolean,
+    modalProps?: Object,
+    okayButtonProps?: Object,
+    onLoad?: Function,
+    onRequestClose: Function,
+    onSubmit: Function,
+    submitting: boolean,
+};
+
+const RemoveCollaboratorConfirmModal = ({
+    isOpen,
+    onRequestClose,
+    onSubmit,
+    submitting,
+    collaborator,
+    okayButtonProps,
+    modalProps,
+    cancelButtonProps,
+    onLoad,
+}: Props) => {
+    useEffect(() => {
+        onLoad?.();
+    }, [onLoad]);
+
+    return (
+        <Modal
+            className="be-modal"
+            focusElementSelector=".btn-primary"
+            isOpen={isOpen}
+            onRequestClose={submitting ? undefined : onRequestClose}
+            title={<FormattedMessage {...messages.removeCollaboratorConfirmationTitle} />}
+            type="alert"
+            {...modalProps}
+        >
+            <FormattedMessage
+                {...messages.removeCollaboratorConfirmationDescription}
+                values={{
+                    name: collaborator?.email ?? collaborator?.name,
+                }}
+            />
+            <ModalActions>
+                <Button isDisabled={submitting} onClick={onRequestClose} {...cancelButtonProps}>
+                    <FormattedMessage {...commonMessages.cancel} />
+                </Button>
+                <PrimaryButton isDisabled={submitting} isLoading={submitting} onClick={onSubmit} {...okayButtonProps}>
+                    <FormattedMessage {...commonMessages.okay} />
+                </PrimaryButton>
+            </ModalActions>
+        </Modal>
+    );
+};
+
+export default RemoveCollaboratorConfirmModal;

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

@@ -66,6 +66,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             removeLinkConfirmModalTracking: {},
             sharedLinkEmailTracking: {},
             sharedLinkTracking: {},
+            removeCollaboratorConfirmModalTracking: {},
         },
     };
 
@@ -647,7 +648,8 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
     }
 
     renderCollaboratorList() {
-        const { item, collaboratorsList, trackingProps } = this.props;
+        const { item, collaboratorsList, trackingProps, canRemoveCollaborators, onRemoveCollaboratorClick } =
+            this.props;
         const { name, type } = item;
         const { collaboratorListTracking } = trackingProps;
         let listContent = null;
@@ -663,6 +665,8 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
                     item={item}
                     collaborators={collaborators}
                     trackingProps={collaboratorListTracking}
+                    canRemoveCollaborators={canRemoveCollaborators}
+                    onRemoveCollaboratorClick={onRemoveCollaboratorClick}
                 />
             );
         }

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

@@ -8,15 +8,18 @@ import { Modal } from '../../components/modal';
 import UnifiedShareModalTitle from './UnifiedShareModalTitle';
 import UnifiedShareForm from './UnifiedShareForm';
 import RemoveLinkConfirmModal from './RemoveLinkConfirmModal';
-import type { USMProps } from './flowTypes';
+import RemoveCollaboratorConfirmModal from './RemoveCollaboratorConfirmModal';
+import type { USMProps, collaboratorType } from './flowTypes';
 
 import './UnifiedShareModal.scss';
 
 type State = {
+    collaboratorToRemove: ?collaboratorType,
     getInitialDataCalled: boolean,
-    isConfirmModalOpen: boolean,
     isEmailLinkSectionExpanded: boolean,
     isFetching: boolean,
+    isRemoveCollaboratorConfirmModalOpen: boolean,
+    isRemoveLinkConfirmModalOpen: boolean,
     sharedLinkLoaded: boolean,
     shouldRenderFTUXTooltip: boolean,
     showCollaboratorList: boolean,
@@ -24,6 +27,7 @@ type State = {
 
 class UnifiedShareModal extends React.Component<USMProps, State> {
     static defaultProps = {
+        canRemoveCollaborators: false,
         displayInModal: true,
         initiallySelectedContacts: [],
         isAllowEditSharedLinkForFileEnabled: false,
@@ -38,6 +42,7 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
             inviteCollabTracking: {},
             modalTracking: {},
             removeLinkConfirmModalTracking: {},
+            removeCollaboratorConfirmModalTracking: {},
             collaboratorListTracking: {},
         },
     };
@@ -48,8 +53,10 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
         const { initialDataReceived } = props;
 
         this.state = {
+            collaboratorToRemove: null,
             getInitialDataCalled: !!initialDataReceived,
-            isConfirmModalOpen: false,
+            isRemoveLinkConfirmModalOpen: false,
+            isRemoveCollaboratorConfirmModalOpen: false,
             isEmailLinkSectionExpanded: false,
             isFetching: !initialDataReceived,
             sharedLinkLoaded: false,
@@ -121,11 +128,26 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
     };
 
     openConfirmModal = () => {
-        this.setState({ isConfirmModalOpen: true });
+        this.setState({ isRemoveLinkConfirmModalOpen: true });
+    };
+
+    openRemoveCollaboratorConfirmModal = (collaborator: collaboratorType) => {
+        const { canRemoveCollaborators } = this.props;
+        if (canRemoveCollaborators) {
+            this.setState({ isRemoveCollaboratorConfirmModalOpen: true, collaboratorToRemove: collaborator });
+        }
     };
 
     closeConfirmModal = () => {
-        this.setState({ isConfirmModalOpen: false });
+        this.setState({ isRemoveLinkConfirmModalOpen: false });
+    };
+
+    closeRemoveCollaboratorConfirmModal = () => {
+        this.setState({
+            isRemoveCollaboratorConfirmModalOpen: false,
+            collaboratorToRemove: null,
+            shouldRenderFTUXTooltip: false,
+        });
     };
 
     removeLink = () => {
@@ -136,6 +158,15 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
         }
     };
 
+    removeCollaborator = async () => {
+        const { onRemoveCollaborator } = this.props;
+        if (this.state.collaboratorToRemove) {
+            await onRemoveCollaborator?.(this.state.collaboratorToRemove);
+        }
+
+        this.closeRemoveCollaboratorConfirmModal();
+    };
+
     renderUSF = () => {
         const { onCollaboratorAvatarsClick, sharedLinkEditTagTargetingApi, sharedLinkEditTooltipTargetingApi } =
             this.props;
@@ -146,6 +177,7 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
                 {...this.props}
                 onCollaboratorAvatarsClick={onCollaboratorAvatarsClick}
                 handleFtuxCloseClick={this.handleFtuxCloseClick}
+                onRemoveCollaboratorClick={this.openRemoveCollaboratorConfirmModal}
                 isFetching={isFetching}
                 openConfirmModal={this.openConfirmModal}
                 sharedLinkEditTagTargetingApi={sharedLinkEditTagTargetingApi}
@@ -159,14 +191,19 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
     render() {
         // Shared link section props
         const { canInvite, displayInModal, isOpen, item, onRequestClose, submitting, trackingProps } = this.props;
-        const { modalTracking, removeLinkConfirmModalTracking } = trackingProps;
+        const { modalTracking, removeLinkConfirmModalTracking, removeCollaboratorConfirmModalTracking } = trackingProps;
         const { modalProps } = modalTracking;
-        const { isEmailLinkSectionExpanded, isConfirmModalOpen, showCollaboratorList } = this.state;
+        const {
+            isEmailLinkSectionExpanded,
+            isRemoveLinkConfirmModalOpen,
+            isRemoveCollaboratorConfirmModalOpen,
+            showCollaboratorList,
+        } = this.state;
 
         // focus logic at modal level
         const extendedModalProps = {
             focusElementSelector: canInvite
-                ? '.bdl-PillSelector-input' // focus on invite collabs field
+                ? '.bdl-PillSelector-input' // focus on invite collaborators field
                 : '.toggle-simple', // focus on shared link toggle
             ...modalProps,
         };
@@ -176,7 +213,7 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
                 {displayInModal ? (
                     <Modal
                         className="be-modal unified-share-modal"
-                        isOpen={isConfirmModalOpen ? false : isOpen}
+                        isOpen={isRemoveLinkConfirmModalOpen || isRemoveCollaboratorConfirmModalOpen ? false : isOpen}
                         onRequestClose={submitting ? undefined : onRequestClose}
                         title={
                             <UnifiedShareModalTitle
@@ -192,15 +229,26 @@ class UnifiedShareModal extends React.Component<USMProps, State> {
                 ) : (
                     <div className="bdl-UnifiedShareForm-container">{this.renderUSF()}</div>
                 )}
-                {isConfirmModalOpen && (
+                {isRemoveLinkConfirmModalOpen && (
                     <RemoveLinkConfirmModal
-                        isOpen={isConfirmModalOpen}
+                        isOpen={isRemoveLinkConfirmModalOpen}
                         onRequestClose={this.closeConfirmModal}
                         removeLink={this.removeLink}
                         submitting={submitting}
                         {...removeLinkConfirmModalTracking}
                     />
                 )}
+                {isRemoveCollaboratorConfirmModalOpen && (
+                    <RemoveCollaboratorConfirmModal
+                        isOpen={isRemoveCollaboratorConfirmModalOpen}
+                        onRequestClose={this.closeRemoveCollaboratorConfirmModal}
+                        onSubmit={this.removeCollaborator}
+                        submitting={submitting}
+                        collaborator={this.state.collaboratorToRemove}
+                        modalProps={{ className: 'remove-collaborator-confirm-modal' }}
+                        {...removeCollaboratorConfirmModalTracking}
+                    />
+                )}
             </>
         );
     }

package/src/features/unified-share-modal/UnifiedShareModal.scss

@@ -53,7 +53,7 @@
 }
 
 .unified-share-modal {
-    /** title and classifiction label */
+    /** title and classification label */
     .bdl-UnifiedShareModalTitle-classification {
         display: inline;
     }
@@ -99,7 +99,8 @@
         margin-bottom: 20px;
     }
 
-    .bdl-PillSelectorDropdown .bdl-PillSelector, // need both selectors for specificity
+    // need both selectors for specificity
+    .bdl-PillSelectorDropdown .bdl-PillSelector,
     textarea {
         /* override for DOM element in `TextArea` which provides no id/class for targeting */
         width: 100%;
@@ -328,6 +329,12 @@
     }
 }
 
+.remove-collaborator-confirm-modal {
+    & .modal-content {
+        word-break: break-word;
+    }
+}
+
 @include breakpoint($medium-screen) {
     .usm-menu-description {
         white-space: normal;

package/src/features/unified-share-modal/__tests__/RemoveCollaboratorConfirmModal.test.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '../../../test-utils/testing-library';
+import RemoveCollaboratorConfirmModal from '../RemoveCollaboratorConfirmModal';
+
+describe('features/unified-share-modal/RemoveCollaboratorConfirmModal', () => {
+    const renderComponent = (props = {}) =>
+        render(<RemoveCollaboratorConfirmModal isOpen onRequestClose={jest.fn()} onSubmit={jest.fn()} {...props} />);
+
+    test('should render a confirmation Modal', async () => {
+        const collaborator = { email: 'dt@example.com' };
+        const onRequestClose = jest.fn();
+        renderComponent({
+            onRequestClose,
+            collaborator,
+        });
+
+        const modal = screen.getByRole('alertdialog');
+        expect(modal).toBeInTheDocument();
+
+        const title = screen.getByRole('heading', { name: 'Remove Collaborator' });
+        expect(title).toBeInTheDocument();
+
+        const description = screen.getByRole('paragraph');
+        expect(description).toHaveTextContent(
+            `Are you sure you want to remove ${collaborator.email} as a collaborator?`,
+        );
+
+        const submitButton = screen.getByRole('button', { name: 'Okay' });
+        expect(submitButton).toBeInTheDocument();
+
+        const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+        expect(cancelButton).toBeInTheDocument();
+        await userEvent.click(cancelButton);
+
+        expect(onRequestClose).toHaveBeenCalledTimes(1);
+    });
+
+    test('should call onSubmit callback when submit button is clicked', async () => {
+        const onSubmit = jest.fn();
+        renderComponent({
+            onSubmit,
+            collaborator: { email: 'dt@example.com' },
+        });
+
+        const submitButton = screen.getByRole('button', { name: 'Okay' });
+        await userEvent.click(submitButton);
+
+        expect(onSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    test('should disable modal buttons and set loading state when props.submitting is true', () => {
+        renderComponent({
+            submitting: true,
+            collaborator: { email: 'dt@example.com' },
+        });
+
+        const submitButton = screen.getByRole('button', { name: 'Okay' });
+        expect(submitButton).toHaveAttribute('aria-disabled', 'true');
+
+        const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+        expect(cancelButton).toHaveAttribute('aria-disabled', 'true');
+    });
+});

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

@@ -131,7 +131,11 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
         });
 
         test('should render a default component with confirm modal open', () => {
-            const wrapper = getWrapper({ isConfirmModalOpen: true, isFetching: false, closeConfirmModal: () => null });
+            const wrapper = getWrapper({
+                isRemoveLinkConfirmModalOpen: true,
+                isFetching: false,
+                closeConfirmModal: () => null,
+            });
             expect(wrapper).toMatchSnapshot();
         });
 
@@ -376,6 +380,35 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
             const wrapper = getWrapper();
             expect(wrapper.exists('AdvancedContentInsightsToggle')).toBe(false);
         });
+
+        test('should render a collaborator list when canRemoveCollaborators prop is set to true and onRemoveCollaboratorClick is defined', () => {
+            const onRemoveCollaboratorMock = jest.fn();
+            const collaborators = [
+                { name: 'test a', hasCustomAvatar: false },
+                { name: 'test b', hasCustomAvatar: false, isRemovable: true },
+            ];
+
+            const wrapper = getWrapper({
+                collaboratorsList: {
+                    ...collaboratorsList,
+                    collaborators,
+                },
+                canRemoveCollaborators: true,
+                onRemoveCollaboratorClick: onRemoveCollaboratorMock,
+                trackingProps: {
+                    collaboratorListTracking: {},
+                    modalTracking: {},
+                    inviteCollabTracking: {},
+                },
+            });
+
+            wrapper.setState({ showCollaboratorList: false });
+            wrapper.instance().showCollaboratorList();
+
+            expect(wrapper.find('CollaboratorList').exists()).toBe(true);
+            expect(wrapper.find('CollaboratorList').prop('canRemoveCollaborators')).toBe(true);
+            expect(wrapper.find('CollaboratorList').prop('onRemoveCollaboratorClick')).toBe(onRemoveCollaboratorMock);
+        });
     });
 
     describe('renderCollaboratorAvatars()', () => {

package/src/features/unified-share-modal/__tests__/UnifiedShareModal.test.js

@@ -117,7 +117,7 @@ describe('features/unified-share-modal/UnifiedShareModal', () => {
 
         test('should render a default component with confirm modal open', () => {
             const wrapper = getWrapper();
-            wrapper.setState({ isFetching: false, isConfirmModalOpen: true });
+            wrapper.setState({ isFetching: false, isRemoveLinkConfirmModalOpen: true });
             expect(wrapper).toMatchSnapshot();
         });
 
@@ -260,6 +260,35 @@ describe('features/unified-share-modal/UnifiedShareModal', () => {
             wrapper.setState({ showCollaboratorList: true });
             expect(wrapper).toMatchSnapshot();
         });
+
+        test('should render a default component with confirm remove collaborator modal open', () => {
+            const wrapper = getWrapper({ canRemoveCollaborators: true, onRemoveCollaborator: jest.fn() });
+            wrapper.setState({
+                isFetching: false,
+                isRemoveCollaboratorConfirmModalOpen: true,
+                collaboratorToRemove: {
+                    name: 'Collaborator a',
+                    hasCustomAvatar: false,
+                },
+            });
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render a default component with collaborator list when showCollaboratorList state is true', () => {
+            const collaborators = [
+                { name: 'test a', hasCustomAvatar: false, isRemovable: false },
+                { name: 'test b', hasCustomAvatar: false, isRemovable: true },
+            ];
+
+            const wrapper = getWrapper({
+                collaboratorsList: { ...collaboratorsList, collaborators },
+                canRemoveCollaborators: true,
+                onRemoveCollaborator: jest.fn(),
+            });
+            wrapper.setState({ showCollaboratorList: true });
+
+            expect(wrapper).toMatchSnapshot();
+        });
     });
 
     describe('getInitialData()', () => {
@@ -321,7 +350,7 @@ describe('features/unified-share-modal/UnifiedShareModal', () => {
 
             wrapper.instance().closeConfirmModal();
 
-            expect(wrapper.state('isConfirmModalOpen')).toBe(false);
+            expect(wrapper.state('isRemoveLinkConfirmModalOpen')).toBe(false);
         });
 
         test('should set the state to closed if it was formerly open', () => {
@@ -329,11 +358,52 @@ describe('features/unified-share-modal/UnifiedShareModal', () => {
 
             wrapper.instance().openConfirmModal();
 
-            expect(wrapper.state('isConfirmModalOpen')).toBe(true);
+            expect(wrapper.state('isRemoveLinkConfirmModalOpen')).toBe(true);
 
             wrapper.instance().closeConfirmModal();
 
-            expect(wrapper.state('isConfirmModalOpen')).toBe(false);
+            expect(wrapper.state('isRemoveLinkConfirmModalOpen')).toBe(false);
+        });
+    });
+
+    describe('closeRemoveCollaboratorConfirmModal()', () => {
+        test('should keep the state as closed when called', () => {
+            const wrapper = getWrapper({
+                canRemoveCollaborators: true,
+                onRemoveCollaborator: jest.fn(),
+            });
+
+            wrapper.instance().closeRemoveCollaboratorConfirmModal();
+
+            expect(wrapper.state('isRemoveCollaboratorConfirmModalOpen')).toBe(false);
+            expect(wrapper.state('collaboratorToRemove')).toBe(null);
+            expect(wrapper.state('shouldRenderFTUXTooltip')).toBe(false);
+        });
+
+        test('should set the state to closed when it was previously open', () => {
+            const wrapper = getWrapper({
+                canRemoveCollaborators: true,
+                onRemoveCollaborator: jest.fn(),
+            });
+
+            wrapper.instance().openRemoveCollaboratorConfirmModal();
+
+            expect(wrapper.state('isRemoveCollaboratorConfirmModalOpen')).toBe(true);
+            expect(wrapper.state('collaboratorToRemove')).not.toBe(null);
+
+            wrapper.instance().closeRemoveCollaboratorConfirmModal();
+
+            expect(wrapper.state('isRemoveCollaboratorConfirmModalOpen')).toBe(false);
+            expect(wrapper.state('collaboratorToRemove')).toBe(null);
+        });
+
+        test('should not set the state to open when canRemoveCollaborators prop is not defined', () => {
+            const wrapper = getWrapper();
+
+            wrapper.instance().openRemoveCollaboratorConfirmModal();
+
+            expect(wrapper.state('isRemoveCollaboratorConfirmModalOpen')).toBe(false);
+            expect(wrapper.state('collaboratorToRemove')).toBe(null);
         });
     });
 });