passbolt-styleguide/src/react-extension/components/Common/Error/ShowErrorDetails/ShowErrorDetails.js

Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.

/**
 * Passbolt ~ Open source password manager for teams
 * Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
 *
 * Licensed under GNU Affero General Public License version 3 of the or any later version.
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
 * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
 * @link          https://www.passbolt.com Passbolt(tm)
 * @since         3.3.0
 */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Trans, withTranslation } from "react-i18next";
import CaretDownSVG from "../../../../../img/svg/caret_down.svg";
import CaretRightSVG from "../../../../../img/svg/caret_right.svg";

class ShowErrorDetails extends Component {
  /**
   * Constructor
   * @param {Object} props
   */
  constructor(props) {
    super(props);
    this.state = this.defaultState;
    this.bindHandlers();
  }

  /**
   * Returns the component default state
   */
  get defaultState() {
    return {
      showErrorDetails: false,
    };
  }

  /**
   * Binds the component handlers
   */
  bindHandlers() {
    this.handleErrorDetailsToggle = this.handleErrorDetailsToggle.bind(this);
  }

  /**
   * Get error data
   * @returns {string}
   */
  get errorData() {
    if (!this.props.error) {
      return "No data available.";
    }

    let msg = "";
    msg += "Message \n----------------------\n";
    msg += this.props.error.message;
    msg += "\n\n";

    if (this.props.error.data) {
      msg += "Data \n----------------------\n";
      msg += JSON.stringify(this.props.error.data);
      msg += "\n\n";
    }

    msg += "Stack \n----------------------\n";
    msg += this.props.error.stack;

    return msg;
  }

  /**
   * Handle the toggle display of error details
   */
  handleErrorDetailsToggle() {
    this.toggleErrorDetails();
  }

  /**
   * Toggle the display of the error details
   */
  toggleErrorDetails() {
    this.setState({ showErrorDetails: !this.state.showErrorDetails });
  }

  /**
   * Get the error main message
   * @returns {String|string} return default if string is empty
   */
  get message() {
    return this.props.error.message || "No message.";
  }

  /**
   * Render the component
   * @return {JSX}
   */
  render() {
    return (
      <div className="accordion error-details">
        <div className="accordion-header">
          <button type="button" className="link no-border" onClick={this.handleErrorDetailsToggle}>
            {this.state.showErrorDetails ? (
              <CaretDownSVG className="caret-down" />
            ) : (
              <CaretRightSVG className="caret-right" />
            )}
            <Trans>Error details</Trans>
          </button>
        </div>
        {this.state.showErrorDetails && (
          <div className="accordion-content">
            <div className="input text">
              <label htmlFor="show-error-details" className="visuallyhidden">
                {this.props.error.message}
              </label>
              <textarea id="show-error-details" defaultValue={`${this.errorData}`} readOnly />
            </div>
          </div>
        )}
      </div>
    );
  }
}

ShowErrorDetails.propTypes = {
  error: PropTypes.object,
};

export default withTranslation("common")(ShowErrorDetails);