box-ui-elements 23.1.0 → 23.2.0

package/es/elements/common/content-answers/ContentAnswersOpenButton.scss

@@ -5,7 +5,7 @@
 
 @mixin BackgroundGradientHover {
     background: linear-gradient(0deg, #2223, #2223), linear-gradient(135deg, #fe01da 0%, var(--light-blue-100) 100%);
-    border: var(--border-1 solid #2222224d);
+    border: var(--border-1) solid #2222224d;
 }
 
 .be-ContentAnswersOpenButton {

package/es/features/collaborator-avatars/CollaboratorList.js

@@ -31,9 +31,11 @@ class CollaboratorList extends React.Component {
   }
   render() {
     const {
+      canRemoveCollaborators,
       collaborators,
       onDoneClick,
       maxCollaboratorListSize,
+      onRemoveCollaboratorClick,
       trackingProps
     } = this.props;
     const {
@@ -65,7 +67,9 @@ class CollaboratorList extends React.Component {
         trackingProps: {
           usernameProps,
           emailProps
-        }
+        },
+        canRemoveCollaborators: canRemoveCollaborators,
+        onRemoveCollaborator: onRemoveCollaboratorClick
       });
     }), collaborators.length > maxListSizeToRender && /*#__PURE__*/React.createElement("li", {
       className: "collaborator-list-item more"

package/es/features/collaborator-avatars/CollaboratorList.js.flow

@@ -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}
                             />
                         );
                     })}

package/es/features/collaborator-avatars/CollaboratorList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollaboratorList.js","names":["React","FormattedMessage","ModalActions","Button","Link","CollaborationBadge","commonMessages","CollaboratorListItem","messages","MAX_COLLABORATOR_LIST_SIZE","CollaboratorList","Component","createCollaboratorPageLink","children","trackingProp","item","props","type","id","collaboratorsPageLink","createElement","_extends","href","rel","target","render","collaborators","onDoneClick","maxCollaboratorListSize","trackingProps","usernameProps","emailProps","manageLinkProps","viewAdditionalProps","doneButtonProps","manageAllBtn","className","manageAllLinkText","maxListSizeToRender","Math","min","slice","map","collaborator","index","collabID","key","length","height","width","viewAdditionalPeopleText","onClick","done","_defineProperty"],"sources":["../../../src/features/collaborator-avatars/CollaboratorList.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ModalActions } from '../../components/modal';\nimport Button from '../../components/button';\nimport { Link } from '../../components/link';\nimport CollaborationBadge from '../../icons/badges/CollaborationBadge';\nimport type {\n    collaboratorListTrackingType,\n    item as ItemType,\n    collaboratorType,\n} from '../unified-share-modal/flowTypes';\n\nimport commonMessages from '../../common/messages';\n\nimport CollaboratorListItem from './CollaboratorListItem';\nimport messages from './messages';\nimport './CollaboratorList.scss';\n\nconst MAX_COLLABORATOR_LIST_SIZE = 90;\n\ntype Props = {\n    collaborators: Array<collaboratorType>,\n    doneButtonProps?: Object,\n    item: ItemType,\n    maxCollaboratorListSize: number,\n    onDoneClick: Function,\n    trackingProps: collaboratorListTrackingType,\n};\n\nclass CollaboratorList extends React.Component<Props> {\n    static defaultProps = {\n        maxCollaboratorListSize: MAX_COLLABORATOR_LIST_SIZE,\n    };\n\n    createCollaboratorPageLink(children: React.Node, trackingProp: ?Object) {\n        const { item } = this.props;\n        const { type, id } = item;\n        const collaboratorsPageLink = `/${type}/${id}/collaborators/`;\n\n        return (\n            <Link href={collaboratorsPageLink} rel=\"noopener\" target=\"_blank\" {...trackingProp}>\n                {children}\n            </Link>\n        );\n    }\n\n    render() {\n        const { collaborators, onDoneClick, maxCollaboratorListSize, trackingProps } = this.props;\n        const { usernameProps, emailProps, manageLinkProps, viewAdditionalProps, doneButtonProps } = trackingProps;\n        const manageAllBtn = (\n            <span className=\"manage-all-btn\">\n                <FormattedMessage {...messages.manageAllLinkText} />\n            </span>\n        );\n        const maxListSizeToRender = Math.min(maxCollaboratorListSize, MAX_COLLABORATOR_LIST_SIZE);\n\n        return (\n            <div className=\"usm-collaborator-list\">\n                <div className=\"manage-all-btn-container\">\n                    {this.createCollaboratorPageLink(manageAllBtn, manageLinkProps)}\n                </div>\n                <ul className=\"be collaborator-list\">\n                    {collaborators.slice(0, maxListSizeToRender).map((collaborator, index) => {\n                        const { collabID, type } = collaborator;\n                        return (\n                            <CollaboratorListItem\n                                key={`${collabID}-${type}`}\n                                collaborator={collaborator}\n                                index={index}\n                                trackingProps={{\n                                    usernameProps,\n                                    emailProps,\n                                }}\n                            />\n                        );\n                    })}\n                    {collaborators.length > maxListSizeToRender && (\n                        <li className=\"collaborator-list-item more\">\n                            <div>\n                                <CollaborationBadge height={32} width={32} />\n                            </div>\n                            <div>\n                                {this.createCollaboratorPageLink(\n                                    <FormattedMessage {...messages.viewAdditionalPeopleText} />,\n                                    viewAdditionalProps,\n                                )}\n                            </div>\n                        </li>\n                    )}\n                </ul>\n                <ModalActions>\n                    <Button className=\"btn-done\" onClick={onDoneClick} type=\"button\" {...doneButtonProps}>\n                        <FormattedMessage {...commonMessages.done} />\n                    </Button>\n                </ModalActions>\n            </div>\n        );\n    }\n}\n\nexport default CollaboratorList;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CollaboratorList.js","names":["React","FormattedMessage","ModalActions","Button","Link","CollaborationBadge","commonMessages","CollaboratorListItem","messages","MAX_COLLABORATOR_LIST_SIZE","CollaboratorList","Component","createCollaboratorPageLink","children","trackingProp","item","props","type","id","collaboratorsPageLink","createElement","_extends","href","rel","target","render","canRemoveCollaborators","collaborators","onDoneClick","maxCollaboratorListSize","onRemoveCollaboratorClick","trackingProps","usernameProps","emailProps","manageLinkProps","viewAdditionalProps","doneButtonProps","manageAllBtn","className","manageAllLinkText","maxListSizeToRender","Math","min","slice","map","collaborator","index","collabID","key","onRemoveCollaborator","length","height","width","viewAdditionalPeopleText","onClick","done","_defineProperty"],"sources":["../../../src/features/collaborator-avatars/CollaboratorList.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ModalActions } from '../../components/modal';\nimport Button from '../../components/button';\nimport { Link } from '../../components/link';\nimport CollaborationBadge from '../../icons/badges/CollaborationBadge';\nimport type {\n    collaboratorListTrackingType,\n    item as ItemType,\n    collaboratorType,\n} from '../unified-share-modal/flowTypes';\n\nimport commonMessages from '../../common/messages';\n\nimport CollaboratorListItem from './CollaboratorListItem';\nimport messages from './messages';\nimport './CollaboratorList.scss';\n\nconst MAX_COLLABORATOR_LIST_SIZE = 90;\n\ntype Props = {\n    canRemoveCollaborators?: boolean,\n    collaborators: Array<collaboratorType>,\n    doneButtonProps?: Object,\n    item: ItemType,\n    maxCollaboratorListSize: number,\n    onDoneClick: Function,\n    onRemoveCollaboratorClick?: (collaborator: collaboratorType) => void,\n    trackingProps: collaboratorListTrackingType,\n};\n\nclass CollaboratorList extends React.Component<Props> {\n    static defaultProps = {\n        maxCollaboratorListSize: MAX_COLLABORATOR_LIST_SIZE,\n    };\n\n    createCollaboratorPageLink(children: React.Node, trackingProp: ?Object) {\n        const { item } = this.props;\n        const { type, id } = item;\n        const collaboratorsPageLink = `/${type}/${id}/collaborators/`;\n\n        return (\n            <Link href={collaboratorsPageLink} rel=\"noopener\" target=\"_blank\" {...trackingProp}>\n                {children}\n            </Link>\n        );\n    }\n\n    render() {\n        const {\n            canRemoveCollaborators,\n            collaborators,\n            onDoneClick,\n            maxCollaboratorListSize,\n            onRemoveCollaboratorClick,\n            trackingProps,\n        } = this.props;\n        const { usernameProps, emailProps, manageLinkProps, viewAdditionalProps, doneButtonProps } = trackingProps;\n        const manageAllBtn = (\n            <span className=\"manage-all-btn\">\n                <FormattedMessage {...messages.manageAllLinkText} />\n            </span>\n        );\n        const maxListSizeToRender = Math.min(maxCollaboratorListSize, MAX_COLLABORATOR_LIST_SIZE);\n\n        return (\n            <div className=\"usm-collaborator-list\">\n                <div className=\"manage-all-btn-container\">\n                    {this.createCollaboratorPageLink(manageAllBtn, manageLinkProps)}\n                </div>\n                <ul className=\"be collaborator-list\">\n                    {collaborators.slice(0, maxListSizeToRender).map((collaborator, index) => {\n                        const { collabID, type } = collaborator;\n                        return (\n                            <CollaboratorListItem\n                                key={`${collabID}-${type}`}\n                                collaborator={collaborator}\n                                index={index}\n                                trackingProps={{\n                                    usernameProps,\n                                    emailProps,\n                                }}\n                                canRemoveCollaborators={canRemoveCollaborators}\n                                onRemoveCollaborator={onRemoveCollaboratorClick}\n                            />\n                        );\n                    })}\n                    {collaborators.length > maxListSizeToRender && (\n                        <li className=\"collaborator-list-item more\">\n                            <div>\n                                <CollaborationBadge height={32} width={32} />\n                            </div>\n                            <div>\n                                {this.createCollaboratorPageLink(\n                                    <FormattedMessage {...messages.viewAdditionalPeopleText} />,\n                                    viewAdditionalProps,\n                                )}\n                            </div>\n                        </li>\n                    )}\n                </ul>\n                <ModalActions>\n                    <Button className=\"btn-done\" onClick={onDoneClick} type=\"button\" {...doneButtonProps}>\n                        <FormattedMessage {...commonMessages.done} />\n                    </Button>\n                </ModalActions>\n            </div>\n        );\n    }\n}\n\nexport default CollaboratorList;\n"],"mappings":"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","ignoreList":[]}

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

package/es/features/collaborator-avatars/CollaboratorListItem.js

@@ -3,14 +3,20 @@ import * as React from 'react';
 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 './CollaboratorListItem.scss';
 const CollaboratorListItem = props => {
   const {
     index,
-    trackingProps
+    trackingProps,
+    canRemoveCollaborators = false,
+    onRemoveCollaborator
   } = props;
   const {
     usernameProps,
@@ -26,7 +32,8 @@ const CollaboratorListItem = props => {
     isExternalCollab,
     profileURL,
     translatedRole,
-    userID
+    userID,
+    isRemovable = false
   } = props.collaborator;
   const userOrGroupNameContent = type !== COLLAB_GROUP_TYPE ? /*#__PURE__*/React.createElement("div", {
     className: classnames('name', type)
@@ -42,6 +49,9 @@ const CollaboratorListItem = props => {
   }, /*#__PURE__*/React.createElement(Link, _extends({
     href: `mailto:${email}`
   }, emailProps), email)) : null;
+  const roleNodeContent = /*#__PURE__*/React.createElement("div", {
+    className: "role"
+  }, type === COLLAB_PENDING_TYPE ? /*#__PURE__*/React.createElement(FormattedMessage, messages.pendingCollabText) : translatedRole);
   return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", {
     className: "collaborator-list-item"
   }, /*#__PURE__*/React.createElement("div", {
@@ -57,9 +67,20 @@ const CollaboratorListItem = props => {
     id: index,
     isExternalCollab: isExternalCollab,
     name: name
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "role"
-  }, type === COLLAB_PENDING_TYPE ? /*#__PURE__*/React.createElement(FormattedMessage, messages.pendingCollabText) : translatedRole)));
+  })), canRemoveCollaborators ? /*#__PURE__*/React.createElement("div", {
+    className: "user-actions"
+  }, roleNodeContent, isRemovable && /*#__PURE__*/React.createElement(Tooltip, {
+    isTabbable: false,
+    text: /*#__PURE__*/React.createElement(FormattedMessage, commonMessages.remove)
+  }, /*#__PURE__*/React.createElement(PlainButton, {
+    className: "remove-button",
+    onClick: () => onRemoveCollaborator?.(props.collaborator),
+    type: "button"
+  }, /*#__PURE__*/React.createElement(IconClose, {
+    color: "##6f6f6f",
+    height: 16,
+    width: 16
+  })))) : roleNodeContent));
 };
 export default CollaboratorListItem;
 //# sourceMappingURL=CollaboratorListItem.js.map

package/es/features/collaborator-avatars/CollaboratorListItem.js.flow

@@ -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/es/features/collaborator-avatars/CollaboratorListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollaboratorListItem.js","names":["React","classnames","FormattedMessage","Link","COLLAB_GROUP_TYPE","COLLAB_PENDING_TYPE","messages","CollaboratorAvatarItem","CollaboratorListItem","props","index","trackingProps","usernameProps","emailProps","email","expiration","hasCustomAvatar","name","type","imageURL","isExternalCollab","profileURL","translatedRole","userID","collaborator","userOrGroupNameContent","createElement","className","_extends","href","rel","target","emailContent","allowBadging","avatarUrl","id","pendingCollabText"],"sources":["../../../src/features/collaborator-avatars/CollaboratorListItem.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Link } from '../../components/link';\n\nimport { COLLAB_GROUP_TYPE, COLLAB_PENDING_TYPE } from './constants';\nimport messages from './messages';\nimport CollaboratorAvatarItem from './CollaboratorAvatarItem';\nimport './CollaboratorListItem.scss';\n\ntype Props = {\n    collaborator: Object,\n    index: number,\n    trackingProps: { emailProps: ?Object, usernameProps: ?Object },\n};\n\nconst CollaboratorListItem = (props: Props) => {\n    const { index, trackingProps } = props;\n    const { usernameProps, emailProps } = trackingProps;\n    const {\n        email,\n        expiration,\n        hasCustomAvatar,\n        name,\n        type,\n        imageURL,\n        isExternalCollab,\n        profileURL,\n        translatedRole,\n        userID,\n    } = props.collaborator;\n\n    const userOrGroupNameContent =\n        type !== COLLAB_GROUP_TYPE ? (\n            <div className={classnames('name', type)}>\n                <Link href={profileURL || `/profile/${userID}`} rel=\"noopener\" target=\"_blank\" {...usernameProps}>\n                    {name}\n                </Link>\n            </div>\n        ) : (\n            <div className={classnames('name', type)}>{name}</div>\n        );\n\n    const emailContent =\n        type !== COLLAB_GROUP_TYPE && email ? (\n            <div className=\"email\">\n                <Link href={`mailto:${email}`} {...emailProps}>\n                    {email}\n                </Link>\n            </div>\n        ) : null;\n\n    return (\n        <li>\n            <div className=\"collaborator-list-item\">\n                <div className=\"bdl-CollaboratorListItem-user user\">\n                    <div className=\"info\">\n                        {userOrGroupNameContent}\n                        {emailContent}\n                    </div>\n                    <CollaboratorAvatarItem\n                        allowBadging\n                        avatarUrl={imageURL}\n                        email={email}\n                        expiration={expiration}\n                        hasCustomAvatar={hasCustomAvatar}\n                        id={index}\n                        isExternalCollab={isExternalCollab}\n                        name={name}\n                    />\n                </div>\n                <div className=\"role\">\n                    {type === COLLAB_PENDING_TYPE ? (\n                        <FormattedMessage {...messages.pendingCollabText} />\n                    ) : (\n                        translatedRole\n                    )}\n                </div>\n            </div>\n        </li>\n    );\n};\n\nexport default CollaboratorListItem;\n"],"mappings":";AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,SAASC,iBAAiB,EAAEC,mBAAmB,QAAQ,aAAa;AACpE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAO,6BAA6B;AAQpC,MAAMC,oBAAoB,GAAIC,KAAY,IAAK;EAC3C,MAAM;IAAEC,KAAK;IAAEC;EAAc,CAAC,GAAGF,KAAK;EACtC,MAAM;IAAEG,aAAa;IAAEC;EAAW,CAAC,GAAGF,aAAa;EACnD,MAAM;IACFG,KAAK;IACLC,UAAU;IACVC,eAAe;IACfC,IAAI;IACJC,IAAI;IACJC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,cAAc;IACdC;EACJ,CAAC,GAAGd,KAAK,CAACe,YAAY;EAEtB,MAAMC,sBAAsB,GACxBP,IAAI,KAAKd,iBAAiB,gBACtBJ,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE1B,UAAU,CAAC,MAAM,EAAEiB,IAAI;EAAE,gBACrClB,KAAA,CAAA0B,aAAA,CAACvB,IAAI,EAAAyB,QAAA;IAACC,IAAI,EAAER,UAAU,IAAI,YAAYE,MAAM,EAAG;IAACO,GAAG,EAAC,UAAU;IAACC,MAAM,EAAC;EAAQ,GAAKnB,aAAa,GAC3FK,IACC,CACL,CAAC,gBAENjB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE1B,UAAU,CAAC,MAAM,EAAEiB,IAAI;EAAE,GAAED,IAAU,CACxD;EAEL,MAAMe,YAAY,GACdd,IAAI,KAAKd,iBAAiB,IAAIU,KAAK,gBAC/Bd,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAO,gBAClB3B,KAAA,CAAA0B,aAAA,CAACvB,IAAI,EAAAyB,QAAA;IAACC,IAAI,EAAE,UAAUf,KAAK;EAAG,GAAKD,UAAU,GACxCC,KACC,CACL,CAAC,GACN,IAAI;EAEZ,oBACId,KAAA,CAAA0B,aAAA,0BACI1B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAwB,gBACnC3B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAoC,gBAC/C3B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAM,GAChBF,sBAAsB,EACtBO,YACA,CAAC,eACNhC,KAAA,CAAA0B,aAAA,CAACnB,sBAAsB;IACnB0B,YAAY;IACZC,SAAS,EAAEf,QAAS;IACpBL,KAAK,EAAEA,KAAM;IACbC,UAAU,EAAEA,UAAW;IACvBC,eAAe,EAAEA,eAAgB;IACjCmB,EAAE,EAAEzB,KAAM;IACVU,gBAAgB,EAAEA,gBAAiB;IACnCH,IAAI,EAAEA;EAAK,CACd,CACA,CAAC,eACNjB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAM,GAChBT,IAAI,KAAKb,mBAAmB,gBACzBL,KAAA,CAAA0B,aAAA,CAACxB,gBAAgB,EAAKI,QAAQ,CAAC8B,iBAAoB,CAAC,GAEpDd,cAEH,CACJ,CACL,CAAC;AAEb,CAAC;AAED,eAAed,oBAAoB","ignoreList":[]}
+{"version":3,"file":"CollaboratorListItem.js","names":["React","classnames","FormattedMessage","Link","PlainButton","Tooltip","IconClose","COLLAB_GROUP_TYPE","COLLAB_PENDING_TYPE","messages","commonMessages","CollaboratorAvatarItem","CollaboratorListItem","props","index","trackingProps","canRemoveCollaborators","onRemoveCollaborator","usernameProps","emailProps","email","expiration","hasCustomAvatar","name","type","imageURL","isExternalCollab","profileURL","translatedRole","userID","isRemovable","collaborator","userOrGroupNameContent","createElement","className","_extends","href","rel","target","emailContent","roleNodeContent","pendingCollabText","allowBadging","avatarUrl","id","isTabbable","text","remove","onClick","color","height","width"],"sources":["../../../src/features/collaborator-avatars/CollaboratorListItem.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Link } from '../../components/link';\nimport PlainButton from '../../components/plain-button';\nimport Tooltip from '../../components/tooltip';\nimport IconClose from '../../icon/fill/X16';\nimport { COLLAB_GROUP_TYPE, COLLAB_PENDING_TYPE } from './constants';\nimport messages from './messages';\nimport commonMessages from '../../elements/common/messages';\nimport CollaboratorAvatarItem from './CollaboratorAvatarItem';\nimport type { collaboratorType } from '../unified-share-modal/flowTypes';\nimport './CollaboratorListItem.scss';\n\ntype Props = {\n    canRemoveCollaborators?: boolean,\n    collaborator: Object,\n    index: number,\n    onRemoveCollaborator?: (collaborator: collaboratorType) => void,\n    trackingProps: { emailProps: ?Object, usernameProps: ?Object },\n};\n\nconst CollaboratorListItem = (props: Props) => {\n    const { index, trackingProps, canRemoveCollaborators = false, onRemoveCollaborator } = props;\n    const { usernameProps, emailProps } = trackingProps;\n    const {\n        email,\n        expiration,\n        hasCustomAvatar,\n        name,\n        type,\n        imageURL,\n        isExternalCollab,\n        profileURL,\n        translatedRole,\n        userID,\n        isRemovable = false,\n    } = props.collaborator;\n\n    const userOrGroupNameContent =\n        type !== COLLAB_GROUP_TYPE ? (\n            <div className={classnames('name', type)}>\n                <Link href={profileURL || `/profile/${userID}`} rel=\"noopener\" target=\"_blank\" {...usernameProps}>\n                    {name}\n                </Link>\n            </div>\n        ) : (\n            <div className={classnames('name', type)}>{name}</div>\n        );\n\n    const emailContent =\n        type !== COLLAB_GROUP_TYPE && email ? (\n            <div className=\"email\">\n                <Link href={`mailto:${email}`} {...emailProps}>\n                    {email}\n                </Link>\n            </div>\n        ) : null;\n\n    const roleNodeContent = (\n        <div className=\"role\">\n            {type === COLLAB_PENDING_TYPE ? <FormattedMessage {...messages.pendingCollabText} /> : translatedRole}\n        </div>\n    );\n\n    return (\n        <li>\n            <div className=\"collaborator-list-item\">\n                <div className=\"bdl-CollaboratorListItem-user user\">\n                    <div className=\"info\">\n                        {userOrGroupNameContent}\n                        {emailContent}\n                    </div>\n                    <CollaboratorAvatarItem\n                        allowBadging\n                        avatarUrl={imageURL}\n                        email={email}\n                        expiration={expiration}\n                        hasCustomAvatar={hasCustomAvatar}\n                        id={index}\n                        isExternalCollab={isExternalCollab}\n                        name={name}\n                    />\n                </div>\n                {canRemoveCollaborators ? (\n                    <div className=\"user-actions\">\n                        {roleNodeContent}\n                        {isRemovable && (\n                            <Tooltip isTabbable={false} text={<FormattedMessage {...commonMessages.remove} />}>\n                                <PlainButton\n                                    className=\"remove-button\"\n                                    onClick={() => onRemoveCollaborator?.(props.collaborator)}\n                                    type=\"button\"\n                                >\n                                    <IconClose color=\"##6f6f6f\" height={16} width={16} />\n                                </PlainButton>\n                            </Tooltip>\n                        )}\n                    </div>\n                ) : (\n                    roleNodeContent\n                )}\n            </div>\n        </li>\n    );\n};\n\nexport default CollaboratorListItem;\n"],"mappings":"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","ignoreList":[]}

package/es/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/es/features/message-center/components/MessageCenter.js

@@ -71,6 +71,7 @@ function MessageCenter({
     setIsOpen(false);
   }
   const icon = /*#__PURE__*/React.createElement(ButtonComponent, {
+    badgeCount: unreadMessageCount,
     "data-resin-target": "messageCenterOpenModal",
     "data-testid": "message-center-unread-count",
     onClick: handleOnClick,

package/es/features/message-center/components/MessageCenter.js.flow

@@ -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/es/features/message-center/components/MessageCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCenter.js","names":["React","noop","Megaphone20","CountBadge","Badgeable","MessageCenterModal","Internationalize","MessageCenter","contentPreviewProps","getUnreadMessageCount","buttonComponent","ButtonComponent","getEligibleMessages","getToken","apiHost","postMarkAllMessagesAsSeen","overscanRowCount","language","messages","onMessageShown","isOpen","setIsOpen","useState","unreadMessageCount","setUnreadMessageCount","eligibleMessages","setEligibleMessages","isFetchingMessagesRef","useRef","useEffect","fetchUnreadMessageCount","count","err","fetchEligibleMessages","current","eligibleMessagesResponse","isOpenAndNoMessages","shouldPrefetch","handleOnClick","prevIsOpen","onRequestClose","icon","createElement","onClick","render","className","topRight","isVisible","shouldAnimate","value","Fragment"],"sources":["../../../../src/features/message-center/components/MessageCenter.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport Megaphone20 from '../../../icon/fill/Megaphone20';\nimport CountBadge from '../../../components/count-badge/CountBadge';\nimport Badgeable from '../../../components/badgeable/Badgeable';\nimport type { Token, StringMap } from '../../../common/types/core';\nimport MessageCenterModal from './message-center-modal/MessageCenterModal';\nimport type {\n    GetEligibleMessageCenterMessages,\n    UnreadEligibleMessageCenterMessageCount,\n    EligibleMessageCenterMessage,\n} from '../types';\nimport type { ContentPreviewProps } from '../../message-preview-content/MessagePreviewContent';\nimport Internationalize from '../../../elements/common/Internationalize';\n\ntype Props = {|\n    apiHost: string,\n    buttonComponent: React.ComponentType<{ render: () => React.Node }>,\n    contentPreviewProps?: ContentPreviewProps,\n    getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,\n    getToken: (fileId: string) => Promise<Token>,\n    getUnreadMessageCount: () => Promise<UnreadEligibleMessageCenterMessageCount>,\n    language?: string,\n    messages?: StringMap,\n    onMessageShown?: EligibleMessageCenterMessage => void,\n    overscanRowCount?: number,\n    postMarkAllMessagesAsSeen: (messageArray: Array<EligibleMessageCenterMessage> | Error) => Promise<null>,\n|};\n\nfunction MessageCenter({\n    contentPreviewProps,\n    getUnreadMessageCount,\n    buttonComponent: ButtonComponent,\n    getEligibleMessages,\n    getToken,\n    apiHost,\n    postMarkAllMessagesAsSeen,\n    overscanRowCount,\n    language,\n    messages,\n    onMessageShown = noop,\n}: Props) {\n    const [isOpen, setIsOpen] = React.useState(false);\n    const [unreadMessageCount, setUnreadMessageCount] = React.useState(null);\n    // TODO: create hook for fetching, loading\n    const [eligibleMessages, setEligibleMessages] = React.useState<GetEligibleMessageCenterMessages | null | Error>(\n        null,\n    );\n    const isFetchingMessagesRef = React.useRef(false);\n\n    React.useEffect(() => {\n        async function fetchUnreadMessageCount() {\n            try {\n                const { count } = await getUnreadMessageCount();\n                setUnreadMessageCount(count);\n            } catch (err) {\n                // TODO: add error handling\n            }\n        }\n\n        fetchUnreadMessageCount();\n    }, [getUnreadMessageCount]);\n\n    React.useEffect(() => {\n        async function fetchEligibleMessages() {\n            if (!isFetchingMessagesRef.current) {\n                isFetchingMessagesRef.current = true;\n                try {\n                    const eligibleMessagesResponse = await getEligibleMessages();\n                    setEligibleMessages(eligibleMessagesResponse);\n                } catch (err) {\n                    setEligibleMessages(err);\n                }\n                isFetchingMessagesRef.current = false;\n            }\n        }\n\n        const isOpenAndNoMessages = isOpen && !eligibleMessages;\n        // if there are unread messages, prefetch the data as the user is more likely to click on the message center\n        const shouldPrefetch = !isOpen && !eligibleMessages && !!unreadMessageCount;\n        if (isOpenAndNoMessages || shouldPrefetch) {\n            fetchEligibleMessages();\n        }\n    }, [eligibleMessages, getEligibleMessages, isOpen, unreadMessageCount]);\n\n    function handleOnClick() {\n        setIsOpen(prevIsOpen => !prevIsOpen);\n        if (unreadMessageCount && unreadMessageCount > 0 && eligibleMessages) {\n            try {\n                postMarkAllMessagesAsSeen(eligibleMessages);\n            } catch (err) {\n                // swallow\n            }\n            setUnreadMessageCount(0);\n        }\n    }\n\n    function onRequestClose() {\n        setIsOpen(false);\n    }\n\n    const icon = (\n        <ButtonComponent\n            data-resin-target=\"messageCenterOpenModal\"\n            data-testid=\"message-center-unread-count\"\n            onClick={handleOnClick}\n            render={() => (\n                <Badgeable\n                    className=\"icon-bell-badge\"\n                    topRight={\n                        <CountBadge isVisible={!!unreadMessageCount} shouldAnimate value={unreadMessageCount || 0} />\n                    }\n                >\n                    <Megaphone20 className=\"bdl-MessageCenter-icon\" />\n                </Badgeable>\n            )}\n        />\n    );\n\n    return (\n        <Internationalize messages={messages} language={language}>\n            <span className=\"bdl-MessageCenter\" data-resin-component=\"messageCenter\">\n                {isOpen ? (\n                    <>\n                        {icon}\n                        <MessageCenterModal\n                            apiHost={apiHost}\n                            contentPreviewProps={contentPreviewProps}\n                            getToken={getToken}\n                            messages={eligibleMessages}\n                            onRequestClose={onRequestClose}\n                            overscanRowCount={overscanRowCount}\n                            onMessageShown={onMessageShown}\n                        />\n                    </>\n                ) : (\n                    <>{icon}</>\n                )}\n            </span>\n        </Internationalize>\n    );\n}\n\nexport default MessageCenter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MessageCenter.js","names":["React","noop","Megaphone20","CountBadge","Badgeable","MessageCenterModal","Internationalize","MessageCenter","contentPreviewProps","getUnreadMessageCount","buttonComponent","ButtonComponent","getEligibleMessages","getToken","apiHost","postMarkAllMessagesAsSeen","overscanRowCount","language","messages","onMessageShown","isOpen","setIsOpen","useState","unreadMessageCount","setUnreadMessageCount","eligibleMessages","setEligibleMessages","isFetchingMessagesRef","useRef","useEffect","fetchUnreadMessageCount","count","err","fetchEligibleMessages","current","eligibleMessagesResponse","isOpenAndNoMessages","shouldPrefetch","handleOnClick","prevIsOpen","onRequestClose","icon","createElement","badgeCount","onClick","render","className","topRight","isVisible","shouldAnimate","value","Fragment"],"sources":["../../../../src/features/message-center/components/MessageCenter.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport Megaphone20 from '../../../icon/fill/Megaphone20';\nimport CountBadge from '../../../components/count-badge/CountBadge';\nimport Badgeable from '../../../components/badgeable/Badgeable';\nimport type { Token, StringMap } from '../../../common/types/core';\nimport MessageCenterModal from './message-center-modal/MessageCenterModal';\nimport type {\n    GetEligibleMessageCenterMessages,\n    UnreadEligibleMessageCenterMessageCount,\n    EligibleMessageCenterMessage,\n} from '../types';\nimport type { ContentPreviewProps } from '../../message-preview-content/MessagePreviewContent';\nimport Internationalize from '../../../elements/common/Internationalize';\n\ntype Props = {|\n    apiHost: string,\n    buttonComponent: React.ComponentType<{ render: () => React.Node, badgeCount: null | number }>,\n    contentPreviewProps?: ContentPreviewProps,\n    getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,\n    getToken: (fileId: string) => Promise<Token>,\n    getUnreadMessageCount: () => Promise<UnreadEligibleMessageCenterMessageCount>,\n    language?: string,\n    messages?: StringMap,\n    onMessageShown?: EligibleMessageCenterMessage => void,\n    overscanRowCount?: number,\n    postMarkAllMessagesAsSeen: (messageArray: Array<EligibleMessageCenterMessage> | Error) => Promise<null>,\n|};\n\nfunction MessageCenter({\n    contentPreviewProps,\n    getUnreadMessageCount,\n    buttonComponent: ButtonComponent,\n    getEligibleMessages,\n    getToken,\n    apiHost,\n    postMarkAllMessagesAsSeen,\n    overscanRowCount,\n    language,\n    messages,\n    onMessageShown = noop,\n}: Props) {\n    const [isOpen, setIsOpen] = React.useState(false);\n    const [unreadMessageCount, setUnreadMessageCount] = React.useState(null);\n    // TODO: create hook for fetching, loading\n    const [eligibleMessages, setEligibleMessages] = React.useState<GetEligibleMessageCenterMessages | null | Error>(\n        null,\n    );\n    const isFetchingMessagesRef = React.useRef(false);\n\n    React.useEffect(() => {\n        async function fetchUnreadMessageCount() {\n            try {\n                const { count } = await getUnreadMessageCount();\n                setUnreadMessageCount(count);\n            } catch (err) {\n                // TODO: add error handling\n            }\n        }\n\n        fetchUnreadMessageCount();\n    }, [getUnreadMessageCount]);\n\n    React.useEffect(() => {\n        async function fetchEligibleMessages() {\n            if (!isFetchingMessagesRef.current) {\n                isFetchingMessagesRef.current = true;\n                try {\n                    const eligibleMessagesResponse = await getEligibleMessages();\n                    setEligibleMessages(eligibleMessagesResponse);\n                } catch (err) {\n                    setEligibleMessages(err);\n                }\n                isFetchingMessagesRef.current = false;\n            }\n        }\n\n        const isOpenAndNoMessages = isOpen && !eligibleMessages;\n        // if there are unread messages, prefetch the data as the user is more likely to click on the message center\n        const shouldPrefetch = !isOpen && !eligibleMessages && !!unreadMessageCount;\n        if (isOpenAndNoMessages || shouldPrefetch) {\n            fetchEligibleMessages();\n        }\n    }, [eligibleMessages, getEligibleMessages, isOpen, unreadMessageCount]);\n\n    function handleOnClick() {\n        setIsOpen(prevIsOpen => !prevIsOpen);\n        if (unreadMessageCount && unreadMessageCount > 0 && eligibleMessages) {\n            try {\n                postMarkAllMessagesAsSeen(eligibleMessages);\n            } catch (err) {\n                // swallow\n            }\n            setUnreadMessageCount(0);\n        }\n    }\n\n    function onRequestClose() {\n        setIsOpen(false);\n    }\n\n    const icon = (\n        <ButtonComponent\n            badgeCount={unreadMessageCount}\n            data-resin-target=\"messageCenterOpenModal\"\n            data-testid=\"message-center-unread-count\"\n            onClick={handleOnClick}\n            render={() => (\n                <Badgeable\n                    className=\"icon-bell-badge\"\n                    topRight={\n                        <CountBadge isVisible={!!unreadMessageCount} shouldAnimate value={unreadMessageCount || 0} />\n                    }\n                >\n                    <Megaphone20 className=\"bdl-MessageCenter-icon\" />\n                </Badgeable>\n            )}\n        />\n    );\n\n    return (\n        <Internationalize messages={messages} language={language}>\n            <span className=\"bdl-MessageCenter\" data-resin-component=\"messageCenter\">\n                {isOpen ? (\n                    <>\n                        {icon}\n                        <MessageCenterModal\n                            apiHost={apiHost}\n                            contentPreviewProps={contentPreviewProps}\n                            getToken={getToken}\n                            messages={eligibleMessages}\n                            onRequestClose={onRequestClose}\n                            overscanRowCount={overscanRowCount}\n                            onMessageShown={onMessageShown}\n                        />\n                    </>\n                ) : (\n                    <>{icon}</>\n                )}\n            </span>\n        </Internationalize>\n    );\n}\n\nexport default MessageCenter;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,44 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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';
+const RemoveCollaboratorConfirmModal = ({
+  isOpen,
+  onRequestClose,
+  onSubmit,
+  submitting,
+  collaborator,
+  okayButtonProps,
+  modalProps,
+  cancelButtonProps,
+  onLoad
+}) => {
+  useEffect(() => {
+    onLoad?.();
+  }, [onLoad]);
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    className: "be-modal",
+    focusElementSelector: ".btn-primary",
+    isOpen: isOpen,
+    onRequestClose: submitting ? undefined : onRequestClose,
+    title: /*#__PURE__*/React.createElement(FormattedMessage, messages.removeCollaboratorConfirmationTitle),
+    type: "alert"
+  }, modalProps), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.removeCollaboratorConfirmationDescription, {
+    values: {
+      name: collaborator?.email ?? collaborator?.name
+    }
+  })), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(Button, _extends({
+    isDisabled: submitting,
+    onClick: onRequestClose
+  }, cancelButtonProps), /*#__PURE__*/React.createElement(FormattedMessage, commonMessages.cancel)), /*#__PURE__*/React.createElement(PrimaryButton, _extends({
+    isDisabled: submitting,
+    isLoading: submitting,
+    onClick: onSubmit
+  }, okayButtonProps), /*#__PURE__*/React.createElement(FormattedMessage, commonMessages.okay))));
+};
+export default RemoveCollaboratorConfirmModal;
+//# sourceMappingURL=RemoveCollaboratorConfirmModal.js.map

package/es/features/unified-share-modal/RemoveCollaboratorConfirmModal.js.flow

@@ -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/es/features/unified-share-modal/RemoveCollaboratorConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveCollaboratorConfirmModal.js","names":["React","useEffect","FormattedMessage","Modal","ModalActions","Button","PrimaryButton","commonMessages","messages","RemoveCollaboratorConfirmModal","isOpen","onRequestClose","onSubmit","submitting","collaborator","okayButtonProps","modalProps","cancelButtonProps","onLoad","createElement","_extends","className","focusElementSelector","undefined","title","removeCollaboratorConfirmationTitle","type","removeCollaboratorConfirmationDescription","values","name","email","isDisabled","onClick","cancel","isLoading","okay"],"sources":["../../../src/features/unified-share-modal/RemoveCollaboratorConfirmModal.js"],"sourcesContent":["// @flow\nimport React, { useEffect } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Modal, ModalActions } from '../../components/modal';\nimport Button from '../../components/button';\nimport PrimaryButton from '../../components/primary-button';\nimport commonMessages from '../../common/messages';\nimport messages from './messages';\nimport type { collaboratorType } from './flowTypes';\n\ntype Props = {\n    cancelButtonProps?: Object,\n    collaborator: ?collaboratorType,\n    isOpen: boolean,\n    modalProps?: Object,\n    okayButtonProps?: Object,\n    onLoad?: Function,\n    onRequestClose: Function,\n    onSubmit: Function,\n    submitting: boolean,\n};\n\nconst RemoveCollaboratorConfirmModal = ({\n    isOpen,\n    onRequestClose,\n    onSubmit,\n    submitting,\n    collaborator,\n    okayButtonProps,\n    modalProps,\n    cancelButtonProps,\n    onLoad,\n}: Props) => {\n    useEffect(() => {\n        onLoad?.();\n    }, [onLoad]);\n\n    return (\n        <Modal\n            className=\"be-modal\"\n            focusElementSelector=\".btn-primary\"\n            isOpen={isOpen}\n            onRequestClose={submitting ? undefined : onRequestClose}\n            title={<FormattedMessage {...messages.removeCollaboratorConfirmationTitle} />}\n            type=\"alert\"\n            {...modalProps}\n        >\n            <FormattedMessage\n                {...messages.removeCollaboratorConfirmationDescription}\n                values={{\n                    name: collaborator?.email ?? collaborator?.name,\n                }}\n            />\n            <ModalActions>\n                <Button isDisabled={submitting} onClick={onRequestClose} {...cancelButtonProps}>\n                    <FormattedMessage {...commonMessages.cancel} />\n                </Button>\n                <PrimaryButton isDisabled={submitting} isLoading={submitting} onClick={onSubmit} {...okayButtonProps}>\n                    <FormattedMessage {...commonMessages.okay} />\n                </PrimaryButton>\n            </ModalActions>\n        </Modal>\n    );\n};\n\nexport default RemoveCollaboratorConfirmModal;\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,KAAK,EAAEC,YAAY,QAAQ,wBAAwB;AAC5D,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,cAAc,MAAM,uBAAuB;AAClD,OAAOC,QAAQ,MAAM,YAAY;AAejC,MAAMC,8BAA8B,GAAGA,CAAC;EACpCC,MAAM;EACNC,cAAc;EACdC,QAAQ;EACRC,UAAU;EACVC,YAAY;EACZC,eAAe;EACfC,UAAU;EACVC,iBAAiB;EACjBC;AACG,CAAC,KAAK;EACTjB,SAAS,CAAC,MAAM;IACZiB,MAAM,GAAG,CAAC;EACd,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,oBACIlB,KAAA,CAAAmB,aAAA,CAAChB,KAAK,EAAAiB,QAAA;IACFC,SAAS,EAAC,UAAU;IACpBC,oBAAoB,EAAC,cAAc;IACnCZ,MAAM,EAAEA,MAAO;IACfC,cAAc,EAAEE,UAAU,GAAGU,SAAS,GAAGZ,cAAe;IACxDa,KAAK,eAAExB,KAAA,CAAAmB,aAAA,CAACjB,gBAAgB,EAAKM,QAAQ,CAACiB,mCAAsC,CAAE;IAC9EC,IAAI,EAAC;EAAO,GACRV,UAAU,gBAEdhB,KAAA,CAAAmB,aAAA,CAACjB,gBAAgB,EAAAkB,QAAA,KACTZ,QAAQ,CAACmB,yCAAyC;IACtDC,MAAM,EAAE;MACJC,IAAI,EAAEf,YAAY,EAAEgB,KAAK,IAAIhB,YAAY,EAAEe;IAC/C;EAAE,EACL,CAAC,eACF7B,KAAA,CAAAmB,aAAA,CAACf,YAAY,qBACTJ,KAAA,CAAAmB,aAAA,CAACd,MAAM,EAAAe,QAAA;IAACW,UAAU,EAAElB,UAAW;IAACmB,OAAO,EAAErB;EAAe,GAAKM,iBAAiB,gBAC1EjB,KAAA,CAAAmB,aAAA,CAACjB,gBAAgB,EAAKK,cAAc,CAAC0B,MAAS,CAC1C,CAAC,eACTjC,KAAA,CAAAmB,aAAA,CAACb,aAAa,EAAAc,QAAA;IAACW,UAAU,EAAElB,UAAW;IAACqB,SAAS,EAAErB,UAAW;IAACmB,OAAO,EAAEpB;EAAS,GAAKG,eAAe,gBAChGf,KAAA,CAAAmB,aAAA,CAACjB,gBAAgB,EAAKK,cAAc,CAAC4B,IAAO,CACjC,CACL,CACX,CAAC;AAEhB,CAAC;AAED,eAAe1B,8BAA8B","ignoreList":[]}

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

@@ -619,7 +619,9 @@ class UnifiedShareForm extends React.Component {
     const {
       item,
       collaboratorsList,
-      trackingProps
+      trackingProps,
+      canRemoveCollaborators,
+      onRemoveCollaboratorClick
     } = this.props;
     const {
       name,
@@ -639,7 +641,9 @@ class UnifiedShareForm extends React.Component {
         onDoneClick: this.closeCollaboratorList,
         item: item,
         collaborators: collaborators,
-        trackingProps: collaboratorListTracking
+        trackingProps: collaboratorListTracking,
+        canRemoveCollaborators: canRemoveCollaborators,
+        onRemoveCollaboratorClick: onRemoveCollaboratorClick
       });
     }
     return listContent;
@@ -768,7 +772,8 @@ _defineProperty(UnifiedShareForm, "defaultProps", {
     modalTracking: {},
     removeLinkConfirmModalTracking: {},
     sharedLinkEmailTracking: {},
-    sharedLinkTracking: {}
+    sharedLinkTracking: {},
+    removeCollaboratorConfirmModalTracking: {}
   }
 });
 export { UnifiedShareForm as UnifiedShareFormBase };

package/es/features/unified-share-modal/UnifiedShareForm.js.flow

@@ -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}
                 />
             );
         }