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
|
/*
* SonarQube
* Copyright (C) 2009-2017 SonarSource SA
* mailto:info AT sonarsource DOT com
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
// @flow
import React from 'react';
import moment from 'moment';
import { getIssueChangelog } from '../../../api/issues';
import { translate } from '../../../helpers/l10n';
import Avatar from '../../../components/ui/Avatar';
import BubblePopup from '../../../components/common/BubblePopup';
import IssueChangelogDiff from '../components/IssueChangelogDiff';
import type { ChangelogDiff } from '../components/IssueChangelogDiff';
import type { Issue } from '../types';
type Changelog = {
avatar?: string,
creationDate: string,
diffs: Array<ChangelogDiff>,
user: string,
userName: string
};
type Props = {
issue: Issue,
onFail: (Error) => void,
popupPosition?: {}
};
type State = {
changelogs: Array<Changelog>
};
export default class ChangelogPopup extends React.PureComponent {
mounted: boolean;
props: Props;
state: State = {
changelogs: []
};
componentDidMount() {
this.mounted = true;
this.loadChangelog();
}
componentWillUnmount() {
this.mounted = false;
}
loadChangelog() {
getIssueChangelog(this.props.issue.key).then(
changelogs => {
if (this.mounted) {
this.setState({ changelogs });
}
},
this.props.onFail
);
}
render() {
const { issue } = this.props;
const { author } = issue;
return (
<BubblePopup position={this.props.popupPosition} customClass="bubble-popup-bottom-right">
<div className="issue-changelog">
<table className="spaced">
<tbody>
<tr>
<td className="thin text-left text-top nowrap">
{moment(issue.creationDate).format('LLL')}
</td>
<td className="thin text-left text-top nowrap" />
<td className="text-left text-top">
{author ? `${translate('created_by')} ${author}` : translate('created')}
</td>
</tr>
{this.state.changelogs.map((item, idx) => (
<tr key={idx}>
<td className="thin text-left text-top nowrap">
{moment(item.creationDate).format('LLL')}
</td>
<td className="thin text-left text-top nowrap">
{item.userName &&
item.avatar &&
<Avatar className="little-spacer-right" hash={item.avatar} size={16} />}
{item.userName}
</td>
<td className="text-left text-top">
{item.diffs.map(diff => <IssueChangelogDiff key={diff.key} diff={diff} />)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</BubblePopup>
);
}
}
|
