[GH-618]: Added slack attachment for webhook posts, in order to comment, edit, and close issues. #636

Nityanand13 · 2023-01-31T10:00:05Z

Summary

Whenever a user creates an issue on github then three actions will be shown in the custom post created by the plugin's bot. The three actions are:

Comment
Edit
Close

With the help of the above mentioned actions user can create a comment, edit, close, and reopen a github issue from the mattermost. As you see we haven't made a reopen button so when a user closes an issue then this close button will turn to reopen.

Ticket Link

Issue: #618

…t and close issues (#13) * [MI-2502]:Added custom type for webhook post in order to comment, edit and close issues * [MI-2502]: Added EOF * [MI-2502]: Fixed lint errors * [MI-2502]: Review fixes done 1. Improved code quality 2. Made few contants * [MI-2502]: Review fixes done 1. Changed few files to .tsx 2. Improved code quality * [MI-2502]: Review fixes done 1. Improved code quality 2. Made a constant * [MI-2502]: Review fixes done 1. Improved code readability * [MI-2502]: Review fixes done 1. Made a package dor constants 2. Made a package for struct 3. Improved code redability * [MI-2502]: Review fixes done 1. Improved code quality 2. Fixed the issue that I was facing while creating issue or attaching a comment to the issue. 3. Changed few file names * [MI-2502]: Review fixes done 1. Changed the names of few functions 2. Improved code quality * [MI-2502]: Review fixes done 1.Improved code readability * [MI-2502]: Review fixes done 1. Improved code readability * [MI-2502]: Review done 1. Improved code quality * [MI-2502]: Review fixes done 1. Improved code quality

…ub into MM-618

mattermost-build · 2023-01-31T10:00:14Z

Hello @Nityanand13,

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.

hanzei

That is a very nifty feature 🎉

One broad question before I dive into the code too much: The implementation currently uses a custom post and a webapp model. Could this feature also be implemented using interactive dialogues and post actions? That way it's supported on mobile.

hanzei · 2023-02-03T12:31:17Z

Using the Comment feature posts this
message in the thread, which is misleading as no message from mattermost got attached.

Nityanand13 · 2023-02-07T07:04:08Z

That is a very nifty feature tada

One broad question before I dive into the code too much: The implementation currently uses a custom post and a webapp model. Could this feature also be implemented using interactive dialogues and post actions? That way it's supported on mobile.

@hanzei I think we can not implement this feature using interactive dialogues because in that we do not have any case in which we can select more than one option for a particular field.
For here if we want to edit an issue then there are fields like labels in which there might be a case in which we need to select more than one option from the list which would not be possible using interactive dialogues.

webapp/src/client/client.js

mickmister · 2023-02-07T23:51:14Z

webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx

                <Input
                    label='Message Attached to GitHub Issue'
                    type='textarea'
                    isDisabled={true}
-                    value={this.props.post.message}
+                    value={post?.message}
                    disabled={false}
                    readOnly={true}
                />


What box does this serve if the message is blank?

In that case, we are getting a message something like Please provide a valid non empty comment.

Let's just remove the box if there are no contents and the user isn't going to type anything there. Why is the box blank anyway? What case do we not have a post? Maybe we should let the user type in a message regardless?

If the feature is to attach a comment, shouldn't we allow the user to type in a comment?

In this PR I only fixed issue #618. Where if a user clicks on the comment button as shown in the image attached to the description of this PR. So a modal will open as shown below where a user can type a comment and attach that to the github issue.

Other than this a user can create a github issue or attach a message to the github issue from message actions. For now, I have not changed the logic of this thing and the image of the modal that you are seeing where the user cannot type anything is getting opened when a user wants to attach a message to the github issue from message action. So in this case the message field usually contains the content of that particular post. And in the case of slack attachment posts, this message field remains empty. So should I make this field editable or what do you say?

So should I make this field editable or what do you say?

Yeah it probably should be editable, even though it wasn't editable before. The Jira plugin allows you to edit in this case, and I prefer that UX.

I'm trying to understand something still - Under what circumstance do we want to attach a comment, but have no text to send over to GitHub? It seems like a no-op to me in that case

@mickmister Sure I will make it editable. If we want to attach a comment from message actions of slack attachment type post then the comment field remains empty.

webapp/src/components/modals/create_update_issue/create_update_issue.jsx

…ub into MM-618

* [MI-2736]: Review fixes done 1. Improved code readability * [MI-2736]: Review fixes done 1. Fixed linting errors * [MI-2736]: Review fixes done 1. Fixed linting error

server/plugin/api.go

mickmister · 2023-02-09T16:58:14Z

webapp/src/components/modals/attach_comment_to_issue/attach_comment_to_issue.jsx

                <Input
                    label='Message Attached to GitHub Issue'
                    type='textarea'
                    isDisabled={true}
-                    value={this.props.post.message}
+                    value={post?.message}
                    disabled={false}
                    readOnly={true}
                />


If the feature is to attach a comment, shouldn't we allow the user to type in a comment?

* [MI-2736]: Review fixes done 1. Improved code readability * [MI-2736]: Review fixes done 1. Fixed linting errors * [MI-2736]: Review fixes done 1. Fixed linting error * [MI-2736]: Review fixes done 1. Improved code readability * [MI-2736]: Review fixes done 1. Changed the case of few endpoints to snake case

codecov-commenter · 2023-02-16T05:38:35Z

Codecov Report

Attention: Patch coverage is 1.32450% with 596 lines in your changes missing coverage. Please review.

Project coverage is 14.79%. Comparing base (da4c4df) to head (70ae885).
Report is 10 commits behind head on master.

❗ Current head 70ae885 differs from pull request most recent head 39fe3cf

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

Files	Patch %	Lines
server/plugin/api.go	2.02%	385 Missing and 2 partials ⚠️
server/plugin/utils.go	0.00%	117 Missing ⚠️
server/plugin/webhook.go	0.00%	58 Missing ⚠️
server/plugin/command.go	0.00%	18 Missing ⚠️
server/plugin/plugin.go	0.00%	13 Missing ⚠️
server/plugin/mm_34646_token_refresh.go	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #636      +/-   ##
==========================================
- Coverage   16.16%   14.79%   -1.37%     
==========================================
  Files          17       15       -2     
  Lines        6021     5563     -458     
==========================================
- Hits          973      823     -150     
+ Misses       5003     4697     -306     
+ Partials       45       43       -2

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

mickmister

Just a few more questions from my side. I can approve once conversation is wrapped up

mickmister · 2023-02-16T16:34:20Z

webapp/src/components/github_issue/index.tsx

+    button: {
+        fontFamily: 'Open Sans',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        letterSpacing: '1px',
+        lineHeight: '19px',
+        margin: '12px 12px 8px 0px',
+        borderRadius: '4px',
+        color: theme.buttonColor,
+    },


Instead of these styles, can we make the buttons match the styling of most other buttons in the MM UI? There are class names used for this, in the footer of the modals in this project for instance. The current styling seems inconsistent with the rest of the application

@DHaussermann I'm curious about your thoughts on this. Should these buttons be made to look like the slack attachment buttons as much as possible, or maybe the buttons that are at the bottom of the modals?

mickmister · 2023-02-16T16:39:11Z

server/plugin/webhook.go

+		if action == constants.ActionOpened {
+			post.Type = "custom_git_issue"
+			post.Props = map[string]interface{}{
+				constants.TitleForProps:       *issue.Title,
+				constants.IssueURLForProps:    *issue.HTMLURL,
+				constants.IssueNumberForProps: *issue.Number,
+				constants.DescriptionForProps: description,


So the current conditions on this is to show these controls on a post created by the plugin, specifically for when an issue is opened.

I think it would be useful to have for PRs and when labeling issues. And possibly in the bot DMs as well, though that could get noisy. @hanzei What are your thoughts on this?

1/5 that it's handy to have actions attached to the DM notification as this allows user to answer them directly in MM. Maybe we even add the buttons to all posts?

@asatkinson What do you think?

hanzei · 2023-02-23T10:28:06Z

server/constants/constants.go

@@ -0,0 +1,46 @@
+package constants


From https://go.dev/blog/package-names

Avoid meaningless package names. Packages named util, common, or misc provide clients with no sense of what the package contains.

What value does a separate package provide?

@hanzei Keeping things in separate package helps us in writing unit tests and creating mocks for packages.

4/5 that a constants package is not an idiomatic way to store variables, as it contradicts the above quote.

hanzei · 2023-02-23T10:28:55Z

server/serializer/error.go

@@ -0,0 +1,11 @@
+package serializer


Same question about the package structure here.

server/plugin/api.go

hanzei · 2023-02-23T10:35:22Z

server/plugin/api.go

+	p.API.PublishWebSocketEvent(
+		wsEventAttachCommentToIssue,
+		map[string]interface{}{
+			"postId": post.Id,
+			"owner":  req.RepoOwner,
+			"repo":   req.RepoName,
+			"number": req.IssueNumber,
+		},
+		&model.WebsocketBroadcast{UserId: userID},
+	)


Why is the request to the plugin needed if it simply returns a websocket event?

The same question goes for openCloseOrReopenIssueModal.

Now we are not making any request for these cases

server/plugin/api.go

mattermost-build · 2023-03-06T01:01:50Z

This PR has been automatically labelled "stale" because it hasn't had recent activity.
A core team member will check in on the status of the PR to help with questions.
Thank you for your contribution!

Kshitij-Katiyar · 2025-01-31T13:27:17Z

Also, the mobile app is not showing the replies that I'm seeing on the webapp. However, when I tap on the post, it opens the thread and shows the replies. When I go back to the channel from there, it's showing the replies. I'm not sure if this is a bigger problem or if it's related to this PR. Here's a screen recording:

@matthewbirtch On Mattermost master, the replies on the mobile app are synced with the webapp and are now visible from outside the thread also

Here is a cloud server with the latest build of this PR uploaded in case you want to retest.

Kshitij-Katiyar · 2025-01-31T13:35:10Z

@AayushChaudhary0001 Please test this PR

matthewbirtch · 2025-01-31T14:03:26Z

Here is a cloud server with the latest build of this PR uploaded in case you want to retest.

Thanks @Kshitij-Katiyar. The channel you linked to doesn't have any github posts. Is there another channel for me to test this, or can we get some more test posts from the github bot in this channel to test with?

Kshitij-Katiyar · 2025-02-03T11:50:12Z

Here is a cloud server with the latest build of this PR uploaded in case you want to retest.

Thanks @Kshitij-Katiyar. The channel you linked to doesn't have any github posts. Is there another channel for me to test this, or can we get some more test posts from the github bot in this channel to test with?

@matthewbirtch Added a post in the server. Do let me know if it is not visible to you

matthewbirtch · 2025-02-03T15:02:33Z

Thanks @Kshitij-Katiyar. It looks good, however the buttons don't seem to work for me. They don't open modals on mobile.

Strangely, if I had the browser open on my desktop in the same channel and when I tapped the Comment or Edit buttons on mobile, it opened the corresponding modals on the desktop browser. But nothing happens on the mobile app.

wiggin77 · 2025-02-05T19:49:08Z

@AayushChaudhary0001 Please test this PR

Did this get tested @AayushChaudhary0001 ?

raghavaggarwal2308 · 2025-02-06T07:46:20Z

Did this get tested @AayushChaudhary0001 ?

@wiggin77 Not yet, there is an issue as mentioned by @matthewbirtch above. Once that is fixed we can proceed with the QA review

mattermost-build · 2025-02-17T01:04:22Z

This PR has been automatically labelled "stale" because it hasn't had recent activity.
A core team member will check in on the status of the PR to help with questions.
Thank you for your contribution!

wiggin77 · 2025-03-24T21:02:14Z

Let me know when this is ready for review.

…ub into MM-618

mm-prodsec-bot · 2025-04-25T10:41:32Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

Kshitij-Katiyar · 2025-04-29T14:27:02Z

Here are the screenshots after updating the custom modals to interactive dialog

Kshitij-Katiyar · 2025-04-29T14:27:57Z

Here are the screenshots from mobile app

Kshitij-Katiyar · 2025-04-29T14:28:53Z

@wiggin77 You can have a look at this now.
There is a limitation with labels and assignee as they are multi select fields

wiggin77

@Kshitij-Katiyar removing from my queue until issues raised by reviewers are addressed and merge conflicts resolved.

abbas-dependable-naqvi · 2025-10-31T12:05:27Z

@wiggin77
SUMMARY:
PR has the feature to comment, edit and close issues from the Mattermost UI using the Gtihub plugin.
The recent commits converted the slack attachment to interactive dialog to provide mobile support.
Some fields like assignee and labels can be multi select but interactive dialogs does not support multi select dropdown as of now.
Can be taken forward when multi select dropdown is supported by Mattermost in interactive dialogs.

Nityanand13 and others added 2 commits January 31, 2023 15:02

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

4378034

…ub into MM-618

Nityanand13 requested a review from hanzei as a code owner January 31, 2023 10:00

mattermost-build added the Contributor label Jan 31, 2023

hanzei requested a review from mickmister January 31, 2023 10:12

hanzei added 2: Dev Review Requires review by a core committer 3: QA Review Requires review by a QA tester labels Jan 31, 2023

hanzei linked an issue Jan 31, 2023 that may be closed by this pull request

Add custom post type for webhook posts, in order to comment, edit, and close issues/PRs #618

Open

hanzei previously requested changes Feb 3, 2023

View reviewed changes

mickmister previously requested changes Feb 8, 2023

View reviewed changes

Nityanand13 mentioned this pull request Feb 8, 2023

[MI-2736]: Done the review fixes of a github PR #636 Brightscout/mattermost-plugin-github#20

Merged

Nityanand13 and others added 2 commits February 8, 2023 15:34

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

20ab25d

…ub into MM-618

[MI-2736]: Done the review fixes of a github PR mattermost#636 (#20)

70ae885

* [MI-2736]: Review fixes done 1. Improved code readability * [MI-2736]: Review fixes done 1. Fixed linting errors * [MI-2736]: Review fixes done 1. Fixed linting error

Nityanand13 requested a review from mickmister February 9, 2023 12:12

mickmister reviewed Feb 9, 2023

View reviewed changes

Nityanand13 mentioned this pull request Feb 10, 2023

[MI-2736]: Done the review fixes of a github PR #636 Brightscout/mattermost-plugin-github#21

Merged

Nityanand13 requested a review from mickmister February 16, 2023 05:38

mickmister reviewed Feb 16, 2023

View reviewed changes

hanzei self-requested a review February 20, 2023 13:23

hanzei reviewed Feb 23, 2023

View reviewed changes

mattermost-build added the Lifecycle/1:stale label Mar 6, 2023

hanzei added the Awaiting Submitter Action Blocked on the author label Mar 6, 2023

Nityanand13 added a commit to Brightscout/mattermost-plugin-github that referenced this pull request Mar 7, 2023

[MI-2814]: Review fixes done of github PR mattermost#636

53d7770

Nityanand13 mentioned this pull request Mar 7, 2023

[MI-2814] Done the review fixes of github PR #636 Brightscout/mattermost-plugin-github#22

Merged

fixed lint

25c1a3e

Kshitij-Katiyar requested a review from AayushChaudhary0001 January 31, 2025 13:42

wiggin77 removed the Lifecycle/1:stale label Feb 5, 2025

mattermost-build added the Lifecycle/1:stale label Feb 17, 2025

wiggin77 removed their request for review March 24, 2025 21:02

hanzei removed their request for review April 10, 2025 10:36

merge master to bs/MM-618

f225e3a

Kshitij-Katiyar requested a review from wiggin77 as a code owner April 21, 2025 09:38

Kshitij-Katiyar added 5 commits April 21, 2025 15:11

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

a4a0961

…ub into MM-618

updated snapshot

762a353

fixed lint

5bd38eb

convert comment custom post to interactive dialog

fc3e0c0

convert close/reopen issue custom modal to interactive dialog

a235186

convert edit issue custom modal to interactive dialog

ea9e9ef

Lint fixes

5e5e352

wiggin77 requested changes Jun 24, 2025

View reviewed changes

[GH-618]: Added slack attachment for webhook posts, in order to comment, edit, and close issues. #636

Are you sure you want to change the base?

[GH-618]: Added slack attachment for webhook posts, in order to comment, edit, and close issues. #636

Conversation

Nityanand13 commented Jan 31, 2023 • edited by Kshitij-Katiyar Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Ticket Link

Uh oh!

mattermost-build commented Jan 31, 2023

Uh oh!

hanzei left a comment

Choose a reason for hiding this comment

Uh oh!

hanzei commented Feb 3, 2023

Uh oh!

Nityanand13 commented Feb 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov-commenter commented Feb 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mickmister left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mickmister Feb 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mattermost-build commented Mar 6, 2023

Uh oh!

Kshitij-Katiyar commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kshitij-Katiyar commented Jan 31, 2025

Uh oh!

matthewbirtch commented Jan 31, 2025

Uh oh!

Nityanand13 commented Jan 31, 2023 •

edited by Kshitij-Katiyar

Loading

Nityanand13 commented Feb 7, 2023 •

edited

Loading

codecov-commenter commented Feb 16, 2023 •

edited

Loading

mickmister Feb 16, 2023 •

edited

Loading

Kshitij-Katiyar commented Jan 31, 2025 •

edited

Loading

matthewbirtch commented Feb 3, 2025 •

edited

Loading

mm-prodsec-bot commented Apr 25, 2025 •

edited

Loading

abbas-dependable-naqvi commented Oct 31, 2025 •

edited by raghavaggarwal2308

Loading