diff --git a/ui/lib/core/addon/components/info-table-row.hbs b/ui/lib/core/addon/components/info-table-row.hbs
new file mode 100644
index 000000000..7d1633223
--- /dev/null
+++ b/ui/lib/core/addon/components/info-table-row.hbs
@@ -0,0 +1,90 @@
+{{#if (or (has-block) this.isVisible)}}
+
+
+ {{#if @label}}
+ {{#if this.hasLabelOverflow}}
+
+
+ {{@label}}
+
+
+
+ {{@label}}
+
+
+
+ {{else}}
+
{{@label}}
+ {{/if}}
+ {{#if @helperText}}
+
+ {{@helperText}}
+
+ {{/if}}
+ {{else}}
+
+ {{/if}}
+
+
+ {{#if (has-block)}}
+ {{yield}}
+ {{else if this.valueIsBoolean}}
+ {{#if @value}}
+
+ Yes
+ {{else}}
+
+ No
+ {{/if}}
+ {{! alwaysRender is still true }}
+ {{else if this.valueIsEmpty}}
+ {{#if @defaultShown}}
+
{{@defaultShown}}
+ {{else}}
+
+ {{/if}}
+ {{else}}
+ {{#if (eq @type "array")}}
+
+ {{else}}
+ {{#if @tooltipText}}
+
+
+ {{this.value}}
+
+
+
+
+ {{@tooltipText}}
+
+
+
+
+ {{else}}
+
{{@value}}
+ {{/if}}
+ {{/if}}
+ {{/if}}
+
+
+{{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/info-table-row.js b/ui/lib/core/addon/components/info-table-row.js
index c597656a7..e0b1a500d 100644
--- a/ui/lib/core/addon/components/info-table-row.js
+++ b/ui/lib/core/addon/components/info-table-row.js
@@ -1,8 +1,8 @@
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';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+// import layout from '../templates/components/info-table-row';
/**
* @module InfoTableRow
@@ -14,42 +14,35 @@ import layout from '../templates/components/info-table-row';
*
* ```
*
- * @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 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. Overridden by block if exists
+ * @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 [defaultShown] {String} - Text that renders as value if alwaysRender=true. Eg. "Vault default"
+ * @param [tooltipText] {String} - Text if a tooltip should display over the value.
+ * @param [isTooltipCopyable] {Boolean} - Allows tooltip click to copy
* @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 [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'),
+export default class InfoTableRowComponent extends Component {
+ @tracked
+ hasLabelOverflow = false; // is calculated and set in didInsertElement
- alwaysRender: false,
- label: null,
- helperText: null,
- value: null,
- tooltipText: '',
- isTooltipCopyable: false,
- defaultShown: '',
- hasLabelOverflow: false, // is calculated and set in didInsertElement
+ get isVisible() {
+ return this.args.alwaysRender || !this.valueIsEmpty;
+ }
- valueIsBoolean: computed('value', function () {
- return typeOf(this.value) === 'boolean';
- }),
+ get valueIsBoolean() {
+ return typeOf(this.args.value) === 'boolean';
+ }
- valueIsEmpty: computed('value', function () {
- let { value } = this;
+ get valueIsEmpty() {
+ let { value } = this.args;
if (typeOf(value) === 'array' && value.length === 0) {
return true;
}
@@ -63,17 +56,16 @@ export default Component.extend({
default:
return false;
}
- }),
+ }
- didInsertElement() {
- this._super(...arguments);
- const labelDiv = this.element.querySelector('div');
- const labelText = this.element.querySelector('.is-label');
+ @action
+ calculateLabelOverflow(el) {
+ const labelDiv = el;
+ const labelText = el.querySelector('.is-label');
if (labelDiv && labelText) {
if (labelText.offsetWidth > labelDiv.offsetWidth) {
- labelDiv.classList.add('label-overflow');
- this.set('hasLabelOverflow', true);
+ this.hasLabelOverflow = true;
}
}
- },
-});
+ }
+}
diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs
deleted file mode 100644
index 996aee4e7..000000000
--- a/ui/lib/core/addon/templates/components/info-table-row.hbs
+++ /dev/null
@@ -1,82 +0,0 @@
-{{#if (or this.alwaysRender this.value)}}
-
- {{#if this.label}}
- {{#if this.hasLabelOverflow}}
-
-
- {{this.label}}
-
-
-
- {{this.label}}
-
-
-
- {{else}}
-
{{this.label}}
- {{/if}}
- {{#if this.helperText}}
-
- {{this.helperText}}
-
- {{/if}}
- {{else}}
-
- {{/if}}
-
-
- {{#if (has-block)}}
- {{yield}}
- {{else if this.valueIsBoolean}}
- {{#if this.value}}
-
- Yes
- {{else}}
-
- No
- {{/if}}
- {{! alwaysRender is still true }}
- {{else if (and (not this.value) this.defaultShown)}}
-
{{this.defaultShown}}
- {{else if this.valueIsEmpty}}
-
- {{else}}
- {{#if (eq this.type "array")}}
-
- {{else}}
- {{#if this.tooltipText}}
-
-
- {{this.value}}
-
-
-
-
- {{this.tooltipText}}
-
-
-
-
- {{else}}
-
{{this.value}}
- {{/if}}
- {{/if}}
- {{/if}}
-
-{{/if}}
\ No newline at end of file
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs b/ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs
index 68aef007e..35fbcd3bd 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs
@@ -25,7 +25,7 @@
-
+
{{#each this.model.config.paths as |path|}}
diff --git a/ui/tests/acceptance/secrets/backend/pki/cert-test.js b/ui/tests/acceptance/secrets/backend/pki/cert-test.js
index f4b721e4f..727d3f098 100644
--- a/ui/tests/acceptance/secrets/backend/pki/cert-test.js
+++ b/ui/tests/acceptance/secrets/backend/pki/cert-test.js
@@ -55,8 +55,7 @@ elRplAzrMF4=
await settled();
await generatePage.issueCert('foo');
await settled();
- let countMaskedFonts = document.querySelectorAll('.masked-font').length;
- assert.equal(countMaskedFonts, 3); // certificate, issuing ca, and private key
+ assert.dom('.masked-font').exists({ count: 3 }, 'renders 3 masked rows');
let firstUnMaskButton = document.querySelectorAll('.masked-input-toggle')[0];
await click(firstUnMaskButton);
assert.dom('.masked-value').hasTextContaining('-----BEGIN CERTIFICATE-----');
diff --git a/ui/tests/integration/components/info-table-row-test.js b/ui/tests/integration/components/info-table-row-test.js
index f1d835313..55fcc71cd 100644
--- a/ui/tests/integration/components/info-table-row-test.js
+++ b/ui/tests/integration/components/info-table-row-test.js
@@ -76,9 +76,9 @@ module('Integration | Component | InfoTableRow', function (hooks) {
this.set('isCopyable', false);
await render(hbs`
-
@@ -156,10 +156,96 @@ module('Integration | Component | InfoTableRow', function (hooks) {
@value={{this.value}}
@label={{this.label}}
@alwaysRender={{true}}>
- Block content is here
+ Block content is here
`);
let block = document.querySelector('[data-test-value-div]').textContent.trim();
assert.equal(block, 'Block content is here', 'renders block passed through');
});
+
+ test('Row renders when block content even if alwaysRender = false', async function (assert) {
+ await render(hbs`
+ Block content
+ `);
+ assert.dom('[data-test-value-div]').exists('renders block');
+ assert.dom('[data-test-value-div]').hasText('Block content', 'renders block');
+ });
+
+ test('Row does not render empty block content when alwaysRender = false', async function (assert) {
+ await render(hbs`
`);
+ assert.dom('[data-test-component="info-table-row"]').doesNotExist();
+ });
+
+ test('Has dashed label if none provided', async function (assert) {
+ await render(hbs`
`);
+ assert.dom('[data-test-component="info-table-row"]').exists();
+ assert.dom('[data-test-icon="minus"]').exists('renders dash when no label');
+ });
+ test('Truncates the label if too long', async function (assert) {
+ this.set('label', 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz');
+ await render(hbs`
`);
+ assert.dom('[data-test-component="info-table-row"]').exists('Row renders');
+ assert.dom('[data-test-label-div].label-overflow').exists('Label has class label-overflow');
+ await triggerEvent('[data-test-row-label]', 'mouseenter');
+ assert.dom('[data-test-label-tooltip]').exists('Label tooltip exists on hover');
+ });
+ test('Renders if block value and alwaysrender=false', async function (assert) {
+ await render(hbs`
{{this.value}}`);
+ assert.dom('[data-test-component="info-table-row"]').exists();
+ });
+ test('Does not render if value is empty and alwaysrender=false', async function (assert) {
+ await render(hbs`
`);
+ assert.dom('[data-test-component="info-table-row"]').doesNotExist();
+ });
+ test('Renders dash for value if value empty and alwaysRender=true', async function (assert) {
+ await render(hbs`
`);
+ assert.dom('[data-test-component="info-table-row"]').exists();
+ assert.dom('[data-test-value-div] [data-test-icon="minus"]').exists('renders dash for value');
+ });
+ test('Renders block over @value or @defaultShown', async function (assert) {
+ await render(hbs`
+ foo
+ `);
+ assert.dom('[data-test-component="info-table-row"]').exists();
+ assert.dom('[data-test-value-div]').hasText('foo', 'renders block value');
+ });
+ test('Renders icons if value is boolean', async function (assert) {
+ this.set('value', true);
+ await render(hbs`
`);
+
+ assert.dom('[data-test-boolean-true]').exists('check icon exists');
+ assert.dom('[data-test-value-div]').hasText('Yes', 'Renders yes text');
+ this.set('value', false);
+ assert.dom('[data-test-boolean-false]').exists('x icon exists');
+ assert.dom('[data-test-value-div]').hasText('No', 'renders no text');
+ });
+ test('Renders data-test attrs passed from parent', async function (assert) {
+ this.set('value', true);
+ await render(hbs`
`);
+
+ assert.dom('[data-test-foo-bar]').exists();
+ });
});