Implement saveNote feature

src/gitlab_service.js

@@ -414,6 +414,24 @@ async function renderMarkdown(markdown) {
   return rendered.html;
 }
 
+async function saveNote({ issuable, note }) {
+  let response = {};
+
+  try {
+    const projectId = issuable.project_id;
+    const issueId = issuable.iid;
+    response = await fetch(`/projects/${projectId}/issues/${issueId}/notes`, 'POST', {
+      id: projectId,
+      issue_iid: issueId,
+      body: note,
+    });
+  } catch (e) {
+    response = { success: false };
+  }
+
+  return response;
+}
+
 exports.fetchUser = fetchUser;
 exports.fetchIssuesAssignedToMe = fetchIssuesAssignedToMe;
 exports.fetchIssuesCreatedByMe = fetchIssuesCreatedByMe;
@@ -433,3 +451,4 @@ exports.validateCIConfig = validateCIConfig;
 exports.fetchVersion = fetchVersion;
 exports.fetchDiscussions = fetchDiscussions;
 exports.renderMarkdown = renderMarkdown;
+exports.saveNote = saveNote;

src/webview/src/components/CommentForm.vue

@@ -9,15 +9,48 @@ export default {
   data() {
     return {
       note: '',
+      isSaving: false,
+      isFailed: false,
+      command: 'saveNote',
     };
   },
+  computed: {
+    buttonTitle() {
+      return this.isSaving ? 'Saving...' : 'Comment';
+    },
+  },
+  methods: {
+    addComment() {
+      const { issuable, note, command } = this;
+
+      this.isSaving = true;
+      this.isFailed = false;
+      window.vsCodeApi.postMessage({ command, issuable, note });
+    },
+  },
+  mounted() {
+    window.addEventListener('message', event => {
+      if (event.data.type === 'noteSaved') {
+        if (event.data.status !== false) {
+          this.note = '';
+        } else {
+          this.isFailed = true;
+        }
+
+        this.isSaving = false;
+      }
+    });
+  },
 };
 </script>
 
 <template>
   <div class="main-comment-form">
-    <textarea v-model="note"></textarea>
-    <button>Comment</button>
+    <textarea v-model="note" placeholder="Write a comment..."></textarea>
+    <button @click="addComment" :disabled="isSaving || !note.length">
+      {{ buttonTitle }}
+    </button>
+    <span v-if="isFailed">Failed to save your comment. Please try again.</span>
   </div>
 </template>
 

src/webview/src/components/IssuableDetails.vue

@@ -29,7 +29,8 @@ export default {
       }
 
       const description = this.issuable.description || '';
-      const path = `${this.issuable.web_url.split('/issues/')[0]}/uploads/`;
+      const webUrl = this.issuable.web_url || '';
+      const path = `${webUrl.split('/issues/')[0]}/uploads/`;
       const normalized = description.replace(/\/uploads/gm, path);
 
       return md.render(normalized);

src/webview_controller.js

@@ -81,6 +81,21 @@ async function handleCreate(panel, issuable) {
         markdown: rendered,
       });
     }
+
+    if (message.command === 'saveNote') {
+      const response = await gitLabService.saveNote({
+        issuable: message.issuable,
+        note: message.note,
+      });
+
+      if (response.status !== false) {
+        const newDiscussions = await gitLabService.fetchDiscussions(issuable);
+        panel.webview.postMessage({ type: 'issuableFetch', issuable, discussions: newDiscussions });
+        panel.webview.postMessage({ type: 'noteSaved' });
+      } else {
+        panel.webview.postMessage({ type: 'noteSaved', status: false });
+      }
+    }
   });
 }