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

raghavaggarwal2308 · 2022-06-20T18:01:37Z

Summary

Added a modal to create a GitLab issue on an existing project of the user.

Created API to get all user projects, project labels, project assignees, project milestones, GitLab issues, and create an issue.
Created a "CreateIssueModal" component to create an issue on GitLab and an "AttachCommentToIssueModal" component to attach comment to an existing issue on Gitlab.
Created a "CreateIssuePostMenuAction" and "AttachCommentToIssuePostMenuAction" component and registered it as "PostDropdownMenuComponent" to open the create issue modal and attach comment to issue modal.
Configured babel-loader to load .tsx and .ts files.
Upgraded the dependencies in package.json to match the dependencies in the GitHub plugin.

Screenshots

Click "Create Gitlab Issue" or "Attach to Gitlab issue" in the context menu (shown when a user connects their GitLab account with the plugin installed) on non-system messages
Create Gilab issue modal will open
Search and select a Project and title of the issue
Select labels, assignees, milestone, and description if any, and click submit to create an issue
Attach comment to issue modal

Ticket

Fixes #61 (Adding create issue modal and Attach comment to issue modal)
Fixes #402

1. Converted files to .tsx 2. Defined proper types

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

1. Created api endpoint to attach comment to an issue.

1. Added message when comment is created.

1. Handled error while making call for searching issues.

1. Converted file to .tsx. 2. Removed redundant code.

…tlab into MI-1860

1. Fixed error messages.

1. Made first letter of error lowercase 2. Used shorthand 3. fixed lint errors

…tlab into MI-1860 Review fixes: 1. Defined types and converted files to .tsx

1. Defined proper types 2. Changed file extension of types file to .d.ts

1. Corrected error messages in api.go. 2. Added EOF.

1. Moved type "Actions" from index.ts to main file. 2. Converted form_button to fuctional component. 3. Converted gitlab.jsx to .tsx.

1. Converted gitlab.tsx to funtional component. 2. Optional chaining while checking for error in loadoptions function.

Review Fixes and created new branch.

mattermod · 2022-06-20T18:01:41Z

Hello @raghavaggarwal2308,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

codecov · 2022-06-20T18:04:55Z

Codecov Report

Attention: Patch coverage is 2.57353% with 265 lines in your changes missing coverage. Please review.

Project coverage is 32.02%. Comparing base (191a11a) to head (e0e2765).
Report is 9 commits behind head on master.

❗ Current head e0e2765 differs from pull request most recent head 6758220

Please upload reports for the commit 6758220 to get more accurate results.

Files	Patch %	Lines
server/api.go	3.12%	217 Missing ⚠️
server/command.go	0.00%	25 Missing ⚠️
server/plugin.go	0.00%	23 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #306      +/-   ##
==========================================
- Coverage   34.02%   32.02%   -2.00%     
==========================================
  Files          22       22              
  Lines        4021     4293     +272     
==========================================
+ Hits         1368     1375       +7     
- Misses       2515     2780     +265     
  Partials      138      138

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…t-plugin-gitlab into create_issue_modal

1. Added "react-dom" dependency in package.json

…t-plugin-gitlab into new-MI-1860

1. Converted class components to functional components. 2. Used absolute paths.

1. Removed mapStateToProps/mapDispatchToProps from functional components and used useSelector/useDispatch.

…most-plugin-gitlab into new-MI-1860

…ab into create_issue_modal

mickmister

Nice work @raghavaggarwal2308 👍 This feature has a high impact for the plugin

I gave the PR another review and left some comments. Generally approving but want to give you a chance to discuss before approving. Let me know what you think

Also, can you please create some gifs of this feature working so it's easy for UX designers to see it in action?

For the project selector in the attach comment modal #306 (comment)

Just a suggestion for point 4, we can also use the config setting "Gitlab Group". When the setting is empty we can show all issues and when it is specified we can display the issues related to that group only.

Are we able to filter on projects where the user is a member or collaborator, if the gitlab group is not set?

server/gitlab/api.go

webapp/src/components/form_button.tsx

mickmister · 2024-05-13T13:52:19Z

webapp/src/components/form_button.tsx

+type PropTypes = {
+    disabled?: boolean;
+    defaultMessage?: string,
+    btnClass?: string;
+    saving?: boolean;
+    savingMessage?: string;
+    onClick?: () => void;
+};


Should some of these be set to required? I know this is likely copied from another project

This is used at multiple places, and each uses different props. So none of them are required.

mickmister · 2024-05-13T14:00:30Z

webapp/src/hooks/use_options.ts

+        if (!projectName) {
+            return [];
+        }


So if a project has not been selected yet, we unconditionally return an empty array (of assignees for instance). Should we disable the select component in this case if it's always going to be empty?

The assignees and other options are hidden for a user until the user selects the project. Same can be seen in the video. #306 (comment)

webapp/src/components/post_options/create_issue.tsx

webapp/src/components/issue_attribute_selector.tsx

mickmister · 2024-05-13T17:40:54Z

webapp/src/components/issue_attribute_selector.tsx

+};
+
+const IssueAttributeSelector = ({isMulti, projectName, theme, label, onChange, loadOptions, selection}: PropTypes) => {
+    const [options, setOptions] = useState<SelectionType[]>([]);


I can't tell what SelectionType is or where it's defined

It is defined in the types folder under common types https://github.com/Brightscout/mattermost-plugin-gitlab/blob/1f9fbc3912fb9b8f5f7f679dff259cb44a63efa1/webapp/src/types/common.d.ts#L3

mickmister · 2024-05-13T17:41:46Z

webapp/src/components/issue_attribute_selector.tsx

+    useEffect(() => {
+        if (projectName && prevProjectName !== projectName) {
+            loadSelectOptions();
+        }
+    }, [projectName]);


Should we add prevProjectName to the array?

Suggested change

useEffect(() => {

if (projectName && prevProjectName !== projectName) {

loadSelectOptions();

}

}, [projectName]);

useEffect(() => {

if (projectName && prevProjectName !== projectName) {

loadSelectOptions();

}

}, [projectName, prevProjectName]);

We should really be using the react hooks eslint rule to find these sorts of cases

I don't think we need prevProjectName in the array, as its value will change when we update the projectName

mickmister · 2024-06-19T04:14:33Z

@raghavaggarwal2308 Are you or another developer planning on continuing work on this?

raghavaggarwal2308 · 2024-06-19T07:19:27Z

@raghavaggarwal2308 Are you or another developer planning on continuing work on this?

@mickmister Yeah, we will work on this ASAP. Apologies for the delay.

…ab into create_issue_modal

ayusht2810 · 2024-06-27T07:46:23Z

Video for the feature:
screen-capture (7).webm

ayusht2810 · 2024-06-27T09:26:42Z

@mickmister Fixed the review fixes. Please re-review.

Are we able to filter on projects where the user is a member or collaborator, if the gitlab group is not set?

Also can you provide more details on this comment?

mickmister · 2024-06-27T16:59:45Z

Are we able to filter on projects where the user is a member or collaborator, if the gitlab group is not set?

Also can you provide more details on this comment?

@ayusht2810 If the gitlab group is not set in the system console: Can we make it so the user only sees projects where the user a member or collaborator? Meaning, the user shouldn't see projects that they have no association with in the project selectors

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

webapp/src/types/gitlab_types.d.ts

webapp/src/components/gitlab_project_selector/index.tsx

webapp/src/components/form_button.tsx

raghavaggarwal2308 · 2024-06-28T09:12:53Z

@mickmister Fixed the review comments added by you

webapp/src/components/modals/create_issue/create_issue_form.tsx

ayusht2810 · 2024-07-01T12:15:37Z

@mickmister Fixed the review fixes. Please re-review

AayushChaudhary0001

@raghavaggarwal2308 Found a issue while testing this PR.
Issue: Private projects are accessible without any granted permissions (Access to the private repository is kept off from sysytem console).

Steps to reproduce:

Enter a message in channel
Go to the message action
Select the option 'Create GitLab Issue'
Check the project suggestions in the Project dropdown

Expected: Private projects should not be accessibile without the permission
Actual: Private projects are accessibile without the granted permission

…ab into create_issue_modal

ayusht2810 · 2024-07-09T14:04:04Z

Expected: Private projects should not be accessibile without the permission

@AayushChaudhary0001 Regarding the expected behavior, the system console settings for Enable Private Repositories is related to subscription and not to this issue creation feature as seen in the help text (Optional) Allow the plugin to work with private repositories for subscriptions. Should we update the help text to disable private repo for all the features if the setting is disabled?

AayushChaudhary0001

Approving this PR, as everything is working fine for this, will create a separate issue regarding the flow above.

raghavaggarwal2308 added 20 commits June 16, 2022 20:26

[MI-1847] Created new branch for create-issue-modal

23015c1

[MI-1847] fixed error while running make check-style

10d90d9

[MI-1847]Review fixes

f6172d2

1. Converted files to .tsx 2. Defined proper types

[MI-1847]Fixed initial srtate of milestone in create_issue.tsx

114774c

[MI-1860]Added attach comment to gitlab issue button

a054a7d

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

cc7f9cc

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

[MI-1860]Attach comment endpoint

f7e864f

1. Created api endpoint to attach comment to an issue.

[MI-1860]Added post message

7f193d0

1. Added message when comment is created.

[MI-1860]Handled error

af71d4e

1. Handled error while making call for searching issues.

Code formatting

e3ca566

1. Converted file to .tsx. 2. Removed redundant code.

Merge branch 'MI-1847' of github.com:Brightscout/mattermost-plugin-gi…

bcaea3f

…tlab into MI-1860

[MI-1860]Pull from MI-1847

a753160

1. Fixed error messages.

removed //eslint-diable...

b5b12b1

[MI-1860]Review fixes

6fd1907

1. Made first letter of error lowercase 2. Used shorthand 3. fixed lint errors

Merge branch 'MI-1847' of github.com:Brightscout/mattermost-plugin-gi…

a324c0a

…tlab into MI-1860 Review fixes: 1. Defined types and converted files to .tsx

[MI-1860]Review Fixes

b04d319

1. Defined proper types 2. Changed file extension of types file to .d.ts

[MI-1860]Fixes

08318e6

1. Corrected error messages in api.go. 2. Added EOF.

[MI-1847] Review fixes

1511295

1. Moved type "Actions" from index.ts to main file. 2. Converted form_button to fuctional component. 3. Converted gitlab.jsx to .tsx.

[MI-1847]Review Fixes

395ead8

1. Converted gitlab.tsx to funtional component. 2. Optional chaining while checking for error in loadoptions function.

Merge pull request #9 from Brightscout/new-MI-1847

78e2fe4

Review Fixes and created new branch.

raghavaggarwal2308 requested a review from mickmister as a code owner June 20, 2022 18:01

raghavaggarwal2308 changed the title ~~Adding create issue modal~~ [GH-61]: Adding create issue modal Jun 21, 2022

raghavaggarwal2308 added 6 commits June 21, 2022 13:01

Merge branch 'create_issue_modal' of github.com:Brightscout/mattermos…

be79e99

…t-plugin-gitlab into create_issue_modal

Fixed CI error

f63ed27

1. Added "react-dom" dependency in package.json

Merge branch 'create_issue_modal' of github.com:Brightscout/mattermos…

7280b93

…t-plugin-gitlab into new-MI-1860

[MI-1847]Fixes

f444757

1. Converted class components to functional components. 2. Used absolute paths.

[MI-1847]Review FIxes

612dae9

1. Removed mapStateToProps/mapDispatchToProps from functional components and used useSelector/useDispatch.

Merge branch 'MI-1847-component-fix' of github.com:Brightscout/matter…

53c2fc0

…most-plugin-gitlab into new-MI-1860

Merge branch 'master' of github.com:mattermost/mattermost-plugin-gitl…

fe33b33

…ab into create_issue_modal

mickmister reviewed May 13, 2024

View reviewed changes

linus-ha mentioned this pull request Jun 13, 2024

Create issues through slash commands #402

Closed

ayusht2810 added 2 commits June 27, 2024 12:58

Review fixes: Add new types, error state and some refactoring

f01c791

Merge branch 'master' of github.com:mattermost/mattermost-plugin-gitl…

1f9fbc3

…ab into create_issue_modal

Fix package-lock.json file

c09c256

ayusht2810 requested a review from mickmister June 27, 2024 09:26

mickmister approved these changes Jun 27, 2024

View reviewed changes

mickmister removed the 2: Dev Review Requires review by a core committer label Jun 27, 2024

[MM-527] Review fixes

7216af6

mickmister approved these changes Jun 28, 2024

View reviewed changes

webapp/src/components/modals/create_issue/create_issue_form.tsx Outdated Show resolved Hide resolved

raghavaggarwal2308 modified the milestones: v1.9.0, v1.10.0 Jul 1, 2024

Create a new type

6758220

mickmister approved these changes Jul 1, 2024

View reviewed changes

AayushChaudhary0001 reviewed Jul 8, 2024

View reviewed changes

raghavaggarwal2308 and others added 3 commits July 9, 2024 15:05

Merge branch 'master' of github.com:mattermost/mattermost-plugin-gitl…

625e227

…ab into create_issue_modal

Update package-lock.json file due to ci errors

dbe16e3

Fix type errors

90a50a3

AayushChaudhary0001 approved these changes Jul 18, 2024

View reviewed changes

raghavaggarwal2308 merged commit c7208c0 into mattermost:master Jul 18, 2024
7 checks passed

raghavaggarwal2308 deleted the create_issue_modal branch July 18, 2024 10:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

raghavaggarwal2308 commented Jun 20, 2022 •

edited

Loading

mattermod commented Jun 20, 2022

codecov bot commented Jun 20, 2022 •

edited

Loading

mickmister left a comment

mickmister May 13, 2024

ayusht2810 Jun 27, 2024

mickmister May 13, 2024

ayusht2810 Jun 27, 2024 •

edited

Loading

mickmister May 13, 2024

ayusht2810 Jun 27, 2024

mickmister May 13, 2024

mickmister May 24, 2024

ayusht2810 Jun 27, 2024

mickmister commented Jun 19, 2024

raghavaggarwal2308 commented Jun 19, 2024

ayusht2810 commented Jun 27, 2024

ayusht2810 commented Jun 27, 2024

mickmister commented Jun 27, 2024

raghavaggarwal2308 commented Jun 28, 2024

ayusht2810 commented Jul 1, 2024

AayushChaudhary0001 left a comment

ayusht2810 commented Jul 9, 2024

AayushChaudhary0001 left a comment •

edited by raghavaggarwal2308

Loading

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

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

Conversation

raghavaggarwal2308 commented Jun 20, 2022 • edited Loading

Summary

Screenshots

Ticket

mattermod commented Jun 20, 2022

codecov bot commented Jun 20, 2022 • edited Loading

Codecov Report

mickmister left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ayusht2810 Jun 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mickmister commented Jun 19, 2024

raghavaggarwal2308 commented Jun 19, 2024

ayusht2810 commented Jun 27, 2024

ayusht2810 commented Jun 27, 2024

mickmister commented Jun 27, 2024

raghavaggarwal2308 commented Jun 28, 2024

ayusht2810 commented Jul 1, 2024

AayushChaudhary0001 left a comment

Choose a reason for hiding this comment

ayusht2810 commented Jul 9, 2024

AayushChaudhary0001 left a comment • edited by raghavaggarwal2308 Loading

Choose a reason for hiding this comment

raghavaggarwal2308 commented Jun 20, 2022 •

edited

Loading

codecov bot commented Jun 20, 2022 •

edited

Loading

ayusht2810 Jun 27, 2024 •

edited

Loading

AayushChaudhary0001 left a comment •

edited by raghavaggarwal2308

Loading