Fix functionality to add comments

- Improve the UX around editing comments
- Add changelog

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

@@ -107,7 +107,7 @@ export default {
         .get(this.vulnerability.discussionsUrl)
         .then(({ data, headers: { date } }) => {
           this.discussionsDictionary = data.reduce((acc, discussion) => {
-            acc[discussion.id] = discussion;
+            acc[discussion.id] = convertObjectPropsToCamelCase(discussion, { deep: true });
             return acc;
           }, {});
 

ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue

 <script>
-import { GlButton, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlButton, GlSafeHtmlDirective as SafeHtml, GlLoadingIcon } from '@gitlab/ui';
 import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __, s__ } from '~/locale';
@@ -9,6 +9,7 @@ import HistoryCommentEditor from './history_comment_editor.vue';
 export default {
   components: {
     GlButton,
+    GlLoadingIcon,
     EventItem,
     HistoryCommentEditor,
   },
@@ -61,6 +62,20 @@ export default {
     initialComment() {
       return this.comment && this.comment.note;
     },
+    canEditComment() {
+      return this.comment.currentUser?.canEdit;
+    },
+    noteHtml() {
+      return this.isSavingComment ? undefined : this.comment.noteHtml;
+    },
+  },
+
+  watch: {
+    'comment.updatedAt': {
+      handler() {
+        this.isSavingComment = false;
+      },
+    },
   },
 
   methods: {
@@ -96,9 +111,6 @@ export default {
               'VulnerabilityManagement|Something went wrong while trying to save the comment. Please try again later.',
             ),
           );
-        })
-        .finally(() => {
-          this.isSavingComment = false;
         });
     },
     deleteComment() {
@@ -148,15 +160,17 @@ export default {
     v-else-if="comment"
     :id="comment.id"
     :author="comment.author"
-    :created-at="comment.updated_at"
-    :show-action-buttons="comment.current_user.can_edit"
+    :created-at="comment.updatedAt"
+    :show-action-buttons="canEditComment"
     :show-right-slot="isConfirmingDeletion"
     :action-buttons="actionButtons"
     icon-name="comment"
     icon-class="timeline-icon m-0"
     class="m-3"
   >
-    <div v-safe-html="comment.note_html" class="md"></div>
+    <div v-safe-html="noteHtml" class="md">
+      <gl-loading-icon />
+    </div>
 
     <template #right-content>
       <gl-button

ee/changelogs/unreleased/287666-fix-adding-comments.yml

+---
+title: Fix functionality to add comments in the vulnerability details page
+merge_request: 48375
+author:
+type: fixed

ee/spec/frontend/vulnerabilities/history_comment_spec.js

@@ -24,11 +24,11 @@ describe('History Comment', () => {
   const comment = {
     id: 'id',
     note: 'note',
-    note_html: '<p>note</p>',
+    noteHtml: '<p>note</p>',
     author: {},
-    updated_at: new Date().toISOString(),
-    current_user: {
-      can_edit: true,
+    updatedAt: new Date().toISOString(),
+    currentUser: {
+      canEdit: true,
     },
   };
 
@@ -142,8 +142,8 @@ describe('History Comment', () => {
     it('shows the comment with the correct user author and timestamp and the edit/delete buttons', () => {
       expectExistingCommentView();
       expect(eventItem().props('author')).toBe(comment.author);
-      expect(eventItem().props('createdAt')).toBe(comment.updated_at);
-      expect(eventItem().element.innerHTML).toContain(comment.note_html);
+      expect(eventItem().props('createdAt')).toBe(comment.updatedAt);
+      expect(eventItem().element.innerHTML).toContain(comment.noteHtml);
     });
 
     it('shows the comment editor when the edit button is clicked', () => {
@@ -161,7 +161,7 @@ describe('History Comment', () => {
         })
         .then(() => {
           expectExistingCommentView();
-          expect(eventItem().element.innerHTML).toContain(comment.note_html);
+          expect(eventItem().element.innerHTML).toContain(comment.noteHtml);
         });
     });
 
@@ -182,7 +182,7 @@ describe('History Comment', () => {
         })
         .then(() => {
           expectExistingCommentView();
-          expect(eventItem().element.innerHTML).toContain(comment.note_html);
+          expect(eventItem().element.innerHTML).toContain(comment.noteHtml);
         });
     });
 
@@ -262,7 +262,7 @@ describe('History Comment', () => {
 
   describe('no permission to edit existing comment', () => {
     it('does not show the edit/delete buttons if the current user has no edit permissions', () => {
-      createWrapper({ ...comment, current_user: { can_edit: false } });
+      createWrapper({ ...comment, currentUser: { canEdit: false } });
 
       expect(editButton().exists()).toBe(false);
       expect(deleteButton().exists()).toBe(false);