feat(shared-link-settings-modal): Disable direct downloads if classified (#1500)

Author: feixuanli

i18n/en-US.properties

@@ -1116,6 +1116,10 @@ boxui.share.sharedLinkSettings.allowDownloadLabel = Allow users with the Shared
 boxui.share.sharedLinkSettings.allowDownloadTitle = Allow Download
 # Label for Custom URL text input field
 boxui.share.sharedLinkSettings.customURLLabel = Non-private custom URL
+# Text to show that direct link download is disabled due to applied shield access policy with classification
+boxui.share.sharedLinkSettings.directDownloadBlockedByAccessPolicyWithClassification = Download has been disabled for content due to the classification
+# Text to show that direct link download is disabled due to applied shield access policy without classification
+boxui.share.sharedLinkSettings.directDownloadBlockedByAccessPolicyWithoutClassification = Download has been disabled for content without classification.
 # Title for Direct Link section
 boxui.share.sharedLinkSettings.directLinkLabel = Direct Link
 # Label for option to enable expiration on a Shared Link

src/features/shared-link-settings-modal/AllowDownloadSection.js

@@ -1,20 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
 
 import Checkbox from '../../components/checkbox';
 import TextInputWithCopyButton from '../../components/text-input-with-copy-button';
 import Fieldset from '../../components/fieldset';
+import Tooltip from '../../components/tooltip';
 
 import messages from './messages';
 
 const AllowDownloadSection = ({
     canChangeDownload,
+    classification,
     directLink,
     directLinkInputProps = {},
     downloadCheckboxProps = {},
     isDirectLinkAvailable,
     isDirectLinkUnavailableDueToDownloadSettings,
+    isDirectLinkUnavailableDueToAccessPolicy,
     isDownloadAvailable,
     isDownloadEnabled,
     onChange,
@@ -35,23 +39,40 @@ const AllowDownloadSection = ({
         </div>
     );
 
+    const tooltipMessage = classification
+        ? { ...messages.directDownloadBlockedByAccessPolicyWithClassification }
+        : { ...messages.directDownloadBlockedByAccessPolicyWithoutClassification };
+
+    const allowDownloadSectionClass = classNames('bdl-AllowDownloadSection', {
+        'bdl-is-disabled': isDirectLinkUnavailableDueToAccessPolicy,
+    });
+    const isDirectLinkSectionVisible =
+        (isDirectLinkAvailable || isDirectLinkUnavailableDueToDownloadSettings) && isDownloadEnabled;
+
     if (isDownloadAvailable) {
         return (
-            <div>
+            <div className={allowDownloadSectionClass}>
                 <hr />
-                <Fieldset title={<FormattedMessage {...messages.allowDownloadTitle} />}>
-                    <Checkbox
-                        isChecked={isDownloadEnabled}
-                        isDisabled={!canChangeDownload}
-                        label={<FormattedMessage {...messages.allowDownloadLabel} />}
-                        name="isDownloadEnabled"
-                        onChange={onChange}
-                        {...downloadCheckboxProps}
-                    />
-                    {(isDirectLinkAvailable || isDirectLinkUnavailableDueToDownloadSettings) && isDownloadEnabled
-                        ? directLinkSection
-                        : null}
-                </Fieldset>
+                <Tooltip
+                    isDisabled={!isDirectLinkUnavailableDueToAccessPolicy}
+                    text={<FormattedMessage {...tooltipMessage} />}
+                    position="middle-left"
+                >
+                    <Fieldset
+                        disabled={isDirectLinkUnavailableDueToAccessPolicy}
+                        title={<FormattedMessage {...messages.allowDownloadTitle} />}
+                    >
+                        <Checkbox
+                            isChecked={isDownloadEnabled}
+                            isDisabled={!canChangeDownload || isDirectLinkUnavailableDueToAccessPolicy}
+                            label={<FormattedMessage {...messages.allowDownloadLabel} />}
+                            name="isDownloadEnabled"
+                            onChange={onChange}
+                            {...downloadCheckboxProps}
+                        />
+                        {isDirectLinkSectionVisible && directLinkSection}
+                    </Fieldset>
+                </Tooltip>
             </div>
         );
     }

src/features/shared-link-settings-modal/AllowDownloadSection.scss

@@ -0,0 +1,5 @@
+.bdl-AllowDownloadSection {
+    &.bdl-is-disabled {
+        opacity: .5;
+    }
+}

src/features/shared-link-settings-modal/README.md

@@ -26,6 +26,20 @@ const fakeRequest = val => {
         <SharedLinkSettingsModal
             accessLevel="peopleWithTheLink"
             canChangeVanityName
+            item={{
+                bannerPolicy: {
+                    body: 'test',
+                },
+                classification: 'internal',
+                grantedPermissions: {
+                    itemShare: true
+                },
+                hideCollaborators: false,
+                id: 12345,
+                name: 'My Example Folder',
+                type: 'folder',
+                typedID: 'd_12345'
+            }}
             isOpen
             onRequestClose={ () => setState({ isOpen: false })}
             onSubmit={ fakeRequest }
@@ -42,6 +56,7 @@ const fakeRequest = val => {
             directLink="https://box.com/download/path"
             isDirectLinkAvailable
             isDirectLinkUnavailableDueToDownloadSettings={ false }
+            isDirectLinkUnavailableDueToAccessPolicy
             vanityNameInputProps={ { 'data-resin-target': 'test' } }
             passwordCheckboxProps={ { 'data-resin-target': 'test' } }
             passwordInputProps={ { 'data-resin-target': 'test' } }

src/features/shared-link-settings-modal/SharedLinkSettingsModal.js

@@ -8,6 +8,7 @@ import { Modal, ModalActions } from '../../components/modal';
 import InlineNotice from '../../components/inline-notice';
 import Link from '../../components/link/LinkBase';
 import commonMessages from '../../common/messages';
+import Classification from '../classification';
 
 import VanityNameSection from './VanityNameSection';
 import PasswordSection from './PasswordSection';
@@ -108,6 +109,11 @@ class SharedLinkSettingsModal extends Component {
         isDirectLinkAvailable: PropTypes.bool.isRequired,
         /** Whether or not direct link is unavailable only due to download setting */
         isDirectLinkUnavailableDueToDownloadSettings: PropTypes.bool.isRequired,
+        /** Whether or not direct link is unavailable only due to access policy setting */
+        isDirectLinkUnavailableDueToAccessPolicy: PropTypes.bool.isRequired,
+
+        // Classification props
+        item: PropTypes.object,
 
         // Hooks for resin
         cancelButtonProps: PropTypes.object,
@@ -315,25 +321,48 @@ class SharedLinkSettingsModal extends Component {
             downloadCheckboxProps,
             isDirectLinkAvailable,
             isDirectLinkUnavailableDueToDownloadSettings,
+            isDirectLinkUnavailableDueToAccessPolicy,
             isDownloadAvailable,
+            item,
         } = this.props;
+
         const { isDownloadEnabled } = this.state;
+        const { classification } = item;
 
         return (
             <AllowDownloadSection
                 canChangeDownload={canChangeDownload}
+                classification={classification}
                 directLink={directLink}
                 directLinkInputProps={directLinkInputProps}
                 downloadCheckboxProps={downloadCheckboxProps}
                 isDirectLinkAvailable={isDirectLinkAvailable}
                 isDirectLinkUnavailableDueToDownloadSettings={isDirectLinkUnavailableDueToDownloadSettings}
+                isDirectLinkUnavailableDueToAccessPolicy={isDirectLinkUnavailableDueToAccessPolicy}
                 isDownloadAvailable={isDownloadAvailable}
                 isDownloadEnabled={isDownloadEnabled}
                 onChange={this.onAllowDownloadChange}
             />
         );
     }
 
+    renderModalTitle() {
+        const { item } = this.props;
+        const { bannerPolicy, classification } = item;
+
+        return (
+            <span className="bdl-SharedLinkSettingsModal-title">
+                <FormattedMessage {...messages.modalTitle} />
+                <Classification
+                    advisoryMessage={bannerPolicy ? bannerPolicy.body : undefined}
+                    messageStyle="tooltip"
+                    name={classification}
+                    className="bdl-SharedLinkSettingsModal-classification"
+                />
+            </span>
+        );
+    }
+
     render() {
         const {
             canChangeDownload,
@@ -356,13 +385,12 @@ class SharedLinkSettingsModal extends Component {
         );
 
         const disableSaveBtn = !(canChangeDownload || canChangeExpiration || canChangePassword || canChangeVanityName);
-
         return (
             <Modal
                 className="shared-link-settings-modal"
                 isOpen={isOpen}
                 onRequestClose={submitting ? undefined : onRequestClose}
-                title={<FormattedMessage {...messages.modalTitle} />}
+                title={this.renderModalTitle()}
                 {...modalProps}
             >
                 <form onSubmit={this.onSubmit}>

src/features/shared-link-settings-modal/SharedLinkSettingsModal.scss

@@ -49,3 +49,13 @@
         color: $bdl-gray-62;
     }
 }
+
+/** title and classifiction label */
+.bdl-SharedLinkSettingsModal-title {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.bdl-SharedLinkSettingsModal-classification {
+    margin-left: 6px;
+}

src/features/shared-link-settings-modal/__tests__/AllowDownloadSection-test.js

@@ -13,6 +13,7 @@ describe('features/shared-link-settings-modal/AllowDownloadSection', () => {
     const directLink = 'box.com/download';
     const isDirectLinkAvailable = true;
     const isDirectLinkUnavailableDueToDownloadSettings = true;
+    const isDirectLinkUnavailableDueToAccessPolicy = false;
 
     const getWrapper = (props = {}) =>
         shallow(
@@ -21,6 +22,7 @@ describe('features/shared-link-settings-modal/AllowDownloadSection', () => {
                 directLink={directLink}
                 isDirectLinkAvailable={isDirectLinkAvailable}
                 isDirectLinkUnavailableDueToDownloadSettings={isDirectLinkUnavailableDueToDownloadSettings}
+                isDirectLinkUnavailableDueToAccessPolicy={isDirectLinkUnavailableDueToAccessPolicy}
                 isDownloadAvailable={isDownloadAvailable}
                 isDownloadEnabled={isDownloadEnabled}
                 onChange={sandbox.stub()}
@@ -75,6 +77,16 @@ describe('features/shared-link-settings-modal/AllowDownloadSection', () => {
 
             expect(wrapper.find('TextInputWithCopyButton').length).toBe(0);
         });
+
+        test('should render tooltip when direct download is disabled', () => {
+            const wrapper = getWrapper({ isDirectLinkUnavailableDueToAccessPolicy: true });
+            expect(wrapper.find('Tooltip').length).toBe(1);
+        });
+
+        test('should render disabled state when direct download is disabled', () => {
+            const wrapper = getWrapper({ isDirectLinkUnavailableDueToAccessPolicy: true });
+            expect(wrapper.find('.bdl-is-disabled').length).toBe(1);
+        });
     });
 
     describe('isDownloadAvailable === false', () => {

src/features/shared-link-settings-modal/__tests__/SharedLinkSettingsModal-test.js

@@ -23,12 +23,27 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
     const directLink = 'box.com/download';
     const isDirectLinkAvailable = true;
     const isDirectLinkUnavailableDueToDownloadSettings = true;
+    const isDirectLinkUnavailableDueToAccessPolicy = true;
 
     const getWrapper = (props = {}) =>
         shallow(
             <SharedLinkSettingsModal
                 onSubmit={sandbox.stub()}
                 canChangeVanityName={canChangeVanityName}
+                item={{
+                    bannerPolicy: {
+                        body: 'test',
+                    },
+                    classification: 'internal',
+                    grantedPermissions: {
+                        itemShare: true,
+                    },
+                    hideCollaborators: false,
+                    id: 12345,
+                    name: 'My Example Folder',
+                    type: 'folder',
+                    typedID: 'd_12345',
+                }}
                 vanityName={vanityName}
                 serverURL={serverURL}
                 canChangePassword={canChangePassword}
@@ -41,6 +56,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
                 directLink={directLink}
                 isDirectLinkAvailable={isDirectLinkAvailable}
                 isDirectLinkUnavailableDueToDownloadSettings={isDirectLinkUnavailableDueToDownloadSettings}
+                isDirectLinkUnavailableDueToAccessPolicy={isDirectLinkUnavailableDueToAccessPolicy}
                 {...props}
             />,
         );
@@ -261,10 +277,19 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
             expect(section.prop('isDirectLinkUnavailableDueToDownloadSettings')).toEqual(
                 isDirectLinkUnavailableDueToDownloadSettings,
             );
+            expect(section.prop('isDirectLinkUnavailableDueToAccessPolicy')).toEqual(
+                isDirectLinkUnavailableDueToAccessPolicy,
+            );
             expect(section.prop('onChange')).toEqual(wrapper.instance().onAllowDownloadChange);
         });
     });
 
+    describe('renderModalTitle()', () => {
+        const wrapper = getWrapper();
+        const title = shallow(wrapper.instance().renderModalTitle());
+        expect(title).toMatchSnapshot();
+    });
+
     describe('render()', () => {
         test('should render a Modal, form, close button, and save button', () => {
             const wrapper = getWrapper();

src/features/shared-link-settings-modal/__tests__/__snapshots__/SharedLinkSettingsModal-test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<span
+  className="bdl-SharedLinkSettingsModal-title"
+>
+  <FormattedMessage
+    defaultMessage="Shared Link Settings"
+    id="boxui.share.sharedLinkSettings.modalTitle"
+  />
+  <Classification
+    advisoryMessage="test"
+    className="bdl-SharedLinkSettingsModal-classification"
+    messageStyle="tooltip"
+    name="internal"
+  />
+</span>
+`;

src/features/shared-link-settings-modal/messages.js

@@ -16,6 +16,18 @@ const messages = defineMessages({
         description: 'Title for Direct Link section',
         id: 'boxui.share.sharedLinkSettings.directLinkLabel',
     },
+    directDownloadBlockedByAccessPolicyWithClassification: {
+        defaultMessage: 'Download has been disabled for content due to the classification',
+        description:
+            'Text to show that direct link download is disabled due to applied shield access policy with classification',
+        id: 'boxui.share.sharedLinkSettings.directDownloadBlockedByAccessPolicyWithClassification',
+    },
+    directDownloadBlockedByAccessPolicyWithoutClassification: {
+        defaultMessage: 'Download has been disabled for content without classification.',
+        description:
+            'Text to show that direct link download is disabled due to applied shield access policy without classification',
+        id: 'boxui.share.sharedLinkSettings.directDownloadBlockedByAccessPolicyWithoutClassification',
+    },
     inaccessibleSettingsNotice: {
         defaultMessage: 'Certain settings may not be available for this item due to permissions.',
         description: