github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/app/containers/alertBanner/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 { Action, Dispatch, bindActionCreators } from "redux";
    13  import { connect } from "react-redux";
    14  
    15  import "./alertbanner.styl";
    16  
    17  import { AlertBox } from "src/views/shared/components/alertBox";
    18  import { Alert, bannerAlertsSelector } from "src/redux/alerts";
    19  import { AdminUIState } from "src/redux/state";
    20  import { AlertMessage } from "src/views/shared/components/alertMessage";
    21  
    22  interface AlertBannerProps {
    23    /**
    24     * List of alerts to display in the alert banner.
    25     */
    26    alerts: Alert[];
    27    /**
    28     * Raw dispatch method for the current store, will be used to dispatch
    29     * alert dismissal callbacks.
    30     */
    31    dispatch: Dispatch<Action, AdminUIState>;
    32  }
    33  
    34  /**
    35   * AlertBanner is a React element that displays active critical alerts as a
    36   * banner, intended for display across the top of the screen in a way that may
    37   * overlap content.
    38   */
    39  class AlertBanner extends React.Component<AlertBannerProps, {}> {
    40    render() {
    41      const { alerts, dispatch } = this.props;
    42      if (!alerts || alerts.length === 0) {
    43        return null;
    44      }
    45  
    46      // Display only the first visible component.
    47      const { dismiss, ...alertProps } = alerts[0];
    48      const boundDismiss = bindActionCreators(() => dismiss, dispatch);
    49      // tslint:disable-next-line:variable-name
    50      const AlertComponent = alertProps.showAsAlert ? AlertMessage : AlertBox;
    51  
    52      return (
    53        <div className="alert-banner">
    54          <AlertComponent dismiss={boundDismiss} {...alertProps} />
    55        </div>
    56      );
    57    }
    58  }
    59  
    60  const alertBannerConnected = connect(
    61    (state: AdminUIState) => {
    62      return {
    63        alerts: bannerAlertsSelector(state),
    64      };
    65    },
    66    (dispatch) => {
    67      return {
    68        dispatch,
    69      };
    70    },
    71  )(AlertBanner);
    72  
    73  export default alertBannerConnected;