box-ui-elements 23.1.0 → 23.2.0

package/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>
     );

package/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 {

package/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();
+        });
     });
 });

package/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();
+        });
     });
 });

package/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": "testa@example.com",
+          "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": "testb@example.com",
+          "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": "testc@example.com",
+          "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"

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

@@ -1,5 +1,315 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`features/collaborator-avatars/CollaboratorListItem render() should call onRemoveCollaborator when onRemoveCollaborator prop is passed 1`] = `
+<li>
+  <div
+    className="collaborator-list-item"
+  >
+    <div
+      className="bdl-CollaboratorListItem-user user"
+    >
+      <div
+        className="info"
+      >
+        <div
+          className="name"
+        >
+          <Link
+            className=""
+            href="/profile/undefined"
+            rel="noopener"
+            target="_blank"
+          >
+            test c
+          </Link>
+        </div>
+        <div
+          className="email"
+        >
+          <Link
+            className=""
+            href="mailto:testc@example.com"
+          >
+            testc@example.com
+          </Link>
+        </div>
+      </div>
+      <CollaboratorAvatarItem
+        allowBadging={true}
+        email="testc@example.com"
+        expiration={
+          {
+            "expiresAt": "Jan 1, 1966",
+          }
+        }
+        hasCustomAvatar={true}
+        id={1}
+        name="test c"
+      />
+    </div>
+    <div
+      className="user-actions"
+    >
+      <div
+        className="role"
+      />
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        isTabbable={false}
+        position="top-center"
+        text={
+          <FormattedMessage
+            defaultMessage="Remove"
+            id="be.remove"
+          />
+        }
+        theme="default"
+      >
+        <PlainButton
+          className="remove-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <X16
+            color="##6f6f6f"
+            height={16}
+            width={16}
+          />
+        </PlainButton>
+      </Tooltip>
+    </div>
+  </div>
+</li>
+`;
+
+exports[`features/collaborator-avatars/CollaboratorListItem render() should not call onRemoveCollaborator when onRemoveCollaborator prop is undefined 1`] = `
+<li>
+  <div
+    className="collaborator-list-item"
+  >
+    <div
+      className="bdl-CollaboratorListItem-user user"
+    >
+      <div
+        className="info"
+      >
+        <div
+          className="name"
+        >
+          <Link
+            className=""
+            href="/profile/undefined"
+            rel="noopener"
+            target="_blank"
+          >
+            test c
+          </Link>
+        </div>
+        <div
+          className="email"
+        >
+          <Link
+            className=""
+            href="mailto:testc@example.com"
+          >
+            testc@example.com
+          </Link>
+        </div>
+      </div>
+      <CollaboratorAvatarItem
+        allowBadging={true}
+        email="testc@example.com"
+        expiration={
+          {
+            "expiresAt": "Jan 1, 1966",
+          }
+        }
+        hasCustomAvatar={true}
+        id={1}
+        name="test c"
+      />
+    </div>
+    <div
+      className="user-actions"
+    >
+      <div
+        className="role"
+      />
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        isTabbable={false}
+        position="top-center"
+        text={
+          <FormattedMessage
+            defaultMessage="Remove"
+            id="be.remove"
+          />
+        }
+        theme="default"
+      >
+        <PlainButton
+          className="remove-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <X16
+            color="##6f6f6f"
+            height={16}
+            width={16}
+          />
+        </PlainButton>
+      </Tooltip>
+    </div>
+  </div>
+</li>
+`;
+
+exports[`features/collaborator-avatars/CollaboratorListItem render() should render component when canRemoveCollaborators prop is true and collaborator is not removable 1`] = `
+<li>
+  <div
+    className="collaborator-list-item"
+  >
+    <div
+      className="bdl-CollaboratorListItem-user user"
+    >
+      <div
+        className="info"
+      >
+        <div
+          className="name"
+        >
+          <Link
+            className=""
+            href="/profile/undefined"
+            rel="noopener"
+            target="_blank"
+          >
+            test c
+          </Link>
+        </div>
+        <div
+          className="email"
+        >
+          <Link
+            className=""
+            href="mailto:testc@example.com"
+          >
+            testc@example.com
+          </Link>
+        </div>
+      </div>
+      <CollaboratorAvatarItem
+        allowBadging={true}
+        email="testc@example.com"
+        expiration={
+          {
+            "expiresAt": "Jan 1, 1966",
+          }
+        }
+        hasCustomAvatar={true}
+        id={1}
+        name="test c"
+      />
+    </div>
+    <div
+      className="user-actions"
+    >
+      <div
+        className="role"
+      />
+    </div>
+  </div>
+</li>
+`;
+
+exports[`features/collaborator-avatars/CollaboratorListItem render() should render component when canRemoveCollaborators prop is true and collaborator is removable 1`] = `
+<li>
+  <div
+    className="collaborator-list-item"
+  >
+    <div
+      className="bdl-CollaboratorListItem-user user"
+    >
+      <div
+        className="info"
+      >
+        <div
+          className="name"
+        >
+          <Link
+            className=""
+            href="/profile/undefined"
+            rel="noopener"
+            target="_blank"
+          >
+            test c
+          </Link>
+        </div>
+        <div
+          className="email"
+        >
+          <Link
+            className=""
+            href="mailto:testc@example.com"
+          >
+            testc@example.com
+          </Link>
+        </div>
+      </div>
+      <CollaboratorAvatarItem
+        allowBadging={true}
+        email="testc@example.com"
+        expiration={
+          {
+            "expiresAt": "Jan 1, 1966",
+          }
+        }
+        hasCustomAvatar={true}
+        id={1}
+        name="test c"
+      />
+    </div>
+    <div
+      className="user-actions"
+    >
+      <div
+        className="role"
+      />
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        isTabbable={false}
+        position="top-center"
+        text={
+          <FormattedMessage
+            defaultMessage="Remove"
+            id="be.remove"
+          />
+        }
+        theme="default"
+      >
+        <PlainButton
+          className="remove-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <X16
+            color="##6f6f6f"
+            height={16}
+            width={16}
+          />
+        </PlainButton>
+      </Tooltip>
+    </div>
+  </div>
+</li>
+`;
+
 exports[`features/collaborator-avatars/CollaboratorListItem render() should render default component 1`] = `
 <li>
   <div

package/src/features/message-center/__tests__/MessageCenter.integration.test.js

@@ -172,4 +172,14 @@ describe('components/message-center/MessageCenter.integration', () => {
 
         expect(wrapper.find(Message)).toHaveLength(2);
     });
+
+    test('should render ButtonComponent with badgeCount prop passed from MessageCenter', async () => {
+        const wrapper = await getWrapper();
+        const badgeCount = countResponse.count;
+
+        await actWait();
+        wrapper.update();
+
+        expect(wrapper.find('ButtonComponent').props().badgeCount).toBe(badgeCount);
+    });
 });

package/src/features/message-center/components/MessageCenter.js

@@ -16,7 +16,7 @@ import Internationalize from '../../../elements/common/Internationalize';
 
 type Props = {|
     apiHost: string,
-    buttonComponent: React.ComponentType<{ render: () => React.Node }>,
+    buttonComponent: React.ComponentType<{ render: () => React.Node, badgeCount: null | number }>,
     contentPreviewProps?: ContentPreviewProps,
     getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,
     getToken: (fileId: string) => Promise<Token>,
@@ -102,6 +102,7 @@ function MessageCenter({
 
     const icon = (
         <ButtonComponent
+            badgeCount={unreadMessageCount}
             data-resin-target="messageCenterOpenModal"
             data-testid="message-center-unread-count"
             onClick={handleOnClick}

package/src/features/unified-share-modal/README.md

@@ -1,6 +1,6 @@
 ### Description
 
-This is the simplified sharing modal, interally referred to as the Unified Share Modal
+This is the simplified sharing modal, internally referred to as the Unified Share Modal
 (a combination of the previous invite collaborators modal and the shared link modal).
 
 ### Examples
@@ -95,6 +95,7 @@ class USMExample extends React.Component {
     }
 
     getInitialData() {
+        const { canRemoveCollaborators } = this.props;
         const initialPromise = this.fakeRequest();
         const fetchCollaborators = new Promise(resolved => {
             setTimeout(() => {
@@ -112,6 +113,10 @@ class USMExample extends React.Component {
                             }
                         }
 
+                        if (canRemoveCollaborators) {
+                            contact.isRemovable = contact.translatedRole !== 'Owner';
+                        }
+
                         return contact;
                     }),
                 };
@@ -248,6 +253,8 @@ class USMExample extends React.Component {
                         modalTracking: {},
                         collaboratorListTracking: {},
                     } }
+                    canRemoveCollaborators={this.props.canRemoveCollaborators}
+                    onRemoveCollaborator={this.props.onRemoveCollaborator}
                 /> }
                 <Button
                     onClick={ () =>
@@ -310,6 +317,10 @@ class USMSharedLinkExample extends USMExample {
         This shows the Unified share modal when it needs to generate a shared link, and should auto-focus.
         <USMExample buttonText="Open USM Modal" shouldFocusSharedLinkOnLoad shouldCreateSharedLinkOnLoad />
     </div>
+    <div>
+        This shows the Unified share modal with functionality to remove collaborators
+        <USMExample buttonText="Open USM Modal" canRemoveCollaborators onRemoveCollaborator={() => {}} />
+    </div>
 </div>
 
 ```