feat(table): add rule focusing behavior

-on clicking the add rule button, focus the first cell of the new row
-on clicking the last row, focus the clicked cell of the new row

Related to camunda/camunda-modeler#928

packages/dmn-js-decision-table/src/features/add-rule/AddRule.js

@@ -1,13 +1,18 @@
 import AddRuleFootComponent from './components/AddRuleFootComponent';
 
 export default class AddRule {
-  constructor(components, editorActions, eventBus) {
+  constructor(components, editorActions, eventBus, selection) {
     components.onGetComponent('table.foot', () => AddRuleFootComponent);
 
-    eventBus.on('addRule', () => {
-      editorActions.trigger('addRule');
+    eventBus.on('addRule', (e, context) => {
+      const rule = editorActions.trigger('addRule');
+      const colIndex = context.colIndex || 0;
+      if (rule.cells[colIndex])
+        selection.select(rule.cells[colIndex]);
+      else
+        selection.select(rule.cells[0]);
     });
   }
 }
 
-AddRule.$inject = [ 'components', 'editorActions', 'eventBus' ];
+AddRule.$inject = [ 'components', 'editorActions', 'eventBus', 'selection' ];

packages/dmn-js-decision-table/src/features/add-rule/components/AddRuleFootComponent.js

@@ -20,11 +20,11 @@ export default class AddRuleFootComponent extends Component {
   handleClick = (e) => {
     e.stopPropagation();
 
-    this.addRule();
+    this.addRule(e.target.dataset.colIndex);
   }
 
-  addRule() {
-    this._eventBus.fire('addRule');
+  addRule(colIndex) {
+    this._eventBus.fire('addRule', { colIndex });
   }
 
   render() {
@@ -62,7 +62,7 @@ export default class AddRuleFootComponent extends Component {
         className += ' annotation';
       }
 
-      cells.push(<td className={ className }>{placeholder}</td>);
+      cells.push(<td className={ className } data-col-index={ i }>{placeholder}</td>);
     }
 
     return (

packages/dmn-js-decision-table/test/spec/features/add-rule/AddRuleSpec.js

@@ -51,6 +51,7 @@ describe('add input output', function() {
     expect(addRuleEl.textContent).to.eql('--');
   });
 
+
   it('should add rule on click', inject(function(sheet) {
 
     // given
@@ -66,6 +67,42 @@ describe('add input output', function() {
   }));
 
 
+  it('should add rule on click', inject(function(cellSelection, sheet) {
+
+    // given
+    const addRuleCell = domQuery('.add-rule[data-col-index="2"]', testContainer);
+
+    // when
+    triggerClick(addRuleCell);
+
+    // then
+    const rootRows = sheet.getRoot().rows;
+    const addedCell = rootRows[rootRows.length - 1].cells[2].id;
+    const selectedCell = cellSelection.getCellSelection();
+
+    expect(addedCell).to.equal(selectedCell);
+  }));
+
+
+  it('should focus on the first cell when the plus button is clicked',
+    inject(function(cellSelection, sheet) {
+
+      // given
+      const plusButton = domQuery('.add-rule-add', testContainer);
+
+      // when
+      triggerClick(plusButton);
+
+      // then
+      const rootRows = sheet.getRoot().rows;
+      const addedCell = rootRows[rootRows.length - 1].cells[0].id;
+      const selectedCell = cellSelection.getCellSelection();
+
+      expect(addedCell).to.equal(selectedCell);
+    })
+  );
+
+
   // TODO(philippfromme): should not be hard coded to include indices and annotations
   it('should have correct number of columns', inject(function(sheet) {