AlertBox: Merged Alertbox into Alert (#19212)

* refatoring alert box and using alert

* refactoring alertbox to alert

* Changed default to Error

* added buttonText, onButtonClick, omRemove

* Minor fix to buttons

* fixed onRemove

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -1,32 +1,58 @@
 import React, { FC, ReactNode } from 'react';
+import classNames from 'classnames';
 
-interface Props {
+export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
+
+interface AlertProps {
   title: string;
-  button?: {
+  buttonText?: string;
-    text: string;
+  onButtonClick?: (event: React.MouseEvent) => void;
-    onClick: (event: React.MouseEvent) => void;
+  onRemove?: (event: React.MouseEvent) => void;
-  };
+  severity?: AlertVariant;
   children?: ReactNode;
 }
 
-export const Alert: FC<Props> = props => {
+function getIconFromSeverity(severity: AlertVariant): string {
-  const { title, button, children } = props;
+  switch (severity) {
+    case 'error': {
+      return 'fa fa-exclamation-triangle';
+    }
+    case 'warning': {
+      return 'fa fa-exclamation-triangle';
+    }
+    case 'info': {
+      return 'fa fa-info-circle';
+    }
+    case 'success': {
+      return 'fa fa-check';
+    }
+    default:
+      return '';
+  }
+}
+
+export const Alert: FC<AlertProps> = ({ title, buttonText, onButtonClick, onRemove, children, severity = 'error' }) => {
+  const alertClass = classNames('alert', `alert-${severity}`);
   return (
     <div className="alert-container">
-      <div className="alert-error alert">
+      <div className={alertClass}>
         <div className="alert-icon">
-          <i className="fa fa-exclamation-triangle" />
+          <i className={getIconFromSeverity(severity)} />
         </div>
         <div className="alert-body">
           <div className="alert-title">{title}</div>
           {children && <div className="alert-text">{children}</div>}
         </div>
-        {button && (
+        {/* If onRemove is specified , giving preference to onRemove */}
-          <div className="alert-button">
+        {onRemove && (
-            <button className="btn btn-outline-danger" onClick={button.onClick}>
+          <button type="button" className="alert-close" onClick={onRemove}>
-              {button.text}
+            <i className="fa fa fa-remove" />
-            </button>
+          </button>
-          </div>
+        )}
+        {onButtonClick && (
+          <button type="button" className="btn btn-outline-danger" onClick={onButtonClick}>
+            {buttonText}
+          </button>
         )}
       </div>
     </div>

packages/grafana-ui/src/components/Alert/_Alert.scss

@@ -0,0 +1,85 @@
+//
+// Alerts
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: 15px 20px;
+  margin-bottom: $space-xs;
+  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
+  background: $alert-error-bg;
+  position: relative;
+  color: $white;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+  background: $alert-success-bg;
+}
+
+.alert-danger,
+.alert-error {
+  background: $alert-error-bg;
+}
+
+.alert-info {
+  background: $alert-info-bg;
+}
+
+.alert-warning {
+  background: $alert-warning-bg;
+}
+
+.page-alert-list {
+  z-index: 8000;
+  min-width: 400px;
+  max-width: 600px;
+  position: fixed;
+  right: 10px;
+  top: 60px;
+}
+
+.alert-close {
+  padding: 0 0 0 $space-md;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  .fa {
+    align-self: flex-end;
+    font-size: 21px;
+    color: rgba(255, 255, 255, 0.75);
+  }
+}
+
+.alert-title {
+  font-weight: $font-weight-semi-bold;
+}
+
+.alert-icon {
+  padding: 0 $space-md 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  .fa {
+    font-size: 21px;
+  }
+}
+
+.alert-body {
+  flex-grow: 1;
+}
+
+.alert-icon-on-top {
+  align-items: flex-start;
+}

packages/grafana-ui/src/components/index.ts

@@ -62,7 +62,7 @@ export {
   LegendPlacement,
   LegendDisplayMode,
 } from './Legend/Legend';
-export { Alert } from './Alert/Alert';
+export { Alert, AlertVariant } from './Alert/Alert';
 export { GraphSeriesToggler, GraphSeriesTogglerAPI } from './Graph/GraphSeriesToggler';
 export { Collapse } from './Collapse/Collapse';
 export { LogLabels } from './Logs/LogLabels';

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -176,7 +176,7 @@ $zindex-typeahead: ${theme.zIndex.typeahead};
 //
 
 $btn-padding-x: 14px !default;
-$btn-padding-y: 10px !default;
+$btn-padding-y: 8px !default;
 $btn-line-height: 1 !default;
 $btn-font-weight: ${theme.typography.weight.semibold} !default;
 

public/app/core/components/AlertBox/AlertBox.tsx

@@ -1,50 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import classNames from 'classnames';
-import { AppNotificationSeverity } from 'app/types';
-
-interface Props {
-  title: string;
-  icon?: string;
-  body?: ReactNode;
-  severity: AppNotificationSeverity;
-  onClose?: () => void;
-}
-
-function getIconFromSeverity(severity: AppNotificationSeverity): string {
-  switch (severity) {
-    case AppNotificationSeverity.Error: {
-      return 'fa fa-exclamation-triangle';
-    }
-    case AppNotificationSeverity.Warning: {
-      return 'fa fa-exclamation-triangle';
-    }
-    case AppNotificationSeverity.Info: {
-      return 'fa fa-info-circle';
-    }
-    case AppNotificationSeverity.Success: {
-      return 'fa fa-check';
-    }
-    default:
-      return '';
-  }
-}
-
-export const AlertBox: FunctionComponent<Props> = ({ title, icon, body, severity, onClose }) => {
-  const alertClass = classNames('alert', `alert-${severity}`);
-  return (
-    <div className={alertClass}>
-      <div className="alert-icon">
-        <i className={icon || getIconFromSeverity(severity)} />
-      </div>
-      <div className="alert-body">
-        <div className="alert-title">{title}</div>
-        {body && <div className="alert-text">{body}</div>}
-      </div>
-      {onClose && (
-        <button type="button" className="alert-close" onClick={onClose}>
-          <i className="fa fa fa-remove" />
-        </button>
-      )}
-    </div>
-  );
-};

public/app/core/components/AppNotifications/AppNotificationItem.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { AppNotification } from 'app/types';
-import { AlertBox } from '../AlertBox/AlertBox';
+import { Alert } from '@grafana/ui';
 
 interface Props {
   appNotification: AppNotification;
@@ -23,12 +23,11 @@ export default class AppNotificationItem extends Component<Props> {
     const { appNotification, onClearNotification } = this.props;
 
     return (
-      <AlertBox
+      <Alert
         severity={appNotification.severity}
         title={appNotification.title}
-        body={appNotification.text}
+        children={appNotification.text}
-        icon={appNotification.icon}
+        onRemove={() => onClearNotification(appNotification.id)}
-        onClose={() => onClearNotification(appNotification.id)}
       />
     );
   }

public/app/features/admin/ldap/LdapConnectionStatus.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
+import { Alert } from '@grafana/ui';
 import { AppNotificationSeverity, LdapConnectionInfo, LdapServerInfo } from 'app/types';
 
 interface Props {
@@ -78,5 +78,5 @@ export const LdapErrorBox: FC<LdapConnectionErrorProps> = ({ ldapConnectionInfo
     </div>
   ));
 
-  return <AlertBox title="Connection error" severity={AppNotificationSeverity.Error} body={errorElements} />;
+  return <Alert title="Connection error" severity={AppNotificationSeverity.Error} children={errorElements} />;
 };

public/app/features/admin/ldap/LdapPage.tsx

@@ -2,11 +2,10 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { NavModel } from '@grafana/data';
-import { FormField } from '@grafana/ui';
+import { FormField, Alert } from '@grafana/ui';
 import { getNavModel } from 'app/core/selectors/navModel';
 import config from 'app/core/config';
 import Page from 'app/core/components/Page/Page';
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 import { LdapConnectionStatus } from './LdapConnectionStatus';
 import { LdapSyncInfo } from './LdapSyncInfo';
 import { LdapUserInfo } from './LdapUserInfo';
@@ -81,7 +80,7 @@ export class LdapPage extends PureComponent<Props, State> {
           <>
             {ldapError && ldapError.title && (
               <div className="gf-form-group">
-                <AlertBox title={ldapError.title} severity={AppNotificationSeverity.Error} body={ldapError.body} />
+                <Alert title={ldapError.title} severity={AppNotificationSeverity.Error} children={ldapError.body} />
               </div>
             )}
 
@@ -100,11 +99,11 @@ export class LdapPage extends PureComponent<Props, State> {
             </div>
             {userError && userError.title && (
               <div className="gf-form-group">
-                <AlertBox
+                <Alert
                   title={userError.title}
                   severity={AppNotificationSeverity.Error}
-                  body={userError.body}
+                  children={userError.body}
-                  onClose={this.onClearUserError}
+                  onRemove={this.onClearUserError}
                 />
               </div>
             )}

public/app/features/admin/ldap/LdapUserPage.tsx

@@ -2,8 +2,8 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { NavModel } from '@grafana/data';
+import { Alert } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 import { getNavModel } from 'app/core/selectors/navModel';
 import {
   AppNotificationSeverity,
@@ -106,11 +106,11 @@ export class LdapUserPage extends PureComponent<Props, State> {
           </div>
           {userError && userError.title && (
             <div className="gf-form-group">
-              <AlertBox
+              <Alert
                 title={userError.title}
                 severity={AppNotificationSeverity.Error}
-                body={userError.body}
+                children={userError.body}
-                onClose={this.onClearUserError}
+                onRemove={this.onClearUserError}
               />
             </div>
           )}

public/app/features/alerting/AlertTab.tsx

@@ -10,12 +10,12 @@ import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/Edit
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
 import 'app/features/alerting/AlertTabCtrl';
+import { Alert } from '@grafana/ui';
 
 // Types
 import { DashboardModel } from '../dashboard/state/DashboardModel';
 import { PanelModel } from '../dashboard/state/PanelModel';
 import { TestRuleResult } from './TestRuleResult';
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 import { AppNotificationSeverity } from 'app/types';
 
 interface Props {
@@ -135,7 +135,7 @@ export class AlertTab extends PureComponent<Props> {
     if (!alert && hasTransformations) {
       return (
         <EditorTabBody heading="Alert">
-          <AlertBox
+          <Alert
             severity={AppNotificationSeverity.Warning}
             title="Transformations are not supported in alert queries"
           />
@@ -156,7 +156,7 @@ export class AlertTab extends PureComponent<Props> {
       <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
         <>
           {alert && hasTransformations && (
-            <AlertBox
+            <Alert
               severity={AppNotificationSeverity.Error}
               title="Transformations are not supported in alert queries"
             />

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -14,8 +14,7 @@ import { DashboardGrid } from '../dashgrid/DashboardGrid';
 import { DashNav } from '../components/DashNav';
 import { SubMenu } from '../components/SubMenu';
 import { DashboardSettings } from '../components/DashboardSettings';
-import { CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, Alert } from '@grafana/ui';
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 
 // Redux
 import { initDashboard } from '../state/initDashboard';
@@ -32,7 +31,6 @@ import {
   AppNotificationSeverity,
 } from 'app/types';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
-
 export interface Props {
   urlUid?: string;
   urlSlug?: string;
@@ -242,10 +240,10 @@ export class DashboardPage extends PureComponent<Props, State> {
 
     return (
       <div className="dashboard-loading">
-        <AlertBox
+        <Alert
           severity={AppNotificationSeverity.Error}
           title={initError.message}
-          body={getMessageFromError(initError.error)}
+          children={getMessageFromError(initError.error)}
         />
       </div>
     );

public/app/features/dashboard/dashgrid/PanelPluginError.tsx

@@ -2,12 +2,9 @@
 import _ from 'lodash';
 import React, { PureComponent, ReactNode } from 'react';
 
-// Components
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
-
 // Types
 import { AppNotificationSeverity } from 'app/types';
-import { PanelProps, PanelPlugin, PluginType, PanelPluginMeta } from '@grafana/ui';
+import { PanelProps, PanelPlugin, PluginType, PanelPluginMeta, Alert } from '@grafana/ui';
 
 interface Props {
   title: string;
@@ -29,7 +26,7 @@ class PanelPluginError extends PureComponent<Props> {
 
     return (
       <div style={style}>
-        <AlertBox severity={AppNotificationSeverity.Error} {...this.props} />
+        <Alert severity={AppNotificationSeverity.Error} {...this.props} />
       </div>
     );
   }

public/app/features/explore/Explore.tsx

@@ -280,7 +280,8 @@ export class Explore extends React.PureComponent<ExploreProps> {
           <div className="explore-container">
             <Alert
               title={`Error connecting to datasource: ${datasourceError}`}
-              button={{ text: 'Reconnect', onClick: this.onReconnect }}
+              buttonText={'Reconnect'}
+              onButtonClick={this.onReconnect}
             />
           </div>
         </FadeIn>

public/app/features/plugins/PluginPage.tsx

@@ -8,6 +8,7 @@ import find from 'lodash/find';
 import { UrlQueryMap } from '@grafana/runtime';
 import { StoreState, AppNotificationSeverity } from 'app/types';
 import {
+  Alert,
   PluginType,
   GrafanaPlugin,
   PluginInclude,
@@ -30,7 +31,6 @@ import { PluginDashboards } from './PluginDashboards';
 import { appEvents } from 'app/core/core';
 import { config } from 'app/core/config';
 import { ContextSrv } from '../../core/services/context_srv';
-import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 
 export function getLoadingNav(): NavModel {
   const node = {
@@ -141,7 +141,7 @@ class PluginPage extends PureComponent<Props, State> {
     const { plugin, nav } = this.state;
 
     if (!plugin) {
-      return <AlertBox severity={AppNotificationSeverity.Error} title="Plugin Not Found" />;
+      return <Alert severity={AppNotificationSeverity.Error} title="Plugin Not Found" />;
     }
 
     const active = nav.main.children.find(tab => tab.active);
@@ -300,10 +300,10 @@ class PluginPage extends PureComponent<Props, State> {
             <div className="sidebar-container">
               <div className="sidebar-content">
                 {plugin.loadError && (
-                  <AlertBox
+                  <Alert
                     severity={AppNotificationSeverity.Error}
                     title="Error Loading Plugin"
-                    body={
+                    children={
                       <>
                         Check the server startup logs for more information. <br />
                         If this plugin was loaded from git, make sure it was compiled.

public/sass/_variables.generated.scss

@@ -179,7 +179,7 @@ $zindex-typeahead: 1060;
 //
 
 $btn-padding-x: 14px !default;
-$btn-padding-y: 10px !default;
+$btn-padding-y: 8px !default;
 $btn-line-height: 1 !default;
 $btn-font-weight: 500 !default;