feat(unified-share-modal): show classification for the file (#1425)

* fix(usm): take in children elements

* feat(unified-share-modal): address cr feedback

* feat(unified-share-modal): title component

Author: feixuanli

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

@@ -16,6 +16,7 @@ import { ITEM_TYPE_WEBLINK } from '../../common/constants';
 import Tooltip from '../../components/tooltip';
 import { CollaboratorAvatars, CollaboratorList } from '../collaborator-avatars';
 
+import UnifiedShareModalTitle from './UnifiedShareModalTitle';
 import InviteePermissionsMenu from './InviteePermissionsMenu';
 import messages from './messages';
 import RemoveLinkConfirmModal from './RemoveLinkConfirmModal';
@@ -52,6 +53,7 @@ type Props = {
     changeSharedLinkPermissionLevel: (
         newPermissionLevel: permissionLevelType,
     ) => Promise<{ permissionLevel: permissionLevelType }>,
+    classification: ClassificationInfo,
     /** If item is classified this property contains the classification name */
     classificationName?: string,
     /** Message warning about restrictions regarding inviting collaborators to the item */
@@ -618,44 +620,6 @@ class UnifiedShareModal extends React.Component<Props, State> {
         );
     }
 
-    renderModalTitle() {
-        const { isEmailLinkSectionExpanded, showCollaboratorList } = this.state;
-        const { item } = this.props;
-        const { name } = item;
-        let title;
-
-        if (isEmailLinkSectionExpanded) {
-            title = (
-                <FormattedMessage
-                    {...messages.emailModalTitle}
-                    values={{
-                        itemName: name,
-                    }}
-                />
-            );
-        } else if (showCollaboratorList) {
-            title = (
-                <FormattedMessage
-                    {...messages.collaboratorListTitle}
-                    values={{
-                        itemName: name,
-                    }}
-                />
-            );
-        } else {
-            title = (
-                <FormattedMessage
-                    {...messages.modalTitle}
-                    values={{
-                        itemName: name,
-                    }}
-                />
-            );
-        }
-
-        return title;
-    }
-
     renderCollaboratorList() {
         const { item, collaboratorsList, trackingProps } = this.props;
         const { name, type } = item;
@@ -685,6 +649,7 @@ class UnifiedShareModal extends React.Component<Props, State> {
         const {
             changeSharedLinkAccessLevel,
             changeSharedLinkPermissionLevel,
+            classification,
             classificationName,
             focusSharedLinkOnLoad,
             item,
@@ -736,7 +701,14 @@ class UnifiedShareModal extends React.Component<Props, State> {
                     className="unified-share-modal"
                     isOpen={isConfirmModalOpen ? false : isOpen}
                     onRequestClose={submitting ? undefined : onRequestClose}
-                    title={<span>{this.renderModalTitle()}</span>}
+                    title={
+                        <UnifiedShareModalTitle
+                            classification={classification}
+                            isEmailLinkSectionExpanded={isEmailLinkSectionExpanded}
+                            showCollaboratorList={showCollaboratorList}
+                            item={item}
+                        />
+                    }
                     {...extendedModalProps}
                 >
                     <LoadingIndicatorWrapper isLoading={isFetching} hideContent>

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

@@ -50,6 +50,16 @@
 }
 
 .unified-share-modal {
+    /** title and classifiction label */
+    .bdl-UnifiedShareModalTitle {
+        display: flex;
+        flex-flow: row wrap;
+
+        .bdl-UnifiedShareModalTitle-classification {
+            margin-left: 6px;
+        }
+    }
+
     /** overrides for USM sub-components */
     .text-area-container {
         position: static;

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

@@ -0,0 +1,69 @@
+// @flow
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Classification from '../classification';
+import messages from './messages';
+import type { item as ItemType } from './flowTypes';
+
+type Props = {
+    classification: ClassificationInfo,
+    isEmailLinkSectionExpanded: boolean,
+    item: ItemType,
+    showCollaboratorList: boolean,
+};
+
+function getTitle(isEmailLinkSectionExpanded, showCollaboratorList, item) {
+    const { name } = item;
+    let title;
+
+    if (isEmailLinkSectionExpanded) {
+        title = (
+            <FormattedMessage
+                {...messages.emailModalTitle}
+                values={{
+                    itemName: name,
+                }}
+            />
+        );
+    } else if (showCollaboratorList) {
+        title = (
+            <FormattedMessage
+                {...messages.collaboratorListTitle}
+                values={{
+                    itemName: name,
+                }}
+            />
+        );
+    } else {
+        title = (
+            <FormattedMessage
+                {...messages.modalTitle}
+                values={{
+                    itemName: name,
+                }}
+            />
+        );
+    }
+
+    return title;
+}
+
+const UnifiedShareModalTitle = ({ classification, isEmailLinkSectionExpanded, showCollaboratorList, item }: Props) => {
+    const title = getTitle(isEmailLinkSectionExpanded, showCollaboratorList, item);
+    const { advisoryMessage, name } = classification;
+
+    return (
+        <span className="bdl-UnifiedShareModalTitle">
+            {title}
+            <Classification
+                advisoryMessage={advisoryMessage}
+                messageStyle="tooltip"
+                name={name}
+                className="bdl-UnifiedShareModalTitle-classification"
+            />
+        </span>
+    );
+};
+
+export default UnifiedShareModalTitle;

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

@@ -33,6 +33,7 @@ describe('features/unified-share-modal/UnifiedShareModal', () => {
     const getWrapper = (props = {}) =>
         shallow(
             <UnifiedShareModal
+                classification={{ advisoryMessage: undefined, name: undefined }}
                 collaborationRestrictionWarning=""
                 getInitialData={jest.fn().mockImplementation(() => Promise.resolve('test'))}
                 intl={intl}

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

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import UnifiedShareModalTitle from '../UnifiedShareModalTitle';
+
+describe('features/unified-share-modal/HeaderTitle', () => {
+    let wrapper;
+    const defaultItem = {
+        id: '111',
+        name: 'test file',
+        type: 'file',
+        grantedPermissions: {
+            itemShare: true,
+        },
+        hideCollaborators: false,
+    };
+
+    const getWrapper = (props = {}) => {
+        return shallow(
+            <UnifiedShareModalTitle
+                classification={{ advisoryMessage: 'Internal use only', name: 'TopSecret' }}
+                item={defaultItem}
+                {...props}
+            />,
+        );
+    };
+
+    beforeEach(() => {
+        wrapper = getWrapper();
+    });
+
+    test('should render classifiction label with title', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+});