Replace toastr with Ant Notification (#3610)

client/app/assets/less/ant.less

@@ -29,6 +29,7 @@
 @import "~antd/lib/card/style/index";
 @import "~antd/lib/spin/style/index";
 @import "~antd/lib/tabs/style/index";
+@import "~antd/lib/notification/style/index";
 @import 'inc/ant-variables';
 
 // Remove bold in labels for Ant checkboxes and radio buttons
@@ -247,3 +248,12 @@
 .ant-popover {
   z-index: 1000; // make sure it doesn't cover drawer
 }
+
+// flexible width for notifications
+.@{notification-prefix-cls} {
+  width: auto;
+
+  &-notice {
+    padding-right: 48px;
+  }
+}

client/app/assets/less/main.less

@@ -7,7 +7,6 @@
 /** Load Vendors Dependencies **/
 @import '~font-awesome/less/font-awesome';
 @import '~ui-select/dist/select.css';
-@import '~angular-toastr/src/toastr';
 @import '~angular-resizable/src/angular-resizable.css';
 @import '~material-design-iconic-font/dist/css/material-design-iconic-font.css';
 @import '~pace-progress/themes/blue/pace-theme-minimal.css';

client/app/components/QueryEditor.jsx

@@ -5,7 +5,7 @@ import { react2angular } from 'react2angular';
 
 import AceEditor from 'react-ace';
 import ace from 'brace';
-import toastr from 'angular-toastr';
+import notification from '@/services/notification';
 
 import 'brace/ext/language_tools';
 import 'brace/mode/json';
@@ -209,7 +209,7 @@ class QueryEditor extends React.Component {
   formatQuery = () => {
     Query.format(this.props.dataSource.syntax || 'sql', this.props.queryText)
       .then(this.updateQuery)
-      .catch(error => toastr.error(error));
+      .catch(error => notification.error(error));
   };
 
   toggleAutocomplete = (state) => {

client/app/components/QuerySelector.jsx

@@ -6,7 +6,7 @@ import { debounce, find } from 'lodash';
 import Input from 'antd/lib/input';
 import Select from 'antd/lib/select';
 import { Query } from '@/services/query';
-import { toastr } from '@/services/ng';
+import notification from '@/services/notification';
 import { QueryTagsControl } from '@/components/tags-control/TagsControl';
 
 const SEARCH_DEBOUNCE_DURATION = 200;
@@ -94,7 +94,7 @@ export function QuerySelector(props) {
     if (queryId) {
       query = find(searchResults, { id: queryId });
       if (!query) { // shouldn't happen
-        toastr.error('Something went wrong... Couldn\'t select query');
+        notification.error('Something went wrong...', 'Couldn\'t select query');
       }
     }
 

client/app/components/SelectItemsDialog.jsx

@@ -9,7 +9,7 @@ import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 import { BigMessage } from '@/components/BigMessage';
 
 import LoadingState from '@/components/items-list/components/LoadingState';
-import { toastr } from '@/services/ng';
+import notification from '@/services/notification';
 
 class SelectItemsDialog extends React.Component {
   static propTypes = {
@@ -100,7 +100,7 @@ class SelectItemsDialog extends React.Component {
         })
         .catch(() => {
           this.setState({ saveInProgress: false });
-          toastr.error('Failed to save some of selected items.');
+          notification.error('Failed to save some of selected items.');
         });
     });
   }

client/app/components/alerts/alert-subscriptions/index.js

@@ -1,7 +1,8 @@
 import { includes, without, compact } from 'lodash';
+import notification from '@/services/notification';
 import template from './alert-subscriptions.html';
 
-function controller($scope, $q, $sce, currentUser, AlertSubscription, Destination, toastr) {
+function controller($scope, $q, $sce, currentUser, AlertSubscription, Destination) {
   'ngInject';
 
   $scope.newSubscription = {};
@@ -60,7 +61,7 @@ function controller($scope, $q, $sce, currentUser, AlertSubscription, Destinatio
 
     sub.$save(
       () => {
-        toastr.success('Subscribed.');
+        notification.success('Subscribed.');
         $scope.subscribers.push(sub);
         $scope.destinations = without($scope.destinations, $scope.newSubscription.destination);
         if ($scope.destinations.length > 0) {
@@ -70,7 +71,7 @@ function controller($scope, $q, $sce, currentUser, AlertSubscription, Destinatio
         }
       },
       () => {
-        toastr.error('Failed saving subscription.');
+        notification.error('Failed saving subscription.');
       },
     );
   };
@@ -81,7 +82,7 @@ function controller($scope, $q, $sce, currentUser, AlertSubscription, Destinatio
 
     subscriber.$delete(
       () => {
-        toastr.success('Unsubscribed');
+        notification.success('Unsubscribed');
         $scope.subscribers = without($scope.subscribers, subscriber);
         if (destination) {
           $scope.destinations.push(destination);
@@ -94,7 +95,7 @@ function controller($scope, $q, $sce, currentUser, AlertSubscription, Destinatio
         }
       },
       () => {
-        toastr.error('Failed unsubscribing.');
+        notification.error('Failed unsubscribing.');
       },
     );
   };

client/app/components/dashboards/AddTextboxDialog.jsx

@@ -7,7 +7,7 @@ import Input from 'antd/lib/input';
 import Tooltip from 'antd/lib/tooltip';
 import Divider from 'antd/lib/divider';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
-import { toastr } from '@/services/ng';
+import notification from '@/services/notification';
 
 import './AddTextboxDialog.less';
 
@@ -44,7 +44,7 @@ class AddTextboxDialog extends React.Component {
         this.props.dialog.close();
       })
       .catch(() => {
-        toastr.error('Widget could not be added');
+        notification.error('Widget could not be added');
       })
       .finally(() => {
         this.setState({ saveInProgress: false });

client/app/components/dashboards/AddWidgetDialog.jsx

@@ -10,7 +10,7 @@ import {
 } from '@/components/ParameterMappingInput';
 import { QuerySelector } from '@/components/QuerySelector';
 
-import { toastr } from '@/services/ng';
+import notification from '@/services/notification';
 
 import { Query } from '@/services/query';
 
@@ -84,7 +84,7 @@ class AddWidgetDialog extends React.Component {
         this.props.dialog.close();
       })
       .catch(() => {
-        toastr.error('Widget could not be added');
+        notification.error('Widget could not be added');
       })
       .finally(() => {
         this.setState({ saveInProgress: false });

client/app/components/dashboards/EditParameterMappingsDialog.jsx

@@ -10,6 +10,7 @@ import {
   editableMappingsToParameterMappings,
   synchronizeWidgetTitles,
 } from '@/components/ParameterMappingInput';
+import notification from '@/services/notification';
 
 export function getParamValuesSnapshot(mappings, dashboardParameters) {
   return map(
@@ -61,7 +62,6 @@ class EditParameterMappingsDialog extends React.Component {
   }
 
   saveWidget() {
-    const toastr = this.props.toastr; // eslint-disable-line react/prop-types
     const widget = this.props.widget;
 
     this.setState({ saveInProgress: true });
@@ -84,7 +84,7 @@ class EditParameterMappingsDialog extends React.Component {
         this.props.dialog.close(valuesChanged);
       })
       .catch(() => {
-        toastr.error('Widget cannot be updated');
+        notification.error('Widget cannot be updated');
       })
       .finally(() => {
         this.setState({ saveInProgress: false });

client/app/components/dashboards/widget.js

@@ -3,6 +3,7 @@ import template from './widget.html';
 import editTextBoxTemplate from './edit-text-box.html';
 import widgetDialogTemplate from './widget-dialog.html';
 import EditParameterMappingsDialog from '@/components/dashboards/EditParameterMappingsDialog';
+import notification from '@/services/notification';
 import './widget.less';
 import './widget-dialog.less';
 
@@ -25,7 +26,7 @@ const EditTextBoxComponent = {
     close: '&',
     dismiss: '&',
   },
-  controller(toastr) {
+  controller() {
     'ngInject';
 
     this.saveInProgress = false;
@@ -40,7 +41,7 @@ const EditTextBoxComponent = {
             this.close();
           })
           .catch(() => {
-            toastr.error('Widget can not be updated');
+            notification.error('Widget can not be updated');
           })
           .finally(() => {
             this.saveInProgress = false;

client/app/components/dynamic-form/DynamicForm.jsx

@@ -7,9 +7,9 @@ import Checkbox from 'antd/lib/checkbox';
 import Button from 'antd/lib/button';
 import Upload from 'antd/lib/upload';
 import Icon from 'antd/lib/icon';
+import notification from '@/services/notification';
 import { includes } from 'lodash';
 import { react2angular } from 'react2angular';
-import { toastr } from '@/services/ng';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
 
@@ -83,11 +83,11 @@ export const DynamicForm = Form.create()(class DynamicForm extends React.Compone
             const { setFieldsValue, getFieldsValue } = this.props.form;
             this.setState({ isSubmitting: false });
             setFieldsValue(getFieldsValue()); // reset form touched state
-            toastr.success(msg);
+            notification.success(msg);
           },
           (msg) => {
             this.setState({ isSubmitting: false });
-            toastr.error(msg);
+            notification.error(msg);
           },
         );
       } else this.setState({ isSubmitting: false });

client/app/components/groups/DeleteGroupButton.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Button from 'antd/lib/button';
 import Modal from 'antd/lib/modal';
 import Tooltip from 'antd/lib/tooltip';
-import { toastr } from '@/services/ng';
+import notification from '@/services/notification';
 
 function deleteGroup(event, group, onGroupDeleted) {
   Modal.confirm({
@@ -15,7 +15,7 @@ function deleteGroup(event, group, onGroupDeleted) {
     cancelText: 'No',
     onOk: () => {
       group.$delete(() => {
-        toastr.success('Group deleted successfully.');
+        notification.success('Group deleted successfully.');
         onGroupDeleted();
       });
     },

client/app/components/permissions-editor/index.js

@@ -1,4 +1,5 @@
 import { includes, each, filter } from 'lodash';
+import notification from '@/services/notification';
 import template from './permissions-editor.html';
 
 const PermissionsEditorComponent = {
@@ -8,7 +9,7 @@ const PermissionsEditorComponent = {
     close: '&',
     dismiss: '&',
   },
-  controller($http, User, toastr) {
+  controller($http, User) {
     'ngInject';
 
     this.grantees = [];
@@ -58,9 +59,9 @@ const PermissionsEditorComponent = {
         loadGrantees();
       }).catch((error) => {
         if (error.status === 403) {
-          toastr.error('You cannot add a user to this dashboard. Ask the dashboard owner to grant them permissions.');
+          notification.error('You cannot add a user to this dashboard.', 'Ask the dashboard owner to grant them permissions.');
         } else {
-          toastr.error('Something went wrong.');
+          notification.error('Something went wrong.');
         }
       });
     };

client/app/components/users/ChangePasswordDialog.jsx

@@ -4,7 +4,7 @@ import Modal from 'antd/lib/modal';
 import Input from 'antd/lib/input';
 import { isFunction } from 'lodash';
 import { User } from '@/services/user';
-import { toastr } from '@/services/ng';
+import notification from '@/services/notification';
 import { UserProfile } from '../proptypes';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 
@@ -68,10 +68,10 @@ class ChangePasswordDialog extends React.Component {
           this.setState({ updatingPassword: true });
 
           User.save(userData, () => {
-            toastr.success('Saved.');
+            notification.success('Saved.');
             this.props.dialog.close({ success: true });
           }, (error = {}) => {
-            toastr.error(error.data && error.data.message || 'Failed saving.');
+            notification.error(error.data && error.data.message || 'Failed saving.');
             this.setState({ updatingPassword: false });
           });
         } else {

client/app/config/index.js

@@ -13,7 +13,6 @@ import ngResource from 'angular-resource';
 import uiBootstrap from 'angular-ui-bootstrap';
 import uiSelect from 'ui-select';
 import ngMessages from 'angular-messages';
-import toastr from 'angular-toastr';
 import ngUpload from 'angular-base64-upload';
 import vsRepeat from 'angular-vs-repeat';
 import 'brace';
@@ -49,7 +48,6 @@ const requirements = [
   uiBootstrap,
   ngMessages,
   uiSelect,
-  toastr,
   'ui.ace',
   ngUpload,
   'angularResizable',

client/app/index.js

@@ -1,15 +1,10 @@
 import ngModule from '@/config';
 
-ngModule.config(($locationProvider, $compileProvider, uiSelectConfig, toastrConfig) => {
+ngModule.config(($locationProvider, $compileProvider, uiSelectConfig) => {
   $compileProvider.debugInfoEnabled(false);
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data|tel|sms|mailto):/);
   $locationProvider.html5Mode(true);
   uiSelectConfig.theme = 'bootstrap';
-
-  Object.assign(toastrConfig, {
-    positionClass: 'toast-bottom-right',
-    timeOut: 2000,
-  });
 });
 
 // Update ui-select's template to use Font-Awesome instead of glyphicon.

client/app/pages/alert/index.js

@@ -1,7 +1,8 @@
 import { template as templateBuilder } from 'lodash';
+import notification from '@/services/notification';
 import template from './alert.html';
 
-function AlertCtrl($scope, $routeParams, $location, $sce, toastr, currentUser, Query, Events, Alert) {
+function AlertCtrl($scope, $routeParams, $location, $sce, currentUser, Query, Events, Alert) {
   this.alertId = $routeParams.alertId;
 
   if (this.alertId === 'new') {
@@ -61,13 +62,13 @@ function AlertCtrl($scope, $routeParams, $location, $sce, toastr, currentUser, Q
     }
     this.alert.$save(
       (alert) => {
-        toastr.success('Saved.');
+        notification.success('Saved.');
         if (this.alertId === 'new') {
           $location.path(`/alerts/${alert.id}`).replace();
         }
       },
       () => {
-        toastr.error('Failed saving alert.');
+        notification.error('Failed saving alert.');
       },
     );
   };
@@ -76,10 +77,10 @@ function AlertCtrl($scope, $routeParams, $location, $sce, toastr, currentUser, Q
     this.alert.$delete(
       () => {
         $location.path('/alerts');
-        toastr.success('Alert deleted.');
+        notification.success('Alert deleted.');
       },
       () => {
-        toastr.error('Failed deleting alert.');
+        notification.error('Failed deleting alert.');
       },
     );
   };