UI: Fix text overflow for long Secret and Auth names (#29430)

* adding overflow class to link text

* adding separate class to fix overflow text on list & card views

* adding class to search list items to handle overflow

* adding ellipsis instead of just hidden for visual indicator

* added changelog

* updating styling to use helper classes, added child class to global style, updated changelog

* added test checks for oveflow classes

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
+```

ui/app/components/dashboard/secrets-engines-card.hbs

@@ -25,7 +25,7 @@
           <B.Tr data-test-secrets-engines-row={{backend.id}}>
             <B.Td class="is-flex-between is-flex-center gap-16">
               <div>
-                <div class="is-flex-center">
+                <div class="is-grid align-items-center linked-block-title">
                   {{#if backend.icon}}
                     <Icon
                       @name={{backend.icon}}
@@ -39,7 +39,7 @@
                       <LinkTo
                         @route={{backend.backendLink}}
                         @model={{backend.id}}
-                        class="has-text-black has-text-weight-semibold"
+                        class="has-text-black has-text-weight-semibold overflow-wrap"
                         data-test-secret-path
                       >
                         {{backend.path}}

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);
+}

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;

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;
+}

ui/app/templates/vault/cluster/access/methods.hbs

@@ -53,12 +53,12 @@
     data-test-auth-backend-link={{method.id}}
   >
     <div class="level is-mobile">
-      <div class="level-left">
       <div>
+        <div class="is-grid align-items-center linked-block-title">
           <Hds::TooltipButton @text={{method.methodType}} aria-label="Type of auth mount">
             <Icon @name={{method.icon}} class="has-text-grey-light" />
           </Hds::TooltipButton>
-          <span data-test-path data-test-id={{method.id}} class="has-text-weight-semibold has-text-black">
+          <span data-test-path data-test-id={{method.id}} class="has-text-weight-semibold has-text-black overflow-wrap">
             {{method.path}}
           </span>
           <br />

ui/app/templates/vault/cluster/secrets/backends.hbs

@@ -54,7 +54,7 @@
     @disabled={{not backend.isSupportedBackend}}
   >
     <div>
-      <div class="has-text-grey">
+      <div class="has-text-grey is-grid align-items-center linked-block-title">
         {{#if backend.icon}}
           <Hds::TooltipButton @text={{or backend.engineType backend.path}} aria-label="Type of backend">
             <Icon @name={{backend.icon}} class="has-text-grey-light" />
@@ -65,7 +65,7 @@
             <LinkTo
               @route={{backend.backendLink}}
               @model={{backend.id}}
-              class="has-text-black has-text-weight-semibold"
+              class="has-text-black has-text-weight-semibold overflow-wrap"
               data-test-secret-path
             >
               {{backend.path}}

ui/lib/core/addon/components/search-select.hbs

@@ -68,7 +68,7 @@
               {{get selected this.idKey}}
             </small>
           {{else}}
-            <div>
+            <div class="list-item-text has-right-margin-xxs text-overflow-ellipsis">
               {{selected.id}}
               {{#if @wildcardLabel}}
                 {{#if (is-wildcard-string selected.id)}}

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/');

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));

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`<Dashboard::SecretsEnginesCard @secretsEngines={{this.secretsEngines}} />`);
 
+    // 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();
   });
 

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) {