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

webapp/src/components/link_embed_preview/embed_preview.css

@@ -0,0 +1,156 @@
+:root {
+    --light-gray: #6a737d;
+    --blue: #274466;
+    --light-blue: #eff7ff;
+    --github-merged: #6f42c1;
+    --github-closed: #cb2431;
+    --github-open: #28a745;
+    --github-not-planned: #6e7681
+}
+
+@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 h5 span.github-preview-icon-opened {
+    color: var(--github-open);
+}
+
+.github-preview .preview-info h5 span.github-preview-icon-closed {
+    color: var(--github-closed);
+}
+
+.github-preview .preview-info h5 span.github-preview-icon-merged {
+    color: var(--github-merged);
+}
+
+.github-preview .preview-info h5 span.github-preview-icon-not-planned {
+    color: var(--github-not-planned);
+}
+
+.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_embed_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 {LinkEmbedPreview} from './link_embed_preview';
+
+const mapStateToProps = (state) => {
+    return {connected: state[`plugins-${manifest.id}`].connected};
+};
+
+export default connect(mapStateToProps, null)(LinkEmbedPreview);

webapp/src/components/link_embed_preview/link_embed_preview.jsx

@@ -0,0 +1,184 @@
+import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, SkipIcon} from '@primer/octicons-react';
+import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
+import ReactMarkdown from 'react-markdown';
+import './embed_preview.css';
+
+import Client from 'client';
+import {getLabelFontColor} from '../../utils/styles';
+import {isUrlCanPreview} from '../../utils/github_utils';
+
+const maxTicketDescriptionLength = 160;
+
+export const LinkEmbedPreview = ({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 colorClass;
+        switch (data.type) {
+        case 'pull':
+            icon = <GitPullRequestIcon {...iconProps}/>;
+
+            colorClass = 'github-preview-icon-open';
+            if (data.state === 'closed') {
+                if (data.merged) {
+                    colorClass = 'github-preview-icon-merged';
+                    icon = <GitMergeIcon {...iconProps}/>;
+                } else {
+                    colorClass = 'github-preview-icon-closed';
+                }
+            }
+
+            break;
+        case 'issues':
+            if (data.state === 'open') {
+                colorClass = 'github-preview-icon-open';
+                icon = <IssueOpenedIcon {...iconProps}/>;
+            } else if (data.state_reason === 'not_planned') {
+                colorClass = 'github-preview-icon-not-planned';
+                icon = <SkipIcon {...iconProps}/>;
+            } else {
+                colorClass = 'github-preview-icon-merged';
+                icon = <IssueClosedIcon {...iconProps}/>;
+            }
+            break;
+        }
+        return (
+            <span className={`pr-2 ${colorClass}`}>
+                {icon}
+            </span>
+        );
+    };
+
+    if (!data) {
+        return null;
+    }
+    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'>
+                            { getIconElement() }
+                            {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>
+    );
+};
+
+LinkEmbedPreview.propTypes = {
+    embed: {
+        url: PropTypes.string.isRequired,
+    },
+    connected: PropTypes.bool.isRequired,
+};

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 '../../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;
 }