[GH-774] Add tooltip to Jira ticket links

server/constants.go

@@ -0,0 +1,8 @@
+package main
+
+const (
+	HeaderMattermostUserID = "Mattermost-User-Id"
+
+	ParamInstanceID = "instance_id"
+	ParamIssueKey   = "issue_key"
+)

server/http.go

@@ -57,6 +57,7 @@ const (
 	routeUserStart                              = "/user/start"
 	routeUserConnect                            = "/user/connect"
 	routeUserDisconnect                         = "/user/disconnect"
+	routeGetIssueByKey                          = "/get-issue-by-key"
 	routeSharePublicly                          = "/share-issue-publicly"
 )
 
@@ -93,6 +94,7 @@ func (p *Plugin) initializeRouter() {
 
 	apiRouter := p.router.PathPrefix(routeAPI).Subrouter()
 
+	// Issue APIs
 	apiRouter.HandleFunc(routeAPIGetAutoCompleteFields, p.checkAuth(p.handleResponse(p.httpGetAutoCompleteFields))).Methods(http.MethodGet)
 	apiRouter.HandleFunc(routeAPICreateIssue, p.checkAuth(p.handleResponse(p.httpCreateIssue))).Methods(http.MethodPost)
 	apiRouter.HandleFunc(routeAPIGetCreateIssueMetadata, p.checkAuth(p.handleResponse(p.httpGetCreateIssueMetadataForProjects))).Methods(http.MethodGet)
@@ -102,6 +104,7 @@ func (p *Plugin) initializeRouter() {
 	apiRouter.HandleFunc(routeAPIAttachCommentToIssue, p.checkAuth(p.handleResponse(p.httpAttachCommentToIssue))).Methods(http.MethodPost)
 	apiRouter.HandleFunc(routeIssueTransition, p.handleResponse(p.httpTransitionIssuePostAction)).Methods(http.MethodPost)
 	apiRouter.HandleFunc(routeSharePublicly, p.handleResponse(p.httpShareIssuePublicly)).Methods(http.MethodPost)
+	apiRouter.HandleFunc(routeGetIssueByKey, p.handleResponse(p.httpGetIssueByKey)).Methods(http.MethodGet)
 
 	// User APIs
 	apiRouter.HandleFunc(routeAPIUserInfo, p.checkAuth(p.handleResponse(p.httpGetUserInfo))).Methods(http.MethodGet)

server/issue.go

@@ -1029,3 +1029,41 @@ func (p *Plugin) getClient(instanceID, mattermostUserID types.ID) (Client, Insta
 	}
 	return client, instance, connection, nil
 }
+
+func (p *Plugin) httpGetIssueByKey(w http.ResponseWriter, r *http.Request) (int, error) {
+	if r.Method != http.MethodGet {
+		return respondErr(w, http.StatusMethodNotAllowed, fmt.Errorf("request: %s is not allowed, must be GET", r.Method))
+	}
+
+	mattermostUserID := r.Header.Get(HeaderMattermostUserID)
+	if mattermostUserID == "" {
+		return respondErr(w, http.StatusUnauthorized, errors.New("not authorized"))
+	}
+
+	instanceID := r.FormValue(ParamInstanceID)
+	issueKey := r.FormValue(ParamIssueKey)
+	issue, err := p.GetIssueByKey(types.ID(instanceID), types.ID(mattermostUserID), issueKey)
+	if err != nil {
+		return respondErr(w, http.StatusInternalServerError, err)
+	}
+
+	return respondJSON(w, issue)
+}
+
+func (p *Plugin) GetIssueByKey(instanceID, mattermostUserID types.ID, issueKey string) (*jira.Issue, error) {
+	client, _, _, err := p.getClient(instanceID, mattermostUserID)
+	if err != nil {
+		return nil, err
+	}
+
+	issue, err := client.GetIssue(issueKey, nil)
+	if err != nil {
+		switch StatusCode(err) {
+		case http.StatusNotFound:
+			return nil, errors.New("we couldn't find the issue key, or you do not have the appropriate permissions to view the issue. Please try again or contact your Jira administrator")
+		default:
+			return nil, errors.WithMessage(err, "request to Jira failed")
+		}
+	}
+	return issue, nil
+}

webapp/src/action_types/index.js

@@ -32,4 +32,6 @@ export default {
 
     RECEIVED_CHANNEL_SUBSCRIPTIONS: `${PluginId}_recevied_channel_subscriptions`,
     DELETED_CHANNEL_SUBSCRIPTION: `${PluginId}_deleted_channel_subscription`,
+
+    RECEIVED_JIRA_TICKET: `${PluginId}_received_jira_ticket`,
 };

webapp/src/actions/index.ts

@@ -9,7 +9,14 @@ import ActionTypes from 'action_types';
 import {doFetch, doFetchWithResponse, buildQueryString} from 'client';
 import {getPluginServerRoute, getInstalledInstances, getUserConnectedInstances} from 'selectors';
 import {isDesktopApp, isMinimumDesktopAppVersion} from 'utils/user_agent';
-import {ChannelSubscription, CreateIssueRequest, SearchIssueParams, InstanceType, ProjectMetadata, APIResponse} from 'types/model';
+import {
+    APIResponse,
+    ChannelSubscription,
+    CreateIssueRequest,
+    InstanceType,
+    ProjectMetadata,
+    SearchIssueParams,
+} from 'types/model';
 
 export const openConnectModal = () => {
     return {
@@ -509,3 +516,24 @@ export function sendEphemeralPost(message: string, channelId?: string) {
         });
     };
 }
+
+export const fetchIssueByKey = (issueKey: string, instanceID: string) => {
+    return async (dispatch, getState) => {
+        const baseUrl = getPluginServerRoute(getState());
+        let data = null;
+        const params = `issue_key=${issueKey}&instance_id=${instanceID}`;
+        try {
+            data = await doFetch(`${baseUrl}/api/v2/get-issue-by-key?${params}`, {
+                method: 'get',
+            });
+
+            dispatch({
+                type: ActionTypes.RECEIVED_JIRA_TICKET,
+                data,
+            });
+            return {data};
+        } catch (error) {
+            return {error};
+        }
+    };
+};

webapp/src/components/default_avatar/defaultAvatar.scss

@@ -0,0 +1,12 @@
+.jira-issue-tooltip {
+    .default-avatar {
+        background-color: #708090;
+        border-radius: 50%;
+        margin-right: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 22px;
+        height: 22px;
+    }
+}

webapp/src/components/default_avatar/default_avatar.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import './defaultAvatar.scss';
+
+function DefaultAvatar() {
+    return (
+        <span className='default-avatar'>
+            <svg
+                width='18'
+                height='18'
+                viewBox='0 0 18 18'
+                role='presentation'
+            >
+                <g
+                    fill='white'
+                    fillRule='evenodd'
+                >
+                    <path
+                        d='M3.5 14c0-1.105.902-2 2.009-2h7.982c1.11 0 2.009.894 2.009 2.006v4.44c0 3.405-12 3.405-12 0V14z'
+                    />
+                    <circle
+                        cx='9'
+                        cy='6'
+                        r='3.5'
+                    />
+                </g>
+            </svg>
+        </span>
+    );
+}
+
+export default DefaultAvatar;

webapp/src/components/jira_ticket_tooltip/index.ts

@@ -0,0 +1,24 @@
+import {connect} from 'react-redux';
+import {bindActionCreators, Dispatch} from 'redux';
+import {GlobalState} from 'mattermost-redux/types/store';
+
+import {jiraIssueToReducer} from 'utils/jira_issue_metadata';
+
+import {isUserConnected, getStoredLinkTooltipIssue, getUserConnectedInstances, getDefaultUserInstanceID} from 'selectors';
+import {fetchIssueByKey} from 'actions';
+
+import TicketPopover from './jira_ticket_tooltip';
+
+const mapStateToProps = (state: GlobalState) => {
+    return {
+        connected: isUserConnected(state),
+        ticketDetails: jiraIssueToReducer(getStoredLinkTooltipIssue(state).ticket),
+        connectedInstances: getUserConnectedInstances(state),
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
+    fetchIssueByKey,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(TicketPopover);

webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {Instance, InstanceType} from 'types/model';
+
+import TicketPopover, {Props} from './jira_ticket_tooltip';
+
+describe('components/jira_ticket_tooltip', () => {
+    describe('getIssueKey', () => {
+        const mockConnectedInstances: Instance[] = [
+            {
+                instance_id: 'https://something-1.atlassian.net',
+                type: InstanceType.CLOUD,
+            },
+            {
+                instance_id: 'https://something-2.atlassian.net',
+                type: InstanceType.SERVER,
+            },
+        ];
+
+        const mockProps1: Props = {
+            href: '',
+            show: false,
+            connected: false,
+            connectedInstances: mockConnectedInstances,
+            fetchIssueByKey: jest.fn(),
+        };
+
+        const mockProps2: Props = {
+            href: '',
+            show: false,
+            connected: false,
+            connectedInstances: [],
+            fetchIssueByKey: jest.fn(),
+        };
+
+        test('should return the expected output when URL matches the first regex pattern', () => {
+            const wrapper = shallow(
+                <TicketPopover
+                    {...mockProps1}
+                    href='https://something-1.atlassian.net/browse/TICKET-1234'
+                />
+            );
+            const instance = wrapper.instance() as TicketPopover;
+            const expectedOutput = {ticketID: 'TICKET-1234', instanceID: 'https://something-1.atlassian.net'};
+            expect(instance.getIssueKey()).toEqual(expectedOutput);
+        });
+
+        test('should return the expected output when URL matches the second regex pattern', () => {
+            const wrapper = shallow(
+                <TicketPopover
+                    {...mockProps1}
+                    href='https://something-2.atlassian.net/jira/issues/?selectedIssue=TICKET-1234'
+                />
+            );
+            const instance = wrapper.instance() as TicketPopover;
+            const expectedOutput = {ticketID: 'TICKET-1234', instanceID: 'https://something-2.atlassian.net'};
+            expect(instance.getIssueKey()).toEqual(expectedOutput);
+        });
+
+        test('should return null when URL does not match any pattern', () => {
+            const wrapper = shallow(
+                <TicketPopover
+                    {...mockProps1}
+                    href='https://something-invalid.atlassian.net/not-a-ticket'
+                />
+            );
+            const instance = wrapper.instance() as TicketPopover;
+            expect(instance.getIssueKey()).toEqual(null);
+        });
+
+        test('should return null when the URL does not contain the ticket ID', () => {
+            const wrapper = shallow(
+                <TicketPopover
+                    {...mockProps1}
+                    href='https://something-2.atlassian.net/jira/issues/?selectedIssue='
+                />
+            );
+            const instance = wrapper.instance() as TicketPopover;
+            expect(instance.getIssueKey()).toEqual(null);
+        });
+
+        test('should return null when no instance is connected', () => {
+            const wrapper = shallow(
+                <TicketPopover
+                    {...mockProps2}
+                    href='https://something-2.atlassian.net/jira/issues/?selectedIssue='
+                />
+            );
+            const instance = wrapper.instance() as TicketPopover;
+            expect(instance.getIssueKey()).toEqual(null);
+        });
+    });
+});