Merge pull request #2377 from cdcabrera/issue-envfrom-prefix

Automatic merge from submit-queue. Allow EnvFrom Prefix Opened envFrom to allow prefix input. - [x] Minor display logic updates - [x] Design/UX modifications Related to #2182 and closes #2362 ![screen shot 2017-10-25 at 5 06 37 pm](https://user-images.githubusercontent.com/3761375/32026101-d15b6e5c-b9b0-11e7-8405-509d2931056e.png)
openshift · Oct 30, 2017 · 39494d0 · 39494d0
2 parents 7190e8d + bafca94
commit 39494d0
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 62 deletions.
diff --git a/app/scripts/directives/editEnvironmentFrom.js b/app/scripts/directives/editEnvironmentFrom.js
@@ -8,11 +8,9 @@
       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
+      entries: '=',                         // an array of objects containing configmaps and secrets
+      envFromSelectorOptions: '<',          // dropdown selector options, an array of objects
+      isReadonly: '<?'                      // display as read only values
     },
     templateUrl: 'views/directives/edit-environment-from.html'
   });
@@ -52,7 +50,7 @@
 
       ctrl.envFromEntries.splice(start, deleteCount);
 
-      if(!ctrl.envFromEntries.length && ctrl.addRowLink) {
+      if(!ctrl.envFromEntries.length) {
         addEntry(ctrl.envFromEntries);
       }
 
@@ -105,6 +103,10 @@
           break;
       }
 
+      if (entry.prefix) {
+        newEnvFrom.prefix = entry.prefix;
+      }
+
       _.assign(ctrl.envFromEntries[index], newEnvFrom);
       ctrl.updateEntries(ctrl.envFromEntries);
     };
@@ -121,7 +123,7 @@
 
       ctrl.envFromEntries = ctrl.entries || [];
 
-      if(!ctrl.envFromEntries.length) {
+      if (!ctrl.envFromEntries.length) {
         addEntry(ctrl.envFromEntries);
       }
 

diff --git a/app/styles/_kve.less b/app/styles/_kve.less
@@ -115,18 +115,20 @@
     width: (@as-sortable-item-button-width * 2);
   }
 
-  .key-value-editor-entry,
   .environment-from-entry {
     display: table;
     margin-bottom: 15px;
-    padding-right: (@as-sortable-item-button-width * 2);
+    padding-right: 0;
+    @media(max-width: @screen-xxs-max) {
+      padding-right: (@as-sortable-item-button-width * 2);
+    }
     position: relative;
     table-layout: fixed;
     width: 100%;
-    @media(min-width: @screen-md-min)  {
+    @media(min-width: @screen-xs-min)  {
       .environment-from-editor-button {
         float: left;
-        padding-right: 5px;
+        padding: 0 5px;
         position: relative;
         width: auto;
       }
@@ -136,24 +138,38 @@
       margin-bottom: 0;
       padding-right: 5px;
       width: 100%;
-      @media(min-width: @screen-md-min) {
-        width: 50%;
+      @media(min-width: @screen-xs-min) {
+        width: calc(~"50% - 26px"); // Adjust env-from width to match kve input, when env-from row doesn't have padding-right;
+      }
+      &.prefix {
+        padding-right: 0;
+        width: calc(~"50% + 26px"); // Adjust prefix width to match kve input, when env-from row doesn't have padding-right;
+        @media(max-width: @screen-xxs-max) {
+          margin-top: 5px;
+          width: 100%;
+        }
       }
       .faux-input-group,
       .ui-select {
         float: left;
         width: 100%;
       }
     }
-  }
-  .environment-from-entry {
     .environment-from-view-details {
       float: left;
       line-height: 1;
       padding: 6px 0 0;
     }
   }
 
+  .key-value-editor-entry {
+    display: table;
+    margin-bottom: 15px;
+    padding-right: (@as-sortable-item-button-width * 2);
+    position: relative;
+    table-layout: fixed;
+    width: 100%;
+  }
   .key-value-editor-input .ui-select {
     @media(min-width: @screen-md-min) {
       float: left;
@@ -170,7 +186,8 @@
 }
 
 .key-value-editor .key-value-editor-input,
-.key-value-editor-header {
+.key-value-editor-header,
+.environment-from-editor-header {
   float: left;
   margin-bottom: 0;
   padding-right: 5px;

diff --git a/app/views/directives/edit-environment-from.html b/app/views/directives/edit-environment-from.html
@@ -4,10 +4,21 @@
     class="environment-from-entry environment-from-editor-entry-header">
     <div class="form-group environment-from-editor-header value-header">
       <div class="input-group">
-        <span class="help-block">{{$ctrl.selectorPlaceholder}}</span>
+        Config Map/Secret
+      </div>
+    </div>
+    <div class="form-group environment-from-editor-header value-header">
+      <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."></small>
       </div>
     </div>
   </div>
+
   <div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
     <div
       class="environment-from-entry"
@@ -23,8 +34,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.configMapRef.name">config map {{entry.configMapRef.name}}</span>
-            <span ng-if="entry.secretRef.name">secret {{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>
 
@@ -50,27 +62,59 @@
         </div>
       </div>
 
-      <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
-        <span
-          ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
-          class="fa fa-bars sort-row"
-          role="button"
-          aria-label="Move row"
-          aria-grabbed="false"
-          as-sortable-item-handle></span>
-        <a
-          ng-if="!$ctrl.cannotDeleteAny"
-          href=""
-          class="pficon pficon-close delete-row as-sortable-item-delete"
-          role="button"
-          aria-label="Delete row"
-          ng-click="$ctrl.deleteEntry($index, 1)"></a>
-      </div>
-      <div class="environment-from-view-details">
-        <a
-          href=""
-          ng-if="entry.selectedEnvFrom"
-          ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
+      <div class="form-group environment-from-input prefix">
+        <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-pattern="/^[a-zA-Z0-9_]+$/">
+
+          <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">Please enter a valid prefix.</span>
+              <span class="help action-inline">
+                <a
+                  aria-hidden="true"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.">
+                  <span class="pficon pficon-help"></span>
+                </a>
+              </span>
+            </span>
+          </span>
+        </div>
+
+        <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
+          <span
+            ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
+            class="fa fa-bars sort-row"
+            role="button"
+            aria-label="Move row"
+            aria-grabbed="false"
+            as-sortable-item-handle></span>
+          <a
+            ng-if="!$ctrl.cannotDeleteAny"
+            href=""
+            class="pficon pficon-close delete-row as-sortable-item-delete"
+            role="button"
+            aria-label="Delete row"
+            ng-click="$ctrl.deleteEntry($index, 1)"></a>
+        </div>
+
+        <div class="environment-from-view-details">
+          <a
+            ng-if="entry.selectedEnvFrom"
+            href=""
+            ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
+        </div>
       </div>
     </div>
 
@@ -79,7 +123,7 @@
         href=""
         class="add-row-link"
         role="button"
-        ng-click="$ctrl.onAddRow()">{{$ctrl.addRowLink}}</a>
+        ng-click="$ctrl.onAddRow()">Add ALL Values from Config Map or Secret</a>
     </div>
   </div>
 

diff --git a/app/views/directives/edit-environment-variables.html b/app/views/directives/edit-environment-variables.html
@@ -43,9 +43,7 @@ <h4 class="section-label">
     </h4>
     <edit-environment-from
       entries="container.envFrom"
-      selector-placeholder="Config Map/Secret"
       env-from-selector-options="$ctrl.valueFromObjects"
-      add-row-link="Add ALL Values from Config Map or Secret"
       is-readonly="$ctrl.ngReadonly"
       show-header>
     </edit-environment-from>

diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -9232,7 +9232,7 @@ e && e.push(t || {});
 a.onAddRow = function() {
 s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
 }, a.deleteEntry = function(e, t) {
-a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), !a.envFromEntries.length && a.addRowLink && s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
+a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), a.envFromEntries.length || s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
 }, a.hasOptions = function() {
 return !_.isEmpty(a.envFromSelectorOptions);
 }, a.hasEntries = function() {
@@ -9264,7 +9264,7 @@ r.configMapRef = {
 name: n.metadata.name
 }, delete a.envFromEntries[e].secretRef;
 }
-_.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
+t.prefix && (r.prefix = t.prefix), _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
 }, a.updateEntries = function(e) {
 a.entries = _.filter(e, function(e) {
 return e.secretRef || e.configMapRef;
@@ -9296,10 +9296,8 @@ c(), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.ca
 };
 } ],
 bindings: {
-addRowLink: "@",
 entries: "=",
 envFromSelectorOptions: "<",
-selectorPlaceholder: "@",
 isReadonly: "<?"
 },
 templateUrl: "views/directives/edit-environment-from.html"

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -6700,7 +6700,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
     "<div class=\"form-group environment-from-editor-header value-header\">\n" +
     "<div class=\"input-group\">\n" +
-    "<span class=\"help-block\">{{$ctrl.selectorPlaceholder}}</span>\n" +
+    "Config Map/Secret\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<div class=\"form-group environment-from-editor-header value-header\">\n" +
+    "<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
+    "Prefix\n" +
+    "<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
@@ -6713,8 +6719,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
     "Use all keys and values from\n" +
-    "<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" +
-    "<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" +
+    "<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}.</span>\n" +
+    "<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}.</span>\n" +
+    "<span ng-if=\"entry.prefix\">Names will be prefixed with \"{{entry.prefix}}\"</span>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
@@ -6733,16 +6740,32 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<div class=\"form-group environment-from-input prefix\">\n" +
+    "<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) }\">\n" +
+    "<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
+    "<input type=\"text\" class=\"form-control\" placeholder=\"Add prefix\" id=\"envfrom-prefix-{{$index}}\" name=\"envfrom-prefix-{{$index}}\" ng-model=\"entry.prefix\" ng-pattern=\"/^[a-zA-Z0-9_]+$/\">\n" +
+    "<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
+    "<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
+    "<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
+    "<span class=\"help action-inline\">\n" +
+    "<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\">\n" +
+    "<span class=\"pficon pficon-help\"></span>\n" +
+    "</a>\n" +
+    "</span>\n" +
+    "</span>\n" +
+    "</span>\n" +
+    "</div>\n" +
     "<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
     "<span ng-if=\"!$ctrl.cannotSort && $ctrl.entries.length > 1\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" +
     "<a ng-if=\"!$ctrl.cannotDeleteAny\" href=\"\" class=\"pficon pficon-close delete-row as-sortable-item-delete\" role=\"button\" aria-label=\"Delete row\" ng-click=\"$ctrl.deleteEntry($index, 1)\"></a>\n" +
     "</div>\n" +
     "<div class=\"environment-from-view-details\">\n" +
-    "<a href=\"\" ng-if=\"entry.selectedEnvFrom\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
+    "<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
+    "</div>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
-    "<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" +
+    "<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" +
     "</div>\n" +
     "</div>\n" +
     "<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" +
@@ -6796,7 +6819,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "Environment From\n" +
     "<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
     "</h4>\n" +
-    "<edit-environment-from entries=\"container.envFrom\" selector-placeholder=\"Config Map/Secret\" env-from-selector-options=\"$ctrl.valueFromObjects\" add-row-link=\"Add ALL Values from Config Map or Secret\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
+    "<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
     "</edit-environment-from>\n" +
     "</div>\n" +
     "<button class=\"btn btn-default\" ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" ng-click=\"$ctrl.save()\" ng-disabled=\"$ctrl.form.$pristine || $ctrl.form.$invalid\">Save</button>\n" +