-
Notifications
You must be signed in to change notification settings - Fork 295
/
ReportIssue.tsx
133 lines (126 loc) · 4.16 KB
/
ReportIssue.tsx
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
// @flow
import React, { Component } from 'react';
import SVGInline from 'react-svg-inline';
import { defineMessages, intlShape } from 'react-intl';
import classNames from 'classnames';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import { Link } from 'react-polymorph/lib/components/Link';
import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
import styles from './ReportIssue.scss';
import externalLinkIcon from '../../../assets/images/link-ic.inline.svg';
const messages = defineMessages({
reportConnectingIssueText: {
id: 'loading.screen.reportIssue.connecting.text',
defaultMessage: '!!!Having trouble connecting to network?',
description: 'Report connecting issue text on the loading screen.',
},
reportIssueButtonLabel: {
id: 'loading.screen.reportIssue.buttonLabel',
defaultMessage: '!!!Open support ticket',
description: 'Open support ticket button label on the loading.',
},
readArticleButtonLabel: {
id: 'loading.screen.readArticle.buttonLabel',
defaultMessage: '!!!Read the article',
description: 'Read the article button label on the loading.',
},
reportIssueDownloadLogsLinkLabel: {
id: 'loading.screen.reportIssue.downloadLogsLinkLabel',
defaultMessage: '!!!Download logs',
description: 'Download logs button label on the loading.',
},
reportIssueButtonUrl: {
id: 'loading.screen.reportIssue.reportIssueButtonUrl',
defaultMessage: '!!!https://iohk.zendesk.com/hc/en-us/requests/new/',
description: 'Link to Open Support page',
},
connectivityIssueArticleUrl: {
id: 'loading.screen.readIssueArticle.connectivityIssueArticleUrl',
defaultMessage:
'!!!https://iohk.zendesk.com/hc/en-us/articles/360010522913',
description: 'Link to connectivity issue article page',
},
});
type Props = {
onIssueClick: Function,
onOpenExternalLink: Function,
onDownloadLogs: Function,
disableDownloadLogs: boolean,
};
export default class ReportIssue extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};
render() {
const { intl } = this.context;
const {
onIssueClick,
onOpenExternalLink,
onDownloadLogs,
disableDownloadLogs,
} = this.props;
const reportIssueButtonClasses = classNames([
'primary',
'reportIssueButton',
styles.actionButton,
]);
const readArticleButtonClasses = classNames([
'primary',
'readArticleButton',
styles.actionButton,
]);
const downloadLogsButtonClasses = classNames([
styles.downloadLogsButton,
disableDownloadLogs ? styles.disabled : null,
]);
const readArticleButtonUrl = messages.connectivityIssueArticleUrl;
return (
<div className={styles.component}>
<h1 className={styles.reportIssueText}>
{intl.formatMessage(messages.reportConnectingIssueText)}
</h1>
<Button
className={readArticleButtonClasses}
label={
<p>
<SVGInline
svg={externalLinkIcon}
className={styles.externalLinkIcon}
/>
{intl.formatMessage(messages.readArticleButtonLabel)}
</p>
}
onClick={() =>
onOpenExternalLink(intl.formatMessage(readArticleButtonUrl))
}
skin={ButtonSkin}
/>
<Button
className={reportIssueButtonClasses}
label={
<p>
<SVGInline
svg={externalLinkIcon}
className={styles.externalLinkIcon}
/>
{intl.formatMessage(messages.reportIssueButtonLabel)}
</p>
}
onClick={() =>
onIssueClick(intl.formatMessage(messages.reportIssueButtonUrl))
}
skin={ButtonSkin}
/>
<br />
<Link
className={downloadLogsButtonClasses}
onClick={!disableDownloadLogs ? onDownloadLogs : null}
hasIconAfter={false}
label={intl.formatMessage(messages.reportIssueDownloadLogsLinkLabel)}
skin={LinkSkin}
/>
</div>
);
}
}