From 3d979e61345c403d67363f40216f43c04b3f77c8 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 6 Jul 2018 13:41:53 -0700
Subject: [PATCH] Add call-out react directive and use it to surface rollup
 errors in the visualization editor sidebar.

---
 src/ui/public/react_components.js             |  3 +++
 .../public/vis/editors/default/sidebar.html   |  9 +++++++++
 src/ui/public/vis/editors/default/sidebar.js  | 19 +++++++++++++++++--
 .../public/vis/editors/default/sidebar.less   |  3 +++
 src/ui/public/visualize/visualize.js          | 17 ++++++++++++++---
 5 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/ui/public/vis/editors/default/sidebar.less

diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
index 9bbfb2c366a2c..521ecd52920e7 100644
--- a/src/ui/public/react_components.js
+++ b/src/ui/public/react_components.js
@@ -28,6 +28,7 @@ import {
   EuiIcon,
   EuiColorPicker,
   EuiIconTip,
+  EuiCallOut,
 } from '@elastic/eui';
 
 import { uiModules } from './modules';
@@ -43,3 +44,5 @@ app.directive('icon', reactDirective => reactDirective(EuiIcon));
 app.directive('colorPicker', reactDirective => reactDirective(EuiColorPicker));
 
 app.directive('iconTip', reactDirective => reactDirective(EuiIconTip, ['content', 'type', 'position', 'title']));
+
+app.directive('callOut', reactDirective => reactDirective(EuiCallOut, ['title', 'color', 'size', 'iconType', 'children']));
diff --git a/src/ui/public/vis/editors/default/sidebar.html b/src/ui/public/vis/editors/default/sidebar.html
index f0cff4acd142f..43ddf5e1aff21 100644
--- a/src/ui/public/vis/editors/default/sidebar.html
+++ b/src/ui/public/vis/editors/default/sidebar.html
@@ -19,6 +19,15 @@
     </div>
 
     <nav class="navbar navbar-default subnav">
+      <div class="visEditorSidebarError" ng-if="sidebar.persistentError">
+        <call-out
+          color="'danger'"
+          iconType="'alert'"
+          title="sidebar.persistentError"
+          size="'s'"
+        />
+      </div>
+
       <div class="container-fluid">
 
         <!-- tabs -->
diff --git a/src/ui/public/vis/editors/default/sidebar.js b/src/ui/public/vis/editors/default/sidebar.js
index 6503a11b998f1..33155b5cbafe6 100644
--- a/src/ui/public/vis/editors/default/sidebar.js
+++ b/src/ui/public/vis/editors/default/sidebar.js
@@ -23,17 +23,18 @@ import './vis_options';
 import { uiModules } from '../../../modules';
 import sidebarTemplate from './sidebar.html';
 
+import './sidebar.less';
+
 uiModules
   .get('app/visualize')
   .directive('visEditorSidebar', function () {
-
-
     return {
       restrict: 'E',
       template: sidebarTemplate,
       scope: true,
       controllerAs: 'sidebar',
       controller: function ($scope) {
+        this.persistentError = undefined;
 
         $scope.$watch('vis.type', (visType) => {
           if (visType) {
@@ -49,6 +50,20 @@ uiModules
             this.section = this.section || (this.showData ? 'data' : _.get(visType, 'editorConfig.optionTabs[0].name'));
           }
         });
+
+        $scope.$watch('vis.requestError', (requestError) => {
+          if (requestError) {
+            const { resp: { message } } = requestError;
+            const isRollupError = message.includes('rollup');
+
+            if (isRollupError) {
+              this.persistentError = message;
+              return;
+            }
+          }
+
+          this.persistentError = undefined;
+        });
       }
     };
   });
diff --git a/src/ui/public/vis/editors/default/sidebar.less b/src/ui/public/vis/editors/default/sidebar.less
new file mode 100644
index 0000000000000..9e346211e073f
--- /dev/null
+++ b/src/ui/public/vis/editors/default/sidebar.less
@@ -0,0 +1,3 @@
+.visEditorSidebarError {
+  padding: 8px;
+}
diff --git a/src/ui/public/visualize/visualize.js b/src/ui/public/visualize/visualize.js
index 63109f7ed07ed..452fde06cd5d6 100644
--- a/src/ui/public/visualize/visualize.js
+++ b/src/ui/public/visualize/visualize.js
@@ -100,16 +100,27 @@ uiModules
               //No need to call the response handler when there have been no data nor has been there changes
               //in the vis-state (response handler does not depend on uiStat
               const canSkipResponseHandler = (
-                $scope.previousRequestHandlerResponse && $scope.previousRequestHandlerResponse === requestHandlerResponse &&
-              $scope.previousVisState && _.isEqual($scope.previousVisState, $scope.vis.getState())
+                $scope.previousRequestHandlerResponse
+                  && $scope.previousRequestHandlerResponse === requestHandlerResponse
+                  && $scope.previousVisState
+                  && _.isEqual($scope.previousVisState, $scope.vis.getState())
               );
 
               $scope.previousVisState = $scope.vis.getState();
               $scope.previousRequestHandlerResponse = requestHandlerResponse;
+
+              $scope.$evalAsync(() => {
+                $scope.vis.requestError = undefined;
+              });
+
               return canSkipResponseHandler ? $scope.visData : Promise.resolve(responseHandler($scope.vis, requestHandlerResponse));
             }, e => {
               $scope.savedObj.searchSource.cancelQueued();
-              $scope.vis.requestError = e;
+
+              $scope.$evalAsync(() => {
+                $scope.vis.requestError = e;
+              });
+
               if (isTermSizeZeroError(e)) {
                 return toastNotifications.addDanger({
                   title: `Visualization '${$scope.vis.title}' has an error`,