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 2 commits into
base: master
Choose a base branch
from
+273 −46
Open

GH-367 Render tooltip for Enterprise installations #949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7f0959
GH-367 Render tooltip for Enterprise installations
Dec 18, 2025
0d5cca4
Implement useMemo for 'Opened by' link generation to prioritize html_…
akshat-khosya Jan 1, 2026
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);
121 changes: 76 additions & 45 deletions webapp/src/components/link_tooltip/link_tooltip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,55 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {useEffect, useState} from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import './tooltip.css';
import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon} from '@primer/octicons-react';
import { GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon } from '@primer/octicons-react';
import ReactMarkdown from 'react-markdown';

import Client from '@/client';

import {getLabelFontColor, hexToRGB} from '../../utils/styles';
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('/');
}

if (!owner || !repo || !type || !number) {
return;
}

let res;
switch (type) {
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 (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,26 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
}

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

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]);

const getIconElement = () => {
const iconProps = {
Expand All @@ -58,32 +88,32 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
let icon;
let color;
switch (data.type) {
case 'pull':
icon = <GitPullRequestIcon {...iconProps}/>;

color = '#28a745';
if (data.state === 'closed') {
if (data.merged) {
color = '#6f42c1';
icon = <GitMergeIcon {...iconProps}/>;
} else {
color = '#cb2431';
case 'pull':
icon = <GitPullRequestIcon {...iconProps} />;

color = '#28a745';
if (data.state === 'closed') {
if (data.merged) {
color = '#6f42c1';
icon = <GitMergeIcon {...iconProps} />;
} else {
color = '#cb2431';
}
}
}

break;
case 'issues':
color = data.state === 'open' ? '#28a745' : '#cb2431';
break;
case 'issues':
color = data.state === 'open' ? '#28a745' : '#cb2431';

if (data.state === 'open') {
icon = <IssueOpenedIcon {...iconProps}/>;
} else {
icon = <IssueClosedIcon {...iconProps}/>;
}
break;
if (data.state === 'open') {
icon = <IssueOpenedIcon {...iconProps} />;
} else {
icon = <IssueClosedIcon {...iconProps} />;
}
break;
}
return (
<span style={{color}}>
<span style={{ color }}>
{icon}
</span>
);
Expand All @@ -105,10 +135,10 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
<div className='github-tooltip'>
<div
className='github-tooltip box github-tooltip--large github-tooltip--bottom-left p-4'
style={{backgroundColor: theme.centerChannelBg, border: `1px solid ${hexToRGB(theme.centerChannelColor, '0.16')}`}}
style={{ backgroundColor: theme.centerChannelBg, border: `1px solid ${hexToRGB(theme.centerChannelColor, '0.16')}` }}
>
<div className='header mb-1'>
<span style={{color: theme.centerChannelColor}}>
<span style={{ color: theme.centerChannelColor }}>
{data.repo}
</span>
{' on '}
Expand All @@ -117,7 +147,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 @@ -126,7 +156,7 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
href={href}
target='_blank'
rel='noopener noreferrer'
style={{color: theme.centerChannelColor}}
style={{ color: theme.centerChannelColor }}
>
<h5 className='mr-1'>{data.title}</h5>
<span>{'#' + data.number}</span>
Expand All @@ -135,7 +165,7 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
<p className='opened-by'>
{'Opened by '}
<a
href={`https://github.com/${data.user.login}`}
href={openedByLink}
target='_blank'
rel='noopener noreferrer'
>
Expand Down Expand Up @@ -172,7 +202,7 @@ export const LinkTooltip = ({href, connected, show, theme}) => {
key={idx}
className='label mr-1'
title={label.description}
style={{backgroundColor: '#' + label.color, color: getLabelFontColor(label.color)}}
style={{ backgroundColor: '#' + label.color, color: getLabelFontColor(label.color) }}
>
<span>{label.name}</span>
</span>
Expand All @@ -193,4 +223,5 @@ LinkTooltip.propTypes = {
connected: PropTypes.bool.isRequired,
theme: PropTypes.object.isRequired,
show: PropTypes.bool,
enterpriseURL: PropTypes.string,
};
Loading