Dashboard: fixed bug on New Factory page which was caused by click on the search icon (#6951)

* CHE-4959: fix bug on New Factory page Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * code clean-up Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com>
2017-10-26 11:15:18 +03:00 · 2017-10-26 11:15:18 +03:00 · a8aae87905
parent 0247d70411
commit a8aae87905
8 changed files with 78 additions and 76 deletions
--- a/dashboard/src/app/factories/create-factory/action/factory-action-box.controller.ts
+++ b/dashboard/src/app/factories/create-factory/action/factory-action-box.controller.ts
@ -23,6 +23,7 @@ export class FactoryActionBoxController {
  private factoryObject: any;
  private lifecycle: any;
  private onChange: Function;
+  private selectedParam: string;

  /**
   * Default constructor that is using resource injection
@ -84,17 +85,17 @@ export class FactoryActionBoxController {
    let actionToAdd;
    if ('openfile' === this.selectedAction) {
      actionToAdd = {
-        "properties": {
-          "file": this.selectedParam
+        'properties': {
+          'file': this.selectedParam
        },
-        "id": "openFile"
+        'id': 'openFile'
      };
    } else if ('runcommand' === this.selectedAction) {
      actionToAdd = {
-        "properties": {
-          "name": this.selectedParam
+        'properties': {
+          'name': this.selectedParam
        },
-        "id": "runCommand"
+        'id': 'runCommand'
      };
    }
    if (actionToAdd) {
--- a/dashboard/src/app/factories/create-factory/command/factory-command.controller.ts
+++ b/dashboard/src/app/factories/create-factory/command/factory-command.controller.ts
@ -20,6 +20,8 @@ export class FactoryCommandController {
  private $mdDialog: ng.material.IDialogService;
  private factoryObject: any;
  private onChange: Function;
+  private commandLine: string;
+  private commandLineName: string;

  /**
   * Default constructor that is using resource injection
@ -31,7 +33,6 @@ export class FactoryCommandController {

  /**
   * User clicked on the add button to add a new command
-   * @param $event
   */
  addCommand(): void {
    if (!this.factoryObject) {
@ -46,12 +47,12 @@ export class FactoryCommandController {
      this.factoryObject.workspace.commands = [];
    }
    let command = {
-      "commandLine": this.commandLine,
-      "name": this.commandLineName,
-      "attributes": {
-        "previewUrl": ""
+      'commandLine': this.commandLine,
+      'name': this.commandLineName,
+      'attributes': {
+        'previewUrl': ''
      },
-      "type": "custom"
+      'type': 'custom'
    };

    this.factoryObject.workspace.commands.push(command);
@ -61,7 +62,7 @@ export class FactoryCommandController {

  /**
   * Remove command based on the provided index
-   * @param index the index in the array of workspace commands
+   * @param {number} index the index in the array of workspace commands
   */
  removeCommand(index: number): void {
    this.factoryObject.workspace.commands.splice(index, 1);
@ -71,10 +72,10 @@ export class FactoryCommandController {

  /**
   * Edit the command based on the provided index
-   * @param $event the mouse event
-   * @param index the index in the array of workspace commands
+   * @param {MouseEvent} $event the mouse event
+   * @param {number} index the index in the array of workspace commands
   */
-  editCommand($event: any, index: number): void {
+  editCommand($event: MouseEvent, index: number): void {
    this.$mdDialog.show({
      targetEvent: $event,
      controller: 'FactoryCommandDialogEditController',
@ -93,10 +94,10 @@ export class FactoryCommandController {
  /**
   * Callback on edit action.
   *
-   * @param index commands index
-   * @param newValue value to update with
+   * @param {number} index commands index
+   * @param {string} newValue value to update with
   */
-  callbackEditAction(index: number, newValue: string) {
+  callbackEditAction(index: number, newValue: string): void {
    this.factoryObject.workspace.commands[index].commandLine = newValue;

    this.onChange();
--- a/dashboard/src/app/factories/create-factory/config-file-tab/factory-from-file.controller.ts
+++ b/dashboard/src/app/factories/create-factory/config-file-tab/factory-from-file.controller.ts
@ -30,7 +30,9 @@ export class FactoryFromFileCtrl {
   * @ngInject for Dependency injection
   */
  constructor($filter: ng.IFilterService, cheAPI: CheAPI, cheNotification: CheNotification, FileUploader: any) {
+    /* tslint:disable */
    'ngInject';
+    /* tslint:enable */

    this.cheAPI = cheAPI;
    this.cheNotification = cheNotification;
@ -79,7 +81,7 @@ export class FactoryFromFileCtrl {
    });

    // callback
-    this.uploader.onAfterAddingFile = function (fileItem) {
+    this.uploader.onAfterAddingFile = function (fileItem: any) {
      let uploadedFileName = fileItem._file.name;
      let reader = new FileReader();

--- a/dashboard/src/app/factories/create-factory/config-file-tab/factory-from-file.directive.ts
+++ b/dashboard/src/app/factories/create-factory/config-file-tab/factory-from-file.directive.ts
@ -10,6 +10,10 @@
 */
 'use strict';

+interface IFactoryFromFileScope extends ng.IScope {
+  clickUpload: () => void;
+}
+
 /**
 * Defines a directive for configuring factory from file.
 * @author Oleksii Orel
@ -48,7 +52,7 @@ export class FactoryFromFile {
    };
  }

-  link($scope: ng.IScope, element: ng.IAugmentedJQuery) {
+  link($scope: IFactoryFromFileScope, element: ng.IAugmentedJQuery) {
    $scope.clickUpload = () => {
      // search the input fields
      let inputElements = element.find('input');
--- a/dashboard/src/app/factories/create-factory/workspaces-tab/factory-from-workpsace.controller.ts
+++ b/dashboard/src/app/factories/create-factory/workspaces-tab/factory-from-workpsace.controller.ts
@ -68,9 +68,9 @@ export class FactoryFromWorkspaceCtrl {

  /**
   * Get factory content from workspace
-   * @param workspace is selected workspace
+   * @param {che.IWorkspace} workspace is selected workspace
   */
-  getFactoryContentFromWorkspace(workspace: che.IWorkspace) {
+  getFactoryContentFromWorkspace(workspace: che.IWorkspace): void {
    let factoryContent = this.cheAPI.getFactory().getFactoryContentFromWorkspace(workspace);
    if (factoryContent) {
      this.factoryContent = this.$filter('json')(factoryContent, 2);
@ -85,7 +85,7 @@ export class FactoryFromWorkspaceCtrl {
      this.isImporting = false;
      this.factoryContent = this.$filter('json')(factoryContent, 2);
    }, (error: any) => {
-      let message = (error.data && error.data.message) ? error.data.message : 'Get factory configuration failed.'
+      let message = (error.data && error.data.message) ? error.data.message : 'Get factory configuration failed.';
      if (error.status === 400) {
        message = 'Factory can\'t be created. The selected workspace has no projects defined. Project sources must be available from an external storage.';
      }
@ -98,9 +98,9 @@ export class FactoryFromWorkspaceCtrl {

  /**
   * Set all workspaces in the filters of workspaces
-   * @param isChecked is setting value
+   * @param {boolean} isChecked is setting value
   */
-  setAllFiltersWorkspaces(isChecked: boolean) {
+  setAllFiltersWorkspaces(isChecked: boolean): void {
    this.workspaces.forEach((workspace: che.IWorkspace) => {
      this.filtersWorkspaceSelected[workspace.id] = isChecked;
    });
@ -108,10 +108,10 @@ export class FactoryFromWorkspaceCtrl {

  /**
   * Get the workspace name by ID
-   * @param workspaceId
-   * @returns {String} workspace name
+   * @param {string} workspaceId
+   * @returns {string} workspace name
   */
-  getWorkspaceName(workspaceId: string) {
+  getWorkspaceName(workspaceId: string): string {
    let workspace = this.workspacesById.get(workspaceId);
    if (workspace && workspace.config.name) {
      return workspace.config.name;
--- a/dashboard/src/app/factories/create-factory/workspaces-tab/factory-from-workspace.directive.ts
+++ b/dashboard/src/app/factories/create-factory/workspaces-tab/factory-from-workspace.directive.ts
@ -14,29 +14,23 @@
 * Defines a directive for configuring factory form workspace.
 * @author Oleksii Orel
 */
-export class FactoryFromWorkspace {
+export class FactoryFromWorkspace implements ng.IDirective {

-  /**
-   * Default constructor that is using resource
-   * @ngInject for Dependency injection
-   */
-  constructor() {
-    this.restrict = 'E';
+  restrict = 'E';

-    this.templateUrl = 'app/factories/create-factory/workspaces-tab/factory-from-workspace.html';
-    this.replace = false;
+  templateUrl = 'app/factories/create-factory/workspaces-tab/factory-from-workspace.html';
+  replace = false;

-    this.controller = 'FactoryFromWorkspaceCtrl';
-    this.controllerAs = 'factoryFromWorkspaceCtrl';
+  controller = 'FactoryFromWorkspaceCtrl';
+  controllerAs = 'factoryFromWorkspaceCtrl';

-    this.bindToController = true;
+  bindToController = true;

-    // scope values
-    this.scope = {
-      isLoading: '=cdvyIsLoading',
-      isImporting: '=cdvyIsImporting',
-      factoryContent: '=cdvyFactoryContent'
-    };
-  }
+  // scope values
+  scope = {
+    isLoading: '=cdvyIsLoading',
+    isImporting: '=cdvyIsImporting',
+    factoryContent: '=cdvyFactoryContent'
+  };

 }
--- a/dashboard/src/app/factories/create-factory/workspaces-tab/factory-from-workspace.html
+++ b/dashboard/src/app/factories/create-factory/workspaces-tab/factory-from-workspace.html
@ -16,13 +16,13 @@
                ng-model="factoryFromWorkspaceCtrl.workspaceFilter.config.name"></che-search>
  </div>
  <span class="projects-list-workspace-name">{{factoryFromWorkspaceCtrl.getWorkspaceName(workspaceId)}}</span>
-                  <span ng-show="(workspaces | filter:factoryFromWorkspaceCtrl.workspaceFilter).length == 0 && workspaces.length > 0"
-                        class="workspace-list-empty">No workspaces found</span>
+  <span ng-show="(workspaces | filter:factoryFromWorkspaceCtrl.workspaceFilter).length == 0 && workspaces.length > 0"
+        class="workspace-list-empty">No workspaces found</span>
  </che-list-title>
  <che-list>
    <che-list-item ng-show="(factoryFromWorkspaceCtrl.workspaces | filter:factoryFromWorkspaceCtrl.workspaceFilter).length > 0"
-    ng-repeat="workspace in factoryFromWorkspaceCtrl.workspaces | filter:factoryFromWorkspaceCtrl.workspaceFilter"
-                    flex-gt-sm="100" flex="33" ng-mouseover="hover=true" ng-mouseout="hover=false">
+                   ng-repeat="workspace in factoryFromWorkspaceCtrl.workspaces | filter:factoryFromWorkspaceCtrl.workspaceFilter"
+                   flex-gt-sm="100" flex="33" ng-mouseover="hover=true" ng-mouseout="hover=false">
      <div layout-gt-sm="row" flex="100" layout-align="start center" class="project-list-row"
           ng-click="factoryFromWorkspaceCtrl.getFactoryContentFromWorkspace(workspace)">
        <div class="workspace-list-static-icon" layout-align="center center">
--- a/dashboard/src/components/widget/search/che-search.directive.ts
+++ b/dashboard/src/components/widget/search/che-search.directive.ts
@ -10,6 +10,11 @@
 */
 'use strict';

+interface ICheSearchScope extends ng.IScope {
+  replaceElement: any;
+  valueModel: any;
+}
+
 /**
 * @ngdoc directive
 * @name components.directive:cheSearch
@ -29,44 +34,39 @@
 *
 * @author Ann Shumilova
 */
-export class CheSearch {
+export class CheSearch implements ng.IDirective {
+  restrict = 'E';
+  transclude = true;
+  templateUrl = 'components/widget/search/che-search.html';

-  /**
-   * Default constructor that is using resource
-   * @ngInject for Dependency injection
-   */
-  constructor () {
-    this.restrict = 'E';
-    this.transclude= true;
-    this.templateUrl = 'components/widget/search/che-search.html';
+  require = ['ngModel'];

-    this.require = ['ngModel'];
+  // scope values
+  scope = {
+    placeholder: '@chePlaceholder',
+    replaceElement: '@?cheReplaceElement',
+    valueModel : '=ngModel',
+    inputName: '@?cheName'
+  };

-    // scope values
-    this.scope = {
-      placeholder:'@chePlaceholder',
-      replaceElement: '@cheReplaceElement',
-      valueModel : '=ngModel',
-      inputName:'@cheName'
-    };
-  }
-
-  link($scope, element) {
-    $scope.$watch('isShown', (isShown) => {
+  link($scope: ICheSearchScope, $element: ng.IAugmentedJQuery): void {
+    $scope.$watch('isShown', (isShown: boolean) => {
      if (isShown) {
        if ($scope.replaceElement) {
          let replaceElement = angular.element('#' + $scope.replaceElement);
          replaceElement.addClass('search-replace-element-hidden');
        }
-        element.addClass('search-component-flex');
-        element.find('input').focus();
+        $element.addClass('search-component-flex');
+        $scope.$applyAsync(() => {
+          $element.find('input').focus();
+        });
      } else {
        $scope.valueModel = '';
        if ($scope.replaceElement) {
          let replaceElement = angular.element('#' + $scope.replaceElement);
          replaceElement.removeClass('search-replace-element-hidden');
        }
-        element.removeClass('search-component-flex');
+        $element.removeClass('search-component-flex');
      }
    });
  }