kv v2 display bugs (#7307)

* fix switch css

* allow breadcrumbs container to grow if it's overflowed so that it's still usable

* close the dropdowns on destructive actions that cause a route refresh

* use new attachCapabilities for context menus on auth methods to get rid of an error

ui/app/components/secret-link.js

@@ -20,6 +20,7 @@ export function linkParams({ mode, secret, queryParams }) {
 }
 
 export default Component.extend({
+  onLinkClick() {},
   tagName: '',
   // so that ember-test-selectors doesn't log a warning
   supportsDataTestProperties: true,

ui/app/lib/attach-capabilities.js

@@ -34,6 +34,7 @@ export default function attachCapabilities(modelClass, capabilities) {
     return ret;
   }, {});
 
+  //TODO: move this to the application serializer and do it JIT instead of on app boot
   debug(`adding new relationships: ${capabilityKeys.join(', ')} to ${modelClass.toString()}`);
   modelClass.reopen(newRelationships);
   modelClass.reopenClass({

ui/app/models/auth-method.js

@@ -2,19 +2,15 @@ import { alias } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import DS from 'ember-data';
 import { fragment } from 'ember-data-model-fragments/attributes';
-import { queryRecord } from 'ember-computed-query';
 import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 import { memberAction } from 'ember-api-actions';
-import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
+
+import apiPath from 'vault/utils/api-path';
+import attachCapabilities from 'vault/lib/attach-capabilities';
 
 const { attr, hasMany } = DS;
 
-const configPath = function configPath(strings, key) {
-  return function(...values) {
-    return `${strings[0]}${values[key]}${strings[1]}`;
-  };
-};
-export default DS.Model.extend({
+let Model = DS.Model.extend({
   authConfigs: hasMany('auth-config', { polymorphic: true, inverse: 'backend', async: false }),
   path: attr('string'),
   accessor: attr('string'),
@@ -95,29 +91,17 @@ export default DS.Model.extend({
   fieldGroups: computed('formFieldGroups', function() {
     return fieldToAttrs(this, this.get('formFieldGroups'));
   }),
+  canDisable: alias('deletePath.canDelete'),
+  canEdit: alias('configPath.canUpdate'),
+});
 
-  configPathTmpl: computed('type', function() {
-    const type = this.get('type');
-    if (type === 'aws') {
-      return configPath`auth/${0}/config/client`;
+export default attachCapabilities(Model, {
+  deltePath: apiPath`sys/auth/${'id'}`,
+  configPath: function(context) {
+    if (context.type === 'aws') {
+      return apiPath`auth/${'id'}/config/client`;
     } else {
-      return configPath`auth/${0}/config`;
+      return apiPath`auth/${'id'}/config`;
     }
-  }),
-
-  configPath: queryRecord(
-    'capabilities',
-    context => {
-      const { id, configPathTmpl } = context.getProperties('id', 'configPathTmpl');
-      return {
-        id: configPathTmpl(id),
-      };
-    },
-    'id',
-    'configPathTmpl'
-  ),
-
-  deletePath: lazyCapabilities(apiPath`sys/auth/${'id'}`, 'id'),
-  canDisable: alias('deletePath.canDelete'),
-  canEdit: alias('configPath.canUpdate'),
+  },
 });

ui/app/styles/components/toolbar.scss

@@ -26,6 +26,11 @@
   }
 }
 
+.toolbar-label {
+  padding: $spacing-xs;
+  color: $grey;
+}
+
 .toolbar-scroller {
   align-items: center;
   display: flex;

ui/app/styles/core/breadcrumb.scss

@@ -2,7 +2,7 @@
   -ms-user-select: text;
   -webkit-user-select: text;
   user-select: text;
-  height: 1.5rem;
+  min-height: 1.5rem;
   margin: 0;
   overflow-x: auto;
 

ui/app/templates/components/secret-edit.hbs

@@ -66,6 +66,7 @@
                   @mode="versions"
                   @secret={{this.model.id}}
                   @class="has-text-black has-text-weight-semibold has-bottom-shadow"
+                  @onLinkClick={{action D.actions.close}}
                 >
                  View version history
                 </SecretLink>
@@ -75,7 +76,7 @@
             <ul class="menu-list">
               {{#each (reverse this.model.versions) as |secretVersion|}}
               <li class="action">
-                <LinkTo class="link" @params={{array (query-params version=secretVersion.version)}}>
+                <LinkTo class="link" @params={{array (query-params version=secretVersion.version)}} @invokeAction={{action D.actions.close}} >
                   Version {{secretVersion.version}}
                   {{#if (eq secretVersion.version this.model.currentVersion)}}
                     <Icon @glyph="check-circle-outline" class="has-text-success is-pulled-right" />

ui/app/templates/components/secret-link.hbs

@@ -8,6 +8,7 @@
   data-test-transit-link=data-test-transit-link
   data-test-transit-key-actions-link=data-test-transit-key-actions-link
   data-test-transit-action-link=data-test-transit-action-link
+  invokeAction=(action onLinkClick)
 }}
   {{yield}}
 {{/link-to}}

ui/app/templates/components/secret-version-menu.hbs

@@ -39,7 +39,7 @@
                 <li class="action">
                   {{#if this.version.deleted}}
                     {{#if canUndeleteVersion}}
-                      <button type="button" class="link" {{action "deleteVersion" "undelete"}}>
+                      <button type="button" class="link" {{action (queue (action D.actions.close) (action "deleteVersion" "undelete"))}}>
                         Undelete version
                       </button>
                     {{else}}
@@ -52,7 +52,7 @@
                       @buttonClasses="link is-destroy"
                       @confirmTitle="Delete version?"
                       @confirmMessage="This version will no longer be able to be read, but the underlying data will not be removed and can still be undeleted."
-                      @onConfirmAction={{action "deleteVersion" "delete"}}
+                      @onConfirmAction={{action (queue (action D.actions.close) (action "deleteVersion" "delete"))}}
                       data-test-secret-v2-delete="true"
                     >
                       Delete version
@@ -69,7 +69,7 @@
                       @buttonClasses="link is-destroy"
                       @confirmTitle="Permanently delete?"
                       @confirmMessage="This version will no longer be able to be read, and cannot be undeleted."
-                      @onConfirmAction={{action "deleteVersion" "destroy"}}
+                      @onConfirmAction={{action (queue (action D.actions.close) (action "deleteVersion" "destroy"))}}
                       data-test-secret-v2-destroy="true"
                     >
                       Permanently destroy version