Simplify Toolbar Link components

2019-04-29 09:19:03 -06:00 · 2019-04-29 09:19:03 -06:00 · 0fb9ba3ee5
parent f2e4892e8e
commit 0fb9ba3ee5
40 changed files with 154 additions and 131 deletions
--- 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({});
--- a/ui/app/components/toolbar-add-button.js
+++ b/ui/app/components/toolbar-add-button.js
@ -1,5 +0,0 @@
-import LinkComponent from '@ember/routing/link-component';
-
-export default LinkComponent.extend({
-  classNames: ['toolbar-button'],
-});
--- a/ui/app/components/toolbar-button.js
+++ b/ui/app/components/toolbar-button.js
@ -1,6 +0,0 @@
-import LinkComponent from '@ember/routing/link-component';
-
-export default LinkComponent.extend({
-  classNames: ['toolbar-button'],
-  glyph: 'chevron-right',
-});
--- 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'],
 });
--- 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({});
--- a/ui/app/components/toolbar-link.js
+++ 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,
+});
--- 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',
 });
--- 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',
 });
--- 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;
--- a/ui/app/templates/components/identity/entity-nav.hbs
+++ b/ui/app/templates/components/identity/entity-nav.hbs
@ -29,18 +29,19 @@
  {{/if}}
  <ToolbarActions>
    {{#if (eq identityType "entity")}}
-      <ToolbarButton
+      <ToolbarLink
        @params={{array "vault.cluster.access.identity.merge" (pluralize identityType)}}
-        data-test-entity-merge-link=true
+        @data-test-entity-merge-link=true
      >
        Merge {{pluralize identityType}}
-      </ToolbarButton>
+      </ToolbarLink>
    {{/if}}
-    <ToolbarButton
+    <ToolbarLink
+      @type="add"
      @params={{array "vault.cluster.access.identity.create" (pluralize identityType)}}
-      data-test-entity-create-link=true
+      @data-test-entity-create-link=true
    >
      Create {{identityType}}
-    </ToolbarButton>
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@ -53,7 +53,7 @@
      >
        <D.trigger
          data-test-popup-menu-trigger="true"
-          @class={{concat "popup-menu-trigger toolbar-button" (if D.isOpen " is-active")}}
+          @class={{concat "popup-menu-trigger toolbar-link" (if D.isOpen " is-active")}}
          @tagName="button"
        >
          History
@ -95,7 +95,7 @@

    {{#if (and (eq mode 'show') canDelete)}}
      <ConfirmAction
-        @buttonClasses="toolbar-button"
+        @buttonClasses="toolbar-link"
        @onConfirmAction={{action "deleteKey"}}
        @confirmMessage={{if isV2
          (concat "This will permanently delete " model.id " and all its versions. Are you sure you want to do this?")
@ -121,7 +121,7 @@
          >
            <D.trigger
              data-test-popup-menu-trigger="true"
-              @class={{concat "toolbar-button" (if D.isOpen " is-active")}}
+              @class={{concat "toolbar-link" (if D.isOpen " is-active")}}
              @tagName="button"
            >
              Copy secret
@ -169,21 +169,22 @@
        {{/unless}}

        {{#if isV2}}
-          <ToolbarAddButton
+          <ToolbarLink
            @params={{array targetRoute model.id (query-params version=this.modelForData.version)}}
            @data-test-secret-edit="true"
            @replace={{true}}
+            @type="add"
          >
            Create new version
-          </ToolbarAddButton>
+          </ToolbarLink>
        {{else}}
-          <ToolbarAddButton
+          <ToolbarLink
            @params={{array targetRoute model.id}}
            @data-test-secret-edit="true"
            @replace={{true}}
          >
            Edit secret
-          </ToolbarAddButton>
+          </ToolbarLink>
        {{/if}}
      {{/let}}
    {{/if}}
--- a/ui/app/templates/components/secret-version-menu.hbs
+++ b/ui/app/templates/components/secret-version-menu.hbs
@ -6,7 +6,7 @@
    >
      <D.trigger
        data-test-popup-menu-trigger="true"
-        @class={{concat "toolbar-button" (if D.isOpen " is-active")}}
+        @class={{concat "toolbar-link" (if D.isOpen " is-active")}}
        @tagName="button"
      >
        {{#if useDefaultTrigger}}
--- a/ui/app/templates/components/toolbar-actions.hbs
+++ b/ui/app/templates/components/toolbar-actions.hbs
@ -0,0 +1,3 @@
+<nav class="toolbar-actions">
+  {{yield}}
+</nav>
--- a/ui/app/templates/components/toolbar-add-button.hbs
+++ b/ui/app/templates/components/toolbar-add-button.hbs
@ -1,2 +0,0 @@
-{{yield}}
-<ICon @glyph="plus-plain" @size=12 />
--- a/ui/app/templates/components/toolbar-button.hbs
+++ b/ui/app/templates/components/toolbar-button.hbs
@ -1,2 +0,0 @@
-{{yield}}
-<ICon @glyph={{glyph}} @size=12 />
--- a/ui/app/templates/components/toolbar-filters.hbs
+++ b/ui/app/templates/components/toolbar-filters.hbs
@ -0,0 +1,3 @@
+<nav class="toolbar-filters">
+  {{yield}}
+</nav>
--- a/ui/app/templates/components/toolbar-link.hbs
+++ b/ui/app/templates/components/toolbar-link.hbs
@ -0,0 +1,17 @@
+<LinkTo
+  @class="toolbar-link"
+  @params={{params}}
+  @data-test-secret-edit={{data-test-secret-edit}}
+  @data-test-secondary-add={{data-test-secondary-add}}
+  @data-test-configure-link={{data-test-configure-link}}
+  @data-test-alias-edit-link={{data-test-alias-edit-link}}
+  @data-test-entity-merge-link={{data-test-entity-merge-link}}
+  @data-test-backend-view-link={{data-test-backend-view-link}}
+  @data-test-entity-create-link={{data-test-entity-create-link}}
+  @data-test-policy-create-link={{data-test-policy-create-link}}
+  @data-test-policy-edit-toggle={{data-test-policy-edit-toggle}}
+  @data-test-secret-backend-configure={{data-test-secret-backend-configure}}
+>
+  {{yield}}
+  <ICon @glyph={{glyph}} @size=12 />
+</LinkTo>
--- a/ui/app/templates/components/toolbar-secret-link.hbs
+++ b/ui/app/templates/components/toolbar-secret-link.hbs
@ -1,17 +1,18 @@
 <SecretLink
-  @class="toolbar-button"
+  @class="toolbar-link"
  @mode={{mode}}
  @secret={{secret}}
  @queryParams={{queryParams}}
-  @data-test-secret-create={{data-test-secret-create}}
-  @data-test-credentials-link={{data-test-credentials-link}}
-  @data-test-backend-credentials={{data-test-backend-credentials}}
  @data-test-edit-link={{data-test-edit-link}}
  @data-test-sign-link={{data-test-sign-link}}
  @data-test-transit-link={{data-test-transit-link}}
-  @data-test-transit-key-actions-link={{data-test-transit-key-actions-link}}
+  @data-test-secret-create={{data-test-secret-create}}
+  @data-test-credentials-link={{data-test-credentials-link}}
+  @data-test-backend-credentials={{data-test-backend-credentials}}
  @data-test-transit-action-link={{data-test-transit-action-link}}
-  @replace={{replace}}>
+  @data-test-transit-key-actions-link={{data-test-transit-key-actions-link}}
+  @replace={{replace}}
+>
  {{yield}}
  <ICon @glyph={{glyph}} @size=12 />
 </SecretLink>
--- 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"
--- 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}}
    <Toolbar>
      <ToolbarActions>
-        <ToolbarButton @params={{array 'vault.cluster.access.control-groups-configure'}}>
+        <ToolbarLink @params={{array 'vault.cluster.access.control-groups-configure'}}>
          Configure
-        </ToolbarButton>
+        </ToolbarLink>
      </ToolbarActions>
    </Toolbar>
  {{/if}}
--- 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}}
    <Toolbar>
      <ToolbarActions>
-        <ToolbarButton @params={{array 'vault.cluster.access.control-groups-configure'}}>
+        <ToolbarLink @params={{array 'vault.cluster.access.control-groups-configure'}}>
          Configure
-        </ToolbarButton>
+        </ToolbarLink>
      </ToolbarActions>
    </Toolbar>
  {{/if}}
--- 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 @@
 </div>
 <Toolbar>
  <ToolbarActions>
-    <ToolbarButton
+    <ToolbarLink
      @params={{array "vault.cluster.access.identity.aliases.edit" model.id}}
-      data-test-alias-edit-link=true
+      @data-test-alias-edit-link=true
    >
      Edit {{lowercase (humanize model.identityType)}}
-    </ToolbarButton>
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>
 {{component (concat 'identity/item-alias/alias-' section) model=model}}
--- a/ui/app/templates/vault/cluster/access/identity/show.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/show.hbs
@ -33,15 +33,20 @@
 <Toolbar>
  <ToolbarActions>
    {{#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}}
+      <ToolbarLink
+        @type="add"
+        @params={{array "vault.cluster.access.identity.aliases.add" (pluralize model.identityType) model.id}}
+        @data-test-entity-create-link=true
+      >
        Add alias
-        {{i-con glyph="chevron-right" size=11}}
-      {{/link-to}}
+      </ToolbarLink>
    {{/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}}
+    <ToolbarLink
+      @params={{array "vault.cluster.access.identity.edit" (pluralize model.identityType) model.id}}
+      @data-test-entity-edit-link=true
+    >
      Edit {{model.identityType}}
-      {{i-con glyph="chevron-right" size=11}}
-    {{/link-to}}
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>
 {{component (concat 'identity/item-' section) model=model}}
--- 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")}}
  <Toolbar>
    <ToolbarActions>
-        <ToolbarButton
+        <ToolbarLink
          @params={{array "vault.cluster.settings.auth.configure" model.id}}
-          data-test-configure-link=true
+          @data-test-configure-link=true
        >
          Configure
-        </ToolbarButton>
+        </ToolbarLink>
    </ToolbarActions>
  </Toolbar>
 {{/if}}
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@ -8,9 +8,12 @@

 <Toolbar>
  <ToolbarActions>
-    <ToolbarButton @params={{array 'vault.cluster.settings.auth.enable'}}>
+    <ToolbarLink
+      @type="add"
+      @params={{array 'vault.cluster.settings.auth.enable'}}
+    >
      Enable new method
-    </ToolbarButton>
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>

--- a/ui/app/templates/vault/cluster/access/namespaces/index.hbs
+++ b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
@ -9,9 +9,12 @@

  <Toolbar>
    <ToolbarActions>
-      <ToolbarButton @params={{array 'vault.cluster.access.namespaces.create'}}>
+      <ToolbarLink
+        @type="add"
+        @params={{array 'vault.cluster.access.namespaces.create'}}
+      >
        Create namespace
-      </ToolbarButton>
+      </ToolbarLink>
    </ToolbarActions>
  </Toolbar>

--- a/ui/app/templates/vault/cluster/policies/create.hbs
+++ b/ui/app/templates/vault/cluster/policies/create.hbs
@ -22,7 +22,7 @@
      <label for="policy-name" class="is-label">Name</label>
      <div class="control">
        <input
-         type="text"nn
+         type="text"
         id="policy-name"
         class="input"
         value={{model.name}}
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@ -38,12 +38,13 @@
        {{/if}}
      </ToolbarFilters>
      <ToolbarActions>
-        <ToolbarButton
+        <ToolbarLink
+          @type="add"
          @params={{array 'vault.cluster.policies.create'}}
-          data-test-policy-create-link=true
+          @data-test-policy-create-link=true
        >
          Create {{uppercase policyType}} policy
-        </ToolbarButton>
+        </ToolbarLink>
      </ToolbarActions>
    </Toolbar>
    {{#each model as |item|}}
--- 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))}}
  <Toolbar>
    <ToolbarActions>
-      <ToolbarButton
+      <ToolbarLink
        @params={{array 'vault.cluster.policy.show' model.id}}
-        data-test-policy-edit-toggle=true
+        @data-test-policy-edit-toggle=true
      >
        Back to policy
-      </ToolbarButton>
+      </ToolbarLink>
      <div class="toolbar-separator" />
      {{#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
--- a/ui/app/templates/vault/cluster/policy/show.hbs
+++ b/ui/app/templates/vault/cluster/policy/show.hbs
@ -23,19 +23,19 @@
 <Toolbar>
  <ToolbarActions>
    <ToolbarDownloadButton
-      @classNames="toolbar-button"
+      @classNames="toolbar-link"
      @actionText="Download policy"
      @extension={{if (eq policyType "acl") model.format "sentinel"}}
      @filename=model.name
      @data=model.policy
    />
    {{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}}
-      <ToolbarButton
+      <ToolbarLink
        @params={{array 'vault.cluster.policy.edit' model.id}}
-        data-test-policy-edit-toggle=true
+        @data-test-policy-edit-toggle=true
      >
        Edit policy
-      </ToolbarButton>
+      </ToolbarLink>
    {{/if}}
  </ToolbarActions>
 </Toolbar>
--- 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 @@
    <ToolbarActions>
      {{#if model.replicationAttrs.knownSecondaries.length}}
        {{#if model.canRevokeSecondary}}
-          <ToolbarButton
+          <ToolbarLink
            @params={{array 'vault.cluster.replication.mode.secondaries.revoke' model.name replicationMode}}
-            data-test-secondary-add=true
          >
            Revoke secondary
-          </ToolbarButton>
+          </ToolbarLink>
        {{/if}}
      {{/if}}
      {{#if model.canAddSecondary}}
-        <ToolbarAddButton
+        <ToolbarLink
+          @type="add"
          @params={{array 'vault.cluster.replication.mode.secondaries.add' model.name replicationMode}}
          @data-test-secondary-add=true
        >
          Add secondary
-        </ToolbarAddButton>
+        </ToolbarLink>
      {{/if}}
    </ToolbarActions>
  </Toolbar>
--- 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"))}}
  <Toolbar>
    <ToolbarActions>
-      <ToolbarButton
+      <ToolbarLink
        @params={{array 'vault.cluster.settings.configure-secret-backend' model.id}}
-        data-test-secret-backend-configure=true
+        @data-test-secret-backend-configure=true
      >
        Configure
-      </ToolbarButton>
+      </ToolbarLink>
    </ToolbarActions>
  </Toolbar>
 {{/if}}
--- a/ui/app/templates/vault/cluster/secrets/backend/list.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/list.hbs
@ -39,7 +39,7 @@
          <ToolbarSecretLink
            @secret=''
            @mode="create"
-            @glyph="plus-plain"
+            @type="add"
            @queryParams={{query-params initialKey=(or filter baseKey.id)}}
            @data-test-secret-create=true
          >
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@ -8,9 +8,12 @@

 <Toolbar>
  <ToolbarActions>
-    <ToolbarAddButton @params={{array 'vault.cluster.settings.mount-secret-backend'}}>
+    <ToolbarLink
+      @type="add"
+      @params={{array 'vault.cluster.settings.mount-secret-backend'}}
+    >
      Enable new engine
-    </ToolbarAddButton>
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>

--- a/ui/app/templates/vault/cluster/settings/auth/configure.hbs
+++ b/ui/app/templates/vault/cluster/settings/auth/configure.hbs
@ -18,12 +18,12 @@

 <Toolbar>
  <ToolbarActions>
-    <ToolbarButton
+    <ToolbarLink
      @params={{array "vault.cluster.access.method" model.id}}
-      data-test-backend-view-link=true
+      @data-test-backend-view-link=true
    >
      View method
-    </ToolbarButton>
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>

--- 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 @@

 <Toolbar>
  <ToolbarActions>
-    <ToolbarButton
+    <ToolbarLink
      @params={{array "vault.cluster.secrets.backend" model.id}}
-      data-test-backend-view-link=true
+      @data-test-backend-view-link=true
    >
      View backend
-    </ToolbarButton>
+    </ToolbarLink>
  </ToolbarActions>
 </Toolbar>

--- 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';
--- a/ui/tests/integration/components/toolbar-add-button-test.js
+++ b/ui/tests/integration/components/toolbar-add-button-test.js
@ -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`<ToolbarAddButton @params={{array "/"}}>Link</ToolbarAddButton>`);
-
-    assert.equal(this.element.textContent.trim(), 'Link');
-    assert.ok(isPresent('.toolbar-button'));
-    assert.ok(isPresent('.icon'));
-  });
-});
--- 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`<ToolbarDownloadButton @actionText="Link" />`);

    assert.equal(this.element.textContent.trim(), 'Link');
-    assert.ok(isPresent('.toolbar-button'));
+    assert.ok(isPresent('.toolbar-link'));
    assert.ok(isPresent('.icon'));
  });
 });
--- a/ui/tests/integration/components/toolbar-button-test.js
+++ b/ui/tests/integration/components/toolbar-button-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`<ToolbarButton @params="/secrets">Link</ToolbarButton>`);
+    await render(hbs`<ToolbarLink @params="/secrets">Link</ToolbarLink>`);

    assert.equal(this.element.textContent.trim(), 'Link');
-    assert.ok(isPresent('.toolbar-button'));
+    assert.ok(isPresent('.toolbar-link'));
    assert.ok(isPresent('.icon'));
  });
 });