feat(sidebar): Show retention policy info in sidebar (#1648)

* feat(sidebar): Show retention policy info in sidebar

* feat(sidebar): change retention action message

* feat(sidebar): address comments

* feat(sidebar): add tooltip

* feat(sidebar): improve test

* feat(sidebar): change retention removal message

Author: Mingze

flow-typed/box-ui-elements.js

@@ -169,6 +169,14 @@ type BoxItemVersionPermission = {
     can_upload?: boolean,
 };
 
+type BoxItemVersionRetention = {
+    applied_at: string,
+    disposition_action: 'delete' | 'remove',
+    disposition_at: string,
+    id: string,
+    type: 'file_version_retention',
+};
+
 type User = {
     avatar_url?: string,
     email?: string,
@@ -364,6 +372,7 @@ type BoxItemVersion = {
     permissions?: BoxItemVersionPermission,
     restored_at?: string,
     restored_by?: ?User,
+    retention?: BoxItemVersionRetention,
     sha1?: string,
     size?: number,
     trashed_at: ?string,

i18n/en-US.properties

@@ -488,6 +488,10 @@ be.sidebarVersions.versionMaxEntries = Version history is limited to the last {m
 be.sidebarVersions.versionNumberBadge = V{versionNumber}
 # Label given to the version badge for screen readers.
 be.sidebarVersions.versionNumberLabel = Version number {versionNumber}
+# Retention message describing when the version will be deleted.
+be.sidebarVersions.versionRetentionDelete = Will be deleted {time} by retention policy.
+# Retention message describing when the retention policy will be removed.
+be.sidebarVersions.versionRetentionRemove = Retention policy expires on {time}.
 # Name displayed for unknown or deleted users.
 be.sidebarVersions.versionUserUnknown = Unknown
 # Header to display for group of versions created today
@@ -974,6 +978,8 @@ boxui.readableTime.eventTimeDate = {time, date, medium} at {time, time, short}
 boxui.readableTime.eventTimeDateShort = {date} at {time, time, short}
 # The time that an event occurred today
 boxui.readableTime.eventTimeToday = Today at {time, time, short}
+# The time that an event occurred at a given date with the weekday included
+boxui.readableTime.eventTimeWeekdayLong = {weekday}, {time, date, medium}
 # The time that an event occurred yesterday
 boxui.readableTime.eventTimeYesterday = Yesterday at {time, time, short}
 # Title for a clear button

src/components/time/ReadableTime.js

@@ -14,6 +14,8 @@ type Props = {
     alwaysShowTime?: boolean,
     /** The number of milliseconds before now that a relative (vs. absolute) time should be displayed (Default: 1 hour) */
     relativeThreshold?: number,
+    /** A boolean that will include the weekday alongside the date, if the date is shown */
+    showWeekday?: boolean,
     /** The timestamp which should be used to display the date */
     timestamp: number,
 };
@@ -23,6 +25,7 @@ const ReadableTime = ({
     relativeThreshold = ONE_HOUR_MS,
     allowFutureTimestamps = true,
     alwaysShowTime = false,
+    showWeekday = false,
 }: Props) => {
     const relativeIfNewerThanTs = Date.now() - relativeThreshold;
     const shouldShowYear = !isCurrentYear(timestamp);
@@ -35,12 +38,17 @@ const ReadableTime = ({
     // e.g. Oct 5, 2018
     let dateMessage = messages.eventTime;
     let date = null;
+    let weekday = null;
     if (isToday(timestamp)) {
         // e.g. Today at 12:30 PM
         dateMessage = messages.eventTimeToday;
     } else if (isYesterday(timestamp)) {
         // e.g. Yesterday at 11:30 AM
         dateMessage = messages.eventTimeYesterday;
+    } else if (showWeekday) {
+        // e.g. Monday, Oct 5, 2018
+        dateMessage = messages.eventTimeWeekdayLong;
+        weekday = <FormattedDate value={timestamp} weekday="long" />;
     } else if (shouldShowYear && alwaysShowTime) {
         // e.g. Oct 5, 2018 at 10:30 PM
         dateMessage = messages.eventTimeDate;
@@ -53,7 +61,7 @@ const ReadableTime = ({
         return <FormattedDate value={timestamp} month="short" day="numeric" />;
     }
 
-    let output = <FormattedMessage {...dateMessage} values={{ time: timestamp, date }} />;
+    let output = <FormattedMessage {...dateMessage} values={{ time: timestamp, date, weekday }} />;
 
     // if the time stamp is within +/- the relative threshold for the current time,
     // print the default time format

src/components/time/__tests__/ReadableTime-test.js

@@ -94,6 +94,11 @@ describe('components/time/ReadableTime', () => {
             timestamp: msTwoDaysAgo,
             alwaysShowTime: true,
         },
+        {
+            description: 'should render with weekday when we show weekday',
+            timestamp: msTwoDaysAgo,
+            showWeekday: true,
+        },
         {
             description: 'should render with format "Today at hh:mm" when there is a future time stamp',
             timestamp: relativeThreshold * 2 + now,
@@ -113,20 +118,23 @@ describe('components/time/ReadableTime', () => {
                 'should render with format "30 minutes ago" when timestamp is within relative threshold (behind)',
             timestamp: withinRelativeThresholdBehind,
         },
-    ].forEach(({ description, timestamp, allowFutureTimestamps = true, alwaysShowTime = false }) => {
-        test(description, () => {
-            const wrapper = shallow(
-                <ReadableTime
-                    allowFutureTimestamps={allowFutureTimestamps}
-                    alwaysShowTime={alwaysShowTime}
-                    relativeThreshold={oneHourInMs}
-                    timestamp={timestamp}
-                />,
-            );
+    ].forEach(
+        ({ description, timestamp, allowFutureTimestamps = true, alwaysShowTime = false, showWeekday = false }) => {
+            test(description, () => {
+                const wrapper = shallow(
+                    <ReadableTime
+                        allowFutureTimestamps={allowFutureTimestamps}
+                        alwaysShowTime={alwaysShowTime}
+                        relativeThreshold={oneHourInMs}
+                        showWeekday={showWeekday}
+                        timestamp={timestamp}
+                    />,
+                );
 
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
+                expect(wrapper).toMatchSnapshot();
+            });
+        },
+    );
 
     test('should use default relative threshold if not provided', () => {
         const wrapper = shallow(<ReadableTime timestamp={withinRelativeThresholdAhead} />);

src/components/time/__tests__/__snapshots__/ReadableTime-test.js.snap

@@ -12,6 +12,7 @@ exports[`components/time/ReadableTime should render two days ago with format "mm
         value={1506378656000}
       />,
       "time": 1506378656000,
+      "weekday": null,
     }
   }
 />
@@ -33,6 +34,7 @@ exports[`components/time/ReadableTime should render with distant past format "mm
     Object {
       "date": null,
       "time": 946627200000,
+      "weekday": null,
     }
   }
 />
@@ -58,6 +60,7 @@ exports[`components/time/ReadableTime should render with format "Today at hh:mm"
     Object {
       "date": null,
       "time": 1506558656000,
+      "weekday": null,
     }
   }
 />
@@ -71,6 +74,7 @@ exports[`components/time/ReadableTime should render with format "Yesterday at hh
     Object {
       "date": null,
       "time": 1506465056000,
+      "weekday": null,
     }
   }
 />
@@ -81,3 +85,20 @@ exports[`components/time/ReadableTime should render with format "in 30 minutes"
   value={1506553256000}
 />
 `;
+
+exports[`components/time/ReadableTime should render with weekday when we show weekday 1`] = `
+<FormattedMessage
+  defaultMessage="{weekday}, {time, date, medium}"
+  id="boxui.readableTime.eventTimeWeekdayLong"
+  values={
+    Object {
+      "date": null,
+      "time": 1506378656000,
+      "weekday": <FormattedDate
+        value={1506378656000}
+        weekday="long"
+      />,
+    }
+  }
+/>
+`;

src/components/time/messages.js

@@ -27,6 +27,11 @@ const messages = defineMessages({
         description: 'The time that an event occurred at a given date without the year included',
         id: 'boxui.readableTime.eventTimeDateShort',
     },
+    eventTimeWeekdayLong: {
+        defaultMessage: '{weekday}, {time, date, medium}',
+        description: 'The time that an event occurred at a given date with the weekday included',
+        id: 'boxui.readableTime.eventTimeWeekdayLong',
+    },
 });
 
 export default messages;

src/constants.js

@@ -139,6 +139,7 @@ export const FIELD_ACTIVITY_TEMPLATE: 'activity_template' = 'activity_template';
 export const FIELD_APP: 'app' = 'app';
 export const FIELD_OCCURRED_AT: 'occurred_at' = 'occurred_at';
 export const FIELD_RENDERED_TEXT: 'rendered_text' = 'rendered_text';
+export const FIELD_RETENTION: 'retention' = 'retention';
 
 /* ----------------------- Permissions --------------------------- */
 export const PERMISSION_CAN_PREVIEW = 'can_preview';
@@ -364,6 +365,8 @@ export const VERSION_DELETE_ACTION: 'delete' = 'delete';
 export const VERSION_PROMOTE_ACTION: 'promote' = 'promote';
 export const VERSION_RESTORE_ACTION: 'restore' = 'restore';
 export const VERSION_UPLOAD_ACTION: 'upload' = 'upload';
+export const VERSION_RETENTION_DELETE_ACTION: 'delete' = 'delete';
+export const VERSION_RETENTION_REMOVE_ACTION: 'remove' = 'remove';
 
 /* ------------------ Placeholder Feed Items ------------------------- */
 export const PLACEHOLDER_USER: UserMini = { type: 'user', id: '2', name: '' };

src/elements/content-sidebar/versions/VersionsItem.js

@@ -18,6 +18,8 @@ import {
     VERSION_PROMOTE_ACTION,
     VERSION_RESTORE_ACTION,
     VERSION_UPLOAD_ACTION,
+    VERSION_RETENTION_DELETE_ACTION,
+    VERSION_RETENTION_REMOVE_ACTION,
 } from '../../../constants';
 import type { VersionActionCallback } from './flowTypes';
 import './VersionsItem.scss';
@@ -43,6 +45,10 @@ const ACTION_MAP = {
     [VERSION_PROMOTE_ACTION]: messages.versionPromotedBy,
     [VERSION_UPLOAD_ACTION]: messages.versionUploadedBy,
 };
+const RETENTION_MAP = {
+    [VERSION_RETENTION_DELETE_ACTION]: messages.versionRetentionDelete,
+    [VERSION_RETENTION_REMOVE_ACTION]: messages.versionRetentionRemove,
+};
 const FIVE_MINUTES_MS = 5 * 60 * 1000;
 
 const VersionsItem = ({
@@ -65,12 +71,19 @@ const VersionsItem = ({
         is_download_available,
         permissions = {},
         restored_at: restoredAt,
+        retention,
         size,
         trashed_at: trashedAt,
         version_number: versionNumber,
         version_promoted: versionPromoted,
     } = version;
     const { can_delete, can_download, can_preview, can_upload } = permissions;
+    const {
+        disposition_action: retentionDispositionAction,
+        disposition_at: retentionDispositionTime,
+        applied_at: retentionAppliedTime,
+    } = retention || {};
+    const retentionDispositionTimestamp = retentionDispositionTime && new Date(retentionDispositionTime).getTime();
 
     // Version info helpers
     const versionAction = selectors.getVersionAction(version);
@@ -86,6 +99,9 @@ const VersionsItem = ({
     const isDownloadable = !!is_download_available;
     const isLimited = versionCount - versionInteger >= versionLimit;
     const isRestricted = isWatermarked && !isCurrent; // Watermarked files do not support prior version preview
+    const isRetained =
+        !!retentionAppliedTime &&
+        (!retentionDispositionTimestamp || retentionDispositionTimestamp > new Date().getTime());
 
     // Version action helpers
     const canPreview = can_preview && !isDeleted && !isLimited && !isRestricted;
@@ -129,9 +145,10 @@ const VersionsItem = ({
                             values={{ name: versionUserName, versionPromoted }}
                         />
                     </div>
+
                     <div className="bcs-VersionsItem-info">
                         {versionTimestamp && (
-                            <time className="bcs-VersionsItem-date" dateTime={createdAt}>
+                            <time className="bcs-VersionsItem-date" dateTime={versionTime}>
                                 <ReadableTime
                                     alwaysShowTime
                                     relativeThreshold={FIVE_MINUTES_MS}
@@ -142,6 +159,17 @@ const VersionsItem = ({
                         {!!size && <span className="bcs-VersionsItem-size">{sizeUtil(size)}</span>}
                     </div>
 
+                    {retentionDispositionTimestamp && (
+                        <div className="bcs-VersionsItem-retention">
+                            <FormattedMessage
+                                {...RETENTION_MAP[retentionDispositionAction]}
+                                values={{
+                                    time: <ReadableTime timestamp={retentionDispositionTimestamp} showWeekday />,
+                                }}
+                            />
+                        </div>
+                    )}
+
                     {isLimited && hasActions && (
                         <div className="bcs-VersionsItem-footer">
                             <FormattedMessage {...messages.versionLimitExceeded} values={{ versionLimit }} />
@@ -152,6 +180,7 @@ const VersionsItem = ({
 
             {!isLimited && hasActions && (
                 <VersionsItemActions
+                    enableDelete={!isRetained}
                     fileId={fileId}
                     isCurrent={isCurrent}
                     onDelete={handleAction(onDelete)}

src/elements/content-sidebar/versions/VersionsItem.scss

@@ -37,11 +37,16 @@
 .bcs-VersionsItem-details {
     flex: 1 1 100%;
     overflow: hidden;
+
+    & > :not(.bcs-VersionsItem-info) {
+        margin-right: 35px; // Avoid flowing under action toggle button
+    }
 }
 
-.bcs-VersionsItem-footer {
-    color: $bdl-gray-62;
-    font-size: 12px;
+.bcs-VersionsItem-log {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .bcs-VersionsItem-info {
@@ -51,11 +56,16 @@
     white-space: nowrap;
 }
 
-.bcs-VersionsItem-log {
-    margin-right: 35px; // Avoid flowing under action toggle button
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.bcs-VersionsItem-retention {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+    color: $bdl-gray-62;
+}
+
+.bcs-VersionsItem-footer {
+    color: $bdl-gray-62;
+    font-size: 12px;
 }
 
 .bcs-VersionsItem-size {

src/elements/content-sidebar/versions/VersionsItemActions.js

@@ -15,11 +15,13 @@ import IconTrash from '../../../icons/general/IconTrash';
 import IconUpload from '../../../icons/general/IconUpload';
 import messages from './messages';
 import PlainButton from '../../../components/plain-button';
+import Tooltip from '../../../components/tooltip/Tooltip';
 import VersionsItemAction from './VersionsItemAction';
 import { Menu } from '../../../components/menu';
 import './VersionsItemActions.scss';
 
 type Props = {
+    enableDelete?: boolean,
     fileId: string,
     isCurrent?: boolean,
     onDelete?: () => void,
@@ -45,6 +47,7 @@ const handleToggleClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
 };
 
 const VersionsItemActions = ({
+    enableDelete = true,
     fileId,
     isCurrent = false,
     onDelete,
@@ -115,10 +118,23 @@ const VersionsItemActions = ({
                     </VersionsItemAction>
                 )}
                 {showDelete && (
-                    <VersionsItemAction action="remove" fileId={fileId} isCurrent={isCurrent} onClick={onDelete}>
-                        <IconTrash {...ICON_SIZE} />
-                        <FormattedMessage {...messages.versionActionDelete} />
-                    </VersionsItemAction>
+                    <Tooltip
+                        position="middle-left"
+                        text="Disabled by retention policy"
+                        isTabbable={false}
+                        isDisabled={enableDelete}
+                    >
+                        <VersionsItemAction
+                            action="remove"
+                            fileId={fileId}
+                            isCurrent={isCurrent}
+                            isDisabled={!enableDelete}
+                            onClick={onDelete}
+                        >
+                            <IconTrash {...ICON_SIZE} />
+                            <FormattedMessage {...messages.versionActionDelete} />
+                        </VersionsItemAction>
+                    </Tooltip>
                 )}
             </Menu>
         </DropdownMenu>