feat(annotations): add new annotation to sidebar (#2090)

* feat(annotations): add new annotation to sidebar

* check for new action in annotatorState, start creation on create_start and update on create_end
* Update annotatorState type
* Update test
* Add new method to Feed.js to handle annotation creation
* Moved to using the request id from box-annotations

* feat(annotations): add new annotation to sidebar

* PR Feedback

* feat(annotations): add new annotation to sidebar

* fix un-needed move

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: mickr

src/api/Feed.js

@@ -54,7 +54,16 @@ import type {
     FileVersions,
     User,
 } from '../common/types/core';
-import type { Comment, Comments, Tasks, Task, FeedItem, FeedItems, AppActivityItems } from '../common/types/feed';
+import type {
+    Annotation,
+    AppActivityItems,
+    Comment,
+    Comments,
+    FeedItem,
+    FeedItems,
+    Task,
+    Tasks,
+} from '../common/types/feed';
 
 const TASK_NEW_INITIAL_STATUS = TASK_NEW_NOT_STARTED;
 const TASK = 'task';
@@ -113,6 +122,38 @@ class Feed extends Base {
         this.taskLinksAPI = [];
     }
 
+    /**
+     * Creates pending card on create_start action, then updates card on next call
+     * @param {BoxItem} file - The file to which the annotation is assigned
+     * @param {Object} currentUser - the user who performed the action
+     * @param {Annotation} annotation - the current annotation to be created
+     * @param {string} id - unique id for the incoming annotation
+     * @param {boolean} isPending - indicates the current creation process of the annotation
+     */
+    addAnnotation(file: BoxItem, currentUser: User, annotation: Annotation, id: string, isPending: boolean): void {
+        if (!file.id) {
+            throw getBadItemError();
+        }
+
+        this.file = file;
+
+        // Add the pending interstitial card
+        if (isPending) {
+            const newAnnotation = {
+                ...annotation,
+                created_by: currentUser,
+                id,
+                type: 'annotation',
+            };
+
+            this.addPendingItem(this.file.id, currentUser, newAnnotation);
+
+            return;
+        }
+        // Create action has completed, so update the existing pending item
+        this.updateFeedItem({ ...annotation, isPending: false }, id);
+    }
+
     /**
      * Creates a key for the cache
      *

src/api/__tests__/Feed.test.js

@@ -1362,4 +1362,42 @@ describe('api/Feed', () => {
             expect(feed.feedErrorCallback).toHaveBeenCalledWith(shouldDisplayError, e, code);
         });
     });
+
+    describe('addAnnotation()', () => {
+        beforeEach(() => {
+            feed.addPendingItem = jest.fn();
+            feed.updateFeedItem = jest.fn();
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        test('should throw if no file id', () => {
+            expect(() => feed.addAnnotation({})).toThrow('Bad box item!');
+        });
+
+        test('should add pending feedItem item if annotation event isPending', () => {
+            const expectedAnnotation = {
+                created_by: user,
+                id: '123',
+                type: 'annotation',
+            };
+
+            feed.addAnnotation(file, user, {}, '123', true);
+            expect(feed.addPendingItem).toBeCalledWith(file.id, user, expectedAnnotation);
+            expect(feed.updateFeedItem).not.toBeCalled();
+        });
+
+        test('should update feedItem if annotation event is not pending', () => {
+            const expectedAnnotation = {
+                isPending: false,
+            };
+
+            feed.addAnnotation(file, user, {}, '123', false);
+
+            expect(feed.updateFeedItem).toBeCalledWith(expectedAnnotation, '123');
+            expect(feed.addPendingItem).not.toBeCalled();
+        });
+    });
 });

src/elements/common/annotator-context/__tests__/withAnnotations.test.tsx

@@ -65,6 +65,7 @@ describe('elements/common/annotator-context/withAnnotations', () => {
             activeAnnotationId: null,
             annotation: null,
             error: null,
+            meta: null,
         });
     });
 
@@ -99,6 +100,7 @@ describe('elements/common/annotator-context/withAnnotations', () => {
                     annotation,
                     meta: {
                         status,
+                        requestId: '123',
                     },
                     error,
                 };
@@ -111,6 +113,10 @@ describe('elements/common/annotator-context/withAnnotations', () => {
                     activeAnnotationId: null,
                     annotation: expectedAnnotation,
                     error: expectedError,
+                    meta: {
+                        status,
+                        requestId: '123',
+                    },
                 });
             },
         );

src/elements/common/annotator-context/types.ts

@@ -20,6 +20,7 @@ export interface AnnotatorState {
     annotation?: object | null;
     action?: Action | null;
     error?: Error | null;
+    meta?: Metadata | null;
 }
 
 export interface AnnotatorContext {
@@ -34,6 +35,7 @@ export enum Status {
 }
 
 export interface Metadata {
+    requestId: string;
     status: Status;
 }
 

src/elements/common/annotator-context/withAnnotations.tsx

@@ -21,10 +21,11 @@ export interface ComponentWithAnnotations {
 export type WithAnnotationsComponent<P> = React.ComponentClass<P & WithAnnotationsProps>;
 
 const defaultState: AnnotatorState = {
+    action: null,
     activeAnnotationId: null,
     annotation: null,
-    action: null,
     error: null,
+    meta: null,
 };
 
 export default function withAnnotations<P extends object>(
@@ -52,9 +53,11 @@ export default function withAnnotations<P extends object>(
         }
 
         handleAnnotationCreate = (eventData: AnnotationActionEvent): void => {
-            const { annotation = null, error = null } = eventData;
+            const { annotation = null, error = null, meta = null } = eventData;
+
             const action = this.getAction(eventData);
-            this.setState({ ...this.state, annotation, action, error });
+
+            this.setState({ ...this.state, annotation, action, error, meta });
         };
 
         handleActiveChange = (annotationId: string | null): void => {

src/elements/content-sidebar/ActivitySidebar.js

@@ -96,6 +96,7 @@ mark(MARK_NAME_JS_READY);
 
 class ActivitySidebar extends React.PureComponent<Props, State> {
     static defaultProps = {
+        annotatorState: {},
         emitAnnotatorActiveChangeEvent: noop,
         isDisabled: false,
         onCommentCreate: noop,
@@ -123,6 +124,36 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         this.fetchCurrentUser(currentUser);
     }
 
+    componentDidUpdate({ annotatorState: prevAnnotatorState }: Props): void {
+        const { annotation: prevAnnotation } = prevAnnotatorState;
+        const {
+            annotatorState: { annotation },
+        } = this.props;
+
+        if (prevAnnotation !== annotation) {
+            this.addAnnotation();
+        }
+    }
+
+    addAnnotation() {
+        const {
+            annotatorState: { action, annotation, meta },
+            api,
+            file,
+        } = this.props;
+        const { requestId } = meta || {};
+        const { currentUser } = this.state;
+        const isPending = action === 'create_start';
+
+        if (!currentUser) {
+            throw getBadUserError();
+        }
+
+        api.getFeedAPI(false).addAnnotation(file, currentUser, annotation, requestId, isPending);
+
+        this.fetchFeedItems();
+    }
+
     /**
      * Fetches a Users info
      *

src/elements/content-sidebar/__tests__/ActivitySidebar.test.js

@@ -9,6 +9,7 @@ jest.mock('lodash/debounce', () => jest.fn(i => i));
 
 describe('elements/content-sidebar/ActivitySidebar', () => {
     const feedAPI = {
+        addAnnotation: jest.fn(),
         feedItems: jest.fn(),
         deleteComment: jest.fn(),
         deleteTaskNew: jest.fn(),
@@ -96,6 +97,18 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
         });
     });
 
+    describe('componentDidUpdate', () => {
+        test('should call addAnnotation if annotator action changes', () => {
+            const wrapper = getWrapper({ annotatorState: { annotation: {} } });
+            const instance = wrapper.instance();
+
+            instance.addAnnotation = jest.fn();
+
+            wrapper.setProps({ annotatorState: { annotation: { id: '123' } } });
+            expect(instance.addAnnotation).toBeCalled();
+        });
+    });
+
     describe('render()', () => {
         test('should render the activity feed sidebar', () => {
             const wrapper = getWrapper();
@@ -670,4 +683,35 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
             expect(fetchFeedItems).toHaveBeenCalledWith(true);
         });
     });
+
+    describe('addAnnotation()', () => {
+        test('should throw if no user', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+
+            expect(() => instance.addAnnotation()).toThrow('Bad box user!');
+        });
+        test.each([true, false])('should call feedApi with pending if action %s', isPending => {
+            const annotatorStateMock = {
+                action: isPending ? 'create_start' : null,
+                annotation: {},
+                meta: {
+                    requestId: '123',
+                },
+            };
+
+            const wrapper = getWrapper({ annotatorState: annotatorStateMock, currentUser });
+            const instance = wrapper.instance();
+
+            instance.addAnnotation();
+
+            expect(api.getFeedAPI().addAnnotation).toBeCalledWith(
+                file,
+                currentUser,
+                annotatorStateMock.annotation,
+                annotatorStateMock.meta.requestId,
+                isPending,
+            );
+        });
+    });
 });