diff --git a/changelog/29430.txt b/changelog/29430.txt new file mode 100644 index 0000000000..584090e169 --- /dev/null +++ b/changelog/29430.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Fixes text overflow on Secrets engines and Auth Engines list views for long names & descriptions +``` \ No newline at end of file diff --git a/ui/app/components/dashboard/secrets-engines-card.hbs b/ui/app/components/dashboard/secrets-engines-card.hbs index d6a2a8a400..021ee0a93b 100644 --- a/ui/app/components/dashboard/secrets-engines-card.hbs +++ b/ui/app/components/dashboard/secrets-engines-card.hbs @@ -25,7 +25,7 @@
-
+
{{#if backend.icon}} {{backend.path}} diff --git a/ui/app/styles/components/linked-block.scss b/ui/app/styles/components/linked-block.scss index 500b6f509f..707f403cf2 100644 --- a/ui/app/styles/components/linked-block.scss +++ b/ui/app/styles/components/linked-block.scss @@ -23,3 +23,7 @@ grid-row: 1; align-self: center; } + +.linked-block-title { + grid-template-columns: minmax(0, 28px) minmax(0, 1fr); +} diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss index fe279671df..d1b45f5a2d 100644 --- a/ui/app/styles/components/search-select.scss +++ b/ui/app/styles/components/search-select.scss @@ -101,6 +101,10 @@ div > .ember-power-select-options { justify-content: space-between; border-bottom: $light-border; + .list-item-text { + max-width: 200px; + } + .control .button { color: $grey-light; min-width: auto; diff --git a/ui/app/styles/helper-classes/flexbox-and-grid.scss b/ui/app/styles/helper-classes/flexbox-and-grid.scss index e8cdada74a..5bcf6a21ef 100644 --- a/ui/app/styles/helper-classes/flexbox-and-grid.scss +++ b/ui/app/styles/helper-classes/flexbox-and-grid.scss @@ -192,3 +192,7 @@ .align-self-end { align-self: end; } + +.align-items-center { + align-items: center; +} diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs index 01d92eba45..4924aa4613 100644 --- a/ui/app/templates/vault/cluster/access/methods.hbs +++ b/ui/app/templates/vault/cluster/access/methods.hbs @@ -53,12 +53,12 @@ data-test-auth-backend-link={{method.id}} >
-
-
+
+
- + {{method.path}}
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs index dc7f510cc4..eccf7ccf0c 100644 --- a/ui/app/templates/vault/cluster/secrets/backends.hbs +++ b/ui/app/templates/vault/cluster/secrets/backends.hbs @@ -54,7 +54,7 @@ @disabled={{not backend.isSupportedBackend}} >
-
+
{{#if backend.icon}} @@ -65,7 +65,7 @@ {{backend.path}} diff --git a/ui/lib/core/addon/components/search-select.hbs b/ui/lib/core/addon/components/search-select.hbs index 1d4680c0c6..a49630dd76 100644 --- a/ui/lib/core/addon/components/search-select.hbs +++ b/ui/lib/core/addon/components/search-select.hbs @@ -68,7 +68,7 @@ {{get selected this.idKey}} {{else}} -
+
{{selected.id}} {{#if @wildcardLabel}} {{#if (is-wildcard-string selected.id)}} diff --git a/ui/tests/acceptance/access/methods-test.js b/ui/tests/acceptance/access/methods-test.js index 72e31a1509..953be79f24 100644 --- a/ui/tests/acceptance/access/methods-test.js +++ b/ui/tests/acceptance/access/methods-test.js @@ -78,6 +78,9 @@ module('Acceptance | auth-methods list view', function (hooks) { })); await visit('/vault/access/'); assert.dom('[data-test-auth-backend-link]').exists({ count: 2 }, 'All auth methods appear in list view'); + + // verify overflow style exists on auth method name + assert.dom('[data-test-path]').hasClass('overflow-wrap', 'auth method name has overflow class applied'); await visit('/vault/settings/auth/enable'); await click('[data-test-sidebar-nav-link="OIDC Provider"]'); await visit('/vault/access/'); diff --git a/ui/tests/acceptance/secrets/backend/engines-test.js b/ui/tests/acceptance/secrets/backend/engines-test.js index 70c86e18b9..91df66aa7c 100644 --- a/ui/tests/acceptance/secrets/backend/engines-test.js +++ b/ui/tests/acceptance/secrets/backend/engines-test.js @@ -74,7 +74,7 @@ module('Acceptance | secret-engine list view', function (hooks) { }); test('it filters by name and engine type', async function (assert) { - assert.expect(4); + assert.expect(5); const enginePath1 = `aws-1-${this.uid}`; const enginePath2 = `aws-2-${this.uid}`; @@ -101,6 +101,9 @@ module('Acceptance | secret-engine list view', function (hooks) { const rowsAgain = document.querySelectorAll('[data-test-secrets-backend-link]'); assert.ok(rowsAgain.length > 1, 'filter has been removed'); + // verify overflow style exists on engine name + assert.dom('[data-test-secret-path]').hasClass('overflow-wrap', 'secret engine name has overflow class '); + // cleanup await runCmd(deleteEngineCmd(enginePath1)); await runCmd(deleteEngineCmd(enginePath2)); diff --git a/ui/tests/integration/components/dashboard/secrets-engines-card-test.js b/ui/tests/integration/components/dashboard/secrets-engines-card-test.js index 8b529b94fa..5d87640ae5 100644 --- a/ui/tests/integration/components/dashboard/secrets-engines-card-test.js +++ b/ui/tests/integration/components/dashboard/secrets-engines-card-test.js @@ -30,6 +30,9 @@ module('Integration | Component | dashboard/secrets-engines-card', function (hoo await render(hbs``); + // verify overflow style exists on secret engine text + assert.dom('[data-test-secret-path]').hasClass('overflow-wrap', 'secret engine name has overflow class '); + assert.dom('[data-test-secrets-engines-card-show-all]').doesNotExist(); }); diff --git a/ui/tests/integration/components/search-select-test.js b/ui/tests/integration/components/search-select-test.js index 4557e95159..75cd1a1dfc 100644 --- a/ui/tests/integration/components/search-select-test.js +++ b/ui/tests/integration/components/search-select-test.js @@ -167,6 +167,10 @@ module('Integration | Component | search select', function (hooks) { component.selectedOptionText, 'first object in list is focused' ); + + // verify overflow styling on input field exists + assert.dom('.list-item-text').exists('selected option field has width set'); + assert.dom('.text-overflow-ellipsis').exists('selected option text has overflow class'); }); test('it filters options and adds option to create new item when text is entered', async function (assert) {