UI: Replication - fixing overflow issue on secondaries list / table (#31323)

* fixing overflow issue on secondaries lists

* add checks in tests
This commit is contained in:
Dan Rivera 2025-07-17 15:05:04 -04:00 committed by GitHub
parent 1e7f22aeec
commit 4c828c389d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 19 additions and 2 deletions

View File

@ -90,6 +90,10 @@
.overflow-wrap {
overflow-wrap: break-word;
&.word-break {
word-break: break-word;
}
}
.truncate-second-line {

View File

@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
}}
<Hds::Table @caption="Known Secondaries" data-test-known-secondaries-table>
<Hds::Table class="overflow-wrap word-break" @caption="Known Secondaries" data-test-known-secondaries-table>
<:head as |H|>
<H.Tr>
<H.Th>Secondary ID</H.Th>

View File

@ -22,7 +22,7 @@
</Toolbar>
{{#if this.model.replicationAttrs.knownSecondaries.length}}
{{#each this.model.replicationAttrs.knownSecondaries as |secondary|}}
<div class="list-item-row" data-test-secondary-name={{secondary}}>
<div class="list-item-row overflow-wrap" data-test-secondary-name={{secondary}}>
<div class="columns is-mobile">
<div class="column is-10">
{{secondary}}

View File

@ -106,6 +106,11 @@ module('Acceptance | Enterprise | replication', function (hooks) {
assert
.dom('[data-test-secondary-name]')
.includesText(secondaryName, 'it displays the secondary in the list of known secondaries');
// verify overflow-wrap class is applied to secondary name
assert
.dom('[data-test-secondary-name]')
.hasClass('overflow-wrap', 'it applies the overflow-wrap class to the secondary name');
});
test('disabling dr primary when perf replication is enabled', async function (assert) {

View File

@ -29,6 +29,14 @@ module('Integration | Component | replication known-secondaries-table', function
await render(hbs`<KnownSecondariesTable @secondaries={{this.secondaries}} />`, this.context);
assert.dom('[data-test-known-secondaries-table]').exists();
// Verify table has overflow and word break classes applied
assert
.dom('[data-test-known-secondaries-table]')
.hasClass('overflow-wrap', 'it has the overflow-wrap class applied');
assert
.dom('[data-test-known-secondaries-table]')
.hasClass('word-break', 'it has the word-break class applied');
});
test('it shows the secondary URL and connection_status', async function (assert) {