awx/src/components/ErrorDetail/ErrorDetail.jsx

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';

import {
  Card as PFCard,
  CardBody as PFCardBody,
  Expandable as PFExpandable
} from '@patternfly/react-core';

const Card = styled(PFCard)`
  background-color: var(--pf-global--BackgroundColor--200);
  overflow-wrap: break-word;
`;

const CardBody = styled(PFCardBody)`
  max-height: 200px;
  overflow: scroll;
`;

const Expandable = styled(PFExpandable)`
  text-align: left;
`;

class ErrorDetail extends Component {
  constructor (props) {
    super(props);

    this.state = {
      isExpanded: false
    };

    this.handleToggle = this.handleToggle.bind(this);
    this.renderNetworkError = this.renderNetworkError.bind(this);
    this.renderStack = this.renderStack.bind(this);
  }

  handleToggle () {
    const { isExpanded } = this.state;
    this.setState({ isExpanded: !isExpanded });
  }

  renderNetworkError () {
    const { error } = this.props;
    const { response } = error;

    const message = typeof response.data === 'string'
      ? response.data
      : response.data.detail;

    return (
      <Fragment>
        <CardBody>
          {response.config.method.toUpperCase()}
          {' '}
          {response.config.url}
          {' '}
          <strong>
            {response.status}
          </strong>
        </CardBody>
        <CardBody>{message}</CardBody>
      </Fragment>
    );
  }

  renderStack () {
    const { error } = this.props;
    return (<CardBody>{error.stack}</CardBody>);
  }

  render () {
    const { isExpanded } = this.state;
    const { error, i18n } = this.props;

    return (
      <Expandable toggleText={i18n._(t`Details`)} onToggle={this.handleToggle} isExpanded={isExpanded}>
        <Card>
          {Object.prototype.hasOwnProperty.call(error, 'response')
            ? this.renderNetworkError()
            : this.renderStack()
          }
        </Card>
      </Expandable>
    );
  }
}

ErrorDetail.propTypes = {
  error: PropTypes.instanceOf(Error).isRequired
};

export default withI18n()(ErrorDetail);