mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-11-02 19:47:54 +00:00
e5b1f718f1
* 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>
80 lines
3.6 KiB
JavaScript
80 lines
3.6 KiB
JavaScript
import { typeOf } from '@ember/utils';
|
|
import { computed } from '@ember/object';
|
|
import { or } from '@ember/object/computed';
|
|
import Component from '@ember/component';
|
|
import layout from '../templates/components/info-table-row';
|
|
|
|
/**
|
|
* @module InfoTableRow
|
|
* `InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so
|
|
* that the value breaks under the label on smaller viewports.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>
|
|
* ```
|
|
*
|
|
* @param value=null {any} - The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false.
|
|
* @param label=null {string} - The display name for the value.
|
|
* @param helperText=null {string} - Text to describe the value displayed beneath the label.
|
|
* @param alwaysRender=false {Boolean} - Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render.
|
|
* @param [type=array] {string} - The type of value being passed in. This is used for when you want to trim an array. For example, if you have an array value that can equal length 15+ this will trim to show 5 and count how many more are there
|
|
* @param [isLink=true] {Boolean} - Passed through to InfoTableItemArray. 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} - Passed through to InfoTableItemArray. Tells what model you want data for the allOptions to be returned from. Used in conjunction with the the isLink.
|
|
* @param [queryParam] {String} - Passed through to InfoTableItemArray. If you want to specific a tab for the View All XX to display to. Ex: role
|
|
* @param [backend] {String} - Passed through to InfoTableItemArray. To specify secrets backend to point link to Ex: transformation
|
|
* @param [viewAll] {String} - Passed through to InfoTableItemArray. Specify the word at the end of the link View all.
|
|
* @param [tooltipText] {String} - Text if a tooltip should display over the value.
|
|
* @param [isTooltipCopyable] {Boolean} - Allows tooltip click to copy
|
|
* @param [defaultShown] {String} - Text that renders as value if alwaysRender=true. Eg. "Vault default"
|
|
*/
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
'data-test-component': 'info-table-row',
|
|
classNames: ['info-table-row'],
|
|
isVisible: or('alwaysRender', 'value'),
|
|
|
|
alwaysRender: false,
|
|
label: null,
|
|
helperText: null,
|
|
value: null,
|
|
tooltipText: '',
|
|
isTooltipCopyable: false,
|
|
defaultShown: '',
|
|
hasLabelOverflow: false, // is calculated and set in didInsertElement
|
|
|
|
valueIsBoolean: computed('value', function () {
|
|
return typeOf(this.value) === 'boolean';
|
|
}),
|
|
|
|
valueIsEmpty: computed('value', function () {
|
|
let { value } = this;
|
|
if (typeOf(value) === 'array' && value.length === 0) {
|
|
return true;
|
|
}
|
|
switch (value) {
|
|
case undefined:
|
|
return true;
|
|
case null:
|
|
return true;
|
|
case '':
|
|
return true;
|
|
default:
|
|
return false;
|
|
}
|
|
}),
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
const labelDiv = this.element.querySelector('div');
|
|
const labelText = this.element.querySelector('.is-label');
|
|
if (labelDiv && labelText) {
|
|
if (labelText.offsetWidth > labelDiv.offsetWidth) {
|
|
labelDiv.classList.add('label-overflow');
|
|
this.set('hasLabelOverflow', true);
|
|
}
|
|
}
|
|
},
|
|
});
|