From 00331b742e672265389135de2ad588922c7c05f8 Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Tue, 5 Sep 2023 14:52:14 -0700
Subject: [PATCH] UI: [VAULT-19478] Fix info table row value overflow (#22776)

---
 ui/app/styles/helper-classes/general.scss        | 6 ++++++
 ui/lib/core/addon/components/info-table-row.hbs  | 2 +-
 ui/lib/core/addon/components/info-table-row.js   | 1 +
 ui/lib/kv/addon/components/page/secret/paths.hbs | 4 ++--
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss
index 574d403779..2abdb58b02 100644
--- a/ui/app/styles/helper-classes/general.scss
+++ b/ui/app/styles/helper-classes/general.scss
@@ -97,6 +97,12 @@
   overflow: hidden;
 }
 
+.text-overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 // screen reader only
 .sr-only {
   border: 0;
diff --git a/ui/lib/core/addon/components/info-table-row.hbs b/ui/lib/core/addon/components/info-table-row.hbs
index bcf527252f..99abb11ede 100644
--- a/ui/lib/core/addon/components/info-table-row.hbs
+++ b/ui/lib/core/addon/components/info-table-row.hbs
@@ -34,7 +34,7 @@
         <Icon @name="minus" />
       {{/if}}
     </div>
-    <div class="column is-flex" data-test-value-div={{@label}}>
+    <div class="column {{if @truncateValue 'is-two-thirds is-flex-center' 'is-flex'}}" data-test-value-div={{@label}}>
       {{#if @addCopyButton}}
         <div class="display-only">
           <CopyButton
diff --git a/ui/lib/core/addon/components/info-table-row.js b/ui/lib/core/addon/components/info-table-row.js
index c204d2a46e..b16464ead1 100644
--- a/ui/lib/core/addon/components/info-table-row.js
+++ b/ui/lib/core/addon/components/info-table-row.js
@@ -22,6 +22,7 @@ import { action } from '@ember/object';
  * @param {string} helperText=null - Text to describe the value displayed beneath the label.
  * @param {any} value=null  - 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 {boolean} [alwaysRender=false] - 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 {boolean} [truncateValue=false] - Indicates if the value should be truncated.
  * @param {string} [defaultShown] - Text that renders as value if alwaysRender=true. Eg. "Vault default"
  * @param {string} [tooltipText] - Text if a tooltip should display over the value.
  * @param {boolean} [isTooltipCopyable]  - Allows tooltip click to copy
diff --git a/ui/lib/kv/addon/components/page/secret/paths.hbs b/ui/lib/kv/addon/components/page/secret/paths.hbs
index f5273ea2ea..28c2c2d204 100644
--- a/ui/lib/kv/addon/components/page/secret/paths.hbs
+++ b/ui/lib/kv/addon/components/page/secret/paths.hbs
@@ -15,7 +15,7 @@
 
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
   {{#each this.paths as |path|}}
-    <InfoTableRow @label={{path.label}} @labelWidth="is-one-third" @helperText={{path.text}}>
+    <InfoTableRow @label={{path.label}} @labelWidth="is-one-third" @helperText={{path.text}} @truncateValue={{true}}>
       {{! replace with Hds::Copy::Snippet }}
       <CopyButton
         class="button is-compact is-transparent level-right"
@@ -25,7 +25,7 @@
       >
         <Icon @name="clipboard-copy" aria-label="Copy" />
       </CopyButton>
-      <code class="has-left-margin-s level-left">
+      <code class="is-flex-1 text-overflow-ellipsis has-left-margin-s">
         {{path.snippet}}
       </code>
     </InfoTableRow>