From a27894af46d911298bb2d9f74d1e85b52dd138ba Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 29 Jun 2020 15:53:52 -0700
Subject: [PATCH 1/4] Add tooltips to scaling controls

---
 ui/app/components/stepper-input.js             |  2 +-
 ui/app/components/task-group-row.js            | 10 ++++++++++
 ui/app/controllers/jobs/job/task-group.js      |  8 ++++++++
 ui/app/templates/components/task-group-row.hbs |  4 ++--
 ui/app/templates/jobs/job/task-group.hbs       |  1 +
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/stepper-input.js b/ui/app/components/stepper-input.js
index 871d74729..bded1136e 100644
--- a/ui/app/components/stepper-input.js
+++ b/ui/app/components/stepper-input.js
@@ -9,7 +9,7 @@ const ESC = 27;
 
 @classic
 @classNames('stepper-input')
-@classNameBindings('class', 'disabled:is-disabled')
+@classNameBindings('class', 'disabled:is-disabled', 'disabled:tooltip', 'disabled:multiline')
 export default class StepperInput extends Component {
   min = 0;
   max = 10;
diff --git a/ui/app/components/task-group-row.js b/ui/app/components/task-group-row.js
index 685ea65f6..8f01fd05e 100644
--- a/ui/app/components/task-group-row.js
+++ b/ui/app/components/task-group-row.js
@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 import { computed, action } from '@ember/object';
 import { alias, oneWay } from '@ember/object/computed';
 import { debounce } from '@ember/runloop';
@@ -10,12 +11,21 @@ import { lazyClick } from '../helpers/lazy-click';
 @tagName('tr')
 @classNames('task-group-row', 'is-interactive')
 export default class TaskGroupRow extends Component {
+  @service can;
+
   taskGroup = null;
   debounce = 500;
 
   @oneWay('taskGroup.count') count;
   @alias('taskGroup.job.runningDeployment') runningDeployment;
 
+  @computed('runningDeployment')
+  get tooltipText() {
+    if (this.can.cannot('scale job')) return "You aren't allowed to scale task groups";
+    if (this.runningDeployment) return 'You cannot scale task groups during a deployment';
+    return undefined;
+  }
+
   onClick() {}
 
   click(event) {
diff --git a/ui/app/controllers/jobs/job/task-group.js b/ui/app/controllers/jobs/job/task-group.js
index cb6915be0..c780f9722 100644
--- a/ui/app/controllers/jobs/job/task-group.js
+++ b/ui/app/controllers/jobs/job/task-group.js
@@ -14,6 +14,7 @@ export default class TaskGroupController extends Controller.extend(
     WithNamespaceResetting
   ) {
   @service userSettings;
+  @service can;
 
   queryParams = [
     {
@@ -50,6 +51,13 @@ export default class TaskGroupController extends Controller.extend(
   @alias('listSorted') listToSearch;
   @alias('listSearched') sortedAllocations;
 
+  @computed('model.job.runningDeployment')
+  get tooltipText() {
+    if (this.can.cannot('scale job')) return "You aren't allowed to scale task groups";
+    if (this.model.job.runningDeployment) return 'You cannot scale task groups during a deployment';
+    return undefined;
+  }
+
   @action
   gotoAllocation(allocation) {
     this.transitionToRoute('allocations.allocation', allocation);
diff --git a/ui/app/templates/components/task-group-row.hbs b/ui/app/templates/components/task-group-row.hbs
index 3bc7e6b67..c7fd37ec8 100644
--- a/ui/app/templates/components/task-group-row.hbs
+++ b/ui/app/templates/components/task-group-row.hbs
@@ -8,8 +8,8 @@
   {{#if taskGroup.scaling}}
   <div
     data-test-scale-controls
-    class="button-bar is-shadowless is-text bumper-left {{if (cannot "scale job") "tooltip"}}"
-    aria-label={{if (cannot "scale job") "You aren't allowed to scale task groups"}}>
+    class="button-bar is-shadowless is-text bumper-left {{if (or runningDeployment (cannot "scale job")) "tooltip multiline"}}"
+    aria-label={{tooltipText}}>
       <button
         data-test-scale="decrement"
         role="button"
diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs
index a915b1b5f..4d067a0b3 100644
--- a/ui/app/templates/jobs/job/task-group.hbs
+++ b/ui/app/templates/jobs/job/task-group.hbs
@@ -12,6 +12,7 @@
       {{#if model.scaling}}
       <StepperInput
         data-test-task-group-count-stepper
+        aria-label={{tooltipText}}
         @min={{model.scaling.min}}
         @max={{model.scaling.max}}
         @value={{model.count}}

From b1b5344dc11ea1b73eb8cbf39fe44a6028d6b6da Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 29 Jun 2020 15:54:06 -0700
Subject: [PATCH 2/4] Reset font weight for tooltips

---
 ui/app/styles/components/tooltip.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss
index 0546b5355..62c04fb48 100644
--- a/ui/app/styles/components/tooltip.scss
+++ b/ui/app/styles/components/tooltip.scss
@@ -12,6 +12,7 @@
   max-width: 250px;
   color: $white;
   font-size: $size-7;
+  font-weight: $weight-normal;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.25;

From ef8594060c97a9ee10c981fee86f3a1102041c60 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 29 Jun 2020 15:57:15 -0700
Subject: [PATCH 3/4] Label buttons that only have icons for markup

---
 ui/app/templates/components/stepper-input.hbs  | 2 ++
 ui/app/templates/components/task-group-row.hbs | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/ui/app/templates/components/stepper-input.hbs b/ui/app/templates/components/stepper-input.hbs
index 80440a605..fd6b24c5a 100644
--- a/ui/app/templates/components/stepper-input.hbs
+++ b/ui/app/templates/components/stepper-input.hbs
@@ -12,6 +12,7 @@
 <button
   data-test-stepper-decrement
   role="button"
+  aria-label="decrement"
   class="stepper-input-stepper button {{class}}"
   disabled={{or disabled (lte internalValue min)}}
   onclick={{action "decrement"}}>
@@ -20,6 +21,7 @@
 <button
   data-test-stepper-increment
   role="button"
+  aria-label="increment"
   class="stepper-input-stepper button {{class}}"
   disabled={{or disabled (gte internalValue max)}}
   onclick={{action "increment"}}>
diff --git a/ui/app/templates/components/task-group-row.hbs b/ui/app/templates/components/task-group-row.hbs
index c7fd37ec8..23bfabbb3 100644
--- a/ui/app/templates/components/task-group-row.hbs
+++ b/ui/app/templates/components/task-group-row.hbs
@@ -13,6 +13,7 @@
       <button
         data-test-scale="decrement"
         role="button"
+        aria-label="decrement"
         class="button is-xsmall is-light"
         disabled={{or isMinimum runningDeployment (cannot "scale job")}}
         onclick={{action "countDown"}}>
@@ -21,6 +22,7 @@
       <button
         data-test-scale="increment"
         role="button"
+        aria-label="increment"
         class="button is-xsmall is-light"
         disabled={{or isMaximum runningDeployment (cannot "scale job")}}
         onclick={{action "countUp"}}>

From 26a7267a0d3bb336d338dd83843c67d4c5050b70 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 29 Jun 2020 17:17:17 -0700
Subject: [PATCH 4/4] StepperInput UX improvements

- Click label to focus input
- Focusing input selects value
- Entering an invalid value reverts selection
- Entering a fractional number floors the value
---
 ui/app/components/stepper-input.js            | 19 +++++--
 ui/app/styles/components/stepper-input.scss   |  1 +
 ui/app/templates/components/stepper-input.hbs |  6 ++-
 ui/tests/integration/stepper-input-test.js    | 51 +++++++++++++++++++
 ui/tests/pages/components/stepper-input.js    |  1 +
 5 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/stepper-input.js b/ui/app/components/stepper-input.js
index bded1136e..933cb4115 100644
--- a/ui/app/components/stepper-input.js
+++ b/ui/app/components/stepper-input.js
@@ -40,9 +40,13 @@ export default class StepperInput extends Component {
 
   @action
   setValue(e) {
-    const newValue = Math.min(this.max, Math.max(this.min, e.target.value));
-    this.set('internalValue', newValue);
-    this.update(this.internalValue);
+    if (e.target.value !== '') {
+      const newValue = Math.floor(Math.min(this.max, Math.max(this.min, e.target.value)));
+      this.set('internalValue', newValue);
+      this.update(this.internalValue);
+    } else {
+      e.target.value = this.internalValue;
+    }
   }
 
   @action
@@ -52,6 +56,15 @@ export default class StepperInput extends Component {
     }
   }
 
+  @action
+  selectValue(e) {
+    e.target.select();
+  }
+
+  @action focusInput() {
+    this.element.querySelector('.stepper-input-input').focus();
+  }
+
   update(value) {
     debounce(this, sendUpdateAction, value, this.debounce);
   }
diff --git a/ui/app/styles/components/stepper-input.scss b/ui/app/styles/components/stepper-input.scss
index 605934693..9a5b6a978 100644
--- a/ui/app/styles/components/stepper-input.scss
+++ b/ui/app/styles/components/stepper-input.scss
@@ -16,6 +16,7 @@
     display: flex;
     align-self: center;
     padding-right: 0.75em;
+    cursor: pointer;
   }
 
   .stepper-input-input {
diff --git a/ui/app/templates/components/stepper-input.hbs b/ui/app/templates/components/stepper-input.hbs
index fd6b24c5a..a0f7c1486 100644
--- a/ui/app/templates/components/stepper-input.hbs
+++ b/ui/app/templates/components/stepper-input.hbs
@@ -1,4 +1,7 @@
-<label data-test-stepper-label class="stepper-input-label">{{yield}}</label>
+<label
+  data-test-stepper-label
+  class="stepper-input-label"
+  onClick={{action "focusInput"}}>{{yield}}</label>
 <input
   data-test-stepper-input
   type="number"
@@ -7,6 +10,7 @@
   value={{internalValue}}
   disabled={{disabled}}
   class="stepper-input-input"
+  onFocus={{action "selectValue"}}
   onKeyDown={{action "resetTextInput"}}
   onChange={{action "setValue"}}>
 <button
diff --git a/ui/tests/integration/stepper-input-test.js b/ui/tests/integration/stepper-input-test.js
index aa2161ced..e2a0a20ab 100644
--- a/ui/tests/integration/stepper-input-test.js
+++ b/ui/tests/integration/stepper-input-test.js
@@ -164,4 +164,55 @@ module('Integration | Component | stepper input', function(hooks) {
     await StepperInput.input.esc();
     assert.equal(StepperInput.input.value, this.value);
   });
+
+  test('clicking the label focuses in the input', async function(assert) {
+    this.setProperties(commonProperties());
+
+    await render(commonTemplate);
+    await StepperInput.clickLabel();
+
+    const input = find('[data-test-stepper-input]');
+    assert.equal(document.activeElement, input);
+  });
+
+  test('focusing the input selects the input value', async function(assert) {
+    this.setProperties(commonProperties());
+
+    await render(commonTemplate);
+    await StepperInput.input.focus();
+
+    assert.equal(
+      window
+        .getSelection()
+        .toString()
+        .trim(),
+      this.value.toString()
+    );
+  });
+
+  test('entering a fractional value floors the value', async function(assert) {
+    this.setProperties(commonProperties());
+    const newValue = 3.14159;
+
+    await render(commonTemplate);
+
+    await StepperInput.input.fill(newValue);
+
+    await settled();
+    assert.equal(StepperInput.input.value, Math.floor(newValue));
+    assert.ok(this.onChange.calledWith(Math.floor(newValue)));
+  });
+
+  test('entering an invalid value reverts the value', async function(assert) {
+    this.setProperties(commonProperties());
+    const newValue = 'NaN';
+
+    await render(commonTemplate);
+
+    await StepperInput.input.fill(newValue);
+
+    await settled();
+    assert.equal(StepperInput.input.value, this.value);
+    assert.notOk(this.onChange.called);
+  });
 });
diff --git a/ui/tests/pages/components/stepper-input.js b/ui/tests/pages/components/stepper-input.js
index c35f9e49f..b9eac7233 100644
--- a/ui/tests/pages/components/stepper-input.js
+++ b/ui/tests/pages/components/stepper-input.js
@@ -14,6 +14,7 @@ export default scope => ({
   scope,
 
   label: text('[data-test-stepper-label]'),
+  clickLabel: clickable('[data-test-stepper-label]'),
 
   input: {
     scope: '[data-test-stepper-input]',