From 2b83e4c8d646a7cf208b77105c4b1dcfece70167 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Thu, 5 Oct 2017 15:08:16 +0100
Subject: [PATCH] Make search boxes not usable and visually show this while
 fetching orgs and spaces.

---
 .../app-framework/i18n/en_US/app-framework.json      |  3 +++
 .../src/widgets/search-box/search-box.directive.js   |  3 ++-
 .../src/widgets/search-box/search-box.html           |  5 ++++-
 .../src/widgets/search-box/search-box.scss           |  8 ++++++++
 .../app-theme/src/scss/style/components/_forms.scss  |  4 ++++
 .../deploy-location/deploy-location.directive.js     | 12 ++++++++++++
 .../view/util/deploy-location/deploy-location.html   |  6 ++++--
 7 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/components/app-framework/i18n/en_US/app-framework.json b/components/app-framework/i18n/en_US/app-framework.json
index d4bb9f6a1f..5fb35cc8a3 100644
--- a/components/app-framework/i18n/en_US/app-framework.json
+++ b/components/app-framework/i18n/en_US/app-framework.json
@@ -4,5 +4,8 @@
   },
   "code-block": {
     "copied-msg": "Copied to clipboard"
+  },
+  "search-box": {
+    "busy": "Loading ..."
   }
 }
\ No newline at end of file
diff --git a/components/app-framework/src/widgets/search-box/search-box.directive.js b/components/app-framework/src/widgets/search-box/search-box.directive.js
index 0b85ba4005..69767775b3 100644
--- a/components/app-framework/src/widgets/search-box/search-box.directive.js
+++ b/components/app-framework/src/widgets/search-box/search-box.directive.js
@@ -54,7 +54,8 @@
         placeholder: '@?',
         searchIcon: '@?',
         disabled: '=?',
-        translateOptionLabels: '=?'
+        translateOptionLabels: '=?',
+        busy: '=?'
       },
       controller: SearchBoxController,
       controllerAs: 'searchBoxCtrl',
diff --git a/components/app-framework/src/widgets/search-box/search-box.html b/components/app-framework/src/widgets/search-box/search-box.html
index 458f1c2b9a..06a560a67e 100644
--- a/components/app-framework/src/widgets/search-box/search-box.html
+++ b/components/app-framework/src/widgets/search-box/search-box.html
@@ -1,10 +1,13 @@
-<div ng-click="searchBoxCtrl.openIt()" class="search-box" ng-class="{ open: searchBoxCtrl.open, disabled: searchBoxCtrl.disabled}">
+<div ng-click="!searchBoxCtrl.busy && searchBoxCtrl.openIt()" class="search-box" ng-class="{ open: searchBoxCtrl.open, disabled: searchBoxCtrl.disabled || searchBoxCtrl.busy}">
+  <div class="search-box-busy" ng-if="searchBoxCtrl.busy" translate>search-box.busy</div>
   <input type="text"
          ng-change="searchBoxCtrl.onChange()"
          ng-model="searchBoxCtrl.searchText"
          ng-keydown="searchBoxCtrl.onKeyDown($event)"
+         ng-show="!searchBoxCtrl.busy"
          placeholder="{{ searchBoxCtrl.placeholder }}" ng-disabled="searchBoxCtrl.disabled"/>
   <i class="search-icon material-icons"
+     ng-show="!searchBoxCtrl.busy"
      ng-class="searchBoxCtrl.searchIcon || 'search-icon-icon'"></i>
 
   <ul ng-show="searchBoxCtrl.open" class="dropdown-menu">
diff --git a/components/app-framework/src/widgets/search-box/search-box.scss b/components/app-framework/src/widgets/search-box/search-box.scss
index 6d8668eddd..51992c568f 100644
--- a/components/app-framework/src/widgets/search-box/search-box.scss
+++ b/components/app-framework/src/widgets/search-box/search-box.scss
@@ -70,6 +70,14 @@ search-box {
       }
     }
   }
+
+  .search-box-busy {
+    padding: 0;
+    margin-bottom: $padding-base-vertical;
+    height: $line-height-computed;
+    line-height: $line-height-computed;
+    margin-top: $console-form-margin-top;    
+  }
 }
 
 .form-group-large {
diff --git a/components/app-theme/src/scss/style/components/_forms.scss b/components/app-theme/src/scss/style/components/_forms.scss
index e4699ef05e..61bd2be756 100644
--- a/components/app-theme/src/scss/style/components/_forms.scss
+++ b/components/app-theme/src/scss/style/components/_forms.scss
@@ -35,6 +35,10 @@ form, [ng-form] {
       width: $console-input-width * 1.25;
     }
 
+    &.form-group-busy {
+      background-color: $gray-lighter;
+    }
+
     label {
       color: $console-input-label-fg;
       font-weight: normal;
diff --git a/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.directive.js b/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.directive.js
index 34736188e0..e7400e1fa1 100644
--- a/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.directive.js
+++ b/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.directive.js
@@ -55,6 +55,9 @@
       vm.organizations = [];
       vm.spaces = [];
 
+      vm.loadingOrganizations = true;
+      vm.loadingSpaces = true;
+
       if (initialServiceInstance && initialServiceInstance !== 'all') {
         // Find the option to set. If the user has no permissions this may be null
         var preSelectedService = _.find(vm.serviceInstances, {value: {guid: initialServiceInstance}}) || {};
@@ -91,6 +94,8 @@
     function getOrganizations() {
       var cnsiGuid = vm.serviceInstance.guid;
       vm.organizations.length = 0;
+      vm.loadingOrganizations = true;
+      vm.loadingSpaces = true;
 
       return cfOrganizationModel.listAllOrganizations(cnsiGuid)
         .then(function (organizations) {
@@ -115,6 +120,9 @@
             var preSelectedOrg = _.find(vm.organizations, {value: {metadata: {guid: initialOrganization}}}) || {};
             vm.organization = preSelectedOrg.value;
           }
+        })
+        .finally(function () {
+          vm.loadingOrganizations = false;
         });
     }
 
@@ -128,6 +136,7 @@
     function getSpacesForOrganization(guid) {
       var cnsiGuid = vm.serviceInstance.guid;
       vm.spaces.length = 0;
+      vm.loadingSpaces = true;
 
       return cfOrganizationModel.listAllSpacesForOrganization(cnsiGuid, guid)
         .then(function (spaces) {
@@ -145,6 +154,9 @@
             var preSelectedOrg = _.find(vm.spaces, {value: {metadata: {guid: initialSpace}}}) || {};
             vm.space = preSelectedOrg.value;
           }
+        })
+        .finally(function () {
+          vm.loadingSpaces = false;
         });
     }
 
diff --git a/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.html b/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.html
index 44e10dddc2..a90b63f14b 100644
--- a/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.html
+++ b/components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.html
@@ -10,22 +10,24 @@
   </search-box>
 </div>
 
-<div class="form-group form-group-large">
+<div class="form-group form-group-large" ng-class="{'form-group-busy': deployLocation.loadingOrganizations}">
   <label class="control-label" required translate>app.deploy-location.org-label</label>
   <search-box
     ng-model="deployLocation.organization"
     input-options="deployLocation.organizations"
     placeholder="{{'app.deploy-location.org-placeholder' | translate}}"
+    busy="deployLocation.loadingOrganizations"
     tabindex="0" required>
   </search-box>
 </div>
 
-<div class="form-group form-group-large">
+<div class="form-group form-group-large"  ng-class="{'form-group-busy': deployLocation.loadingSpaces}">
   <label class="control-label" required translate>app.deploy-location.space-label</label>
   <search-box
     ng-model="deployLocation.space"
     input-options="deployLocation.spaces"
     placeholder="{{'app.deploy-location.space-placeholder' | translate}}"
+    busy="deployLocation.loadingSpaces"
     tabindex="0" required>
   </search-box>
 </div>