[GH-61]: Adding "Create Issue" and "Attach Comment to Issue" modals

server/api.go

@@ -778,7 +778,7 @@ func (p *Plugin) getYourProjects(c *UserContext, w http.ResponseWriter, r *http.
 	})
 	if err != nil {
 		c.Log.WithError(err).Warnf("can't list projects in GitLab")
-		p.writeAPIError(w, &APIErrorResponse{ID: "", Message: "unable to list projects in GitLab.", StatusCode: http.StatusInternalServerError})
+		p.writeAPIError(w, &APIErrorResponse{ID: "", Message: "Unable to list projects in GitLab.", StatusCode: http.StatusInternalServerError})
 		return
 	}
 

server/gitlab/api.go

@@ -7,6 +7,7 @@ import (
 	"strings"
 	"sync"
 
+	"github.com/mattermost/mattermost/server/public/model"
 	"github.com/mattermost/mattermost/server/public/pluginapi/experimental/bot/logger"
 
 	"github.com/pkg/errors"
@@ -660,13 +661,12 @@ func (g *gitlab) GetYourProjects(ctx context.Context, user *UserInfo, token *oau
 	if err != nil {
 		return nil, err
 	}
-	owned := true
 
 	var projects []*internGitlab.Project
 	if g.gitlabGroup == "" {
 		result, resp, err := client.Projects.ListProjects(
 			&internGitlab.ListProjectsOptions{
-				Owned: &owned,
+				Owned: model.NewBool(true),
 			},
 			internGitlab.WithContext(ctx),
 		)
@@ -682,7 +682,7 @@ func (g *gitlab) GetYourProjects(ctx context.Context, user *UserInfo, token *oau
 		result, resp, err := client.Groups.ListGroupProjects(
 			g.gitlabGroup,
 			&internGitlab.ListGroupProjectsOptions{
-				Owned: &owned,
+				Owned: model.NewBool(true),
 			},
 			internGitlab.WithContext(ctx),
 		)

webapp/src/components/form_button.tsx

@@ -3,16 +3,16 @@
 
 import React from 'react';
 
-type PropTypes = {
+type Prop = {
     disabled?: boolean;
-    defaultMessage?: string,
+    defaultMessage?: string;
     btnClass?: string;
     saving?: boolean;
     savingMessage?: string;
     onClick?: () => void;
 };
 
-const FormButton = ({saving, disabled, savingMessage, defaultMessage, btnClass, onClick}: PropTypes) => {
+const FormButton = ({saving, disabled, savingMessage, defaultMessage, btnClass, onClick}: Prop) => {
     const contents = saving ? (
         <span>
             <span

webapp/src/components/gitlab_assignee_selector/index.tsx

@@ -17,10 +17,10 @@ type PropTypes = {
 };
 
 const GitlabAssigneeSelector = ({projectID, projectName, theme, selectedAssignees, onChange}: PropTypes) => {
-    const returnType = ['id', 'username'];
+    const returnType: [string, string] = ['id', 'username'];
     const errorMessage = 'failed to load assignees';
 
-    const loadAssignees = useOptions(projectName, getAssigneeOptions as FetchIssueAttributeOptionsForProject, returnType, errorMessage, projectID);
+    const loadAssignees = useOptions({projectName, getOptions: getAssigneeOptions as FetchIssueAttributeOptionsForProject<Assignee>, returnType, errorMessage, projectID});
 
     return (
         <div className='form-group margin-bottom x3'>

webapp/src/components/gitlab_issue_selector.tsx

@@ -72,7 +72,7 @@ const GitlabIssueSelector = ({name, required, theme, onChange, error, value, add
         return debouncedSearchIssues(inputValue);
     };
 
-    const searchIssues = async (text: string) => {
+    const searchIssues = async (text: string): Promise<ReactSelectOption[]> => {
         const textEncoded = encodeURIComponent(text.trim().replace(/\\/g, '\\\\').replace(/"/g, '\\"'));
         try {
             const issues = await Client.searchIssues(textEncoded);

webapp/src/components/gitlab_label_selector/index.tsx

@@ -17,10 +17,10 @@ type PropTypes = {
 };
 
 const GitlabLabelSelector = ({projectID, projectName, theme, selectedLabels, onChange}: PropTypes) => {
-    const returnType = ['name', 'name'];
+    const returnType: [string, string] = ['name', 'name'];
     const errorMessage = 'failed to load labels';
 
-    const loadLabels = useOptions(projectName, getLabelOptions as FetchIssueAttributeOptionsForProject, returnType, errorMessage, projectID);
+    const loadLabels = useOptions({projectName, getOptions: getLabelOptions as FetchIssueAttributeOptionsForProject<Label>, returnType, errorMessage, projectID});
 
     return (
         <div className='form-group margin-bottom x3'>

webapp/src/components/gitlab_milestone_selector/index.tsx

@@ -17,10 +17,10 @@ type PropTypes = {
 };
 
 const GitlabMilestoneSelector = ({projectID, projectName, theme, selectedMilestone, onChange}: PropTypes) => {
-    const returnType = ['id', 'title'];
+    const returnType: [string, string] = ['id', 'title'];
     const errorMessage = 'failed to load milestones';
 
-    const loadMilestones = useOptions(projectName, getMilestoneOptions as FetchIssueAttributeOptionsForProject, returnType, errorMessage, projectID);
+    const loadMilestones = useOptions({projectName, getOptions: getMilestoneOptions as FetchIssueAttributeOptionsForProject<Milestone>, returnType, errorMessage, projectID});
 
     return (
         <div className='form-group margin-bottom x3'>

webapp/src/components/gitlab_project_selector/index.tsx

@@ -1,14 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {Theme} from 'mattermost-redux/types/preferences';
 
 import {getProjects} from 'src/actions';
-import manifest from 'src/manifest';
 import ReactSelectSetting from 'src/components/react_select_setting';
 import {GlobalState} from 'src/types/global_state';
+import {getPluginState} from 'src/selectors';
+import {getErrorMessage} from 'src/utils/user_utils';
 
 type PropTypes = {
     theme: Theme;
@@ -21,10 +22,9 @@ type PropTypes = {
 
 const GitlabProjectSelector = ({theme, required, onChange, value, addValidate, removeValidate}: PropTypes) => {
     const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string>('');
 
-    const {yourProjects} = useSelector((state: GlobalState) => ({
-        yourProjects: state[`plugins-${manifest.id}` as pluginReduxStoreKey].yourProjects,
-    }));
+    const myProjects = useSelector((state: GlobalState) => getPluginState(state).yourProjects);
 
     const dispatch = useDispatch();
 
@@ -34,16 +34,25 @@ const GitlabProjectSelector = ({theme, required, onChange, value, addValidate, r
 
     const loadProjects = async () => {
         setIsLoading(true);
-        await dispatch(getProjects());
+        const res: any = await dispatch(getProjects());
+        if (res.error) {
+            const errMessage = getErrorMessage((res as { error: ErrorType }).error.message);
+            setError(errMessage);
+        } else {
+            setError('');
+        }
+
         setIsLoading(false);
     };
 
     const handleOnChange = (_: string, name: string) => {
-        const project = yourProjects.find((p: Project) => p.path_with_namespace === name);
+        const project = myProjects.find((p: Project) => p.path_with_namespace === name);
         onChange(project ? {name, project_id: project?.id} : null);
     };
 
-    const projectOptions = yourProjects.map((item: Project) => ({value: item.path_with_namespace, label: item.path_with_namespace}));
+    const projectOptions = useMemo(() => {
+        return myProjects.map((item: Project) => ({value: item.path_with_namespace, label: item.path_with_namespace}));
+    }, [myProjects]);
 
     return (
         <div className={'form-group margin-bottom x3'}>
@@ -64,6 +73,18 @@ const GitlabProjectSelector = ({theme, required, onChange, value, addValidate, r
             <div className={'help-text'}>
                 {'Returns GitLab projects connected to the user account'}
             </div>
+            {error && (
+                <p
+                    className='alert alert-danger'
+                    style={{marginTop: '10px'}}
+                >
+                    <i
+                        className='fa fa-warning'
+                        title='Warning Icon'
+                    />
+                    <span> {error}</span>
+                </p>
+            )}
         </div>
     );
 };

webapp/src/components/issue_attribute_selector.tsx

@@ -29,7 +29,7 @@ const IssueAttributeSelector = ({isMulti, projectName, theme, label, onChange, l
         if (projectName) {
             loadSelectOptions();
         }
-    }, []);
+    }, [projectName]);
 
     const prevProjectName = usePrevious(projectName);
 

webapp/src/components/post_options/attach_comment_to_issue.tsx

@@ -11,6 +11,7 @@ import manifest from 'src/manifest';
 import GitLabIcon from 'src/images/icons/gitlab';
 import {openAttachCommentToIssueModal} from 'src/actions';
 import {GlobalState} from 'src/types/global_state';
+import {isUserConnectedToGitlab} from 'src/selectors';
 
 interface PropTypes {
     postId: string;
@@ -19,10 +20,10 @@ interface PropTypes {
 const AttachCommentToIssuePostMenuAction = ({postId}: PropTypes) => {
     const {show} = useSelector((state: GlobalState) => {
         const post = getPost(state, postId);
-        const systemMessage = Boolean(!post || isSystemMessage(post));
+        const isPostSystemMessage = Boolean(!post || isSystemMessage(post));
 
         return {
-            show: state[`plugins-${manifest.id}` as pluginReduxStoreKey].connected && !systemMessage,
+            show: isUserConnectedToGitlab(state) && !isPostSystemMessage,
         };
     });
 

webapp/src/components/post_options/create_issue.tsx

@@ -10,6 +10,7 @@ import GitLabIcon from 'src/images/icons/gitlab';
 import manifest from 'src/manifest';
 import {openCreateIssueModal} from 'src/actions';
 import {GlobalState} from 'src/types/global_state';
+import {isUserConnectedToGitlab} from 'src/selectors';
 
 type PropTypes = {
     postId: string;
@@ -18,10 +19,10 @@ type PropTypes = {
 const CreateIssuePostMenuAction = ({postId}: PropTypes) => {
     const {show} = useSelector((state: GlobalState) => {
         const post = getPost(state, postId);
-        const systemMessage = Boolean(!post || isSystemMessage(post));
+        const isPostSystemMessage = Boolean(!post || isSystemMessage(post));
 
         return {
-            show: state[`plugins-${manifest.id}` as pluginReduxStoreKey].connected && !systemMessage,
+            show: isUserConnectedToGitlab(state) && !isPostSystemMessage,
         };
     });
 

webapp/src/components/sidebar_buttons/sidebar_buttons.tsx

@@ -11,6 +11,7 @@ import {RHSStates, connectUsingBrowserMessage} from '../../constants';
 import {isDesktopApp} from '../../utils/user_agent';
 
 import {GitLabIssuesIcon, GitLabMergeRequestIcon, GitLabReviewsIcon, GitLabTodosIcon} from '../../utils/icons';
+import {Item} from 'src/types/gitlab_items';
 
 interface SidebarButtonsProps {
     theme: Theme;
@@ -19,10 +20,10 @@ interface SidebarButtonsProps {
     org: string;
     clientId: string;
     gitlabURL: string;
-    reviews?: unknown[];
-    todos?: unknown[];
-    yourAssignedPrs?: unknown[];
-    yourAssignedIssues?: unknown[];
+    reviews?: Item[];
+    todos?: Item[];
+    yourAssignedPrs?: Item[];
+    yourAssignedIssues?: Item[];
     isTeamSidebar: boolean;
     pluginServerRoute: string;
     showRHSPlugin: () => void;

webapp/src/hooks/use_options.ts

@@ -1,7 +1,14 @@
-import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-export const useOptions = (projectName: string, getOptions: FetchIssueAttributeOptionsForProject, returnFields: string[], errorMessage: string, projectID?: number) => {
+type useOptionsProps = {
+    projectName: string;
+    getOptions: FetchIssueAttributeOptionsForProject<AttributeType>;
+    returnType: [string, string];
+    errorMessage: string;
+    projectID?: number;
+}
+
+export const useOptions = ({projectName, getOptions, returnType, errorMessage, projectID}: useOptionsProps) => {
     const dispatch = useDispatch();
 
     const loadOptions = async () => {
@@ -19,8 +26,8 @@ export const useOptions = (projectName: string, getOptions: FetchIssueAttributeO
         }
 
         return options.data.map((option: any) => ({
-            value: option[returnFields[0]],
-            label: option[returnFields[1]],
+            value: option[returnType[0]],
+            label: option[returnType[1]],
         }));
     };
     return loadOptions;

webapp/src/hooks/use_previous.ts

@@ -1,13 +1,12 @@
 import {useEffect, useRef} from 'react';
 import {Post} from 'mattermost-redux/types/posts';
 
+// Extension of https://stackoverflow.com/a/53446665
 export const usePrevious = (value: string | Post | null | undefined) => {
     const ref: React.MutableRefObject<string | Post | null | undefined> = useRef();
 
-    // Store current value in ref
     useEffect(() => {
         ref.current = value;
-    }, [value]); // Only re-run if value changes
-    // Return previous value (happens before update in useEffect above)
+    }, [value]);
     return ref.current;
 };

webapp/src/selectors/index.js

@@ -43,6 +43,8 @@ function mapPrsToDetails(prs, details) {
 
 export const getPluginState = (state) => state[`plugins-${manifest.id}`];
 
+export const isUserConnectedToGitlab = (state) => state[`plugins-${manifest.id}`].connected;
+
 export const getSidebarData = createSelector(
     getPluginState,
     (pluginState) => {

webapp/src/types/common.d.ts

@@ -1,7 +1,7 @@
 type OnChangeType = SelectionType | SelectionType[] | null;
 
 type SelectionType = {
-    value: number | string;
+    value: number | string | Issue;
     label: string;
 }
 
@@ -11,7 +11,14 @@ type ErrorType = {
 
 type pluginReduxStoreKey = 'plugins-com.github.manland.mattermost-plugin-gitlab'
 
-type FetchIssueAttributeOptionsForProject = (projectID?: number) => (dispatch: Dispatch<GenericAction>) => Promise<{
+type AttributeType = Assignee | Milestone | Label;
+
+type FetchIssueAttributeOptionsForProject<T> = (projectID?: number) => (dispatch: Dispatch<GenericAction>) => Promise<{
     error?: ErrorType;
-    data?: Assignee[] | Milestone[] | Label[];
+    data?: T[];
 }>
+
+type ReactSelectOption = {
+    value: Issue;
+    label: string;
+}

webapp/src/types/gitlab_types.d.ts

@@ -2,9 +2,9 @@ interface IssueBody {
     title: string;
     description: string;
     project_id?: number;
-    labels?: (string | number)[];
-    assignees?: (string | number)[];
-    milestone?: (string | number);
+    labels?: (string | number | Issue)[];
+    assignees?: (string | number | Issue)[];
+    milestone?: (string | number | Issue);
     post_id: string;
     channel_id: string;
 }

webapp/src/types/mattermost-webapp/index.d.ts

@@ -23,6 +23,8 @@ export interface PluginRegistry {
     registerPopoverUserAttributesComponent(component: React.ReactNode)
     registerLinkTooltipComponent(component: React.ReactNode)
     registerReconnectHandler(handler: any)
+    registerPostDropdownMenuComponent(component: React.ReactNode)
+    registerRootComponent(component: ReactDOM)
 
     // Add more if needed from https://developers.mattermost.com/extend/plugins/webapp/reference
 }