github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/alertBox/index.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import classNames from "classnames";
    13  
    14  import "./alertbox.styl";
    15  
    16  import { AlertInfo, AlertLevel } from "src/redux/alerts";
    17  import { warningIcon, notificationIcon, criticalIcon } from "src/views/shared/components/icons";
    18  import { trustIcon } from "src/util/trust";
    19  
    20  function alertIcon (level: AlertLevel) {
    21    switch (level) {
    22      case AlertLevel.CRITICAL:
    23        return trustIcon(criticalIcon);
    24      case AlertLevel.WARNING:
    25        return trustIcon(warningIcon);
    26      default:
    27        return trustIcon(notificationIcon);
    28    }
    29  }
    30  
    31  export interface AlertBoxProps extends AlertInfo {
    32    dismiss(): void;
    33  }
    34  
    35  export class AlertBox extends React.Component<AlertBoxProps, {}> {
    36    render() {
    37      // build up content element, which has a wrapping anchor element that is
    38      // conditionally present.
    39      let content = <div>
    40        <div className="alert-box__title">{this.props.title}</div>
    41        <div className="alert-box__text">{this.props.text}</div>
    42      </div>;
    43  
    44      if (this.props.link) {
    45        content = <a className="alert-box__link" href={this.props.link}>
    46          { content }
    47        </a>;
    48      }
    49  
    50      content = <div className="alert-box__content">
    51        { content }
    52      </div>;
    53  
    54      return <div className={classNames("alert-box", `alert-box--${AlertLevel[this.props.level].toLowerCase()}`)}>
    55        <div className="alert-box__icon" dangerouslySetInnerHTML={alertIcon(this.props.level)} />
    56        { content }
    57        <div className="alert-box__dismiss">
    58          <a className="alert-box__link" onClick={this.props.dismiss}>✕</a>
    59        </div>
    60      </div>;
    61    }
    62  }