box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/features/quick-search/QuickSearch.js

@@ -24,6 +24,8 @@ type Props = {
     noItemsMessage?: React.Node,
     /** Function called with the index of the selected option and the event (selected by keyboard or click) */
     onSelect?: Function,
+    /** Optional title text that will be rendered above the list */
+    title?: React.Node,
 };
 
 type State = {
@@ -48,7 +50,16 @@ class QuickSearch extends React.Component<Props, State> {
     };
 
     render() {
-        const { children, className, dividerIndex, errorMessage, inputProps, noItemsMessage, onSelect } = this.props;
+        const {
+            children,
+            className,
+            dividerIndex,
+            errorMessage,
+            inputProps,
+            noItemsMessage,
+            onSelect,
+            title,
+        } = this.props;
         const { showMessage } = this.state;
 
         return (
@@ -57,6 +68,7 @@ class QuickSearch extends React.Component<Props, State> {
                     dividerIndex={dividerIndex}
                     onSelect={onSelect}
                     selector={<QuickSearchSelector {...inputProps} />}
+                    title={title}
                 >
                     {children}
                 </SelectorDropdown>

package/src/features/quick-search/__tests__/QuickSearch.test.js

@@ -105,6 +105,23 @@ describe('features/quick-search/QuickSearch', () => {
 
             expect(selectorDropdown.prop('dividerIndex')).toEqual(1);
         });
+
+        test('should render title when specified', () => {
+            const children = (
+                <>
+                    <li key="1" />
+                    <li key="2" />
+                </>
+            );
+            const title = <div>title</div>;
+            const wrapper = shallow(
+                <QuickSearch title={title} inputProps={inputProps}>
+                    {children}
+                </QuickSearch>,
+            );
+            const selectorDropdown = wrapper.find('SelectorDropdown');
+            expect(selectorDropdown.prop('title')).toEqual(title);
+        });
     });
 
     describe('onFocus', () => {

package/src/features/unified-share-modal/SharedLinkSection.js

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from 'react';
+import noop from 'lodash/noop';
 import { FormattedMessage } from 'react-intl';
 
 import PlainButton from '../../components/plain-button';
@@ -74,7 +75,6 @@ type Props = {
 type State = {
     isAutoCreatingSharedLink: boolean,
     isCopySuccessful: ?boolean,
-    isPermissionElevatedToEdit: boolean,
     isSharedLinkEditTooltipShown: boolean,
 };
 
@@ -93,7 +93,6 @@ class SharedLinkSection extends React.Component<Props, State> {
             isAutoCreatingSharedLink: false,
             isCopySuccessful: null,
             isSharedLinkEditTooltipShown: false,
-            isPermissionElevatedToEdit: false,
         };
     }
 
@@ -134,12 +133,7 @@ class SharedLinkSection extends React.Component<Props, State> {
             onCopyInit = () => {},
         } = this.props;
 
-        const {
-            isAutoCreatingSharedLink,
-            isCopySuccessful,
-            isSharedLinkEditTooltipShown,
-            isPermissionElevatedToEdit,
-        } = this.state;
+        const { isAutoCreatingSharedLink, isCopySuccessful, isSharedLinkEditTooltipShown } = this.state;
 
         if (
             autoCreateSharedLink &&
@@ -159,21 +153,6 @@ class SharedLinkSection extends React.Component<Props, State> {
             }
         }
 
-        if (
-            prevProps.sharedLink.permissionLevel !== '' &&
-            prevProps.sharedLink.permissionLevel !== CAN_EDIT &&
-            sharedLink.permissionLevel === CAN_EDIT
-        ) {
-            this.setState({ isPermissionElevatedToEdit: true });
-        }
-
-        if (
-            isPermissionElevatedToEdit &&
-            (sharedLink.permissionLevel !== CAN_EDIT || sharedLink.accessLevel !== ANYONE_IN_COMPANY)
-        ) {
-            this.setState({ isPermissionElevatedToEdit: false });
-        }
-
         if (
             Browser.canWriteToClipboard() &&
             triggerCopyOnLoad &&
@@ -267,7 +246,7 @@ class SharedLinkSection extends React.Component<Props, State> {
             tooltips,
         } = this.props;
 
-        const { isCopySuccessful, isPermissionElevatedToEdit, isSharedLinkEditTooltipShown } = this.state;
+        const { isCopySuccessful, isSharedLinkEditTooltipShown } = this.state;
 
         const {
             accessLevel,
@@ -285,7 +264,7 @@ class SharedLinkSection extends React.Component<Props, State> {
             onChangeSharedLinkAccessLevel,
             onChangeSharedLinkPermissionLevel,
             onSharedLinkAccessMenuOpen,
-            onSharedLinkCopy,
+            onSharedLinkCopy = noop,
             sendSharedLinkButtonProps,
             sharedLinkAccessMenuButtonProps,
             sharedLinkPermissionsMenuButtonProps,
@@ -321,7 +300,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                             className="shared-link-field-container"
                             disabled={submitting}
                             label=""
-                            onCopySuccess={onSharedLinkCopy}
+                            onCopySuccess={() => onSharedLinkCopy(permissionLevel)}
                             triggerCopyOnLoad={shouldTriggerCopyOnLoad}
                             type="url"
                             value={url}
@@ -417,7 +396,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                         )}
                     </div>
                 )}
-                {accessLevel === ANYONE_IN_COMPANY && isPermissionElevatedToEdit && (
+                {accessLevel === ANYONE_IN_COMPANY && permissionLevel === CAN_EDIT && (
                     <div className="security-indicator-note">
                         <span className="security-indicator-icon-globe">
                             <IconGlobe height={12} width={12} />

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

@@ -5,10 +5,13 @@ import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
+import FormattedCompMessage from '../../components/i18n/FormattedCompMessage';
 import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
 import { Link } from '../../components/link';
 import Button from '../../components/button';
 import { UpgradeBadge } from '../../components/badge';
+import InlineNotice from '../../components/inline-notice';
+import PlainButton from '../../components/plain-button';
 import { ITEM_TYPE_WEBLINK } from '../../common/constants';
 import Tooltip from '../../components/tooltip';
 import { CollaboratorAvatars, CollaboratorList } from '../collaborator-avatars';
@@ -220,8 +223,9 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
     };
 
     handleSendSharedLink = (data: Object) => {
-        const { sendSharedLink, trackingProps } = this.props;
+        const { sendSharedLink, sharedLink, trackingProps } = this.props;
         const { sharedLinkEmailTracking } = trackingProps;
+        const { permissionLevel } = sharedLink;
         const { onSendClick } = sharedLinkEmailTracking;
 
         const { emails, groupIDs } = data;
@@ -231,6 +235,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
                 ...data,
                 numsOfRecipients: emails.length,
                 numOfRecipientGroups: groupIDs.length,
+                permissionLevel,
             };
             onSendClick(params);
         }
@@ -420,6 +425,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             shouldRenderFTUXTooltip,
             showEnterEmailsCallout = false,
             showCalloutForUser = false,
+            showUpgradeInlineNotice = false,
             showUpgradeOptions,
             submitting,
             suggestedCollaborators,
@@ -507,7 +513,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
                             {...inviteCollabsEmailTracking}
                         >
                             {this.renderInviteePermissionsDropdown()}
-                            {isInviteSectionExpanded && showUpgradeOptions && this.renderUpgradeLinkDescription()}
+                            {showUpgradeOptions && !showUpgradeInlineNotice && this.renderUpgradeLinkDescription()}
                         </EmailForm>
                     </div>
                 </Tooltip>
@@ -538,28 +544,75 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
         return avatarsContent;
     }
 
+    renderCollaboratorMessage(resinTarget: string) {
+        const { openUpgradePlanModal = () => {} } = this.props;
+        return (
+            <>
+                <FormattedCompMessage
+                    id="boxui.unifiedShare.upgradeCollaboratorAccessDescription"
+                    description="Description for cta to upgrade to get collaborator access controls"
+                >
+                    Set the level of{' '}
+                    <Link
+                        className="upgrade-link"
+                        href="https://support.box.com/hc/en-us/articles/360044196413-Understanding-Collaborator-Permission-Levels"
+                        target="_blank"
+                    >
+                        collaborator access
+                    </Link>{' '}
+                    and increase security through one of our paid plans.{' '}
+                </FormattedCompMessage>
+                <PlainButton
+                    className="upgrade-link"
+                    data-resin-target={resinTarget}
+                    onClick={openUpgradePlanModal}
+                    type="button"
+                >
+                    <FormattedMessage {...messages.upgradeLink} />
+                </PlainButton>
+            </>
+        );
+    }
+
     renderUpgradeLinkDescription() {
-        const { trackingProps = {} } = this.props;
+        const { openUpgradePlanModal = () => {}, showNewUpgradeText = false, trackingProps = {} } = this.props;
         const { inviteCollabsEmailTracking = {} } = trackingProps;
         const { upgradeLinkProps = {} } = inviteCollabsEmailTracking;
 
         return (
             <div className="upgrade-description">
-                <UpgradeBadge type="warning" />
-                <FormattedMessage
-                    values={{
-                        upgradeGetMoreAccessControlsLink: (
-                            <Link className="upgrade-link" href="/upgrade" {...upgradeLinkProps}>
-                                <FormattedMessage {...messages.upgradeGetMoreAccessControlsLink} />
-                            </Link>
-                        ),
-                    }}
-                    {...messages.upgradeGetMoreAccessControlsDescription}
-                />
+                <UpgradeBadge />
+                {showNewUpgradeText ? (
+                    this.renderCollaboratorMessage('external_collab_newcopy_upgrade_cta')
+                ) : (
+                    <FormattedMessage
+                        values={{
+                            upgradeGetMoreAccessControlsLink: (
+                                <PlainButton
+                                    className="upgrade-link"
+                                    onClick={openUpgradePlanModal}
+                                    type="button"
+                                    {...upgradeLinkProps}
+                                >
+                                    <FormattedMessage {...messages.upgradeGetMoreAccessControlsLink} />
+                                </PlainButton>
+                            ),
+                        }}
+                        {...messages.upgradeGetMoreAccessControlsDescription}
+                    />
+                )}
             </div>
         );
     }
 
+    renderUpgradeInlineNotice() {
+        return (
+            <InlineNotice title={<FormattedMessage {...messages.upgradeInlineNoticeTitle} />} type="info">
+                {this.renderCollaboratorMessage('external_collab_top_message_upgrade_cta')}
+            </InlineNotice>
+        );
+    }
+
     renderInviteePermissionsDropdown() {
         const { inviteePermissions, item, submitting, canInvite, trackingProps } = this.props;
         const { type } = item;
@@ -631,6 +684,8 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             sharedLinkEditTooltipTargetingApi,
             showEnterEmailsCallout = false,
             showSharedLinkSettingsCallout = false,
+            showUpgradeInlineNotice = false,
+            showUpgradeOptions,
             submitting,
             tooltips = {},
             trackingProps,
@@ -649,6 +704,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             <div className={displayInModal ? '' : 'be bdl-UnifiedShareForm'}>
                 <LoadingIndicatorWrapper isLoading={isFetching} hideContent>
                     {showShareRestrictionWarning && allShareRestrictionWarning}
+                    {showUpgradeOptions && showUpgradeInlineNotice && this.renderUpgradeInlineNotice()}
 
                     {!isEmailLinkSectionExpanded && !showCollaboratorList && this.renderInviteSection()}
 

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

@@ -266,6 +266,9 @@
 
     .upgrade-badge {
         margin-right: 5px;
+        padding: $bdl-grid-unit ($bdl-grid-unit * 2);
+        background-color: $bdl-grimace-20;
+        border-radius: 10px;
     }
 
     .upgrade-link {

package/src/features/unified-share-modal/__tests__/EmailForm.test.js

@@ -403,6 +403,15 @@ describe('features/unified-share-modal/EmailForm', () => {
                 email: 'test@@example.com',
                 expectedValue: false,
             },
+            // manually supplemented TLD:
+            {
+                email: 'test@@example.cpa',
+                expectedValue: true,
+            },
+            {
+                email: 'test@@example.badTLD',
+                expectedValue: true,
+            },
         ].forEach(({ email, expectedValue }) => {
             test('should show an error if it detects an invalid email address', () => {
                 const wrapper = getWrapper();

package/src/features/unified-share-modal/__tests__/SharedLinkSection.test.js

@@ -357,8 +357,6 @@ describe('features/unified-share-modal/SharedLinkSection', () => {
 
             const wrapper = getWrapper({ sharedLink });
 
-            expect(wrapper.state().isPermissionElevatedToEdit).toBe(false);
-
             wrapper.setProps({
                 sharedLink: {
                     accessLevel: ANYONE_IN_COMPANY,
@@ -368,8 +366,6 @@ describe('features/unified-share-modal/SharedLinkSection', () => {
                 },
             });
 
-            expect(wrapper.state().isPermissionElevatedToEdit).toBe(true);
-
             expect(
                 wrapper.find(`[data-testid="shared-link-elevated-editable-company-available-message"]`).length,
             ).toEqual(1);
@@ -497,6 +493,20 @@ describe('features/unified-share-modal/SharedLinkSection', () => {
             expect(onCopyErrorMock).toBeCalledTimes(0);
         });
 
+        test('should call onSharedLinkCopy with current permission level when copy button is clicked', () => {
+            const onSharedLinkCopy = jest.fn();
+            const sharedLink = { url: 'http://example.com/', isNewSharedLink: false, permissionLevel: CAN_EDIT };
+
+            const wrapper = getWrapper({
+                sharedLink,
+                trackingProps: { onSharedLinkCopy },
+            });
+
+            wrapper.find('TextInputWithCopyButton').prop('onCopySuccess')();
+
+            expect(onSharedLinkCopy).toBeCalledWith(CAN_EDIT);
+        });
+
         test('should only initiate copy when we specifically request a copy to be triggered', () => {
             const sharedLink = { url: '', isNewSharedLink: false };
             const addSharedLink = jest.fn();

package/src/features/unified-share-modal/__tests__/UnifiedShareForm.test.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import { ITEM_TYPE_WEBLINK, ITEM_TYPE_FOLDER } from '../../../common/constants';
-import { JUSTIFICATION_CHECKPOINT_EXTERNAL_COLLAB } from '../constants';
+
+import { CAN_EDIT, JUSTIFICATION_CHECKPOINT_EXTERNAL_COLLAB } from '../constants';
 
 import { UnifiedShareFormBase as UnifiedShareForm } from '../UnifiedShareForm';
 
@@ -211,10 +212,30 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
                 isFetching: false,
                 showUpgradeOptions: true,
             });
-            wrapper.setState({
-                isInviteSectionExpanded: true,
+            expect(wrapper.exists('UpgradeBadge')).toBe(true);
+        });
+
+        test('should render correct copy of upgrade CTA when showUpgradeOptions and showNewUpgradeText is enabled', () => {
+            const wrapper = getWrapper({
+                canInvite: true,
+                isFetching: false,
+                showNewUpgradeText: true,
+                showUpgradeOptions: true,
             });
-            expect(wrapper).toMatchSnapshot();
+            expect(wrapper.exists('UpgradeBadge')).toBe(true);
+            const msg = wrapper.find('FormattedCompMessage');
+            expect(msg.prop('id')).toEqual('boxui.unifiedShare.upgradeCollaboratorAccessDescription');
+        });
+
+        test('should render correct upgrade inline notice when showUpgradeInlineNotice and showUpgradeOptions is enabled', () => {
+            const wrapper = getWrapper({
+                canInvite: true,
+                isFetching: false,
+                showUpgradeInlineNotice: true,
+                showUpgradeOptions: true,
+            });
+            expect(wrapper.exists('UpgradeBadge')).toBe(false);
+            expect(wrapper.exists('InlineNotice')).toBe(true);
         });
 
         test('should render a default component with correct Focus element and props when focusSharedLinkOnLoad is enabled', () => {
@@ -416,6 +437,34 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
         });
     });
 
+    describe('handleSendSharedLink()', () => {
+        test('should call onSendClick  and sendSharedLink with the correct params', async () => {
+            const data = {
+                emails: ['dvader@example.com', 'fbar@example.com'],
+                groupIDs: ['eng@example.com', 'product@example.com'],
+            };
+            const onSendClick = jest.fn();
+            const sendSharedLink = jest.fn();
+            const sharedLink = { permissionLevel: CAN_EDIT };
+            const trackingProps = {
+                ...defaultTrackingProps,
+                sharedLinkEmailTracking: { onSendClick },
+            };
+            const expectedParams = {
+                ...data,
+                numsOfRecipients: 2,
+                numOfRecipientGroups: 2,
+                permissionLevel: CAN_EDIT,
+            };
+            const wrapper = getWrapper({ sendSharedLink, sharedLink, trackingProps });
+
+            await wrapper.instance().handleSendSharedLink(data);
+
+            expect(onSendClick).toBeCalledWith(expectedParams);
+            expect(sendSharedLink).toBeCalledWith(data);
+        });
+    });
+
     describe('handleInviteePermissionChange()', () => {
         test('should set the permission in the state', () => {
             const onInviteePermissionChange = jest.fn();

package/src/features/unified-share-modal/__tests__/__snapshots__/SharedLinkSection.test.js.snap

@@ -96,6 +96,7 @@ exports[`features/unified-share-modal/SharedLinkSection should account for share
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -255,6 +256,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render a default
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -448,6 +450,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render default co
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -712,6 +715,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render proper dro
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -855,6 +859,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render proper lis
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -1000,6 +1005,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render proper lis
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -1144,6 +1150,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render proper lis
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -1288,6 +1295,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render proper lis
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}
@@ -1458,6 +1466,7 @@ exports[`features/unified-share-modal/SharedLinkSection should render without Sh
         className="shared-link-field-container"
         hideOptionalLabel={true}
         label=""
+        onCopySuccess={[Function]}
         readOnly={true}
         successStateDuration={3000}
         triggerCopyOnLoad={false}