box-ui-elements 16.1.0-beta.32 → 16.1.0-beta.33

package/es/elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread.scss

@@ -6,6 +6,10 @@
 
     .bcs-ActivityThread {
         box-shadow: none;
+
+        &:hover {
+            background: none;
+        }
     }
 
     .bcs-ActivityThread-content {

package/es/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationThread.js

@@ -71,7 +71,10 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
       isLoading = _React$useState8[0],
       setIsLoading = _React$useState8[1];
 
-  var fileId = file.id,
+  var _file$file_version = file.file_version;
+  _file$file_version = _file$file_version === void 0 ? {} : _file$file_version;
+  var fileVersionId = _file$file_version.id,
+      fileId = file.id,
       _file$permissions = file.permissions,
       filePermissions = _file$permissions === void 0 ? {} : _file$permissions;
 
@@ -102,7 +105,12 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
     onAnnotationUpdateStart: setAnnotationPending
   }),
       emitAddAnnotationEndEvent = _useAnnotatorEvents.emitAddAnnotationEndEvent,
-      emitAddAnnotationStartEvent = _useAnnotatorEvents.emitAddAnnotationStartEvent;
+      emitAddAnnotationStartEvent = _useAnnotatorEvents.emitAddAnnotationStartEvent,
+      emitAnnotationActiveChangeEvent = _useAnnotatorEvents.emitAnnotationActiveChangeEvent,
+      emitDeleteAnnotationEndEvent = _useAnnotatorEvents.emitDeleteAnnotationEndEvent,
+      emitDeleteAnnotationStartEvent = _useAnnotatorEvents.emitDeleteAnnotationStartEvent,
+      emitUpdateAnnotationEndEvent = _useAnnotatorEvents.emitUpdateAnnotationEndEvent,
+      emitUpdateAnnotationStartEvent = _useAnnotatorEvents.emitUpdateAnnotationStartEvent;
 
   var handleUpdateOrCreateReplyItem = function handleUpdateOrCreateReplyItem(replyId, updatedReplyValues) {
     setReplies(function (prevReplies) {
@@ -125,16 +133,6 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
     });
   };
 
-  var handleFetchAnnotationSuccess = function handleFetchAnnotationSuccess(_ref2) {
-    var fetchedReplies = _ref2.replies,
-        normalizedAnnotation = _objectWithoutProperties(_ref2, ["replies"]);
-
-    setAnnotation(_objectSpread({}, normalizedAnnotation));
-    setReplies(normalizeReplies(fetchedReplies));
-    setError(undefined);
-    setIsLoading(false);
-  };
-
   var annotationErrorCallback = React.useCallback(function (e, code) {
     setIsLoading(false);
     setError({
@@ -158,16 +156,25 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
       handleStatusChange = _useAnnotationAPI.handleStatusChange;
 
   React.useEffect(function () {
-    if (!annotationId || annotation && annotation.id === annotationId) {
+    if (!annotationId || isLoading || annotation && annotation.id === annotationId) {
       return;
     }
 
     setIsLoading(true);
     handleFetch({
       id: annotationId,
-      successCallback: handleFetchAnnotationSuccess
+      successCallback: function successCallback(_ref2) {
+        var fetchedReplies = _ref2.replies,
+            normalizedAnnotation = _objectWithoutProperties(_ref2, ["replies"]);
+
+        setAnnotation(_objectSpread({}, normalizedAnnotation));
+        setReplies(normalizeReplies(fetchedReplies));
+        setError(undefined);
+        setIsLoading(false);
+        emitAnnotationActiveChangeEvent(normalizedAnnotation.id, fileVersionId);
+      }
     });
-  }, [annotation, annotationId, handleFetch]);
+  }, [annotation, annotationId, emitAnnotationActiveChangeEvent, fileVersionId, handleFetch, isLoading]);
 
   var _useRepliesAPI = useRepliesAPI({
     annotationId: annotationId,
@@ -209,7 +216,8 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
     var id = _ref3.id,
         permissions = _ref3.permissions;
 
-    var annotationDeleteSuccessCallback = function annotationDeleteSuccessCallback() {// will emit event
+    var annotationDeleteSuccessCallback = function annotationDeleteSuccessCallback() {
+      emitDeleteAnnotationEndEvent(id);
     };
 
     setAnnotation(function (prevAnnotation) {
@@ -217,6 +225,7 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
         isPending: true
       });
     });
+    emitDeleteAnnotationStartEvent(id);
     handleDelete({
       id: id,
       permissions: permissions,
@@ -228,6 +237,7 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
     handleUpdateAnnotation(_objectSpread({}, updatedAnnotation, {
       isPending: false
     }));
+    emitUpdateAnnotationEndEvent(updatedAnnotation);
   };
 
   var handleAnnotationEdit = function handleAnnotationEdit(id, text, permissions) {
@@ -236,6 +246,12 @@ var useAnnotationThread = function useAnnotationThread(_ref) {
         isPending: true
       });
     });
+    emitUpdateAnnotationStartEvent({
+      id: id,
+      description: {
+        message: text
+      }
+    });
     handleEdit({
       id: id,
       text: text,

package/es/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationThread.js.flow

@@ -86,7 +86,7 @@ const useAnnotationThread = ({
     const [error, setError] = React.useState<AnnotationThreadError | typeof undefined>();
     const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
-    const { id: fileId, permissions: filePermissions = {} } = file;
+    const { file_version: { id: fileVersionId } = {}, id: fileId, permissions: filePermissions = {} } = file;
 
     const setAnnotationPending = () => {
         if (annotation) {
@@ -100,7 +100,15 @@ const useAnnotationThread = ({
         }
     };
 
-    const { emitAddAnnotationEndEvent, emitAddAnnotationStartEvent } = useAnnotatorEvents({
+    const {
+        emitAddAnnotationEndEvent,
+        emitAddAnnotationStartEvent,
+        emitAnnotationActiveChangeEvent,
+        emitDeleteAnnotationEndEvent,
+        emitDeleteAnnotationStartEvent,
+        emitUpdateAnnotationEndEvent,
+        emitUpdateAnnotationStartEvent,
+    } = useAnnotatorEvents({
         eventEmitter,
         onAnnotationDeleteStart: setAnnotationPending,
         onAnnotationUpdateEnd: handleAnnotationUpdateEnd,
@@ -129,13 +137,6 @@ const useAnnotationThread = ({
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, ...updatedValues }));
     };
 
-    const handleFetchAnnotationSuccess = ({ replies: fetchedReplies, ...normalizedAnnotation }: Annotation) => {
-        setAnnotation({ ...normalizedAnnotation });
-        setReplies(normalizeReplies(fetchedReplies));
-        setError(undefined);
-        setIsLoading(false);
-    };
-
     const annotationErrorCallback = React.useCallback(
         (e: ElementsXhrError, code: string): void => {
             setIsLoading(false);
@@ -158,12 +159,21 @@ const useAnnotationThread = ({
     });
 
     React.useEffect(() => {
-        if (!annotationId || (annotation && annotation.id === annotationId)) {
+        if (!annotationId || isLoading || (annotation && annotation.id === annotationId)) {
             return;
         }
         setIsLoading(true);
-        handleFetch({ id: annotationId, successCallback: handleFetchAnnotationSuccess });
-    }, [annotation, annotationId, handleFetch]);
+        handleFetch({
+            id: annotationId,
+            successCallback: ({ replies: fetchedReplies, ...normalizedAnnotation }: Annotation) => {
+                setAnnotation({ ...normalizedAnnotation });
+                setReplies(normalizeReplies(fetchedReplies));
+                setError(undefined);
+                setIsLoading(false);
+                emitAnnotationActiveChangeEvent(normalizedAnnotation.id, fileVersionId);
+            },
+        });
+    }, [annotation, annotationId, emitAnnotationActiveChangeEvent, fileVersionId, handleFetch, isLoading]);
 
     const { handleReplyCreate, handleReplyEdit, handleReplyDelete } = useRepliesAPI({
         annotationId,
@@ -198,10 +208,13 @@ const useAnnotationThread = ({
 
     const handleAnnotationDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }): void => {
         const annotationDeleteSuccessCallback = () => {
-            // will emit event
+            emitDeleteAnnotationEndEvent(id);
         };
 
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
+
+        emitDeleteAnnotationStartEvent(id);
+
         handleDelete({
             id,
             permissions,
@@ -214,11 +227,18 @@ const useAnnotationThread = ({
             ...updatedAnnotation,
             isPending: false,
         });
+
+        emitUpdateAnnotationEndEvent(updatedAnnotation);
     };
 
     const handleAnnotationEdit = (id: string, text: string, permissions: AnnotationPermission): void => {
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
 
+        emitUpdateAnnotationStartEvent({
+            id,
+            description: { message: text },
+        });
+
         handleEdit({
             id,
             text,

package/es/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationThread.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationThread.js"],"names":["React","uniqueId","commonMessages","annotationErrors","API","useRepliesAPI","useAnnotatorEvents","useAnnotationAPI","normalizeReplies","repliesArray","reduce","prevValues","reply","id","denormalizeReplies","repliesMap","Object","keys","map","key","useAnnotationThread","annotationId","api","currentUser","errorCallback","eventEmitter","file","onAnnotationCreate","target","useState","annotation","setAnnotation","replies","setReplies","error","setError","isLoading","setIsLoading","fileId","permissions","filePermissions","setAnnotationPending","prevAnnotation","isPending","handleAnnotationUpdateEnd","updatedAnnotation","onAnnotationDeleteStart","onAnnotationUpdateEnd","onAnnotationUpdateStart","emitAddAnnotationEndEvent","emitAddAnnotationStartEvent","handleUpdateOrCreateReplyItem","replyId","updatedReplyValues","prevReplies","handleRemoveReplyItem","newReplies","handleUpdateAnnotation","updatedValues","handleFetchAnnotationSuccess","fetchedReplies","normalizedAnnotation","undefined","annotationErrorCallback","useCallback","e","code","title","errorOccured","message","default","handleCreate","handleDelete","handleEdit","handleFetch","handleStatusChange","useEffect","successCallback","handleReplyCreate","handleReplyEdit","handleReplyDelete","handleAnnotationCreate","text","requestId","newAnnotation","payload","description","handleAnnotationDelete","annotationDeleteSuccessCallback","onAnnotationEditSuccessCallback","handleAnnotationEdit","handleAnnotationStatusChange","status","annotationActions","repliesActions"],"mappings":"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","sourcesContent":["// @flow\n\nimport React from 'react';\nimport uniqueId from 'lodash/uniqueId';\nimport type EventEmitter from 'events';\nimport commonMessages from '../../../common/messages';\nimport { annotationErrors } from './errors';\nimport API from '../../../../api/APIFactory';\nimport useRepliesAPI from './useRepliesAPI';\nimport { useAnnotatorEvents } from '../../../common/annotator-context';\nimport useAnnotationAPI from './useAnnotationAPI';\nimport type { Annotation, AnnotationPermission, NewAnnotation, Target } from '../../../../common/types/annotations';\nimport type { BoxItem, User } from '../../../../common/types/core';\nimport type { BoxCommentPermission, Comment, FeedItemStatus } from '../../../../common/types/feed';\nimport type { ElementOrigin, ElementsXhrError } from '../../../../common/types/api';\nimport type { AnnotationThreadError } from './types';\n\nconst normalizeReplies = (repliesArray?: Array<Comment>): { [string]: Comment } => {\n    if (!repliesArray) {\n        return {};\n    }\n    return repliesArray.reduce((prevValues, reply) => {\n        return {\n            ...prevValues,\n            [reply.id]: reply,\n        };\n    }, {});\n};\n\nconst denormalizeReplies = (repliesMap: { [string]: Comment }): Array<Comment> => {\n    return Object.keys(repliesMap).map(key => repliesMap[key]);\n};\n\ntype Props = {\n    annotationId?: string,\n    api: API,\n    currentUser: User,\n    errorCallback: (\n        error: ElementsXhrError | Error,\n        code: string,\n        contextInfo?: Object,\n        origin?: ElementOrigin,\n    ) => void,\n    eventEmitter: EventEmitter,\n    file: BoxItem,\n    onAnnotationCreate: (annotation: Annotation) => void,\n    target: Target,\n};\n\ntype UseAnnotationThread = {\n    annotation?: Annotation,\n    annotationActions: {\n        handleAnnotationCreate: (text: string) => void,\n        handleAnnotationDelete: ({ id: string, permissions: AnnotationPermission }) => void,\n        handleAnnotationEdit: (id: string, text: string, permissions: AnnotationPermission) => void,\n        handleAnnotationStatusChange: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,\n    },\n    error?: AnnotationThreadError,\n    isLoading: boolean,\n    replies: Array<Comment>,\n    repliesActions: {\n        handleReplyCreate: (message: string) => void,\n        handleReplyDelete: ({ id: string, permissions: BoxCommentPermission }) => void,\n        handleReplyEdit: (\n            replyId: string,\n            message: string,\n            status?: FeedItemStatus,\n            hasMention?: boolean,\n            permissions: BoxCommentPermission,\n        ) => void,\n    },\n};\n\nconst useAnnotationThread = ({\n    annotationId,\n    api,\n    currentUser,\n    errorCallback,\n    eventEmitter,\n    file,\n    onAnnotationCreate,\n    target,\n}: Props): UseAnnotationThread => {\n    const [annotation, setAnnotation] = React.useState<Annotation | typeof undefined>();\n    const [replies, setReplies] = React.useState<{ [string]: Comment }>({});\n    const [error, setError] = React.useState<AnnotationThreadError | typeof undefined>();\n    const [isLoading, setIsLoading] = React.useState<boolean>(false);\n\n    const { id: fileId, permissions: filePermissions = {} } = file;\n\n    const setAnnotationPending = () => {\n        if (annotation) {\n            setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n        }\n    };\n\n    const handleAnnotationUpdateEnd = (updatedAnnotation: Annotation) => {\n        if (annotation && updatedAnnotation.id === annotationId) {\n            setAnnotation(prevAnnotation => ({ ...prevAnnotation, ...updatedAnnotation, isPending: false }));\n        }\n    };\n\n    const { emitAddAnnotationEndEvent, emitAddAnnotationStartEvent } = useAnnotatorEvents({\n        eventEmitter,\n        onAnnotationDeleteStart: setAnnotationPending,\n        onAnnotationUpdateEnd: handleAnnotationUpdateEnd,\n        onAnnotationUpdateStart: setAnnotationPending,\n    });\n\n    const handleUpdateOrCreateReplyItem = (replyId: string, updatedReplyValues: Object) => {\n        setReplies(prevReplies => ({\n            ...prevReplies,\n            [replyId]: {\n                ...prevReplies[replyId],\n                ...updatedReplyValues,\n            },\n        }));\n    };\n\n    const handleRemoveReplyItem = (replyId: string) => {\n        setReplies(prevReplies => {\n            const newReplies = { ...prevReplies };\n            delete newReplies[replyId];\n            return newReplies;\n        });\n    };\n\n    const handleUpdateAnnotation = (updatedValues: Object) => {\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, ...updatedValues }));\n    };\n\n    const handleFetchAnnotationSuccess = ({ replies: fetchedReplies, ...normalizedAnnotation }: Annotation) => {\n        setAnnotation({ ...normalizedAnnotation });\n        setReplies(normalizeReplies(fetchedReplies));\n        setError(undefined);\n        setIsLoading(false);\n    };\n\n    const annotationErrorCallback = React.useCallback(\n        (e: ElementsXhrError, code: string): void => {\n            setIsLoading(false);\n            setError({\n                title: commonMessages.errorOccured,\n                message: annotationErrors[code] || annotationErrors.default,\n            });\n\n            errorCallback(e, code, {\n                error: e,\n            });\n        },\n        [errorCallback],\n    );\n\n    const { handleCreate, handleDelete, handleEdit, handleFetch, handleStatusChange } = useAnnotationAPI({\n        api,\n        file,\n        errorCallback: annotationErrorCallback,\n    });\n\n    React.useEffect(() => {\n        if (!annotationId || (annotation && annotation.id === annotationId)) {\n            return;\n        }\n        setIsLoading(true);\n        handleFetch({ id: annotationId, successCallback: handleFetchAnnotationSuccess });\n    }, [annotation, annotationId, handleFetch]);\n\n    const { handleReplyCreate, handleReplyEdit, handleReplyDelete } = useRepliesAPI({\n        annotationId,\n        api,\n        currentUser,\n        fileId,\n        filePermissions,\n        handleRemoveReplyItem,\n        handleUpdateOrCreateReplyItem,\n    });\n\n    const handleAnnotationCreate = (text: string) => {\n        setIsLoading(true);\n\n        const requestId = uniqueId('annotation_');\n\n        const successCallback = (newAnnotation: Annotation) => {\n            setIsLoading(false);\n            emitAddAnnotationEndEvent(newAnnotation, requestId);\n            onAnnotationCreate(newAnnotation);\n        };\n\n        const payload: NewAnnotation = {\n            description: { message: text },\n            target,\n        };\n\n        emitAddAnnotationStartEvent(payload, requestId);\n\n        handleCreate({ payload, successCallback });\n    };\n\n    const handleAnnotationDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }): void => {\n        const annotationDeleteSuccessCallback = () => {\n            // will emit event\n        };\n\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n        handleDelete({\n            id,\n            permissions,\n            successCallback: annotationDeleteSuccessCallback,\n        });\n    };\n\n    const onAnnotationEditSuccessCallback = (updatedAnnotation: Annotation): void => {\n        handleUpdateAnnotation({\n            ...updatedAnnotation,\n            isPending: false,\n        });\n    };\n\n    const handleAnnotationEdit = (id: string, text: string, permissions: AnnotationPermission): void => {\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n\n        handleEdit({\n            id,\n            text,\n            permissions,\n            successCallback: onAnnotationEditSuccessCallback,\n        });\n    };\n\n    const handleAnnotationStatusChange = (\n        id: string,\n        status: FeedItemStatus,\n        permissions: AnnotationPermission,\n    ): void => {\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n\n        handleStatusChange({\n            id,\n            status,\n            permissions,\n            successCallback: onAnnotationEditSuccessCallback,\n        });\n    };\n\n    return {\n        annotation,\n        error,\n        isLoading,\n        replies: denormalizeReplies(replies),\n        annotationActions: {\n            handleAnnotationCreate,\n            handleAnnotationDelete,\n            handleAnnotationEdit,\n            handleAnnotationStatusChange,\n        },\n        repliesActions: {\n            handleReplyCreate,\n            handleReplyEdit,\n            handleReplyDelete,\n        },\n    };\n};\n\nexport default useAnnotationThread;\n"],"file":"useAnnotationThread.js"}
+{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationThread.js"],"names":["React","uniqueId","commonMessages","annotationErrors","API","useRepliesAPI","useAnnotatorEvents","useAnnotationAPI","normalizeReplies","repliesArray","reduce","prevValues","reply","id","denormalizeReplies","repliesMap","Object","keys","map","key","useAnnotationThread","annotationId","api","currentUser","errorCallback","eventEmitter","file","onAnnotationCreate","target","useState","annotation","setAnnotation","replies","setReplies","error","setError","isLoading","setIsLoading","file_version","fileVersionId","fileId","permissions","filePermissions","setAnnotationPending","prevAnnotation","isPending","handleAnnotationUpdateEnd","updatedAnnotation","onAnnotationDeleteStart","onAnnotationUpdateEnd","onAnnotationUpdateStart","emitAddAnnotationEndEvent","emitAddAnnotationStartEvent","emitAnnotationActiveChangeEvent","emitDeleteAnnotationEndEvent","emitDeleteAnnotationStartEvent","emitUpdateAnnotationEndEvent","emitUpdateAnnotationStartEvent","handleUpdateOrCreateReplyItem","replyId","updatedReplyValues","prevReplies","handleRemoveReplyItem","newReplies","handleUpdateAnnotation","updatedValues","annotationErrorCallback","useCallback","e","code","title","errorOccured","message","default","handleCreate","handleDelete","handleEdit","handleFetch","handleStatusChange","useEffect","successCallback","fetchedReplies","normalizedAnnotation","undefined","handleReplyCreate","handleReplyEdit","handleReplyDelete","handleAnnotationCreate","text","requestId","newAnnotation","payload","description","handleAnnotationDelete","annotationDeleteSuccessCallback","onAnnotationEditSuccessCallback","handleAnnotationEdit","handleAnnotationStatusChange","status","annotationActions","repliesActions"],"mappings":"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","sourcesContent":["// @flow\n\nimport React from 'react';\nimport uniqueId from 'lodash/uniqueId';\nimport type EventEmitter from 'events';\nimport commonMessages from '../../../common/messages';\nimport { annotationErrors } from './errors';\nimport API from '../../../../api/APIFactory';\nimport useRepliesAPI from './useRepliesAPI';\nimport { useAnnotatorEvents } from '../../../common/annotator-context';\nimport useAnnotationAPI from './useAnnotationAPI';\nimport type { Annotation, AnnotationPermission, NewAnnotation, Target } from '../../../../common/types/annotations';\nimport type { BoxItem, User } from '../../../../common/types/core';\nimport type { BoxCommentPermission, Comment, FeedItemStatus } from '../../../../common/types/feed';\nimport type { ElementOrigin, ElementsXhrError } from '../../../../common/types/api';\nimport type { AnnotationThreadError } from './types';\n\nconst normalizeReplies = (repliesArray?: Array<Comment>): { [string]: Comment } => {\n    if (!repliesArray) {\n        return {};\n    }\n    return repliesArray.reduce((prevValues, reply) => {\n        return {\n            ...prevValues,\n            [reply.id]: reply,\n        };\n    }, {});\n};\n\nconst denormalizeReplies = (repliesMap: { [string]: Comment }): Array<Comment> => {\n    return Object.keys(repliesMap).map(key => repliesMap[key]);\n};\n\ntype Props = {\n    annotationId?: string,\n    api: API,\n    currentUser: User,\n    errorCallback: (\n        error: ElementsXhrError | Error,\n        code: string,\n        contextInfo?: Object,\n        origin?: ElementOrigin,\n    ) => void,\n    eventEmitter: EventEmitter,\n    file: BoxItem,\n    onAnnotationCreate: (annotation: Annotation) => void,\n    target: Target,\n};\n\ntype UseAnnotationThread = {\n    annotation?: Annotation,\n    annotationActions: {\n        handleAnnotationCreate: (text: string) => void,\n        handleAnnotationDelete: ({ id: string, permissions: AnnotationPermission }) => void,\n        handleAnnotationEdit: (id: string, text: string, permissions: AnnotationPermission) => void,\n        handleAnnotationStatusChange: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,\n    },\n    error?: AnnotationThreadError,\n    isLoading: boolean,\n    replies: Array<Comment>,\n    repliesActions: {\n        handleReplyCreate: (message: string) => void,\n        handleReplyDelete: ({ id: string, permissions: BoxCommentPermission }) => void,\n        handleReplyEdit: (\n            replyId: string,\n            message: string,\n            status?: FeedItemStatus,\n            hasMention?: boolean,\n            permissions: BoxCommentPermission,\n        ) => void,\n    },\n};\n\nconst useAnnotationThread = ({\n    annotationId,\n    api,\n    currentUser,\n    errorCallback,\n    eventEmitter,\n    file,\n    onAnnotationCreate,\n    target,\n}: Props): UseAnnotationThread => {\n    const [annotation, setAnnotation] = React.useState<Annotation | typeof undefined>();\n    const [replies, setReplies] = React.useState<{ [string]: Comment }>({});\n    const [error, setError] = React.useState<AnnotationThreadError | typeof undefined>();\n    const [isLoading, setIsLoading] = React.useState<boolean>(false);\n\n    const { file_version: { id: fileVersionId } = {}, id: fileId, permissions: filePermissions = {} } = file;\n\n    const setAnnotationPending = () => {\n        if (annotation) {\n            setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n        }\n    };\n\n    const handleAnnotationUpdateEnd = (updatedAnnotation: Annotation) => {\n        if (annotation && updatedAnnotation.id === annotationId) {\n            setAnnotation(prevAnnotation => ({ ...prevAnnotation, ...updatedAnnotation, isPending: false }));\n        }\n    };\n\n    const {\n        emitAddAnnotationEndEvent,\n        emitAddAnnotationStartEvent,\n        emitAnnotationActiveChangeEvent,\n        emitDeleteAnnotationEndEvent,\n        emitDeleteAnnotationStartEvent,\n        emitUpdateAnnotationEndEvent,\n        emitUpdateAnnotationStartEvent,\n    } = useAnnotatorEvents({\n        eventEmitter,\n        onAnnotationDeleteStart: setAnnotationPending,\n        onAnnotationUpdateEnd: handleAnnotationUpdateEnd,\n        onAnnotationUpdateStart: setAnnotationPending,\n    });\n\n    const handleUpdateOrCreateReplyItem = (replyId: string, updatedReplyValues: Object) => {\n        setReplies(prevReplies => ({\n            ...prevReplies,\n            [replyId]: {\n                ...prevReplies[replyId],\n                ...updatedReplyValues,\n            },\n        }));\n    };\n\n    const handleRemoveReplyItem = (replyId: string) => {\n        setReplies(prevReplies => {\n            const newReplies = { ...prevReplies };\n            delete newReplies[replyId];\n            return newReplies;\n        });\n    };\n\n    const handleUpdateAnnotation = (updatedValues: Object) => {\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, ...updatedValues }));\n    };\n\n    const annotationErrorCallback = React.useCallback(\n        (e: ElementsXhrError, code: string): void => {\n            setIsLoading(false);\n            setError({\n                title: commonMessages.errorOccured,\n                message: annotationErrors[code] || annotationErrors.default,\n            });\n\n            errorCallback(e, code, {\n                error: e,\n            });\n        },\n        [errorCallback],\n    );\n\n    const { handleCreate, handleDelete, handleEdit, handleFetch, handleStatusChange } = useAnnotationAPI({\n        api,\n        file,\n        errorCallback: annotationErrorCallback,\n    });\n\n    React.useEffect(() => {\n        if (!annotationId || isLoading || (annotation && annotation.id === annotationId)) {\n            return;\n        }\n        setIsLoading(true);\n        handleFetch({\n            id: annotationId,\n            successCallback: ({ replies: fetchedReplies, ...normalizedAnnotation }: Annotation) => {\n                setAnnotation({ ...normalizedAnnotation });\n                setReplies(normalizeReplies(fetchedReplies));\n                setError(undefined);\n                setIsLoading(false);\n                emitAnnotationActiveChangeEvent(normalizedAnnotation.id, fileVersionId);\n            },\n        });\n    }, [annotation, annotationId, emitAnnotationActiveChangeEvent, fileVersionId, handleFetch, isLoading]);\n\n    const { handleReplyCreate, handleReplyEdit, handleReplyDelete } = useRepliesAPI({\n        annotationId,\n        api,\n        currentUser,\n        fileId,\n        filePermissions,\n        handleRemoveReplyItem,\n        handleUpdateOrCreateReplyItem,\n    });\n\n    const handleAnnotationCreate = (text: string) => {\n        setIsLoading(true);\n\n        const requestId = uniqueId('annotation_');\n\n        const successCallback = (newAnnotation: Annotation) => {\n            setIsLoading(false);\n            emitAddAnnotationEndEvent(newAnnotation, requestId);\n            onAnnotationCreate(newAnnotation);\n        };\n\n        const payload: NewAnnotation = {\n            description: { message: text },\n            target,\n        };\n\n        emitAddAnnotationStartEvent(payload, requestId);\n\n        handleCreate({ payload, successCallback });\n    };\n\n    const handleAnnotationDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }): void => {\n        const annotationDeleteSuccessCallback = () => {\n            emitDeleteAnnotationEndEvent(id);\n        };\n\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n\n        emitDeleteAnnotationStartEvent(id);\n\n        handleDelete({\n            id,\n            permissions,\n            successCallback: annotationDeleteSuccessCallback,\n        });\n    };\n\n    const onAnnotationEditSuccessCallback = (updatedAnnotation: Annotation): void => {\n        handleUpdateAnnotation({\n            ...updatedAnnotation,\n            isPending: false,\n        });\n\n        emitUpdateAnnotationEndEvent(updatedAnnotation);\n    };\n\n    const handleAnnotationEdit = (id: string, text: string, permissions: AnnotationPermission): void => {\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n\n        emitUpdateAnnotationStartEvent({\n            id,\n            description: { message: text },\n        });\n\n        handleEdit({\n            id,\n            text,\n            permissions,\n            successCallback: onAnnotationEditSuccessCallback,\n        });\n    };\n\n    const handleAnnotationStatusChange = (\n        id: string,\n        status: FeedItemStatus,\n        permissions: AnnotationPermission,\n    ): void => {\n        setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));\n\n        handleStatusChange({\n            id,\n            status,\n            permissions,\n            successCallback: onAnnotationEditSuccessCallback,\n        });\n    };\n\n    return {\n        annotation,\n        error,\n        isLoading,\n        replies: denormalizeReplies(replies),\n        annotationActions: {\n            handleAnnotationCreate,\n            handleAnnotationDelete,\n            handleAnnotationEdit,\n            handleAnnotationStatusChange,\n        },\n        repliesActions: {\n            handleReplyCreate,\n            handleReplyEdit,\n            handleReplyDelete,\n        },\n    };\n};\n\nexport default useAnnotationThread;\n"],"file":"useAnnotationThread.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "16.1.0-beta.32",
+    "version": "16.1.0-beta.33",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread.scss

@@ -6,6 +6,10 @@
 
     .bcs-ActivityThread {
         box-shadow: none;
+
+        &:hover {
+            background: none;
+        }
     }
 
     .bcs-ActivityThread-content {

package/src/elements/content-sidebar/activity-feed/annotation-thread/__mocks__/useAnnotationThread.js

@@ -3,14 +3,11 @@ import { annotation as mockAnnotation } from '../../../../../__mocks__/annotatio
 export default () => ({
     annotation: mockAnnotation,
     annotationActions: {
+        handleCreate: jest.fn(),
         handleDelete: jest.fn(),
         handleEdit: jest.fn(),
         handleResolve: jest.fn(),
     },
-    annotationEvents: {
-        handleAnnotationCreateStart: jest.fn(),
-        handleAnnotationCreateEnd: jest.fn(),
-    },
     error: {},
     isLoading: false,
     replies: [],

package/src/elements/content-sidebar/activity-feed/annotation-thread/__tests__/AnnotationThreadCreate.test.js

@@ -50,7 +50,7 @@ describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThr
         expect(getByTestId('annotation-create')).toHaveClass('is-pending');
     });
 
-    test('Should handle create', () => {
+    test('Should call onFormSubmit on create', () => {
         const onFormSubmit = jest.fn();
 
         const { getByText } = getWrapper({ onFormSubmit });
@@ -60,7 +60,7 @@ describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThr
         expect(onFormSubmit).toBeCalledWith('example message');
     });
 
-    test('Should call handleCancel on cancel', () => {
+    test('Should call onFormCancel on cancel', () => {
         const onFormCancel = jest.fn();
 
         const { getByText } = getWrapper({ onFormCancel });

package/src/elements/content-sidebar/activity-feed/annotation-thread/__tests__/useAnnotationThread.test.js

@@ -18,6 +18,7 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotationThread', () =>
     const mockUseAnnotatorEventsResult = {
         emitAddAnnotationEndEvent: jest.fn(),
         emitAddAnnotationStartEvent: jest.fn(),
+        emitAnnotationActiveChangeEvent: jest.fn(),
         emitDeleteAnnotationEndEvent: jest.fn(),
         emitDeleteAnnotationStartEvent: jest.fn(),
         emitUpdateAnnotationEndEvent: jest.fn(),
@@ -40,16 +41,19 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotationThread', () =>
     const filePermissions = { can_annotate: true, can_view_annotations: true };
     const errorCallback = jest.fn();
 
+    const getFileProps = props => ({
+        id: 'fileId',
+        file_version: { id: '123' },
+        permissions: filePermissions,
+        ...props,
+    });
+
     const getHook = props =>
         renderHook(() =>
             useAnnotationThread({
                 api: {},
                 currentUser: {},
-                file: {
-                    id: 'fileId',
-                    file_version: { id: '123' },
-                    permissions: filePermissions,
-                },
+                file: getFileProps(),
                 annotationId: annotation.id,
                 errorCallback,
                 eventEmitter: {},
@@ -77,20 +81,85 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotationThread', () =>
         expect(result.current.replies).toEqual([]);
     });
 
-    test('should return correct values after fetch', () => {
+    test('should return correct values after fetch and call emitAnnotationActiveChangeEvent', () => {
         const { replies, ...normalizedAnnotation } = annotation;
         const mockHandleFetch = jest.fn().mockImplementation(({ successCallback }) => successCallback(annotation));
         useAnnotationAPI.mockImplementation(() => ({
             ...mockUseAnnotationAPIResult,
             handleFetch: mockHandleFetch,
         }));
+        const fileVersionId = '456';
+        const file = getFileProps({ file_version: { id: fileVersionId } });
 
-        const { result } = getHook();
+        const { result } = getHook({ file });
 
         expect(result.current.annotation).toEqual(normalizedAnnotation);
         expect(result.current.isLoading).toEqual(false);
         expect(result.current.error).toEqual(undefined);
         expect(result.current.replies).toEqual(replies);
+        expect(mockUseAnnotatorEventsResult.emitAnnotationActiveChangeEvent).toBeCalledWith(
+            annotation.id,
+            fileVersionId,
+        );
+    });
+
+    describe('handleAnnotationEdit', () => {
+        test('should call handleEdit from useAnnotationAPI and call emitUpdateAnnotationStartEvent + emitUpdateAnnotationEndEvent', () => {
+            const updatedText = 'new text';
+            const updatedAnnotation = {
+                id: annotation.id,
+                description: { message: updatedText },
+            };
+            const mockHandleEdit = jest.fn().mockImplementation(({ successCallback }) => {
+                successCallback(updatedAnnotation);
+            });
+            useAnnotationAPI.mockImplementation(() => ({
+                ...mockUseAnnotationAPIResult,
+                handleEdit: mockHandleEdit,
+            }));
+
+            const { result } = getHook();
+            act(() => {
+                result.current.annotationActions.handleAnnotationEdit(annotation.id, updatedText, { can_edit: true });
+            });
+
+            expect(mockHandleEdit).toBeCalledWith({
+                id: annotation.id,
+                permissions: { can_edit: true },
+                text: updatedText,
+                successCallback: expect.any(Function),
+            });
+            expect(mockUseAnnotatorEventsResult.emitUpdateAnnotationStartEvent).toBeCalledWith(updatedAnnotation);
+            expect(mockUseAnnotatorEventsResult.emitUpdateAnnotationEndEvent).toBeCalledWith(updatedAnnotation);
+        });
+    });
+
+    describe('handleAnnotationDelete', () => {
+        test('should call handleDelete from useAnnotationAPI and call emitDeleteAnnotationStartEvent + emitDeleteAnnotationEndEvent', () => {
+            const mockHandleDelete = jest.fn().mockImplementation(({ successCallback }) => {
+                successCallback();
+            });
+            useAnnotationAPI.mockImplementation(() => ({
+                ...mockUseAnnotationAPIResult,
+                handleDelete: mockHandleDelete,
+            }));
+
+            const { result } = getHook();
+            act(() => {
+                result.current.annotationActions.handleAnnotationDelete({
+                    id: annotation.id,
+                    permissions: { can_delete: true },
+                });
+            });
+
+            expect(mockHandleDelete).toBeCalledWith({
+                id: annotation.id,
+                permissions: { can_delete: true },
+                successCallback: expect.any(Function),
+            });
+            expect(mockUseAnnotatorEventsResult.emitDeleteAnnotationStartEvent).toBeCalledWith(annotation.id);
+            expect(mockUseAnnotatorEventsResult.emitDeleteAnnotationEndEvent).toBeCalledWith(annotation.id);
+        });
     });
 
     describe('useAnnotationAPI', () => {
@@ -143,48 +212,6 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotationThread', () =>
             expect(mockOnAnnotationCreate).toBeCalledWith(createdAnnotation);
         });
 
-        test('should call handleAnnotationEdit with correct params', () => {
-            const mockHandleEdit = jest.fn();
-            useAnnotationAPI.mockImplementation(() => ({
-                ...mockUseAnnotationAPIResult,
-                handleEdit: mockHandleEdit,
-            }));
-
-            const { result } = getHook();
-            act(() => {
-                result.current.annotationActions.handleAnnotationEdit(annotation.id, 'new text', { can_edit: true });
-            });
-
-            expect(mockHandleEdit).toBeCalledWith({
-                id: annotation.id,
-                permissions: { can_edit: true },
-                text: 'new text',
-                successCallback: expect.any(Function),
-            });
-        });
-
-        test('should call handleAnnotationDelete with correct params', () => {
-            const mockHandleDelete = jest.fn();
-            useAnnotationAPI.mockImplementation(() => ({
-                ...mockUseAnnotationAPIResult,
-                handleDelete: mockHandleDelete,
-            }));
-
-            const { result } = getHook();
-            act(() => {
-                result.current.annotationActions.handleAnnotationDelete({
-                    id: annotation.id,
-                    permissions: { can_delete: true },
-                });
-            });
-
-            expect(mockHandleDelete).toBeCalledWith({
-                id: annotation.id,
-                permissions: { can_delete: true },
-                successCallback: expect.any(Function),
-            });
-        });
-
         test('should call handleAnnotationStatusChange with correct params and set annotation state to pending', () => {
             const mockHandleStatusChange = jest.fn();
             useAnnotationAPI.mockImplementation(() => ({

package/src/elements/content-sidebar/activity-feed/annotation-thread/useAnnotationThread.js

@@ -86,7 +86,7 @@ const useAnnotationThread = ({
     const [error, setError] = React.useState<AnnotationThreadError | typeof undefined>();
     const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
-    const { id: fileId, permissions: filePermissions = {} } = file;
+    const { file_version: { id: fileVersionId } = {}, id: fileId, permissions: filePermissions = {} } = file;
 
     const setAnnotationPending = () => {
         if (annotation) {
@@ -100,7 +100,15 @@ const useAnnotationThread = ({
         }
     };
 
-    const { emitAddAnnotationEndEvent, emitAddAnnotationStartEvent } = useAnnotatorEvents({
+    const {
+        emitAddAnnotationEndEvent,
+        emitAddAnnotationStartEvent,
+        emitAnnotationActiveChangeEvent,
+        emitDeleteAnnotationEndEvent,
+        emitDeleteAnnotationStartEvent,
+        emitUpdateAnnotationEndEvent,
+        emitUpdateAnnotationStartEvent,
+    } = useAnnotatorEvents({
         eventEmitter,
         onAnnotationDeleteStart: setAnnotationPending,
         onAnnotationUpdateEnd: handleAnnotationUpdateEnd,
@@ -129,13 +137,6 @@ const useAnnotationThread = ({
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, ...updatedValues }));
     };
 
-    const handleFetchAnnotationSuccess = ({ replies: fetchedReplies, ...normalizedAnnotation }: Annotation) => {
-        setAnnotation({ ...normalizedAnnotation });
-        setReplies(normalizeReplies(fetchedReplies));
-        setError(undefined);
-        setIsLoading(false);
-    };
-
     const annotationErrorCallback = React.useCallback(
         (e: ElementsXhrError, code: string): void => {
             setIsLoading(false);
@@ -158,12 +159,21 @@ const useAnnotationThread = ({
     });
 
     React.useEffect(() => {
-        if (!annotationId || (annotation && annotation.id === annotationId)) {
+        if (!annotationId || isLoading || (annotation && annotation.id === annotationId)) {
             return;
         }
         setIsLoading(true);
-        handleFetch({ id: annotationId, successCallback: handleFetchAnnotationSuccess });
-    }, [annotation, annotationId, handleFetch]);
+        handleFetch({
+            id: annotationId,
+            successCallback: ({ replies: fetchedReplies, ...normalizedAnnotation }: Annotation) => {
+                setAnnotation({ ...normalizedAnnotation });
+                setReplies(normalizeReplies(fetchedReplies));
+                setError(undefined);
+                setIsLoading(false);
+                emitAnnotationActiveChangeEvent(normalizedAnnotation.id, fileVersionId);
+            },
+        });
+    }, [annotation, annotationId, emitAnnotationActiveChangeEvent, fileVersionId, handleFetch, isLoading]);
 
     const { handleReplyCreate, handleReplyEdit, handleReplyDelete } = useRepliesAPI({
         annotationId,
@@ -198,10 +208,13 @@ const useAnnotationThread = ({
 
     const handleAnnotationDelete = ({ id, permissions }: { id: string, permissions: AnnotationPermission }): void => {
         const annotationDeleteSuccessCallback = () => {
-            // will emit event
+            emitDeleteAnnotationEndEvent(id);
         };
 
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
+
+        emitDeleteAnnotationStartEvent(id);
+
         handleDelete({
             id,
             permissions,
@@ -214,11 +227,18 @@ const useAnnotationThread = ({
             ...updatedAnnotation,
             isPending: false,
         });
+
+        emitUpdateAnnotationEndEvent(updatedAnnotation);
     };
 
     const handleAnnotationEdit = (id: string, text: string, permissions: AnnotationPermission): void => {
         setAnnotation(prevAnnotation => ({ ...prevAnnotation, isPending: true }));
 
+        emitUpdateAnnotationStartEvent({
+            id,
+            description: { message: text },
+        });
+
         handleEdit({
             id,
             text,