feat(annotations): Integrate annotation api with Feed (#2104)

Author: Conrad Chan

src/__mocks__/annotations.ts

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/camelcase */
+export const annotations = [
+    { id: 'anno_1', target: { shape: { height: 10, width: 10, x: 10, y: 10, type: 'rect' }, type: 'region' } },
+    { id: 'anno_2', target: { shape: { height: 20, width: 20, x: 20, y: 20, type: 'rect' }, type: 'region' } },
+    { id: 'anno_3', target: { shape: { height: 30, width: 30, x: 30, y: 30, type: 'rect' }, type: 'region' } },
+];
+
+export const scale = 1;
+
+export const rect = {
+    type: 'rect' as const,
+    height: 10,
+    width: 10,
+    x: 10,
+    y: 10,
+};
+
+export const target = {
+    id: 'target_1',
+    location: {
+        type: 'page' as const,
+        value: 1,
+    },
+    shape: rect,
+    type: 'region' as const,
+};
+
+export const user = {
+    id: '1',
+    login: 'johndoe',
+    name: 'John Doe',
+    type: 'user' as const,
+};
+
+export const annotation = {
+    created_at: '2020-09-20T00:00:00Z',
+    created_by: user,
+    description: {
+        message: 'mock annotation',
+        type: 'reply' as const,
+    },
+    file_version: {
+        id: '123',
+        type: 'file_version' as const,
+    },
+    id: '123',
+    modified_at: '2020-09-20T00:00:00Z',
+    modified_by: user,
+    permissions: {
+        can_delete: true,
+        can_edit: true,
+    },
+    target,
+    type: 'annotation' as const,
+};

src/api/Annotations.js

@@ -1,7 +1,7 @@
 // @flow
 import merge from 'lodash/merge';
 import MarkerBasedApi from './MarkerBasedAPI';
-import type { Annotation, NewAnnotation } from '../common/types/annotations';
+import type { Annotation, Annotations as AnnotationsType, NewAnnotation } from '../common/types/annotations';
 import type { ElementsXhrError } from '../common/types/api';
 
 export default class Annotations extends MarkerBasedApi {
@@ -74,7 +74,7 @@ export default class Annotations extends MarkerBasedApi {
     getAnnotations(
         fileId: string,
         fileVersionId?: string,
-        successCallback: (annotations: Annotation[]) => void,
+        successCallback: (annotations: AnnotationsType) => void,
         errorCallback: (e: ElementsXhrError, code: string) => void,
         limit?: number,
         shouldFetchAll?: boolean,

src/api/Feed.js

@@ -12,6 +12,7 @@ import commonMessages from '../elements/common/messages';
 import messages from './messages';
 import { sortFeedItems } from '../utils/sorter';
 import Base from './Base';
+import AnnotationsAPI from './Annotations';
 import CommentsAPI from './Comments';
 import VersionsAPI from './Versions';
 import TasksNewAPI from './tasks/TasksNew';
@@ -56,6 +57,7 @@ import type {
 } from '../common/types/core';
 import type {
     Annotation,
+    Annotations,
     AppActivityItems,
     Comment,
     Comments,
@@ -76,6 +78,11 @@ type FeedItemsCache = {
 type ErrorCallback = (e: ElementsXhrError, code: string, contextInfo?: Object) => void;
 
 class Feed extends Base {
+    /**
+     * @property {AnnotationsAPI}
+     */
+    annotationsAPI: AnnotationsAPI;
+
     /**
      * @property {VersionsAPI}
      */
@@ -207,7 +214,10 @@ class Feed extends Base {
         successCallback: Function,
         errorCallback: (feedItems: FeedItems) => void,
         onError: ErrorCallback,
-        { shouldShowAppActivity = false }: { shouldShowAppActivity?: boolean } = {},
+        {
+            shouldShowAnnotations = false,
+            shouldShowAppActivity = false,
+        }: { shouldShowAnnotations?: boolean, shouldShowAppActivity?: boolean } = {},
     ): void {
         const { id, permissions = {} } = file;
         const cachedItems = this.getCachedItems(id);
@@ -227,26 +237,44 @@ class Feed extends Base {
         this.file = file;
         this.hasError = false;
         this.errorCallback = onError;
+        const annotationsPromise = shouldShowAnnotations ? this.fetchAnnotations() : Promise.resolve();
         const versionsPromise = this.fetchVersions();
         const currentVersionPromise = this.fetchCurrentVersion();
         const commentsPromise = this.fetchComments(permissions);
         const tasksPromise = this.fetchTasksNew();
         const appActivityPromise = shouldShowAppActivity ? this.fetchAppActivity(permissions) : Promise.resolve();
 
-        Promise.all([versionsPromise, currentVersionPromise, commentsPromise, tasksPromise, appActivityPromise]).then(
-            ([versions: ?FileVersions, currentVersion: ?BoxItemVersion, ...feedItems]) => {
-                const versionsWithCurrent = this.versionsAPI.addCurrentVersion(currentVersion, versions, this.file);
-                const sortedFeedItems = sortFeedItems(versionsWithCurrent, ...feedItems);
-                if (!this.isDestroyed()) {
-                    this.setCachedItems(id, sortedFeedItems);
-                    if (this.hasError) {
-                        errorCallback(sortedFeedItems);
-                    } else {
-                        successCallback(sortedFeedItems);
-                    }
+        Promise.all([
+            versionsPromise,
+            currentVersionPromise,
+            commentsPromise,
+            tasksPromise,
+            appActivityPromise,
+            annotationsPromise,
+        ]).then(([versions: ?FileVersions, currentVersion: ?BoxItemVersion, ...feedItems]) => {
+            const versionsWithCurrent = this.versionsAPI.addCurrentVersion(currentVersion, versions, this.file);
+            const sortedFeedItems = sortFeedItems(versionsWithCurrent, ...feedItems);
+            if (!this.isDestroyed()) {
+                this.setCachedItems(id, sortedFeedItems);
+                if (this.hasError) {
+                    errorCallback(sortedFeedItems);
+                } else {
+                    successCallback(sortedFeedItems);
                 }
-            },
-        );
+            }
+        });
+    }
+
+    fetchAnnotations(): Promise<?Annotations> {
+        this.annotationsAPI = new AnnotationsAPI(this.options);
+        return new Promise(resolve => {
+            this.annotationsAPI.getAnnotations(
+                this.file.id,
+                undefined,
+                resolve,
+                this.fetchFeedItemErrorCallback.bind(this, resolve),
+            );
+        });
     }
 
     /**
@@ -1340,6 +1368,11 @@ class Feed extends Base {
     destroy() {
         super.destroy();
 
+        if (this.annotationsAPI) {
+            this.annotationsAPI.destroy();
+            delete this.annotationsAPI;
+        }
+
         if (this.commentsAPI) {
             this.commentsAPI.destroy();
             delete this.commentsAPI;

src/api/__tests__/Feed.test.js

@@ -4,6 +4,7 @@ import * as sorter from '../../utils/sorter';
 import * as error from '../../utils/error';
 import { IS_ERROR_DISPLAYED, TASK_NEW_NOT_STARTED, TASK_MAX_GROUP_ASSIGNEES } from '../../constants';
 import Feed from '../Feed';
+import { annotation as mockAnnotation } from '../../__mocks__/annotations';
 
 const mockTask = {
     created_by: {
@@ -98,6 +99,12 @@ const versionsWithCurrent = {
     entries: [mockCurrentVersion, mockFirstVersion, deleted_version],
 };
 
+const annotations = {
+    entries: [mockAnnotation],
+    limit: 1000,
+    next_marker: null,
+};
+
 jest.mock('lodash/uniqueId', () => () => 'uniqueId');
 
 const mockCreateTask = jest.fn().mockImplementation(({ successCallback }) => {
@@ -237,6 +244,12 @@ jest.mock('../Versions', () => {
     }));
 });
 
+jest.mock('../Annotations', () =>
+    jest.fn().mockImplementation(() => ({
+        getAnnotations: jest.fn(),
+    })),
+);
+
 const MOCK_APP_ACTIVITY_ITEM = {
     activity_template: {
         id: '1',
@@ -380,6 +393,7 @@ describe('api/Feed', () => {
             ...tasks.entries,
             ...comments.entries,
             ...appActivities.entries,
+            ...annotations.entries,
         ];
         let successCb;
         let errorCb;
@@ -390,6 +404,7 @@ describe('api/Feed', () => {
             feed.fetchTasksNew = jest.fn().mockResolvedValue(tasks);
             feed.fetchComments = jest.fn().mockResolvedValue(comments);
             feed.fetchAppActivity = jest.fn().mockReturnValue(appActivities);
+            feed.fetchAnnotations = jest.fn().mockReturnValue(annotations);
             feed.setCachedItems = jest.fn();
             feed.versionsAPI = {
                 getVersion: jest.fn().mockReturnValue(versions),
@@ -406,10 +421,19 @@ describe('api/Feed', () => {
         });
 
         test('should get feed items, sort, save to cache, and call the success callback', done => {
-            feed.feedItems(file, false, successCb, errorCb, jest.fn(), { shouldShowAppActivity: true });
+            feed.feedItems(file, false, successCb, errorCb, jest.fn(), {
+                shouldShowAnnotations: true,
+                shouldShowAppActivity: true,
+            });
             setImmediate(() => {
                 expect(feed.versionsAPI.addCurrentVersion).toHaveBeenCalledWith(mockCurrentVersion, versions, file);
-                expect(sorter.sortFeedItems).toHaveBeenCalledWith(versionsWithCurrent, comments, tasks, appActivities);
+                expect(sorter.sortFeedItems).toHaveBeenCalledWith(
+                    versionsWithCurrent,
+                    comments,
+                    tasks,
+                    appActivities,
+                    annotations,
+                );
                 expect(feed.setCachedItems).toHaveBeenCalledWith(file.id, sortedItems);
                 expect(successCb).toHaveBeenCalledWith(sortedItems);
                 done();
@@ -445,6 +469,22 @@ describe('api/Feed', () => {
             });
         });
 
+        test('should use the annotations api if shouldShowannotations is true', done => {
+            feed.feedItems(file, false, successCb, errorCb, errorCb, { shouldShowAnnotations: true });
+            setImmediate(() => {
+                expect(feed.fetchAnnotations).toHaveBeenCalled();
+                done();
+            });
+        });
+
+        test('should not use the annotations api if shouldShowannotations is false', done => {
+            feed.feedItems(file, false, successCb, errorCb, errorCb, { shouldShowAnnotations: false });
+            setImmediate(() => {
+                expect(feed.fetchAnnotations).not.toHaveBeenCalled();
+                done();
+            });
+        });
+
         test('should not call success or error callback if it is destroyed', done => {
             feed.isDestroyed = jest.fn().mockReturnValue(true);
             feed.feedItems(file, false, successCb, errorCb);
@@ -483,6 +523,19 @@ describe('api/Feed', () => {
         });
     });
 
+    describe('fetchAnnotations()', () => {
+        beforeEach(() => {
+            feed.file = file;
+            feed.fetchFeedItemErrorCallback = jest.fn();
+        });
+
+        test('should return a promise and call the annotations api', () => {
+            const annotationItems = feed.fetchAnnotations();
+            expect(annotationItems instanceof Promise).toBeTruthy();
+            expect(feed.annotationsAPI.getAnnotations).toBeCalled();
+        });
+    });
+
     describe('fetchComments()', () => {
         beforeEach(() => {
             feed.file = file;
@@ -1306,15 +1359,20 @@ describe('api/Feed', () => {
     });
 
     describe('destroy()', () => {
+        let annotationFn;
         let commentFn;
         let versionFn;
         let taskFn;
 
         beforeEach(() => {
+            annotationFn = jest.fn();
             commentFn = jest.fn();
             versionFn = jest.fn();
             taskFn = jest.fn();
 
+            feed.annotationsAPI = {
+                destroy: annotationFn,
+            };
             feed.tasksNewAPI = {
                 destroy: taskFn,
             };
@@ -1331,6 +1389,7 @@ describe('api/Feed', () => {
             expect(versionFn).toBeCalled();
             expect(commentFn).toBeCalled();
             expect(taskFn).toBeCalled();
+            expect(annotationFn).toBeCalled();
         });
     });
 

src/common/types/annotations.js

@@ -46,6 +46,12 @@ export type Annotation = {
     type: 'annotation',
 };
 
+export type Annotations = {
+    entries: Array<Annotation>,
+    limit: number,
+    next_marker: string | null,
+};
+
 export type NewReply = {
     message: string,
     type: 'reply',

src/common/types/feed.js

@@ -1,7 +1,7 @@
 // @flow strict
 import type { MessageDescriptor } from 'react-intl';
 import type { BoxItemPermission, BoxItemVersion, Reply, User } from './core';
-import type { Annotation } from './annotations';
+import type { Annotation, Annotations } from './annotations';
 
 // Feed item types that can receive deeplinks inline in the feed
 type FocusableFeedItemType = 'task' | 'comment' | 'annotation';
@@ -113,6 +113,7 @@ export type {
     ActionItemError,
     ActivityTemplateItem,
     Annotation,
+    Annotations,
     AppActivityAPIItem,
     AppActivityAPIItems,
     AppActivityItem,

src/elements/content-sidebar/ActivitySidebar.js

@@ -408,14 +408,15 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
     fetchFeedItems(shouldRefreshCache: boolean = false, shouldDestroy: boolean = false) {
         const { file, api, features } = this.props;
         const shouldShowAppActivity = isFeatureEnabled(features, 'activityFeed.appActivity.enabled');
+        const shouldShowAnnotations = isFeatureEnabled(features, 'activityFeed.annotations.enabled');
 
         api.getFeedAPI(shouldDestroy).feedItems(
             file,
             shouldRefreshCache,
             this.fetchFeedItemsSuccessCallback,
             this.fetchFeedItemsErrorCallback,
             this.errorCallback,
-            { shouldShowAppActivity },
+            { shouldShowAnnotations, shouldShowAppActivity },
         );
     }