Merge pull request #2432 from eclipse/CHE-2416

CHE-2416: improve workspace-select-stack widget for UD
eclipse-che · Sep 17, 2016 · 996581b · 996581b
2 parents 95e1b29 + 4c1db05
commit 996581b
Show file tree

Hide file tree

Showing 16 changed files with 161 additions and 135 deletions.
diff --git a/dashboard/src/app/projects/create-project/create-project.html b/dashboard/src/app/projects/create-project/create-project.html
@@ -70,8 +70,8 @@
               <div layout="column" layout-align="end end"
                    ng-show="createProjectCtrl.getCreationSteps()[createProjectCtrl.getCurrentProgressStep()].hasError">
                 <che-button-danger
-                  che-button-title="{{createProjectCtrl.isResourceProblem() ? 'Stop running workspaces' :  'Retry'}}"
-                  ng-click="createProjectCtrl.resetCreateProgress()"></che-button-danger>
+                        che-button-title="{{createProjectCtrl.isResourceProblem() ? 'Stop running workspaces' :  'Retry'}}"
+                        ng-click="createProjectCtrl.resetCreateProgress()"></che-button-danger>
                 <che-link class="create-project-download-logs-link"
                           ng-click="createProjectCtrl.downloadLogs()"
                           che-link-text="Problem? download logs"></che-link>
@@ -109,7 +109,7 @@
           <md-tab md-on-select="createProjectCtrl.setCurrentTab('github')">
             <md-tab-label>
               <md-icon md-font-icon="fa-github" class="fa che-tab-label-icon"></md-icon>
-              <span class="che-tab-label-title">Github</span>
+              <span class="che-tab-label-title">GitHub</span>
             </md-tab-label>
             <md-tab-body>
               <form name="createProjectGitHubForm">
@@ -220,7 +220,7 @@
       <md-radio-group ng-model="createProjectCtrl.templatesChoice">
         <md-radio-button value="templates-samples">Ready-to-run project samples</md-radio-button>
         <create-project-samples
-          ng-if="createProjectCtrl.templatesChoice === 'templates-samples'"></create-project-samples>
+                ng-if="createProjectCtrl.templatesChoice === 'templates-samples'"></create-project-samples>
         <md-radio-button ng-if="createProjectCtrl.enableWizardProject"
                          ng-click="createProjectCtrl.selectWizardProject()"
                          value="templates-wizard">Wizard-driven templates
@@ -278,7 +278,7 @@
                         ng-click="!createProjectCtrl.checkValidFormState() || createProjectCtrl.create()"
                         ng-disabled="!createProjectCtrl.checkValidFormState() || !createProjectCtrl.isReadyToCreate()"
                         class="projects-create-project-button"
-    ></che-button-primary>
+            ></che-button-primary>
 
     <div class="create-project-empty-space"></div>
 

diff --git a/dashboard/src/app/projects/create-project/create-project.styl b/dashboard/src/app/projects/create-project/create-project.styl
@@ -34,11 +34,11 @@ md-select.create-project-select
   margin-bottom 10px
   margin-right 24px
   background-color #fff
-  box-shadow 0 2px 6px 0 rgba(0,0,0,0.4)
+  box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.4)
 
 .create-project-header-button .che-button
   font-size 15px !important
-  box-shadow 0 0 0 0 rgba(0,0,0,0.26) !important
+  box-shadow 0 0 0 0 rgba(0, 0, 0, 0.26) !important
 
 .create-project-minimize-icon
   font-size 40px
@@ -62,6 +62,9 @@ md-select.create-project-select
 .projects-create-project
   padding 0 14px
 
+  md-tabs
+    min-height 185px
+
   .che-label-container-content .create-project-input
     margin -6px 0
 

diff --git a/dashboard/src/app/projects/create-project/github/create-project-github.html b/dashboard/src/app/projects/create-project/github/create-project-github.html
@@ -16,7 +16,7 @@
   We have a problem authenticating you with GitHub.
 </p>
 
-<div layout="column" layout-align="space-around center" ng-show="createProjectGithubCtrl.state == 'NO_REPO'">
+<div layout="column" layout-align="space-around flex-start" ng-show="createProjectGithubCtrl.state == 'NO_REPO'">
   <div class="github-create-project-github-warningempty">Your GitHub repositories will appear here</div>
   <div>GitHub repositories can easily be imported in {{createProjectGithubCtrl.productName}}</div>
   <che-button-default class="github-create-project-github-button"
@@ -32,7 +32,7 @@
 </div>
 
 <div ng-if="createProjectGithubCtrl.state == 'LOADED'">
-  <div layout="row" layout-align="space-around center">
+  <div layout="row" layout-align="space-around flex-start">
 
     <div layout="row" flex="45" class="github-create-project-search-component">
       <md-icon flex-gt-sm="5" md-font-icon="fa fa-search"></md-icon>
@@ -49,10 +49,10 @@
   </div>
   <che-list class="github-create-project-repositories-list">
     <che-list-item
-      ng-repeat="gitHubRepository in createProjectGithubCtrl.gitHubRepositories | githubFilterRepositories:createProjectGithubCtrl.organizationName:createProjectGithubCtrl.repositoryName | orderBy:'name'"
-      ng-click="createProjectGithubCtrl.selectRepository(gitHubRepository)" flex-gt-sm="100" flex="33"
-      ng-class="{'github-create-project-active' : gitHubRepository == createProjectGithubCtrl.selectedRepository}">
-      <div layout-gt-sm="row" flex="100" layout-align="start center" class="project-list-row">
+            ng-repeat="gitHubRepository in createProjectGithubCtrl.gitHubRepositories | githubFilterRepositories:createProjectGithubCtrl.organizationName:createProjectGithubCtrl.repositoryName | orderBy:'name'"
+            ng-click="createProjectGithubCtrl.selectRepository(gitHubRepository)" flex-gt-sm="100" flex="33"
+            ng-class="{'github-create-project-active' : gitHubRepository == createProjectGithubCtrl.selectedRepository}">
+      <div layout-gt-sm="row" flex="100" layout-align="start flex-start" class="project-list-row">
         <div class="github-create-project-icons" flex-gt-sm="5">
           <span ng-if="!gitHubRepository.fork" class="github-create-project-icon fa fa-folder"></span>
           <span ng-if="gitHubRepository.fork" class="github-create-project-icon fa fa-code-fork" title="forked"></span>

diff --git a/dashboard/src/app/projects/create-project/github/create-project-github.styl b/dashboard/src/app/projects/create-project/github/create-project-github.styl
@@ -2,7 +2,7 @@
   margin-left 5px
 
 .github-create-project
-  cursor:pointer
+  cursor pointer
 
 .create-project-github-panel
   margin 15px
@@ -17,10 +17,9 @@
   background-image none
   border 1px solid #e5e5e5
   border-radius 0
-  -webkit-box-shadow inset 0 1px 1px rgba(0,0,0,.075)
-  -webkit-transition border-color ease-in-out .15s,box-shadow ease-in-out .15s
-  transition border-color ease-in-out .15s,box-shadow ease-in-out .15s
-
+  -webkit-box-shadow inset 0 1px 1px rgba(0, 0, 0, .075)
+  -webkit-transition border-color ease-in-out .15s, box-shadow ease-in-out .15s
+  transition border-color ease-in-out .15s, box-shadow ease-in-out .15s
 
 .github-create-project-repository-name
   font-size 16px
@@ -56,7 +55,9 @@
   margin-bottom 27px
 
 .github-create-project-github-button
- margin-top 10px
+  margin-top 10px
+  button
+    margin-left 0
 
 .github-create-project-github-warningempty
   margin-bottom 10px

diff --git a/...kspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.controller.js b/...kspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.controller.js
@@ -21,53 +21,93 @@ export class ReadyToGoStacksController {
    * Default constructor that is using resource
    * @ngInject for Dependency injection
    */
-  constructor($timeout, $rootScope, lodash, cheStack) {
+  constructor($timeout, $scope, lodash, cheStack) {
     this.$timeout = $timeout;
-    this.$rootScope = $rootScope;
+    this.$scope = $scope;
     this.lodash = lodash;
     this.cheStack = cheStack;
 
     this.generalStacks = [];
-    this.stacks = cheStack.getStacks();
-    if (this.stacks.length) {
-      this.updateData();
+    this.allStackTags = [];
+    this.filteredStackIds = [];
+    this.stackIconsMap = new Map();
+
+    let stacks = cheStack.getStacks();
+    if (stacks.length) {
+      this.updateData(stacks);
     } else {
       cheStack.fetchStacks().then(() => {
-        this.updateData();
+        this.updateData(stacks);
       });
     }
+
+    // create array of id of stacks which contain selected tags
+    // to make filtration faster
+    $scope.$on('event:updateFilter', (event, tags) => {
+      this.allStackTags = [];
+      this.filteredStackIds = [];
+
+      if (!tags) {
+        tags = [];
+      }
+      this.generalStacks.forEach((stack) => {
+        let matches = 0,
+          stackTags = stack.tags.map(tag => tag.toLowerCase());
+        for (let i = 0; i < tags.length; i++) {
+          if (stackTags.indexOf(tags[i].toLowerCase()) > -1) {
+            matches++;
+          }
+        }
+        if (matches === tags.length) {
+          this.filteredStackIds.push(stack.id);
+          this.allStackTags = this.allStackTags.concat(stack.tags);
+        }
+      });
+      this.allStackTags = this.lodash.uniq(this.allStackTags);
+    });
+
+    // set first stack as selected after filtration finished
+    $scope.$watch('filteredStacks && filteredStacks.length', (length) => {
+      if (length) {
+        this.setStackSelectionById($scope.filteredStacks[0].id);
+      }
+    });
   }
 
   /**
    * Update stacks' data
+   * @param stacks
    */
-  updateData() {
-    this.stacks.forEach((stack) => {
+  updateData(stacks) {
+    stacks.forEach((stack) => {
       if (stack.scope !== 'general') {
         return;
       }
-      let generalStack = angular.copy(stack);
-      let findLink = this.lodash.find(generalStack.links, (link) => {
+      let findLink = this.lodash.find(stack.links, (link) => {
         return link.rel === 'get icon link';
       });
       if (findLink) {
-        generalStack.iconSrc = findLink.href;
+        this.stackIconsMap.set(stack.id, findLink.href);
       }
-      this.generalStacks.push(generalStack);
+      this.generalStacks.push(stack);
+      this.allStackTags = this.allStackTags.concat(stack.tags);
     });
-    // broadcast event
-    this.$rootScope.$broadcast('create-project-stacks:initialized');
+    this.allStackTags = this.lodash.uniq(this.allStackTags);
   }
 
   /**
    * Joins the tags into a string
+   * @param tags
+   * @returns String
    */
   tagsToString(tags) {
     return tags.join(', ');
   }
 
   /**
    * Gets privileged stack position
+   * @param item
+   * @returns number
    */
   getPrivilegedSortPosition(item) {
     let privilegedNames = ['Java', 'Java-MySQL', 'Blank'];
@@ -81,22 +121,13 @@ export class ReadyToGoStacksController {
   }
 
   /**
-   * Select stack
+   * Select stack by Id
+   * @param stackId
    */
-  select(stack) {
-    this.stack = stack;
-    this.$timeout(() => {
-      this.onChange();
-    });
-  }
-
-  /**
-   * When initializing with the first item, select it
-   */
-  initValue(isFirst, stack) {
-    if (isFirst) {
-      this.select(stack);
+  setStackSelectionById(stackId) {
+    this.selectedStackId = stackId;
+    if (this.selectedStackId) {
+      this.$scope.$emit('event:selectStackId', this.selectedStackId);
     }
   }
-
 }
diff --git a/...rkspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.directive.js b/...rkspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.directive.js
@@ -20,7 +20,7 @@
  * `<ready-to-go-stacks></ready-to-go-stacks>` for creating new projects from ready to go stacks.
  *
  * @usage
- *   <ready-to-go-stacks class="projects-create-project-tab" layout="row" layout-wrap></ready-to-go-stacks>
+ *   <ready-to-go-stacks></ready-to-go-stacks>
  *
  * @author Florent Benoit
  */
@@ -30,20 +30,16 @@ export class ReadyToGoStacks {
    * Default constructor that is using resource
    * @ngInject for Dependency injection
    */
-  constructor () {
-    this.restrict='E';
+  constructor() {
+    this.restrict = 'E';
     this.templateUrl = 'app/workspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.html';
 
     this.controller = 'ReadyToGoStacksController';
     this.controllerAs = 'readyToGoStacksCtrl';
     this.bindToController = true;
 
     // scope values
-    this.scope = {
-      stack: '=cheStack',
-      onChange: '&cheOnChange'
-    };
-
+    this.scope = {};
   }
 
 }
diff --git a/...c/app/workspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.html b/...c/app/workspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.html
@@ -10,24 +10,26 @@
       Codenvy, S.A. - initial API and implementation
 
 -->
-<ng-form name="workspaceInformationForm">
-
+<div layout="column" flex>
   <div class="stack-label-info">Create a new workspace with a ready-to-go stack.</div>
-  <div layout="column" flex>
-    <div layout="row" layout-wrap>
-      <md-card layout="column" class="che-simple-selector"
-               ng-repeat="stack in readyToGoStacksCtrl.generalStacks | orderBy:[readyToGoStacksCtrl.getPrivilegedSortPosition, 'name']"
-               ng-init="readyToGoStacksCtrl.initValue($first, stack)"
-               ng-click="readyToGoStacksCtrl.select(stack)"
-               ng-class="{'che-simple-selector-active' : '{{stack.name}}' === readyToGoStacksCtrl.stack.name}">
-        <div layout="row">
-          <div class="selector-icon" ng-class="{'chefont cheico-type-blank' : !stack.iconSrc}">
-            <img ng-if="stack.iconSrc" ng-src="{{stack.iconSrc}}"/>
-          </div>
-          <div flex="70" class="title">{{stack.name}}</div>
+  <div layout="row" flex="100">
+    <che-stack-library-filter layout="row" flex
+                              ng-model="readyToGoStacksCtrl.allStackTags">
+    </che-stack-library-filter>
+  </div>
+  <div layout="row" layout-wrap>
+    <md-card layout="column" class="che-simple-selector"
+             ng-repeat="stack in filteredStacks = (readyToGoStacksCtrl.generalStacks | stackSelectedStackFilter:readyToGoStacksCtrl.filteredStackIds) | orderBy:[readyToGoStacksCtrl.getPrivilegedSortPosition, 'name']"
+             ng-init="$first && readyToGoStacksCtrl.setStackSelectionById(stack.id)"
+             ng-click="readyToGoStacksCtrl.setStackSelectionById(stack.id)"
+             ng-class="{'che-simple-selector-active' : '{{stack.id}}' === readyToGoStacksCtrl.selectedStackId}">
+      <div layout="row">
+        <div class="selector-icon" ng-class="{'chefont cheico-type-blank' : !readyToGoStacksCtrl.stackIconsMap.has(stack.id)}">
+          <img ng-src="{{readyToGoStacksCtrl.stackIconsMap.get(stack.id)}}"/>
         </div>
-        <div class="description">{{readyToGoStacksCtrl.tagsToString(stack.tags)}}</div>
-      </md-card>
-    </div>
+        <div flex="70" class="title">{{stack.name}}</div>
+      </div>
+      <div class="description">{{readyToGoStacksCtrl.tagsToString(stack.tags)}}</div>
+    </md-card>
   </div>
-</ng-form>
+</div>
diff --git a/...c/app/workspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.styl b/...c/app/workspaces/create-workspace/select-stack/ready-to-go-stacks/ready-to-go-stacks.styl
@@ -76,6 +76,9 @@ $che-simple-selector-color = $label-info-color
   height 24px
   padding-bottom 1px
 
+  .cheico-type-blank > img
+    display none
+
 .che-simple-selector .title
   font-size 12px
   line-height 22px

diff --git a/...orkspace/select-stack/stack-library/create-project-stack-library-selected-stack.filter.js b/...orkspace/select-stack/stack-library/create-project-stack-library-selected-stack.filter.js
@@ -18,14 +18,14 @@
 export class CreateProjectStackLibrarySelectedStackFilter {
 
   constructor(register) {
-    register.app.filter( 'stackSelectedStackFilter' , function () {
+    register.app.filter('stackSelectedStackFilter', () => {
       return function (templates, idFilter) {
         if (!templates) {
           return [];
         }
 
         if (!idFilter || !idFilter.length) {
-          return [];
+          return templates;
         }
 
         var filtered = [];