Comment form component.

.vscode/extensions.json

 {
   // See https://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "editorconfig.editorconfig"
-  ]
+  "recommendations": ["dbaeumer.vscode-eslint", "editorconfig.editorconfig"]
 }

src/git_service.js

@@ -66,7 +66,7 @@ const getInstancePath = () => {
 };
 
 const escapeForRegExp = str => {
-  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
 };
 
 const parseGitRemote = remote => {
@@ -89,7 +89,7 @@ const parseGitRemote = remote => {
     return null;
   }
 
-  const match = pathname.match(pathRegExp + '\/(.+)\/(.*?)(?:.git)?$');
+  const match = pathname.match(pathRegExp + '/(.+)/(.*?)(?:.git)?$');
   if (!match) {
     return null;
   }

src/search_input.js

@@ -79,8 +79,8 @@ const parseQuery = (query, noteableType) => {
   }
 
   // URL encode keys and values and return a new array to build actual query string.
-  const queryParams = Object.keys(params).map(
-    k => (params[k] ? `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}` : ''),
+  const queryParams = Object.keys(params).map(k =>
+    params[k] ? `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}` : '',
   );
 
   return queryParams.length ? `?${queryParams.join('&')}` : '';

src/webview/src/App.vue

 <script>
 import IssuableDetails from './components/IssuableDetails';
 import IssuableDiscussions from './components/IssuableDiscussions';
+import CommentForm from './components/CommentForm';
 
 const vscode = acquireVsCodeApi();
 
@@ -16,6 +17,7 @@ export default {
   components: {
     IssuableDetails,
     IssuableDiscussions,
+    CommentForm,
   },
   computed: {
     notesById() {
@@ -63,6 +65,7 @@ export default {
     <template v-else>
       <issuable-details :issuable="issuable" />
       <issuable-discussions :discussions="discussions" />
+      <comment-form :issuable="issuable" />
     </template>
   </div>
 </template>

src/webview/src/components/CommentForm.vue

+<script>
+export default {
+  props: {
+    issuable: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      note: '',
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="main-comment-form">
+    <textarea v-model="note"></textarea>
+    <button>Comment</button>
+  </div>
+</template>
+
+<style lang="scss">
+.main-comment-form {
+  margin: 20px 0 30px 0;
+
+  textarea {
+    width: 100%;
+    height: 140px;
+    border-radius: 4px;
+    padding: 16px;
+    font-size: 13px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/webview/src/components/Discussion.vue

@@ -53,7 +53,11 @@ export default {
     class="discussion"
   >
     <note :noteable="initialDiscussion" />
-    <div @click="toggleReplies" class="toggle-widget">
+    <div
+      v-if="hasReplies"
+      @click="toggleReplies"
+      class="toggle-widget"
+    >
       <span
         class="chevron"
         v-html="toggleRepliesIcon"></span> {{ toggleRepliesText }}