fix: variable name changes when element name/label changes

packages/dmn-js-decision-table/src/features/modeling/index.js

@@ -4,15 +4,18 @@ import DmnFactory from './DmnFactory';
 import ElementFactory from './ElementFactory';
 import IdChangeBehavior from
   'dmn-js-shared/lib/features/modeling/behavior/IdChangeBehavior';
+import NameChangeBehavior from
+  'dmn-js-shared/lib/features/modeling/behavior/NameChangeBehavior';
 import Modeling from './Modeling';
 import Behavior from './behavior';
 
 export default {
-  __init__: [ 'dmnUpdater', 'idChangeBehavior', 'modeling' ],
+  __init__: [ 'dmnUpdater', 'idChangeBehavior', 'nameChangeBehavior', 'modeling' ],
   __depends__: [ Behavior, CommandStack ],
   dmnUpdater: [ 'type', DmnUpdater ],
   dmnFactory: [ 'type', DmnFactory ],
   elementFactory: [ 'type', ElementFactory ],
   idChangeBehavior: [ 'type', IdChangeBehavior ],
+  nameChangeBehavior: [ 'type', NameChangeBehavior ],
   modeling: [ 'type', Modeling ]
 };

packages/dmn-js-decision-table/test/spec/features/modeling/behavior/NameChangeBehaviorSpec.js

@@ -0,0 +1,86 @@
+import { bootstrapModeler, inject } from 'test/helper';
+
+import decisionTableXML from './name-change-behavior.dmn';
+
+import CoreModule from 'src/core';
+import Modeling from 'src/features/modeling';
+
+
+describe('features/modeling/behavior - NameChangeBehavior', function() {
+
+  describe('with existing variable', function() {
+
+    beforeEach(bootstrapModeler(decisionTableXML, {
+      modules: [
+        CoreModule,
+        Modeling
+      ],
+    }));
+
+    describe('should update variable name when element name is changed', function() {
+
+
+      it('<do>', inject(
+        function(modeling, sheet) {
+
+          // given
+          const root = sheet.getRoot(),
+                decisionTable = root.businessObject;
+
+          const decision = decisionTable.$parent;
+
+          // when
+          modeling.editDecisionTableName('foo');
+
+          // then
+          const variable = decision.get('variable');
+
+          expect(variable.get('name')).to.equal('foo');
+        }
+      ));
+
+
+      it('<undo>', inject(
+        function(modeling, sheet, commandStack) {
+
+          // given
+          const root = sheet.getRoot(),
+                decisionTable = root.businessObject;
+
+          const decision = decisionTable.$parent;
+          modeling.editDecisionTableName('foo');
+
+          // when
+          commandStack.undo();
+
+          // then
+          const variable = decision.get('variable');
+
+          expect(variable.get('name')).to.equal('Season');
+        }
+      ));
+
+
+      it('<redo>', inject(
+        function(modeling, sheet, commandStack) {
+
+          // given
+          const root = sheet.getRoot(),
+                decisionTable = root.businessObject;
+
+          const decision = decisionTable.$parent;
+          modeling.editDecisionTableName('foo');
+
+          // when
+          commandStack.undo();
+          commandStack.redo();
+
+          // then
+          const variable = decision.get('variable');
+
+          expect(variable.get('name')).to.equal('foo');
+        }
+      ));
+    });
+  });
+});

packages/dmn-js-decision-table/test/spec/features/modeling/behavior/name-change-behavior.dmn

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" xmlns:di="http://www.omg.org/spec/DMN/20180521/DI/" id="dish" name="Desired Dish" namespace="party" exporter="Camunda Modeler" exporterVersion="5.25.0">
+  <inputData id="InputData_0wikdil" name="Variable" />
+  <decision id="season" name="Season">
+    <variable id="InformationItem_var" name="Season" />
+    <informationRequirement id="InformationRequirement_13flr3u">
+      <requiredInput href="#InputData_0wikdil" />
+    </informationRequirement>
+    <decisionTable id="DecisionTable_0hzuy0u">
+      <input id="InputClause_1c1qe3j">
+        <inputExpression id="LiteralExpression_0qgvyx9" typeRef="string" />
+      </input>
+      <output id="OutputClause_1xvwwox" typeRef="string" />
+    </decisionTable>
+  </decision>
+  <dmndi:DMNDI>
+    <dmndi:DMNDiagram>
+      <dmndi:DMNShape id="DMNShape_1ds1jom" dmnElementRef="InputData_0wikdil">
+        <dc:Bounds height="45" width="125" x="138" y="198" />
+      </dmndi:DMNShape>
+      <dmndi:DMNEdge id="DMNEdge_0qwszuo" dmnElementRef="InformationRequirement_13flr3u">
+        <di:waypoint x="201" y="198" />
+        <di:waypoint x="200" y="155" />
+        <di:waypoint x="200" y="135" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNShape id="DMNShape_0d8mpxr" dmnElementRef="season">
+        <dc:Bounds height="55" width="100" x="150" y="80" />
+      </dmndi:DMNShape>
+    </dmndi:DMNDiagram>
+  </dmndi:DMNDI>
+</definitions>

packages/dmn-js-drd/src/features/modeling/behavior/index.js

@@ -4,17 +4,20 @@ import ReplaceConnectionBehavior from './ReplaceConnectionBehavior';
 import ReplaceElementBehavior from './ReplaceElementBehavior';
 import IdChangeBehavior from
   'dmn-js-shared/lib/features/modeling/behavior/IdChangeBehavior';
-
+import NameChangeBehavior from
+  'dmn-js-shared/lib/features/modeling/behavior/NameChangeBehavior';
 export default {
   __init__: [
     'createConnectionBehavior',
     'idChangeBehavior',
+    'nameChangeBehavior',
     'layoutConnectionBehavior',
     'replaceConnectionBehavior',
     'replaceElementBehavior'
   ],
   createConnectionBehavior: [ 'type', CreateConnectionBehavior ],
   idChangeBehavior: [ 'type', IdChangeBehavior ],
+  nameChangeBehavior: [ 'type', NameChangeBehavior ],
   layoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ],
   replaceConnectionBehavior: [ 'type', ReplaceConnectionBehavior ],
   replaceElementBehavior: [ 'type', ReplaceElementBehavior ]

packages/dmn-js-drd/src/features/modeling/cmd/UpdatePropertiesHandler.js

@@ -4,8 +4,10 @@ import {
   forEach
 } from 'min-dash';
 
-var NAME = 'name',
-    ID = 'id';
+import { getBusinessObject } from 'dmn-js-shared/lib/util/ModelUtil';
+
+const NAME = 'name',
+      ID = 'id';
 
 
 /**
@@ -37,22 +39,21 @@ UpdatePropertiesHandler.$inject = [ 'elementRegistry', 'moddle' ];
  */
 UpdatePropertiesHandler.prototype.execute = function(context) {
 
-  var element = context.element,
-      changed = [ element ];
+  const { element, properties } = context,
+        changed = [ element ];
 
   if (!element) {
     throw new Error('element required');
   }
 
-  var elementRegistry = this._elementRegistry,
-      ids = this._moddle.ids;
+  const elementRegistry = this._elementRegistry,
+        ids = this._moddle.ids;
 
-  var businessObject = element.businessObject,
-      properties = context.properties,
-      oldProperties = (
-        context.oldProperties ||
+  const businessObject = getBusinessObject(element),
+        oldProperties = (
+          context.oldProperties ||
         getProperties(businessObject, keys(properties))
-      );
+        );
 
   if (isIdChange(properties, businessObject)) {
     ids.unclaim(businessObject[ID]);
@@ -86,13 +87,10 @@ UpdatePropertiesHandler.prototype.execute = function(context) {
  * @return {djs.model.Base} the updated element
  */
 UpdatePropertiesHandler.prototype.revert = function(context) {
-
-  var element = context.element,
-      properties = context.properties,
-      oldProperties = context.oldProperties,
-      businessObject = element.businessObject,
-      elementRegistry = this._elementRegistry,
-      ids = this._moddle.ids;
+  const { element, properties, oldProperties } = context;
+  const businessObject = getBusinessObject(element);
+  const elementRegistry = this._elementRegistry,
+        ids = this._moddle.ids;
 
   // update properties
   setProperties(businessObject, oldProperties);

packages/dmn-js-drd/src/features/replace/DrdReplace.js

@@ -59,8 +59,11 @@ export default function DrdReplace(drdFactory, replace, selection, modeling) {
     }
 
     if (target.expression) {
+
+      // variable set to element name
       var literalExpression = drdFactory.create('dmn:LiteralExpression'),
-          variable = drdFactory.create('dmn:InformationItem');
+          variable = drdFactory.create('dmn:InformationItem',
+            { name: oldBusinessObject.name });
 
       setBoxedExpression(newBusinessObject, literalExpression, drdFactory, variable);
     }

packages/dmn-js-drd/test/spec/features/modeling/behavior/NameChangeBehaviorSpec.js

@@ -0,0 +1,73 @@
+import { bootstrapModeler, inject } from 'test/helper';
+
+import simpleStringEditXML from './name-change-behavior.dmn';
+
+import CoreModule from 'src/core';
+import Modeling from 'src/features/modeling';
+
+
+describe('NameChangeBehavior', function() {
+
+  describe('with label change', function() {
+
+    beforeEach(bootstrapModeler(simpleStringEditXML, {
+      modules: [
+        CoreModule,
+        Modeling
+      ],
+    }));
+
+    describe('should update variable name when label is changed', function() {
+
+
+      it('<do>', inject(
+        function(modeling, elementRegistry) {
+
+          // given
+          const decision = elementRegistry.get('season'),
+                bo = decision.businessObject,
+                variable = bo.variable;
+
+          // when
+          modeling.updateLabel(decision,'foo');
+
+          // then
+          expect(variable.get('name')).to.equal('foo');
+        }
+      ));
+
+
+      it('<undo>', inject(function(modeling, elementRegistry, commandStack) {
+
+        // given
+        const decision = elementRegistry.get('season'),
+              bo = decision.businessObject,
+              variable = bo.variable;
+        modeling.updateLabel(decision,'foo');
+
+        // when
+        commandStack.undo();
+
+        // then
+        expect(variable.get('name')).to.equal('season');
+      }));
+
+
+      it('<redo>', inject(function(modeling, elementRegistry, commandStack) {
+
+        // given
+        const decision = elementRegistry.get('season'),
+              bo = decision.businessObject,
+              variable = bo.variable;
+        modeling.updateLabel(decision,'foo');
+
+        // when
+        commandStack.undo();
+        commandStack.redo();
+
+        // then
+        expect(variable.get('name')).to.equal('foo');
+      }));
+    });
+  });
+});

packages/dmn-js-drd/test/spec/features/modeling/behavior/name-change-behavior.dmn

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" xmlns:di="http://www.omg.org/spec/DMN/20180521/DI/" id="dish" name="Desired Dish" namespace="party" exporter="Camunda Modeler" exporterVersion="5.11.0">
+  <decision id="season" name="Season">
+    <variable id="InformationItem_16229yj" name="season" typeRef="string" />
+    <informationRequirement id="InformationRequirement_13flr3u">
+      <requiredInput href="#InputData_0wikdil" />
+    </informationRequirement>
+    <literalExpression id="LiteralExpression_0hs8xyn">
+      <text>calendar.getSeason(date)</text>
+    </literalExpression>
+  </decision>
+  <inputData id="InputData_0wikdil" name="Variable" />
+  <dmndi:DMNDI>
+    <dmndi:DMNDiagram>
+      <dmndi:DMNShape dmnElementRef="season">
+        <dc:Bounds height="55" width="100" x="150" y="80" />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape id="DMNShape_1ds1jom" dmnElementRef="InputData_0wikdil">
+        <dc:Bounds height="45" width="125" x="138" y="198" />
+      </dmndi:DMNShape>
+      <dmndi:DMNEdge id="DMNEdge_0qwszuo" dmnElementRef="InformationRequirement_13flr3u">
+        <di:waypoint x="201" y="198" />
+        <di:waypoint x="200" y="155" />
+        <di:waypoint x="200" y="135" />
+      </dmndi:DMNEdge>
+    </dmndi:DMNDiagram>
+  </dmndi:DMNDI>
+</definitions>

packages/dmn-js-literal-expression/src/features/literal-expression-properties/components/LiteralExpressionPropertiesEditorComponent.js

@@ -12,7 +12,7 @@ export default class LiteralExpressionPropertiesComponent extends Component {
     this._viewer = context.injector.get('viewer');
     this._modeling = context.injector.get('modeling');
     this._dataTypes = context.injector.get('dataTypes');
-
+    this._eventBus = context.injector.get('eventBus');
     const decision = this._viewer.getDecision();
 
     this.state = {
@@ -32,6 +32,23 @@ export default class LiteralExpressionPropertiesComponent extends Component {
     });
   }
 
+  componentWillMount() {
+    this._eventBus.on('elements.changed', this.onChange);
+  }
+
+  componentWillUnmount() {
+    this._eventBus.off('elements.changed', this.onChange);
+  }
+
+  onChange = () => {
+    const decision = this._viewer.getDecision();
+    if (decision.variable) {
+      this.setState({
+        name: decision.variable.name
+      });
+    }
+  };
+
   setVariableType(typeRef) {
     if (typeRef === '') {
       this._modeling.editVariableType(undefined);

packages/dmn-js-literal-expression/src/features/modeling/Modeling.js

@@ -115,6 +115,15 @@ export default class Modeling {
 
     this._commandStack.execute('element.updateProperties', context);
   }
+
+  updateProperties(el, props) {
+    const context = {
+      element: el,
+      properties: props
+    };
+
+    this._commandStack.execute('element.updateProperties', context);
+  }
 }
 
 Modeling.$inject = [ 'commandStack', 'viewer', 'eventBus' ];