Initial discussions component.

src/gitlab_service.js

@@ -374,6 +374,18 @@ async function validateCIConfig(content) {
   return response;
 }
 
+async function fetchDiscussions(issuable) {
+  let discussions = [];
+
+  try {
+    discussions = await fetch(`/projects/${issuable.project_id}/issues/${issuable.iid}/discussions?sort=asc`);
+  } catch (e) {
+    vscode.window.showInformationMessage('GitLab Workflow: Failed to fetch discussions for this issuable.');
+  }
+
+  return discussions;
+}
+
 exports.fetchUser = fetchUser;
 exports.fetchIssuesAssignedToMe = fetchIssuesAssignedToMe;
 exports.fetchIssuesCreatedByMe = fetchIssuesCreatedByMe;
@@ -391,3 +403,4 @@ exports.fetchMRIssues = fetchMRIssues;
 exports.createSnippet = createSnippet;
 exports.validateCIConfig = validateCIConfig;
 exports.fetchVersion = fetchVersion;
+exports.fetchDiscussions = fetchDiscussions;

src/webview/src/App.vue

@@ -8,6 +8,7 @@ export default {
       issuable: {
         title: 'Loading...',
       },
+      discussions: [],
     };
   },
   components: {
@@ -24,6 +25,7 @@ export default {
 <template>
   <div id="app">
     <issuable-details :issuable="issuable" />
+    <issuable-discussions :discussions="discussions" />
   </div>
 </template>
 

src/webview/src/components/IssuableDiscussions.vue

+<script>
+const moment = require('moment');
+const md = require('markdown-it')().use(require('markdown-it-checkbox'));
+
+export default {
+  props: {
+    discussions: {
+      type: Array,
+      required: true,
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="issuable-discussions">
+    <ul>
+
+    </ul>
+  </div>
+</template>

src/webview_controller.js

 const fs = require('fs');
 const path = require('path');
 const vscode = require('vscode');
+const gitLabService = require('./gitlab_service');
 
 let context = null;
 
@@ -34,6 +35,12 @@ const getResources = () => {
   return paths;
 }
 
+const getIndexPath = () => {
+  const isDev = !(fs.existsSync(path.join(context.extensionPath, 'src/webview/dist/js/app.js')));
+
+  return isDev ? 'src/webview/public/dev.html' : 'src/webview/public/index.html';
+}
+
 async function create(issuable) {
   const panel = vscode.window.createWebviewPanel('glWorkflow', 'GL Workflow', vscode.ViewColumn.One, {
     enableScripts: true,
@@ -42,11 +49,8 @@ async function create(issuable) {
     ]
   });
 
-  const isDev = !(fs.existsSync(path.join(context.extensionPath, 'src/webview/dist/js/app.js')));
-  const indexPath = isDev ? 'src/webview/public/dev.html' : 'src/webview/public/index.html';
-
   const { appScriptUri, vendorUri, styleUri, devScriptUri } = getResources();
-  let html = fs.readFileSync(path.join(context.extensionPath, indexPath), 'UTF-8');
+  let html = fs.readFileSync(path.join(context.extensionPath, getIndexPath()), 'UTF-8');
 
   html = html.replace(/{{nonce}}/gm, getNonce())
           .replace('{{styleUri}}', styleUri)
@@ -54,8 +58,10 @@ async function create(issuable) {
           .replace('{{appScriptUri}}', appScriptUri)
           .replace('{{devScriptUri}}', devScriptUri);
 
+
+  const discussions = await gitLabService.fetchDiscussions(issuable);
   panel.webview.html = html;
-  panel.webview.postMessage({ issuable });
+  panel.webview.postMessage({ issuable, discussions });
 }
 
 exports.addDeps = addDeps;