Merge pull request #56 from hashicorp/ICU-307-link-button-integration

Replace "New" projects and host catalog link with rose link-button component

addons/rose/addon/components/rose/link-button.js

@@ -1,14 +1,26 @@
-import Component from '@ember/component';
+import LinkComponent from '@ember/routing/link-component';
 import layout from '../../templates/components/rose/link-button';
+import { computed } from '@ember/object';
 
 /**
  * An achor element based on `rose-button` component styles
+ * An empty model cannot be passed in to `link-to` component when a route
+ * is defined. Thus, `link-to` component is used to generate this component.
  *
  * @example
  *  <Rose::LinkButton @submit={{true}} @style="primary">Save</Rose::LinkButton>
  *  <Rose::LinkButton @disabled={{true}} @style="secondary">Disabled</Rose::LinkButton>
  */
-export default Component.extend({
+export default LinkComponent.extend({
   layout,
-  tagName: '',
+  classNames: ['rose-link-button'],
+  classNameBindings: [
+    'linkButtonStyle',
+    'iconOnly:has-icon-only',
+    'iconLeft:has-icon-left',
+    'iconRight:has-icon-right',
+  ],
+  linkButtonStyle: computed(function () {
+    return this.style ? `rose-button-${this.style}` : '';
+  }),
 });

addons/rose/addon/components/rose/link-button.stories.mdx

@@ -12,7 +12,7 @@ Styles supported: primary, secondary, warning, and ghost.
 Disabling link button is not supported as it is an action on form components only.
 
 ```html
-<Rose::LinkButton @style="primary" @iconRight="chevron-right">
+<Rose::LinkButton @route="index" @style="primary" @iconRight="chevron-right">
   Content
 </Rose::LinkButton>
 ```
@@ -21,6 +21,7 @@ Disabling link button is not supported as it is an action on form components onl
   <Story name="Advanced">{{
     template: hbs`
       <Rose::LinkButton
+        @route="index"
         @style={{style}}
         @iconLeft={{iconLeft}}
         @iconRight={{iconRight}}
@@ -67,13 +68,13 @@ Disabling link button is not supported as it is an action on form components onl
 Similar to `Rose::Button`, icon only link button is supported.
 
 ```html
-<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
+<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
 ```
 
 <Preview>
   <Story name="Icon Only">{{
     template: hbs`
-    <Rose::LinkButton @style={{style}} @iconOnly={{iconOnly}} />
+    <Rose::LinkButton @route="" @style={{style}} @iconOnly={{iconOnly}} />
     `,
     context: {
       style: select(

addons/rose/addon/templates/components/rose/link-button.hbs

@@ -1,34 +1,26 @@
-<LinkTo
-  ...attributes
-  @route={{@route}}
-  @model={{@model}}
-  class="rose-link-button {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
-  >
+<span class="rose-button-wrapper">
+  {{#if @iconLeft}}
+    <Rose::Icon
+      @name={{@iconLeft}}
+      @size="medium"
+    />
+  {{/if}}
 
-  <span class="rose-button-wrapper">
-    {{#if @iconLeft}}
-      <Rose::Icon
-        @name={{@iconLeft}}
-        @size="medium"
-      />
-    {{/if}}
-
-    <span class="rose-button-body">
-      {{yield}}
-    </span>
-
-    {{#if @iconOnly}}
-      <Rose::Icon
-        @name={{@iconOnly}}
-        @size="medium"
-      />
-    {{/if}}
-
-    {{#if @iconRight}}
-      <Rose::Icon
-        @name={{@iconRight}}
-        @size="medium"
-      />
-    {{/if}}
+  <span class="rose-button-body">
+    {{yield}}
   </span>
-</LinkTo>
+
+  {{#if @iconOnly}}
+    <Rose::Icon
+      @name={{@iconOnly}}
+      @size="medium"
+    />
+  {{/if}}
+
+  {{#if @iconRight}}
+    <Rose::Icon
+      @name={{@iconRight}}
+      @size="medium"
+    />
+  {{/if}}
+</span>

addons/rose/tests/dummy/app/templates/index.hbs

@@ -1,9 +1,9 @@
-<Rose::LinkButton @style="primary">Primary</Rose::LinkButton>
-<Rose::LinkButton @style="secondary">Secondary</Rose::LinkButton>
-<Rose::LinkButton @style="warning">Warning</Rose::LinkButton>
-<Rose::LinkButton @style="ghost">Ghost</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="primary">Primary</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="secondary">Secondary</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="warning">Warning</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="ghost">Ghost</Rose::LinkButton>
 <br />
 
-<Rose::LinkButton @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
-<Rose::LinkButton @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
-<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
+<Rose::LinkButton @route="index" @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
+<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />

addons/rose/tests/integration/components/rose/link-button-test.js

@@ -7,19 +7,19 @@ module('Integration | Component | rose/link-button', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::LinkButton />`);
+    await render(hbs`<Rose::LinkButton @route="index" />`);
     assert.ok(find('a'));
     assert.notOk(find('.rose-button'));
     assert.ok(find('.rose-link-button'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::LinkButton id="link-button"/>`);
+    await render(hbs`<Rose::LinkButton @route="index" id="link-button"/>`);
     assert.ok(find('#link-button'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::LinkButton>Link button content</Rose::LinkButton>`);
+    await render(hbs`<Rose::LinkButton @route="index">Link button content</Rose::LinkButton>`);
     assert.ok(
       find('.rose-link-button').textContent.trim(),
       'Link button content'
@@ -27,28 +27,24 @@ module('Integration | Component | rose/link-button', function (hooks) {
   });
 
   test('it renders with rose button styles', async function (assert) {
-    this.set('style', 'primary');
-    await render(hbs`<Rose::LinkButton @style={{this.style}}/>`);
-    assert.ok(find(`.rose-button-primary`));
-
-    this.set('style', 'sample');
+    await render(hbs`<Rose::LinkButton @route="index" @style="sample"/>`);
     assert.ok(find(`.rose-button-sample`));
   });
 
   test('it supports left icon with @iconLeft', async function (assert) {
-    await render(hbs`<Rose::LinkButton @iconLeft="chevron-left" />`);
+    await render(hbs`<Rose::LinkButton @route="index" @iconLeft="chevron-left" />`);
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-left'));
   });
 
   test('it supports left icon with @iconRight', async function (assert) {
-    await render(hbs`<Rose::LinkButton @iconRight="chevron-right" />`);
+    await render(hbs`<Rose::LinkButton @route="index" @iconRight="chevron-right" />`);
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-right'));
   });
 
   test('it supports only icon with @iconOnly', async function (assert) {
-    await render(hbs`<Rose::LinkButton @iconOnly="help-circle-outline" />`);
+    await render(hbs`<Rose::LinkButton @route="index" @iconOnly="help-circle-outline" />`);
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-only'));
   });

ui/core/app/templates/orgs/org/projects/index.hbs

@@ -9,7 +9,7 @@
   </page.header>
 
   <page.actions>
-    <LinkTo @route="orgs.org.projects.new">{{t 'titles.new'}}</LinkTo>
+    <Rose::LinkButton @route="orgs.org.projects.new" @style="primary">{{t 'titles.new'}}</Rose::LinkButton>
   </page.actions>
 
   <page.body>

ui/core/app/templates/orgs/org/projects/project/host-catalogs/host-catalog/index.hbs

@@ -14,7 +14,7 @@
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-
+    <Rose::Separator />
     <Rose::Button
       @style="warning"
       @disabled={{@model.canSave}}

ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs

@@ -9,11 +9,9 @@
   </page.header>
 
   <page.actions>
-    <LinkTo
-      @route="orgs.org.projects.project.host-catalogs.new"
-    >
+    <Rose::LinkButton @route="orgs.org.projects.project.host-catalogs.new" @style="primary">
       {{t 'titles.new'}}
-    </LinkTo>
+    </Rose::LinkButton>
   </page.actions>
 
   <page.body>

ui/core/app/templates/orgs/org/projects/project/index.hbs

@@ -22,7 +22,7 @@
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-
+    <Rose::Separator />
     <Rose::Button
       @style="warning"
       @disabled={{@model.canSave}}