Integrate the stepper input with the task group page

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;

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;
+    }
+  }
 }

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>

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}}