feat(unified-share-modal): add remove collaborators (#4070)

* feat(unified-share-modal): add remove collaborators

* feat(unified-share-modal): back to fragment to not cause unexpected

* feat(unified-share-modal): fix flow errors

* feat(unified-share-modal): add an example of UnifiedShareModal

* feat(unified-share-modal): address comments from PR review

* feat(unified-share-modal): replace queryBy with getBy

Author: rss-maksim

i18n/en-US.properties

@@ -1952,6 +1952,10 @@ boxui.unifiedShare.previewerUploaderLevelDescription = Upload and preview
 boxui.unifiedShare.previewerUploaderLevelText = Previewer Uploader
 # Tooltip description to explain recommendation for sharing tooltip
 boxui.unifiedShare.recommendedSharingTooltipCalloutText = Based on your usage, we think {fullName} would be interested in this file.
+# Description for confirmation modal to remove a collaborator
+boxui.unifiedShare.removeCollaboratorConfirmationDescription = Are you sure you want to remove {name} as a collaborator?
+# Label for confirmation modal to remove a collaborator (title-case)
+boxui.unifiedShare.removeCollaboratorConfirmationTitle = Remove Collaborator
 # Description for confirmation modal to remove a shared link
 boxui.unifiedShare.removeLinkConfirmationDescription = This will permanently remove the shared link. If this item is embedded on other sites it will also become inaccessible. Any custom properties, settings and expirations will be removed as well. Do you want to continue?
 # Label for confirmation modal to remove a shared link (title-case)

src/features/collaborator-avatars/CollaboratorList.js

@@ -21,11 +21,13 @@ import './CollaboratorList.scss';
 const MAX_COLLABORATOR_LIST_SIZE = 90;
 
 type Props = {
+    canRemoveCollaborators?: boolean,
     collaborators: Array<collaboratorType>,
     doneButtonProps?: Object,
     item: ItemType,
     maxCollaboratorListSize: number,
     onDoneClick: Function,
+    onRemoveCollaboratorClick?: (collaborator: collaboratorType) => void,
     trackingProps: collaboratorListTrackingType,
 };
 
@@ -47,7 +49,14 @@ class CollaboratorList extends React.Component<Props> {
     }
 
     render() {
-        const { collaborators, onDoneClick, maxCollaboratorListSize, trackingProps } = this.props;
+        const {
+            canRemoveCollaborators,
+            collaborators,
+            onDoneClick,
+            maxCollaboratorListSize,
+            onRemoveCollaboratorClick,
+            trackingProps,
+        } = this.props;
         const { usernameProps, emailProps, manageLinkProps, viewAdditionalProps, doneButtonProps } = trackingProps;
         const manageAllBtn = (
             <span className="manage-all-btn">
@@ -73,6 +82,8 @@ class CollaboratorList extends React.Component<Props> {
                                     usernameProps,
                                     emailProps,
                                 }}
+                                canRemoveCollaborators={canRemoveCollaborators}
+                                onRemoveCollaborator={onRemoveCollaboratorClick}
                             />
                         );
                     })}

src/features/collaborator-avatars/CollaboratorList.scss

@@ -1,6 +1,9 @@
 @import '../../styles/variables';
 
 .usm-collaborator-list {
+    display: flex;
+    flex-direction: column;
+
     .collaborator-list {
         height: 210px;
         margin: 0;

src/features/collaborator-avatars/CollaboratorListItem.js

@@ -4,20 +4,26 @@ import classnames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 
 import { Link } from '../../components/link';
-
+import PlainButton from '../../components/plain-button';
+import Tooltip from '../../components/tooltip';
+import IconClose from '../../icon/fill/X16';
 import { COLLAB_GROUP_TYPE, COLLAB_PENDING_TYPE } from './constants';
 import messages from './messages';
+import commonMessages from '../../elements/common/messages';
 import CollaboratorAvatarItem from './CollaboratorAvatarItem';
+import type { collaboratorType } from '../unified-share-modal/flowTypes';
 import './CollaboratorListItem.scss';
 
 type Props = {
+    canRemoveCollaborators?: boolean,
     collaborator: Object,
     index: number,
+    onRemoveCollaborator?: (collaborator: collaboratorType) => void,
     trackingProps: { emailProps: ?Object, usernameProps: ?Object },
 };
 
 const CollaboratorListItem = (props: Props) => {
-    const { index, trackingProps } = props;
+    const { index, trackingProps, canRemoveCollaborators = false, onRemoveCollaborator } = props;
     const { usernameProps, emailProps } = trackingProps;
     const {
         email,
@@ -30,6 +36,7 @@ const CollaboratorListItem = (props: Props) => {
         profileURL,
         translatedRole,
         userID,
+        isRemovable = false,
     } = props.collaborator;
 
     const userOrGroupNameContent =
@@ -52,6 +59,12 @@ const CollaboratorListItem = (props: Props) => {
             </div>
         ) : null;
 
+    const roleNodeContent = (
+        <div className="role">
+            {type === COLLAB_PENDING_TYPE ? <FormattedMessage {...messages.pendingCollabText} /> : translatedRole}
+        </div>
+    );
+
     return (
         <li>
             <div className="collaborator-list-item">
@@ -71,13 +84,24 @@ const CollaboratorListItem = (props: Props) => {
                         name={name}
                     />
                 </div>
-                <div className="role">
-                    {type === COLLAB_PENDING_TYPE ? (
-                        <FormattedMessage {...messages.pendingCollabText} />
-                    ) : (
-                        translatedRole
-                    )}
-                </div>
+                {canRemoveCollaborators ? (
+                    <div className="user-actions">
+                        {roleNodeContent}
+                        {isRemovable && (
+                            <Tooltip isTabbable={false} text={<FormattedMessage {...commonMessages.remove} />}>
+                                <PlainButton
+                                    className="remove-button"
+                                    onClick={() => onRemoveCollaborator?.(props.collaborator)}
+                                    type="button"
+                                >
+                                    <IconClose color="##6f6f6f" height={16} width={16} />
+                                </PlainButton>
+                            </Tooltip>
+                        )}
+                    </div>
+                ) : (
+                    roleNodeContent
+                )}
             </div>
         </li>
     );

src/features/collaborator-avatars/CollaboratorListItem.scss

@@ -54,10 +54,33 @@
             text-overflow: ellipsis;
         }
 
+        .user-actions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            margin-left: auto;
+        }
+
         .role {
             color: $bdl-gray-65;
             line-height: 32px;
         }
+
+        .remove-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: $bdl-btn-height;
+            height: $bdl-btn-height;
+            background: none;
+            border: 0;
+            cursor: pointer;
+
+            &:hover {
+                background: $bdl-gray-05;
+                border-radius: $bdl-border-radius-size;
+            }
+        }
     }
 
     .collaborator-list-item.more {

src/features/collaborator-avatars/__tests__/CollaboratorList.test.js

@@ -67,5 +67,16 @@ describe('features/collaborator-avatars/CollaboratorList', () => {
             });
             expect(wrapper).toMatchSnapshot();
         });
+
+        test('should render component when canRemoveCollaborators prop is true', () => {
+            const onRemoveCollaboratorClickMock = jest.fn();
+            const wrapper = getWrapper({
+                canRemoveCollaborators: true,
+                onRemoveCollaboratorClick: onRemoveCollaboratorClickMock,
+            });
+
+            expect(wrapper.find('CollaboratorListItem')).toHaveLength(collaborators.length);
+            expect(wrapper).toMatchSnapshot();
+        });
     });
 });

src/features/collaborator-avatars/__tests__/CollaboratorListItem.test.js

@@ -69,5 +69,56 @@ describe('features/collaborator-avatars/CollaboratorListItem', () => {
 
             expect(wrapper).toMatchSnapshot();
         });
+
+        test('should render component when canRemoveCollaborators prop is true and collaborator is not removable', () => {
+            const wrapper = getWrapper({ canRemoveCollaborators: true, collaborator });
+
+            expect(wrapper.find('.role').exists()).toBe(true);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render component when canRemoveCollaborators prop is true and collaborator is removable', () => {
+            const wrapper = getWrapper({
+                canRemoveCollaborators: true,
+                collaborator: { ...collaborator, isRemovable: true },
+            });
+
+            expect(wrapper.find('.role').exists()).toBe(true);
+            expect(wrapper.find('PlainButton').exists()).toBe(true);
+            expect(wrapper.find('Tooltip').exists()).toBe(true);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should call onRemoveCollaborator when onRemoveCollaborator prop is passed', () => {
+            const onRemoveCollaboratorMock = jest.fn();
+            const wrapper = getWrapper({
+                canRemoveCollaborators: true,
+                onRemoveCollaborator: onRemoveCollaboratorMock,
+                collaborator: { ...collaborator, isRemovable: true },
+            });
+
+            const removeButton = wrapper.find('PlainButton');
+            removeButton.simulate('click');
+
+            expect(onRemoveCollaboratorMock).toHaveBeenCalledWith({ ...collaborator, isRemovable: true });
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should not call onRemoveCollaborator when onRemoveCollaborator prop is undefined', () => {
+            const onRemoveCollaboratorMock = jest.fn();
+
+            const wrapper = getWrapper({
+                canRemoveCollaborators: true,
+                onRemoveCollaborator: undefined,
+                collaborator: { ...collaborator, isRemovable: true },
+            });
+
+            const removeButton = wrapper.find('PlainButton');
+            removeButton.simulate('click');
+
+            expect(onRemoveCollaboratorMock).not.toHaveBeenCalled();
+            expect(wrapper).toMatchSnapshot();
+        });
     });
 });

src/features/collaborator-avatars/__tests__/__snapshots__/CollaboratorList.test.js.snap

@@ -1,5 +1,115 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`features/collaborator-avatars/CollaboratorList render() should render component when canRemoveCollaborators prop is true 1`] = `
+<div
+  className="usm-collaborator-list"
+>
+  <div
+    className="manage-all-btn-container"
+  >
+    <Link
+      className=""
+      href="/file/111/collaborators/"
+      rel="noopener"
+      target="_blank"
+    >
+      <span
+        className="manage-all-btn"
+      >
+        <FormattedMessage
+          defaultMessage="Manage All"
+          id="boxui.collaboratorAvatars.manageAllLinkText"
+        />
+      </span>
+    </Link>
+  </div>
+  <ul
+    className="be collaborator-list"
+  >
+    <CollaboratorListItem
+      canRemoveCollaborators={true}
+      collaborator={
+        {
+          "collabID": 1,
+          "email": "[email protected]",
+          "hasCustomAvatar": false,
+          "name": "test a",
+          "type": "user",
+          "userID": 1,
+        }
+      }
+      index={0}
+      key="1-user"
+      onRemoveCollaborator={[MockFunction]}
+      trackingProps={
+        {
+          "emailProps": undefined,
+          "usernameProps": undefined,
+        }
+      }
+    />
+    <CollaboratorListItem
+      canRemoveCollaborators={true}
+      collaborator={
+        {
+          "collabID": 2,
+          "email": "[email protected]",
+          "name": "test b",
+          "type": "user",
+          "userID": 2,
+        }
+      }
+      index={1}
+      key="2-user"
+      onRemoveCollaborator={[MockFunction]}
+      trackingProps={
+        {
+          "emailProps": undefined,
+          "usernameProps": undefined,
+        }
+      }
+    />
+    <CollaboratorListItem
+      canRemoveCollaborators={true}
+      collaborator={
+        {
+          "collabID": 3,
+          "email": "[email protected]",
+          "hasCustomAvatar": true,
+          "imageUrl": "https://foo.bar",
+          "name": "test c",
+          "profileUrl": "http://foo.bar.profile",
+          "type": "user",
+          "userID": 3,
+        }
+      }
+      index={2}
+      key="3-user"
+      onRemoveCollaborator={[MockFunction]}
+      trackingProps={
+        {
+          "emailProps": undefined,
+          "usernameProps": undefined,
+        }
+      }
+    />
+  </ul>
+  <ModalActions>
+    <Button
+      className="btn-done"
+      isLoading={false}
+      showRadar={false}
+      type="button"
+    >
+      <FormattedMessage
+        defaultMessage="Done"
+        id="boxui.core.done"
+      />
+    </Button>
+  </ModalActions>
+</div>
+`;
+
 exports[`features/collaborator-avatars/CollaboratorList render() should render default component 1`] = `
 <div
   className="usm-collaborator-list"