box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/elements/content-sidebar/fixtures.js

@@ -0,0 +1,185 @@
+// @flow
+import {
+    FEED_ITEM_TYPE_ANNOTATION,
+    FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_TASK,
+    FEED_ITEM_TYPE_VERSION,
+    TASK_NEW_NOT_STARTED,
+} from '../../constants';
+
+export const filterableActivityFeedItems = {
+    annotationOpen: {
+        type: FEED_ITEM_TYPE_ANNOTATION,
+        id: 'open2',
+        tagged_message: '',
+        message: 'test',
+        created_at: '2022-07-26T09:08:20-07:00',
+        created_by: {
+            type: 'user',
+            id: '6187936317',
+            name: 'Jhon',
+            login: 'jdoe@box.com',
+        },
+        modified_at: '2022-07-26T09:08:20-07:00',
+        permissions: {
+            can_delete: true,
+            can_edit: true,
+            can_reply: true,
+        },
+        status: 'open',
+    },
+    annotationResolved: {
+        type: FEED_ITEM_TYPE_ANNOTATION,
+        id: 'open2',
+        tagged_message: '',
+        message: 'test',
+        created_at: '2022-07-26T09:08:20-07:00',
+        created_by: {
+            type: 'user',
+            id: '6187936317',
+            name: 'Jhon',
+            login: 'jdoe@box.com',
+        },
+        modified_at: '2022-07-26T09:08:20-07:00',
+        permissions: {
+            can_delete: true,
+            can_edit: true,
+            can_reply: true,
+        },
+        status: 'resolved',
+    },
+    commentOpen: {
+        type: FEED_ITEM_TYPE_COMMENT,
+        id: 'open1',
+        tagged_message: '',
+        message: 'test',
+        created_at: '2022-07-26T09:08:20-07:00',
+        created_by: {
+            type: 'user',
+            id: '6187936317',
+            name: 'Jhon',
+            login: 'jdoe@box.com',
+        },
+        modified_at: '2022-07-26T09:08:20-07:00',
+        permissions: {
+            can_delete: true,
+            can_edit: true,
+            can_reply: true,
+        },
+        status: 'open',
+    },
+    commentResolved: {
+        type: FEED_ITEM_TYPE_COMMENT,
+        id: 'open1',
+        tagged_message: '',
+        message: 'test',
+        created_at: '2022-07-26T09:08:20-07:00',
+        created_by: {
+            type: 'user',
+            id: '6187936317',
+            name: 'Jhon',
+            login: 'jdoe@box.com',
+        },
+        modified_at: '2022-07-26T09:08:20-07:00',
+        permissions: {
+            can_delete: true,
+            can_edit: true,
+            can_reply: true,
+        },
+        status: 'resolved',
+    },
+    taskItem: {
+        created_by: {
+            type: 'task_collaborator',
+            target: { name: 'Jay-Z', id: '100' },
+            id: '000',
+            role: 'CREATOR',
+            status: TASK_NEW_NOT_STARTED,
+        },
+        created_at: '2019-01-01',
+        due_at: '2019-02-02',
+        id: '0',
+        name: 'task message',
+        type: FEED_ITEM_TYPE_TASK,
+        assigned_to: {
+            entries: [
+                {
+                    id: '1',
+                    target: { name: 'Beyonce', id: '2', avatar_url: '', type: 'user' },
+                    status: TASK_NEW_NOT_STARTED,
+                    permissions: {
+                        can_delete: false,
+                        can_update: false,
+                    },
+                    role: 'ASSIGNEE',
+                    type: 'task_collaborator',
+                },
+            ],
+            limit: 10,
+            next_marker: null,
+        },
+        permissions: {
+            can_update: false,
+            can_delete: false,
+            can_create_task_collaborator: false,
+            can_create_task_link: false,
+        },
+        task_links: {
+            entries: [
+                {
+                    id: '03',
+                    type: 'task_link',
+                    target: {
+                        type: 'file',
+                        id: '4',
+                    },
+                    permissions: {
+                        can_delete: false,
+                        can_update: false,
+                    },
+                },
+            ],
+            limit: 1,
+            next_marker: null,
+        },
+        status: TASK_NEW_NOT_STARTED,
+    },
+    versionItem: {
+        type: FEED_ITEM_TYPE_VERSION,
+        id: '1060370614597',
+        authenticated_download_url: 'https://someurl.com',
+        created_at: '2022-07-06T03:01:28-07:00',
+        extension: 'boxnote',
+        is_download_available: true,
+        modified_at: '2022-07-06T03:01:28-07:00',
+        modified_by: {
+            type: 'user',
+            id: '18836063940',
+            name: 'John Doe',
+            login: 'jdoe@box.com',
+        },
+        name: 'Title',
+        permissions: {
+            can_download: true,
+            can_preview: true,
+            can_delete: true,
+            can_annotate: false,
+            can_view_annotations_all: true,
+            can_view_annotations_self: true,
+            can_create_annotations: false,
+            can_view_annotations: false,
+        },
+        restored_at: null,
+        restored_by: null,
+        retention: null,
+        size: 4159,
+        trashed_at: null,
+        trashed_by: null,
+        uploader_display_name: 'John Doe',
+        version_number: '27',
+    },
+};
+
+export default {
+    filterableActivityFeedItems,
+};

package/src/elements/content-sidebar/flowTypes.js

@@ -1,6 +1,4 @@
 // @flow
-import type { MessageDescriptor } from 'react-intl';
-import type { SelectorItem, UserMini, GroupMini } from '../../common/types/core';
 import type { UseTargetingApi } from '../../features/targeting/types';
 
 type ClassificationInfo = {
@@ -8,6 +6,14 @@ type ClassificationInfo = {
     name: string,
 };
 
+type ContentInsights = {
+    error?: Object,
+    graphData: Array<Object>,
+    isLoading: boolean,
+    previousPeriodCount: number,
+    totalCount: number,
+};
+
 type NavigateOptions = {
     isToggle?: boolean,
 };
@@ -30,11 +36,6 @@ type Translations = {
     translationEnabled?: boolean,
 };
 
-type Collaborators = {
-    entries: Array<SelectorItem<UserMini | GroupMini>>,
-    next_marker: ?string,
-};
-
 type FileAccessStats = {
     comment_count?: number,
     download_count?: number,
@@ -43,29 +44,12 @@ type FileAccessStats = {
     preview_count?: number,
 };
 
-type MaskError = {
-    errorHeader: MessageDescriptor,
-    errorSubHeader?: MessageDescriptor,
-};
-
-type InlineError = {
-    content: MessageDescriptor,
-    title: MessageDescriptor,
-};
-
-type Errors = {
-    error?: MessageDescriptor,
-    inlineError?: InlineError,
-    maskError?: MaskError,
-};
-
 export type {
     ClassificationInfo,
+    ContentInsights,
     NavigateOptions,
     AdditionalSidebarTab,
     AdditionalSidebarTabFtuxData,
     Translations,
-    Collaborators,
     FileAccessStats,
-    Errors,
 };

package/src/elements/content-sidebar/messages.js

@@ -7,6 +7,16 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
+    activitySidebarFilterOptionAll: {
+        id: 'be.activitySidebarFilter.status.all',
+        defaultMessage: 'All Comments',
+        description: 'One of the dropdown options to select in order to filter comments',
+    },
+    activitySidebarFilterOptionOpen: {
+        id: 'be.activitySidebarFilter.status.open',
+        defaultMessage: 'Unresolved Comments',
+        description: 'One of the dropdown options to select in order to filter comments',
+    },
     boxSignFtuxBody: {
         id: 'be.contentSidebar.boxSignFtuxBody',
         defaultMessage: 'Sign documents or send signature requests, right from where your content lives',

package/src/elements/content-sidebar/withErrorHandling.js

@@ -11,7 +11,7 @@ import InlineError from '../../components/inline-error/InlineError';
 
 import SidebarSection from './SidebarSection';
 
-import type { Errors } from './flowTypes';
+import type { Errors } from '../common/flowTypes';
 
 type Props = {
     errorCode?: string,

package/src/elements/content-sidebar/withSidebarAnnotations.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import { matchPath, type ContextRouter } from 'react-router-dom';
+import { FEED_ITEM_TYPE_VERSION } from '../../constants';
 import { getBadUserError } from '../../utils/error';
 import type { WithAnnotatorContextProps } from '../common/annotator-context';
 import type { BoxItem, User } from '../../common/types/core';
@@ -58,7 +59,7 @@ export default function withSidebarAnnotations(
         componentDidUpdate(prevProps: Props) {
             const { annotatorState, fileId, getAnnotationsMatchPath, location, onVersionChange }: Props = this.props;
             const { annotatorState: prevAnnotatorState, fileId: prevFileId, location: prevLocation }: Props = prevProps;
-            const { activeAnnotationId, annotation } = annotatorState;
+            const { action, activeAnnotationId, annotation } = annotatorState;
             const { activeAnnotationId: prevActiveAnnotationId, annotation: prevAnnotation } = prevAnnotatorState;
 
             const match = getAnnotationsMatchPath(location);
@@ -69,7 +70,27 @@ export default function withSidebarAnnotations(
             const isTransitioningToAnnotationPath = activeAnnotationId && !isAnnotationsPath;
             const prevFileVersionId = getProp(prevMatch, 'params.fileVersionId');
 
-            if (annotation && prevAnnotation !== annotation) {
+            if (action === 'reply_create_start' || action === 'reply_create_end') {
+                this.addAnnotationReply();
+            }
+
+            if (action === 'reply_delete_start' || action === 'reply_delete_end') {
+                this.deleteAnnotationReply();
+            }
+
+            if (action === 'reply_update_start' || action === 'reply_update_end') {
+                this.updateAnnotationReply();
+            }
+
+            if (action === 'update_start' || action === 'update_end') {
+                this.updateAnnotation();
+            }
+
+            if (action === 'delete_start' || action === 'delete_end') {
+                this.deleteAnnotation();
+            }
+
+            if ((action === 'create_start' || action === 'create_end') && annotation && prevAnnotation !== annotation) {
                 this.addAnnotation();
             }
 
@@ -98,8 +119,6 @@ export default function withSidebarAnnotations(
                 currentUser,
                 file,
                 fileId,
-                isOpen,
-                location,
             } = this.props;
 
             if (!requestId) {
@@ -112,11 +131,8 @@ export default function withSidebarAnnotations(
             }
 
             const feedAPI = api.getFeedAPI(false);
-            const pathname = getProp(location, 'pathname', '');
-            const isActivity = matchPath(pathname, '/activity');
             const isPending = action === 'create_start';
             const { items: hasItems } = feedAPI.getCachedItems(fileId) || {};
-            const { current } = this.sidebarPanels;
 
             // If there are existing items in the cache for this file, then patch the cache with the new annotation
             // If there are no cache entry for feeditems, then it is assumed that it has not yet been fetched.
@@ -124,10 +140,132 @@ export default function withSidebarAnnotations(
                 feedAPI.addAnnotation(file, currentUser, annotation, requestId, isPending);
             }
 
-            // If the activity sidebar is currently open, then force it to refresh with the updated data
-            if (current && isActivity && isOpen) {
-                current.refresh(false);
+            this.refreshActivitySidebar();
+        }
+
+        addAnnotationReply() {
+            const {
+                annotatorState: {
+                    action,
+                    annotation: { id: annotationId },
+                    annotationReply,
+                    meta: { requestId },
+                },
+                api,
+                currentUser,
+                file,
+            } = this.props;
+
+            if (!currentUser) {
+                throw getBadUserError();
+            }
+
+            const feedAPI = api.getFeedAPI(false);
+            feedAPI.file = file;
+
+            if (action === 'reply_create_start') {
+                feedAPI.addPendingReply(annotationId, currentUser, { ...annotationReply, id: requestId });
+            } else {
+                const { items: feedItems = [] } = feedAPI.getCachedItems(file.id) || {};
+                const annotationItem = feedItems.find(({ id }) => id === annotationId);
+
+                if (!annotationItem) {
+                    return;
+                }
+
+                feedAPI.updateFeedItem({ total_reply_count: annotationItem.total_reply_count + 1 }, annotationId);
+                feedAPI.updateReplyItem({ ...annotationReply, isPending: false }, annotationId, requestId);
+            }
+
+            this.refreshActivitySidebar();
+        }
+
+        deleteAnnotation() {
+            const {
+                annotatorState: { action, annotation },
+                api,
+                file,
+            } = this.props;
+
+            const feedAPI = api.getFeedAPI(false);
+            feedAPI.file = file;
+
+            if (action === 'delete_start') {
+                feedAPI.updateFeedItem({ isPending: true }, annotation.id);
+            } else {
+                feedAPI.deleteFeedItem(annotation.id);
             }
+
+            this.refreshActivitySidebar();
+        }
+
+        deleteAnnotationReply() {
+            const {
+                annotatorState: {
+                    action,
+                    annotation: { id: annotationId },
+                    annotationReply: { id: replyId },
+                },
+                api,
+                file,
+            } = this.props;
+
+            const feedAPI = api.getFeedAPI(false);
+            feedAPI.file = file;
+
+            if (action === 'reply_delete_start') {
+                feedAPI.updateReplyItem({ isPending: true }, annotationId, replyId);
+            } else {
+                const { items: feedItems = [] } = feedAPI.getCachedItems(file.id) || {};
+                const annotationItem = feedItems.find(({ id }) => id === annotationId);
+
+                if (!annotationItem) {
+                    return;
+                }
+
+                // Check if the parent annotation has the reply currently visible
+                const replyItem = annotationItem.replies.find(({ id }) => id === replyId);
+                if (replyItem) {
+                    feedAPI.deleteReplyItem(replyId, annotationId);
+                } else if (annotationItem.total_reply_count > 0) {
+                    // Decrease the amount of replies by 1
+                    feedAPI.updateFeedItem({ total_reply_count: annotationItem.total_reply_count - 1 }, annotationId);
+                }
+            }
+
+            this.refreshActivitySidebar();
+        }
+
+        updateAnnotation() {
+            const {
+                annotatorState: { action, annotation },
+                api,
+                file,
+            } = this.props;
+
+            const feedAPI = api.getFeedAPI(false);
+            const isPending = action === 'update_start';
+            feedAPI.file = file;
+
+            feedAPI.updateFeedItem({ ...annotation, isPending }, annotation.id);
+
+            this.refreshActivitySidebar();
+        }
+
+        updateAnnotationReply() {
+            const {
+                annotatorState: { action, annotation, annotationReply },
+                api,
+                file,
+            } = this.props;
+
+            const feedAPI = api.getFeedAPI(false);
+            const isPending = action === 'reply_update_start';
+            feedAPI.file = file;
+
+            feedAPI.updateReplyItem({ ...annotationReply, isPending }, annotation.id, annotationReply.id);
+
+            this.refreshActivitySidebar();
         }
 
         updateActiveAnnotation = () => {
@@ -169,7 +307,7 @@ export default function withSidebarAnnotations(
             const fileVersionId = getProp(match, 'params.fileVersionId');
             const { items: feedItems = [] } = feedAPI.getCachedItems(fileId) || {};
             const version = feedItems
-                .filter(item => item.type === 'file_version')
+                .filter(item => item.type === FEED_ITEM_TYPE_VERSION)
                 .find(item => item.id === fileVersionId);
 
             if (version) {
@@ -180,6 +318,19 @@ export default function withSidebarAnnotations(
             }
         };
 
+        refreshActivitySidebar = () => {
+            const { isOpen, location } = this.props;
+
+            const pathname = getProp(location, 'pathname', '');
+            const isActivity = matchPath(pathname, '/activity');
+            const { current } = this.sidebarPanels;
+
+            // If the activity sidebar is currently open, then force it to refresh with the updated data
+            if (current && isActivity && isOpen) {
+                current.refresh(false);
+            }
+        };
+
         render() {
             return <WrappedComponent ref={this.sidebarPanels} {...this.props} />;
         }

package/src/elements/content-uploader/OverallUploadsProgressBar.js

@@ -53,6 +53,7 @@ const getPercent = (view: string, percent: number): number => {
 };
 
 type Props = {
+    customPrompt?: { defaultMessage: string, description: string, id: string },
     hasMultipleFailedUploads: boolean,
     isDragging: boolean,
     isExpanded: boolean,
@@ -66,25 +67,23 @@ type Props = {
 };
 
 const OverallUploadsProgressBar = ({
-    percent,
-    view,
-    onClick,
-    onKeyDown,
-    onUploadsManagerActionClick,
+    customPrompt,
+    hasMultipleFailedUploads,
     isDragging,
+    isExpanded,
     isResumeVisible,
     isVisible,
-    isExpanded,
-    hasMultipleFailedUploads,
+    onClick,
+    onKeyDown,
+    onUploadsManagerActionClick,
+    percent,
+    view,
 }: Props) => {
     // Show the upload prompt and set progress to 0 when the uploads manager
     // is invisible or is having files dragged to it
     const shouldShowPrompt = isDragging || !isVisible;
-    const status = shouldShowPrompt ? (
-        <FormattedMessage {...messages.uploadsManagerUploadPrompt} />
-    ) : (
-        getUploadStatus(view)
-    );
+    const message = customPrompt || messages.uploadsManagerUploadPrompt;
+    const status = shouldShowPrompt ? <FormattedMessage {...message} /> : getUploadStatus(view);
     const updatedPercent = shouldShowPrompt ? 0 : getPercent(view, percent);
 
     return (

package/src/features/classification/Classification.scss

@@ -16,5 +16,5 @@
 }
 
 .bdl-Classification-missingMessage {
-    color: $bdl-gray-50;
+    color: $bdl-gray-80;
 }

package/src/features/classification/security-controls/SecurityControlsItem.scss

@@ -15,6 +15,7 @@
     }
 
     .support-link {
+        padding-left: $bdl-grid-unit;
         color: $bdl-box-blue;
     }
 }

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

@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`features/classification/security-controls/utils getFullSecurityControlsMessages() should include correct message when watermark is applied 1`] = `
-<FormattedCompMessage
-  description="Bullet point that summarizes watermarking applied to classification"
-  id="boxui.securityControls.watermarkingAppliedWithLink"
->
-  Watermarking will be applied, click
-   
-  <Link
-    className="support-link"
-    href="https://support.box.com/hc/en-us/articles/360044195253"
-    target="_blank"
-  >
-    here
-  </Link>
-   
-  more details on Watermarking
-</FormattedCompMessage>
+Object {
+  "children": Array [
+    <FormattedMessage
+      defaultMessage="Watermarking will be applied."
+      id="boxui.securityControls.watermarkingApplied"
+    />,
+    <Link
+      className="support-link"
+      href="https://support.box.com/hc/en-us/articles/360044195253"
+      target="_blank"
+    >
+      <FormattedMessage
+        defaultMessage="Click here for more details."
+        id="boxui.securityControls.linkForMoreDetails"
+      />
+    </Link>,
+  ],
+}
 `;

package/src/features/classification/security-controls/__tests__/utils.test.js

@@ -101,12 +101,20 @@ describe('features/classification/security-controls/utils', () => {
                     enabled: true,
                 },
             };
-            const { message: formattedCompMessage } = getFullSecurityControlsMessages(accessPolicy)[0];
-            const { props: formattedCompMessageProps = {} } = formattedCompMessage;
-            const expectedMessageId = 'boxui.securityControls.watermarkingAppliedWithLink';
+            const { message: watermarkFormattedMessages } = getFullSecurityControlsMessages(accessPolicy)[0];
+            const { props: formattedMessageProps = {} } = watermarkFormattedMessages;
+            const { children: objArr = [] } = formattedMessageProps;
+            const { props: firstMessageObj = {} } = objArr[0];
+            const { props: linkObj = {} } = objArr[1];
+            const { props: secondMessageObj = {} } = linkObj.children;
 
-            expect(formattedCompMessageProps.id).toEqual(expectedMessageId);
-            expect(formattedCompMessage).toMatchSnapshot();
+            const expectedFirstMessageId = 'boxui.securityControls.watermarkingApplied';
+            const expectedSecondMessageId = 'boxui.securityControls.linkForMoreDetails';
+
+            expect(objArr.length).toEqual(2);
+            expect(firstMessageObj.id).toEqual(expectedFirstMessageId);
+            expect(secondMessageObj.id).toEqual(expectedSecondMessageId);
+            expect(formattedMessageProps).toMatchSnapshot();
         });
 
         test('should include correct message when external collab is blocked', () => {

package/src/features/classification/security-controls/messages.js

@@ -116,6 +116,16 @@ const messages = defineMessages({
         description: 'Bullet point that summarizes collaborators shared link restriction applied to classification',
         id: 'boxui.securityControls.sharingCollabAndCompanyOnly',
     },
+    watermarkingApplied: {
+        defaultMessage: 'Watermarking will be applied.',
+        description: 'Bullet point that summarizes watermarking applied to classification',
+        id: 'boxui.securityControls.watermarkingApplied',
+    },
+    linkForMoreDetails: {
+        defaultMessage: 'Click here for more details.',
+        description: 'The text of a link to a help article for more information.',
+        id: 'boxui.securityControls.linkForMoreDetails',
+    },
     externalCollabBlock: {
         defaultMessage: 'External collaboration restricted.',
         description: