[MI-2502]:Added custom type for webhook post in order to comment, edit and close issues

server/plugin/api.go

@@ -959,7 +959,7 @@ func (p *Plugin) updateSettings(c *serializer.UserContext, w http.ResponseWriter
 }
 
 func (p *Plugin) openAttachCommentIssueModal(c *serializer.UserContext, w http.ResponseWriter, r *http.Request) {
-	req := &serializer.OpenCreateCommentOrEditIssueModal{}
+	req := &serializer.OpenCreateCommentOrEditIssueModalRequestBody{}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		c.Log.WithError(err).Warnf("Error decoding the JSON body")
 		p.writeAPIError(w, &serializer.APIErrorResponse{ID: "", Message: "Please provide a valid JSON object.", StatusCode: http.StatusBadRequest})
@@ -990,7 +990,7 @@ func (p *Plugin) openAttachCommentIssueModal(c *serializer.UserContext, w http.R
 }
 
 func (p *Plugin) openCloseOrReopenIssueModal(c *serializer.UserContext, w http.ResponseWriter, r *http.Request) {
-	req := &serializer.OpenCreateCommentOrEditIssueModal{}
+	req := &serializer.OpenCreateCommentOrEditIssueModalRequestBody{}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		c.Log.WithError(err).Warnf("Error decoding the JSON body")
 		p.writeAPIError(w, &serializer.APIErrorResponse{ID: "", Message: "Please provide a valid JSON object.", StatusCode: http.StatusBadRequest})
@@ -1024,7 +1024,7 @@ func (p *Plugin) openCloseOrReopenIssueModal(c *serializer.UserContext, w http.R
 }
 
 func (p *Plugin) openIssueEditModal(c *serializer.UserContext, w http.ResponseWriter, r *http.Request) {
-	req := &serializer.OpenCreateCommentOrEditIssueModal{}
+	req := &serializer.OpenCreateCommentOrEditIssueModalRequestBody{}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		c.Log.WithError(err).Warnf("Error decoding the JSON body")
 		p.writeAPIError(w, &serializer.APIErrorResponse{ID: "", Message: "Please provide a valid JSON object.", StatusCode: http.StatusBadRequest})

server/serializer/issue.go

@@ -43,7 +43,7 @@ type CommentAndCloseRequest struct {
 	PostID       string `json:"postId"`
 }
 
-type OpenCreateCommentOrEditIssueModal struct {
+type OpenCreateCommentOrEditIssueModalRequestBody struct {
 	RepoOwner   string `json:"repo_owner"`
 	RepoName    string `json:"repo_name"`
 	IssueNumber int    `json:"issue_number"`

webapp/src/actions/index.js

@@ -420,7 +420,7 @@ export function openCloseOrReopenIssueModal(messageData) {
     };
 }
 
-export function openCreateCommentIssueModal(messageData) {
+export function openCreateCommentOnIssueModal(messageData) {
     return {
         type: ActionTypes.OPEN_ATTACH_COMMENT_TO_ISSUE_MODAL,
         data: {

webapp/src/components/github_issue/index.tsx

@@ -16,17 +16,9 @@ const GithubIssue = ({theme, post}: GithubIssueProps) => {
     const postProps = post.props || {};
     let assignees;
     let labels;
-    let buttonClassName = 'btn btn-primary';
+    const buttonClassName = 'btn btn-primary';
     const dispatch = useDispatch();
 
-    const updateStyleForCloseOrReopenButton = () => {
-        if (postProps.status === 'Close') {
-            buttonClassName = 'btn btn-danger';
-            style.close_or_reopen_button.backgroundColor = '#dc3545';
-            return style.close_or_reopen_button;
-        }
-        return null;
-    };
     const issue = {
         repo_owner: postProps.repo_owner,
         repo_name: postProps.repo_name,
@@ -37,29 +29,21 @@ const GithubIssue = ({theme, post}: GithubIssueProps) => {
 
     const content = (
         <div>
-            <div>
-                <button
-                    style={{...style.button, ...style.other_buttons}}
-                    className='btn btn-primary'
-                    onClick={() => {
-                        dispatch(attachCommentIssueModal(issue));
-                    }}
-                >{'Comment'}</button>
-                <button
-                    style={{...style.button, ...style.other_buttons}}
-                    className='btn btn-primary'
-                    onClick={() => {
-                        dispatch(editIssueModal(issue));
-                    }}
-                >{'Edit'}</button>
-                <button
-                    style={{...style.button, ...updateStyleForCloseOrReopenButton()}}
-                    className={buttonClassName}
-                    onClick={() => {
-                        dispatch(closeOrReopenIssueModal(issue));
-                    }}
-                >{postProps.status}</button>
-            </div>
+            <button
+                style={{...style.button, ...style.other_buttons}}
+                className='btn btn-primary'
+                onClick={() => dispatch(attachCommentIssueModal(issue))}
+            >{'Comment'}</button>
+            <button
+                style={{...style.button, ...style.other_buttons}}
+                className='btn btn-primary'
+                onClick={() => dispatch(editIssueModal(issue))}
+            >{'Edit'}</button>
+            <button
+                style={{...style.button, ...{...postProps.status === 'Close' ? style.close_or_reopen_button : style.other_buttons}}}
+                className={buttonClassName}
+                onClick={() => dispatch(closeOrReopenIssueModal(issue))}
+            >{postProps.status}</button>
         </div>
     );
 
@@ -92,7 +76,13 @@ const GithubIssue = ({theme, post}: GithubIssueProps) => {
     return (
         <div>
             <h5>
-                <a href={postProps.issue_url}>{'#'}{postProps.issue_number} {postProps.title}</a>
+                <a
+                    href={postProps.issue_url}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                >
+                    {'#' + postProps.issue_number + ' ' + postProps.title}
+                </a>
             </h5>
             <p>{postProps.description}</p>
             {assignees}
@@ -114,7 +104,7 @@ const getStyle = makeStyleFromTheme((theme) => ({
         color: theme.buttonColor,
     },
     close_or_reopen_button: {
-        backgroundColor: theme.buttonBg,
+        backgroundColor: '#dc3545',
     },
     other_buttons: {
         backgroundColor: theme.buttonBg,

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

@@ -124,7 +124,6 @@ export default class AttachIssueModal extends PureComponent {
                     onChange={this.handleIssueCommentChange}
                     value={comment}
                 />
-
             </div>
         ) : (
             <div>

webapp/src/components/modals/close_reopen_issue/index.tsx

@@ -174,7 +174,7 @@ const getStyle = (theme: Theme) => ({
         color: '#000',
     },
     radioButtons: {
-        margin: '7px 10px',
+        margin: '0.4em 0.6em',
     },
 });
 

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

@@ -223,7 +223,7 @@ export default class CreateOrUpdateIssueModal extends PureComponent {
                 />
 
                 <Input
-                    id={'title'}
+                    id='title'
                     label='Title for the GitHub Issue'
                     type='input'
                     required={true}
@@ -253,7 +253,7 @@ export default class CreateOrUpdateIssueModal extends PureComponent {
                 />
 
                 <Input
-                    id={'title'}
+                    id='title'
                     label='Title for the GitHub Issue'
                     type='input'
                     required={true}

webapp/src/components/sidebar_right/github_items.tsx

@@ -266,7 +266,7 @@ const getStyle = makeStyleFromTheme((theme) => ({
         fontWeight: 'bold',
     },
     subtitle: {
-        margin: '5px 0 0 0',
+        marginTop: '5px',
         fontSize: '13px',
     },
     subtitleSecondLine: {

webapp/src/index.js

@@ -4,18 +4,18 @@ import AttachCommentToIssuePostMenuAction from 'components/post_menu_actions/att
 import AttachCommentToIssueModal from 'components/modals/attach_comment_to_issue';
 
 import CreateOrUpdateIssueModal from './components/modals/create_update_issue';
-import CloseOrReopenIssueModal from './components/modals/close_reopen_issue/index.tsx';
+import CloseOrReopenIssueModal from './components/modals/close_reopen_issue';
 import CreateIssuePostMenuAction from './components/post_menu_action/create_issue';
 import SidebarHeader from './components/sidebar_header';
 import TeamSidebar from './components/team_sidebar';
 import UserAttribute from './components/user_attribute';
 import SidebarRight from './components/sidebar_right';
 import LinkTooltip from './components/link_tooltip';
-import GithubIssue from './components/github_issue/index.tsx';
+import GithubIssue from './components/github_issue';
 import Reducer from './reducers';
 import Client from './client';
 import {getConnected, setShowRHSAction} from './actions';
-import {handleConnect, handleDisconnect, handleConfigurationUpdate, handleOpenCreateOrUpdateIssueModal, handleOpenCreateCommentIssueModal, handleOpenCloseOrReopenIssueModal, handleReconnect, handleRefresh} from './websocket';
+import {handleConnect, handleDisconnect, handleConfigurationUpdate, handleOpenCreateOrUpdateIssueModal, handleOpenCreateCommentOnIssueModal, handleOpenCloseOrReopenIssueModal, handleReconnect, handleRefresh} from './websocket';
 import {getServerRoute} from './selectors';
 import {id as pluginId} from './manifest';
 
@@ -48,7 +48,7 @@ class PluginClass {
         registry.registerWebSocketEventHandler(`custom_${pluginId}_config_update`, handleConfigurationUpdate(store));
         registry.registerWebSocketEventHandler(`custom_${pluginId}_refresh`, handleRefresh(store));
         registry.registerWebSocketEventHandler(`custom_${pluginId}_createOrUpdateIssue`, handleOpenCreateOrUpdateIssueModal(store));
-        registry.registerWebSocketEventHandler(`custom_${pluginId}_attachCommentToIssue`, handleOpenCreateCommentIssueModal(store));
+        registry.registerWebSocketEventHandler(`custom_${pluginId}_attachCommentToIssue`, handleOpenCreateCommentOnIssueModal(store));
         registry.registerWebSocketEventHandler(`custom_${pluginId}_closeOrReopenIssue`, handleOpenCloseOrReopenIssueModal(store));
         registry.registerPostTypeComponent('custom_git_issue', GithubIssue);
 

webapp/src/websocket/index.js

@@ -11,7 +11,7 @@ import {
     getYourPrs,
     openCreateOrUpdateIssueModal,
     openCloseOrReopenIssueModal,
-    openCreateCommentIssueModal,
+    openCreateCommentOnIssueModal,
 } from '../actions';
 
 import {id as pluginId} from '../manifest';
@@ -105,11 +105,11 @@ export function handleOpenCloseOrReopenIssueModal(store) {
     };
 }
 
-export function handleOpenCreateCommentIssueModal(store) {
+export function handleOpenCreateCommentOnIssueModal(store) {
     return (msg) => {
         if (!msg.data) {
             return;
         }
-        store.dispatch(openCreateCommentIssueModal(msg.data));
+        store.dispatch(openCreateCommentOnIssueModal(msg.data));
     };
 }