feat(siderail): take in both controlsFormat as BTN and TOOLTIP (#1819)

Author: feixuanli

src/features/classification/constants.js

@@ -4,11 +4,13 @@ const DEFAULT_MAX_APP_COUNT = 3;
 const SECURITY_CONTROLS_FORMAT: {
     FULL: 'full',
     SHORT: 'short',
+    SHORT_WITH_BTN: 'shortWithBtn', // will remove after eua release
     SHORT_WITH_TOOLTIP: 'shortWithTooltip',
 } = {
     FULL: 'full',
     SHORT: 'short',
-    SHORT_WITH_TOOLTIP: 'shortWithTooltip',
+    SHORT_WITH_TOOLTIP: 'shortWithTooltip', // will remove after eua release
+    SHORT_WITH_BTN: 'shortWithBtn',
 };
 
 const ACCESS_POLICY_RESTRICTION: {

src/features/classification/security-controls/SecurityControls.js

@@ -10,7 +10,8 @@ import { DEFAULT_MAX_APP_COUNT, SECURITY_CONTROLS_FORMAT } from '../constants';
 
 import './SecurityControls.scss';
 
-const { FULL, SHORT, SHORT_WITH_TOOLTIP } = SECURITY_CONTROLS_FORMAT;
+// will remove SHORT_WITH_TOOLTIP after eua release
+const { FULL, SHORT, SHORT_WITH_TOOLTIP, SHORT_WITH_BTN } = SECURITY_CONTROLS_FORMAT;
 
 type Props = {
     controls: Controls,
@@ -28,7 +29,8 @@ const SecurityControls = ({ controls, controlsFormat, maxAppCount }: Props) => {
         const shortMessage = getShortSecurityControlsMessage(controls);
         items = shortMessage ? [shortMessage] : [];
 
-        if (items.length && controlsFormat === SHORT_WITH_TOOLTIP) {
+        // will remove SHORT_WITH_TOOLTIP after eua release
+        if (items.length && (controlsFormat === SHORT_WITH_TOOLTIP || controlsFormat === SHORT_WITH_BTN)) {
             tooltipItems = getFullSecurityControlsMessages(controls, maxAppCount);
         }
     }

src/features/classification/security-controls/__tests__/SecurityControls.test.js

@@ -4,7 +4,7 @@ import SecurityControlsItem from '../SecurityControlsItem';
 import SecurityControls from '../SecurityControls';
 import { SECURITY_CONTROLS_FORMAT } from '../../constants';
 
-const { FULL, SHORT, SHORT_WITH_TOOLTIP } = SECURITY_CONTROLS_FORMAT;
+const { FULL, SHORT, SHORT_WITH_TOOLTIP, SHORT_WITH_BTN } = SECURITY_CONTROLS_FORMAT;
 
 describe('features/classification/security-controls/SecurityControls', () => {
     let wrapper;
@@ -51,11 +51,17 @@ describe('features/classification/security-controls/SecurityControls', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    // will remove after eua release
     test('should render SecurityControls with single SecurityControlsItem and tooltip items when using SHORT_WITH_TOOLTIP controlsFormat', () => {
         wrapper.setProps({ controlsFormat: SHORT_WITH_TOOLTIP });
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should render SecurityControls with single SecurityControlsItem and tooltip items when using SHORT_WITH_BTN controlsFormat', () => {
+        wrapper.setProps({ controlsFormat: SHORT_WITH_BTN });
+        expect(wrapper).toMatchSnapshot();
+    });
+
     test('should render SecurityControls multiple SecurityControlsItem when using FULL controlsFormat', () => {
         wrapper.setProps({ controlsFormat: FULL });
         expect(wrapper).toMatchSnapshot();
@@ -67,9 +73,12 @@ describe('features/classification/security-controls/SecurityControls', () => {
 
         wrapper.setProps({ controlsFormat: SHORT });
         expect(wrapper.hasClass('bdl-SecurityControls--summarized')).toBe(true);
-
+        // will remove after eua release
         wrapper.setProps({ controlsFormat: SHORT_WITH_TOOLTIP });
         expect(wrapper.hasClass('bdl-SecurityControls--summarized')).toBe(true);
+
+        wrapper.setProps({ controlsFormat: SHORT_WITH_BTN });
+        expect(wrapper.hasClass('bdl-SecurityControls--summarized')).toBe(true);
     });
 
     test('should restrict displayed app names to maxAppCount', () => {

src/features/classification/security-controls/__tests__/__snapshots__/SecurityControls.test.js.snap

@@ -50,6 +50,45 @@ exports[`features/classification/security-controls/SecurityControls should rende
 </ul>
 `;
 
+exports[`features/classification/security-controls/SecurityControls should render SecurityControls with single SecurityControlsItem and tooltip items when using SHORT_WITH_BTN controlsFormat 1`] = `
+<ul
+  className="bdl-SecurityControls bdl-SecurityControls--summarized"
+>
+  <SecurityControlsItem
+    key="0"
+    message={
+      Object {
+        "defaultMessage": "Sharing, download and app restrictions apply",
+        "id": "boxui.securityControls.shortAllRestrictions",
+      }
+    }
+    tooltipItems={
+      Array [
+        Object {
+          "defaultMessage": "Shared links allowed for collaborators only.",
+          "id": "boxui.securityControls.sharingCollabOnly",
+        },
+        Object {
+          "defaultMessage": "External collaboration limited to approved domains.",
+          "id": "boxui.securityControls.externalCollabDomainList",
+        },
+        Object {
+          "defaultMessage": "Download restricted on Box Drive, except Owners/Co-Owners.",
+          "id": "boxui.securityControls.desktopDownloadOwners",
+        },
+        Object {
+          "defaultMessage": "Only select applications are allowed: {appNames}",
+          "id": "boxui.securityControls.appDownloadWhitelist",
+          "values": Object {
+            "appNames": "",
+          },
+        },
+      ]
+    }
+  />
+</ul>
+`;
+
 exports[`features/classification/security-controls/SecurityControls should render SecurityControls with single SecurityControlsItem and tooltip items when using SHORT_WITH_TOOLTIP controlsFormat 1`] = `
 <ul
   className="bdl-SecurityControls bdl-SecurityControls--summarized"