Merge pull request #206 from bryk/deploy-active

Handle name and container image validation in deploy form

src/app/frontend/deploy/deploy.html

@@ -17,12 +17,15 @@ limitations under the License.
 <div layout="column" layout-padding layout-align="center center">
   <md-whiteframe class="kd-deploy-whiteframe md-whiteframe-5dp" flex flex-gt-md>
     <h3 class="md-headline">Deploy a Containerized App</h3>
-    <form name="ctrl.deployForm" ng-submit="ctrl.deployBySelection()">
+    <form name="ctrl.deployForm" ng-submit="ctrl.deployBySelection()" novalidate>
 
       <kd-help-section>
         <md-input-container class="md-block" ng-model-options="{ updateOn: 'blur' }">
           <label>App name</label>
-          <input ng-model="ctrl.name" required>
+          <input ng-model="ctrl.name" required name="name">
+          <ng-messages for="ctrl.deployForm.name.$error" role="alert" multiple>
+            <ng-message when="required">Application name is required.</ng-message>
+          </ng-messages>
         </md-input-container>
         <kd-user-help>
           An 'app' label with this value will be added to the Replica Set and Service that get deployed.
@@ -41,7 +44,8 @@ limitations under the License.
       </kd-help-section>
 
       <div ng-switch="ctrl.selection">
-        <deploy-from-settings ng-switch-when="Settings" name="ctrl.name" namespaces="ctrl.namespaces" detail="ctrl.detail">
+        <deploy-from-settings ng-switch-when="Settings" name="ctrl.name"
+            namespaces="ctrl.namespaces" detail="ctrl.detail" form="ctrl.deployForm">
         </deploy-from-settings>
         <deploy-from-file ng-switch-when="File" name="ctrl.name" detail="ctrl.detail">
         </deploy-from-file>

src/app/frontend/deploy/deploy_controller.js

@@ -75,8 +75,10 @@ export default class DeployController {
    * @export
    */
   deployBySelection() {
-    this.isDeployInProgress_ = true;
-    this.detail.deploy().finally(() => { this.isDeployInProgress_ = false; });
+    if (this.deployForm.$valid) {
+      this.isDeployInProgress_ = true;
+      this.detail.deploy().finally(() => { this.isDeployInProgress_ = false; });
+    }
   }
 
   /**
@@ -84,9 +86,7 @@ export default class DeployController {
    * @return {boolean}
    * @export
    */
-  isDeployDisabled() {
-    return this.isDeployInProgress_ || this.deployForm.$invalid || !this.detail;
-  }
+  isDeployDisabled() { return this.isDeployInProgress_ || !this.detail; }
 
   /**
    * Cancels the deployment form.

src/app/frontend/deploy/deployfromsettings.html

@@ -17,7 +17,10 @@ limitations under the License.
 <kd-help-section>
   <md-input-container class="md-block">
     <label>Container image</label>
-    <input ng-model="ctrl.containerImage" required>
+    <input ng-model="ctrl.containerImage" name="containerImage" required>
+    <ng-messages for="ctrl.form.containerImage.$error" role="alert" multiple>
+      <ng-message when="required">Container image is required.</ng-message>
+    </ng-messages>
   </md-input-container>
   <kd-user-help>
     Enter the URL of a public image on any registry, or a private image hosted on Docker Hub or Google Container Registry.

src/app/frontend/deploy/deployfromsettings_controller.js

@@ -42,6 +42,12 @@ export default class DeployFromSettingsController {
      */
     this.detail = this;
 
+    /**
+     * Initialized from the scope.
+     * @export {!angular.FormController}
+     */
+    this.form;
+
     /** @private {boolean} */
     this.showMoreOptions_ = false;
 

src/app/frontend/deploy/deployfromsettings_directive.js

@@ -25,6 +25,7 @@ export default function deployFromSettingsDirective() {
       'name': '=',
       'namespaces': '=',
       'detail': '=',
+      'form': '=',
     },
     controller: DeployFromSettingsController,
     controllerAs: 'ctrl',

src/test/frontend/deploy/deploy_controller_test.js

@@ -28,16 +28,13 @@ describe('Deploy controller', () => {
   beforeEach(() => {
     angular.mock.module(deployModule.name);
 
-    angular.mock.inject(($controller, $state) => {
+    angular.mock.inject(($controller, $state, $q) => {
       state = $state;
-      ctrl = $controller(DeployController, {namespaces: []});
-      settingsCtrl = $controller(DeployFromSettingController, {}, {namespaces: []});
+      settingsCtrl = $controller(
+          DeployFromSettingController, {}, {namespaces: [], deploy: () => $q.defer().promise});
+      ctrl = $controller(
+          DeployController, {namespaces: []}, {detail: settingsCtrl, deployForm: {$valid: true}});
     });
-
-    // prepare and mock
-    ctrl.detail = settingsCtrl;
-    ctrl.deployForm = {$invalid: false};
-    settingsCtrl.deploy = () => { return settingsCtrl.q_.defer().promise; };
   });
 
   it('should return true when deploy in progress', () => {
@@ -46,7 +43,7 @@ describe('Deploy controller', () => {
     let result = ctrl.isDeployDisabled();
 
     // then
-    expect(result).toBeTruthy();
+    expect(result).toBe(true);
   });
 
   it('should return false when deploy not in progress', () => {
@@ -54,7 +51,7 @@ describe('Deploy controller', () => {
     let result = ctrl.isDeployDisabled();
 
     // then
-    expect(result).toBeFalsy();
+    expect(result).toBe(false);
   });
 
   it('should change state to replica set list view on cancel', () => {