feat(threaded-replies): Update activity filter to support more options (#3280)

* feat(threaded-replies): Update activity filter to support more options

* feat(threaded-replies): Fix test

* feat(threaded-replies): Arrange props alphabetically

* feat(threaded-replies): Update to differentiate status and options

* feat(threaded-replies): Add unit tests for feature

* feat(threaded-replies): More clearly name filter options

* feat(threaded-replies): Update message descriptions

* feat(threaded-replies): Update similar tests to use each operator

* feat(threaded-replies): Remove passing non-existant prop

* feat(threaded-replies): Context based filter options

Updated activity sidebar to use the context of what types of comments and tasks it has to determine what filter options to allow

* feat(threaded-replies): Updates to sidebar filter logic

* feat(threaded-replies): Address naming and filtering

* feat(threaded-replies): Extract only comments into function

* feat(threaded-replies): Move array to variable

Author: patlm

i18n/en-US.properties

@@ -20,10 +20,16 @@ be.activitySidebar.activityFeed.replyInThread = Reply in thread
 be.activitySidebar.activityFeed.showReplies = See {repliesToLoadCount, plural, one {# reply} other {# replies}}
 # Text to show when a task no longer exists
 be.activitySidebar.activityFeed.taskMissingError = This task no longer exists
-# One of the dropdown options to select in order to filter comments
-be.activitySidebarFilter.status.all = All Comments
-# One of the dropdown options to select in order to filter comments
+# Dropdown option for filtering all activity from activity list
+be.activitySidebarFilter.status.allActivity = All Activity
+# Dropdown option for filtering all comments from comments list
+be.activitySidebarFilter.status.allComments = All Comments
+# Dropdown option for filtering unresolved comments from activity or comments list
 be.activitySidebarFilter.status.open = Unresolved Comments
+# Dropdown option for filtering resolved comments from activity or comments list
+be.activitySidebarFilter.status.resolved = Resolved Comments
+# Dropdown option for filtering tasks from activity list
+be.activitySidebarFilter.status.tasks = Tasks
 # Label for add action
 be.add = Add
 # Text to display when app is disabled by applied access policy

src/common/types/feed.js

@@ -1,6 +1,10 @@
 // @flow strict
 import type { MessageDescriptor } from 'react-intl';
 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_ANNOTATION,
@@ -150,8 +154,22 @@ type ActionItemError = {
     title: MessageDescriptor,
 };
 
+type ActivityFilterOption =
+    | typeof ACTIVITY_FILTER_OPTION_ALL
+    | typeof ACTIVITY_FILTER_OPTION_UNRESOLVED
+    | typeof ACTIVITY_FILTER_OPTION_RESOLVED
+    | typeof ACTIVITY_FILTER_OPTION_TASKS;
+
+type ActivityFilterItemType =
+    | typeof ACTIVITY_FILTER_OPTION_ALL
+    | typeof COMMENT_STATUS_OPEN
+    | typeof COMMENT_STATUS_RESOLVED
+    | typeof FEED_ITEM_TYPE_TASK;
+
 export type {
     ActionItemError,
+    ActivityFilterItemType,
+    ActivityFilterOption,
     ActivityTemplateItem,
     Annotation,
     AnnotationPermission,

src/constants.js

@@ -463,6 +463,12 @@ export const TASK_MAX_GROUP_ASSIGNEES: 250 = 250;
 export const COMMENT_STATUS_OPEN: 'open' = 'open';
 export const COMMENT_STATUS_RESOLVED: 'resolved' = 'resolved';
 
+/* ------------------ Activity Filter Options ------------------ */
+export const ACTIVITY_FILTER_OPTION_ALL: 'all' = 'all';
+export const ACTIVITY_FILTER_OPTION_RESOLVED: 'resolved' = 'resolved';
+export const ACTIVITY_FILTER_OPTION_TASKS: 'tasks' = 'tasks';
+export const ACTIVITY_FILTER_OPTION_UNRESOLVED: 'open' = 'open';
+
 /* ----------------- Theme ---------------------------*/
 export const THEME_VERY_DARK = 'vDark';
 export const THEME_DARK = 'dark';

src/elements/content-sidebar/ActivitySidebar.js

@@ -29,6 +29,10 @@ 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,
@@ -49,6 +53,8 @@ import type {
 import type {
     Annotation,
     AnnotationPermission,
+    ActivityFilterItemType,
+    ActivityFilterOption,
     BoxCommentPermission,
     Comment,
     CommentFeedItemType,
@@ -93,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,
@@ -111,7 +117,7 @@ type State = {
     approverSelectorContacts: SelectorItems<UserMini | GroupMini>,
     contactsLoaded?: boolean,
     feedItems?: FeedItems,
-    feedItemsStatusFilter?: FeedItemStatus,
+    feedItemsStatusFilter?: ActivityFilterItemType,
     mentionSelectorContacts?: SelectorItems<UserMini>,
 };
 
@@ -1090,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 });
@@ -1099,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
+            );
         });
     };
 
@@ -1145,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);
                 }}
             />
@@ -1171,8 +1200,10 @@ 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} />;
     };

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>