UI/Truncate long secret names (#13032)

* small bar chart attr fix

* truncates and adds ellipsis of label is long

* adds tooltip for long labels

* updates storybook

* adds changelog

* only calculate overflow if query selectors grab elements

* moves tooltip pointer to left

changelog/13032.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes long secret key names overlapping masked values
+```

ui/app/styles/components/info-table-row.scss

@@ -90,3 +90,17 @@
     padding-left: 0;
   }
 }
+
+.label-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  // inline display necessary for nested elements so ellipsis shows
+  > div {
+    display: inline;
+  }
+  > div > span {
+    display: inline;
+  }
+}

ui/app/styles/components/tool-tip.scss

@@ -2,6 +2,7 @@
   font-size: $size-7;
   text-transform: none;
   margin: 8px 0px 0 -4px;
+
   .box {
     position: relative;
     color: $white;
@@ -10,6 +11,11 @@
     padding: 0.5rem;
     line-height: 1.4;
   }
+
+  .fit-content {
+    max-width: fit-content;
+  }
+
   @include css-top-arrow(8px, $grey, 1px, $grey-dark, 20px);
   &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
     animation: drop-fade-above 0.15s;

ui/lib/core/addon/components/bar-chart.js

@@ -19,7 +19,7 @@
  * @param {string} title - title of the chart
  * @param {array} mapLegend - array of objects with key names 'key' and 'label' for the map legend
  * @param {object} dataset - dataset for the chart
- * @param {array} tooltipData - misc. information needed to display tooltip (i.e. total clients from query params)
+ * @param {any} tooltipData - misc. information needed to display tooltip (i.e. total clients from query params)
  * @param {string} [description] - description of the chart
  * @param {string} [labelKey=label] - labelKey is the key name in the dataset passed in that corresponds to the value labeling the y-axis
  * @param {function} [onClick] - takes function from parent and passes it to click event on data bars

ui/lib/core/addon/components/info-table-row.js

@@ -42,6 +42,7 @@ export default Component.extend({
   tooltipText: '',
   isTooltipCopyable: false,
   defaultShown: '',
+  hasLabelOverflow: false, // is calculated and set in didInsertElement
 
   valueIsBoolean: computed('value', function() {
     return typeOf(this.value) === 'boolean';
@@ -63,4 +64,16 @@ export default Component.extend({
         return false;
     }
   }),
+
+  didInsertElement() {
+    this._super(...arguments);
+    const labelDiv = this.element.querySelector('div');
+    const labelText = this.element.querySelector('.is-label');
+    if (labelDiv && labelText) {
+      if (labelText.offsetWidth > labelDiv.offsetWidth) {
+        labelDiv.classList.add('label-overflow');
+        this.set('hasLabelOverflow', true);
+      }
+    }
+  },
 });

ui/lib/core/addon/templates/components/info-table-row.hbs

@@ -1,7 +1,23 @@
 {{#if (or alwaysRender value)}}
   <div class="column is-one-quarter" data-test-label-div>
     {{#if label}}
-      <span class="is-label has-text-grey-dark" data-test-row-label="{{label}}">{{label}}</span>
+      {{#if hasLabelOverflow}}
+        <ToolTip
+          @verticalPosition="below"
+          @horizontalPosition="left"
+          as |T|>
+          <T.trigger @tabindex=false>
+            <span class="is-label has-text-grey-dark" data-test-row-label="{{label}}">{{label}}</span>  
+          </T.trigger>
+          <T.content @class="tool-tip">
+            <div class="box fit-content">
+              {{label}}
+            </div>
+          </T.content>
+        </ToolTip>
+      {{else}}
+        <span class="is-label has-text-grey-dark" data-test-row-label="{{label}}">{{label}}</span>
+      {{/if}}
       {{#if helperText}}
         <div> 
           <span class="is-label helper-text has-text-grey">{{helperText}}</span>

ui/lib/core/stories/info-table-row.md

@@ -19,6 +19,7 @@ that the value breaks under the label on smaller viewports.
 | [backend] | <code>String</code> |  | Passed through to InfoTableItemArray. To specify secrets backend to point link to  Ex: transformation |
 | [viewAll] | <code>String</code> |  | Passed through to InfoTableItemArray. Specify the word at the end of the link View all. |
 | [tooltipText] | <code>String</code> |  | Text if a tooltip should display over the value. |
+| [isTooltipCopyable] | <code>Boolean</code> |  | Allows tooltip click to copy |
 | [defaultShown] | <code>String</code> |  | Text that renders as value if alwaysRender=true. Eg. "Vault default" |
 
 **Example**

ui/lib/core/stories/info-table-row.stories.js

@@ -16,14 +16,18 @@ storiesOf('InfoTable/InfoTableRow', module)
         @label={{label}} 
         @helperText={{helperText}} 
         @alwaysRender={{alwaysRender}} 
-        @tooltipText={{tooltipText}} />
+        @defaultShown={{defaultShown}} 
+        @tooltipText={{tooltipText}}
+        @isTooltipCopyable={{isTooltipCopyable}} />
     `,
       context: {
         label: text('Label', 'TTL'),
         value: text('Value', '30m (hover to see the tooltip!)'),
         helperText: text('helperText', 'This is helperText - for a short description'),
         alwaysRender: boolean('Always render?', false),
+        defaultShown: text('Default value', 'Some default value'),
         tooltipText: text('tooltipText', 'This is tooltipText'),
+        isTooltipCopyable: boolean('Allow tooltip to be copied', true),
       },
     }),
     { notes }