Wire up the +/- buttons in task group rows to the job scale action

ui/app/components/search-box.js

@@ -1,7 +1,7 @@
 import { reads } from '@ember/object/computed';
 import Component from '@ember/component';
 import { action } from '@ember/object';
-import { run } from '@ember/runloop';
+import { debounce } from '@ember/runloop';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
@@ -23,13 +23,13 @@ export default class SearchBox extends Component {
   @action
   setSearchTerm(e) {
     this.set('_searchTerm', e.target.value);
-    run.debounce(this, updateSearch, this.debounce);
+    debounce(this, updateSearch, this.debounce);
   }
 
   @action
   clear() {
     this.set('_searchTerm', '');
-    run.debounce(this, updateSearch, this.debounce);
+    debounce(this, updateSearch, this.debounce);
   }
 }
 

ui/app/components/task-group-row.js

@@ -1,17 +1,63 @@
 import Component from '@ember/component';
-import { lazyClick } from '../helpers/lazy-click';
+import { computed, action } from '@ember/object';
+import { oneWay } from '@ember/object/computed';
+import { debounce } from '@ember/runloop';
 import { classNames, tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
+import { lazyClick } from '../helpers/lazy-click';
 
 @classic
 @tagName('tr')
 @classNames('task-group-row', 'is-interactive')
 export default class TaskGroupRow extends Component {
   taskGroup = null;
+  debounce = 300;
+
+  @oneWay('taskGroup.count') count;
 
   onClick() {}
 
   click(event) {
     lazyClick([this.onClick, event]);
   }
+
+  @computed('count', 'taskGroup.scaling.min')
+  get isMinimum() {
+    const scaling = this.taskGroup.scaling;
+    if (!scaling || scaling.min == null) return false;
+    return this.count <= scaling.min;
+  }
+
+  @computed('count', 'taskGroup.scaling.max')
+  get isMaximum() {
+    const scaling = this.taskGroup.scaling;
+    if (!scaling || scaling.max == null) return false;
+    return this.count >= scaling.max;
+  }
+
+  @action
+  countUp() {
+    const scaling = this.taskGroup.scaling;
+    if (!scaling || scaling.max == null || this.count < scaling.max) {
+      this.incrementProperty('count');
+      this.scale(this.count);
+    }
+  }
+
+  @action
+  countDown() {
+    const scaling = this.taskGroup.scaling;
+    if (!scaling || scaling.min == null || this.count > scaling.min) {
+      this.decrementProperty('count');
+      this.scale(this.count);
+    }
+  }
+
+  scale(count) {
+    debounce(this, sendCountAction, count, this.debounce);
+  }
+}
+
+function sendCountAction(count) {
+  return this.taskGroup.scale(count);
 }

ui/app/templates/components/task-group-row.hbs

@@ -4,11 +4,23 @@
   </LinkTo>
 </td>
 <td data-test-task-group-count class="nowrap">
-  {{taskGroup.count}}
+  {{count}}
   {{#if taskGroup.scaling}}
     <div class="button-bar is-shadowless is-text bumper-left">
-      <button role="button" class="button is-xsmall is-light">{{x-icon "minus-plain" class="is-text"}}</button>
-      <button role="button" class="button is-xsmall is-light">{{x-icon "plus-plain" class="is-text"}}</button>
+      <button
+        role="button"
+        class="button is-xsmall is-light"
+        disabled={{isMinimum}}
+        onclick={{action "countDown"}}>
+        {{x-icon "minus-plain" class="is-text"}}
+      </button>
+      <button
+        role="button"
+        class="button is-xsmall is-light"
+        disabled={{isMaximum}}
+        onclick={{action "countUp"}}>
+        {{x-icon "plus-plain" class="is-text"}}
+      </button>
     </div>
   {{/if}}
 </td>