Alternative implementation

Author: kravets-levko

client/app/components/dashboards/EditParameterMappingsDialog.jsx

@@ -1,15 +1,34 @@
-import { map } from 'lodash';
+import { isMatch, map, find, sortBy } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'antd/lib/modal';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 import {
-  MappingType,
   ParameterMappingListInput,
   parameterMappingsToEditableMappings,
   editableMappingsToParameterMappings,
   synchronizeWidgetTitles,
 } from '@/components/ParameterMappingInput';
+import { ParameterMappingType } from '@/services/widget';
+
+export function getParamValuesSnapshot(mappings, dashboardParameters) {
+  return map(
+    sortBy(mappings, m => m.name),
+    (m) => {
+      let param;
+      switch (m.type) {
+        case ParameterMappingType.StaticValue:
+          return [m.name, m.value];
+        case ParameterMappingType.WidgetLevel:
+          return [m.name, m.param.value];
+        case ParameterMappingType.DashboardLevel:
+          param = find(dashboardParameters, p => p.name === m.mapTo);
+          return [m.name, param ? param.value : null];
+        // no default
+      }
+    },
+  );
+}
 
 class EditParameterMappingsDialog extends React.Component {
   static propTypes = {
@@ -18,39 +37,34 @@ class EditParameterMappingsDialog extends React.Component {
     dialog: DialogPropType.isRequired,
   };
 
-  originalParamValuesSig = null
-
   constructor(props) {
     super(props);
 
-    const parameterMappings = parameterMappingsToEditableMappings(
-      props.widget.options.parameterMappings,
-      props.widget.query.getParametersDefs(),
-      map(this.props.dashboard.getParametersDefs(), p => p.name),
-    );
-
-    this.originalParamValuesSig = this.constructor.getParamValuesSignature(parameterMappings);
-
     this.state = {
       saveInProgress: false,
-      parameterMappings,
+      parameterMappings: parameterMappingsToEditableMappings(
+        props.widget.options.parameterMappings,
+        props.widget.query.getParametersDefs(),
+        map(this.props.dashboard.getParametersDefs(), p => p.name),
+      ),
     };
   }
 
-  static getParamValuesSignature(mappings) {
-    const s = JSON.stringify;
-    return mappings
-      .map(m => (m.type === MappingType.StaticValue ? s(m.value) : s(m.param.value)))
-      .join();
-  }
-
   saveWidget() {
     const toastr = this.props.toastr; // eslint-disable-line react/prop-types
     const widget = this.props.widget;
 
     this.setState({ saveInProgress: true });
 
-    widget.options.parameterMappings = editableMappingsToParameterMappings(this.state.parameterMappings);
+    const prevMappings = widget.options.parameterMappings;
+    const newMappings = editableMappingsToParameterMappings(this.state.parameterMappings);
+    widget.options.parameterMappings = newMappings;
+
+    const dashboardParameters = this.props.dashboard.getParametersDefs();
+    const valuesChanged = !isMatch(
+      getParamValuesSnapshot(prevMappings, dashboardParameters),
+      getParamValuesSnapshot(newMappings, dashboardParameters),
+    );
 
     const widgetsToSave = [
       widget,
@@ -59,8 +73,6 @@ class EditParameterMappingsDialog extends React.Component {
 
     Promise.all(map(widgetsToSave, w => w.save()))
       .then(() => {
-        const paramValuesSig = this.constructor.getParamValuesSignature(this.state.parameterMappings);
-        const valuesChanged = this.originalParamValuesSig !== paramValuesSig;
         this.props.dialog.close(valuesChanged);
       })
       .catch(() => {