renaming things

public/app/core/angular_wrappers.ts

@@ -5,12 +5,12 @@ import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
-import AlertList from './components/Alerts/AlertList';
+import AppNotificationList from './components/AppNotifications/AppNotificationList';
 
 export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
   react2AngularDirective('sidemenu', SideMenu, []);
-  react2AngularDirective('pageAlertList', AlertList, []);
+  react2AngularDirective('pageAlertList', AppNotificationList, []);
   react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
   react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
   react2AngularDirective('searchResult', SearchResult, []);

public/app/core/components/Alerts/AlertList.tsx

@@ -1,45 +0,0 @@
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-
-export interface Props {
-  alerts: any[];
-}
-
-export class AlertList extends PureComponent<Props> {
-  onClearAlert = alert => {
-    console.log('clear alert', alert);
-  };
-
-  render() {
-    const { alerts } = this.props;
-
-    return (
-      <div>
-        {alerts.map((alert, index) => {
-          return (
-            <div key={index} className={`alert-${alert.severity} alert`}>
-              <div className="alert-icon">
-                <i className={alert.icon} />
-              </div>
-              <div className="alert-body">
-                <div className="alert-title">{alert.title}</div>
-                <div className="alert-text">{alert.text}</div>
-              </div>
-              <button type="button" className="alert-close" onClick={() => this.onClearAlert(alert)}>
-                <i className="fa fa fa-remove" />
-              </button>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    alerts: state.alerts.alerts,
-  };
-}
-
-export default connect(mapStateToProps)(AlertList);

public/app/core/components/Alerts/state/actions.ts

@@ -1,23 +0,0 @@
-import { Alert } from 'app/types';
-
-export enum ActionTypes {
-  AddAlert = 'ADD_ALERT',
-  ClearAlert = 'CLEAR_ALERT',
-}
-
-interface AddAlertAction {
-  type: ActionTypes.AddAlert;
-  payload: Alert;
-}
-
-interface ClearAlertAction {
-  type: ActionTypes.ClearAlert;
-  payload: Alert;
-}
-
-export type Action = AddAlertAction | ClearAlertAction;
-
-export const clearAlert = (alert: Alert) => ({
-  type: ActionTypes.ClearAlert,
-  payload: alert,
-});

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

@@ -0,0 +1,96 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import appEvents from 'app/core/app_events';
+import { addAppNotification, clearAppNotification } from './state/actions';
+
+export interface Props {
+  alerts: any[];
+  addAppNotification: typeof addAppNotification;
+  clearAppNotification: typeof clearAppNotification;
+}
+
+enum AppNotificationSeverity {
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+  Info = 'info',
+}
+
+export class AppNotificationList extends PureComponent<Props> {
+  componentDidMount() {
+    appEvents.on('alert-warning', options => this.addAppNotification(options[0], options[1], 'warning', 5000));
+    appEvents.on('alert-success', options => this.addAppNotification(options[0], options[1], 'success', 3000));
+    appEvents.on('alert-error', options => this.addAppNotification(options[0], options[1], 'error', 7000));
+  }
+
+  addAppNotification(title, text, severity, timeout) {
+    const newAlert = {
+      title: title || '',
+      text: text || '',
+      severity: severity || AppNotificationSeverity.Info,
+      icon: this.getIconForSeverity(severity),
+      remove: this.clearAutomatically(this, timeout),
+    };
+
+    this.props.addAppNotification(newAlert);
+  }
+
+  getIconForSeverity(severity) {
+    switch (severity) {
+      case AppNotificationSeverity.Success:
+        return 'fa fa-check';
+      case AppNotificationSeverity.Error:
+        return 'fa fa-exclamation-triangle';
+      default:
+        return 'fa fa-exclamation';
+    }
+  }
+
+  clearAutomatically = (alert, timeout) => {
+    setTimeout(() => {
+      this.props.clearAppNotification(alert);
+    }, timeout);
+  };
+
+  onClearAppNotification = alert => {
+    this.props.clearAppNotification(alert);
+  };
+
+  render() {
+    const { alerts } = this.props;
+
+    return (
+      <div>
+        {alerts.map((alert, index) => {
+          return (
+            <div key={index} className={`alert-${alert.severity} alert`}>
+              <div className="alert-icon">
+                <i className={alert.icon} />
+              </div>
+              <div className="alert-body">
+                <div className="alert-title">{alert.title}</div>
+                <div className="alert-text">{alert.text}</div>
+              </div>
+              <button type="button" className="alert-close" onClick={() => this.onClearAppNotification(alert)}>
+                <i className="fa fa fa-remove" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    alerts: state.alerts.alerts,
+  };
+}
+
+const mapDispatchToProps = {
+  addAppNotification,
+  clearAppNotification,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AppNotificationList);

public/app/core/components/AppNotifications/state/actions.ts

@@ -0,0 +1,28 @@
+import { AppNotification } from 'app/types';
+
+export enum ActionTypes {
+  AddAppNotification = 'ADD_APP_NOTIFICATION',
+  ClearAppNotification = 'CLEAR_APP_NOTIFICATION',
+}
+
+interface AddAppNotificationAction {
+  type: ActionTypes.AddAppNotification;
+  payload: AppNotification;
+}
+
+interface ClearAppNotificationAction {
+  type: ActionTypes.ClearAppNotification;
+  payload: AppNotification;
+}
+
+export type Action = AddAppNotificationAction | ClearAppNotificationAction;
+
+export const clearAppNotification = (alert: AppNotification) => ({
+  type: ActionTypes.ClearAppNotification,
+  payload: alert,
+});
+
+export const addAppNotification = (alert: AppNotification) => ({
+  type: ActionTypes.AddAppNotification,
+  payload: alert,
+});

public/app/core/components/AppNotifications/state/reducers.test.ts

@@ -21,7 +21,7 @@ describe('clear alert', () => {
     };
 
     const result = alertsReducer(initialState, {
-      type: ActionTypes.ClearAlert,
+      type: ActionTypes.ClearAppNotification,
       payload: initialState.alerts[1],
     });
 

public/app/core/components/AppNotifications/state/reducers.ts

@@ -1,15 +1,15 @@
-import { Alert, AlertsState } from 'app/types';
+import { AppNotification, AlertsState } from 'app/types';
 import { Action, ActionTypes } from './actions';
 
 export const initialState: AlertsState = {
-  alerts: [] as Alert[],
+  alerts: [] as AppNotification[],
 };
 
 export const alertsReducer = (state = initialState, action: Action): AlertsState => {
   switch (action.type) {
-    case ActionTypes.AddAlert:
+    case ActionTypes.AddAppNotification:
       return { ...state, alerts: state.alerts.concat([action.payload]) };
-    case ActionTypes.ClearAlert:
+    case ActionTypes.ClearAppNotification:
       return {
         ...state,
         alerts: state.alerts.filter(alert => alert !== action.payload),

public/app/types/alerts.ts

@@ -1,4 +1,4 @@
-export interface Alert {
+export interface AppNotification {
   severity: string;
   icon: string;
   title: string;
@@ -6,5 +6,5 @@ export interface Alert {
 }
 
 export interface AlertsState {
-  alerts: Alert[];
+  alerts: AppNotification[];
 }

public/app/types/index.ts

@@ -9,7 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState } from './user';
 import { DataSource, DataSourcesState } from './datasources';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
-import { Alert, AlertsState } from './alerts';
+import { AppNotification, AlertsState } from './alerts';
 
 export {
   Team,
@@ -47,7 +47,7 @@ export {
   User,
   UsersState,
   PluginDashboard,
-  Alert,
+  AppNotification,
   AlertsState,
 };