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

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}
-        icon={appNotification.icon}
-        onClose={() => onClearNotification(appNotification.id)}
+        children={appNotification.text}
+        onRemove={() => 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}
-                  onClose={this.onClearUserError}
+                  children={userError.body}
+                  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}
-                onClose={this.onClearUserError}
+                children={userError.body}
+                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 { AlertBox } from 'app/core/components/AlertBox/AlertBox';
+import { CustomScrollbar, Alert } from '@grafana/ui';
 
 // 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;