Merge pull request #2423 from spadgett/fix-label-regex

Automatic merge from submit-queue.

Use label-editor for PVC labels

Fixes a problem where the regex used for validating label names is
wrong. Names with a `/` were incorrectly blocked.

See discussion in #2414

![openshift web console 2017-11-01 12-12-24](https://user-images.githubusercontent.com/1167259/32284599-1f5aa9fe-befe-11e7-8f97-f8f64d25579f.png)

![openshift web console 2017-11-01 12-19-48](https://user-images.githubusercontent.com/1167259/32284866-faafbb2a-befe-11e7-9508-68be77e4f191.png)

/kind bug
/assign @jwforres 
cc @mjudeikis

Author: openshift-merge-robot

app/scripts/directives/oscPersistentVolumeClaim.js

@@ -45,6 +45,21 @@ angular.module("openshiftConsole")
         }];
         scope.claim.selectedLabels = [];
 
+        var previousLabels = [];
+        scope.$watch('useLabels', function(useLabels, previousValue) {
+          if (useLabels === previousValue) {
+            return;
+          }
+
+          // Prefill the previous values if the checkbox was unchecked and checked again.
+          if (useLabels) {
+            scope.claim.selectedLabels = previousLabels;
+          } else {
+            previousLabels = scope.claim.selectedLabels;
+            scope.claim.selectedLabels = [];
+          }
+        });
+
         scope.groupUnits = function(unit) {
           switch (unit.value) {
           case 'Mi':

app/views/directives/osc-persistent-volume-claim.html

@@ -58,7 +58,7 @@
     <!-- Name -->
     <div class="form-group">
       <label for="claim-name" class="required">Name</label>
-      <span ng-class="{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$touched && !claimDisabled }">
+      <span ng-class="{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$dirty && !claimDisabled }">
         <input
           id="claim-name"
           class="form-control"
@@ -79,7 +79,7 @@
       <div>
         <span id="claim-name-help" class="help-block">A unique name for the storage claim within the project.</span>
       </div>
-      <div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$touched && !claimDisabled">
+      <div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$dirty && !claimDisabled">
         <span class="help-block">
           Name is required.
         </span>
@@ -201,30 +201,22 @@
          </div>
       </fieldset>
     </div>
-    <!--advanced options-->
-    <div ng-show="!showAdvancedOptions" class="mar-bottom-xl">
-      Use
-      <a href="" ng-click="showAdvancedOptions = true">label selectors</a>
-      to request storage.
+    <div class="checkbox">
+      <label>
+        <input type="checkbox" ng-model="useLabels">
+        Use label selectors to request storage
+      </label>
+      <div class="help-block learn-more-block mar-bottom-xl">
+        <a ng-href="{{'selector_label' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
+      </div>
     </div>
-
-    <div ng-show="showAdvancedOptions" class="form-group">
-      <fieldset class="compute-resource">
-        <label>Label Selector</label>
-        <div class="help-block mar-bottom-lg">
-          Enter a label and value to use for your storage.
-          <div class="learn-more-block">
-            <a ng-href="{{'selector_label' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
-          </div>
-        </div>
-        <key-value-editor
-          entries="claim.selectedLabels"
-          key-placeholder="label"
-          value-placeholder="value"
-          key-validator="[a-zA-Z][a-zA-Z0-9_-]*"
-          key-validator-error-tooltip="A valid label name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores and dashes."
-          add-row-link="Add Label"></key-value-editor>
-      </fieldset>
+    <div ng-show="useLabels" class="form-group osc-form">
+      <label-editor
+          labels="claim.selectedLabels"
+          expand="true"
+          can-toggle="false"
+          help-text="Enter a label and value to use for your storage.">
+      </label-editor>
     </div>
   </fieldset>
 </ng-form>

dist/scripts/scripts.js

@@ -10041,7 +10041,11 @@ label: "GB"
 }, {
 value: "T",
 label: "TB"
-} ], i.claim.selectedLabels = [], i.groupUnits = function(e) {
+} ], i.claim.selectedLabels = [];
+var l = [];
+i.$watch("useLabels", function(e, t) {
+e !== t && (e ? i.claim.selectedLabels = l : (l = i.claim.selectedLabels, i.claim.selectedLabels = []));
+}), i.groupUnits = function(e) {
 switch (e.value) {
 case "Mi":
 case "Gi":
@@ -10057,10 +10061,10 @@ return "";
 }, i.showComputeUnitsHelp = function() {
 r.showComputeUnitsHelp();
 };
-var l = function() {
+var u = function() {
 var e = i.claim.amount && c(i.claim.amount + i.claim.unit), t = _.has(i, "limits.min") && c(i.limits.min), n = _.has(i, "limits.max") && c(i.limits.max), a = !0, r = !0;
 e && t && (a = e >= t), e && n && (r = e <= n), i.persistentVolumeClaimForm.capacity.$setValidity("limitRangeMin", a), i.persistentVolumeClaimForm.capacity.$setValidity("limitRangeMax", r);
-}, u = function() {
+}, d = function() {
 var e = a.isAnyStorageQuotaExceeded(i.quotas, i.clusterQuotas), t = a.willRequestExceedQuota(i.quotas, i.clusterQuotas, "requests.storage", i.claim.amount + i.claim.unit);
 i.persistentVolumeClaimForm.capacity.$setValidity("willExceedStorage", !t), i.persistentVolumeClaimForm.capacity.$setValidity("outOfClaims", !e);
 };
@@ -10096,12 +10100,12 @@ var t = e.by("metadata.name");
 if (!_.isEmpty(t)) {
 i.limits = n.getEffectiveLimitRange(t, "storage", "PersistentVolumeClaim");
 var a;
-i.limits.min && i.limits.max && c(i.limits.min) === c(i.limits.max) && (a = s(i.limits.max), i.claim.amount = Number(a[0]), i.claim.unit = a[1], i.capacityReadOnly = !0), i.$watchGroup([ "claim.amount", "claim.unit" ], l);
+i.limits.min && i.limits.max && c(i.limits.min) === c(i.limits.max) && (a = s(i.limits.max), i.claim.amount = Number(a[0]), i.claim.unit = a[1], i.capacityReadOnly = !0), i.$watchGroup([ "claim.amount", "claim.unit" ], u);
 }
 }), t.list("resourcequotas", {
 namespace: i.projectName
 }, function(e) {
-i.quotas = e.by("metadata.name"), i.$watchGroup([ "claim.amount", "claim.unit" ], u);
+i.quotas = e.by("metadata.name"), i.$watchGroup([ "claim.amount", "claim.unit" ], d);
 }), t.list("appliedclusterresourcequotas", {
 namespace: i.projectName
 }, function(e) {

dist/scripts/templates.js

@@ -8187,13 +8187,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"form-group\">\n" +
     "<label for=\"claim-name\" class=\"required\">Name</label>\n" +
-    "<span ng-class=\"{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$touched && !claimDisabled }\">\n" +
+    "<span ng-class=\"{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$dirty && !claimDisabled }\">\n" +
     "<input id=\"claim-name\" class=\"form-control\" type=\"text\" name=\"name\" ng-model=\"claim.name\" ng-required=\"true\" ng-pattern=\"nameValidation.pattern\" ng-maxlength=\"nameValidation.maxlength\" placeholder=\"my-storage-claim\" take-focus select-on-focus autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\" aria-describedby=\"claim-name-help\">\n" +
     "</span>\n" +
     "<div>\n" +
     "<span id=\"claim-name-help\" class=\"help-block\">A unique name for the storage claim within the project.</span>\n" +
     "</div>\n" +
-    "<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$touched && !claimDisabled\">\n" +
+    "<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$dirty && !claimDisabled\">\n" +
     "<span class=\"help-block\">\n" +
     "Name is required.\n" +
     "</span>\n" +
@@ -8304,23 +8304,18 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</fieldset>\n" +
     "</div>\n" +
-    "\n" +
-    "<div ng-show=\"!showAdvancedOptions\" class=\"mar-bottom-xl\">\n" +
-    "Use\n" +
-    "<a href=\"\" ng-click=\"showAdvancedOptions = true\">label selectors</a>\n" +
-    "to request storage.\n" +
-    "</div>\n" +
-    "<div ng-show=\"showAdvancedOptions\" class=\"form-group\">\n" +
-    "<fieldset class=\"compute-resource\">\n" +
-    "<label>Label Selector</label>\n" +
-    "<div class=\"help-block mar-bottom-lg\">\n" +
-    "Enter a label and value to use for your storage.\n" +
-    "<div class=\"learn-more-block\">\n" +
+    "<div class=\"checkbox\">\n" +
+    "<label>\n" +
+    "<input type=\"checkbox\" ng-model=\"useLabels\">\n" +
+    "Use label selectors to request storage\n" +
+    "</label>\n" +
+    "<div class=\"help-block learn-more-block mar-bottom-xl\">\n" +
     "<a ng-href=\"{{'selector_label' | helpLink}}\" target=\"_blank\">Learn More&nbsp;<i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<key-value-editor entries=\"claim.selectedLabels\" key-placeholder=\"label\" value-placeholder=\"value\" key-validator=\"[a-zA-Z][a-zA-Z0-9_-]*\" key-validator-error-tooltip=\"A valid label name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores and dashes.\" add-row-link=\"Add Label\"></key-value-editor>\n" +
-    "</fieldset>\n" +
+    "<div ng-show=\"useLabels\" class=\"form-group osc-form\">\n" +
+    "<label-editor labels=\"claim.selectedLabels\" expand=\"true\" can-toggle=\"false\" help-text=\"Enter a label and value to use for your storage.\">\n" +
+    "</label-editor>\n" +
     "</div>\n" +
     "</fieldset>\n" +
     "</ng-form>"