Files
vault/ui/lib/core/addon/components/info-table-item-array.js
Jordan Reimer e5b1f718f1 Ember Upgrade to 3.24 (#13443)
* Update browserslist

* Add browserslistrc

* ember-cli-update --to 3.26, fix conflicts

* Run codemodes that start with ember-*

* More codemods - before cp*

* More codemods (curly data-test-*)

* WIP ember-basic-dropdown template errors

* updates ember-basic-dropdown and related deps to fix build issues

* updates basic dropdown instances to new version API

* updates more deps -- ember-template-lint is working again

* runs no-implicit-this codemod

* creates and runs no-quoteless-attributes codemod

* runs angle brackets codemod

* updates lint:hbs globs to only touch hbs files

* removes yield only templates

* creates and runs deprecated args transform

* supresses lint error for invokeAction on LinkTo component

* resolves remaining ambiguous path lint errors

* resolves simple-unless lint errors

* adds warnings for deprecated tagName arg on LinkTo components

* adds warnings for remaining curly component invocation

* updates global template lint rules

* resolves remaining template lint errors

* disables some ember specfic lint rules that target pre octane patterns

* js lint fix run

* resolves remaining js lint errors

* fixes test run

* adds npm-run-all dep

* fixes test attribute issues

* fixes console acceptance tests

* fixes tests

* adds yield only wizard/tutorial-active template

* fixes more tests

* attempts to fix more flaky tests

* removes commented out settled in transit test

* updates deprecations workflow and adds initializer to filter by version

* updates flaky policies acl old test

* updates to flaky transit test

* bumps ember deps down to LTS version

* runs linters after main merge

* fixes client count tests after bad merge conflict fixes

* fixes client count history test

* more updates to lint config

* another round of hbs lint fixes after extending stylistic rule

* updates lint-staged commands

* removes indent eslint rule since it seems to break things

* fixes bad attribute in transform-edit-form template

* test fixes

* fixes enterprise tests

* adds changelog

* removes deprecated ember-concurrency-test-waiters dep and adds @ember/test-waiters

* flaky test fix

Co-authored-by: hashishaw <cshaw@hashicorp.com>
2021-12-16 20:44:29 -07:00

77 lines
3.3 KiB
JavaScript

import { computed } from '@ember/object';
import Component from '@ember/component';
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';
/**
* @module InfoTableItemArray
* The `InfoTableItemArray` component handles arrays in the info-table-row component.
* If an array has more than 10 items, then only 5 are displayed and a count of total items is displayed next to the five.
* If a isLink is true than a link can be set for the use to click on the specific array item
* If a wildcard is a potential variable in the string of an item, then you can use the modelType and wildcardLabel parameters to
* return a wildcard count similar to what is done in the searchSelect component.
*
* @example
* ```js
* <InfoTableItemArray @displayArray={{['test-1','test-2','test-3']}} @isLink={{true}} @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 [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,
allOptions: null,
displayArray: null,
wildcardInDisplayArray: false,
store: service(),
displayArrayAmended: computed('displayArray', function () {
let { displayArray } = this;
if (!displayArray) {
return;
}
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* () {
if (!this.displayArray) {
return;
}
let filteredArray = yield this.displayArray.filter((item) => isWildcardString(item));
this.set('wildcardInDisplayArray', filteredArray.length > 0 ? true : false);
}).on('didInsertElement'),
fetchOptions: task(function* () {
if (this.isLink && this.modelType) {
let queryOptions = {};
if (this.backend) {
queryOptions = { backend: this.backend };
}
let options = yield this.store.query(this.modelType, queryOptions);
this.formatOptions(options);
}
}).on('didInsertElement'),
formatOptions: function (options) {
let allOptions = options.toArray().map((option) => {
return option.id;
});
this.set('allOptions', allOptions);
},
});