[GH-730] Add link preview for PR and issue.

webapp/src/components/link_preview/index.jsx

@@ -0,0 +1,14 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+
+import manifest from 'manifest';
+
+import {LinkPreview} from './link_preview';
+
+const mapStateToProps = (state) => {
+    return {connected: state[`plugins-${manifest.id}`].connected};
+};
+
+export default connect(mapStateToProps, null)(LinkPreview);

webapp/src/components/link_preview/link_preview.jsx

@@ -0,0 +1,183 @@
+import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon} from '@primer/octicons-react';
+import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
+import ReactMarkdown from 'react-markdown';
+import './preview.css';
+
+import Client from 'client';
+import {getLabelFontColor} from '../../utils/styles';
+import {isUrlCanPreview} from 'src/utils/github_utils';
+
+const maxTicketDescriptionLength = 160;
+
+export const LinkPreview = ({embed: {url}, connected}) => {
+    const [data, setData] = useState(null);
+    useEffect(() => {
+        const initData = async () => {
+            if (isUrlCanPreview(url)) {
+                const [owner, repo, type, number] = url.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);
+            }
+        };
+
+        // show is not provided for Mattermost Server < 5.28
+        if (!connected || data) {
+            return;
+        }
+
+        initData();
+    }, [connected, data, url]);
+
+    const getIconElement = () => {
+        const iconProps = {
+            size: 'small',
+            verticalAlign: 'text-bottom',
+        };
+
+        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';
+                }
+            }
+
+            break;
+        case 'issues':
+            color = data.state === 'open' ? '#28a745' : '#cb2431';
+
+            if (data.state === 'open') {
+                icon = <IssueOpenedIcon {...iconProps}/>;
+            } else {
+                icon = <IssueClosedIcon {...iconProps}/>;
+            }
+            break;
+        }
+        return (
+            <span style={{color}}>
+                {icon}
+            </span>
+        );
+    };
+
+    if (data) {
+        let date = new Date(data.created_at);
+        date = date.toDateString();
+
+        let description = '';
+        if (data.body) {
+            description = data.body.substring(0, maxTicketDescriptionLength).trim();
+            if (data.body.length > maxTicketDescriptionLength) {
+                description += '...';
+            }
+        }
+
+        return (
+            <div className='github-preview github-preview--large p-4 mt-1 mb-1'>
+                <div className='header'>
+                    <span className='repo'>
+                        {data.repo}
+                    </span>
+                    {' on '}
+                    <span>{date}</span>
+                </div>
+
+                <div className='body d-flex'>
+
+                    {/* info */}
+                    <div className='preview-info mt-1'>
+                        <a
+                            href={url}
+                            target='_blank'
+                            rel='noopener noreferrer'
+                        >
+                            <h5 className='mr-1'>
+                                <span className='pr-2'>
+                                    { getIconElement() }
+                                </span>
+                                {data.title}
+                            </h5>
+                            <span>{'#' + data.number}</span>
+                        </a>
+                        <div className='markdown-text mt-1 mb-1'>
+                            <ReactMarkdown linkTarget='_blank'>{description}</ReactMarkdown>
+                        </div>
+
+                        <div className='sub-info mt-1'>
+                            {/* base <- head */}
+                            {data.type === 'pull' && (
+                                <div className='sub-info-block'>
+                                    <h6 className='mt-0 mb-1'>{'Base ← Head'}</h6>
+                                    <div className='base-head'>
+                                        <span
+                                            title={data.base.ref}
+                                            className='commit-ref'
+                                        >{data.base.ref}
+                                        </span> <span className='mx-1'>{'←'}</span>{' '}
+                                        <span
+                                            title={data.head.ref}
+                                            className='commit-ref'
+                                        >{data.head.ref}
+                                        </span>
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Labels */}
+                            {data.labels && data.labels.length > 0 && (
+                                <div className='sub-info-block'>
+                                    <h6 className='mt-0 mb-1'>{'Labels'}</h6>
+                                    <div className='labels'>
+                                        {data.labels.map((label, idx) => {
+                                            return (
+                                                <span
+                                                    key={`${label.name}-${idx}`}
+                                                    className='label'
+                                                    title={label.description}
+                                                    style={{backgroundColor: '#' + label.color, color: getLabelFontColor(label.color)}}
+                                                >
+                                                    <span>{label.name}</span>
+                                                </span>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    return null;
+};
+
+LinkPreview.propTypes = {
+    embed: {
+        url: PropTypes.string.isRequired,
+    },
+    connected: PropTypes.bool.isRequired,
+};

webapp/src/components/link_preview/preview.css

@@ -0,0 +1,136 @@
+:root {
+    --light-gray: #6a737d;
+    --blue: #274466;
+    --light-blue: #eff7ff;
+}
+
+@media (min-width: 544px) {
+    .github-preview--large {
+        min-width: 320px;
+    }
+}
+
+/* Github Preview */
+.github-preview {
+    background-color: var(--center-channel-bg-rgb);
+    box-shadow: 0 2px 3px rgba(0,0,0,.08);
+    position: relative;
+    width: 100%;
+    max-width: 700px;
+    border-radius: 4px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+}
+
+/* Header */
+.github-preview .header {
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 11px;
+    line-height: 16px;
+    white-space: nowrap;
+}
+
+.github-preview .header a {
+    text-decoration: none;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    display: inline-block;
+}
+
+.github-preview .header .repo {
+    color: var(--center-channel-color-rgb);
+}
+
+/* Body */
+.github-preview .body > span {
+    line-height: 1.25;
+}
+
+/* Info */
+.github-preview .preview-info {
+    line-height: 1.25;
+    display: flex;
+    flex-direction: column;
+}
+.github-preview .preview-info > a, .github-preview .preview-info > a:hover {
+    display: block;
+    text-decoration: none;
+    color: var(--link-color);
+}
+.github-preview .preview-info > a span {
+    color: var(--light-gray);
+}
+
+.github-preview .preview-info h5 {
+    font-weight: 600;
+    font-size: 14px;
+    display: inline;
+}
+
+.github-preview .preview-info .markdown-text {
+    max-height: 150px;
+    line-height: 1.25;
+    overflow: hidden;
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    font-size: 12px;
+}
+
+.github-preview .preview-info .markdown-text::-webkit-scrollbar {
+    display: none;
+}
+
+.github-preview .sub-info {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 4px 0;
+}
+
+.github-preview .sub-info .sub-info-block {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+
+/* Labels */
+.github-preview .labels {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.github-preview .label {
+    height: 20px;
+    padding: .15em 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 15px;
+    border-radius: 2px;
+    box-shadow: inset 0 -1px 0 rgba(27,31,35,.12);
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 125px;
+}
+
+.github-preview .base-head {
+    display: flex;
+    line-height: 1;
+    align-items: center;
+}
+
+.github-preview .commit-ref {
+    position: relative;
+    display: inline-block;
+    padding: 0 5px;
+    font: .75em/2 SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: var(--blue);
+    background-color: var(--light-blue);
+    border-radius: 3px;
+    max-width: 140px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

webapp/src/components/link_tooltip/link_tooltip.jsx

@@ -6,18 +6,16 @@ import ReactMarkdown from 'react-markdown';
 
 import Client from 'client';
 import {getLabelFontColor, hexToRGB} from '../../utils/styles';
+import {isUrlCanPreview} from 'src/utils/github_utils';
 
 const maxTicketDescriptionLength = 160;
 
 export const LinkTooltip = ({href, connected, show, theme}) => {
     const [data, setData] = useState(null);
     useEffect(() => {
         const initData = async () => {
-            if (href.includes('github.com/')) {
+            if (isUrlCanPreview(href)) {
                 const [owner, repo, type, number] = href.split('github.com/')[1].split('/');
-                if (!owner | !repo | !type | !number) {
-                    return;
-                }
 
                 let res;
                 switch (type) {

webapp/src/components/link_tooltip/tooltip.css

@@ -86,6 +86,7 @@
 
 /* Labels */
 .github-tooltip .labels {
+    display: flex;
     justify-content: flex-start;
     align-items: center;
 }

webapp/src/index.js

@@ -10,12 +10,14 @@ 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 LinkPreview from './components/link_preview';
 import Reducer from './reducers';
 import Client from './client';
 import {getConnected, setShowRHSAction} from './actions';
 import {handleConnect, handleDisconnect, handleConfigurationUpdate, handleOpenCreateIssueModal, handleReconnect, handleRefresh} from './websocket';
 import {getServerRoute} from './selectors';
 import manifest from './manifest';
+import {isUrlCanPreview} from './utils/github_utils';
 
 let activityFunc;
 let lastActivityTime = Number.MAX_SAFE_INTEGER;
@@ -37,6 +39,7 @@ class PluginClass {
         registry.registerRootComponent(AttachCommentToIssueModal);
         registry.registerPostDropdownMenuComponent(AttachCommentToIssuePostMenuAction);
         registry.registerLinkTooltipComponent(LinkTooltip);
+        registry.registerPostWillRenderEmbedComponent((embed) => embed.url && isUrlCanPreview(embed.url), LinkPreview, true);
 
         const {showRHSPlugin} = registry.registerRightHandSidebarComponent(SidebarRight, 'GitHub');
         store.dispatch(setShowRHSAction(() => store.dispatch(showRHSPlugin)));

webapp/src/utils/github_utils.js

@@ -0,0 +1,7 @@
+export function isUrlCanPreview(url) {
+    if (url.includes('github.com/')) {
+        const [owner, repo, type, number] = url.split('github.com/')[1].split('/');
+        return !(!owner | !repo | !type | !number);
+    }
+    return false;
+}