From 6259e3ae5d6c537c601dad638e61f43a313beb62 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 18 Jun 2020 22:32:56 -0700
Subject: [PATCH] Integrate the stepper input with the task group page

---
 ui/app/components/stepper-input.js            |  2 +-
 ui/app/styles/components/stepper-input.scss   | 26 ++++++++++++++++++-
 ui/app/templates/components/stepper-input.hbs |  5 ++--
 ui/app/templates/jobs/job/task-group.hbs      |  7 ++++-
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/stepper-input.js b/ui/app/components/stepper-input.js
index 09db48532..871d74729 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')
+@classNameBindings('class', 'disabled:is-disabled')
 export default class StepperInput extends Component {
   min = 0;
   max = 10;
diff --git a/ui/app/styles/components/stepper-input.scss b/ui/app/styles/components/stepper-input.scss
index 3d48f91ea..605934693 100644
--- a/ui/app/styles/components/stepper-input.scss
+++ b/ui/app/styles/components/stepper-input.scss
@@ -7,8 +7,10 @@
   line-height: 1;
   border-radius: $radius;
   padding-left: 0.75em;
-  whitespace: nowrap;
+  white-space: nowrap;
   height: 2.25em;
+  font-size: $body-size;
+  vertical-align: top;
 
   .stepper-input-label {
     display: flex;
@@ -75,4 +77,26 @@
       }
     }
   }
+
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+
+    .stepper-input-input {
+      opacity: 1;
+      color: $grey;
+      background-color: $white;
+    }
+  }
 }
diff --git a/ui/app/templates/components/stepper-input.hbs b/ui/app/templates/components/stepper-input.hbs
index 70f7c024c..80440a605 100644
--- a/ui/app/templates/components/stepper-input.hbs
+++ b/ui/app/templates/components/stepper-input.hbs
@@ -5,6 +5,7 @@
   min={{min}}
   max={{max}}
   value={{internalValue}}
+  disabled={{disabled}}
   class="stepper-input-input"
   onKeyDown={{action "resetTextInput"}}
   onChange={{action "setValue"}}>
@@ -12,7 +13,7 @@
   data-test-stepper-decrement
   role="button"
   class="stepper-input-stepper button {{class}}"
-  disabled={{lte internalValue min}}
+  disabled={{or disabled (lte internalValue min)}}
   onclick={{action "decrement"}}>
   {{x-icon "minus-plain"}}
 </button>
@@ -20,7 +21,7 @@
   data-test-stepper-increment
   role="button"
   class="stepper-input-stepper button {{class}}"
-  disabled={{gte internalValue max}}
+  disabled={{or disabled (gte internalValue max)}}
   onclick={{action "increment"}}>
   {{x-icon "plus-plain"}}
 </button>
diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs
index ac438fc88..8cd257711 100644
--- a/ui/app/templates/jobs/job/task-group.hbs
+++ b/ui/app/templates/jobs/job/task-group.hbs
@@ -10,7 +10,12 @@
     <div>
       <Exec::OpenButton @job={{model.job}} @taskGroup={{model}} />
       {{#if model.scaling}}
-      <StepperInput @min={{model.scaling.min}} @max={{model.scaling.max}} @value={{model.count}}>
+      <StepperInput
+        @min={{model.scaling.min}}
+        @max={{model.scaling.max}}
+        @value={{model.count}}
+        @class="is-primary is-small"
+        @disabled={{or model.job.runningDeployment (cannot "scale job")}}>
         Count
       </StepperInput>
       {{/if}}