From dd0fab7275b8c7e93f0df0ab33940c1fbe6e9a5c Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Mon, 4 Mar 2019 16:31:31 +0200
Subject: [PATCH] Moved widget and dashboard save logic out of dialog (#3522)

---
 .../components/dashboards/AddWidgetDialog.jsx | 31 ++------------
 client/app/pages/dashboards/dashboard.html    |  4 +-
 client/app/pages/dashboards/dashboard.js      | 42 +++++++++++++++++--
 3 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx
index 6821035f07..898d0ffcfe 100644
--- a/client/app/components/dashboards/AddWidgetDialog.jsx
+++ b/client/app/components/dashboards/AddWidgetDialog.jsx
@@ -7,13 +7,11 @@ import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 import {
   MappingType,
   ParameterMappingListInput,
-  editableMappingsToParameterMappings,
-  synchronizeWidgetTitles,
 } from '@/components/ParameterMappingInput';
 import { QuerySelector } from '@/components/QuerySelector';
 
 import { toastr } from '@/services/ng';
-import { Widget } from '@/services/widget';
+
 import { Query } from '@/services/query';
 
 const { Option, OptGroup } = Select;
@@ -22,6 +20,7 @@ class AddWidgetDialog extends React.Component {
   static propTypes = {
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     dialog: DialogPropType.isRequired,
+    onConfirm: PropTypes.func.isRequired,
   };
 
   state = {
@@ -76,34 +75,12 @@ class AddWidgetDialog extends React.Component {
   }
 
   saveWidget() {
-    const dashboard = this.props.dashboard;
+    const { selectedVis, parameterMappings } = this.state;
 
     this.setState({ saveInProgress: true });
 
-    const widget = new Widget({
-      visualization_id: this.state.selectedVis && this.state.selectedVis.id,
-      dashboard_id: dashboard.id,
-      options: {
-        isHidden: false,
-        position: {},
-        parameterMappings: editableMappingsToParameterMappings(this.state.parameterMappings),
-      },
-      visualization: this.state.selectedVis,
-      text: '',
-    });
-
-    const position = dashboard.calculateNewWidgetPosition(widget);
-    widget.options.position.col = position.col;
-    widget.options.position.row = position.row;
-
-    const widgetsToSave = [
-      widget,
-      ...synchronizeWidgetTitles(widget.options.parameterMappings, dashboard.widgets),
-    ];
-
-    Promise.all(map(widgetsToSave, w => w.save()))
+    this.props.onConfirm(selectedVis, parameterMappings)
       .then(() => {
-        dashboard.widgets.push(widget);
         this.props.dialog.close();
       })
       .catch(() => {
diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
index 73c883d603..715a9f105e 100644
--- a/client/app/pages/dashboards/dashboard.html
+++ b/client/app/pages/dashboards/dashboard.html
@@ -110,8 +110,8 @@ <h2>
       <span class="hidden-xs hidden-sm">Widgets are individual query visualizations or text boxes you can place on your dashboard in various arrangements.</span>
     </h2>
     <div>
-      <a class="btn btn-default" ng-click="$ctrl.addTextBox()">Add Textbox</a>
-      <a class="btn btn-primary m-l-10" ng-click="$ctrl.addWidget('widget')">Add Widget</a>
+      <a class="btn btn-default" ng-click="$ctrl.showAddTextboxDialog()">Add Textbox</a>
+      <a class="btn btn-primary m-l-10" ng-click="$ctrl.showAddWidgetDialog()">Add Widget</a>
     </div>
   </div>
 </div>
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
index 1cecdf6a30..0909a9bae0 100644
--- a/client/app/pages/dashboards/dashboard.js
+++ b/client/app/pages/dashboards/dashboard.js
@@ -2,6 +2,11 @@ import * as _ from 'lodash';
 import PromiseRejectionError from '@/lib/promise-rejection-error';
 import getTags from '@/services/getTags';
 import { policy } from '@/services/policy';
+import { Widget } from '@/services/widget';
+import {
+  editableMappingsToParameterMappings,
+  synchronizeWidgetTitles,
+} from '@/components/ParameterMappingInput';
 import { durationHumanize } from '@/filters';
 import template from './dashboard.html';
 import ShareDashboardDialog from './ShareDashboardDialog';
@@ -319,7 +324,7 @@ function DashboardCtrl(
     );
   };
 
-  this.addTextBox = () => {
+  this.showAddTextboxDialog = () => {
     $uibModal
       .open({
         component: 'addTextboxDialog',
@@ -330,14 +335,45 @@ function DashboardCtrl(
       .result.then(this.onWidgetAdded);
   };
 
-  this.addWidget = () => {
-    AddWidgetDialog.showModal({ dashboard: this.dashboard })
+  this.showAddWidgetDialog = () => {
+    AddWidgetDialog.showModal({
+      dashboard: this.dashboard,
+      onConfirm: this.addWidget,
+    })
       .result.then(() => {
         this.onWidgetAdded();
         $scope.$applyAsync();
       });
   };
 
+  this.addWidget = (selectedVis, parameterMappings) => {
+    const widget = new Widget({
+      visualization_id: selectedVis && selectedVis.id,
+      dashboard_id: this.dashboard.id,
+      options: {
+        isHidden: false,
+        position: {},
+        parameterMappings: editableMappingsToParameterMappings(parameterMappings),
+      },
+      visualization: selectedVis,
+      text: '',
+    });
+
+    const position = this.dashboard.calculateNewWidgetPosition(widget);
+    widget.options.position.col = position.col;
+    widget.options.position.row = position.row;
+
+    const widgetsToSave = [
+      widget,
+      ...synchronizeWidgetTitles(widget.options.parameterMappings, this.dashboard.widgets),
+    ];
+
+    return Promise.all(widgetsToSave.map(w => w.save()))
+      .then(() => {
+        this.dashboard.widgets.push(widget);
+      });
+  };
+
   this.onWidgetAdded = () => {
     this.extractGlobalParameters();
     // Save position of newly added widget (but not entire layout)