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.

Author: spadgett

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

@@ -206,25 +206,19 @@
       Use
       <a href="" ng-click="showAdvancedOptions = true">label selectors</a>
       to request storage.
+
+      <div class="learn-more-block mar-top-sm">
+        <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="showAdvancedOptions" 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/templates.js

@@ -8309,18 +8309,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "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=\"learn-more-block mar-top-sm\">\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=\"showAdvancedOptions\" 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>"