fix: OPTIC-354: Comment draft preserved between annotations

src/components/Comments/CommentForm.tsx

@@ -10,7 +10,7 @@ import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
 
 export type CommentFormProps = {
   commentStore: any,
-  value?: string,
+  annotationStore: any,
   onChange?: (value: string) => void,
   inline?: boolean,
   rows?: number,
@@ -19,7 +19,7 @@ export type CommentFormProps = {
 
 export const CommentForm: FC<CommentFormProps> = observer(({
   commentStore,
-  value = '',
+  annotationStore,
   inline = true,
   onChange,
   rows = 1,
@@ -52,7 +52,6 @@ export const CommentForm: FC<CommentFormProps> = observer(({
     commentStore.setCurrentComment(comment || '');
   }, [commentStore]);
 
-
   useEffect(() => {
     if (!isFF(FF_DEV_3873)) {
       commentStore.setAddedCommentThisSession(false);
@@ -72,6 +71,7 @@ export const CommentForm: FC<CommentFormProps> = observer(({
     commentStore.setCommentFormSubmit(() => onSubmit());
   }, [actionRef, commentStore]);
 
+  const value = commentStore.currentComment[annotationStore.selected.id] || '';
 
   return (
     <Block ref={formRef} tag="form" name="comment-form" mod={{ inline }} onSubmit={onSubmit}>

src/components/Comments/Comments.tsx

@@ -9,7 +9,7 @@ import { FF_DEV_3034, isFF } from '../../utils/feature-flags';
 import './Comments.styl';
 
 
-export const Comments: FC<{ commentStore: any, cacheKey?: string }> = observer(({ commentStore, cacheKey }) => {
+export const Comments: FC<{ annotationStore: any, commentStore: any, cacheKey?: string }> = observer(({ annotationStore, commentStore, cacheKey }) => {
   const mounted = useMounted();
 
   const loadComments = async () => {
@@ -45,7 +45,7 @@ export const Comments: FC<{ commentStore: any, cacheKey?: string }> = observer((
 
   return (
     <Block name="comments">
-      <CommentForm commentStore={commentStore} inline />
+      <CommentForm commentStore={commentStore} annotationStore={annotationStore} inline />
       <CommentsList commentStore={commentStore} />
     </Block>
   );

src/components/SidePanels/DetailsPanel/DetailsPanel.tsx

@@ -61,7 +61,7 @@ const CommentsTab: FC<any> = inject('store')(observer(({ store }) => {
         <Block name="comments-panel">
           <Elem name="section-tab">
             <Elem name="section-content">
-              <CommentsComponent commentStore={store.commentStore} cacheKey={`task.${store.task.id}`} />
+              <CommentsComponent annotationStore={store.annotationStore} commentStore={store.commentStore} cacheKey={`task.${store.task.id}`} />
             </Elem>
           </Elem>
         </Block>
@@ -169,6 +169,7 @@ const GeneralPanel: FC<any> = inject('store')(observer(({ store, currentEntity }
           </Elem>
           <Elem name="section-content">
             <CommentsComponent
+              annotationStore={store.annotationStore} 
               commentStore={store.commentStore}
               cacheKey={`task.${store.task.id}`}
             />

src/stores/Comment/CommentStore.js

@@ -13,7 +13,7 @@ export const CommentStore = types
   .volatile(() => ({
     addedCommentThisSession: false,
     commentFormSubmit: () => {},
-    currentComment: '',
+    currentComment: {},
     inputRef: {},
     tooltipMessage: '',
   }))
@@ -75,7 +75,7 @@ export const CommentStore = types
     }
 
     function setCurrentComment(comment) {
-      self.currentComment = comment;
+      self.currentComment = {...self.currentComment, [self.annotation.id]: comment};
     }
 
     function setCommentFormSubmit(submitCallback) {