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

package/es/elements/content-sidebar/ActivitySidebar.js

@@ -32,6 +32,7 @@ import debounce from 'lodash/debounce';
 import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import noop from 'lodash/noop';
+import uniqueId from 'lodash/uniqueId';
 import { FormattedMessage } from 'react-intl';
 import ActivityFeed from './activity-feed';
 import AddTaskButton from './AddTaskButton';
@@ -40,14 +41,15 @@ import messages from '../common/messages';
 import SidebarContent from './SidebarContent';
 import { WithAnnotatorContextProps, withAnnotatorContext } from '../common/annotator-context';
 import { EVENT_DATA_READY, EVENT_JS_READY } from '../common/logger/constants';
-import { getBadUserError, getBadItemError } from '../../utils/error';
+import { getBadUserError } from '../../utils/error';
 import { mark } from '../../utils/performance';
 import { withAPIContext } from '../common/api-context';
 import { withErrorBoundary } from '../common/error-boundary';
 import { withFeatureConsumer, isFeatureEnabled } from '../common/feature-checking';
 import { withLogger } from '../common/logger';
 import { withRouterAndRef } from '../common/routing';
-import { DEFAULT_COLLAB_DEBOUNCE, ERROR_CODE_FETCH_ACTIVITY, ORIGIN_ACTIVITY_SIDEBAR, SIDEBAR_VIEW_ACTIVITY, TASK_COMPLETION_RULE_ALL } from '../../constants';
+import ActivitySidebarFilter from './ActivitySidebarFilter';
+import { DEFAULT_COLLAB_DEBOUNCE, ERROR_CODE_FETCH_ACTIVITY, FEED_ITEM_TYPE_VERSION, ORIGIN_ACTIVITY_SIDEBAR, SIDEBAR_VIEW_ACTIVITY, TASK_COMPLETION_RULE_ALL } from '../../constants';
 import './ActivitySidebar.scss';
 export var activityFeedInlineError = {
   inlineError: {
@@ -77,7 +79,9 @@ function (_React$PureComponent) {
           permissions = _ref.permissions;
       var _this$props = _this.props,
           api = _this$props.api,
+          emitAnnotationRemoveEvent = _this$props.emitAnnotationRemoveEvent,
           file = _this$props.file;
+      emitAnnotationRemoveEvent(id, true);
       api.getFeedAPI(false).deleteAnnotation(file, id, permissions, _this.deleteAnnotationSuccess.bind(_assertThisInitialized(_this), id), _this.feedErrorCallback);
 
       _this.fetchFeedItems();
@@ -86,8 +90,37 @@ function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleAnnotationEdit", function (id, text, permissions) {
       var _this$props2 = _this.props,
           api = _this$props2.api,
+          emitAnnotationUpdateEvent = _this$props2.emitAnnotationUpdateEvent,
           file = _this$props2.file;
-      api.getFeedAPI(false).updateAnnotation(file, id, text, permissions, _this.feedSuccessCallback, _this.feedErrorCallback);
+      emitAnnotationUpdateEvent({
+        id: id,
+        description: {
+          message: text
+        }
+      }, true);
+      api.getFeedAPI(false).updateAnnotation(file, id, text, undefined, permissions, function (annotation) {
+        emitAnnotationUpdateEvent(annotation);
+
+        _this.feedSuccessCallback();
+      }, _this.feedErrorCallback);
+
+      _this.fetchFeedItems();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleAnnotationStatusChange", function (id, status, permissions) {
+      var _this$props3 = _this.props,
+          api = _this$props3.api,
+          emitAnnotationUpdateEvent = _this$props3.emitAnnotationUpdateEvent,
+          file = _this$props3.file;
+      emitAnnotationUpdateEvent({
+        id: id,
+        status: status
+      }, true);
+      api.getFeedAPI(false).updateAnnotation(file, id, undefined, status, permissions, function (annotation) {
+        emitAnnotationUpdateEvent(annotation);
+
+        _this.feedSuccessCallback();
+      }, _this.feedErrorCallback);
 
       _this.fetchFeedItems();
     });
@@ -103,10 +136,10 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "createTask", function (message, assignees, taskType, dueAt, completionRule, onSuccess, onError) {
-      var currentUser = _this.state.currentUser;
-      var _this$props3 = _this.props,
-          file = _this$props3.file,
-          api = _this$props3.api;
+      var _this$props4 = _this.props,
+          api = _this$props4.api,
+          currentUser = _this$props4.currentUser,
+          file = _this$props4.file;
 
       if (!currentUser) {
         throw getBadUserError();
@@ -134,10 +167,10 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "deleteTask", function (task) {
-      var _this$props4 = _this.props,
-          file = _this$props4.file,
-          api = _this$props4.api,
-          onTaskDelete = _this$props4.onTaskDelete;
+      var _this$props5 = _this.props,
+          file = _this$props5.file,
+          api = _this$props5.api,
+          onTaskDelete = _this$props5.onTaskDelete;
       api.getFeedAPI(false).deleteTaskNew(file, task, function (taskId) {
         _this.feedSuccessCallback();
 
@@ -148,10 +181,10 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateTask", function (task, onSuccess, onError) {
-      var _this$props5 = _this.props,
-          file = _this$props5.file,
-          api = _this$props5.api,
-          onTaskUpdate = _this$props5.onTaskUpdate;
+      var _this$props6 = _this.props,
+          api = _this$props6.api,
+          file = _this$props6.file,
+          onTaskUpdate = _this$props6.onTaskUpdate;
 
       var errorCallback = function errorCallback(e, code) {
         if (onError) {
@@ -177,12 +210,12 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateTaskAssignment", function (taskId, taskAssignmentId, status) {
-      var _this$props6 = _this.props,
-          file = _this$props6.file,
-          api = _this$props6.api,
-          onTaskAssignmentUpdate = _this$props6.onTaskAssignmentUpdate;
-      var _this$state$currentUs = _this.state.currentUser,
-          currentUser = _this$state$currentUs === void 0 ? {} : _this$state$currentUs;
+      var _this$props7 = _this.props,
+          api = _this$props7.api,
+          _this$props7$currentU = _this$props7.currentUser,
+          currentUser = _this$props7$currentU === void 0 ? {} : _this$props7$currentU,
+          file = _this$props7.file,
+          onTaskAssignmentUpdate = _this$props7.onTaskAssignmentUpdate;
 
       var successCallback = function successCallback() {
         _this.feedSuccessCallback();
@@ -198,24 +231,56 @@ function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "deleteComment", function (_ref2) {
       var id = _ref2.id,
           permissions = _ref2.permissions;
-      var _this$props7 = _this.props,
-          file = _this$props7.file,
-          api = _this$props7.api,
-          onCommentDelete = _this$props7.onCommentDelete;
-      api.getFeedAPI(false).deleteComment(file, id, permissions, function (comment) {
+      var _this$props8 = _this.props,
+          api = _this$props8.api,
+          file = _this$props8.file,
+          hasReplies = _this$props8.hasReplies,
+          onCommentDelete = _this$props8.onCommentDelete;
+
+      var successCallback = function successCallback(comment) {
         _this.feedSuccessCallback();
 
         onCommentDelete(comment);
-      }, _this.feedErrorCallback); // need to load the pending item
+      };
+
+      if (hasReplies) {
+        api.getFeedAPI(false).deleteThreadedComment(file, id, permissions, successCallback, _this.feedErrorCallback);
+      } else {
+        api.getFeedAPI(false).deleteComment(file, id, permissions, successCallback, _this.feedErrorCallback);
+      } // need to load the pending item
+
 
       _this.fetchFeedItems();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "updateComment", function (id, text, hasMention, permissions, onSuccess, onError) {
-      var _this$props8 = _this.props,
-          file = _this$props8.file,
-          api = _this$props8.api,
-          onCommentUpdate = _this$props8.onCommentUpdate;
+    _defineProperty(_assertThisInitialized(_this), "deleteReply", function (_ref3) {
+      var id = _ref3.id,
+          parentId = _ref3.parentId,
+          permissions = _ref3.permissions;
+      var _this$props9 = _this.props,
+          api = _this$props9.api,
+          emitAnnotationReplyDeleteEvent = _this$props9.emitAnnotationReplyDeleteEvent,
+          file = _this$props9.file;
+      emitAnnotationReplyDeleteEvent(id, parentId, true);
+      api.getFeedAPI(false).deleteReply(file, id, parentId, permissions, _this.deleteReplySuccessCallback.bind(_assertThisInitialized(_this), id, parentId), _this.feedErrorCallback); // need to load the pending item
+
+      _this.fetchFeedItems();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "deleteReplySuccessCallback", function (id, parentId) {
+      var emitAnnotationReplyDeleteEvent = _this.props.emitAnnotationReplyDeleteEvent;
+
+      _this.feedSuccessCallback();
+
+      emitAnnotationReplyDeleteEvent(id, parentId);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateComment", function (id, text, status, hasMention, permissions, onSuccess, onError) {
+      var _this$props10 = _this.props,
+          api = _this$props10.api,
+          file = _this$props10.file,
+          hasReplies = _this$props10.hasReplies,
+          onCommentUpdate = _this$props10.onCommentUpdate;
 
       var errorCallback = function errorCallback(e, code) {
         if (onError) {
@@ -235,45 +300,118 @@ function (_React$PureComponent) {
         onCommentUpdate();
       };
 
-      api.getFeedAPI(false).updateComment(file, id, text, hasMention, permissions, successCallback, errorCallback); // need to load the pending item
+      if (hasReplies) {
+        api.getFeedAPI(false).updateThreadedComment(file, id, text, status, permissions, successCallback, errorCallback);
+      } else {
+        api.getFeedAPI(false).updateComment(file, id, text || '', hasMention, permissions, successCallback, errorCallback);
+      } // need to load the pending item
+
 
       _this.fetchFeedItems();
     });
 
+    _defineProperty(_assertThisInitialized(_this), "updateReply", function (id, parentId, text, permissions, onSuccess, onError) {
+      var _this$props11 = _this.props,
+          api = _this$props11.api,
+          emitAnnotationReplyUpdateEvent = _this$props11.emitAnnotationReplyUpdateEvent,
+          file = _this$props11.file;
+      emitAnnotationReplyUpdateEvent({
+        id: id,
+        tagged_message: text
+      }, parentId, true);
+      api.getFeedAPI(false).updateReply(file, id, parentId, text, permissions, _this.updateReplySuccessCallback.bind(_assertThisInitialized(_this), parentId, onSuccess), function (error, code) {
+        if (onError) {
+          onError(error, code);
+        }
+
+        _this.feedErrorCallback(error, code);
+      }); // need to load the pending item
+
+      _this.fetchFeedItems();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateReplySuccessCallback", function (parentId, onSuccess, reply) {
+      var emitAnnotationReplyUpdateEvent = _this.props.emitAnnotationReplyUpdateEvent;
+
+      _this.feedSuccessCallback();
+
+      emitAnnotationReplyUpdateEvent(reply, parentId);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "createComment", function (text, hasMention) {
-      var _this$props9 = _this.props,
-          file = _this$props9.file,
-          api = _this$props9.api,
-          onCommentCreate = _this$props9.onCommentCreate;
-      var currentUser = _this.state.currentUser;
+      var _this$props12 = _this.props,
+          api = _this$props12.api,
+          currentUser = _this$props12.currentUser,
+          file = _this$props12.file,
+          hasReplies = _this$props12.hasReplies,
+          onCommentCreate = _this$props12.onCommentCreate;
 
       if (!currentUser) {
         throw getBadUserError();
       }
 
-      api.getFeedAPI(false).createComment(file, currentUser, text, hasMention, function (comment) {
+      var successCallback = function successCallback(comment) {
         onCommentCreate(comment);
 
         _this.feedSuccessCallback();
-      }, _this.feedErrorCallback); // need to load the pending item
+      };
+
+      if (hasReplies) {
+        api.getFeedAPI(false).createThreadedComment(file, currentUser, text, successCallback, _this.feedErrorCallback);
+      } else {
+        api.getFeedAPI(false).createComment(file, currentUser, text, hasMention, successCallback, _this.feedErrorCallback);
+      } // need to load the pending item
+
 
       _this.fetchFeedItems();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "deleteAppActivity", function (_ref3) {
-      var id = _ref3.id;
-      var _this$props10 = _this.props,
-          file = _this$props10.file,
-          api = _this$props10.api;
+    _defineProperty(_assertThisInitialized(_this), "createReply", function (parentId, parentType, text) {
+      var _this$props13 = _this.props,
+          api = _this$props13.api,
+          currentUser = _this$props13.currentUser,
+          emitAnnotationReplyCreateEvent = _this$props13.emitAnnotationReplyCreateEvent,
+          file = _this$props13.file;
+
+      if (!currentUser) {
+        throw getBadUserError();
+      }
+
+      var eventRequestId = uniqueId('comment_');
+      emitAnnotationReplyCreateEvent({
+        tagged_message: text
+      }, eventRequestId, parentId, true);
+      api.getFeedAPI(false).createReply(file, currentUser, parentId, parentType, text, _this.createReplySuccessCallback.bind(_assertThisInitialized(_this), eventRequestId, parentId), _this.feedErrorCallback); // need to load the pending item
+
+      _this.fetchFeedItems();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "createReplySuccessCallback", function (eventRequestId, parentId, reply) {
+      var emitAnnotationReplyCreateEvent = _this.props.emitAnnotationReplyCreateEvent;
+
+      _this.feedSuccessCallback();
+
+      emitAnnotationReplyCreateEvent(reply, eventRequestId, parentId);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "deleteAppActivity", function (_ref4) {
+      var id = _ref4.id;
+      var _this$props14 = _this.props,
+          api = _this$props14.api,
+          file = _this$props14.file;
       api.getFeedAPI(false).deleteAppActivity(file, id, _this.feedSuccessCallback, _this.feedErrorCallback); // need to load the pending item
 
       _this.fetchFeedItems();
     });
 
     _defineProperty(_assertThisInitialized(_this), "fetchFeedItemsSuccessCallback", function (feedItems) {
-      var _this$props11 = _this.props,
-          fileId = _this$props11.file.id,
-          logger = _this$props11.logger;
+      var _this$props15 = _this.props,
+          fileId = _this$props15.file.id,
+          logger = _this$props15.logger;
       mark(MARK_NAME_DATA_READY); // Only emit metric if has >1 activity feed items (there should always at least be the current version)
 
       if (feedItems.length > 1) {
@@ -300,8 +438,8 @@ function (_React$PureComponent) {
       if (Array.isArray(errors) && errors.length) {
         onError(new Error('Fetch feed items error'), ERROR_CODE_FETCH_ACTIVITY, {
           showNotification: true,
-          errors: errors.map(function (_ref4) {
-            var code = _ref4.code;
+          errors: errors.map(function (_ref5) {
+            var code = _ref5.code;
             return code;
           })
         });
@@ -319,13 +457,6 @@ function (_React$PureComponent) {
       _this.props.onError(error, code, contextInfo);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "fetchCurrentUserSuccessCallback", function (currentUser) {
-      _this.setState({
-        currentUser: currentUser,
-        currentUserError: undefined
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "getApproverContactsSuccessCallback", function (collaborators) {
       var entries = collaborators.entries;
 
@@ -347,45 +478,44 @@ function (_React$PureComponent) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getApproverWithQuery", debounce(function (searchStr) {
-      return _this.getCollaborators(_this.getApproverContactsSuccessCallback, _this.errorCallback, searchStr, {
+    _defineProperty(_assertThisInitialized(_this), "getApprover", debounce(function (searchStr) {
+      var _this$props16 = _this.props,
+          file = _this$props16.file,
+          api = _this$props16.api;
+      api.getFileCollaboratorsAPI(false).getCollaboratorsWithQuery(file.id, _this.getApproverContactsSuccessCallback, _this.errorCallback, searchStr, {
         includeGroups: true
       });
     }, DEFAULT_COLLAB_DEBOUNCE));
 
-    _defineProperty(_assertThisInitialized(_this), "getMentionWithQuery", debounce(function (searchStr) {
-      return _this.getCollaborators(_this.getMentionContactsSuccessCallback, _this.errorCallback, searchStr);
+    _defineProperty(_assertThisInitialized(_this), "getMention", debounce(function (searchStr) {
+      var _this$props17 = _this.props,
+          file = _this$props17.file,
+          api = _this$props17.api;
+      api.getFileCollaboratorsAPI(false).getCollaboratorsWithQuery(file.id, _this.getMentionContactsSuccessCallback, _this.errorCallback, searchStr);
     }, DEFAULT_COLLAB_DEBOUNCE));
 
-    _defineProperty(_assertThisInitialized(_this), "fetchCurrentUserErrorCallback", function (e, code) {
-      _this.setState({
-        currentUser: undefined,
-        currentUserError: {
-          maskError: {
-            errorHeader: messages.currentUserErrorHeaderMessage,
-            errorSubHeader: messages.defaultErrorMaskSubHeaderMessage
-          }
-        }
-      });
+    _defineProperty(_assertThisInitialized(_this), "getReplies", function (id, type) {
+      var _this$props18 = _this.props,
+          api = _this$props18.api,
+          file = _this$props18.file;
+      api.getFeedAPI(false).fetchReplies(file, id, type, _this.feedSuccessCallback, _this.feedErrorCallback); // need to load the pending item
 
-      _this.errorCallback(e, code, {
-        error: e
-      });
+      _this.fetchFeedItems();
     });
 
     _defineProperty(_assertThisInitialized(_this), "getAvatarUrl",
     /*#__PURE__*/
     function () {
-      var _ref5 = _asyncToGenerator(
+      var _ref6 = _asyncToGenerator(
       /*#__PURE__*/
       regeneratorRuntime.mark(function _callee(userId) {
-        var _this$props12, file, api;
+        var _this$props19, file, api;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props12 = _this.props, file = _this$props12.file, api = _this$props12.api;
+                _this$props19 = _this.props, file = _this$props19.file, api = _this$props19.api;
                 return _context.abrupt("return", api.getUsersAPI(false).getAvatarUrlWithAccessToken(userId, file.id));
 
               case 2:
@@ -397,26 +527,26 @@ function (_React$PureComponent) {
       }));
 
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
 
     _defineProperty(_assertThisInitialized(_this), "handleAnnotationSelect", function (annotation) {
       var file_version = annotation.file_version,
           nextActiveAnnotationId = annotation.id;
-      var _this$props13 = _this.props,
-          emitAnnotatorActiveChangeEvent = _this$props13.emitAnnotatorActiveChangeEvent,
-          file = _this$props13.file,
-          getAnnotationsMatchPath = _this$props13.getAnnotationsMatchPath,
-          getAnnotationsPath = _this$props13.getAnnotationsPath,
-          history = _this$props13.history,
-          location = _this$props13.location,
-          onAnnotationSelect = _this$props13.onAnnotationSelect;
+      var _this$props20 = _this.props,
+          emitActiveAnnotationChangeEvent = _this$props20.emitActiveAnnotationChangeEvent,
+          file = _this$props20.file,
+          getAnnotationsMatchPath = _this$props20.getAnnotationsMatchPath,
+          getAnnotationsPath = _this$props20.getAnnotationsPath,
+          history = _this$props20.history,
+          location = _this$props20.location,
+          onAnnotationSelect = _this$props20.onAnnotationSelect;
       var annotationFileVersionId = getProp(file_version, 'id');
       var currentFileVersionId = getProp(file, 'file_version.id');
       var match = getAnnotationsMatchPath(location);
       var selectedFileVersionId = getProp(match, 'params.fileVersionId', currentFileVersionId);
-      emitAnnotatorActiveChangeEvent(nextActiveAnnotationId);
+      emitActiveAnnotationChangeEvent(nextActiveAnnotationId);
 
       if (annotationFileVersionId && annotationFileVersionId !== selectedFileVersionId) {
         history.push(getAnnotationsPath(annotationFileVersionId, nextActiveAnnotationId));
@@ -425,6 +555,30 @@ function (_React$PureComponent) {
       onAnnotationSelect(annotation);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleItemsFiltered", function (status) {
+      var onFilterChange = _this.props.onFilterChange;
+
+      _this.setState({
+        feedItemsStatusFilter: status
+      });
+
+      onFilterChange(status);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getFilteredFeedItems", function () {
+      var _this$state = _this.state,
+          feedItems = _this$state.feedItems,
+          feedItemsStatusFilter = _this$state.feedItemsStatusFilter;
+
+      if (!feedItems || !feedItemsStatusFilter) {
+        return feedItems;
+      }
+
+      return feedItems.filter(function (item) {
+        return item.status === feedItemsStatusFilter || item.type === FEED_ITEM_TYPE_VERSION;
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onTaskModalClose", function () {
       _this.setState({
         approverSelectorContacts: []
@@ -432,13 +586,13 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderAddTaskButton", function () {
-      var _this$props14 = _this.props,
-          isDisabled = _this$props14.isDisabled,
-          hasTasks = _this$props14.hasTasks;
+      var _this$props21 = _this.props,
+          isDisabled = _this$props21.isDisabled,
+          hasTasks = _this$props21.hasTasks;
       var approverSelectorContacts = _this.state.approverSelectorContacts;
 
       var _assertThisInitialize = _assertThisInitialized(_this),
-          getApproverWithQuery = _assertThisInitialize.getApproverWithQuery,
+          getApprover = _assertThisInitialize.getApprover,
           getAvatarUrl = _assertThisInitialize.getAvatarUrl,
           createTask = _assertThisInitialize.createTask,
           onTaskModalClose = _assertThisInitialize.onTaskModalClose;
@@ -455,7 +609,7 @@ function (_React$PureComponent) {
           approverSelectorContacts: approverSelectorContacts,
           completionRule: TASK_COMPLETION_RULE_ALL,
           createTask: createTask,
-          getApproverWithQuery: getApproverWithQuery,
+          getApproverWithQuery: getApprover,
           getAvatarUrl: getAvatarUrl,
           id: '',
           message: ''
@@ -463,6 +617,37 @@ function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderActivitySidebarFilter", function () {
+      var features = _this.props.features;
+      var feedItemsStatusFilter = _this.state.feedItemsStatusFilter;
+      var shouldShowActivityFeedFilter = isFeatureEnabled(features, 'activityFeed.filter.enabled');
+
+      if (!shouldShowActivityFeedFilter) {
+        return null;
+      }
+
+      return React.createElement(ActivitySidebarFilter, {
+        feedItemStatus: feedItemsStatusFilter,
+        onFeedItemStatusClick: function onFeedItemStatusClick(selectedStatus) {
+          _this.handleItemsFiltered(selectedStatus);
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderActions", function () {
+      return React.createElement(React.Fragment, null, _this.renderActivitySidebarFilter(), _this.renderAddTaskButton());
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTitle", function () {
+      var features = _this.props.features;
+
+      if (isFeatureEnabled(features, 'activityFeed.filter.enabled')) {
+        return undefined;
+      }
+
+      return React.createElement(FormattedMessage, messages.sidebarActivityTitle);
+    });
+
     var _logger = _this.props.logger;
     mark(MARK_NAME_DATA_LOADING);
 
@@ -477,46 +662,14 @@ function (_React$PureComponent) {
   _createClass(ActivitySidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var currentUser = this.props.currentUser;
       this.fetchFeedItems(true);
-      this.fetchCurrentUser(currentUser);
     }
   }, {
     key: "deleteAnnotationSuccess",
     value: function deleteAnnotationSuccess(id) {
-      var emitRemoveEvent = this.props.emitRemoveEvent;
+      var emitAnnotationRemoveEvent = this.props.emitAnnotationRemoveEvent;
       this.feedSuccessCallback();
-      emitRemoveEvent(id);
-    }
-    /**
-     * Fetches a Users info
-     *
-     * @private
-     * @param {User} [user] - Box User. If missing, gets user that the current token was generated for.
-     * @param {boolean} shouldDestroy
-     * @return {void}
-     */
-
-  }, {
-    key: "fetchCurrentUser",
-    value: function fetchCurrentUser(user) {
-      var shouldDestroy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var _this$props15 = this.props,
-          api = _this$props15.api,
-          file = _this$props15.file;
-
-      if (!file) {
-        throw getBadItemError();
-      }
-
-      if (typeof user === 'undefined') {
-        api.getUsersAPI(shouldDestroy).getUser(file.id, this.fetchCurrentUserSuccessCallback, this.fetchCurrentUserErrorCallback);
-      } else {
-        this.setState({
-          currentUser: user,
-          currentUserError: undefined
-        });
-      }
+      emitAnnotationRemoveEvent(id);
     }
     /**
      * Success callback for fetching feed items
@@ -534,17 +687,19 @@ function (_React$PureComponent) {
     value: function fetchFeedItems() {
       var shouldRefreshCache = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var shouldDestroy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var _this$props16 = this.props,
-          file = _this$props16.file,
-          api = _this$props16.api,
-          features = _this$props16.features,
-          shouldShowTasks = _this$props16.hasTasks,
-          shouldShowVersions = _this$props16.hasVersions;
+      var _this$props22 = this.props,
+          api = _this$props22.api,
+          file = _this$props22.file,
+          features = _this$props22.features,
+          shouldShowReplies = _this$props22.hasReplies,
+          shouldShowTasks = _this$props22.hasTasks,
+          shouldShowVersions = _this$props22.hasVersions;
       var shouldShowAppActivity = isFeatureEnabled(features, 'activityFeed.appActivity.enabled');
       var shouldShowAnnotations = isFeatureEnabled(features, 'activityFeed.annotations.enabled');
       api.getFeedAPI(shouldDestroy).feedItems(file, shouldRefreshCache, this.fetchFeedItemsSuccessCallback, this.fetchFeedItemsErrorCallback, this.errorCallback, {
         shouldShowAnnotations: shouldShowAnnotations,
         shouldShowAppActivity: shouldShowAppActivity,
+        shouldShowReplies: shouldShowReplies,
         shouldShowTasks: shouldShowTasks,
         shouldShowVersions: shouldShowVersions
       });
@@ -557,47 +712,6 @@ function (_React$PureComponent) {
      * @return {void}
      */
 
-  }, {
-    key: "getCollaborators",
-
-    /**
-     * Fetches file collaborators
-     *
-     * @param {Function} successCallback - the success callback
-     * @param {Function} errorCallback - the error callback
-     * @param {string} searchStr - the search string
-     * @param {Object} [options]
-     * @param {boolean} [options.includeGroups] - return groups as well as users
-     * @return {void}
-     */
-    value: function getCollaborators(successCallback, errorCallback, searchStr) {
-      var _ref6 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-          _ref6$includeGroups = _ref6.includeGroups,
-          includeGroups = _ref6$includeGroups === void 0 ? false : _ref6$includeGroups;
-
-      // Do not fetch without filter
-      var _this$props17 = this.props,
-          file = _this$props17.file,
-          api = _this$props17.api;
-
-      if (!searchStr || searchStr.trim() === '') {
-        return;
-      }
-
-      api.getFileCollaboratorsAPI(true).getFileCollaborators(file.id, successCallback, errorCallback, {
-        filter_term: searchStr,
-        include_groups: includeGroups,
-        include_uploader_collabs: false
-      });
-    }
-    /**
-     * Handles a failed file user info fetch
-     *
-     * @private
-     * @param {ElementsXhrError} e - API error
-     * @return {void}
-     */
-
   }, {
     key: "refresh",
     value: function refresh() {
@@ -607,30 +721,30 @@ function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props18 = this.props,
-          elementId = _this$props18.elementId,
-          file = _this$props18.file,
-          _this$props18$isDisab = _this$props18.isDisabled,
-          isDisabled = _this$props18$isDisab === void 0 ? false : _this$props18$isDisab,
-          onVersionHistoryClick = _this$props18.onVersionHistoryClick,
-          getUserProfileUrl = _this$props18.getUserProfileUrl,
-          activeFeedEntryId = _this$props18.activeFeedEntryId,
-          activeFeedEntryType = _this$props18.activeFeedEntryType,
-          onTaskView = _this$props18.onTaskView;
-      var _this$state = this.state,
-          currentUser = _this$state.currentUser,
-          approverSelectorContacts = _this$state.approverSelectorContacts,
-          mentionSelectorContacts = _this$state.mentionSelectorContacts,
-          contactsLoaded = _this$state.contactsLoaded,
-          feedItems = _this$state.feedItems,
-          activityFeedError = _this$state.activityFeedError,
-          currentUserError = _this$state.currentUserError;
+      var _this$props23 = this.props,
+          currentUser = _this$props23.currentUser,
+          currentUserError = _this$props23.currentUserError,
+          elementId = _this$props23.elementId,
+          file = _this$props23.file,
+          hasReplies = _this$props23.hasReplies,
+          _this$props23$isDisab = _this$props23.isDisabled,
+          isDisabled = _this$props23$isDisab === void 0 ? false : _this$props23$isDisab,
+          onVersionHistoryClick = _this$props23.onVersionHistoryClick,
+          getUserProfileUrl = _this$props23.getUserProfileUrl,
+          activeFeedEntryId = _this$props23.activeFeedEntryId,
+          activeFeedEntryType = _this$props23.activeFeedEntryType,
+          onTaskView = _this$props23.onTaskView;
+      var _this$state2 = this.state,
+          activityFeedError = _this$state2.activityFeedError,
+          approverSelectorContacts = _this$state2.approverSelectorContacts,
+          contactsLoaded = _this$state2.contactsLoaded,
+          mentionSelectorContacts = _this$state2.mentionSelectorContacts;
       return React.createElement(SidebarContent, {
-        actions: this.renderAddTaskButton(),
+        actions: this.renderActions(),
         className: "bcs-activity",
         elementId: elementId,
         sidebarView: SIDEBAR_VIEW_ACTIVITY,
-        title: React.createElement(FormattedMessage, messages.sidebarActivityTitle)
+        title: this.renderTitle()
       }, React.createElement(ActivityFeed, {
         activeFeedEntryId: activeFeedEntryId,
         activeFeedEntryType: activeFeedEntryType,
@@ -638,22 +752,28 @@ function (_React$PureComponent) {
         approverSelectorContacts: approverSelectorContacts,
         currentUser: currentUser,
         currentUserError: currentUserError,
-        feedItems: feedItems,
+        feedItems: this.getFilteredFeedItems(),
         file: file,
-        getApproverWithQuery: this.getApproverWithQuery,
+        getApproverWithQuery: this.getApprover,
         getAvatarUrl: this.getAvatarUrl,
-        getMentionWithQuery: this.getMentionWithQuery,
+        getMentionWithQuery: this.getMention,
         getUserProfileUrl: getUserProfileUrl,
+        hasReplies: hasReplies,
         isDisabled: isDisabled,
         mentionSelectorContacts: mentionSelectorContacts,
         contactsLoaded: contactsLoaded,
         onAnnotationDelete: this.handleAnnotationDelete,
         onAnnotationEdit: this.handleAnnotationEdit,
         onAnnotationSelect: this.handleAnnotationSelect,
+        onAnnotationStatusChange: this.handleAnnotationStatusChange,
         onAppActivityDelete: this.deleteAppActivity,
         onCommentCreate: this.createComment,
         onCommentDelete: this.deleteComment,
         onCommentUpdate: this.updateComment,
+        onReplyCreate: this.createReply,
+        onReplyDelete: this.deleteReply,
+        onReplyUpdate: this.updateReply,
+        onShowReplies: this.getReplies,
         onTaskAssignmentUpdate: this.updateTaskAssignment,
         onTaskCreate: this.createTask,
         onTaskDelete: this.deleteTask,
@@ -670,7 +790,12 @@ function (_React$PureComponent) {
 
 _defineProperty(ActivitySidebar, "defaultProps", {
   annotatorState: {},
-  emitAnnotatorActiveChangeEvent: noop,
+  emitActiveAnnotationChangeEvent: noop,
+  emitAnnotationRemoveEvent: noop,
+  emitAnnotationReplyCreateEvent: noop,
+  emitAnnotationReplyDeleteEvent: noop,
+  emitAnnotationReplyUpdateEvent: noop,
+  emitAnnotationUpdateEvent: noop,
   getAnnotationsMatchPath: noop,
   getAnnotationsPath: noop,
   hasReplies: false,
@@ -681,6 +806,7 @@ _defineProperty(ActivitySidebar, "defaultProps", {
   onCommentCreate: noop,
   onCommentDelete: noop,
   onCommentUpdate: noop,
+  onFilterChange: noop,
   onTaskAssignmentUpdate: noop,
   onTaskCreate: noop,
   onTaskDelete: noop,