feat(unified-share-modal): add custom permission descriptions (#4071)

* feat(unified-share-modal): add custom permission descriptions

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

* feat(unified-share-modal): Add custom description to USM story

Author: rss-maksim

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

@@ -8,11 +8,16 @@ import { EDITOR, CO_OWNER, PREVIEWER, PREVIEWER_UPLOADER, VIEWER, VIEWER_UPLOADE
 import messages from './messages';
 
 type Props = {
+    description?: string,
     inviteePermissionLevel: string,
     itemType: ItemType,
 };
 
-const InviteePermissionDescription = ({ inviteePermissionLevel, itemType }: Props) => {
+const InviteePermissionDescription = ({ description, inviteePermissionLevel, itemType }: Props) => {
+    if (description) {
+        return <small className="usm-menu-description">{description}</small>;
+    }
+
     const permissionDescriptions = {
         [EDITOR]: itemType === 'folder' ? messages.editorLevelDescription : messages.editorLevelFileDescription,
         [CO_OWNER]: messages.coownerLevelDescription,
@@ -23,11 +28,11 @@ const InviteePermissionDescription = ({ inviteePermissionLevel, itemType }: Prop
         [UPLOADER]: messages.uploaderLevelDescription,
     };
 
-    const description = permissionDescriptions[inviteePermissionLevel];
+    const defaultDescription = permissionDescriptions[inviteePermissionLevel];
 
     return (
         <small className="usm-menu-description">
-            <FormattedMessage {...description} />
+            <FormattedMessage {...defaultDescription} />
         </small>
     );
 };

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

@@ -10,11 +10,17 @@ import messages from './messages';
 
 type Props = {
     hasDescription?: boolean,
+    inviteePermissionDescription?: string,
     inviteePermissionLevel: string,
     itemType: ItemType,
 };
 
-const InviteePermissionsLabel = ({ hasDescription, inviteePermissionLevel, itemType }: Props) => {
+const InviteePermissionsLabel = ({
+    hasDescription,
+    inviteePermissionDescription,
+    inviteePermissionLevel,
+    itemType,
+}: Props) => {
     const permissionOptionsTexts = {
         [EDITOR]: messages.editorLevelText,
         [CO_OWNER]: messages.coownerLevelText,
@@ -40,7 +46,11 @@ const InviteePermissionsLabel = ({ hasDescription, inviteePermissionLevel, itemT
             <strong>
                 <FormattedMessage {...permissionOptionsTexts[inviteePermissionLevel]} />{' '}
             </strong>
-            <InviteePermissionsDescription inviteePermissionLevel={inviteePermissionLevel} itemType={itemType} />
+            <InviteePermissionsDescription
+                description={inviteePermissionDescription}
+                inviteePermissionLevel={inviteePermissionLevel}
+                itemType={itemType}
+            />
         </span>
     ) : (
         <FormattedMessage {...permissionLabelTexts[inviteePermissionLevel]} />

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

@@ -58,6 +58,7 @@ class InviteePermissionsMenu extends Component<Props> {
                         >
                             <InviteePermissionsLabel
                                 hasDescription
+                                inviteePermissionDescription={level.description}
                                 inviteePermissionLevel={level.value}
                                 inviteePermissions
                                 itemType={itemType}
@@ -70,13 +71,8 @@ class InviteePermissionsMenu extends Component<Props> {
     }
 
     render() {
-        const {
-            inviteePermissions,
-            inviteePermissionsButtonProps,
-            inviteePermissionLevel,
-            disabled,
-            itemType,
-        } = this.props;
+        const { inviteePermissions, inviteePermissionsButtonProps, inviteePermissionLevel, disabled, itemType } =
+            this.props;
         const defaultPermissionLevel = getDefaultPermissionLevel(inviteePermissions);
         const selectedPermissionLevel = inviteePermissionLevel || defaultPermissionLevel;
         const disabledTooltip =

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

@@ -45,4 +45,19 @@ describe('features/unified-share-modal/InviteePermissionsDescription', () => {
             'Upload, download, preview, share, and edit',
         );
     });
+
+    test('should render custom description when supplied', () => {
+        const customDescription = 'Custom description for editor';
+        const inviteePermissionDescription = shallow(
+            <InviteePermissionsDescription
+                inviteePermissionLevel={EDITOR}
+                itemType="file"
+                description={customDescription}
+            />,
+        );
+
+        const description = inviteePermissionDescription.find('small').text();
+
+        expect(description).toBe(customDescription);
+    });
 });

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { EDITOR, CO_OWNER, PREVIEWER, PREVIEWER_UPLOADER, VIEWER, VIEWER_UPLOADER, UPLOADER } from '../constants';
 import InviteePermissionsLabel from '../InviteePermissionsLabel';
+import InviteePermissionsDescription from '../InviteePermissionsDescription';
 
 describe('features/unified-share-modal/InviteePermissionsLabel', () => {
     [
@@ -73,4 +74,20 @@ describe('features/unified-share-modal/InviteePermissionsLabel', () => {
             expect(inviteePermissionLabel).toMatchSnapshot();
         });
     });
+
+    test('should render custom description when supplied', () => {
+        const inviteePermissionDescription = 'Upload, download, preview, share, and edit';
+
+        const inviteePermissionLabel = shallow(
+            <InviteePermissionsLabel
+                hasDescription
+                inviteePermissionDescription={inviteePermissionDescription}
+                inviteePermissionLevel={EDITOR}
+            />,
+        );
+
+        expect(inviteePermissionLabel.find(InviteePermissionsDescription).prop('description')).toBe(
+            inviteePermissionDescription,
+        );
+    });
 });

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

@@ -68,6 +68,7 @@ export type SuggestedCollabLookup = {
 
 export type inviteePermissionType = {
     default: boolean,
+    description?: string,
     disabled?: boolean,
     text: string,
     value: string,

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

@@ -1017,7 +1017,12 @@ export const withRemoveCollaborators = () => {
                     getInitialData={getInitialData}
                     inviteePermissions={[
                         { default: false, text: 'Co-owner', value: 'Co-owner' },
-                        { default: true, text: 'Editor', value: 'Editor' },
+                        {
+                            default: true,
+                            text: 'Editor',
+                            value: 'Editor',
+                            description: 'Custom description: Upload, download, preview, share and edit',
+                        },
                         { default: false, text: 'Viewer Uploader', value: 'Viewer Uploader' },
                         { default: false, text: 'Previewer Uploader', value: 'Previewer Uploader' },
                         { default: false, text: 'Viewer', value: 'Viewer' },