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

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

@@ -5,13 +5,14 @@
  */
 
 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 { type ContextRouter } from 'react-router-dom';
+import { generatePath, type ContextRouter } from 'react-router-dom';
 import ActivityFeed from './activity-feed';
 import AddTaskButton from './AddTaskButton';
 import API from '../../api';
@@ -28,8 +29,15 @@ import { withLogger } from '../common/logger';
 import { withRouterAndRef } from '../common/routing';
 import ActivitySidebarFilter from './ActivitySidebarFilter';
 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,
@@ -45,12 +53,17 @@ import type {
 import type {
     Annotation,
     AnnotationPermission,
+    ActivityFilterItemType,
+    ActivityFilterOption,
     BoxCommentPermission,
     Comment,
     CommentFeedItemType,
+    FocusableFeedItem,
     FocusableFeedItemType,
+    FeedItem,
     FeedItems,
     FeedItemStatus,
+    FeedItemType,
 } from '../../common/types/feed';
 import type { ErrorContextProps, ElementsXhrError } from '../../common/types/api';
 import type { WithLoggerProps } from '../../common/types/logging';
@@ -86,7 +99,7 @@ type PropsWithoutContext = {
     hasSidebarInitialized?: boolean,
     isDisabled: boolean,
     onAnnotationSelect: Function,
-    onFilterChange: (status?: FeedItemStatus) => void,
+    onFilterChange: (status?: ActivityFilterItemType) => void,
     onVersionChange: Function,
     onVersionHistoryClick?: Function,
     translations?: Translations,
@@ -104,7 +117,7 @@ type State = {
     approverSelectorContacts: SelectorItems<UserMini | GroupMini>,
     contactsLoaded?: boolean,
     feedItems?: FeedItems,
-    feedItemsStatusFilter?: FeedItemStatus,
+    feedItemsStatusFilter?: ActivityFilterItemType,
     mentionSelectorContacts?: SelectorItems<UserMini>,
 };
 
@@ -530,11 +543,29 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
      * @return {void}
      */
     updateReplies = (id: string, replies: Array<Comment>) => {
-        const { api, file } = this.props;
+        const { activeFeedEntryId, api, file, history } = this.props;
+        const { feedItems } = this.state;
 
-        const feedAPI = api.getFeedAPI(false);
+        if (!feedItems) {
+            return;
+        }
 
+        const feedAPI = api.getFeedAPI(false);
         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(
+                (item: FeedItem) =>
+                    item.id === id && item === this.getCommentFeedItemByReplyId(feedItems, activeFeedEntryId),
+            )
+        ) {
+            history.replace(this.getActiveCommentPath());
+        }
+
         feedAPI.updateFeedItem({ replies }, id);
 
         this.fetchFeedItems();
@@ -671,6 +702,8 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
      */
     fetchFeedItems(shouldRefreshCache: boolean = false, shouldDestroy: boolean = false) {
         const {
+            activeFeedEntryId,
+            activeFeedEntryType,
             api,
             file,
             features,
@@ -678,19 +711,51 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
             hasTasks: shouldShowTasks,
             hasVersions: shouldShowVersions,
         } = this.props;
+        const shouldFetchReplies =
+            shouldRefreshCache &&
+            shouldShowReplies &&
+            activeFeedEntryId &&
+            activeFeedEntryType === FEED_ITEM_TYPE_COMMENT;
         const shouldShowAppActivity = isFeatureEnabled(features, 'activityFeed.appActivity.enabled');
         const shouldShowAnnotations = isFeatureEnabled(features, 'activityFeed.annotations.enabled');
 
         api.getFeedAPI(shouldDestroy).feedItems(
             file,
             shouldRefreshCache,
-            this.fetchFeedItemsSuccessCallback,
+            shouldFetchReplies ? this.fetchRepliesForFeedItems : this.fetchFeedItemsSuccessCallback,
             this.fetchFeedItemsErrorCallback,
             this.errorCallback,
             { shouldShowAnnotations, shouldShowAppActivity, shouldShowReplies, shouldShowTasks, shouldShowVersions },
         );
     }
 
+    fetchRepliesForFeedItems = (feedItems: FeedItems) => {
+        const { activeFeedEntryId } = this.props;
+
+        if (!activeFeedEntryId) {
+            return;
+        }
+
+        this.getActiveFeedEntryData(feedItems)
+            .then(({ id, type }) => {
+                if (
+                    !id ||
+                    !type ||
+                    this.isActiveEntryInFeed(feedItems, activeFeedEntryId) ||
+                    !this.isItemTypeComment(type)
+                ) {
+                    return Promise.resolve(feedItems);
+                }
+
+                const parentType: CommentFeedItemType =
+                    type === FEED_ITEM_TYPE_COMMENT ? FEED_ITEM_TYPE_COMMENT : FEED_ITEM_TYPE_ANNOTATION;
+
+                return this.getFeedItemsWithReplies(feedItems, id, parentType);
+            })
+            .then(updatedItems => this.fetchFeedItemsSuccessCallback(updatedItems))
+            .catch(error => this.fetchFeedItemsErrorCallback(feedItems, [error]));
+    };
+
     /**
      * Handles a successful feed API fetch
      *
@@ -743,6 +808,44 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         }
     };
 
+    getCommentFeedItemWithReplies = <T: { replies?: Array<Comment> }>(feedItem: T, replies: Array<Comment>): T => ({
+        ...feedItem,
+        replies,
+    });
+
+    getFeedItemsWithReplies = (feedItems: FeedItems, id?: string, type?: CommentFeedItemType): Promise<FeedItems> => {
+        const { api, file } = this.props;
+
+        return new Promise((resolve, reject) => {
+            if (!id || !type) {
+                resolve(feedItems);
+                return;
+            }
+            api.getFeedAPI(false).fetchReplies(
+                file,
+                id,
+                type,
+                replies => {
+                    const updatedFeedItems = feedItems.map(item => {
+                        if (item.id === id && this.isItemTypeComment(item.type)) {
+                            if (item.type === FEED_ITEM_TYPE_ANNOTATION) {
+                                return this.getCommentFeedItemWithReplies<Annotation>(item, replies);
+                            }
+                            if (item.type === FEED_ITEM_TYPE_COMMENT) {
+                                return this.getCommentFeedItemWithReplies<Comment>(item, replies);
+                            }
+                        }
+                        return item;
+                    });
+                    resolve(updatedFeedItems);
+                },
+                error => {
+                    reject(error);
+                },
+            );
+        });
+    };
+
     /**
      * Network error callback
      *
@@ -827,6 +930,118 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         );
     }, DEFAULT_COLLAB_DEBOUNCE);
 
+    /**
+     * Returns feed item based on the item id
+     *
+     * @param {FeedItems} feedItems - the feed items
+     * @param {string} itemId - feed item id
+     * @return {FeedItem | undefined}
+     */
+    getFocusableFeedItemById = (feedItems: FeedItems, itemId?: string): FeedItem | typeof undefined => {
+        if (!itemId) {
+            return undefined;
+        }
+        return feedItems.find(({ id, type }) => id === itemId && this.isItemTypeFocusable(type));
+    };
+
+    /**
+     * Returns parent feed item based on the reply id
+     *
+     * @param {FeedItems} feedItems - the feed items
+     * @param {string} replyId - feed item's reply id
+     * @return {FeedItem | undefined}
+     */
+    getCommentFeedItemByReplyId = (feedItems: FeedItems, replyId?: string): FeedItem | typeof undefined => {
+        if (!replyId) {
+            return undefined;
+        }
+        return feedItems.find(item => {
+            if ((item.type !== FEED_ITEM_TYPE_ANNOTATION && item.type !== FEED_ITEM_TYPE_COMMENT) || !item.replies) {
+                return false;
+            }
+            return item.replies.some(({ id }) => id === replyId);
+        });
+    };
+
+    /**
+     * Returns true if item (based on given item id) is found within feed items or its replies and it, or its parent, can be active (focusable)
+     *
+     * @param {FeedItems} feedItems - the feed items
+     * @param {string} itemId - feed item id
+     * @return {boolean}
+     */
+    isActiveEntryInFeed = (feedItems: FeedItems, itemId: string): boolean =>
+        !!(this.getFocusableFeedItemById(feedItems, itemId) || this.getCommentFeedItemByReplyId(feedItems, itemId));
+
+    isItemTypeFocusable = (type?: FeedItemType | FocusableFeedItem | CommentFeedItemType): boolean =>
+        type === FEED_ITEM_TYPE_ANNOTATION || type === FEED_ITEM_TYPE_COMMENT || type === FEED_ITEM_TYPE_TASK;
+
+    isItemTypeComment = (type?: FeedItemType | FocusableFeedItem | CommentFeedItemType): boolean =>
+        type === FEED_ITEM_TYPE_ANNOTATION || type === FEED_ITEM_TYPE_COMMENT;
+
+    /**
+     * Returns active entry data (id, type) based on the activeFeedEntryId and activeFeedEntryType values
+     * (it can be existing item or parent if the active entry id belongs to a reply)
+     *
+     * @param {FeedItems} feedItems - the feed items
+     * @return {Promise<{ id: string, type?: FocusableFeedItemType }>}
+     */
+    getActiveFeedEntryData = (feedItems: FeedItems): Promise<{ id?: string, type?: FeedItemType }> => {
+        const { activeFeedEntryId, activeFeedEntryType, api, file } = this.props;
+        return new Promise((resolve, reject) => {
+            if (!activeFeedEntryId || !activeFeedEntryType || !this.isItemTypeFocusable(activeFeedEntryType)) {
+                resolve({});
+                return;
+            }
+
+            // Check if the active entry is a first level Feed item
+            const firstLevelItem = this.getFocusableFeedItemById(feedItems, activeFeedEntryId);
+            if (firstLevelItem) {
+                const { id, type } = firstLevelItem;
+                resolve({ id, type });
+                return;
+            }
+
+            // Check if the active entry is within replies of any first level Feed items
+            const firstLevelItemWithActiveReply = this.getCommentFeedItemByReplyId(feedItems, activeFeedEntryId);
+            if (firstLevelItemWithActiveReply) {
+                const { id, type } = firstLevelItemWithActiveReply;
+                resolve({ id, 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,
+                ({ parent }) => {
+                    const parentItem = this.getFocusableFeedItemById(feedItems, parent?.id);
+                    const { id, type } = parentItem || {};
+                    resolve({ id, type });
+                },
+                (error: ElementsXhrError) => {
+                    if (error.status === 404) {
+                        resolve({});
+                    } else {
+                        reject(error);
+                    }
+                },
+            );
+        });
+    };
+
+    getActiveCommentPath(commentId?: string): string {
+        if (!commentId) {
+            return '/activity';
+        }
+
+        return generatePath('/:sidebar/comments/:commentId?', {
+            sidebar: 'activity',
+            commentId,
+        });
+    }
+
     /**
      * Fetches replies (comments) of a comment or annotation
      *
@@ -881,7 +1096,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         onAnnotationSelect(annotation);
     };
 
-    handleItemsFiltered = (status?: FeedItemStatus) => {
+    handleItemsFiltered = (status?: ActivityFilterItemType) => {
         const { onFilterChange } = this.props;
 
         this.setState({ feedItemsStatusFilter: status });
@@ -890,11 +1105,19 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
 
     getFilteredFeedItems = (): FeedItems | typeof undefined => {
         const { feedItems, feedItemsStatusFilter } = this.state;
-        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(item => {
-            return item.status === feedItemsStatusFilter || item.type === FEED_ITEM_TYPE_VERSION;
+            return (
+                item.status === feedItemsStatusFilter ||
+                item.type === FEED_ITEM_TYPE_VERSION ||
+                item.type === feedItemsStatusFilter
+            );
         });
     };
 
@@ -936,17 +1159,32 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
     };
 
     renderActivitySidebarFilter = () => {
-        const { features } = this.props;
+        const { features, hasTasks } = this.props;
         const { feedItemsStatusFilter } = this.state;
         const shouldShowActivityFeedFilter = isFeatureEnabled(features, 'activityFeed.filter.enabled');
+        const shouldShowAdditionalFilterOptions = isFeatureEnabled(features, 'activityFeed.newThreadedReplies.enabled');
 
         if (!shouldShowActivityFeedFilter) {
             return null;
         }
+
+        const activityFilterOptions: ActivityFilterOption[] = [
+            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 (
             <ActivitySidebarFilter
-                feedItemStatus={feedItemsStatusFilter}
-                onFeedItemStatusClick={selectedStatus => {
+                activityFilterOptions={activityFilterOptions}
+                feedItemType={feedItemsStatusFilter}
+                onFeedItemTypeClick={selectedStatus => {
                     this.handleItemsFiltered(selectedStatus);
                 }}
             />
@@ -962,32 +1200,37 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
 
     renderTitle = () => {
         const { features } = this.props;
-        if (isFeatureEnabled(features, 'activityFeed.filter.enabled')) {
-            return undefined;
+        const shouldHideTitle = isFeatureEnabled(features, 'activityFeed.filter.enabled');
+
+        if (shouldHideTitle) {
+            return null;
         }
         return <FormattedMessage {...messages.sidebarActivityTitle} />;
     };
 
     render() {
         const {
+            activeFeedEntryId,
+            activeFeedEntryType,
             currentUser,
             currentUserError,
             elementId,
+            features,
             file,
             hasReplies,
+            hasVersions,
             isDisabled = false,
             onVersionHistoryClick,
             getUserProfileUrl,
-            activeFeedEntryId,
-            activeFeedEntryType,
             onTaskView,
         } = this.props;
         const { activityFeedError, approverSelectorContacts, contactsLoaded, mentionSelectorContacts } = this.state;
+        const isNewThreadedRepliesEnabled = isFeatureEnabled(features, 'activityFeed.newThreadedReplies.enabled');
 
         return (
             <SidebarContent
                 actions={this.renderActions()}
-                className="bcs-activity"
+                className={classNames('bcs-activity', { 'bcs-activity--full': hasReplies })}
                 elementId={elementId}
                 sidebarView={SIDEBAR_VIEW_ACTIVITY}
                 title={this.renderTitle()}
@@ -1005,7 +1248,9 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
                     getAvatarUrl={this.getAvatarUrl}
                     getMentionWithQuery={this.getMention}
                     getUserProfileUrl={getUserProfileUrl}
+                    hasNewThreadedReplies={isNewThreadedRepliesEnabled}
                     hasReplies={hasReplies}
+                    hasVersions={hasVersions}
                     isDisabled={isDisabled}
                     mentionSelectorContacts={mentionSelectorContacts}
                     contactsLoaded={contactsLoaded}

package/src/elements/content-sidebar/ActivitySidebar.scss

@@ -6,3 +6,10 @@
         height: 100%;
     }
 }
+
+.bcs-activity--full {
+    .bcs-content-header {
+        margin: 0;
+        padding: 0 $sidebarActivityFeedSpacingHorizontal;
+    }
+}

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

@@ -9,47 +9,88 @@ import { FormattedMessage } from 'react-intl';
 import DropdownMenu, { MenuToggle } from '../../components/dropdown-menu';
 import PlainButton from '../../components/plain-button';
 import messages from './messages';
-import { COMMENT_STATUS_OPEN } from '../../constants';
+import {
+    ACTIVITY_FILTER_OPTION_ALL,
+    ACTIVITY_FILTER_OPTION_RESOLVED,
+    ACTIVITY_FILTER_OPTION_TASKS,
+    ACTIVITY_FILTER_OPTION_UNRESOLVED,
+    COMMENT_STATUS_OPEN,
+    COMMENT_STATUS_RESOLVED,
+    FEED_ITEM_TYPE_TASK,
+} from '../../constants';
 import { Menu, SelectMenuItem } from '../../components/menu';
-import type { FeedItemStatus } from '../../common/types/feed';
+import type { ActivityFilterItemType, ActivityFilterOption } from '../../common/types/feed';
 import './ActivitySidebarFilter.scss';
 
 type ActivitySidebarFilterProps = {
-    feedItemStatus?: FeedItemStatus,
-    onFeedItemStatusClick: (status?: FeedItemStatus) => void,
+    activityFilterOptions: ActivityFilterOption[],
+    feedItemType?: ActivityFilterItemType,
+    onFeedItemTypeClick: (status?: ActivityFilterItemType) => void,
 };
 
-const ACTIVITY_FEED_ITEM_ALL = 'all';
-const ACTIVITY_FEED_ITEM_OPEN = COMMENT_STATUS_OPEN;
-
-const statuses = [ACTIVITY_FEED_ITEM_ALL, ACTIVITY_FEED_ITEM_OPEN];
-const statusMap = {
-    [ACTIVITY_FEED_ITEM_ALL]: { msg: messages.activitySidebarFilterOptionAll, val: undefined },
-    [ACTIVITY_FEED_ITEM_OPEN]: { msg: messages.activitySidebarFilterOptionOpen, val: COMMENT_STATUS_OPEN },
+const filterOptionToStatus = {
+    [ACTIVITY_FILTER_OPTION_ALL]: ACTIVITY_FILTER_OPTION_ALL,
+    [ACTIVITY_FILTER_OPTION_UNRESOLVED]: COMMENT_STATUS_OPEN,
+    [ACTIVITY_FILTER_OPTION_RESOLVED]: COMMENT_STATUS_RESOLVED,
+    [ACTIVITY_FILTER_OPTION_TASKS]: FEED_ITEM_TYPE_TASK,
 };
 
 function ActivitySidebarFilter({
-    feedItemStatus = ACTIVITY_FEED_ITEM_ALL,
-    onFeedItemStatusClick,
+    activityFilterOptions,
+    feedItemType = ACTIVITY_FILTER_OPTION_ALL,
+    onFeedItemTypeClick,
 }: ActivitySidebarFilterProps) {
+    const hasOnlyCommentActivity = (options: ActivityFilterOption[]): boolean => {
+        const commentActivityFilterOptions = [
+            ACTIVITY_FILTER_OPTION_ALL,
+            ACTIVITY_FILTER_OPTION_RESOLVED,
+            ACTIVITY_FILTER_OPTION_UNRESOLVED,
+        ];
+        return options.every(option => commentActivityFilterOptions.includes(option));
+    };
+
+    // The message for all activty is based on whether only comments are in the activityFilterOptions prop
+    const allFilterMessage = hasOnlyCommentActivity(activityFilterOptions)
+        ? messages.activitySidebarFilterOptionAllComments
+        : messages.activitySidebarFilterOptionAllActivity;
+
+    const statusMap = {
+        [ACTIVITY_FILTER_OPTION_ALL]: {
+            msg: allFilterMessage,
+            val: ACTIVITY_FILTER_OPTION_ALL,
+        },
+        [COMMENT_STATUS_OPEN]: { msg: messages.activitySidebarFilterOptionOpen, val: COMMENT_STATUS_OPEN },
+        [COMMENT_STATUS_RESOLVED]: {
+            msg: messages.activitySidebarFilterOptionResolved,
+            val: COMMENT_STATUS_RESOLVED,
+        },
+        [FEED_ITEM_TYPE_TASK]: {
+            msg: messages.activitySidebarFilterOptionTasks,
+            val: FEED_ITEM_TYPE_TASK,
+        },
+    };
+
     return (
         <div className="bcs-ActivitySidebarFilter">
             <DropdownMenu className="bcs-ActivitySidebarFilter-dropdownMenu" constrainToWindow>
                 <PlainButton type="button">
                     <MenuToggle>
-                        <FormattedMessage {...statusMap[feedItemStatus].msg} />
+                        <FormattedMessage {...statusMap[feedItemType].msg} />
                     </MenuToggle>
                 </PlainButton>
                 <Menu>
-                    {statuses.map(status => (
-                        <SelectMenuItem
-                            key={status}
-                            isSelected={status === feedItemStatus}
-                            onClick={() => onFeedItemStatusClick(statusMap[status].val)}
-                        >
-                            <FormattedMessage {...statusMap[status].msg} />
-                        </SelectMenuItem>
-                    ))}
+                    {activityFilterOptions.map(filterOption => {
+                        const status = filterOptionToStatus[filterOption];
+                        return (
+                            <SelectMenuItem
+                                key={status}
+                                isSelected={status === feedItemType}
+                                onClick={() => onFeedItemTypeClick(statusMap[status].val)}
+                            >
+                                <FormattedMessage {...statusMap[status].msg} />
+                            </SelectMenuItem>
+                        );
+                    })}
                 </Menu>
             </DropdownMenu>
         </div>

package/src/elements/content-sidebar/AddTaskMenu.scss

@@ -25,7 +25,7 @@ $bcs-AddTaskMenu-width: 256px;
 }
 
 .bcs-AddTaskMenu-description {
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     font-size: 11px;
     line-height: 14px;
 }

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

@@ -16,7 +16,7 @@ type Props = {
     sidebarView: string,
     title?: React.Node,
 };
-const SidebarContent = ({ actions, children, className, title, elementId, sidebarView, ...rest }: Props) => {
+const SidebarContent = ({ actions, children, className, elementId, sidebarView, title, ...rest }: Props) => {
     const label = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
     const id = `${label}-content`;
 

package/src/elements/content-sidebar/SidebarContent.scss

@@ -10,8 +10,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 60px;
-        margin: 0 25px;
+        height: $sidebarHeaderHeight;
+        margin: 0 $sidebarActivityFeedSpacingHorizontal;
         padding: 0;
         border-bottom: 1px solid $bdl-gray-10;
 
@@ -26,7 +26,7 @@
 
     .bcs-scroll-content-wrapper {
         position: absolute; // Prevents non-sidebar parts from re-painting
-        top: 60px; // Same as title above
+        top: $sidebarHeaderHeight; // Same as title above
         right: 0;
         bottom: 0;
         left: 0;

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

@@ -54,13 +54,7 @@ const SidebarNav = ({
     isOpen,
     onNavigate,
 }: Props) => {
-    const {
-        blockedReason: boxSignBlockedReason,
-        enabled: hasBoxSign,
-        onClick: onBoxSignClick,
-        status: boxSignStatus,
-        targetingApi: boxSignTargetingApi,
-    } = useFeatureConfig('boxSign');
+    const { enabled: hasBoxSign } = useFeatureConfig('boxSign');
 
     return (
         <div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>
@@ -108,15 +102,9 @@ const SidebarNav = ({
                     )}
                 </SidebarNavTablist>
 
-                {hasBoxSign && onBoxSignClick && (
+                {hasBoxSign && (
                     <div className="bcs-SidebarNav-secondary">
-                        <SidebarNavSign
-                            blockedReason={boxSignBlockedReason}
-                            data-resin-target={SIDEBAR_NAV_TARGETS.SIGN}
-                            onClick={() => onBoxSignClick({ fileId })}
-                            status={boxSignStatus}
-                            targetingApi={boxSignTargetingApi}
-                        />
+                        <SidebarNavSign />
                     </div>
                 )}
 

package/src/elements/content-sidebar/SidebarNavSign.scss

@@ -1,27 +1,5 @@
-@import './mixins';
-@import '../common/variables';
+@import '../../styles/variables';
 
-.bcs-SidebarNavSign {
-    @include bdl-SidebarNavButton;
-}
-
-.bcs-SidebarNavSign-icon {
-    @include bdl-SidebarNavIcon;
-}
-
-.bcs-SidebarNavSign-icon--grayscale {
-    display: none;
-    margin-top: 2px; //for visual alignment
-}
-
-.is-responsive-web {
-    @include breakpoint($medium-screen) {
-        .bcs-SidebarNavSign-icon {
-            display: none;
-        }
-
-        .bcs-SidebarNavSign-icon--grayscale {
-            display: inline;
-        }
-    }
+.bcs-SidebarNavSign-icon path {
+    fill: $bdl-gray;
 }