Skip to content

GH-367 Render tooltip for Enterprise installations #949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akshat-khosya wants to merge 1 commit into
base: master
Choose a base branch
from
+135 −24
Open

GH-367 Render tooltip for Enterprise installations #949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion webapp/src/components/link_tooltip/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import manifest from '@/manifest';
import {LinkTooltip} from './link_tooltip';

const mapStateToProps = (state) => {
return {connected: state[`plugins-${manifest.id}`].connected};
return {
connected: state[`plugins-${manifest.id}`].connected,
enterpriseURL: state[`plugins-${manifest.id}`].enterpriseURL,
};
};

export default connect(mapStateToProps, null)(LinkTooltip);
58 changes: 35 additions & 23 deletions webapp/src/components/link_tooltip/link_tooltip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,43 @@ import {getLabelFontColor, hexToRGB} from '../../utils/styles';

const maxTicketDescriptionLength = 160;

export const LinkTooltip = ({href, connected, show, theme}) => {
export const LinkTooltip = ({href, connected, show, theme, enterpriseURL}) => {
const [data, setData] = useState(null);
useEffect(() => {
const initData = async () => {
if (href.includes('github.com/')) {
const [owner, repo, type, number] = href.split('github.com/')[1].split('/');
if (!owner | !repo | !type | !number) {
return;
let owner;
let repo;
let type;
let number;

if (enterpriseURL) {
const entURL = enterpriseURL.endsWith('/') ? enterpriseURL : enterpriseURL + '/';
if (href.startsWith(entURL)) {
[owner, repo, type, number] = href.substring(entURL.length).split('/');
}
} else if (href.includes('github.com/')) {
[owner, repo, type, number] = href.split('github.com/')[1].split('/');
}

let res;
switch (type) {
case 'issues':
res = await Client.getIssue(owner, repo, number);
break;
case 'pull':
res = await Client.getPullRequest(owner, repo, number);
break;
}
if (res) {
res.owner = owner;
res.repo = repo;
res.type = type;
}
setData(res);
if (!owner || !repo || !type || !number) {
return;
}

let res;
switch (type) {
case 'issues':
res = await Client.getIssue(owner, repo, number);
break;
case 'pull':
res = await Client.getPullRequest(owner, repo, number);
break;
}
if (res) {
res.owner = owner;
res.repo = repo;
res.type = type;
}
setData(res);
};

// show is not provided for Mattermost Server < 5.28
Expand All @@ -47,7 +58,7 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
}

initData();
}, [connected, data, href, show]);
}, [connected, data, href, show, enterpriseURL]);

const getIconElement = () => {
const iconProps = {
Expand Down Expand Up @@ -117,7 +128,7 @@ export const LinkTooltip = ({href, connected, show, theme}) => {

<div className='body d-flex mt-2'>
<span className='pt-1 pb-1 pr-2'>
{ getIconElement() }
{getIconElement()}
</span>

{/* info */}
Expand All @@ -135,7 +146,7 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
<p className='opened-by'>
{'Opened by '}
<a
href={`https://github.com/${data.user.login}`}
href={`${enterpriseURL && enterpriseURL !== '' ? enterpriseURL : 'https://github.com'}/${data.user.login}`}
Copy link

@avasconcelos114 avasconcelos114 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that for enterprise installations we will end up with the Opened By link sending users directly to the enterpriseURL URL instead of what would be the user's profile

It feels like we could have a useMemo-wrapped function that attempts to first map to the user's html_url property, which both the Get issue and Get Pull Request endpoints should return. With a fallback values to each base URL for good measure

Something that would look like this

const openedByLink = useMemo(() => {
    if (!data?.user?.login) {
        return null;
    }
    // Immediately map the html_url value when present (which should work for both Enterprise and Cloud)
    if (data.user.html_url) {
        return data.user.html_url;
    }

    // Fallback to a generic enterprise URL when appropriate, handling possible trailing slashes
    if (enterpriseURL) {
        const entURL = enterpriseURL.endsWith('/') ? enterpriseURL : enterpriseURL + '/';
        return `${entURL}${data.user.login}`;
    }

    // Assume it's GitHub cloud and fallback to the original path (unlikely to ever run unless there are breaking changes in GitHub's API 
    return `https://github.com/${data.user.login}`;
}, [data, enterpriseURL]);

This way we can also safely render the link based on openedByLink's value in line 145 instead of data?.user?.login

target='_blank'
rel='noopener noreferrer'
>
Expand Down Expand Up @@ -193,4 +204,5 @@ LinkTooltip.propTypes = {
connected: PropTypes.bool.isRequired,
theme: PropTypes.object.isRequired,
show: PropTypes.bool,
enterpriseURL: PropTypes.string,
};
96 changes: 96 additions & 0 deletions webapp/src/components/link_tooltip/link_tooltip.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from 'react';
import {mount} from 'enzyme';

import Client from '@/client';

import {LinkTooltip} from './link_tooltip';

jest.mock('@/client', () => ({
getIssue: jest.fn(),
getPullRequest: jest.fn(),
}));

jest.mock('react-markdown', () => () => <div/>);

describe('LinkTooltip', () => {
Copy link

@avasconcelos114 avasconcelos114 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job with the tests! They are a much appreciated addition

Could we also have a couple of tests that confirm that the "Opened by" link's href attribute changes accordingly based on the mapped props and component state?

const baseProps = {
href: 'https://github.com/mattermost/mattermost-plugin-github/issues/1',
connected: true,
show: true,
theme: {
centerChannelBg: '#ffffff',
centerChannelColor: '#333333',
},
enterpriseURL: '',
};

let wrapper;

beforeEach(() => {
jest.clearAllMocks();
});

afterEach(() => {
if (wrapper && wrapper.length) {
wrapper.unmount();
}
});

test('should fetch issue for github.com link', () => {
// We need to use mount or wait for useEffect?
// shallow renders the component, useEffect is a hook.
// Enzyme shallow supports hooks in newer versions, but let's check if we need to manually trigger logic.
// The component uses useEffect to call initData.
Comment on lines +40 to +43
Copy link

@avasconcelos114 avasconcelos114 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comments here aren't particularly necessary, they can be safely removed

wrapper = mount(<LinkTooltip {...baseProps}/>);
expect(Client.getIssue).toHaveBeenCalledWith('mattermost', 'mattermost-plugin-github', '1');
});

test('should fetch pull request for github.com link', () => {
const props = {
...baseProps,
href: 'https://github.com/mattermost/mattermost-plugin-github/pull/2',
};
wrapper = mount(<LinkTooltip {...props}/>);
expect(Client.getPullRequest).toHaveBeenCalledWith('mattermost', 'mattermost-plugin-github', '2');
});

test('should fetch issue for enterprise link', () => {
const props = {
...baseProps,
href: 'https://github.example.com/mattermost/mattermost-plugin-github/issues/3',
enterpriseURL: 'https://github.example.com',
};
wrapper = mount(<LinkTooltip {...props}/>);
expect(Client.getIssue).toHaveBeenCalledWith('mattermost', 'mattermost-plugin-github', '3');
});

test('should fetch pull request for enterprise link', () => {
const props = {
...baseProps,
href: 'https://github.example.com/mattermost/mattermost-plugin-github/pull/4',
enterpriseURL: 'https://github.example.com',
};
wrapper = mount(<LinkTooltip {...props}/>);
expect(Client.getPullRequest).toHaveBeenCalledWith('mattermost', 'mattermost-plugin-github', '4');
});

test('should handle enterprise URL with trailing slash', () => {
const props = {
...baseProps,
href: 'https://github.example.com/mattermost/mattermost-plugin-github/issues/5',
enterpriseURL: 'https://github.example.com/',
};
wrapper = mount(<LinkTooltip {...props}/>);
expect(Client.getIssue).toHaveBeenCalledWith('mattermost', 'mattermost-plugin-github', '5');
});

test('should not fetch if enterprise URL does not match', () => {
const props = {
...baseProps,
href: 'https://other-github.com/mattermost/mattermost-plugin-github/issues/6',
enterpriseURL: 'https://github.example.com',
};
wrapper = mount(<LinkTooltip {...props}/>);
expect(Client.getIssue).not.toHaveBeenCalled();
});
});
Loading