[MI-1860]Added "Attach to gilab issue" modal

1. Button in context menu to open "Attach to gitlab issue" modal.
2. Created modal to attach comment to issue.

server/api.go

@@ -60,6 +60,7 @@ func (p *Plugin) initializeAPI() {
 	apiRouter.HandleFunc("/assignees", p.checkAuth(p.attachUserContext(p.getAssignees), ResponseTypePlain)).Methods(http.MethodGet)
 	apiRouter.HandleFunc("/milestones", p.checkAuth(p.attachUserContext(p.getMilestones), ResponseTypePlain)).Methods(http.MethodGet)
 	apiRouter.HandleFunc("/issue", p.checkAuth(p.attachUserContext(p.createIssue), ResponseTypePlain)).Methods(http.MethodPost)
+	apiRouter.HandleFunc("/searchissues", p.checkAuth(p.attachUserContext(p.searchIssues), ResponseTypePlain)).Methods(http.MethodGet)
 	apiRouter.HandleFunc("/settings", p.checkAuth(p.attachUserContext(p.updateSettings), ResponseTypePlain)).Methods(http.MethodPost)
 }
 
@@ -631,6 +632,17 @@ func (p *Plugin) getPermaLink(postID string) string {
 	return fmt.Sprintf("%v/_redirect/pl/%v", siteURL, postID)
 }
 
+func (p *Plugin) searchIssues(c *UserContext, w http.ResponseWriter, r *http.Request) {
+	search := r.FormValue("search")
+	result, err := p.GitlabClient.SearchIssues(c.Ctx, c.GitlabInfo, search)
+	if err != nil {
+		c.Log.WithError(err).Warnf("Unable to search issues in GitLab API")
+		p.writeAPIError(w, &APIErrorResponse{ID: "", Message: fmt.Sprintf("Unable to search issues in GitLab API. Error: %d", err), StatusCode: http.StatusInternalServerError})
+		return
+	}
+
+	p.writeAPIResponse(w, result)
+}
 func (p *Plugin) getYourProjects(c *UserContext, w http.ResponseWriter, r *http.Request) {
 	result, err := p.GitlabClient.GetYourProjects(c.Ctx, c.GitlabInfo)
 	if err != nil {

server/gitlab/api.go

@@ -504,6 +504,26 @@ func (g *gitlab) CreateIssue(ctx context.Context, user *UserInfo, issue *IssueRe
 	return result, nil
 }
 
+func (g *gitlab) SearchIssues(ctx context.Context, user *UserInfo, search string) ([]*internGitlab.Issue, error) {
+	client, err := g.gitlabConnect(*user.Token)
+	if err != nil {
+		return nil, err
+	}
+
+	result, resp, err := client.Search.Issues(
+		search,
+		&internGitlab.SearchOptions{},
+		internGitlab.WithContext(ctx),
+	)
+	if respErr := checkResponse(resp); respErr != nil {
+		return nil, respErr
+	}
+	if err != nil {
+		return nil, errors.Wrap(err, "can't search issues in GitLab api")
+	}
+	return result, nil
+}
+
 func (g *gitlab) ResolveNamespaceAndProject(
 	ctx context.Context,
 	userInfo *UserInfo,

server/gitlab/gitlab.go

@@ -24,11 +24,12 @@ type Gitlab interface {
 	GetCurrentUser(ctx context.Context, userID string, token oauth2.Token) (*UserInfo, error)
 	GetUserDetails(ctx context.Context, user *UserInfo) (*internGitlab.User, error)
 	GetProject(ctx context.Context, user *UserInfo, owner, repo string) (*internGitlab.Project, error)
+	CreateIssue(ctx context.Context, user *UserInfo, issue *IssueRequest) (*internGitlab.Issue, error)
+	SearchIssues(ctx context.Context, user *UserInfo, search string) ([]*internGitlab.Issue, error)
 	GetReviews(ctx context.Context, user *UserInfo) ([]*internGitlab.MergeRequest, error)
 	GetYourPrs(ctx context.Context, user *UserInfo) ([]*internGitlab.MergeRequest, error)
 	GetYourAssignments(ctx context.Context, user *UserInfo) ([]*internGitlab.Issue, error)
 	GetUnreads(ctx context.Context, user *UserInfo) ([]*internGitlab.Todo, error)
-	CreateIssue(ctx context.Context, user *UserInfo, issue *IssueRequest) (*internGitlab.Issue, error)
 	GetYourProjects(ctx context.Context, user *UserInfo) ([]*internGitlab.Project, error)
 	GetLabels(ctx context.Context, user *UserInfo, projectID string) ([]*internGitlab.Label, error)
 	GetAssignees(ctx context.Context, user *UserInfo, projectID string) ([]*internGitlab.ProjectMember, error)

webapp/package.json

@@ -11,6 +11,7 @@
     "dependencies": {
         "core-js": "3.6.5",
         "csstype": "3.0.3",
+        "debounce-promise": "3.1.2",
         "mattermost-redux": "5.27.0",
         "prop-types": "15.7.2",
         "react": "16.13.1",

webapp/src/action_types/index.js

@@ -12,4 +12,6 @@ export default {
     OPEN_CREATE_ISSUE_MODAL_WITHOUT_POST: `${id}_open_create_modal_without_post`,
     CLOSE_CREATE_ISSUE_MODAL: `${id}_close_create_modal`,
     RECEIVED_PROJECTS: `${id}_received_projects`,
+    CLOSE_ATTACH_COMMENT_TO_ISSUE_MODAL: `${id}_close_attach_modal`,
+    OPEN_ATTACH_COMMENT_TO_ISSUE_MODAL: `${id}_open_attach_modal`,
 };

webapp/src/actions/index.js

@@ -255,6 +255,21 @@ export function createIssue(payload) {
     };
 }
 
+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 getProjects() {
     return async (dispatch, getState) => {
         let data;

webapp/src/client/client.js

@@ -38,6 +38,10 @@ export default class Client {
         return this.doPost(`${this.url}/issue`, payload);
     }
 
+    searchIssues = async (searchTerm) => {
+        return this.doGet(`${this.url}/searchissues?search=${searchTerm}`);
+    }
+
     getProjects = async () => {
         return this.doGet(`${this.url}/projects`);
     }

webapp/src/components/attach_comment_to_issue_menu/attach_comment_to_issue.jsx

@@ -20,7 +20,7 @@ export default class AttachCommentToIssuePostMenuAction extends PureComponent {
     handleClick = (e) => {
         const {open, postId} = this.props;
         e.preventDefault();
-        // open(postId);
+        open(postId);
     };
 
     render() {

webapp/src/components/gitlab_issue_selector.jsx

@@ -0,0 +1,152 @@
+// 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';
+import AsyncSelect from 'react-select/async';
+
+import {getStyleForReactSelect} from 'utils/styles';
+import Client from 'client';
+
+const searchDebounceDelay = 400;
+
+export default class GitlabIssueSelector extends PureComponent {
+    static propTypes = {
+        required: PropTypes.bool,
+        theme: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
+        error: PropTypes.string,
+        value: PropTypes.object,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {invalid: false};
+    }
+
+    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 = async (text) => {
+        // const textEncoded = encodeURIComponent(text.trim().replace(/"/g, '\\"'));
+
+        let issues = await Client.searchIssues(text)
+
+        if (!Array.isArray(issues)) {
+            return [];
+        }
+
+        return issues.map((issue) => {
+            const projectParts = issue.web_url.split('/');
+            let prefix = '';
+            if (projectParts.length >= 5) {
+                prefix = `${projectParts[projectParts.length - 5]}/${projectParts[projectParts.length - 4]}`;
+            }
+            return ({value: issue, label: `${prefix}, #${issue.iid}: ${issue.title}`});
+        });
+    };
+
+    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'}
+                >
+                    {'GitLab 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 created.'} <br/>
+                </div>
+            </div>
+        );
+    }
+}