fix(usm): add role img to shared link expiration tooltip icon (#3195)

* fix(usm): add role img to shared link expiration tooltip icon

* fix(usm): add role img to shared link expiration tooltip icon

Author: benjamin-shen

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

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import noop from 'lodash/noop';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 
 import PlainButton from '../../components/plain-button';
 import Button from '../../components/button';
@@ -51,7 +52,7 @@ type Props = {
         newPermissionLevel: permissionLevelType,
     ) => Promise<{ permissionLevel: permissionLevelType }>,
     config?: USMConfig,
-    intl: any,
+    intl: IntlShape,
     isAllowEditSharedLinkForFileEnabled: boolean,
     item: itemtype,
     itemType: ItemType,
@@ -307,7 +308,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                         />
                     </Tooltip>
                     {!hideEmailButton && (
-                        <Tooltip position="top-left" text={<FormattedMessage {...messages.sendSharedLink} />}>
+                        <Tooltip position="top-left" text={intl.formatMessage(messages.sendSharedLink)}>
                             <Button
                                 aria-label={intl.formatMessage(messages.sendSharedLink)}
                                 className="email-shared-link-btn"
@@ -371,7 +372,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                         </GuideTooltip>
                     )}
                     {isEditableBoxNote && (
-                        <Tooltip text={<FormattedMessage {...messages.sharedLinkPermissionsEditTooltip} />}>
+                        <Tooltip text={intl.formatMessage(messages.sharedLinkPermissionsEditTooltip)}>
                             <PlainButton isDisabled className="can-edit-btn">
                                 <FormattedMessage {...messages.sharedLinkPermissionsEdit} />
                             </PlainButton>
@@ -431,9 +432,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                     position="middle-right"
                     showCloseButton
                     text={
-                        tooltips['shared-link-settings'] || (
-                            <FormattedMessage {...messages.sharedLinkSettingsCalloutText} />
-                        )
+                        tooltips['shared-link-settings'] || intl.formatMessage(messages.sharedLinkSettingsCalloutText)
                     }
                     theme="callout"
                 >
@@ -452,7 +451,7 @@ class SharedLinkSection extends React.Component<Props, State> {
     }
 
     renderToggle() {
-        const { item, onDismissTooltip, onToggleSharedLink, sharedLink, submitting, tooltips } = this.props;
+        const { intl, item, onDismissTooltip, onToggleSharedLink, sharedLink, submitting, tooltips } = this.props;
         const { canChangeAccessLevel, expirationTimestamp, url } = sharedLink;
         const isSharedLinkEnabled = !!url;
         const canAddSharedLink = this.canAddSharedLink(isSharedLinkEnabled, item.grantedPermissions.itemShare);
@@ -469,16 +468,11 @@ class SharedLinkSection extends React.Component<Props, State> {
                         <FormattedMessage {...messages.linkShareOn} />
                         <Tooltip
                             position="top-center"
-                            text={
-                                <FormattedMessage
-                                    {...messages.sharedLinkExpirationTooltip}
-                                    values={{
-                                        expiration: convertToMs(expirationTimestamp),
-                                    }}
-                                />
-                            }
+                            text={intl.formatMessage(messages.sharedLinkExpirationTooltip, {
+                                expiration: convertToMs(expirationTimestamp),
+                            })}
                         >
-                            <span className="shared-link-expiration-badge">
+                            <span className="shared-link-expiration-badge" role="img">
                                 <IconClock color={bdlWatermelonRed} />
                             </span>
                         </Tooltip>
@@ -523,10 +517,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                     );
                 }
                 return (
-                    <Tooltip
-                        position="top-right"
-                        text={<FormattedMessage {...messages.sharedLinkDisabledTooltipCopy} />}
-                    >
+                    <Tooltip position="top-right" text={intl.formatMessage(messages.sharedLinkDisabledTooltipCopy)}>
                         {toggleComponent}
                     </Tooltip>
                 );
@@ -541,7 +532,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                     <Tooltip
                         className="usm-disabled-message-tooltip"
                         position="top-right"
-                        text={<FormattedMessage {...tooltipDisabledMessage} />}
+                        text={intl.formatMessage(tooltipDisabledMessage)}
                     >
                         {toggleComponent}
                     </Tooltip>
@@ -574,5 +565,5 @@ class SharedLinkSection extends React.Component<Props, State> {
         );
     }
 }
-
-export default SharedLinkSection;
+export { SharedLinkSection as SharedLinkSectionBase };
+export default injectIntl(SharedLinkSection);

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

@@ -2,12 +2,12 @@ import React from 'react';
 import sinon from 'sinon';
 import { ANYONE_IN_COMPANY, ANYONE_WITH_LINK, CAN_EDIT, CAN_VIEW_DOWNLOAD } from '../constants';
 
-import SharedLinkSection from '../SharedLinkSection';
+import { SharedLinkSectionBase as SharedLinkSection } from '../SharedLinkSection';
 
 const sandbox = sinon.sandbox.create();
 
 describe('features/unified-share-modal/SharedLinkSection', () => {
-    const intl = { formatMessage: sandbox.spy() };
+    const intl = { formatMessage: jest.fn().mockImplementation(message => message.defaultMessage) };
     const defaultItem = {
         grantedPermissions: {
             itemShare: true,