UI/glimmerize info table item array (#16495)

* wip * fix * fix test * set new props * fix tests * clean up * cleanup
2022-07-29 13:33:00 -07:00 · 2022-07-29 13:33:00 -07:00 · 8cb161bd5a
parent 03f7d98ed0
commit 8cb161bd5a
4 changed files with 111 additions and 95 deletions
--- a/ui/lib/core/addon/components/info-table-item-array.hbs
+++ b/ui/lib/core/addon/components/info-table-item-array.hbs
@ -0,0 +1,59 @@
+<div data-test-info-table-item-array {{did-insert (perform this.fetchOptions)}}>
+  {{#if @isLink}}
+    <div data-test-row-value={{@label}}>
+      {{#each this.displayArrayAmended as |name|}}
+        {{#if (is-wildcard-string name)}}
+          {{#let (filter-wildcard name this.allOptions) as |wildcardCount|}}
+            <span>{{name}}</span>
+            <span class="tag is-light has-text-grey-dark" data-test-count="{{if wildcardCount wildcardCount 0}}">
+              includes
+              {{if wildcardCount wildcardCount 0}}
+              {{if (eq wildcardCount 1) @wildcardLabel (pluralize @wildcardLabel)}}
+            </span>
+            {{#if (eq this.displayArrayAmended.lastObject name)}}
+              <LinkTo @route={{this.rootRoute}} @query={{hash tab=@queryParam}}>
+                <span data-test-view-all={{@viewAll}}>View all {{@viewAll}}</span>
+              </LinkTo>
+            {{/if}}
+          {{/let}}
+        {{else}}
+          <LinkTo
+            @route={{this.itemRoute}}
+            @model={{if @queryParam (concat @queryParam "/" name) name}}
+            data-test-item={{name}}
+          >
+            <span>{{name}}</span>
+          </LinkTo>
+        {{/if}}
+        {{#if
+          (or
+            (and (not-eq name this.displayArrayAmended.lastObject) this.wildcardInDisplayArray)
+            (not-eq name this.displayArrayAmended.lastObject)
+          )
+        }}
+          ,&nbsp;
+        {{/if}}
+        {{#if (and (eq name this.displayArrayAmended.lastObject) (gte this.displayArray.length 10))}}
+          <span data-test-and={{dec 5 this.displayArray.length}}>
+            &nbsp;and
+            {{dec 5 this.displayArray.length}}
+            others.&nbsp;
+          </span>
+        {{/if}}
+        {{#if (and (eq name this.displayArrayAmended.lastObject) (gte this.displayArray.length 10))}}
+          <LinkTo @route={{this.rootRoute}} @query={{hash tab=@queryParam}}>
+            <span data-test-view-all={{this.viewAll}}>View all {{this.viewAll}} </span>
+          </LinkTo>
+        {{/if}}
+      {{/each}}
+    </div>
+  {{else}}
+    <code class="is-word-break has-text-black" data-test-row-value={{@label}}>
+      {{if
+        (gte this.displayArray.length 10)
+        (concat this.displayArray ", and " (dec 5 this.displayArray.length) " more.")
+        this.displayArray
+      }}
+    </code>
+  {{/if}}
+</div>
--- a/ui/lib/core/addon/components/info-table-item-array.js
+++ b/ui/lib/core/addon/components/info-table-item-array.js
@ -1,8 +1,7 @@
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
-import layout from '../templates/components/info-table-item-array';
 import { isWildcardString } from 'vault/helpers/is-wildcard-string';

 /**
@ -15,63 +14,78 @@ import { isWildcardString } from 'vault/helpers/is-wildcard-string';
 *
 * @example
 * ```js
- * <InfoTableItemArray @displayArray={{['test-1','test-2','test-3']}} @isLink={{true}} @modelType="transform/role"/ @queryParam="role" @backend="transform" viewAll="roles">
+ * <InfoTableItemArray
+ * @displayArray={{['test-1','test-2','test-3']}}
+ * @isLink={{true}}
+ * @rootRoute="vault.cluster.secrets.backend.list-root"
+ * @itemRoute="vault.cluster.secrets.backend.show"
+ * @modelType="transform/role"/
+ * @queryParam="role"
+ * @backend="transform"
+ * viewAll="roles">
 * ```
 *
 * @param displayArray=null {array} - This array of data to be displayed.  If there are more than 10 items in the array only five will show and a count of the other number in the array will show.
- * @param [isLink=true] {Boolean} - Indicates if the item should contain a link-to component.  Only setup for arrays, but this could be changed if needed.
- * @param [modelType=null] {string} - Tells what model you want data for the allOptions to be returned from.  Used in conjunction with the the isLink.
+ * @param [isLink] {Boolean} - Indicates if the item should contain a link-to component.  Only setup for arrays, but this could be changed if needed.
+ * @param [rootRoute="vault.cluster.secrets.backend.list-root"] - {string} - Tells what route the link should go to when selecting "view all".
+ * @param [itemRoute=vault.cluster.secrets.backend.show] - {string} - Tells what route the link should go to when selecting the individual item.
+ * @param [modelType] {string} - Tells which model you want data for the allOptions to be returned from.  Used in conjunction with the the isLink.
 * @param [wildcardLabel] {String} - when you want the component to return a count on the model for options returned when using a wildcard you must provide a label of the count e.g. role.  Should be singular.
 * @param [queryParam] {String} - If you want to specific a tab for the View All XX to display to.  Ex: role
 * @param [backend] {String} - To specify which backend to point the link to.
 * @param [viewAll] {String} - Specify the word at the end of the link View all xx.
 */
-export default Component.extend({
-  layout,
-  'data-test-info-table-item-array': true,
-  attributeBindings: ['data-test-info-table-item-array'],
-  allOptions: null,
-  displayArray: null,
-  wildcardInDisplayArray: false,
-  store: service(),
-  displayArrayAmended: computed('displayArray', function () {
+export default class InfoTableItemArray extends Component {
+  @tracked allOptions = null;
+  @tracked wildcardInDisplayArray = false;
+  @service store;
+
+  get rootRoute() {
+    return this.args.rootRoute || 'vault.cluster.secrets.backend.list-root';
+  }
+
+  get itemRoute() {
+    return this.args.itemRoute || 'vault.cluster.secrets.backend.show';
+  }
+
+  get displayArray() {
+    return this.args.displayArray || null;
+  }
+
+  get displayArrayAmended() {
    let { displayArray } = this;
-    if (!displayArray) {
-      return;
-    }
+    if (!displayArray) return null;
    if (displayArray.length >= 10) {
      // if array greater than 10 in length only display the first 5
      displayArray = displayArray.slice(0, 5);
    }
-
    return displayArray;
-  }),
+  }

-  checkWildcardInArray: task(function* () {
+  async checkWildcardInArray() {
    if (!this.displayArray) {
      return;
    }
-    let filteredArray = yield this.displayArray.filter((item) => isWildcardString(item));
-    this.set('wildcardInDisplayArray', filteredArray.length > 0 ? true : false);
-  }).on('didInsertElement'),
+    let filteredArray = await this.displayArray.filter((item) => isWildcardString(item));

-  fetchOptions: task(function* () {
-    if (this.isLink && this.modelType) {
+    this.wildcardInDisplayArray = filteredArray.length > 0 ? true : false;
+  }
+
+  @task *fetchOptions() {
+    if (this.args.isLink && this.args.modelType) {
      let queryOptions = {};

-      if (this.backend) {
-        queryOptions = { backend: this.backend };
+      if (this.args.backend) {
+        queryOptions = { backend: this.args.backend };
      }

-      let options = yield this.store.query(this.modelType, queryOptions);
+      let options = yield this.store.query(this.args.modelType, queryOptions);
      this.formatOptions(options);
    }
-  }).on('didInsertElement'),
+    this.checkWildcardInArray();
+  }

-  formatOptions: function (options) {
-    let allOptions = options.toArray().map((option) => {
-      return option.id;
-    });
-    this.set('allOptions', allOptions);
-  },
-});
+  formatOptions(options) {
+    this.allOptions = options.mapBy('id');
+  }
+}
--- a/ui/lib/core/addon/templates/components/info-table-item-array.hbs
+++ b/ui/lib/core/addon/templates/components/info-table-item-array.hbs
@ -1,57 +0,0 @@
-{{#if this.isLink}}
-  <div data-test-row-value={{this.label}}>
-    {{#each this.displayArrayAmended as |name|}}
-      {{#if (is-wildcard-string name)}}
-        {{#let (filter-wildcard name this.allOptions) as |wildcardCount|}}
-          <span>{{name}}</span>
-          <span class="tag is-light has-text-grey-dark" data-test-count={{wildcardCount}}>
-            includes
-            {{if wildcardCount wildcardCount 0}}
-            {{if (eq wildcardCount 1) this.wildcardLabel (pluralize this.wildcardLabel)}}
-          </span>
-          {{#if (eq this.displayArrayAmended.lastObject name)}}
-            <LinkTo @route="vault.cluster.secrets.backend.list-root" @query={{hash tab=this.queryParam}}>
-              <span data-test-view-all={{this.viewAll}}>View all {{this.viewAll}}</span>
-            </LinkTo>
-          {{/if}}
-        {{/let}}
-      {{else}}
-        <LinkTo
-          @route="vault.cluster.secrets.backend.show"
-          @model={{if this.queryParam (concat this.queryParam "/" name) name}}
-          data-test-item="array"
-        >
-          <span>{{name}}</span>
-        </LinkTo>
-      {{/if}}
-      {{#if
-        (or
-          (and (not-eq name this.displayArrayAmended.lastObject) this.wildcardInDisplayArray)
-          (not-eq name this.displayArrayAmended.lastObject)
-        )
-      }}
-        ,&nbsp;
-      {{/if}}
-      {{#if (and (eq name this.displayArrayAmended.lastObject) (gte this.displayArray.length 10))}}
-        <span data-test-and={{dec 5 this.displayArray.length}}>
-          &nbsp;and
-          {{dec 5 this.displayArray.length}}
-          others.&nbsp;
-        </span>
-      {{/if}}
-      {{#if (and (eq name this.displayArrayAmended.lastObject) (gte this.displayArray.length 10))}}
-        <LinkTo @route="vault.cluster.secrets.backend.list-root" @query={{hash tab=this.queryParam}}>
-          <span data-test-view-all={{this.viewAll}}>View all {{this.viewAll}} </span>
-        </LinkTo>
-      {{/if}}
-    {{/each}}
-  </div>
-{{else}}
-  <code class="is-word-break has-text-black" data-test-row-value={{this.label}}>
-    {{if
-      (gte this.displayArray.length 10)
-      (concat this.displayArray ", and " (dec 5 this.displayArray.length) " more.")
-      this.displayArray
-    }}
-  </code>
-{{/if}}
--- a/ui/tests/integration/components/info-table-row-test.js
+++ b/ui/tests/integration/components/info-table-row-test.js
@ -114,7 +114,7 @@ module('Integration | Component | InfoTableRow', function (hooks) {
      @type={{this.type}}
    />`);

-    assert.dom('[data-test-item="array"]').hasText('valueArray', 'Confirm link with item value exist');
+    assert.dom('[data-test-item="valueArray"]').hasText('valueArray', 'Confirm link with item value exist');
  });

  test('it renders as expected if a label and/or value do not exist', async function (assert) {