box-ui-elements 16.1.0-beta.9 → 17.0.0

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

@@ -4,6 +4,10 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -28,12 +32,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @author Box
  */
 import * as React from 'react';
+import classNames from 'classnames';
 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 { generatePath } from 'react-router-dom';
 import ActivityFeed from './activity-feed';
 import AddTaskButton from './AddTaskButton';
 import API from '../../api';
@@ -49,7 +55,7 @@ import { withFeatureConsumer, isFeatureEnabled } from '../common/feature-checkin
 import { withLogger } from '../common/logger';
 import { withRouterAndRef } from '../common/routing';
 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 { ACTIVITY_FILTER_OPTION_ALL, ACTIVITY_FILTER_OPTION_RESOLVED, ACTIVITY_FILTER_OPTION_TASKS, ACTIVITY_FILTER_OPTION_UNRESOLVED, DEFAULT_COLLAB_DEBOUNCE, ERROR_CODE_FETCH_ACTIVITY, FEED_ITEM_TYPE_ANNOTATION, FEED_ITEM_TYPE_COMMENT, FEED_ITEM_TYPE_TASK, FEED_ITEM_TYPE_VERSION, ORIGIN_ACTIVITY_SIDEBAR, SIDEBAR_VIEW_ACTIVITY, TASK_COMPLETION_RULE_ALL } from '../../constants';
 import './ActivitySidebar.scss';
 export var activityFeedInlineError = {
   inlineError: {
@@ -332,10 +338,26 @@ function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "updateReplies", function (id, replies) {
       var _this$props12 = _this.props,
+          activeFeedEntryId = _this$props12.activeFeedEntryId,
           api = _this$props12.api,
-          file = _this$props12.file;
+          file = _this$props12.file,
+          history = _this$props12.history;
+      var feedItems = _this.state.feedItems;
+
+      if (!feedItems) {
+        return;
+      }
+
       var feedAPI = api.getFeedAPI(false);
-      feedAPI.file = file;
+      feedAPI.file = file; // Detect if replies are being hidden and activeFeedEntryId belongs to a reply
+      // that is in currently being updated parent, in order to disable active item
+
+      if (activeFeedEntryId && replies.length === 1 && feedItems.some(function (item) {
+        return item.id === id && item === _this.getCommentFeedItemByReplyId(feedItems, activeFeedEntryId);
+      })) {
+        history.replace(_this.getActiveCommentPath());
+      }
+
       feedAPI.updateFeedItem({
         replies: replies
       }, id);
@@ -421,6 +443,30 @@ function (_React$PureComponent) {
       _this.fetchFeedItems();
     });
 
+    _defineProperty(_assertThisInitialized(_this), "fetchRepliesForFeedItems", function (feedItems) {
+      var activeFeedEntryId = _this.props.activeFeedEntryId;
+
+      if (!activeFeedEntryId) {
+        return;
+      }
+
+      _this.getActiveFeedEntryData(feedItems).then(function (_ref5) {
+        var id = _ref5.id,
+            type = _ref5.type;
+
+        if (!id || !type || _this.isActiveEntryInFeed(feedItems, activeFeedEntryId) || !_this.isItemTypeComment(type)) {
+          return Promise.resolve(feedItems);
+        }
+
+        var parentType = type === FEED_ITEM_TYPE_COMMENT ? FEED_ITEM_TYPE_COMMENT : FEED_ITEM_TYPE_ANNOTATION;
+        return _this.getFeedItemsWithReplies(feedItems, id, parentType);
+      }).then(function (updatedItems) {
+        return _this.fetchFeedItemsSuccessCallback(updatedItems);
+      }).catch(function (error) {
+        return _this.fetchFeedItemsErrorCallback(feedItems, [error]);
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "fetchFeedItemsSuccessCallback", function (feedItems) {
       var _this$props16 = _this.props,
           fileId = _this$props16.file.id,
@@ -451,14 +497,51 @@ 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 (_ref5) {
-            var code = _ref5.code;
+          errors: errors.map(function (_ref6) {
+            var code = _ref6.code;
             return code;
           })
         });
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getCommentFeedItemWithReplies", function (feedItem, replies) {
+      return _objectSpread({}, feedItem, {
+        replies: replies
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getFeedItemsWithReplies", function (feedItems, id, type) {
+      var _this$props17 = _this.props,
+          api = _this$props17.api,
+          file = _this$props17.file;
+      return new Promise(function (resolve, reject) {
+        if (!id || !type) {
+          resolve(feedItems);
+          return;
+        }
+
+        api.getFeedAPI(false).fetchReplies(file, id, type, function (replies) {
+          var updatedFeedItems = feedItems.map(function (item) {
+            if (item.id === id && _this.isItemTypeComment(item.type)) {
+              if (item.type === FEED_ITEM_TYPE_ANNOTATION) {
+                return _this.getCommentFeedItemWithReplies(item, replies);
+              }
+
+              if (item.type === FEED_ITEM_TYPE_COMMENT) {
+                return _this.getCommentFeedItemWithReplies(item, replies);
+              }
+            }
+
+            return item;
+          });
+          resolve(updatedFeedItems);
+        }, function (error) {
+          reject(error);
+        });
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "errorCallback", function (error, code) {
       var contextInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
@@ -492,25 +575,129 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getApprover", debounce(function (searchStr) {
-      var _this$props17 = _this.props,
-          file = _this$props17.file,
-          api = _this$props17.api;
+      var _this$props18 = _this.props,
+          file = _this$props18.file,
+          api = _this$props18.api;
       api.getFileCollaboratorsAPI(false).getCollaboratorsWithQuery(file.id, _this.getApproverContactsSuccessCallback, _this.errorCallback, searchStr, {
         includeGroups: true
       });
     }, DEFAULT_COLLAB_DEBOUNCE));
 
     _defineProperty(_assertThisInitialized(_this), "getMention", debounce(function (searchStr) {
-      var _this$props18 = _this.props,
-          file = _this$props18.file,
-          api = _this$props18.api;
+      var _this$props19 = _this.props,
+          file = _this$props19.file,
+          api = _this$props19.api;
       api.getFileCollaboratorsAPI(false).getCollaboratorsWithQuery(file.id, _this.getMentionContactsSuccessCallback, _this.errorCallback, searchStr);
     }, DEFAULT_COLLAB_DEBOUNCE));
 
+    _defineProperty(_assertThisInitialized(_this), "getFocusableFeedItemById", function (feedItems, itemId) {
+      if (!itemId) {
+        return undefined;
+      }
+
+      return feedItems.find(function (_ref7) {
+        var id = _ref7.id,
+            type = _ref7.type;
+        return id === itemId && _this.isItemTypeFocusable(type);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getCommentFeedItemByReplyId", function (feedItems, replyId) {
+      if (!replyId) {
+        return undefined;
+      }
+
+      return feedItems.find(function (item) {
+        if (item.type !== FEED_ITEM_TYPE_ANNOTATION && item.type !== FEED_ITEM_TYPE_COMMENT || !item.replies) {
+          return false;
+        }
+
+        return item.replies.some(function (_ref8) {
+          var id = _ref8.id;
+          return id === replyId;
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isActiveEntryInFeed", function (feedItems, itemId) {
+      return !!(_this.getFocusableFeedItemById(feedItems, itemId) || _this.getCommentFeedItemByReplyId(feedItems, itemId));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isItemTypeFocusable", function (type) {
+      return type === FEED_ITEM_TYPE_ANNOTATION || type === FEED_ITEM_TYPE_COMMENT || type === FEED_ITEM_TYPE_TASK;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isItemTypeComment", function (type) {
+      return type === FEED_ITEM_TYPE_ANNOTATION || type === FEED_ITEM_TYPE_COMMENT;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getActiveFeedEntryData", function (feedItems) {
+      var _this$props20 = _this.props,
+          activeFeedEntryId = _this$props20.activeFeedEntryId,
+          activeFeedEntryType = _this$props20.activeFeedEntryType,
+          api = _this$props20.api,
+          file = _this$props20.file;
+      return new Promise(function (resolve, reject) {
+        if (!activeFeedEntryId || !activeFeedEntryType || !_this.isItemTypeFocusable(activeFeedEntryType)) {
+          resolve({});
+          return;
+        } // Check if the active entry is a first level Feed item
+
+
+        var firstLevelItem = _this.getFocusableFeedItemById(feedItems, activeFeedEntryId);
+
+        if (firstLevelItem) {
+          var _id = firstLevelItem.id,
+              type = firstLevelItem.type;
+          resolve({
+            id: _id,
+            type: type
+          });
+          return;
+        } // Check if the active entry is within replies of any first level Feed items
+
+
+        var firstLevelItemWithActiveReply = _this.getCommentFeedItemByReplyId(feedItems, activeFeedEntryId);
+
+        if (firstLevelItemWithActiveReply) {
+          var _id2 = firstLevelItemWithActiveReply.id,
+              _type = firstLevelItemWithActiveReply.type;
+          resolve({
+            id: _id2,
+            type: _type
+          });
+          return;
+        } // If the active entry could not be found within feed items, it's most likely a reply that
+        // is not yet visible in feed and we need to fetch its data in order to find parent
+
+
+        api.getFeedAPI(false).fetchThreadedComment(file, activeFeedEntryId, function (_ref9) {
+          var parent = _ref9.parent;
+
+          var parentItem = _this.getFocusableFeedItemById(feedItems, parent === null || parent === void 0 ? void 0 : parent.id);
+
+          var _ref10 = parentItem || {},
+              id = _ref10.id,
+              type = _ref10.type;
+
+          resolve({
+            id: id,
+            type: type
+          });
+        }, function (error) {
+          if (error.status === 404) {
+            resolve({});
+          } else {
+            reject(error);
+          }
+        });
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getReplies", function (id, type) {
-      var _this$props19 = _this.props,
-          api = _this$props19.api,
-          file = _this$props19.file;
+      var _this$props21 = _this.props,
+          api = _this$props21.api,
+          file = _this$props21.file;
       api.getFeedAPI(false).fetchReplies(file, id, type, _this.feedSuccessCallback, _this.feedErrorCallback); // need to load the pending item
 
       _this.fetchFeedItems();
@@ -519,16 +706,16 @@ function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getAvatarUrl",
     /*#__PURE__*/
     function () {
-      var _ref6 = _asyncToGenerator(
+      var _ref11 = _asyncToGenerator(
       /*#__PURE__*/
       regeneratorRuntime.mark(function _callee(userId) {
-        var _this$props20, file, api;
+        var _this$props22, file, api;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props20 = _this.props, file = _this$props20.file, api = _this$props20.api;
+                _this$props22 = _this.props, file = _this$props22.file, api = _this$props22.api;
                 return _context.abrupt("return", api.getUsersAPI(false).getAvatarUrlWithAccessToken(userId, file.id));
 
               case 2:
@@ -540,21 +727,21 @@ function (_React$PureComponent) {
       }));
 
       return function (_x) {
-        return _ref6.apply(this, arguments);
+        return _ref11.apply(this, arguments);
       };
     }());
 
     _defineProperty(_assertThisInitialized(_this), "handleAnnotationSelect", function (annotation) {
       var file_version = annotation.file_version,
           nextActiveAnnotationId = annotation.id;
-      var _this$props21 = _this.props,
-          emitActiveAnnotationChangeEvent = _this$props21.emitActiveAnnotationChangeEvent,
-          file = _this$props21.file,
-          getAnnotationsMatchPath = _this$props21.getAnnotationsMatchPath,
-          getAnnotationsPath = _this$props21.getAnnotationsPath,
-          history = _this$props21.history,
-          location = _this$props21.location,
-          onAnnotationSelect = _this$props21.onAnnotationSelect;
+      var _this$props23 = _this.props,
+          emitActiveAnnotationChangeEvent = _this$props23.emitActiveAnnotationChangeEvent,
+          file = _this$props23.file,
+          getAnnotationsMatchPath = _this$props23.getAnnotationsMatchPath,
+          getAnnotationsPath = _this$props23.getAnnotationsPath,
+          history = _this$props23.history,
+          location = _this$props23.location,
+          onAnnotationSelect = _this$props23.onAnnotationSelect;
       var annotationFileVersionId = getProp(file_version, 'id');
       var currentFileVersionId = getProp(file, 'file_version.id');
       var match = getAnnotationsMatchPath(location);
@@ -583,12 +770,16 @@ function (_React$PureComponent) {
           feedItems = _this$state.feedItems,
           feedItemsStatusFilter = _this$state.feedItemsStatusFilter;
 
-      if (!feedItems || !feedItemsStatusFilter) {
+      if (!feedItems || !feedItemsStatusFilter || feedItemsStatusFilter === ACTIVITY_FILTER_OPTION_ALL) {
         return feedItems;
-      }
+      } // Filter is completed on two properties (status and type) because filtering on comments (resolved vs. unresolved)
+      // requires looking at item status to see if it is open or resolved. To filter all tasks, we need to look at the
+      // item type. Item type is also used to keep versions in the feed. Task also has a status but it's status will be
+      // "NOT_STARTED" or "COMPLETED" so it will not conflict with comment's status.
+
 
       return feedItems.filter(function (item) {
-        return item.status === feedItemsStatusFilter || item.type === FEED_ITEM_TYPE_VERSION;
+        return item.status === feedItemsStatusFilter || item.type === FEED_ITEM_TYPE_VERSION || item.type === feedItemsStatusFilter;
       });
     });
 
@@ -599,9 +790,9 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderAddTaskButton", function () {
-      var _this$props22 = _this.props,
-          isDisabled = _this$props22.isDisabled,
-          hasTasks = _this$props22.hasTasks;
+      var _this$props24 = _this.props,
+          isDisabled = _this$props24.isDisabled,
+          hasTasks = _this$props24.hasTasks;
       var approverSelectorContacts = _this.state.approverSelectorContacts;
 
       var _assertThisInitialize = _assertThisInitialized(_this),
@@ -631,17 +822,32 @@ function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderActivitySidebarFilter", function () {
-      var features = _this.props.features;
+      var _this$props25 = _this.props,
+          features = _this$props25.features,
+          hasTasks = _this$props25.hasTasks;
       var feedItemsStatusFilter = _this.state.feedItemsStatusFilter;
       var shouldShowActivityFeedFilter = isFeatureEnabled(features, 'activityFeed.filter.enabled');
+      var shouldShowAdditionalFilterOptions = isFeatureEnabled(features, 'activityFeed.newThreadedReplies.enabled');
 
       if (!shouldShowActivityFeedFilter) {
         return null;
       }
 
+      var activityFilterOptions = [ACTIVITY_FILTER_OPTION_ALL, ACTIVITY_FILTER_OPTION_UNRESOLVED];
+
+      if (shouldShowAdditionalFilterOptions) {
+        // Determine which filter options to show based on what activity types are available in current context
+        activityFilterOptions.push(ACTIVITY_FILTER_OPTION_RESOLVED);
+
+        if (hasTasks) {
+          activityFilterOptions.push(ACTIVITY_FILTER_OPTION_TASKS);
+        }
+      }
+
       return React.createElement(ActivitySidebarFilter, {
-        feedItemStatus: feedItemsStatusFilter,
-        onFeedItemStatusClick: function onFeedItemStatusClick(selectedStatus) {
+        activityFilterOptions: activityFilterOptions,
+        feedItemType: feedItemsStatusFilter,
+        onFeedItemTypeClick: function onFeedItemTypeClick(selectedStatus) {
           _this.handleItemsFiltered(selectedStatus);
         }
       });
@@ -653,9 +859,10 @@ function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "renderTitle", function () {
       var features = _this.props.features;
+      var shouldHideTitle = isFeatureEnabled(features, 'activityFeed.filter.enabled');
 
-      if (isFeatureEnabled(features, 'activityFeed.filter.enabled')) {
-        return undefined;
+      if (shouldHideTitle) {
+        return null;
       }
 
       return React.createElement(FormattedMessage, messages.sidebarActivityTitle);
@@ -700,16 +907,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$props23 = this.props,
-          api = _this$props23.api,
-          file = _this$props23.file,
-          features = _this$props23.features,
-          shouldShowReplies = _this$props23.hasReplies,
-          shouldShowTasks = _this$props23.hasTasks,
-          shouldShowVersions = _this$props23.hasVersions;
+      var _this$props26 = this.props,
+          activeFeedEntryId = _this$props26.activeFeedEntryId,
+          activeFeedEntryType = _this$props26.activeFeedEntryType,
+          api = _this$props26.api,
+          file = _this$props26.file,
+          features = _this$props26.features,
+          shouldShowReplies = _this$props26.hasReplies,
+          shouldShowTasks = _this$props26.hasTasks,
+          shouldShowVersions = _this$props26.hasVersions;
+      var shouldFetchReplies = shouldRefreshCache && shouldShowReplies && activeFeedEntryId && activeFeedEntryType === FEED_ITEM_TYPE_COMMENT;
       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, {
+      api.getFeedAPI(shouldDestroy).feedItems(file, shouldRefreshCache, shouldFetchReplies ? this.fetchRepliesForFeedItems : this.fetchFeedItemsSuccessCallback, this.fetchFeedItemsErrorCallback, this.errorCallback, {
         shouldShowAnnotations: shouldShowAnnotations,
         shouldShowAppActivity: shouldShowAppActivity,
         shouldShowReplies: shouldShowReplies,
@@ -717,11 +927,23 @@ function (_React$PureComponent) {
         shouldShowVersions: shouldShowVersions
       });
     }
+  }, {
+    key: "getActiveCommentPath",
+    value: function getActiveCommentPath(commentId) {
+      if (!commentId) {
+        return '/activity';
+      }
+
+      return generatePath('/:sidebar/comments/:commentId?', {
+        sidebar: 'activity',
+        commentId: commentId
+      });
+    }
     /**
-     * Handles a successful feed API fetch
+     * Fetches replies (comments) of a comment or annotation
      *
-     * @private
-     * @param {Array} feedItems - the feed items
+     * @param {string} id - id of the feed item
+     * @param {CommentFeedItemType} type - type of the feed item
      * @return {void}
      */
 
@@ -734,27 +956,32 @@ function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props24 = this.props,
-          currentUser = _this$props24.currentUser,
-          currentUserError = _this$props24.currentUserError,
-          elementId = _this$props24.elementId,
-          file = _this$props24.file,
-          hasReplies = _this$props24.hasReplies,
-          _this$props24$isDisab = _this$props24.isDisabled,
-          isDisabled = _this$props24$isDisab === void 0 ? false : _this$props24$isDisab,
-          onVersionHistoryClick = _this$props24.onVersionHistoryClick,
-          getUserProfileUrl = _this$props24.getUserProfileUrl,
-          activeFeedEntryId = _this$props24.activeFeedEntryId,
-          activeFeedEntryType = _this$props24.activeFeedEntryType,
-          onTaskView = _this$props24.onTaskView;
+      var _this$props27 = this.props,
+          activeFeedEntryId = _this$props27.activeFeedEntryId,
+          activeFeedEntryType = _this$props27.activeFeedEntryType,
+          currentUser = _this$props27.currentUser,
+          currentUserError = _this$props27.currentUserError,
+          elementId = _this$props27.elementId,
+          features = _this$props27.features,
+          file = _this$props27.file,
+          hasReplies = _this$props27.hasReplies,
+          hasVersions = _this$props27.hasVersions,
+          _this$props27$isDisab = _this$props27.isDisabled,
+          isDisabled = _this$props27$isDisab === void 0 ? false : _this$props27$isDisab,
+          onVersionHistoryClick = _this$props27.onVersionHistoryClick,
+          getUserProfileUrl = _this$props27.getUserProfileUrl,
+          onTaskView = _this$props27.onTaskView;
       var _this$state2 = this.state,
           activityFeedError = _this$state2.activityFeedError,
           approverSelectorContacts = _this$state2.approverSelectorContacts,
           contactsLoaded = _this$state2.contactsLoaded,
           mentionSelectorContacts = _this$state2.mentionSelectorContacts;
+      var isNewThreadedRepliesEnabled = isFeatureEnabled(features, 'activityFeed.newThreadedReplies.enabled');
       return React.createElement(SidebarContent, {
         actions: this.renderActions(),
-        className: "bcs-activity",
+        className: classNames('bcs-activity', {
+          'bcs-activity--full': hasReplies
+        }),
         elementId: elementId,
         sidebarView: SIDEBAR_VIEW_ACTIVITY,
         title: this.renderTitle()
@@ -771,7 +998,9 @@ function (_React$PureComponent) {
         getAvatarUrl: this.getAvatarUrl,
         getMentionWithQuery: this.getMention,
         getUserProfileUrl: getUserProfileUrl,
+        hasNewThreadedReplies: isNewThreadedRepliesEnabled,
         hasReplies: hasReplies,
+        hasVersions: hasVersions,
         isDisabled: isDisabled,
         mentionSelectorContacts: mentionSelectorContacts,
         contactsLoaded: contactsLoaded,