feat(activity-sidebar): Initial idea for activity indicator

src/elements/content-sidebar/ActivityIndicator.scss

@@ -0,0 +1,12 @@
+.bcs-activity-indicator {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    width: 15px;
+    height: 15px;
+    color: white;
+    font-size: 10px;
+    line-height: 15px;
+    background-color: black;
+    border-radius: 50%;
+}

src/elements/content-sidebar/ActivityIndicator.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import flow from 'lodash/flow';
+// import noop from 'lodash/noop';
+
+import { withAPIContext } from '../common/api-context';
+
+import './ActivityIndicator.scss';
+
+export function ActivityIndicator({ api, features, file }) {
+    const [count, setCount] = useState(0);
+    const [shouldShowIndicator, setShouldShowIndicator] = useState(false);
+    const [canLoadActivities, setCanLoadActivities] = useState(true);
+
+    useEffect(() => {
+        // early return to not refetch on every re-render
+        if (!canLoadActivities) {
+            return;
+        }
+        setCanLoadActivities(false);
+        // api.getFeedAPI().feedItems(
+        //     file,
+        //     false,
+        //     (data: Array<unknown>) => {
+        //         console.log('data', data);
+        //         if (data.length > 0) {
+        //             // has comments, replies, annotations or tasks
+        //             setCount(data.length);
+        //             setShouldShowIndicator(true);
+        //         }
+        //     },
+        //     noop,
+        //     noop,
+        //     {
+        //         shouldShowAnnotations: false,
+        //         shouldShowAppActivity: false,
+        //         shouldShowReplies: false,
+        //         shouldShowTasks: false,
+        //         shouldShowVersions: false, // do we need to inform about versions?
+        //         shouldUseUAA: true, // don't know what this is
+        //     },
+        // );
+
+        const activityTypes = ['annotation', 'app_activity', 'comment', 'task'];
+        const { permissions = {} } = file;
+        const feedAPI = api.getFeedAPI();
+
+        feedAPI.file = file;
+        feedAPI.fetchFileActivities(permissions, activityTypes, true).then(data => {
+            if (data.entries.length > 0) {
+                // has comments, replies, annotations or tasks
+                setCount(data.entries.length);
+                setShouldShowIndicator(true);
+            }
+        });
+    }, [api, features, file, canLoadActivities]);
+
+    return shouldShowIndicator ? <div className="bcs-activity-indicator">{count}</div> : null;
+}
+
+export default flow([withAPIContext])(ActivityIndicator);

src/elements/content-sidebar/Sidebar.js

@@ -331,6 +331,7 @@ class Sidebar extends React.Component<Props, State> {
                             <SidebarNav
                                 additionalTabs={additionalTabs}
                                 elementId={this.id}
+                                file={file}
                                 fileId={fileId}
                                 hasActivity={hasActivity}
                                 hasAdditionalTabs={hasAdditionalTabs}

src/elements/content-sidebar/SidebarNav.js

@@ -10,6 +10,7 @@ import type { IntlShape } from 'react-intl';
 import noop from 'lodash/noop';
 import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
 import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import ActivityIndicator from './ActivityIndicator';
 import AdditionalTabs from './additional-tabs';
 import DocGenIcon from '../../icon/fill/DocGenIcon';
 import IconChatRound from '../../icons/general/IconChatRound';
@@ -37,6 +38,7 @@ import './SidebarNav.scss';
 type Props = {
     additionalTabs?: Array<AdditionalSidebarTab>,
     elementId: string,
+    file: BoxItem,
     fileId: string,
     hasActivity: boolean,
     hasAdditionalTabs: boolean,
@@ -54,6 +56,7 @@ type Props = {
 const SidebarNav = ({
     additionalTabs,
     elementId,
+    file,
     fileId,
     hasActivity,
     hasAdditionalTabs,
@@ -106,6 +109,7 @@ const SidebarNav = ({
                             tooltip={intl.formatMessage(messages.sidebarActivityTitle)}
                         >
                             <IconChatRound />
+                            <ActivityIndicator file={file} />
                         </SidebarNavButton>
                     )}
                     {hasDetails && (