From e1f643e5ac32f68189c640ed18cf86408d247886 Mon Sep 17 00:00:00 2001
From: Fatih Acet <acetfatih@gmail.com>
Date: Thu, 3 Jan 2019 00:13:11 +0100
Subject: [PATCH] Comment form component.

---
 .vscode/extensions.json                    |  5 +--
 src/git_service.js                         |  4 +--
 src/search_input.js                        |  4 +--
 src/webview/src/App.vue                    |  3 ++
 src/webview/src/components/CommentForm.vue | 37 ++++++++++++++++++++++
 src/webview/src/components/Discussion.vue  |  6 +++-
 6 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/webview/src/components/CommentForm.vue

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 77c92e8..be2865a 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,8 +1,5 @@
 {
   // 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"]
 }
diff --git a/src/git_service.js b/src/git_service.js
index aba4b6a..3a94041 100644
--- a/src/git_service.js
+++ b/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;
   }
diff --git a/src/search_input.js b/src/search_input.js
index 75d8847..e1ab715 100644
--- a/src/search_input.js
+++ b/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('&')}` : '';
diff --git a/src/webview/src/App.vue b/src/webview/src/App.vue
index ea72921..da81104 100644
--- a/src/webview/src/App.vue
+++ b/src/webview/src/App.vue
@@ -1,6 +1,7 @@
 <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>
diff --git a/src/webview/src/components/CommentForm.vue b/src/webview/src/components/CommentForm.vue
new file mode 100644
index 0000000..58c28bf
--- /dev/null
+++ b/src/webview/src/components/CommentForm.vue
@@ -0,0 +1,37 @@
+<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>
diff --git a/src/webview/src/components/Discussion.vue b/src/webview/src/components/Discussion.vue
index de053b3..5b3aa6a 100644
--- a/src/webview/src/components/Discussion.vue
+++ b/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 }}
-- 
GitLab