mattermost-plugin-github/webapp/src/components/github_issue/index.tsx at 44ac4e5eb3db2da856ade1f715c6dcefde167dcf · Brightscout/mattermost-plugin-github · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import * as React from 'react';
import {makeStyleFromTheme} from 'mattermost-redux/utils/theme_utils';
import {Theme} from 'mattermost-redux/types/preferences';
import {Post} from 'mattermost-redux/types/posts';
import {useDispatch} from 'react-redux';

import {openCreateCommentOnIssueModal, openCreateOrUpdateIssueModal, openCloseOrReopenIssueModal} from '../../actions';

type GithubIssueProps = {
    theme: Theme,
    post: Post,
}

const GithubIssue = ({theme, post}: GithubIssueProps) => {
    const style = getStyle(theme);
    const postProps = post.props || {};
    let assignees;
    let labels;
    const dispatch = useDispatch();

    const issue = {
        repo_owner: postProps.repo_owner,
        repo_name: postProps.repo_name,
        issue_number: postProps.issue_number,
        postId: post.id,
        status: postProps.status,
        channel_id: post.channel_id,
    };

    const content = (
        <div>
            <button
                style={{...style.button, ...style.other_buttons}}
                className='btn btn-primary'
                onClick={() => dispatch(openCreateCommentOnIssueModal(issue))}
            >{'Comment'}</button>
            <button
                style={{...style.button, ...style.other_buttons}}
                className='btn btn-primary'
                onClick={() => dispatch(openCreateOrUpdateIssueModal(issue))}
            >{'Edit'}</button>
            <button
                style={{...style.button, ...{...postProps.status === 'Close' ? style.close_or_reopen_button : style.other_buttons}}}
                className='btn btn-primary'
                onClick={() => dispatch(openCloseOrReopenIssueModal(issue))}
            >{postProps.status}</button>
        </div>
    );

    if (postProps.assignees?.length) {
        assignees = (
            <div style={style.assignees_and_labels}>
                <b>{'Assignees'}</b>
                <div>
                    {postProps.assignees.map((assignee: string, index: number) => (
                        <span key={assignee}>{(index ? ', ' : '') + assignee} </span>
                    ))}
                </div>
            </div>
        );
    }

    if (postProps.labels?.length) {
        labels = (
            <div style={style.assignees_and_labels}>
                <b>{'Labels'}</b>
                <div>
                    {postProps.labels.map((label: string, index: number) => (
                        <span key={label}>{(index ? ', ' : '') + label} </span>
                    ))}
                </div>
            </div>
        );
    }

    return (
        <div>
            <h5>
                <a
                    href={postProps.issue_url}
                    target='_blank'
                    rel='noopener noreferrer'
                >
                    {'#' + postProps.issue_number + ' ' + postProps.title}
                </a>
            </h5>
            <p>{postProps.description}</p>
            {assignees}
            {labels}
            {content}
        </div>
    );
};

const getStyle = makeStyleFromTheme((theme) => ({
    button: {
        fontFamily: 'Open Sans',
        fontSize: '12px',
        fontWeight: 'bold',
        letterSpacing: '1px',
        lineHeight: '19px',
        margin: '12px 12px 8px 0px',
        borderRadius: '4px',
        color: theme.buttonColor,
    },
    close_or_reopen_button: {
        backgroundColor: theme.errorTextColor,
    },
    other_buttons: {
        backgroundColor: theme.buttonBg,
    },
    assignees_and_labels: {
        display: 'inline-block',
        verticalAlign: 'top',
        width: '30%',
    },
}));

export default GithubIssue;