From 637f115657c4195e5bff68a603f90142de3b1527 Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 11:11:03 +0200
Subject: [PATCH 01/10] added functionality to attach comment to issue

---
 go.mod                                        |   2 +
 server/api.go                                 | 117 ++++++++
 server/utils.go                               |  10 +
 webapp/package-lock.json                      | 264 ++++++++++++++++--
 webapp/package.json                           |   2 +
 webapp/src/action_types/index.js              |   3 +
 webapp/src/actions/index.js                   |  38 +++
 webapp/src/client/client.js                   |   8 +
 webapp/src/components/form_button.jsx         |  63 +++++
 .../github_issue_selector.jsx                 | 159 +++++++++++
 .../components/github_issue_selector/index.js |  10 +
 webapp/src/components/input.jsx               | 160 +++++++++++
 .../attach_comment_to_issue.jsx               | 169 +++++++++++
 .../modals/attach_comment_to_issue/index.js   |  29 ++
 .../attach_comment_to_issue.jsx               |  57 ++++
 .../attach_comment_to_issue/index.js          |  31 ++
 webapp/src/components/validator.js            |  23 ++
 webapp/src/index.js                           |   5 +
 webapp/src/reducers/index.js                  |  24 ++
 webapp/src/selectors/index.js                 |  46 +++
 webapp/src/utils/styles.js                    | 102 +++++++
 21 files changed, 1295 insertions(+), 27 deletions(-)
 create mode 100644 webapp/src/components/form_button.jsx
 create mode 100644 webapp/src/components/github_issue_selector/github_issue_selector.jsx
 create mode 100644 webapp/src/components/github_issue_selector/index.js
 create mode 100644 webapp/src/components/input.jsx
 create mode 100644 webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
 create mode 100644 webapp/src/components/modals/attach_comment_to_issue/index.js
 create mode 100644 webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
 create mode 100644 webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
 create mode 100644 webapp/src/components/validator.js
 create mode 100644 webapp/src/selectors/index.js
 create mode 100644 webapp/src/utils/styles.js

diff --git a/go.mod b/go.mod
index fb9d16144..dc2caa78a 100644
--- a/go.mod
+++ b/go.mod
@@ -32,3 +32,5 @@ require (
 
 // Workaround for https://github.com/golang/go/issues/30831 and fallout.
 replace github.com/golang/lint => github.com/golang/lint v0.0.0-20190227174305-8f45f776aaf1
+
+replace git.apache.org/thrift.git => github.com/apache/thrift v0.12.0
diff --git a/server/api.go b/server/api.go
index 869c8976c..95a1cdc07 100644
--- a/server/api.go
+++ b/server/api.go
@@ -58,8 +58,12 @@ func (p *Plugin) ServeHTTP(c *plugin.Context, w http.ResponseWriter, r *http.Req
 		p.getReviews(w, r)
 	case "/api/v1/yourprs":
 		p.getYourPrs(w, r)
+	case "/api/v1/searchissues":
+		p.searchIssues(w, r)
 	case "/api/v1/yourassignments":
 		p.getYourAssignments(w, r)
+	case "/api/v1/createissuecomment":
+		p.createIssueComment(w, r)
 	case "/api/v1/mentions":
 		p.getMentions(w, r)
 	case "/api/v1/unreads":
@@ -225,6 +229,17 @@ type ConnectedResponse struct {
 	Settings          *UserSettings `json:"settings"`
 }
 
+type CreateIssueCommentRequest struct {
+	Owner   string `json:"owner"`
+	Repo    string `json:"repo"`
+	Number  int    `json:"number"`
+	Comment string `json:"comment"`
+}
+
+type SearchIssueRequest struct {
+	SearchTerm string `json:"search_term"`
+}
+
 type GitHubUserRequest struct {
 	UserID string `json:"user_id"`
 }
@@ -480,6 +495,108 @@ func (p *Plugin) getYourPrs(w http.ResponseWriter, r *http.Request) {
 	w.Write(resp)
 }
 
+func (p *Plugin) searchIssues(w http.ResponseWriter, r *http.Request) {
+	config := p.getConfiguration()
+
+	userID := r.Header.Get("Mattermost-User-ID")
+	if userID == "" {
+		http.Error(w, "Not authorized", http.StatusUnauthorized)
+		return
+	}
+
+	ctx := context.Background()
+
+	var githubClient *github.Client
+	username := ""
+
+	req := &SearchIssueRequest{}
+	dec := json.NewDecoder(r.Body)
+	if err := dec.Decode(&req); err != nil {
+		if err != nil {
+			mlog.Error("Error decoding JSON body", mlog.Err(err))
+		}
+		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a JSON object with search_term key.", StatusCode: http.StatusBadRequest})
+		return
+	}
+
+	if info, err := p.getGitHubUserInfo(userID); err != nil {
+		writeAPIError(w, err)
+		return
+	} else {
+		githubClient = p.githubConnect(*info.Token)
+		username = info.GitHubUsername
+	}
+
+	result, _, err := githubClient.Search.Issues(ctx, getIssuesSearchQuery(username, config.GitHubOrg, req.SearchTerm), &github.SearchOptions{})
+	if err != nil {
+		mlog.Error(err.Error())
+	}
+
+	resp, _ := json.Marshal(result.Issues)
+	w.Write(resp)
+}
+
+func (p *Plugin) createIssueComment(w http.ResponseWriter, r *http.Request) {
+	userID := r.Header.Get("Mattermost-User-ID")
+	if userID == "" {
+		http.Error(w, "Not authorized", http.StatusUnauthorized)
+		return
+	}
+
+	req := &CreateIssueCommentRequest{}
+	dec := json.NewDecoder(r.Body)
+	if err := dec.Decode(&req); err != nil {
+		if err != nil {
+			mlog.Error("Error decoding JSON body", mlog.Err(err))
+		}
+		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a JSON object.", StatusCode: http.StatusBadRequest})
+		return
+	}
+
+	if req.Owner == "" {
+		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a valid repo owner.", StatusCode: http.StatusBadRequest})
+		return
+	}
+
+	if req.Repo == "" {
+		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a valid repo.", StatusCode: http.StatusBadRequest})
+		return
+	}
+
+	if req.Number == 0 {
+		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a valid issue number.", StatusCode: http.StatusBadRequest})
+		return
+	}
+
+	if req.Comment == "" {
+		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a valid non empty comment.", StatusCode: http.StatusBadRequest})
+		return
+	}
+
+	ctx := context.Background()
+
+	var githubClient *github.Client
+
+	if info, err := p.getGitHubUserInfo(userID); err != nil {
+		writeAPIError(w, err)
+		return
+	} else {
+		githubClient = p.githubConnect(*info.Token)
+	}
+
+	comment := &github.IssueComment{
+		Body: &req.Comment,
+	}
+
+	result, _, err := githubClient.Issues.CreateComment(ctx, req.Owner, req.Repo, req.Number, comment)
+	if err != nil {
+		mlog.Error(err.Error())
+	}
+
+	resp, _ := json.Marshal(result)
+	w.Write(resp)
+}
+
 func (p *Plugin) getYourAssignments(w http.ResponseWriter, r *http.Request) {
 	config := p.getConfiguration()
 
diff --git a/server/utils.go b/server/utils.go
index 1b7d59b29..20249e007 100644
--- a/server/utils.go
+++ b/server/utils.go
@@ -29,6 +29,16 @@ func getYourAssigneeSearchQuery(username, org string) string {
 	return buildSearchQuery("is:open assignee:%v archived:false %v", username, org)
 }
 
+func getIssuesSearchQuery(username, org, searchTerm string) string {
+	query := "is:open is:issue assignee:%v archived:false %v %v"
+	orgField := ""
+	if len(org) != 0 {
+		orgField = fmt.Sprintf("org:%v", org)
+	}
+
+	return fmt.Sprintf(query, username, orgField, searchTerm)
+}
+
 func buildSearchQuery(query, username, org string) string {
 	orgField := ""
 	if len(org) != 0 {
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 0a4661009..8226bc4c3 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -208,7 +208,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
       "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -1090,7 +1089,6 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz",
       "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==",
-      "dev": true,
       "requires": {
         "esutils": "^2.0.2",
         "lodash": "^4.17.11",
@@ -1100,11 +1098,101 @@
         "to-fast-properties": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "10.0.17",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.17.tgz",
+      "integrity": "sha512-442/miwbuwIDfSzfMqZNxuzxSEbskcz/bZ86QBYzEjFrr/oq9w+y5kJY1BHbGhDtr91GO232PZ5NN9XYMwr/Qg==",
+      "requires": {
+        "@emotion/sheet": "0.9.3",
+        "@emotion/stylis": "0.8.4",
+        "@emotion/utils": "0.11.2",
+        "@emotion/weak-memoize": "0.2.3"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.17",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.17.tgz",
+      "integrity": "sha512-gykyjjr0sxzVuZBVTVK4dUmYsorc2qLhdYgSiOVK+m7WXgcYTKZevGWZ7TLAgTZvMelCTvhNq8xnf8FR1IdTbg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.17",
+        "@emotion/css": "^10.0.14",
+        "@emotion/serialize": "^0.11.10",
+        "@emotion/sheet": "0.9.3",
+        "@emotion/utils": "0.11.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.6.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.0.tgz",
+          "integrity": "sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
         }
       }
     },
+    "@emotion/css": {
+      "version": "10.0.14",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.14.tgz",
+      "integrity": "sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==",
+      "requires": {
+        "@emotion/serialize": "^0.11.8",
+        "@emotion/utils": "0.11.2",
+        "babel-plugin-emotion": "^10.0.14"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.2.tgz",
+      "integrity": "sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.2.tgz",
+      "integrity": "sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.10.tgz",
+      "integrity": "sha512-04AB+wU00vv9jLgkWn13c/GJg2yXp3w7ZR3Q1O6mBSE6mbUmYeNX3OpBhfp//6r47lFyY0hBJJue+bA30iokHQ==",
+      "requires": {
+        "@emotion/hash": "0.7.2",
+        "@emotion/memoize": "0.7.2",
+        "@emotion/unitless": "0.7.4",
+        "@emotion/utils": "0.11.2",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz",
+      "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz",
+      "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
+      "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz",
+      "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.3.tgz",
+      "integrity": "sha512-zVgvPwGK7c1aVdUVc9Qv7SqepOGRDrqCw7KZPSZziWGxSlbII3gmvGLPzLX4d0n0BMbamBacUrN22zOMyFFEkQ=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -1383,7 +1471,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -1521,6 +1608,38 @@
         "pify": "^4.0.1"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.17",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.17.tgz",
+      "integrity": "sha512-KNuBadotqYWpQexHhHOu7M9EV1j2c+Oh/JJqBfEQDusD6mnORsCZKHkl+xYwK82CPQ/23wRrsBIEYnKjtbMQJw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.7.2",
+        "@emotion/memoize": "0.7.2",
+        "@emotion/serialize": "^0.11.10",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz",
+      "integrity": "sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "cosmiconfig": "^5.2.0",
+        "resolve": "^1.10.0"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -1828,6 +1947,29 @@
         "unset-value": "^1.0.0"
       }
     },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "requires": {
+        "callsites": "^2.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+        }
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2067,7 +2209,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
       "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -2133,6 +2274,42 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "requires": {
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
+      },
+      "dependencies": {
+        "import-fresh": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+          "requires": {
+            "caller-path": "^2.0.0",
+            "resolve-from": "^3.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -2227,6 +2404,11 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
+      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg=="
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -2239,6 +2421,11 @@
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
       "dev": true
     },
+    "debounce-promise": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
+      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2472,7 +2659,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -2505,8 +2691,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
       "version": "5.16.0",
@@ -2822,8 +3007,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.0.1",
@@ -2852,8 +3036,7 @@
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-      "dev": true
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
     },
     "events": {
       "version": "3.0.0",
@@ -3106,8 +3289,7 @@
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
     },
     "find-up": {
       "version": "3.0.0",
@@ -4214,8 +4396,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "is-binary-path": {
       "version": "1.0.1",
@@ -4283,6 +4464,11 @@
         }
       }
     },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -4428,7 +4614,6 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -4443,8 +4628,7 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -4703,6 +4887,11 @@
         }
       }
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
@@ -5291,8 +5480,7 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
     },
     "path-type": {
       "version": "2.0.0",
@@ -5669,6 +5857,14 @@
         "raf": "^3.1.0"
       }
     },
+    "react-input-autosize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
+      "integrity": "sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -5713,6 +5909,23 @@
         "react-is": "^16.8.6"
       }
     },
+    "react-select": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.0.4.tgz",
+      "integrity": "sha512-fbVISKa/lSUlLsltuatfUiKcWCNvdLXxFFyrzVQCBUsjxJZH/m7UMPdw/ywmRixAmwXAP++MdbNNZypOsiDEfA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "classnames": "^2.2.5",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "raf": "^3.4.0",
+        "react-input-autosize": "^2.2.1",
+        "react-transition-group": "^2.2.1"
+      }
+    },
     "react-transition-group": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -5938,7 +6151,6 @@
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz",
       "integrity": "sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==",
-      "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -6315,8 +6527,7 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "source-map-resolve": {
       "version": "0.5.2",
@@ -6381,8 +6592,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "ssri": {
       "version": "6.0.1",
diff --git a/webapp/package.json b/webapp/package.json
index 6ed3ba610..15dea28b7 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -9,12 +9,14 @@
     "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx . --quiet --fix"
   },
   "dependencies": {
+    "debounce-promise": "3.1.2",
     "mattermost-redux": "5.11.0",
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-bootstrap": "0.32.4",
     "react-custom-scrollbars": "^4.2.1",
     "react-redux": "7.0.3",
+    "react-select": "3.0.4",
     "redux": "4.0.1",
     "superagent": "5.0.5"
   },
diff --git a/webapp/src/action_types/index.js b/webapp/src/action_types/index.js
index 9b567b775..65cf73343 100644
--- a/webapp/src/action_types/index.js
+++ b/webapp/src/action_types/index.js
@@ -10,4 +10,7 @@ export default {
     RECEIVED_GITHUB_USER: pluginId + '_received_github_user',
     RECEIVED_SHOW_RHS_ACTION: pluginId + '_received_rhs_action',
     UPDATE_RHS_STATE: pluginId + '_update_rhs_state',
+    CLOSE_ATTACH_COMMENT_TO_ISSUE_MODAL: pluginId + '_close_attach_modal',
+    OPEN_ATTACH_COMMENT_TO_ISSUE_MODAL: pluginId + '_open_attach_modal',
+    RECEIVED_ATTACH_COMMENT_RESULT: pluginId + '_received_attach_comment',
 };
diff --git a/webapp/src/actions/index.js b/webapp/src/actions/index.js
index ea7620bc8..1009f07ba 100644
--- a/webapp/src/actions/index.js
+++ b/webapp/src/actions/index.js
@@ -210,3 +210,41 @@ export function updateRhsState(rhsState) {
         state: rhsState,
     };
 }
+
+export function openAttachCommentToIssueModal(postId) {
+    return {
+        type: ActionTypes.OPEN_ATTACH_COMMENT_TO_ISSUE_MODAL,
+        data: {
+            postId,
+        },
+    };
+}
+
+export function closeAttachCommentToIssueModal() {
+    return {
+        type: ActionTypes.CLOSE_ATTACH_COMMENT_TO_ISSUE_MODAL,
+    };
+}
+
+export function attachCommentToIssue(payload) {
+    return async (dispatch, getState) => {
+        let data;
+        try {
+            data = await Client.attachCommentToIssue(payload);
+        } catch (error) {
+            return {error};
+        }
+
+        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        if (!connected) {
+            return {error: data};
+        }
+
+        dispatch({
+            type: ActionTypes.RECEIVED_ATTACH_COMMENT_RESULT,
+            data,
+        });
+
+        return {data};
+    };
+}
diff --git a/webapp/src/client/client.js b/webapp/src/client/client.js
index 2a3f13a77..743615c2f 100644
--- a/webapp/src/client/client.js
+++ b/webapp/src/client/client.js
@@ -33,6 +33,14 @@ export default class Client {
         return this.doPost(`${this.url}/user`, {user_id: userID});
     }
 
+    searchIssues = async (searchTerm) => {
+        return this.doPost(`${this.url}/searchissues`, {searchTerm});
+    }
+
+    attachCommentToIssue = async (payload) => {
+        return this.doPost(`${this.url}/createissuecomment`, payload);
+    }
+
     doGet = async (url, body, headers = {}) => {
         headers['X-Requested-With'] = 'XMLHttpRequest';
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
diff --git a/webapp/src/components/form_button.jsx b/webapp/src/components/form_button.jsx
new file mode 100644
index 000000000..d993c27ce
--- /dev/null
+++ b/webapp/src/components/form_button.jsx
@@ -0,0 +1,63 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+export default class FormButton extends PureComponent {
+    static propTypes = {
+        executing: PropTypes.bool,
+        disabled: PropTypes.bool,
+        executingMessage: PropTypes.node,
+        defaultMessage: PropTypes.node,
+        btnClass: PropTypes.string,
+        extraClasses: PropTypes.string,
+        saving: PropTypes.bool,
+        savingMessage: PropTypes.string,
+        type: PropTypes.string,
+    };
+
+    static defaultProps = {
+        disabled: false,
+        savingMessage: 'Creating',
+        defaultMessage: 'Create',
+        btnClass: 'btn-primary',
+        extraClasses: '',
+    };
+
+    render() {
+        const {saving, disabled, savingMessage, defaultMessage, btnClass, extraClasses, ...props} = this.props;
+
+        let contents;
+        if (saving) {
+            contents = (
+                <span>
+                    <span
+                        className='fa fa-spinner icon--rotate'
+                        title={'Loading Icon'}
+                    />
+                    {savingMessage}
+                </span>
+            );
+        } else {
+            contents = defaultMessage;
+        }
+
+        let className = 'save-button btn ' + btnClass;
+
+        if (extraClasses) {
+            className += ' ' + extraClasses;
+        }
+
+        return (
+            <button
+                id='saveSetting'
+                className={className}
+                disabled={disabled}
+                {...props}
+            >
+                {contents}
+            </button>
+        );
+    }
+}
diff --git a/webapp/src/components/github_issue_selector/github_issue_selector.jsx b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
new file mode 100644
index 000000000..ff394d97c
--- /dev/null
+++ b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
@@ -0,0 +1,159 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import debounce from 'debounce-promise';
+import AsyncSelect from 'react-select/async';
+
+import {getStyleForReactSelect} from 'utils/styles';
+import {searchIssues} from 'client';
+
+const searchDebounceDelay = 400;
+
+export default class JiraIssueSelector extends Component {
+    static propTypes = {
+        id: PropTypes.string,
+        required: PropTypes.bool,
+        theme: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
+        error: PropTypes.string,
+        value: PropTypes.object,
+        addValidate: PropTypes.func.isRequired,
+        removeValidate: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {invalid: false};
+    }
+
+    componentDidMount() {
+        if (this.props.addValidate && this.props.id) {
+            this.props.addValidate(this.props.id, this.isValid);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.removeValidate && this.props.id) {
+            this.props.removeValidate(this.props.id);
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.invalid && this.props.value !== prevProps.value) {
+            this.setState({invalid: false}); //eslint-disable-line react/no-did-update-set-state
+        }
+    }
+
+    handleIssueSearchTermChange = (inputValue) => {
+        return this.debouncedSearchIssues(inputValue);
+    };
+
+    searchIssues = (text) => {
+        const textEncoded = encodeURIComponent(text.trim().replace(/"/g, '\\"'));
+
+        return searchIssues(textEncoded).then((data) => {
+            console.log(data); //eslint-disable-line
+            return data;
+        }).catch((e) => {
+            this.setState({error: e});
+        });
+    };
+
+    debouncedSearchIssues = debounce(this.searchIssues, searchDebounceDelay);
+
+    onChange = (e) => {
+        const value = e ? e.value : '';
+        this.props.onChange(value);
+    }
+
+    isValid = () => {
+        if (!this.props.required) {
+            return true;
+        }
+
+        const valid = this.props.value && this.props.value.toString().length !== 0;
+        this.setState({invalid: !valid});
+        return valid;
+    };
+
+    render = () => {
+        const {error} = this.props;
+        const requiredStar = (
+            <span
+                className={'error-text'}
+                style={{marginLeft: '3px'}}
+            >
+                {'*'}
+            </span>
+        );
+
+        let issueError = null;
+        if (error) {
+            issueError = (
+                <p className='help-text error-text'>
+                    <span>{error}</span>
+                </p>
+            );
+        }
+
+        const serverError = this.state.error;
+        let errComponent;
+        if (this.state.error) {
+            errComponent = (
+                <p className='alert alert-danger'>
+                    <i
+                        className='fa fa-warning'
+                        title='Warning Icon'
+                    />
+                    <span> {serverError.toString()}</span>
+                </p>
+            );
+        }
+
+        const requiredMsg = 'This field is required.';
+        let validationError = null;
+        if (this.props.required && this.state.invalid) {
+            validationError = (
+                <p className='help-text error-text'>
+                    <span>{requiredMsg}</span>
+                </p>
+            );
+        }
+
+        return (
+            <div className={'form-group margin-bottom x3'}>
+                {errComponent}
+                <label
+                    className={'control-label'}
+                    htmlFor={'issue'}
+                >
+                    {'Github Issue'}
+                </label>
+                {this.props.required && requiredStar}
+                <AsyncSelect
+                    name={'issue'}
+                    placeholder={'Search for issues containing text...'}
+                    onChange={this.onChange}
+                    required={true}
+                    disabled={false}
+                    isMulti={false}
+                    isClearable={true}
+                    defaultOptions={true}
+                    loadOptions={this.handleIssueSearchTermChange}
+                    menuPortalTarget={document.body}
+                    menuPlacement='auto'
+                    styles={getStyleForReactSelect(this.props.theme)}
+                />
+                {validationError}
+                {issueError}
+                <div className={'help-text'}>
+                    {'Returns issues sorted by most recently updated.'} <br/>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/webapp/src/components/github_issue_selector/index.js b/webapp/src/components/github_issue_selector/index.js
new file mode 100644
index 000000000..9569370a5
--- /dev/null
+++ b/webapp/src/components/github_issue_selector/index.js
@@ -0,0 +1,10 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+
+import GithubIssueSelector from './github_issue_selector';
+
+const mapStateToProps = () => ({});
+
+export default connect(mapStateToProps, null, null, {withRef: true})(GithubIssueSelector);
diff --git a/webapp/src/components/input.jsx b/webapp/src/components/input.jsx
new file mode 100644
index 000000000..14cbdd63d
--- /dev/null
+++ b/webapp/src/components/input.jsx
@@ -0,0 +1,160 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+import Setting from './setting.jsx';
+
+export default class Input extends PureComponent {
+    static propTypes = {
+        id: PropTypes.string,
+        label: PropTypes.node.isRequired,
+        placeholder: PropTypes.string,
+        helpText: PropTypes.node,
+        value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+        ]),
+        addValidate: PropTypes.func.isRequired,
+        removeValidate: PropTypes.func.isRequired,
+        maxLength: PropTypes.number,
+        onChange: PropTypes.func,
+        disabled: PropTypes.bool,
+        required: PropTypes.bool,
+        readOnly: PropTypes.bool,
+        type: PropTypes.oneOf([
+            'number',
+            'input',
+            'textarea',
+        ]),
+    };
+
+    static defaultProps = {
+        type: 'input',
+        maxLength: null,
+        required: false,
+        readOnly: false,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {invalid: false};
+    }
+
+    componentDidMount() {
+        if (this.props.addValidate && this.props.id) {
+            this.props.addValidate(this.props.id, this.isValid);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.removeValidate && this.props.id) {
+            this.props.removeValidate(this.props.id);
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.invalid && this.props.value !== prevProps.value) {
+            this.setState({invalid: false}); //eslint-disable-line react/no-did-update-set-state
+        }
+    }
+
+    handleChange = (e) => {
+        if (this.props.type === 'number') {
+            this.props.onChange(this.props.id, parseInt(e.target.value, 10));
+        } else {
+            this.props.onChange(this.props.id, e.target.value);
+        }
+    };
+
+    isValid = () => {
+        if (!this.props.required) {
+            return true;
+        }
+        const valid = this.props.value && this.props.value.toString().length !== 0;
+        this.setState({invalid: !valid});
+        return valid;
+    };
+
+    render() {
+        const requiredMsg = 'This field is required.';
+        const style = getStyle();
+        const value = this.props.value || '';
+
+        let validationError = null;
+        if (this.props.required && this.state.invalid) {
+            validationError = (
+                <p className='help-text error-text'>
+                    <span>{requiredMsg}</span>
+                </p>
+            );
+        }
+
+        let input = null;
+        if (this.props.type === 'input') {
+            input = (
+                <input
+                    id={this.props.id}
+                    className='form-control'
+                    type='text'
+                    placeholder={this.props.placeholder}
+                    value={value}
+                    maxLength={this.props.maxLength}
+                    onChange={this.handleChange}
+                    disabled={this.props.disabled}
+                    readOnly={this.props.readOnly}
+                />
+            );
+        } else if (this.props.type === 'number') {
+            input = (
+                <input
+                    id={this.props.id}
+                    className='form-control'
+                    type='number'
+                    placeholder={this.props.placeholder}
+                    value={value}
+                    maxLength={this.props.maxLength}
+                    onChange={this.handleChange}
+                    disabled={this.props.disabled}
+                    readOnly={this.props.readOnly}
+                />
+            );
+        } else if (this.props.type === 'textarea') {
+            input = (
+                <textarea
+                    style={style.textarea}
+                    resize='none'
+                    id={this.props.id}
+                    className='form-control'
+                    rows='5'
+                    placeholder={this.props.placeholder}
+                    value={value}
+                    maxLength={this.props.maxLength}
+                    onChange={this.handleChange}
+                    disabled={this.props.disabled}
+                    readOnly={this.props.readOnly}
+                />
+            );
+        }
+
+        return (
+            <Setting
+                label={this.props.label}
+                helpText={this.props.helpText}
+                inputId={this.props.id}
+                required={this.props.required}
+            >
+                {input}
+                {validationError}
+            </Setting>
+        );
+    }
+}
+
+const getStyle = () => ({
+    textarea: {
+        resize: 'none',
+    },
+});
diff --git a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
new file mode 100644
index 000000000..8817758b2
--- /dev/null
+++ b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -0,0 +1,169 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {Modal} from 'react-bootstrap';
+
+import FormButton from 'components/form_button';
+import Input from 'components/input';
+
+import GithubIssueSelector from 'components/github_issue_selector';
+import Validator from 'components/validator';
+
+const initialState = {
+    submitting: false,
+    issueKey: null,
+    textSearchTerms: '',
+    error: null,
+};
+
+export default class AttachIssueModal extends PureComponent {
+    static propTypes = {
+        close: PropTypes.func.isRequired,
+        create: PropTypes.func.isRequired,
+        post: PropTypes.object,
+        theme: PropTypes.object.isRequired,
+        visible: PropTypes.bool.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = initialState;
+
+        this.validator = new Validator();
+    }
+
+    handleCreate = (e) => {
+        if (e && e.preventDefault) {
+            e.preventDefault();
+        }
+
+        if (!this.validator.validate()) {
+            return;
+        }
+
+        const issue = {
+            owner: 'niklabh',
+            repo: 'linkmin',
+            number: this.state.issueKey,
+            comment: this.props.post,
+        };
+
+        this.setState({submitting: true});
+
+        this.props.create(issue).then((created) => {
+            console.log(created); //eslint-disable-line
+            if (created.error) {
+                this.setState({error: created.error.message, submitting: false});
+                return;
+            }
+            this.handleClose(e);
+        });
+    };
+
+    handleClose = (e) => {
+        if (e && e.preventDefault) {
+            e.preventDefault();
+        }
+        const {close} = this.props;
+        this.setState(initialState, close);
+    };
+
+    handleIssueKeyChange = (newValue) => {
+        this.setState({
+            issueKey: newValue,
+        });
+    };
+
+    render() {
+        const {visible, theme} = this.props;
+        const {error, submitting} = this.state;
+        const style = getStyle(theme);
+
+        if (!visible) {
+            return null;
+        }
+
+        const component = (
+            <div>
+                <GithubIssueSelector
+                    id={'issue'}
+                    addValidate={this.validator.addComponent}
+                    removeValidate={this.validator.removeComponent}
+                    onChange={this.handleIssueKeyChange}
+                    required={true}
+                    theme={theme}
+                    error={error}
+                    value={this.state.issueKey}
+                />
+                <Input
+                    label='Message Attached to Github Issue'
+                    type='textarea'
+                    isDisabled={true}
+                    value={this.props.post.message}
+                    disabled={false}
+                    readOnly={true}
+                />
+            </div>
+        );
+
+        return (
+            <Modal
+                dialogClassName='modal--scroll'
+                show={visible}
+                onHide={this.handleClose}
+                onExited={this.handleClose}
+                bsSize='large'
+                backdrop='static'
+            >
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>
+                        {'Attach Message to Github Issue'}
+                    </Modal.Title>
+                </Modal.Header>
+                <form
+                    role='form'
+                    onSubmit={this.handleCreate}
+                >
+                    <Modal.Body
+                        style={style.modal}
+                        ref='modalBody'
+                    >
+                        {component}
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <FormButton
+                            type='button'
+                            btnClass='btn-link'
+                            defaultMessage='Cancel'
+                            onClick={this.handleClose}
+                        />
+                        <FormButton
+                            type='submit'
+                            btnClass='btn btn-primary'
+                            saving={submitting}
+                            defaultMessage='Attach'
+                            savingMessage='Attaching'
+                        >
+                            {'Attach'}
+                        </FormButton>
+                    </Modal.Footer>
+                </form>
+            </Modal>
+        );
+    }
+}
+
+const getStyle = (theme) => ({
+    modal: {
+        padding: '2em 2em 3em',
+        color: theme.centerChannelColor,
+        backgroundColor: theme.centerChannelBg,
+    },
+    descriptionArea: {
+        height: 'auto',
+        width: '100%',
+        color: '#000',
+    },
+});
diff --git a/webapp/src/components/modals/attach_comment_to_issue/index.js b/webapp/src/components/modals/attach_comment_to_issue/index.js
new file mode 100644
index 000000000..8b35facc6
--- /dev/null
+++ b/webapp/src/components/modals/attach_comment_to_issue/index.js
@@ -0,0 +1,29 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {getPost} from 'mattermost-redux/selectors/entities/posts';
+
+import {closeAttachCommentToIssueModal, attachCommentToIssue} from 'actions';
+import {isAttachCommentToIssueModalVisible, getAttachCommentToIssueModalForPostId} from 'selectors';
+
+import AttachCommentToIssue from './attach_comment_to_issue';
+
+const mapStateToProps = (state) => {
+    const postId = getAttachCommentToIssueModalForPostId(state);
+    const post = getPost(state, postId);
+
+    return {
+        visible: isAttachCommentToIssueModalVisible(state),
+        post,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+    close: closeAttachCommentToIssueModal,
+    create: attachCommentToIssue,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(AttachCommentToIssue);
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
new file mode 100644
index 000000000..76486953b
--- /dev/null
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -0,0 +1,57 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+import {id as pluginId} from '../../../manifest';
+
+export default class AttachCommentToIssuePostMenuAction extends PureComponent {
+    static propTypes = {
+        isSystemMessage: PropTypes.bool.isRequired,
+        open: PropTypes.func.isRequired,
+        postId: PropTypes.string,
+        userConnected: PropTypes.bool.isRequired,
+        isInstanceInstalled: PropTypes.bool.isRequired,
+    };
+
+    static defaultTypes = {
+        locale: 'en',
+    };
+
+    handleClick = (e) => {
+        const {open, postId} = this.props;
+        e.preventDefault();
+        open(postId);
+    };
+
+    connectClick = () => {
+        window.open('/plugins/' + pluginId + '/user/connect', '_blank');
+    };
+
+    render() {
+        if (this.props.isSystemMessage || !this.props.isInstanceInstalled || !this.props.userConnected) {
+            return null;
+        }
+
+        const content = (
+            <button
+                className='style--none'
+                role='presentation'
+                onClick={this.handleClick}
+            >
+                <i className='fa fa-github fa-lg'/>
+                {' Attach to Github Issue'}
+            </button>
+        );
+
+        return (
+            <li
+                className='MenuItem'
+                role='menuitem'
+            >
+                {content}
+            </li>
+        );
+    }
+}
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
new file mode 100644
index 000000000..5ecef1acb
--- /dev/null
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
@@ -0,0 +1,31 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {getPost} from 'mattermost-redux/selectors/entities/posts';
+import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
+
+import {openAttachCommentToIssueModal} from 'actions';
+
+import {isUserConnected, isInstanceInstalled} from 'selectors';
+
+import AttachCommentToIssuePostMenuAction from './attach_comment_to_issue';
+
+const mapStateToProps = (state, ownProps) => {
+    const post = getPost(state, ownProps.postId);
+    const systemMessage = post ? isSystemMessage(post) : true;
+
+    return {
+        isSystemMessage: systemMessage,
+        userConnected: isUserConnected(state),
+        isInstanceInstalled: isInstanceInstalled(state),
+    };
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+    open: openAttachCommentToIssueModal,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(AttachCommentToIssuePostMenuAction);
diff --git a/webapp/src/components/validator.js b/webapp/src/components/validator.js
new file mode 100644
index 000000000..3443fa7fa
--- /dev/null
+++ b/webapp/src/components/validator.js
@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export default class Validator {
+    constructor() {
+        // Our list of components we have to validate before allowing a submit action.
+        this.components = new Map();
+    }
+
+    addComponent = (key, validateField) => {
+        this.components.set(key, validateField);
+    };
+
+    removeComponent = (key) => {
+        this.components.delete(key);
+    };
+
+    validate = () => {
+        return Array.from(this.components.values()).reduce((accum, validateField) => {
+            return validateField() && accum;
+        }, true);
+    };
+}
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 2ebaf71c9..c3dfa837b 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -1,5 +1,8 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
+import AttachCommentToIssuePostMenuAction from 'components/post_menu_actions/attach_comment_to_issue';
+import AttachCommentToIssueModal from 'components/modals/attach_comment_to_issue';
+
 import SidebarHeader from './components/sidebar_header';
 import TeamSidebar from './components/team_sidebar';
 import UserAttribute from './components/user_attribute';
@@ -21,6 +24,8 @@ class PluginClass {
         registry.registerLeftSidebarHeaderComponent(SidebarHeader);
         registry.registerBottomTeamSidebarComponent(TeamSidebar);
         registry.registerPopoverUserAttributesComponent(UserAttribute);
+        registry.registerRootComponent(AttachCommentToIssueModal);
+        registry.registerPostDropdownMenuComponent(AttachCommentToIssuePostMenuAction);
 
         const {showRHSPlugin} = registry.registerRightHandSidebarComponent(SidebarRight, 'Github Plugin');
         store.dispatch(setShowRHSAction(() => store.dispatch(showRHSPlugin)));
diff --git a/webapp/src/reducers/index.js b/webapp/src/reducers/index.js
index c37f195eb..01038b89c 100644
--- a/webapp/src/reducers/index.js
+++ b/webapp/src/reducers/index.js
@@ -138,6 +138,28 @@ function rhsState(state = null, action) {
     }
 }
 
+const attachCommentToIssueModalVisible = (state = false, action) => {
+    switch (action.type) {
+    case ActionTypes.OPEN_ATTACH_COMMENT_TO_ISSUE_MODAL:
+        return true;
+    case ActionTypes.CLOSE_ATTACH_COMMENT_TO_ISSUE_MODAL:
+        return false;
+    default:
+        return state;
+    }
+};
+
+const attachCommentToIssueModalForPostId = (state = '', action) => {
+    switch (action.type) {
+    case ActionTypes.OPEN_ATTACH_COMMENT_TO_ISSUE_MODAL:
+        return action.data.postId;
+    case ActionTypes.CLOSE_ATTACH_COMMENT_TO_ISSUE_MODAL:
+        return '';
+    default:
+        return state;
+    }
+};
+
 export default combineReducers({
     connected,
     enterpriseURL,
@@ -153,4 +175,6 @@ export default combineReducers({
     githubUsers,
     rhsPluginAction,
     rhsState,
+    attachCommentToIssueModalVisible,
+    attachCommentToIssueModalForPostId,
 });
diff --git a/webapp/src/selectors/index.js b/webapp/src/selectors/index.js
new file mode 100644
index 000000000..3e9c0e715
--- /dev/null
+++ b/webapp/src/selectors/index.js
@@ -0,0 +1,46 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {createSelector} from 'reselect';
+
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+
+import {pluginId} from '../manifest';
+
+const getPluginState = (state) => state['plugins-' + pluginId] || {};
+
+export const getPluginServerRoute = (state) => {
+    const config = getConfig(state);
+
+    let basePath = '/';
+    if (config && config.SiteURL) {
+        basePath = new URL(config.SiteURL).pathname;
+
+        if (basePath && basePath[basePath.length - 1] === '/') {
+            basePath = basePath.substr(0, basePath.length - 1);
+        }
+    }
+
+    return basePath + '/plugins/' + pluginId;
+};
+
+export const getCurrentUserLocale = createSelector(
+    getCurrentUser,
+    (user) => {
+        let locale = 'en';
+        if (user && user.locale) {
+            locale = user.locale;
+        }
+
+        return locale;
+    }
+);
+
+export const isAttachCommentToIssueModalVisible = (state) => getPluginState(state).attachCommentToIssueModalVisible;
+
+export const getAttachCommentToIssueModalForPostId = (state) => getPluginState(state).attachCommentToIssueModalForPostId;
+
+export const isUserConnected = (state) => getPluginState(state).userConnected;
+
+export const isInstanceInstalled = (state) => getPluginState(state).instanceInstalled;
diff --git a/webapp/src/utils/styles.js b/webapp/src/utils/styles.js
new file mode 100644
index 000000000..2190ed08d
--- /dev/null
+++ b/webapp/src/utils/styles.js
@@ -0,0 +1,102 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
+
+export const getStyleForReactSelect = (theme) => {
+    if (!theme) {
+        return null;
+    }
+
+    return {
+        menuPortal: (provided) => ({
+            ...provided,
+            zIndex: 9999,
+        }),
+        control: (provided, state) => ({
+            ...provided,
+            color: theme.centerChannelColor,
+            background: theme.centerChannelBg,
+
+            // Overwrittes the different states of border
+            borderColor: state.isFocused ? changeOpacity(theme.centerChannelColor, 0.25) : changeOpacity(theme.centerChannelColor, 0.12),
+
+            // Removes weird border around container
+            boxShadow: 'inset 0 1px 1px ' + changeOpacity(theme.centerChannelColor, 0.075),
+            borderRadius: '2px',
+
+            '&:hover': {
+                borderColor: changeOpacity(theme.centerChannelColor, 0.25),
+            },
+        }),
+        option: (provided, state) => ({
+            ...provided,
+            background: state.isFocused ? changeOpacity(theme.centerChannelColor, 0.12) : theme.centerChannelBg,
+            color: theme.centerChannelColor,
+            '&:hover': {
+                background: changeOpacity(theme.centerChannelColor, 0.12),
+            },
+        }),
+        clearIndicator: (provided) => ({
+            ...provided,
+            width: '34px',
+            color: changeOpacity(theme.centerChannelColor, 0.4),
+            transform: 'scaleX(1.15)',
+            marginRight: '-10px',
+            '&:hover': {
+                color: theme.centerChannelColor,
+            },
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            background: changeOpacity(theme.centerChannelColor, 0.15),
+        }),
+        multiValueLabel: (provided) => ({
+            ...provided,
+            color: theme.centerChannelColor,
+            paddingBottom: '4px',
+            paddingLeft: '8px',
+            fontSize: '90%',
+        }),
+        multiValueRemove: (provided) => ({
+            ...provided,
+            transform: 'translateX(-2px) scaleX(1.15)',
+            color: changeOpacity(theme.centerChannelColor, 0.4),
+            '&:hover': {
+                background: 'transparent',
+            },
+        }),
+        menu: (provided) => ({
+            ...provided,
+            color: theme.centerChannelColor,
+            background: theme.centerChannelBg,
+            border: '1px solid ' + changeOpacity(theme.centerChannelColor, 0.2),
+            borderRadius: '0 0 2px 2px',
+            boxShadow: changeOpacity(theme.centerChannelColor, 0.2) + ' 1px 3px 12px',
+            marginTop: '4px',
+        }),
+        input: (provided) => ({
+            ...provided,
+            color: theme.centerChannelColor,
+        }),
+        placeholder: (provided) => ({
+            ...provided,
+            color: theme.centerChannelColor,
+        }),
+        dropdownIndicator: (provided) => ({
+            ...provided,
+
+            '&:hover': {
+                color: theme.centerChannelColor,
+            },
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            color: theme.centerChannelColor,
+        }),
+        indicatorSeparator: (provided) => ({
+            ...provided,
+            display: 'none',
+        }),
+    };
+};

From c6a2259d58b959ea7c413d8d507f8de85a751a83 Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 11:20:42 +0200
Subject: [PATCH 02/10] misc fixes

---
 webapp/package-lock.json                      | 11 ++++++
 webapp/package.json                           |  1 +
 .../github_issue_selector.jsx                 |  4 +--
 webapp/src/selectors/index.js                 | 34 +------------------
 4 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 8226bc4c3..4728bff6b 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -5857,6 +5857,17 @@
         "raf": "^3.1.0"
       }
     },
+    "react-dom": {
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
+      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.6"
+      }
+    },
     "react-input-autosize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 15dea28b7..2c2daa152 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,6 +14,7 @@
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-bootstrap": "0.32.4",
+    "react-dom": "16.8.6",
     "react-custom-scrollbars": "^4.2.1",
     "react-redux": "7.0.3",
     "react-select": "3.0.4",
diff --git a/webapp/src/components/github_issue_selector/github_issue_selector.jsx b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
index ff394d97c..9099eabf6 100644
--- a/webapp/src/components/github_issue_selector/github_issue_selector.jsx
+++ b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
@@ -8,7 +8,7 @@ import debounce from 'debounce-promise';
 import AsyncSelect from 'react-select/async';
 
 import {getStyleForReactSelect} from 'utils/styles';
-import {searchIssues} from 'client';
+import Client from 'client';
 
 const searchDebounceDelay = 400;
 
@@ -55,7 +55,7 @@ export default class JiraIssueSelector extends Component {
     searchIssues = (text) => {
         const textEncoded = encodeURIComponent(text.trim().replace(/"/g, '\\"'));
 
-        return searchIssues(textEncoded).then((data) => {
+        return Client.searchIssues(textEncoded).then((data) => {
             console.log(data); //eslint-disable-line
             return data;
         }).catch((e) => {
diff --git a/webapp/src/selectors/index.js b/webapp/src/selectors/index.js
index 3e9c0e715..4d56511ae 100644
--- a/webapp/src/selectors/index.js
+++ b/webapp/src/selectors/index.js
@@ -1,42 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {createSelector} from 'reselect';
-
-import {getConfig} from 'mattermost-redux/selectors/entities/general';
-import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
-
-import {pluginId} from '../manifest';
+import {id as pluginId} from '../manifest';
 
 const getPluginState = (state) => state['plugins-' + pluginId] || {};
 
-export const getPluginServerRoute = (state) => {
-    const config = getConfig(state);
-
-    let basePath = '/';
-    if (config && config.SiteURL) {
-        basePath = new URL(config.SiteURL).pathname;
-
-        if (basePath && basePath[basePath.length - 1] === '/') {
-            basePath = basePath.substr(0, basePath.length - 1);
-        }
-    }
-
-    return basePath + '/plugins/' + pluginId;
-};
-
-export const getCurrentUserLocale = createSelector(
-    getCurrentUser,
-    (user) => {
-        let locale = 'en';
-        if (user && user.locale) {
-            locale = user.locale;
-        }
-
-        return locale;
-    }
-);
-
 export const isAttachCommentToIssueModalVisible = (state) => getPluginState(state).attachCommentToIssueModalVisible;
 
 export const getAttachCommentToIssueModalForPostId = (state) => getPluginState(state).attachCommentToIssueModalForPostId;

From 5d1cb944d8e3d63f9476df2d75b0d8c4a602c080 Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 11:20:51 +0200
Subject: [PATCH 03/10] misc fixes

---
 webapp/src/components/setting.jsx | 50 +++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 webapp/src/components/setting.jsx

diff --git a/webapp/src/components/setting.jsx b/webapp/src/components/setting.jsx
new file mode 100644
index 000000000..f833a7117
--- /dev/null
+++ b/webapp/src/components/setting.jsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Setting extends React.PureComponent {
+    static propTypes = {
+        inputId: PropTypes.string,
+        label: PropTypes.node.isRequired,
+        children: PropTypes.node.isRequired,
+        helpText: PropTypes.node,
+        required: PropTypes.bool,
+    };
+
+    render() {
+        const {
+            children,
+            helpText,
+            inputId,
+            label,
+            required,
+        } = this.props;
+
+        return (
+            <div className='form-group'>
+                <label
+                    className='control-label'
+                    htmlFor={inputId}
+                >
+                    {label}
+                </label>
+                {required &&
+                <span
+                    className='error-text'
+                    style={{marginLeft: '3px'}}
+                >
+                    {'*'}
+                </span>
+                }
+                <div>
+                    {children}
+                    <div className='help-text'>
+                        {helpText}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

From 5ecee099328f82758a7c5ec5e00438be2d5e3a8d Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 13:25:12 +0200
Subject: [PATCH 04/10] plugged API with backend

---
 server/api.go                                 | 12 ++-----
 webapp/src/client/client.js                   |  2 +-
 .../github_issue_selector.jsx                 | 20 ++----------
 .../attach_comment_to_issue.jsx               | 32 ++++++++-----------
 .../modals/attach_comment_to_issue/index.js   |  5 ++-
 .../attach_comment_to_issue.jsx               |  9 +++---
 .../attach_comment_to_issue/index.js          |  5 +--
 webapp/src/components/validator.js            | 23 -------------
 webapp/src/selectors/index.js                 | 14 --------
 9 files changed, 26 insertions(+), 96 deletions(-)
 delete mode 100644 webapp/src/components/validator.js
 delete mode 100644 webapp/src/selectors/index.js

diff --git a/server/api.go b/server/api.go
index 95a1cdc07..7c1a467b4 100644
--- a/server/api.go
+++ b/server/api.go
@@ -509,15 +509,7 @@ func (p *Plugin) searchIssues(w http.ResponseWriter, r *http.Request) {
 	var githubClient *github.Client
 	username := ""
 
-	req := &SearchIssueRequest{}
-	dec := json.NewDecoder(r.Body)
-	if err := dec.Decode(&req); err != nil {
-		if err != nil {
-			mlog.Error("Error decoding JSON body", mlog.Err(err))
-		}
-		writeAPIError(w, &APIErrorResponse{ID: "", Message: "Please provide a JSON object with search_term key.", StatusCode: http.StatusBadRequest})
-		return
-	}
+	searchTerm := r.FormValue("term")
 
 	if info, err := p.getGitHubUserInfo(userID); err != nil {
 		writeAPIError(w, err)
@@ -527,7 +519,7 @@ func (p *Plugin) searchIssues(w http.ResponseWriter, r *http.Request) {
 		username = info.GitHubUsername
 	}
 
-	result, _, err := githubClient.Search.Issues(ctx, getIssuesSearchQuery(username, config.GitHubOrg, req.SearchTerm), &github.SearchOptions{})
+	result, _, err := githubClient.Search.Issues(ctx, getIssuesSearchQuery(username, config.GitHubOrg, searchTerm), &github.SearchOptions{})
 	if err != nil {
 		mlog.Error(err.Error())
 	}
diff --git a/webapp/src/client/client.js b/webapp/src/client/client.js
index 743615c2f..be138f2a1 100644
--- a/webapp/src/client/client.js
+++ b/webapp/src/client/client.js
@@ -34,7 +34,7 @@ export default class Client {
     }
 
     searchIssues = async (searchTerm) => {
-        return this.doPost(`${this.url}/searchissues`, {searchTerm});
+        return this.doGet(`${this.url}/searchissues?term=${searchTerm}`);
     }
 
     attachCommentToIssue = async (payload) => {
diff --git a/webapp/src/components/github_issue_selector/github_issue_selector.jsx b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
index 9099eabf6..56c208da2 100644
--- a/webapp/src/components/github_issue_selector/github_issue_selector.jsx
+++ b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
@@ -12,16 +12,13 @@ import Client from 'client';
 
 const searchDebounceDelay = 400;
 
-export default class JiraIssueSelector extends Component {
+export default class GithubIssueSelector extends Component {
     static propTypes = {
-        id: PropTypes.string,
         required: PropTypes.bool,
         theme: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
         error: PropTypes.string,
         value: PropTypes.object,
-        addValidate: PropTypes.func.isRequired,
-        removeValidate: PropTypes.func.isRequired,
     };
 
     constructor(props) {
@@ -30,18 +27,6 @@ export default class JiraIssueSelector extends Component {
         this.state = {invalid: false};
     }
 
-    componentDidMount() {
-        if (this.props.addValidate && this.props.id) {
-            this.props.addValidate(this.props.id, this.isValid);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.removeValidate && this.props.id) {
-            this.props.removeValidate(this.props.id);
-        }
-    }
-
     componentDidUpdate(prevProps, prevState) {
         if (prevState.invalid && this.props.value !== prevProps.value) {
             this.setState({invalid: false}); //eslint-disable-line react/no-did-update-set-state
@@ -56,8 +41,7 @@ export default class JiraIssueSelector extends Component {
         const textEncoded = encodeURIComponent(text.trim().replace(/"/g, '\\"'));
 
         return Client.searchIssues(textEncoded).then((data) => {
-            console.log(data); //eslint-disable-line
-            return data;
+            return Array.isArray(data) ? data.map((item) => ({value: item, label: item.title})) : [];
         }).catch((e) => {
             this.setState({error: e});
         });
diff --git a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
index 8817758b2..96adc8df0 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -9,11 +9,10 @@ import FormButton from 'components/form_button';
 import Input from 'components/input';
 
 import GithubIssueSelector from 'components/github_issue_selector';
-import Validator from 'components/validator';
 
 const initialState = {
     submitting: false,
-    issueKey: null,
+    issueValue: {},
     textSearchTerms: '',
     error: null,
 };
@@ -30,8 +29,6 @@ export default class AttachIssueModal extends PureComponent {
     constructor(props) {
         super(props);
         this.state = initialState;
-
-        this.validator = new Validator();
     }
 
     handleCreate = (e) => {
@@ -39,21 +36,22 @@ export default class AttachIssueModal extends PureComponent {
             e.preventDefault();
         }
 
-        if (!this.validator.validate()) {
-            return;
-        }
+        const number = this.state.issueValue.number;
+        const repoUrl = this.state.issueValue.repository_url;
+        const repoUrlParts = repoUrl.split('/');
+        const repo = repoUrlParts.pop();
+        const owner = repoUrlParts.pop();
 
         const issue = {
-            owner: 'niklabh',
-            repo: 'linkmin',
-            number: this.state.issueKey,
-            comment: this.props.post,
+            owner,
+            repo,
+            number,
+            comment: this.props.post.message,
         };
 
         this.setState({submitting: true});
 
         this.props.create(issue).then((created) => {
-            console.log(created); //eslint-disable-line
             if (created.error) {
                 this.setState({error: created.error.message, submitting: false});
                 return;
@@ -70,9 +68,9 @@ export default class AttachIssueModal extends PureComponent {
         this.setState(initialState, close);
     };
 
-    handleIssueKeyChange = (newValue) => {
+    handleIssueValueChange = (newValue) => {
         this.setState({
-            issueKey: newValue,
+            issueValue: newValue,
         });
     };
 
@@ -89,13 +87,11 @@ export default class AttachIssueModal extends PureComponent {
             <div>
                 <GithubIssueSelector
                     id={'issue'}
-                    addValidate={this.validator.addComponent}
-                    removeValidate={this.validator.removeComponent}
-                    onChange={this.handleIssueKeyChange}
+                    onChange={this.handleIssueValueChange}
                     required={true}
                     theme={theme}
                     error={error}
-                    value={this.state.issueKey}
+                    value={this.state.issueValue}
                 />
                 <Input
                     label='Message Attached to Github Issue'
diff --git a/webapp/src/components/modals/attach_comment_to_issue/index.js b/webapp/src/components/modals/attach_comment_to_issue/index.js
index 8b35facc6..7b76ede08 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/index.js
+++ b/webapp/src/components/modals/attach_comment_to_issue/index.js
@@ -7,16 +7,15 @@ import {bindActionCreators} from 'redux';
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 
 import {closeAttachCommentToIssueModal, attachCommentToIssue} from 'actions';
-import {isAttachCommentToIssueModalVisible, getAttachCommentToIssueModalForPostId} from 'selectors';
 
 import AttachCommentToIssue from './attach_comment_to_issue';
 
 const mapStateToProps = (state) => {
-    const postId = getAttachCommentToIssueModalForPostId(state);
+    const postId = state['plugins-github'].attachCommentToIssueModalForPostId;
     const post = getPost(state, postId);
 
     return {
-        visible: isAttachCommentToIssueModalVisible(state),
+        visible: state['plugins-github'].attachCommentToIssueModalVisible,
         post,
     };
 };
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
index 76486953b..fd7f60585 100644
--- a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -11,8 +11,7 @@ export default class AttachCommentToIssuePostMenuAction extends PureComponent {
         isSystemMessage: PropTypes.bool.isRequired,
         open: PropTypes.func.isRequired,
         postId: PropTypes.string,
-        userConnected: PropTypes.bool.isRequired,
-        isInstanceInstalled: PropTypes.bool.isRequired,
+        connected: PropTypes.bool.isRequired,
     };
 
     static defaultTypes = {
@@ -30,7 +29,7 @@ export default class AttachCommentToIssuePostMenuAction extends PureComponent {
     };
 
     render() {
-        if (this.props.isSystemMessage || !this.props.isInstanceInstalled || !this.props.userConnected) {
+        if (this.props.isSystemMessage || !this.props.connected) {
             return null;
         }
 
@@ -40,8 +39,8 @@ export default class AttachCommentToIssuePostMenuAction extends PureComponent {
                 role='presentation'
                 onClick={this.handleClick}
             >
-                <i className='fa fa-github fa-lg'/>
-                {' Attach to Github Issue'}
+                <i className='fa fa-github fa-lg'/>&nbsp;
+                {'Attach to Github Issue'}
             </button>
         );
 
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
index 5ecef1acb..366b44dc3 100644
--- a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
@@ -9,8 +9,6 @@ import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
 
 import {openAttachCommentToIssueModal} from 'actions';
 
-import {isUserConnected, isInstanceInstalled} from 'selectors';
-
 import AttachCommentToIssuePostMenuAction from './attach_comment_to_issue';
 
 const mapStateToProps = (state, ownProps) => {
@@ -19,8 +17,7 @@ const mapStateToProps = (state, ownProps) => {
 
     return {
         isSystemMessage: systemMessage,
-        userConnected: isUserConnected(state),
-        isInstanceInstalled: isInstanceInstalled(state),
+        connected: state['plugins-github'].connected,
     };
 };
 
diff --git a/webapp/src/components/validator.js b/webapp/src/components/validator.js
deleted file mode 100644
index 3443fa7fa..000000000
--- a/webapp/src/components/validator.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export default class Validator {
-    constructor() {
-        // Our list of components we have to validate before allowing a submit action.
-        this.components = new Map();
-    }
-
-    addComponent = (key, validateField) => {
-        this.components.set(key, validateField);
-    };
-
-    removeComponent = (key) => {
-        this.components.delete(key);
-    };
-
-    validate = () => {
-        return Array.from(this.components.values()).reduce((accum, validateField) => {
-            return validateField() && accum;
-        }, true);
-    };
-}
diff --git a/webapp/src/selectors/index.js b/webapp/src/selectors/index.js
deleted file mode 100644
index 4d56511ae..000000000
--- a/webapp/src/selectors/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {id as pluginId} from '../manifest';
-
-const getPluginState = (state) => state['plugins-' + pluginId] || {};
-
-export const isAttachCommentToIssueModalVisible = (state) => getPluginState(state).attachCommentToIssueModalVisible;
-
-export const getAttachCommentToIssueModalForPostId = (state) => getPluginState(state).attachCommentToIssueModalForPostId;
-
-export const isUserConnected = (state) => getPluginState(state).userConnected;
-
-export const isInstanceInstalled = (state) => getPluginState(state).instanceInstalled;

From e9a0fceafaee39eb1623c81b7d6f874aba75ee9b Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 13:35:14 +0200
Subject: [PATCH 05/10] removed comments

---
 server/api.go                                                 | 4 ----
 webapp/src/components/form_button.jsx                         | 3 ---
 .../github_issue_selector/github_issue_selector.jsx           | 3 ---
 webapp/src/components/github_issue_selector/index.js          | 3 ---
 webapp/src/components/input.jsx                               | 3 ---
 .../attach_comment_to_issue/attach_comment_to_issue.jsx       | 3 ---
 webapp/src/components/modals/attach_comment_to_issue/index.js | 3 ---
 .../attach_comment_to_issue/attach_comment_to_issue.jsx       | 3 ---
 .../post_menu_actions/attach_comment_to_issue/index.js        | 3 ---
 webapp/src/components/setting.jsx                             | 3 ---
 webapp/src/utils/styles.js                                    | 3 ---
 11 files changed, 34 deletions(-)

diff --git a/server/api.go b/server/api.go
index 7c1a467b4..2ff60f1c0 100644
--- a/server/api.go
+++ b/server/api.go
@@ -236,10 +236,6 @@ type CreateIssueCommentRequest struct {
 	Comment string `json:"comment"`
 }
 
-type SearchIssueRequest struct {
-	SearchTerm string `json:"search_term"`
-}
-
 type GitHubUserRequest struct {
 	UserID string `json:"user_id"`
 }
diff --git a/webapp/src/components/form_button.jsx b/webapp/src/components/form_button.jsx
index d993c27ce..90930dcb5 100644
--- a/webapp/src/components/form_button.jsx
+++ b/webapp/src/components/form_button.jsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/github_issue_selector/github_issue_selector.jsx b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
index 56c208da2..2f8e438ae 100644
--- a/webapp/src/components/github_issue_selector/github_issue_selector.jsx
+++ b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/github_issue_selector/index.js b/webapp/src/components/github_issue_selector/index.js
index 9569370a5..2489abf91 100644
--- a/webapp/src/components/github_issue_selector/index.js
+++ b/webapp/src/components/github_issue_selector/index.js
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import {connect} from 'react-redux';
 
 import GithubIssueSelector from './github_issue_selector';
diff --git a/webapp/src/components/input.jsx b/webapp/src/components/input.jsx
index 14cbdd63d..b70384624 100644
--- a/webapp/src/components/input.jsx
+++ b/webapp/src/components/input.jsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
index 96adc8df0..0f61910d4 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Modal} from 'react-bootstrap';
diff --git a/webapp/src/components/modals/attach_comment_to_issue/index.js b/webapp/src/components/modals/attach_comment_to_issue/index.js
index 7b76ede08..967cca1e3 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/index.js
+++ b/webapp/src/components/modals/attach_comment_to_issue/index.js
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
index fd7f60585..04ee78f7b 100644
--- a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
index 366b44dc3..1a8243b1b 100644
--- a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
diff --git a/webapp/src/components/setting.jsx b/webapp/src/components/setting.jsx
index f833a7117..59c80fb68 100644
--- a/webapp/src/components/setting.jsx
+++ b/webapp/src/components/setting.jsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/utils/styles.js b/webapp/src/utils/styles.js
index 2190ed08d..b13677b8c 100644
--- a/webapp/src/utils/styles.js
+++ b/webapp/src/utils/styles.js
@@ -1,6 +1,3 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 
 export const getStyleForReactSelect = (theme) => {

From ed3cb295d31866c0eeb445008748676fa177fc97 Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 16:21:55 +0200
Subject: [PATCH 06/10] handling null issue value

---
 .../attach_comment_to_issue/attach_comment_to_issue.jsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
index 0f61910d4..c773ff86c 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -9,7 +9,7 @@ import GithubIssueSelector from 'components/github_issue_selector';
 
 const initialState = {
     submitting: false,
-    issueValue: {},
+    issueValue: null,
     textSearchTerms: '',
     error: null,
 };
@@ -33,6 +33,10 @@ export default class AttachIssueModal extends PureComponent {
             e.preventDefault();
         }
 
+        if (!this.state.issueValue) {
+            return;
+        }
+
         const number = this.state.issueValue.number;
         const repoUrl = this.state.issueValue.repository_url;
         const repoUrlParts = repoUrl.split('/');

From d5a1df44550fd877ee261f8fb98732b134405a9e Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 22:19:04 +0200
Subject: [PATCH 07/10] checking for correct method

---
 server/api.go | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/server/api.go b/server/api.go
index 2ff60f1c0..0201dc0af 100644
--- a/server/api.go
+++ b/server/api.go
@@ -494,6 +494,11 @@ func (p *Plugin) getYourPrs(w http.ResponseWriter, r *http.Request) {
 func (p *Plugin) searchIssues(w http.ResponseWriter, r *http.Request) {
 	config := p.getConfiguration()
 
+	if r.Method != http.MethodGet {
+		http.Error(w, fmt.Sprintf("Request: %s is not allowed, must be GET", r.Method), http.StatusMethodNotAllowed)
+		return
+	}
+
 	userID := r.Header.Get("Mattermost-User-ID")
 	if userID == "" {
 		http.Error(w, "Not authorized", http.StatusUnauthorized)
@@ -525,6 +530,11 @@ func (p *Plugin) searchIssues(w http.ResponseWriter, r *http.Request) {
 }
 
 func (p *Plugin) createIssueComment(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, fmt.Sprintf("Request: %s is not allowed, must be POST", r.Method), http.StatusMethodNotAllowed)
+		return
+	}
+
 	userID := r.Header.Get("Mattermost-User-ID")
 	if userID == "" {
 		http.Error(w, "Not authorized", http.StatusUnauthorized)

From 2697b165b368ae6548f757c466d5fff7f8f06883 Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 22:19:57 +0200
Subject: [PATCH 08/10] Update
 webapp/src/components/github_issue_selector/github_issue_selector.jsx

Co-Authored-By: Michael Kochell <mjkochell@gmail.com>
---
 .../components/github_issue_selector/github_issue_selector.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/github_issue_selector/github_issue_selector.jsx b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
index 2f8e438ae..87fd01178 100644
--- a/webapp/src/components/github_issue_selector/github_issue_selector.jsx
+++ b/webapp/src/components/github_issue_selector/github_issue_selector.jsx
@@ -9,7 +9,7 @@ import Client from 'client';
 
 const searchDebounceDelay = 400;
 
-export default class GithubIssueSelector extends Component {
+export default class GithubIssueSelector extends PureComponent {
     static propTypes = {
         required: PropTypes.bool,
         theme: PropTypes.object.isRequired,

From 2b450f128ef46aa2c296a80022f53901ccb6fe05 Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Wed, 11 Sep 2019 22:43:26 +0200
Subject: [PATCH 09/10] changes as per review

---
 webapp/src/action_types/index.js              |  3 +++
 webapp/src/actions/index.js                   |  3 +++
 webapp/src/client/client.js                   |  3 +++
 webapp/src/client/index.js                    |  3 +++
 webapp/src/components/form_button.jsx         |  3 +++
 .../github_issue_selector.jsx                 |  9 ++++++---
 .../components/github_issue_selector/index.js |  7 -------
 webapp/src/components/input.jsx               |  3 +++
 .../attach_comment_to_issue.jsx               |  3 +++
 .../modals/attach_comment_to_issue/index.js   |  9 ++++++---
 .../attach_comment_to_issue.jsx               |  3 +++
 .../attach_comment_to_issue/index.js          |  7 +++++--
 webapp/src/components/setting.jsx             | 19 +++++++++++--------
 .../src/components/sidebar_buttons/index.js   |  3 +++
 .../sidebar_buttons/sidebar_buttons.jsx       |  3 +++
 webapp/src/components/sidebar_header/index.js |  3 +++
 .../sidebar_header/sidebar_header.jsx         |  3 +++
 .../components/sidebar_right/github_items.jsx |  3 +++
 webapp/src/components/sidebar_right/index.jsx |  3 +++
 .../sidebar_right/sidebar_right.jsx           |  5 ++++-
 webapp/src/components/team_sidebar/index.js   |  3 +++
 .../components/team_sidebar/team_sidebar.jsx  |  3 +++
 webapp/src/components/user_attribute/index.js |  3 +++
 .../user_attribute/user_attribute.jsx         |  3 +++
 webapp/src/constants/index.js                 |  3 +++
 webapp/src/index.js                           |  1 +
 webapp/src/reducers/index.js                  |  3 +++
 webapp/src/utils/date_utils.js                |  3 +++
 webapp/src/utils/styles.js                    |  3 +++
 webapp/src/utils/user_utils.js                |  3 +++
 webapp/src/websocket/index.js                 |  3 +++
 31 files changed, 105 insertions(+), 24 deletions(-)
 rename webapp/src/components/{github_issue_selector => }/github_issue_selector.jsx (94%)
 delete mode 100644 webapp/src/components/github_issue_selector/index.js

diff --git a/webapp/src/action_types/index.js b/webapp/src/action_types/index.js
index 65cf73343..26049755b 100644
--- a/webapp/src/action_types/index.js
+++ b/webapp/src/action_types/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {id as pluginId} from '../manifest';
 
 export default {
diff --git a/webapp/src/actions/index.js b/webapp/src/actions/index.js
index 1009f07ba..2e885de39 100644
--- a/webapp/src/actions/index.js
+++ b/webapp/src/actions/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import Client from '../client';
 import ActionTypes from '../action_types';
 
diff --git a/webapp/src/client/client.js b/webapp/src/client/client.js
index be138f2a1..cc9c69bdc 100644
--- a/webapp/src/client/client.js
+++ b/webapp/src/client/client.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import request from 'superagent';
 
 export default class Client {
diff --git a/webapp/src/client/index.js b/webapp/src/client/index.js
index 9406f34de..d2f0167f8 100644
--- a/webapp/src/client/index.js
+++ b/webapp/src/client/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import ClientClass from './client.js';
 
 const Client = new ClientClass();
diff --git a/webapp/src/components/form_button.jsx b/webapp/src/components/form_button.jsx
index 90930dcb5..d993c27ce 100644
--- a/webapp/src/components/form_button.jsx
+++ b/webapp/src/components/form_button.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/github_issue_selector/github_issue_selector.jsx b/webapp/src/components/github_issue_selector.jsx
similarity index 94%
rename from webapp/src/components/github_issue_selector/github_issue_selector.jsx
rename to webapp/src/components/github_issue_selector.jsx
index 87fd01178..c739c7037 100644
--- a/webapp/src/components/github_issue_selector/github_issue_selector.jsx
+++ b/webapp/src/components/github_issue_selector.jsx
@@ -1,4 +1,7 @@
-import React, {Component} from 'react';
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
 import debounce from 'debounce-promise';
@@ -61,7 +64,7 @@ export default class GithubIssueSelector extends PureComponent {
         return valid;
     };
 
-    render = () => {
+    render() {
         const {error} = this.props;
         const requiredStar = (
             <span
@@ -90,7 +93,7 @@ export default class GithubIssueSelector extends PureComponent {
                         className='fa fa-warning'
                         title='Warning Icon'
                     />
-                    <span> {serverError.toString()}</span>
+                    <span>{serverError.toString()}</span>
                 </p>
             );
         }
diff --git a/webapp/src/components/github_issue_selector/index.js b/webapp/src/components/github_issue_selector/index.js
deleted file mode 100644
index 2489abf91..000000000
--- a/webapp/src/components/github_issue_selector/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {connect} from 'react-redux';
-
-import GithubIssueSelector from './github_issue_selector';
-
-const mapStateToProps = () => ({});
-
-export default connect(mapStateToProps, null, null, {withRef: true})(GithubIssueSelector);
diff --git a/webapp/src/components/input.jsx b/webapp/src/components/input.jsx
index b70384624..14cbdd63d 100644
--- a/webapp/src/components/input.jsx
+++ b/webapp/src/components/input.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
index c773ff86c..9717370ed 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Modal} from 'react-bootstrap';
diff --git a/webapp/src/components/modals/attach_comment_to_issue/index.js b/webapp/src/components/modals/attach_comment_to_issue/index.js
index 967cca1e3..3281b8cb0 100644
--- a/webapp/src/components/modals/attach_comment_to_issue/index.js
+++ b/webapp/src/components/modals/attach_comment_to_issue/index.js
@@ -1,18 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 
+import {id as pluginId} from 'manifest';
 import {closeAttachCommentToIssueModal, attachCommentToIssue} from 'actions';
 
 import AttachCommentToIssue from './attach_comment_to_issue';
 
 const mapStateToProps = (state) => {
-    const postId = state['plugins-github'].attachCommentToIssueModalForPostId;
+    const postId = state[`plugins-${pluginId}`].attachCommentToIssueModalForPostId;
     const post = getPost(state, postId);
 
     return {
-        visible: state['plugins-github'].attachCommentToIssueModalVisible,
+        visible: state[`plugins-${pluginId}`].attachCommentToIssueModalVisible,
         post,
     };
 };
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
index 04ee78f7b..fd7f60585 100644
--- a/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/attach_comment_to_issue.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
index 1a8243b1b..05b69ef2b 100644
--- a/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
+++ b/webapp/src/components/post_menu_actions/attach_comment_to_issue/index.js
@@ -1,9 +1,12 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
 
+import {id as pluginId} from 'manifest';
 import {openAttachCommentToIssueModal} from 'actions';
 
 import AttachCommentToIssuePostMenuAction from './attach_comment_to_issue';
@@ -14,7 +17,7 @@ const mapStateToProps = (state, ownProps) => {
 
     return {
         isSystemMessage: systemMessage,
-        connected: state['plugins-github'].connected,
+        connected: state[`plugins-${pluginId}`].connected,
     };
 };
 
diff --git a/webapp/src/components/setting.jsx b/webapp/src/components/setting.jsx
index 59c80fb68..f40521072 100644
--- a/webapp/src/components/setting.jsx
+++ b/webapp/src/components/setting.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -27,14 +30,14 @@ export default class Setting extends React.PureComponent {
                 >
                     {label}
                 </label>
-                {required &&
-                <span
-                    className='error-text'
-                    style={{marginLeft: '3px'}}
-                >
-                    {'*'}
-                </span>
-                }
+                {required && (
+                    <span
+                        className='error-text'
+                        style={{marginLeft: '3px'}}
+                    >
+                        {'*'}
+                    </span>
+                )}
                 <div>
                     {children}
                     <div className='help-text'>
diff --git a/webapp/src/components/sidebar_buttons/index.js b/webapp/src/components/sidebar_buttons/index.js
index 07ce684bb..bf06a1526 100644
--- a/webapp/src/components/sidebar_buttons/index.js
+++ b/webapp/src/components/sidebar_buttons/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
diff --git a/webapp/src/components/sidebar_buttons/sidebar_buttons.jsx b/webapp/src/components/sidebar_buttons/sidebar_buttons.jsx
index f6a51361a..703c4e51c 100644
--- a/webapp/src/components/sidebar_buttons/sidebar_buttons.jsx
+++ b/webapp/src/components/sidebar_buttons/sidebar_buttons.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 import PropTypes from 'prop-types';
diff --git a/webapp/src/components/sidebar_header/index.js b/webapp/src/components/sidebar_header/index.js
index a43173b78..590fefb0d 100644
--- a/webapp/src/components/sidebar_header/index.js
+++ b/webapp/src/components/sidebar_header/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 
 import SidebarHeader from './sidebar_header.jsx';
diff --git a/webapp/src/components/sidebar_header/sidebar_header.jsx b/webapp/src/components/sidebar_header/sidebar_header.jsx
index 8312ca9fb..a4239c40a 100644
--- a/webapp/src/components/sidebar_header/sidebar_header.jsx
+++ b/webapp/src/components/sidebar_header/sidebar_header.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/sidebar_right/github_items.jsx b/webapp/src/components/sidebar_right/github_items.jsx
index a561c5641..37d72335e 100644
--- a/webapp/src/components/sidebar_right/github_items.jsx
+++ b/webapp/src/components/sidebar_right/github_items.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/sidebar_right/index.jsx b/webapp/src/components/sidebar_right/index.jsx
index e671928de..8f241fc24 100644
--- a/webapp/src/components/sidebar_right/index.jsx
+++ b/webapp/src/components/sidebar_right/index.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 
 import SidebarRight from './sidebar_right.jsx';
diff --git a/webapp/src/components/sidebar_right/sidebar_right.jsx b/webapp/src/components/sidebar_right/sidebar_right.jsx
index e63340193..8be4d99ff 100644
--- a/webapp/src/components/sidebar_right/sidebar_right.jsx
+++ b/webapp/src/components/sidebar_right/sidebar_right.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Scrollbars from 'react-custom-scrollbars';
@@ -117,4 +120,4 @@ const style = {
     sectionHeader: {
         padding: '15px',
     },
-};
\ No newline at end of file
+};
diff --git a/webapp/src/components/team_sidebar/index.js b/webapp/src/components/team_sidebar/index.js
index e26ca5836..953fc10e6 100644
--- a/webapp/src/components/team_sidebar/index.js
+++ b/webapp/src/components/team_sidebar/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 
 import TeamSidebar from './team_sidebar.jsx';
diff --git a/webapp/src/components/team_sidebar/team_sidebar.jsx b/webapp/src/components/team_sidebar/team_sidebar.jsx
index c30d5dd41..27fe0a8bb 100644
--- a/webapp/src/components/team_sidebar/team_sidebar.jsx
+++ b/webapp/src/components/team_sidebar/team_sidebar.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/components/user_attribute/index.js b/webapp/src/components/user_attribute/index.js
index c89858d44..4f2321652 100644
--- a/webapp/src/components/user_attribute/index.js
+++ b/webapp/src/components/user_attribute/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
diff --git a/webapp/src/components/user_attribute/user_attribute.jsx b/webapp/src/components/user_attribute/user_attribute.jsx
index 90e896a68..dfe5a951c 100644
--- a/webapp/src/components/user_attribute/user_attribute.jsx
+++ b/webapp/src/components/user_attribute/user_attribute.jsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/webapp/src/constants/index.js b/webapp/src/constants/index.js
index 2c1da24b6..2ff5260c4 100644
--- a/webapp/src/constants/index.js
+++ b/webapp/src/constants/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 export default {
     SETTING_BUTTONS_TEAM: 'team',
     SETTING_BUTTONS_CHANNEL: 'channel',
diff --git a/webapp/src/index.js b/webapp/src/index.js
index c3dfa837b..7b14ef951 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -1,5 +1,6 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
+
 import AttachCommentToIssuePostMenuAction from 'components/post_menu_actions/attach_comment_to_issue';
 import AttachCommentToIssueModal from 'components/modals/attach_comment_to_issue';
 
diff --git a/webapp/src/reducers/index.js b/webapp/src/reducers/index.js
index 01038b89c..2a39b72a0 100644
--- a/webapp/src/reducers/index.js
+++ b/webapp/src/reducers/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {combineReducers} from 'redux';
 
 import ActionTypes from '../action_types';
diff --git a/webapp/src/utils/date_utils.js b/webapp/src/utils/date_utils.js
index 854bc6e45..44e5c4149 100644
--- a/webapp/src/utils/date_utils.js
+++ b/webapp/src/utils/date_utils.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 export function formatDate(date, useMilitaryTime = false) {
     const monthNames = [
         'Jan', 'Feb', 'Mar',
diff --git a/webapp/src/utils/styles.js b/webapp/src/utils/styles.js
index b13677b8c..2190ed08d 100644
--- a/webapp/src/utils/styles.js
+++ b/webapp/src/utils/styles.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 
 export const getStyleForReactSelect = (theme) => {
diff --git a/webapp/src/utils/user_utils.js b/webapp/src/utils/user_utils.js
index cf2329a6b..b091d6560 100644
--- a/webapp/src/utils/user_utils.js
+++ b/webapp/src/utils/user_utils.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import {getFullName} from 'mattermost-redux/utils/user_utils';
 
 export function displayUsernameForUser(user, config) {
diff --git a/webapp/src/websocket/index.js b/webapp/src/websocket/index.js
index f69aeee39..d663388e5 100644
--- a/webapp/src/websocket/index.js
+++ b/webapp/src/websocket/index.js
@@ -1,3 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
 import ActionTypes from '../action_types';
 import Constants from '../constants';
 import {getConnected, getReviews, getUnreads, getYourPrs, getYourAssignments} from '../actions';

From 8a327b46a882c87399437df7dfca50e56e7dfcad Mon Sep 17 00:00:00 2001
From: Nikhil Ranjan <niklabh811@gmail.com>
Date: Thu, 12 Sep 2019 16:51:27 +0200
Subject: [PATCH 10/10] changes as per review

---
 webapp/package-lock.json    | 11 -----------
 webapp/package.json         |  1 -
 webapp/src/actions/index.js |  4 ++--
 webapp/webpack.config.js    |  1 +
 4 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 4728bff6b..8226bc4c3 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -5857,17 +5857,6 @@
         "raf": "^3.1.0"
       }
     },
-    "react-dom": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
-      }
-    },
     "react-input-autosize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 2c2daa152..15dea28b7 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,7 +14,6 @@
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-bootstrap": "0.32.4",
-    "react-dom": "16.8.6",
     "react-custom-scrollbars": "^4.2.1",
     "react-redux": "7.0.3",
     "react-select": "3.0.4",
diff --git a/webapp/src/actions/index.js b/webapp/src/actions/index.js
index 2e885de39..020377ec1 100644
--- a/webapp/src/actions/index.js
+++ b/webapp/src/actions/index.js
@@ -230,7 +230,7 @@ export function closeAttachCommentToIssueModal() {
 }
 
 export function attachCommentToIssue(payload) {
-    return async (dispatch, getState) => {
+    return async (dispatch) => {
         let data;
         try {
             data = await Client.attachCommentToIssue(payload);
@@ -238,7 +238,7 @@ export function attachCommentToIssue(payload) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await dispatch(checkAndHandleNotConnected(data));
         if (!connected) {
             return {error: data};
         }
diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js
index b6da1d3f9..cabf4cd2d 100644
--- a/webapp/webpack.config.js
+++ b/webapp/webpack.config.js
@@ -65,6 +65,7 @@ module.exports = {
         'react-redux': 'ReactRedux',
         'prop-types': 'PropTypes',
         'react-bootstrap': 'ReactBootstrap',
+        'react-dom': 'ReactDOM',
     },
     output: {
         path: path.join(__dirname, '/dist'),