Fix issue openshift#1863, kve sort quirks, and bump ng-sortable

- issue openshift#1863 could not pull second-to-last env var below last env var in kve
- issue openshift#620 possibly helped (?)
- bugzilla #1428991 reordering env vars down only works by twos
  - example: third moves to fifth, then seventh
- bugzilla #1369315 possibly helped (?)

I've mentioned 2 additional issues that may be helped by this fix as many quirky behaviors seem to resolve.  That said, I will test more before closing them.

Author: benjaminapetersen

app/styles/_kve.less

@@ -164,14 +164,6 @@
     }
   }
 
-  .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;
@@ -187,23 +179,19 @@
   }
 }
 
-.environment-from-editor-header {
-  &.config-map-header,
-  &.prefix-header {
-    @media(max-width: @screen-xxs-max) {
-      display: none;
-      width: 100%;
-    }
-    &.config-map-header-mobile,
-    &.prefix-header-mobile {
-      display: block;
-      margin-bottom: 0;
-      margin-top: 5px;
-      @media(min-width: @screen-xs-min) {
-        display: none;
-      }
-    }
-  }
+.key-value-editor .key-value-editor-input,
+.key-value-editor-header {
+  float: left;
+  padding-right: 5px;
+  width: 50%;
+}
+
+.key-value-editor-entry-header {
+  padding-right: (@as-sortable-item-button-width * 2);
+}
+
+.key-value-editor-header {
+  margin-bottom: 5px;
 }
 
 .key-value-editor .key-value-editor-input,

app/views/directives/key-value-editor.html

@@ -3,11 +3,15 @@
   <div
     ng-if="showHeader"
     class="key-value-editor-entry key-value-editor-entry-header">
-    <div class="key-value-editor-header key-header">
-      {{keyPlaceholder}}
+    <div class="form-group key-value-editor-header key-header">
+      <div class="input-group">
+        <span class="help-block">{{keyPlaceholder}}</span>
+      </div>
     </div>
-    <div class="key-value-editor-header value-header">
-      {{valuePlaceholder}}
+    <div class="form-group key-value-editor-header value-header">
+      <div class="input-group">
+        <span class="help-block">{{valuePlaceholder}}</span>
+      </div>
     </div>
   </div>
 

dist/scripts/scripts.js

@@ -27587,10 +27587,13 @@ uniqueForKey: r.uniqueForKey,
 uniqueForValue: r.uniqueForValue,
 dragControlListeners: {
 accept: function(e, t) {
-return e.itemScope.sortableScope.$id === t.$id;
+return console.log("accept?"), e.itemScope.sortableScope.$id === t.$id;
 },
 orderChanged: function() {
 t.forms.keyValueEditor.$setDirty();
+},
+itemMoved: function(e) {
+console.log("itemMoved"), console.log("event", e), console.log("source", e.source), console.log("dest", e.dest), e.source.itemScope.modelValue.status = e.dest.sortableScope.$parent.column.name, t.forms.keyValueEditor.$setDirty();
 }
 },
 deleteEntry: function(e, n) {

dist/scripts/templates.js

@@ -8205,8 +8205,19 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   $templateCache.put('views/directives/key-value-editor.html',
     "<ng-form name=\"forms.keyValueEditor\" novalidate ng-if=\"entries\">\n" +
     "<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
+<<<<<<< c496450276b46a24d4cb0af80b3756ee16c504eb
     "<div class=\"key-value-editor-header key-header\">\n" +
     "{{keyPlaceholder}}\n" +
+=======
+    "<div class=\"form-group key-value-editor-header key-header\">\n" +
+    "<div class=\"input-group\">\n" +
+    "<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<div class=\"form-group key-value-editor-header value-header\">\n" +
+    "<div class=\"input-group\">\n" +
+    "<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
+>>>>>>> Fix issue #1863, kve sort quirks, and bump ng-sortable
     "</div>\n" +
     "<div class=\"key-value-editor-header value-header\">\n" +
     "{{valuePlaceholder}}\n" +

dist/scripts/vendor.js

@@ -115645,7 +115645,6 @@ angular.element(r[0].body).unbind("keydown", H);
 }), B = function(e) {
 return "function" == typeof a.sortableScope.options.placeholder ? angular.element(a.sortableScope.options.placeholder(e)) : "string" == typeof a.sortableScope.options.placeholder ? angular.element(a.sortableScope.options.placeholder) : angular.element(r[0].createElement(e.element.prop("tagName")));
 }, x = function(e) {
-e.preventDefault();
 var t, i = function() {
 angular.element(r).unbind("mousemove", o), angular.element(r).unbind("touchmove", o), s.unbind("mouseup", i), s.unbind("touchend", i), s.unbind("touchcancel", i);
 }, o = function(r) {
@@ -115672,7 +115671,7 @@ var s, l, c, f, m;
 if ((!M || !n.isTouchInvalid(o)) && N && p) {
 if (o.preventDefault(), s = n.eventObj(o), a.callbacks.dragMove !== angular.noop && a.sortableScope.$apply(function() {
 a.callbacks.dragMove(v, y, s);
-}), l = s.pageX - r[0].documentElement.scrollLeft, c = s.pageY - (i.pageYOffset || r[0].documentElement.scrollTop), m = angular.element(r[0].elementFromPoint(l, c)), p.addClass(t.hiddenClass), p.removeClass(t.hiddenClass), n.movePosition(s, p, v, y, w, _), p.addClass(t.dragging), !(f = h(m)) || !f.type) return;
+}), l = s.pageX - r[0].documentElement.scrollLeft, c = s.pageY - (i.pageYOffset || r[0].documentElement.scrollTop), p.addClass(t.hiddenClass), m = angular.element(r[0].elementFromPoint(l, c)), p.removeClass(t.hiddenClass), n.movePosition(s, p, v, y, w, _), p.addClass(t.dragging), !(f = h(m)) || !f.type) return;
 if ("handle" === f.type && (f = f.itemScope), "item" !== f.type && "sortable" !== f.type) return;
 if ("item" === f.type && f.accept(a, f.sortableScope, f)) {
 m = f.element;