aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/settings/services/ServiceError.tsx
blob: 87efdeb9629e02ea0cc77a4ccc99ec85e533e277 (plain) (blame)
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
import { Component, ReactElement } from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
import Infobox from '../../ui/Infobox';
import Button from '../../ui/button';

const messages = defineMessages({
  headline: {
    id: 'settings.service.error.headline',
    defaultMessage: 'Error',
  },
  goBack: {
    id: 'settings.service.error.goBack',
    defaultMessage: 'Back to services',
  },
  availableServices: {
    id: 'settings.service.form.availableServices',
    defaultMessage: 'Available services',
  },
  errorMessage: {
    id: 'settings.service.error.message',
    defaultMessage: 'Could not load service recipe.',
  },
});

interface IProps extends WrappedComponentProps {}

@observer
class ServiceError extends Component<IProps> {
  render(): ReactElement {
    const { intl } = this.props;

    return (
      <div className="settings__main">
        <div className="settings__header">
          <span className="settings__header-item">
            <Link to="/settings/recipes">
              {intl.formatMessage(messages.availableServices)}
            </Link>
          </span>
          <span className="separator" />
          <span className="settings__header-item">
            {intl.formatMessage(messages.headline)}
          </span>
        </div>
        <div className="settings__body">
          <Infobox type="danger" icon="alert">
            {intl.formatMessage(messages.errorMessage)}
          </Infobox>
        </div>
        <div className="settings__controls">
          <Button
            label={intl.formatMessage(messages.goBack)}
            htmlForm="form"
            onClick={() => window.history.back()}
          />
        </div>
      </div>
    );
  }
}

export default injectIntl(ServiceError);