Session Delete confirmation button and KV console error message (#4109)

Fix session invalidation in table confirmation dialog, plus console error message when deleting deep KV's

ui-v2/app/mixins/kv/with-actions.js

@@ -2,7 +2,7 @@ import Mixin from '@ember/object/mixin';
 import { get, set } from '@ember/object';
 import WithFeedback from 'consul-ui/mixins/with-feedback';
 
-const transitionToList = function(key, transitionTo) {
+const transitionToList = function(key = '/', transitionTo) {
   if (key === '/') {
     return transitionTo('dc.kv.index');
   } else {
@@ -45,6 +45,7 @@ export default Mixin.create(WithFeedback, {
             .remove(item)
             .then(() => {
               switch (this.routeName) {
+                case 'dc.kv.folder':
                 case 'dc.kv.index':
                   return this.refresh();
                 default:

ui-v2/app/routes/dc/kv/folder.js

@@ -4,9 +4,10 @@ import Route from './index';
 export default Route.extend({
   templateName: 'dc/kv/index',
   beforeModel: function(transition) {
+    this._super(...arguments);
     const params = this.paramsFor('dc.kv.folder');
     if (params.key === '/' || params.key == null) {
-      this.transitionTo('dc.kv.index');
+      return this.transitionTo('dc.kv.index');
     }
   },
 });

ui-v2/app/routes/dc/kv/index.js

@@ -13,22 +13,24 @@ export default Route.extend(WithKvActions, {
     return hash({
       isLoading: false,
       parent: repo.findBySlug(key, dc),
-    })
-      .then(function(model) {
-        return hash({
-          ...model,
-          ...{
-            items: repo.findAllBySlug(get(model.parent, 'Key'), dc),
-          },
-        });
-      })
-      .catch(e => {
-        if (e.errors && e.errors[0] && e.errors[0].status == '404') {
-          this.transitionTo('dc.kv.index');
-          return;
-        }
-        throw e;
+    }).then(model => {
+      return hash({
+        ...model,
+        ...{
+          items: repo.findAllBySlug(get(model.parent, 'Key'), dc).catch(e => {
+            return this.transitionTo('dc.kv.index');
+          }),
+        },
       });
+    });
+  },
+  actions: {
+    error: function(e) {
+      if (e.errors && e.errors[0] && e.errors[0].status == '404') {
+        return this.transitionTo('dc.kv.index');
+      }
+      throw e;
+    },
   },
   setupController: function(controller, model) {
     this._super(...arguments);

ui-v2/app/services/feedback.js

@@ -16,10 +16,17 @@ export default Service.extend({
         });
       })
       .catch(e => {
-        get(this, 'flashMessages').add({
-          type: 'error',
-          message: error,
-        });
+        if (e.name === 'TransitionAborted') {
+          get(this, 'flashMessages').add({
+            type: 'success',
+            message: success,
+          });
+        } else {
+          get(this, 'flashMessages').add({
+            type: 'error',
+            message: error,
+          });
+        }
       })
       .finally(function() {
         controller.set('isLoading', false);

ui-v2/app/services/kv.js

@@ -10,9 +10,14 @@ export default Service.extend({
   // this one gives you the full object so key,values and meta
   findBySlug: function(key, dc) {
     if (isFolder(key)) {
-      return Promise.resolve({
-        Key: key,
-      });
+      const id = JSON.stringify([dc, key]);
+      let item = get(this, 'store').peekRecord('kv', id);
+      if (!item) {
+        item = this.create();
+        set(item, 'Key', key);
+        set(item, 'Datacenter', dc);
+      }
+      return Promise.resolve(item);
     }
     return get(this, 'store')
       .queryRecord('kv', {
@@ -45,6 +50,16 @@ export default Service.extend({
             set(item, 'Datacenter', dc);
             return item;
           });
+      })
+      .catch(e => {
+        if (e.errors && e.errors[0] && e.errors[0].status == '404') {
+          const id = JSON.stringify([dc, key]);
+          const record = get(this, 'store').peekRecord('kv', id);
+          if (record) {
+            record.destroyRecord();
+          }
+        }
+        throw e;
       });
   },
   create: function() {
@@ -66,6 +81,6 @@ export default Service.extend({
     });
   },
   invalidate: function() {
-    get(this, 'store').unloadAll('kv');
+    return get(this, 'store').unloadAll('kv');
   },
 });

ui-v2/app/styles/components/confirmation-dialog.scss

@@ -1,6 +1,9 @@
 div.with-confirmation {
   @extend %confirmation-dialog, %confirmation-dialog-inline;
 }
+table div.with-confirmation.confirming {
+  background-color: $white;
+}
 %confirmation-dialog-inline p {
   color: $text-note;
 }
@@ -16,3 +19,7 @@ div.with-confirmation {
   align-items: center;
   line-height: 1;
 }
+table div.with-confirmation.confirming {
+  position: absolute;
+  right: 0;
+}

ui-v2/app/templates/dc/nodes/-sessions.hbs

@@ -38,10 +38,11 @@
                         {{#block-slot 'action' as |confirm|}}
                             <button type="button" class="type-delete" {{action confirm 'invalidateSession' item}}>Invalidate</button>
                         {{/block-slot}}
-                        {{#block-slot 'dialog'}}
+                        {{#block-slot 'dialog' as |execute cancel message|}}
                             <p>
-                                Are you sure you want to invalidate {{item.ID}}?
+                                {{message}}
                             </p>
+                            <button type="button" class="type-delete" {{action execute}}>Confirm Invalidate</button>
                             <button type="button" class="type-cancel" {{ action cancel}}>Cancel</button>
                         {{/block-slot}}
                     {{/confirmation-dialog}}