From 888a686b80a1d440e086485fd7d1c76b606b98fe Mon Sep 17 00:00:00 2001
From: zherman0 <zherman@redhat.com>
Date: Mon, 5 Dec 2016 16:34:50 -0700
Subject: [PATCH] Adjust radio buttons to drop down selector

---
 .../createPersistentVolumeClaim.js            |  2 +-
 .../directives/oscPersistentVolumeClaim.js    | 26 +++++++-
 .../osc-persistent-volume-claim.html          | 60 ++++++++++---------
 dist/scripts/scripts.js                       | 24 ++++++--
 dist/scripts/templates.js                     | 47 ++++++++-------
 5 files changed, 102 insertions(+), 57 deletions(-)

diff --git a/app/scripts/controllers/createPersistentVolumeClaim.js b/app/scripts/controllers/createPersistentVolumeClaim.js
index 4ba6ce33cb..3f46d4c7c0 100644
--- a/app/scripts/controllers/createPersistentVolumeClaim.js
+++ b/app/scripts/controllers/createPersistentVolumeClaim.js
@@ -95,7 +95,7 @@ angular.module('openshiftConsole')
             _.set(pvc, 'spec.selector.matchLabels', selectorLabel);
           }
         }
-        if ($scope.claim.storageClass ) {
+        if ($scope.claim.storageClass && $scope.claim.storageClass.metadata.name !== "No Storage Class") {
           //we can only have one storage class per claim
           pvc.metadata.annotations["volume.beta.kubernetes.io/storage-class"] = $scope.claim.storageClass.metadata.name;
         }
diff --git a/app/scripts/directives/oscPersistentVolumeClaim.js b/app/scripts/directives/oscPersistentVolumeClaim.js
index 20eb954ff8..2808a4c526 100644
--- a/app/scripts/directives/oscPersistentVolumeClaim.js
+++ b/app/scripts/directives/oscPersistentVolumeClaim.js
@@ -18,6 +18,7 @@ angular.module("openshiftConsole")
         var usageValue = $filter('usageValue');
 
         scope.storageClasses = [];
+        scope.defaultStorageClass = "";
         scope.claim.unit = 'Gi';
         scope.units = [{
           value: "Mi",
@@ -81,9 +82,28 @@ angular.module("openshiftConsole")
           scope.persistentVolumeClaimForm.capacity.$setValidity('limitRangeMax', maxValid);
         };
 
-        DataService.list({group: 'storage.k8s.io', resource: 'storageclasses'}, {}, function(storageClasses) {
-          scope.storageClasses = storageClasses.by('metadata.name');
-        }, {errorNotification: false});
+        DataService.list({group: 'storage.k8s.io', resource: 'storageclasses'}, {}, function(storageClassData) {
+           var storageClasses = storageClassData.by('metadata.name');
+           scope.storageClasses = _.sortBy(storageClasses, 'metadata.name');
+           var annotation = $filter('annotation');
+           scope.defaultStorageClass = _.find(scope.storageClasses, function(storageClass) {
+             return annotation(storageClass, 'storageclass.beta.kubernetes.io/is-default-class') === 'true';
+           });
+           if (!scope.defaultStorageClass)  { //if there is no default, set a no storage class option
+             var noclass = {
+               metadata: {
+                 name: "No Storage Class",
+                 labels: {},
+                 annotations: {
+                   description:  "No storage class will be assigned"
+                 }
+               }
+             };
+             scope.storageClasses.unshift(noclass);
+           } else {
+             scope.claim.storageClass = scope.defaultStorageClass;
+           }
+         }, {errorNotification: false});
 
         DataService.list('limitranges', { namespace: scope.projectName }, function(limitRangeData) {
           var limitRanges = limitRangeData.by('metadata.name');
diff --git a/app/views/directives/osc-persistent-volume-claim.html b/app/views/directives/osc-persistent-volume-claim.html
index 58e3372c2c..f1abc534fa 100644
--- a/app/views/directives/osc-persistent-volume-claim.html
+++ b/app/views/directives/osc-persistent-volume-claim.html
@@ -2,37 +2,43 @@
   <fieldset ng-disabled="claimDisabled">
     <div ng-show="storageClasses | hashSize" class="form-group">
       <!--storage class-->
-      <label class="required">Storage Classes</label>
-      <div id="claim-storage-class-help" class="help-block mar-bottom-lg">
+      <label>Storage Class</label>
+      <div>
+        <ui-select
+          ng-if="storageClasses"
+          ng-model="claim.storageClass"
+          theme="bootstrap"
+          search-enabled="true"
+          title="Select a storage class"
+          class="select-role">
+          <ui-select-match placeholder="Select a storage class">
+            <span>
+              {{$select.selected.metadata.name}}
+            </span>
+          </ui-select-match>
+          <ui-select-choices
+            repeat="sclass as sclass in storageClasses | toArray | filter : { metadata: { name: $select.search } } ">
+            <div>
+              <span ng-bind-html="sclass.metadata.name  | highlight : $select.search"></span>
+              <span ng-if="sclass | annotation : 'description'" class="text-muted">
+                <small>&ndash;
+                  <span ng-if="sclass.parameters.type">Type: {{sclass.parameters.type}} | </span>
+                  <span ng-if="sclass.parameters.zone">Zone: {{sclass.parameters.zone}} | </span>
+                  {{sclass | annotation : 'description'}}
+                </small>
+              </span>
+            </div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+      <div id="claim-storage-class-help" class="help-block">
         Storage classes are set by the administrator to define types of storage the users can select.
+        <span ng-if="defaultStorageClass"> If another storage class is not chosen, the default storage class <var>{{defaultStorageClass.metadata.name}}</var> will be used.</span>
         <div class="learn-more-block">
-          <a ng-href="{{'storage_classes' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
-        </div>
-      </div>
-      <div ng-repeat="sclass in storageClasses track by (sclass | uid)" id="storageclass-{{sclass.metadata.name}}">
-        <div class="radio">
-          <label>
-            <input  type="radio"
-                    name="storageClass"
-                    ng-value="sclass"
-                    ng-model="claim.storageClass">
-            {{sclass.metadata.name}}
-          </label>
-        </div>
-        <div class="help-block">
-          Type: {{sclass.parameters.type}} | Zone: {{sclass.parameters.zone}}
-          <span ng-if="sclass.metadata.annotations.description"> | {{sclass.metadata.annotations.description}}</span>
+          <a ng-href="{{'storage_classes' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"> </i></a>
         </div>
       </div>
-      <div class="radio">
-        <label>
-          <input type="radio"
-                 name="storageClass"
-                 ng-model="claim.storageClass">
-            No Storage Class
-          <div class="help-block">No storage class will be assigned unless a default class has been assigned by the system administrator.</div>
-        </label>
-      </div>
+
     </div>
 
     <!-- Name -->
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index 81eea4d402..d6271bf4ee 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -8882,7 +8882,7 @@ if (a.spec.resources.requests.storage = c.claim.amount + b, c.claim.selectedLabe
 var d = j.mapEntries(j.compactEntries(c.claim.selectedLabels));
 _.isEmpty(d) || _.set(a, "spec.selector.matchLabels", d);
 }
-return c.claim.storageClass && (a.metadata.annotations["volume.beta.kubernetes.io/storage-class"] = c.claim.storageClass.metadata.name), a;
+return c.claim.storageClass && "No Storage Class" !== c.claim.storageClass.metadata.name && (a.metadata.annotations["volume.beta.kubernetes.io/storage-class"] = c.claim.storageClass.metadata.name), a;
 }
 return c.project = e, c.breadcrumbs[0].title = a("displayName")(e), f.canI("persistentvolumeclaims", "create", b.project) ? void (c.createPersistentVolumeClaim = function() {
 if (c.createPersistentVolumeClaimForm.$valid) {
@@ -10073,7 +10073,7 @@ projectName:"="
 templateUrl:"views/directives/osc-persistent-volume-claim.html",
 link:function(e) {
 var f = a("amountAndUnit"), g = a("usageValue");
-e.storageClasses = [], e.claim.unit = "Gi", e.units = [ {
+e.storageClasses = [], e.defaultStorageClass = "", e.claim.unit = "Gi", e.units = [ {
 value:"Mi",
 label:"MiB"
 }, {
@@ -10114,8 +10114,24 @@ a && b && (d = a >= b), a && c && (f = a <= c), e.persistentVolumeClaimForm.capa
 b.list({
 group:"storage.k8s.io",
 resource:"storageclasses"
-}, {}, function(a) {
-e.storageClasses = a.by("metadata.name");
+}, {}, function(b) {
+var c = b.by("metadata.name");
+e.storageClasses = _.sortBy(c, "metadata.name");
+var d = a("annotation");
+if (e.defaultStorageClass = _.find(e.storageClasses, function(a) {
+return "true" === d(a, "storageclass.beta.kubernetes.io/is-default-class");
+}), e.defaultStorageClass) e.claim.storageClass = e.defaultStorageClass; else {
+var f = {
+metadata:{
+name:"No Storage Class",
+labels:{},
+annotations:{
+description:"No storage class will be assigned"
+}
+}
+};
+e.storageClasses.unshift(f);
+}
 }, {
 errorNotification:!1
 }), b.list("limitranges", {
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 0eec2798a1..9a26c82140 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -7504,31 +7504,34 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<fieldset ng-disabled=\"claimDisabled\">\n" +
     "<div ng-show=\"storageClasses | hashSize\" class=\"form-group\">\n" +
     "\n" +
-    "<label class=\"required\">Storage Classes</label>\n" +
-    "<div id=\"claim-storage-class-help\" class=\"help-block mar-bottom-lg\">\n" +
-    "Storage classes are set by the administrator to define types of storage the users can select.\n" +
-    "<div class=\"learn-more-block\">\n" +
-    "<a ng-href=\"{{'storage_classes' | helpLink}}\" target=\"_blank\">Learn More&nbsp;<i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "<div ng-repeat=\"sclass in storageClasses track by (sclass | uid)\" id=\"storageclass-{{sclass.metadata.name}}\">\n" +
-    "<div class=\"radio\">\n" +
-    "<label>\n" +
-    "<input type=\"radio\" name=\"storageClass\" ng-value=\"sclass\" ng-model=\"claim.storageClass\">\n" +
-    "{{sclass.metadata.name}}\n" +
-    "</label>\n" +
+    "<label>Storage Class</label>\n" +
+    "<div>\n" +
+    "<ui-select ng-if=\"storageClasses\" ng-model=\"claim.storageClass\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a storage class\" class=\"select-role\">\n" +
+    "<ui-select-match placeholder=\"Select a storage class\">\n" +
+    "<span>\n" +
+    "{{$select.selected.metadata.name}}\n" +
+    "</span>\n" +
+    "</ui-select-match>\n" +
+    "<ui-select-choices repeat=\"sclass as sclass in storageClasses | toArray | filter : { metadata: { name: $select.search } } \">\n" +
+    "<div>\n" +
+    "<span ng-bind-html=\"sclass.metadata.name  | highlight : $select.search\"></span>\n" +
+    "<span ng-if=\"sclass | annotation : 'description'\" class=\"text-muted\">\n" +
+    "<small>&ndash;\n" +
+    "<span ng-if=\"sclass.parameters.type\">Type: {{sclass.parameters.type}} | </span>\n" +
+    "<span ng-if=\"sclass.parameters.zone\">Zone: {{sclass.parameters.zone}} | </span>\n" +
+    "{{sclass | annotation : 'description'}}\n" +
+    "</small>\n" +
+    "</span>\n" +
     "</div>\n" +
-    "<div class=\"help-block\">\n" +
-    "Type: {{sclass.parameters.type}} | Zone: {{sclass.parameters.zone}}\n" +
-    "<span ng-if=\"sclass.metadata.annotations.description\"> | {{sclass.metadata.annotations.description}}</span>\n" +
+    "</ui-select-choices>\n" +
+    "</ui-select>\n" +
     "</div>\n" +
+    "<div id=\"claim-storage-class-help\" class=\"help-block\">\n" +
+    "Storage classes are set by the administrator to define types of storage the users can select.\n" +
+    "<span ng-if=\"defaultStorageClass\"> If another storage class is not chosen, the default storage class <var>{{defaultStorageClass.metadata.name}}</var> will be used.</span>\n" +
+    "<div class=\"learn-more-block\">\n" +
+    "<a ng-href=\"{{'storage_classes' | helpLink}}\" target=\"_blank\">Learn More&nbsp;<i class=\"fa fa-external-link\" aria-hidden=\"true\"> </i></a>\n" +
     "</div>\n" +
-    "<div class=\"radio\">\n" +
-    "<label>\n" +
-    "<input type=\"radio\" name=\"storageClass\" ng-model=\"claim.storageClass\">\n" +
-    "No Storage Class\n" +
-    "<div class=\"help-block\">No storage class will be assigned unless a default class has been assigned by the system administrator.</div>\n" +
-    "</label>\n" +
     "</div>\n" +
     "</div>\n" +
     "\n" +