file name validation before upload

src/app/frontend/deploy/deploy.html

@@ -34,7 +34,7 @@ limitations under the License.
         <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 ng-switch-when="File" name="ctrl.name" detail="ctrl.detail" form="ctrl.deployForm">
         </deploy-from-file>
       </div>
 

src/app/frontend/deploy/deployfromfile_controller.js

@@ -30,7 +30,8 @@ export default class DeployFromFileController {
     /**
      * Custom file model for the selected file
      *
-     * @export {{name:string, content:string}} */
+     * @export {{name:string, content:string}}
+     */
     this.file = {name: '', content: ''};
   }
 }

src/app/frontend/deploy/deployfromfile_directive.js

@@ -19,9 +19,10 @@ export default function deployFromFileDirective() {
     scope: {},
     bindToController: {
       'detail': '=',
+      'form': '=',
     },
     controller: DeployFromFileController,
     controllerAs: 'ctrl',
-    template: '<kd-upload file="ctrl.file"></kd-upload>',
+    template: '<kd-upload file="ctrl.file" form="ctrl.form"></kd-upload>',
   };
 }

src/app/frontend/deploy/upload.html

@@ -17,10 +17,14 @@ limitations under the License.
 <kd-help-section>
   <div layout="row" layout-align="space-between start">
     <div flex>
-      <md-input-container class="md-block">
+      <md-input-container class="md-block" md-is-error="ctrl.isFileNameError()">
         <label>YAML or JSON file</label>
         <!--TODO: Browse file on focus doesn't work in Firefox. It is to be investigated.-->
-        <input ng-model="ctrl.file.name" ng-focus="ctrl.browseFile()" ng-readonly="true" />
+        <input ng-model="ctrl.file.name" ng-focus="ctrl.browseFile()" ng-readonly="true" name="fileName" required/>
+          <ng-messages for="ctrl.form.fileName.$error" role="alert" multiple>
+            <ng-message when="required">File is required.</ng-message>
+            </ng-message>
+          </ng-messages>
       </md-input-container>
     </div>
     <md-button type="button" class="md-raised kd-upload-button" ng-click="ctrl.browseFile()">

src/app/frontend/deploy/upload_controller.js

@@ -29,6 +29,12 @@ export default class UploadController {
      * Initialized from the registerBrowseFileFunction method.
      * @private {(function())|undefined} */
     this.browseFileFunc_;
+
+    /**
+     * Initialized from the scope.
+     * @export {!angular.FormController}
+     */
+    this.form;
   }
 
   /**
@@ -53,4 +59,16 @@ export default class UploadController {
       this.browseFileFunc_();
     }
   }
+
+  /**
+   * Used to deactivate the invalid file name report if the form is not submitted yet.
+   *
+   * @returns {boolean}
+   * @export
+   */
+  isFileNameError() {
+    /** @type {!angular.NgModelController} */
+    let fileName = this.form['fileName'];
+    return this.form.$submitted && fileName.$invalid;
+  }
 }

src/app/frontend/deploy/upload_directive.js

@@ -25,6 +25,7 @@ export default function uploadDirective() {
     scope: {},
     bindToController: {
       'file': '=',
+      'form': '=',
     },
     controller: UploadController,
     controllerAs: 'ctrl',

src/test/frontend/deploy/upload_controller_test.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import UploadController from 'deploy/upload_controller.js';
+
+describe('Upload Controller', () => {
+  /** @type {!UploadController} */
+  let ctrl;
+  /** @type {!angular.FormController} */
+  let form;
+
+  beforeEach(() => {
+    angular.mock.inject(($controller) => {
+      form = {
+        $submitted: false,
+        fileName: {
+          $invalid: false,
+          $error: {
+            required: false,
+          },
+        },
+      };
+      ctrl = $controller(UploadController, {/* no locals */}, {form: form});
+    });
+  });
+
+  it('should return false when the from is not submitted and there is no error', () => {
+    // when
+    let result = ctrl.isFileNameError();
+
+    // then
+    expect(result).toEqual(false);
+  });
+
+  it('should return false when the from is not submitted and there is an error', () => {
+    // given
+    form.fileName.$error.required = true;
+
+    // when
+    let result = ctrl.isFileNameError();
+
+    // then
+    expect(result).toEqual(false);
+  });
+
+  it('should return true when the from is submitted and there is an error', () => {
+    // given
+    form.fileName.$error.required = true;
+    form.$submitted = true;
+
+    // when
+    let result = ctrl.isFileNameError();
+
+    // then
+    expect(result).toEqual(false);
+  });
+
+});