UI Conditionally Copy Tooltips (#12890)

* adds conditional tooltip copying to InfoTableRow component * adds changelog entry
hashicorp · Oct 21, 2021 · 39b80b8 · 39b80b8
1 parent 4ef0d3e
commit 39b80b8
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 7 deletions.
diff --git a/changelog/12890.txt b/changelog/12890.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Click to copy database static role last rotation value in tooltip 
+```
diff --git a/ui/app/templates/components/generate-credentials-database.hbs b/ui/app/templates/components/generate-credentials-database.hbs
@@ -76,6 +76,7 @@
       @label="Last Vault rotation"
       @value={{date-format @model.lastVaultRotation 'MMMM d yyyy, h:mm:ss a'}} 
       @tooltipText={{@model.lastVaultRotation}}
+      @isTooltipCopyable={{true}}
     />
     <InfoTableRow @label="Password" @value={{@model.password}}>
       <MaskedInput

diff --git a/ui/lib/core/addon/components/info-table-row.js b/ui/lib/core/addon/components/info-table-row.js
@@ -25,6 +25,7 @@ import layout from '../templates/components/info-table-row';
  * @param [backend] {String} - Passed through to InfoTableItemArray. To specify secrets backend to point link to  Ex: transformation
  * @param [viewAll] {String} - Passed through to InfoTableItemArray. Specify the word at the end of the link View all.
  * @param [tooltipText] {String} - Text if a tooltip should display over the value.
+ * @param [isTooltipCopyable] {Boolean} - Allows tooltip click to copy
  * @param [defaultShown] {String} - Text that renders as value if alwaysRender=true. Eg. "Vault default"
  */
 
@@ -39,6 +40,7 @@ export default Component.extend({
   helperText: null,
   value: null,
   tooltipText: '',
+  isTooltipCopyable: false,
   defaultShown: '',
 
   valueIsBoolean: computed('value', function() {

diff --git a/ui/lib/core/addon/components/tool-tip.js b/ui/lib/core/addon/components/tool-tip.js
@@ -3,6 +3,6 @@ import layout from '../templates/components/tool-tip';
 
 export default HoverDropdown.extend({
   layout,
-  delay: 0,
+  delay: 200, // delay allows tooltip to remain open on content hover
   horizontalPosition: 'auto-right',
 });
diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs
@@ -58,9 +58,18 @@
               <code class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</code>  
             </T.trigger>
             <T.content @class="tool-tip">
-              <div class="box">
-                {{tooltipText}}
-              </div>
+              <CopyButton
+                @clipboardText={{tooltipText}}
+                @success={{action (set-flash-message 'Data copied!')}}
+                @tagName="div"
+                @disabled={{not this.isTooltipCopyable}}
+                class={{if this.isTooltipCopyable "has-pointer"}}
+                data-test-tooltip-copy
+              >
+                <div class="box">
+                  {{tooltipText}}
+                </div>
+              </CopyButton>
             </T.content>
           </ToolTip>
         {{else}}

diff --git a/ui/lib/core/addon/templates/components/tool-tip.hbs b/ui/lib/core/addon/templates/components/tool-tip.hbs
@@ -1,4 +1,5 @@
-{{#basic-dropdown-hover renderInPlace=renderInPlace
+{{#basic-dropdown-hover
+  renderInPlace=renderInPlace
   verticalPosition=verticalPosition
   horizontalPosition=horizontalPosition
   matchTriggerWidth=matchTriggerWidth
@@ -8,14 +9,17 @@
   onOpen=onOpen
   onClose=onClose
   onFocus=onFocus
-  calculateInPlacePosition=calculateInPlacePosition as |dd|}}
+  calculateInPlacePosition=calculateInPlacePosition
+  as |dd|
+}}
   {{yield (assign
     dd
     (hash
       trigger=(component dd.trigger
         onMouseDown=(action "prevent")
         onMouseEnter=(action "open")
-        onMouseLeave=(action "close"))
+        onMouseLeave=(action "close")
+      )
       content=(component dd.content
         onMouseEnter=(action "open")
         onMouseLeave=(action "close")

diff --git a/ui/tests/integration/components/info-table-row-test.js b/ui/tests/integration/components/info-table-row-test.js
@@ -71,6 +71,29 @@ module('Integration | Component | InfoTableRow', function(hooks) {
     assert.equal(tooltip, 'Tooltip text!', 'renders tooltip text');
   });
 
+  test('it should copy tooltip', async function(assert) {
+    assert.expect(4);
+
+    this.set('isCopyable', false);
+
+    await render(hbs`
+      <InfoTableRow 
+        @label={{label}}
+        @value={{value}} 
+        @tooltipText="Foo bar"
+        @isTooltipCopyable={{isCopyable}}
+      />
+    `);
+
+    await triggerEvent('[data-test-value-div="test label"] .ember-basic-dropdown-trigger', 'mouseenter');
+    await settled();
+    assert.dom('[data-test-tooltip-copy]').hasAttribute('disabled', '', 'Tooltip copy button is disabled');
+    assert.dom('[data-test-tooltip-copy]').doesNotHaveClass('has-pointer', 'Pointer class not applied when disabled');
+    this.set('isCopyable', true);
+    assert.dom('[data-test-tooltip-copy]').doesNotHaveAttribute('disabled', 'Tooltip copy button is enabled');
+    assert.dom('[data-test-tooltip-copy]').hasClass('has-pointer', 'Pointer class applied to copy button');
+  });
+
   test('it renders a string with no link if isLink is true and the item type is not an array.', async function(assert) {
     // This could be changed in the component so that it adds a link for any item type, but right now it should only add a link if item type is an array.
     await render(hbs`<InfoTableRow