DEV Prefix Validation & Copy Updates

Prefix validation, adjustments to copy
openshift · Oct 27, 2017 · 944e8ab · 944e8ab
1 parent 26c953a
commit 944e8ab
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 99 deletions.
diff --git a/app/scripts/directives/editEnvironmentFrom.js b/app/scripts/directives/editEnvironmentFrom.js
@@ -8,11 +8,16 @@
       EditEnvironmentFrom
     ],
     bindings: {
-      addRowLink: '@',              // creates a link to "add row" and sets its text label
-      entries: '=',                 // an array of objects containing configmaps and secrets
-      envFromSelectorOptions: '<',  // dropdown selector options, an array of objects
-      selectorPlaceholder: '@',     // placeholder copy for dropdown selector
-      isReadonly: '<?'              // display as read only values
+      addRowLink: '@',                      // creates a link to "add row" and sets its text label
+      entries: '=',                         // an array of objects containing configmaps and secrets
+      envFromSelectorOptions: '<',          // dropdown selector options, an array of objects
+      prefixMinlength: '@?',                // prefix minimum number of characters
+      prefixValidator: '@',                 // prefix validation for ng-pattern
+      prefixValidatorError: '@',            // prefix validation error message
+      prefixValidatorErrorTooltip: '@?',    // prefix validation error tooltip message
+      prefixValidatorErrorTooltipIcon: '@?',// prefix validation error tooltip icon
+      selectorPlaceholder: '@',             // placeholder copy for dropdown selector
+      isReadonly: '<?'                      // display as read only values
     },
     templateUrl: 'views/directives/edit-environment-from.html'
   });
@@ -27,8 +32,9 @@
 
     ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
 
-    ctrl.viewOverlayPanel = function(entry) {
+    ctrl.viewOverlayPanel = function(entry, prefix) {
       ctrl.overlayPaneEntryDetails = entry;
+      ctrl.overlayPaneEntryPrefix = prefix;
       ctrl.overlayPanelVisible = true;
     };
 
@@ -87,11 +93,6 @@
       }
     };
 
-    ctrl.removePrefix = function (entry) {
-      delete entry.prefix;
-      ctrl.editEnvironmentFromForm.$setDirty();
-    };
-
     ctrl.envFromObjectSelected = function(index, entry, selected) {
       var newEnvFrom = {};
 

diff --git a/app/styles/_kve.less b/app/styles/_kve.less
@@ -136,8 +136,14 @@
       margin-bottom: 0;
       padding-right: 5px;
       width: 100%;
+      .environment-from-input {
+        padding-right: 0;
+      }
       @media(min-width: @screen-md-min) {
         width: 50%;
+        .environment-from-input {
+          padding-right: 5px;
+        }
       }
       .faux-input-group,
       .ui-select {

diff --git a/app/views/directives/edit-environment-from.html b/app/views/directives/edit-environment-from.html
@@ -8,12 +8,13 @@
       </div>
     </div>
     <div class="form-group environment-from-editor-header value-header">
-      <div class="input-group">
+      <div class="input-group"
+           ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
         Prefix
         <small class="pficon pficon-help"
                aria-hidden="true"
                data-toggle="tooltip"
-               data-original-title="Optional prefix added to each environment variable name for this resource."></small>
+               data-original-title="Optional prefix added to each environment variable name."></small>
       </div>
     </div>
   </div>
@@ -48,13 +49,9 @@
           </div>
           <div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
             Use all keys and values from
-            <span ng-if="entry.prefix">prefixed</span>
-            <span ng-if="entry.configMapRef.name">config map
-              <span ng-if="entry.prefix">"{{entry.prefix}}"</span>
-              {{entry.configMapRef.name}}</span>
-            <span ng-if="entry.secretRef.name">secret
-              <span ng-if="entry.prefix">"{{entry.prefix}}"</span>
-              {{entry.secretRef.name}}</span>
+            <span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}.</span>
+            <span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}.</span>
+            <span ng-if="entry.prefix">Names will be prefixed with "{{entry.prefix}}"</span>
           </div>
         </div>
 
@@ -81,14 +78,34 @@
       </div>
 
       <div class="form-group environment-from-input">
-        <div class="environment-from-input" ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()">
+        <div class="environment-from-input"
+             ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
+             ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
           <label for="envfrom-prefix-{{$index}}" class="sr-only">Prefix</label>
           <input type="text"
                  class="form-control"
                  placeholder="Add prefix"
                  id="envfrom-prefix-{{$index}}"
                  name="envfrom-prefix-{{$index}}"
-                 ng-model="entry.prefix"/>
+                 ng-model="entry.prefix"
+                 ng-pattern="$ctrl.prefixValidator">
+
+          <span ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched">
+            <span class="help-block key-validation-error"
+                  ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
+              <span class="validation-text">{{$ctrl.prefixValidatorError}}</span>
+              <span ng-if="$ctrl.prefixValidatorErrorTooltip" class="help action-inline">
+                <a
+                  aria-hidden="true"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  data-original-title="{{$ctrl.prefixValidatorErrorTooltip}}">
+                  <i class="{{$ctrl.prefixValidatorErrorTooltipIcon}}"
+                     ng-class="{'pficon pficon-help': !$ctrl.prefixValidatorErrorTooltipIcon}"></i>
+                </a>
+              </span>
+            </span>
+          </span>
         </div>
 
         <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
@@ -112,7 +129,7 @@
           <a
             ng-if="entry.selectedEnvFrom"
             href=""
-            ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
+            ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom, entry.prefix)">View Details</a>
         </div>
       </div>
     </div>

diff --git a/app/views/directives/edit-environment-variables.html b/app/views/directives/edit-environment-variables.html
@@ -47,6 +47,9 @@ <h4 class="section-label">
       env-from-selector-options="$ctrl.valueFromObjects"
       add-row-link="Add ALL Values from Config Map or Secret"
       is-readonly="$ctrl.ngReadonly"
+      prefix-validator="[A-Za-z_][A-Za-z0-9_]*"
+      prefix-validator-error="Please enter a valid prefix."
+      prefix-validator-error-tooltip="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
       show-header>
     </edit-environment-from>
   </div>