From 0fb9ba3ee54b58a840d56012099ed2c82691715b Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Mon, 29 Apr 2019 09:19:03 -0600 Subject: [PATCH] Simplify Toolbar Link components --- ui/app/components/toolbar-actions.js | 6 ++---- ui/app/components/toolbar-add-button.js | 5 ----- ui/app/components/toolbar-button.js | 6 ------ ui/app/components/toolbar-download-button.js | 2 +- ui/app/components/toolbar-filters.js | 6 ++---- ui/app/components/toolbar-link.js | 14 ++++++++++++++ ui/app/components/toolbar-secret-link.js | 15 +++++++++++---- ui/app/components/toolbar.js | 4 ++-- ui/app/styles/components/toolbar.scss | 15 +++++++-------- .../components/identity/entity-nav.hbs | 13 +++++++------ ui/app/templates/components/secret-edit.hbs | 15 ++++++++------- .../components/secret-version-menu.hbs | 2 +- ui/app/templates/components/toolbar-actions.hbs | 3 +++ .../templates/components/toolbar-add-button.hbs | 2 -- ui/app/templates/components/toolbar-button.hbs | 2 -- ui/app/templates/components/toolbar-filters.hbs | 3 +++ ui/app/templates/components/toolbar-link.hbs | 17 +++++++++++++++++ .../components/toolbar-secret-link.hbs | 13 +++++++------ .../components/transit-key-actions.hbs | 2 +- .../cluster/access/control-group-accessor.hbs | 4 ++-- .../vault/cluster/access/control-groups.hbs | 4 ++-- .../cluster/access/identity/aliases/show.hbs | 6 +++--- .../vault/cluster/access/identity/show.hbs | 17 +++++++++++------ .../vault/cluster/access/method/section.hbs | 6 +++--- .../templates/vault/cluster/access/methods.hbs | 7 +++++-- .../vault/cluster/access/namespaces/index.hbs | 7 +++++-- .../templates/vault/cluster/policies/create.hbs | 2 +- .../templates/vault/cluster/policies/index.hbs | 7 ++++--- ui/app/templates/vault/cluster/policy/edit.hbs | 8 ++++---- ui/app/templates/vault/cluster/policy/show.hbs | 8 ++++---- .../replication/mode/secondaries/index.hbs | 10 +++++----- .../cluster/secrets/backend/configuration.hbs | 6 +++--- .../vault/cluster/secrets/backend/list.hbs | 2 +- .../vault/cluster/secrets/backends.hbs | 7 +++++-- .../vault/cluster/settings/auth/configure.hbs | 6 +++--- .../settings/configure-secret-backend.hbs | 6 +++--- .../integration/components/auth-jwt-test.js | 2 -- .../components/toolbar-add-button-test.js | 17 ----------------- .../components/toolbar-download-button-test.js | 2 +- ...lbar-button-test.js => toolbar-link-test.js} | 6 +++--- 40 files changed, 154 insertions(+), 131 deletions(-) delete mode 100644 ui/app/components/toolbar-add-button.js delete mode 100644 ui/app/components/toolbar-button.js create mode 100644 ui/app/components/toolbar-link.js create mode 100644 ui/app/templates/components/toolbar-actions.hbs delete mode 100644 ui/app/templates/components/toolbar-add-button.hbs delete mode 100644 ui/app/templates/components/toolbar-button.hbs create mode 100644 ui/app/templates/components/toolbar-filters.hbs create mode 100644 ui/app/templates/components/toolbar-link.hbs delete mode 100644 ui/tests/integration/components/toolbar-add-button-test.js rename ui/tests/integration/components/{toolbar-button-test.js => toolbar-link-test.js} (68%) diff --git a/ui/app/components/toolbar-actions.js b/ui/app/components/toolbar-actions.js index 6598f3cae..2f278cc52 100644 --- a/ui/app/components/toolbar-actions.js +++ b/ui/app/components/toolbar-actions.js @@ -1,5 +1,3 @@ -import Component from '@ember/component'; +import OuterHTML from './outer-html'; -export default Component.extend({ - classNames: ['toolbar-actions'], -}); +export default OuterHTML.extend({}); diff --git a/ui/app/components/toolbar-add-button.js b/ui/app/components/toolbar-add-button.js deleted file mode 100644 index dce4298eb..000000000 --- a/ui/app/components/toolbar-add-button.js +++ /dev/null @@ -1,5 +0,0 @@ -import LinkComponent from '@ember/routing/link-component'; - -export default LinkComponent.extend({ - classNames: ['toolbar-button'], -}); diff --git a/ui/app/components/toolbar-button.js b/ui/app/components/toolbar-button.js deleted file mode 100644 index d32cada22..000000000 --- a/ui/app/components/toolbar-button.js +++ /dev/null @@ -1,6 +0,0 @@ -import LinkComponent from '@ember/routing/link-component'; - -export default LinkComponent.extend({ - classNames: ['toolbar-button'], - glyph: 'chevron-right', -}); diff --git a/ui/app/components/toolbar-download-button.js b/ui/app/components/toolbar-download-button.js index f465025a5..672bc02b3 100644 --- a/ui/app/components/toolbar-download-button.js +++ b/ui/app/components/toolbar-download-button.js @@ -1,5 +1,5 @@ import DownloadButton from './download-button'; export default DownloadButton.extend({ - classNames: ['toolbar-button'], + classNames: ['toolbar-link'], }); diff --git a/ui/app/components/toolbar-filters.js b/ui/app/components/toolbar-filters.js index 81d6a06b4..2f278cc52 100644 --- a/ui/app/components/toolbar-filters.js +++ b/ui/app/components/toolbar-filters.js @@ -1,5 +1,3 @@ -import Component from '@ember/component'; +import OuterHTML from './outer-html'; -export default Component.extend({ - classNames: ['toolbar-filters'], -}); +export default OuterHTML.extend({}); diff --git a/ui/app/components/toolbar-link.js b/ui/app/components/toolbar-link.js new file mode 100644 index 000000000..b3836393e --- /dev/null +++ b/ui/app/components/toolbar-link.js @@ -0,0 +1,14 @@ +import OuterHTML from './outer-html'; +import { computed } from '@ember/object'; + +export default OuterHTML.extend({ + glyph: computed('type', function() { + if (this.type == 'add') { + return 'plus-plain'; + } else { + return 'chevron-right'; + } + }), + tagName: 'span', + type: null, +}); diff --git a/ui/app/components/toolbar-secret-link.js b/ui/app/components/toolbar-secret-link.js index 2f2732a7a..364169b99 100644 --- a/ui/app/components/toolbar-secret-link.js +++ b/ui/app/components/toolbar-secret-link.js @@ -1,6 +1,13 @@ -import SecretLink from './secret-link'; +import OuterHTML from './outer-html'; +import { computed } from '@ember/object'; -export default SecretLink.extend({ - class: 'toolbar-button', - glyph: 'chevron-right', +export default OuterHTML.extend({ + glyph: computed('type', function() { + if (this.type == 'add') { + return 'plus-plain'; + } else { + return 'chevron-right'; + } + }), + tagName: 'span', }); diff --git a/ui/app/components/toolbar.js b/ui/app/components/toolbar.js index f190dd7f6..d24354b9c 100644 --- a/ui/app/components/toolbar.js +++ b/ui/app/components/toolbar.js @@ -1,6 +1,6 @@ -import Component from '@ember/component'; +import OuterHTML from './outer-html'; -export default Component.extend({ +export default OuterHTML.extend({ classNames: ['toolbar'], tagName: 'nav', }); diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss index b653d354f..78f292d07 100644 --- a/ui/app/styles/components/toolbar.scss +++ b/ui/app/styles/components/toolbar.scss @@ -4,20 +4,19 @@ .toolbar { background-color: $ui-gray-010; - border: 1px solid $ui-gray-200; + border: 1px solid $ui-gray-100; border-bottom-color: $ui-gray-300; border-top-color: $ui-gray-300; position: relative; &::after { - background: linear-gradient(to right, rgba($ui-gray-010, 0), $ui-gray-010); - border-radius: $radius-large; - bottom: 1px; + background: linear-gradient(to right, $ui-gray-010, rgba($ui-gray-010, 0)); + bottom: 0; content: ''; position: absolute; - right: 1px; - top: 1px; - width: $spacing-s; + right: 0; + top: 0; + width: $spacing-xxs; z-index: 2; } @@ -72,7 +71,7 @@ } } -.toolbar-button { +.toolbar-link { @extend .button; @extend .is-ghost; @extend .has-icon-right; diff --git a/ui/app/templates/components/identity/entity-nav.hbs b/ui/app/templates/components/identity/entity-nav.hbs index 475b13ec6..786a7759e 100644 --- a/ui/app/templates/components/identity/entity-nav.hbs +++ b/ui/app/templates/components/identity/entity-nav.hbs @@ -29,18 +29,19 @@ {{/if}} {{#if (eq identityType "entity")}} - Merge {{pluralize identityType}} - + {{/if}} - Create {{identityType}} - + diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs index be11ad9c6..9b2ad0ba6 100644 --- a/ui/app/templates/components/secret-edit.hbs +++ b/ui/app/templates/components/secret-edit.hbs @@ -53,7 +53,7 @@ > History @@ -95,7 +95,7 @@ {{#if (and (eq mode 'show') canDelete)}} Copy secret @@ -169,21 +169,22 @@ {{/unless}} {{#if isV2}} - Create new version - + {{else}} - Edit secret - + {{/if}} {{/let}} {{/if}} diff --git a/ui/app/templates/components/secret-version-menu.hbs b/ui/app/templates/components/secret-version-menu.hbs index d1ac066e0..2c33bfcd0 100644 --- a/ui/app/templates/components/secret-version-menu.hbs +++ b/ui/app/templates/components/secret-version-menu.hbs @@ -6,7 +6,7 @@ > {{#if useDefaultTrigger}} diff --git a/ui/app/templates/components/toolbar-actions.hbs b/ui/app/templates/components/toolbar-actions.hbs new file mode 100644 index 000000000..8b2d0d75e --- /dev/null +++ b/ui/app/templates/components/toolbar-actions.hbs @@ -0,0 +1,3 @@ + diff --git a/ui/app/templates/components/toolbar-add-button.hbs b/ui/app/templates/components/toolbar-add-button.hbs deleted file mode 100644 index 817b763c8..000000000 --- a/ui/app/templates/components/toolbar-add-button.hbs +++ /dev/null @@ -1,2 +0,0 @@ -{{yield}} - diff --git a/ui/app/templates/components/toolbar-button.hbs b/ui/app/templates/components/toolbar-button.hbs deleted file mode 100644 index 71cdc8451..000000000 --- a/ui/app/templates/components/toolbar-button.hbs +++ /dev/null @@ -1,2 +0,0 @@ -{{yield}} - diff --git a/ui/app/templates/components/toolbar-filters.hbs b/ui/app/templates/components/toolbar-filters.hbs new file mode 100644 index 000000000..b91a88c7b --- /dev/null +++ b/ui/app/templates/components/toolbar-filters.hbs @@ -0,0 +1,3 @@ + diff --git a/ui/app/templates/components/toolbar-link.hbs b/ui/app/templates/components/toolbar-link.hbs new file mode 100644 index 000000000..9d443c6cd --- /dev/null +++ b/ui/app/templates/components/toolbar-link.hbs @@ -0,0 +1,17 @@ + + {{yield}} + + diff --git a/ui/app/templates/components/toolbar-secret-link.hbs b/ui/app/templates/components/toolbar-secret-link.hbs index cb093476d..db13edb5f 100644 --- a/ui/app/templates/components/toolbar-secret-link.hbs +++ b/ui/app/templates/components/toolbar-secret-link.hbs @@ -1,17 +1,18 @@ + @data-test-transit-key-actions-link={{data-test-transit-key-actions-link}} + @replace={{replace}} +> {{yield}} diff --git a/ui/app/templates/components/transit-key-actions.hbs b/ui/app/templates/components/transit-key-actions.hbs index 6dacda8fc..a8d333249 100644 --- a/ui/app/templates/components/transit-key-actions.hbs +++ b/ui/app/templates/components/transit-key-actions.hbs @@ -1,7 +1,7 @@ {{#if (eq selectedAction 'rotate')}} {{#if key.canRotate}} {{#confirm-action - buttonClasses="toolbar-button" + buttonClasses="toolbar-link" onConfirmAction=(action "doSubmit") confirmMessage=(concat 'Are you sure you want to rotate "' key.id '"?') confirmButtonText="Confirm rotation" diff --git a/ui/app/templates/vault/cluster/access/control-group-accessor.hbs b/ui/app/templates/vault/cluster/access/control-group-accessor.hbs index bd05998e2..5553dd241 100644 --- a/ui/app/templates/vault/cluster/access/control-group-accessor.hbs +++ b/ui/app/templates/vault/cluster/access/control-group-accessor.hbs @@ -9,9 +9,9 @@ {{#if model.canConfigure}} - + Configure - + {{/if}} diff --git a/ui/app/templates/vault/cluster/access/control-groups.hbs b/ui/app/templates/vault/cluster/access/control-groups.hbs index af837d1ab..d18510ae2 100644 --- a/ui/app/templates/vault/cluster/access/control-groups.hbs +++ b/ui/app/templates/vault/cluster/access/control-groups.hbs @@ -9,9 +9,9 @@ {{#if model.canConfigure}} - + Configure - + {{/if}} diff --git a/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs b/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs index c6a0e4986..cfe438dda 100644 --- a/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs +++ b/ui/app/templates/vault/cluster/access/identity/aliases/show.hbs @@ -32,12 +32,12 @@ - Edit {{lowercase (humanize model.identityType)}} - + {{component (concat 'identity/item-alias/alias-' section) model=model}} diff --git a/ui/app/templates/vault/cluster/access/identity/show.hbs b/ui/app/templates/vault/cluster/access/identity/show.hbs index 2b39d51d5..e5502262a 100644 --- a/ui/app/templates/vault/cluster/access/identity/show.hbs +++ b/ui/app/templates/vault/cluster/access/identity/show.hbs @@ -33,15 +33,20 @@ {{#unless (or (and (eq model.identityType "group") (eq model.type "internal")) model.alias)}} - {{#link-to "vault.cluster.access.identity.aliases.add" (pluralize model.identityType) model.id class="button has-icon-right is-ghost is-compact" data-test-entity-create-link=true}} + Add alias - {{i-con glyph="chevron-right" size=11}} - {{/link-to}} + {{/unless}} - {{#link-to "vault.cluster.access.identity.edit" (pluralize model.identityType) model.id class="button has-icon-right is-ghost is-compact" data-test-entity-edit-link=true}} + Edit {{model.identityType}} - {{i-con glyph="chevron-right" size=11}} - {{/link-to}} + {{component (concat 'identity/item-' section) model=model}} diff --git a/ui/app/templates/vault/cluster/access/method/section.hbs b/ui/app/templates/vault/cluster/access/method/section.hbs index 896056ad6..f29245135 100644 --- a/ui/app/templates/vault/cluster/access/method/section.hbs +++ b/ui/app/templates/vault/cluster/access/method/section.hbs @@ -19,12 +19,12 @@ {{#if (eq section "configuration")}} - Configure - + {{/if}} diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs index 41f83e8d5..9890142ce 100644 --- a/ui/app/templates/vault/cluster/access/methods.hbs +++ b/ui/app/templates/vault/cluster/access/methods.hbs @@ -8,9 +8,12 @@ - + Enable new method - + diff --git a/ui/app/templates/vault/cluster/access/namespaces/index.hbs b/ui/app/templates/vault/cluster/access/namespaces/index.hbs index 8d1f2a54d..1f7fbe480 100644 --- a/ui/app/templates/vault/cluster/access/namespaces/index.hbs +++ b/ui/app/templates/vault/cluster/access/namespaces/index.hbs @@ -9,9 +9,12 @@ - + Create namespace - + diff --git a/ui/app/templates/vault/cluster/policies/create.hbs b/ui/app/templates/vault/cluster/policies/create.hbs index 65cce4dcd..55cad3f97 100644 --- a/ui/app/templates/vault/cluster/policies/create.hbs +++ b/ui/app/templates/vault/cluster/policies/create.hbs @@ -22,7 +22,7 @@
- Create {{uppercase policyType}} policy - + {{#each model as |item|}} diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs index a9456a0e4..ee7247045 100644 --- a/ui/app/templates/vault/cluster/policy/edit.hbs +++ b/ui/app/templates/vault/cluster/policy/edit.hbs @@ -23,16 +23,16 @@ {{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}} - Back to policy - +
{{#if (and (not-eq model.id "default") capabilities.canDelete)}} {{#confirm-action - buttonClasses="toolbar-button" + buttonClasses="toolbar-link" onConfirmAction=(action "deletePolicy" model) confirmMessage=(concat "Are you sure you want to delete " model.id "?") data-test-policy-delete=true diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs index e078d6a8b..55169a909 100644 --- a/ui/app/templates/vault/cluster/policy/show.hbs +++ b/ui/app/templates/vault/cluster/policy/show.hbs @@ -23,19 +23,19 @@ {{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}} - Edit policy - + {{/if}} diff --git a/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs b/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs index c92985992..1819b95aa 100644 --- a/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs +++ b/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs @@ -3,21 +3,21 @@ {{#if model.replicationAttrs.knownSecondaries.length}} {{#if model.canRevokeSecondary}} - Revoke secondary - + {{/if}} {{/if}} {{#if model.canAddSecondary}} - Add secondary - + {{/if}} diff --git a/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs b/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs index 3d987c1cf..5e0541b7f 100644 --- a/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs +++ b/ui/app/templates/vault/cluster/secrets/backend/configuration.hbs @@ -3,12 +3,12 @@ {{#if (or (eq model.type "aws") (eq model.type "ssh") (eq model.type "pki"))}} - Configure - + {{/if}} diff --git a/ui/app/templates/vault/cluster/secrets/backend/list.hbs b/ui/app/templates/vault/cluster/secrets/backend/list.hbs index 0d8e9ab67..158f38ddd 100644 --- a/ui/app/templates/vault/cluster/secrets/backend/list.hbs +++ b/ui/app/templates/vault/cluster/secrets/backend/list.hbs @@ -39,7 +39,7 @@ diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs index 446de615a..b3afe17f1 100644 --- a/ui/app/templates/vault/cluster/secrets/backends.hbs +++ b/ui/app/templates/vault/cluster/secrets/backends.hbs @@ -8,9 +8,12 @@ - + Enable new engine - + diff --git a/ui/app/templates/vault/cluster/settings/auth/configure.hbs b/ui/app/templates/vault/cluster/settings/auth/configure.hbs index 0f9ef057d..a3b5d69ee 100644 --- a/ui/app/templates/vault/cluster/settings/auth/configure.hbs +++ b/ui/app/templates/vault/cluster/settings/auth/configure.hbs @@ -18,12 +18,12 @@ - View method - + diff --git a/ui/app/templates/vault/cluster/settings/configure-secret-backend.hbs b/ui/app/templates/vault/cluster/settings/configure-secret-backend.hbs index c22815103..76567a7fe 100644 --- a/ui/app/templates/vault/cluster/settings/configure-secret-backend.hbs +++ b/ui/app/templates/vault/cluster/settings/configure-secret-backend.hbs @@ -16,12 +16,12 @@ - View backend - + diff --git a/ui/tests/integration/components/auth-jwt-test.js b/ui/tests/integration/components/auth-jwt-test.js index 3c09ae459..60f5e3bd1 100644 --- a/ui/tests/integration/components/auth-jwt-test.js +++ b/ui/tests/integration/components/auth-jwt-test.js @@ -51,8 +51,6 @@ const OIDC_AUTH_RESPONSE = { }, }; -const WAIT_TIME = 50; - const routerStub = Service.extend({ urlFor() { return 'http://example.com'; diff --git a/ui/tests/integration/components/toolbar-add-button-test.js b/ui/tests/integration/components/toolbar-add-button-test.js deleted file mode 100644 index 87c78a92d..000000000 --- a/ui/tests/integration/components/toolbar-add-button-test.js +++ /dev/null @@ -1,17 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { isPresent } from 'ember-cli-page-object'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | toolbar-add-button', function(hooks) { - setupRenderingTest(hooks); - - test('it renders', async function(assert) { - await render(hbs`Link`); - - assert.equal(this.element.textContent.trim(), 'Link'); - assert.ok(isPresent('.toolbar-button')); - assert.ok(isPresent('.icon')); - }); -}); diff --git a/ui/tests/integration/components/toolbar-download-button-test.js b/ui/tests/integration/components/toolbar-download-button-test.js index ae11c3ff4..0453c2621 100644 --- a/ui/tests/integration/components/toolbar-download-button-test.js +++ b/ui/tests/integration/components/toolbar-download-button-test.js @@ -11,7 +11,7 @@ module('Integration | Component | toolbar-download-button', function(hooks) { await render(hbs``); assert.equal(this.element.textContent.trim(), 'Link'); - assert.ok(isPresent('.toolbar-button')); + assert.ok(isPresent('.toolbar-link')); assert.ok(isPresent('.icon')); }); }); diff --git a/ui/tests/integration/components/toolbar-button-test.js b/ui/tests/integration/components/toolbar-link-test.js similarity index 68% rename from ui/tests/integration/components/toolbar-button-test.js rename to ui/tests/integration/components/toolbar-link-test.js index c883f96bd..95404ec8c 100644 --- a/ui/tests/integration/components/toolbar-button-test.js +++ b/ui/tests/integration/components/toolbar-link-test.js @@ -4,14 +4,14 @@ import { render } from '@ember/test-helpers'; import { isPresent } from 'ember-cli-page-object'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | toolbar-button', function(hooks) { +module('Integration | Component | toolbar-link', function(hooks) { setupRenderingTest(hooks); test('it renders', async function(assert) { - await render(hbs`Link`); + await render(hbs`Link`); assert.equal(this.element.textContent.trim(), 'Link'); - assert.ok(isPresent('.toolbar-button')); + assert.ok(isPresent('.toolbar-link')); assert.ok(isPresent('.icon')); }); });