Glimmer continued (#15786)

* generated item list

* home link glimmerization

* hover copy button

* clean up

* clean up

* copy change

ui/app/components/database-role-setting-form.js

@@ -1,3 +1,6 @@
+import Component from '@glimmer/component';
+import { getStatementFields, getRoleFields } from '../utils/database-helpers';
+
 /**
  * @module DatabaseRoleSettingForm
  * DatabaseRoleSettingForm components are used to handle the role settings section on the database/role form
@@ -13,9 +16,6 @@
  * @param {string} [dbType=default] - type of database, eg 'mongodb-database-plugin'
  */
 
-import Component from '@glimmer/component';
-import { getStatementFields, getRoleFields } from '../utils/database-helpers';
-
 export default class DatabaseRoleSettingForm extends Component {
   get settingFields() {
     if (!this.args.roleType) return null;

ui/app/components/generated-item-list.js

@@ -1,5 +1,6 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { getOwner } from '@ember/application';
 
 /**
@@ -8,24 +9,30 @@ import { getOwner } from '@ember/application';
  *
  * @example
  * ```js
- * <GeneratedItemList @model={{model}} @itemType={{itemType/>
+ * <GeneratedItemList @model={{model}} @itemType={{itemType}} @paths={{this.paths}} @methodModel={{this.methodModel}}/>
  * ```
  *
- * @property model=null {DS.Model} - The corresponding item model that is being configured.
- * @property itemType {String} - the type of item displayed
- *
+ * @param {class} model=null - The corresponding item model that is being configured.
+ * @param {string} itemType - The type of item displayed.
+ * @param {array} paths - Relevant to the link for the LinkTo element.
+ * @param {class} methodModel - Model for the particular method selected.
  */
 
-export default Component.extend({
-  model: null,
-  itemType: null,
-  router: service(),
-  store: service(),
-  actions: {
-    refreshItemList() {
-      let route = getOwner(this).lookup(`route:${this.router.currentRouteName}`);
-      this.store.clearAllDatasets();
-      route.refresh();
-    },
-  },
-});
+export default class GeneratedItemList extends Component {
+  @service router;
+  @service store;
+
+  get model() {
+    return this.args.model || null;
+  }
+  get itemType() {
+    return this.args.itemType || null;
+  }
+
+  @action
+  refreshItemList() {
+    let route = getOwner(this).lookup(`route:${this.router.currentRouteName}`);
+    this.store.clearAllDatasets();
+    route.refresh();
+  }
+}

ui/app/components/home-link.js

@@ -1,5 +1,4 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 
 /**
  * @module HomeLink
@@ -11,19 +10,19 @@ import { computed } from '@ember/object';
  *  <LogoEdition />
  * </HomeLink>
  * ```
+ * @param {string} class - Classes attached to the the component.
+ * @param {string} text - Text displayed instead of logo.
  *
  * @see {@link https://github.com/hashicorp/vault/search?l=Handlebars&q=HomeLink|Uses of HomeLink}
  * @see {@link https://github.com/hashicorp/vault/blob/main/ui/app/components/home-link.js|HomeLink Source Code}
  */
 
-export default Component.extend({
-  tagName: '',
-
-  text: computed(function () {
+export default class HomeLink extends Component {
+  get text() {
     return 'home';
-  }),
+  }
 
-  computedClasses: computed('classNames', function () {
+  get computedClasses() {
     return this.classNames.join(' ');
-  }),
-});
+  }
+}

ui/app/components/hover-copy-button.js

@@ -1,11 +1,24 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
-  'data-test-hover-copy': true,
-  attributeBindings: ['data-test-hover-copy'],
-  classNameBindings: 'alwaysShow:hover-copy-button-static:hover-copy-button',
-  copyValue: null,
-  alwaysShow: false,
+/**
+ * @module HoverCopyButton
+ * The `HoverCopyButton` is used on dark backgrounds to show a copy button.
+ *
+ * @example ```js
+ * <HoverCopyButton @copyValue={{stringify this.model.id}} @alwaysShow={{true}} />```
+ *
+ * @param {string} copyValue - The value to be copied.
+ * @param {boolean} [alwaysShow] - Boolean that affects the class.
+ */
 
-  tooltipText: 'Copy',
-});
+export default class HoverCopyButton extends Component {
+  get alwaysShow() {
+    return this.args.alwaysShow || false;
+  }
+  get copyValue() {
+    return this.args.copyValue || false;
+  }
+
+  @tracked tooltipText = 'Copy';
+}

ui/app/templates/components/generated-item-list.hbs

@@ -13,11 +13,11 @@
   </p.top>
   <p.levelLeft>
     <h1 class="title is-3">
-      {{this.methodModel.id}}
+      {{@methodModel.id}}
     </h1>
   </p.levelLeft>
 </PageHeader>
-{{#let (tabs-for-auth-section this.methodModel "authConfig" this.paths) as |tabs|}}
+{{#let (tabs-for-auth-section @methodModel "authConfig" @paths) as |tabs|}}
   {{#if tabs.length}}
     <div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
       <nav class="tabs">

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

@@ -1,7 +1,7 @@
-<span class={{this.class}}>
+<span class={{@class}}>
   {{#if (has-block)}}
     {{yield}}
   {{else}}
-    {{this.text}}
+    {{@text}}
   {{/if}}
 </span>

ui/app/templates/components/hover-copy-button.hbs

@@ -1,17 +1,19 @@
-<ToolTip @onClose={{action (mut this.tooltipText) "Copy"}} as |T|>
-  <T.Trigger data-test-tooltip-trigger tabindex="-1">
-    <CopyButton
-      data-test-hover-copy-button
-      class="copy-button button is-compact is-transparent"
-      @clipboardText={{this.copyValue}}
-      @success={{action (mut this.tooltipText) "Copied!"}}
-    >
-      <Icon @name="clipboard-copy" aria-label="Copy" />
-    </CopyButton>
-  </T.Trigger>
-  <T.Content @defaultClass="tool-tip">
-    <div class="box" data-test-hover-copy-tooltip-text>
-      {{this.tooltipText}}
-    </div>
-  </T.Content>
-</ToolTip>
+<div class={{if this.alwaysShow "hover-copy-button-static" "hover-copy-button"}} data-test-hover-copy>
+  <ToolTip @onClose={{action (mut this.tooltipText) "Copy"}} as |T|>
+    <T.Trigger data-test-tooltip-trigger tabindex="-1">
+      <CopyButton
+        data-test-hover-copy-button
+        class="copy-button button is-compact is-transparent"
+        @clipboardText={{this.copyValue}}
+        @success={{action (mut this.tooltipText) "Copied!"}}
+      >
+        <Icon @name="clipboard-copy" aria-label="Copy" />
+      </CopyButton>
+    </T.Trigger>
+    <T.Content @defaultClass="tool-tip">
+      <div class="box" data-test-hover-copy-tooltip-text>
+        {{this.tooltipText}}
+      </div>
+    </T.Content>
+  </ToolTip>
+</div>

ui/app/templates/vault/cluster/access/method/item/list.hbs

@@ -1,6 +1,5 @@
 <GeneratedItemList
   @model={{this.model}}
-  @method={{this.method}}
   @itemType={{this.itemType}}
   @paths={{this.paths}}
   @methodModel={{this.methodModel}}

ui/tests/integration/components/hover-copy-button-test.js

@@ -11,13 +11,11 @@ module('Integration | Component | hover copy button', function (hooks) {
 
   // ember-cli-clipboard helpers don't like the new style
   test('it shows success message in tooltip', async function (assert) {
-    this.set('copyValue', 'foo');
-    await render(
-      hbs`<div class="has-copy-button" tabindex="-1">
-      <HoverCopyButton @copyValue={{copyValue}} />
-      </div>`
-    );
-
+    await render(hbs`
+    <div class="has-copy-button" tabindex="-1">
+      <HoverCopyButton @copyValue="foo" />
+      </div>
+  `);
     await component.focusContainer();
     await settled();
     assert.ok(component.buttonIsVisible);
@@ -27,7 +25,12 @@ module('Integration | Component | hover copy button', function (hooks) {
   });
 
   test('it has the correct class when alwaysShow is true', async function (assert) {
-    this.set('copyValue', 'foo');
+    await render(hbs`
+    <HoverCopyButton
+      @copyValue="foo"
+      @alwaysShow={{true}}
+    />
+  `);
     await render(hbs`{{hover-copy-button alwaysShow=true copyValue=copyValue}}`);
     assert.ok(component.buttonIsVisible);
     assert.ok(component.wrapperClass.includes('hover-copy-button-static'));