From 16be98fa1cefc635bfba2a93b94adf8dd7e89a91 Mon Sep 17 00:00:00 2001
From: Jordan Reimer <jreimer@songspace.com>
Date: Thu, 21 Oct 2021 09:26:56 -0600
Subject: [PATCH] UI Conditionally Copy Tooltips (#12890)

* adds conditional tooltip copying to InfoTableRow component

* adds changelog entry
---
 changelog/12890.txt                           |  3 +++
 .../generate-credentials-database.hbs         |  1 +
 .../core/addon/components/info-table-row.js   |  2 ++
 ui/lib/core/addon/components/tool-tip.js      |  2 +-
 .../templates/components/info-table-row.hbs   | 15 +++++++++---
 .../addon/templates/components/tool-tip.hbs   | 10 +++++---
 .../components/info-table-row-test.js         | 23 +++++++++++++++++++
 7 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 changelog/12890.txt

diff --git a/changelog/12890.txt b/changelog/12890.txt
new file mode 100644
index 000000000..603e72d8d
--- /dev/null
+++ b/changelog/12890.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Click to copy database static role last rotation value in tooltip 
+```
\ No newline at end of file
diff --git a/ui/app/templates/components/generate-credentials-database.hbs b/ui/app/templates/components/generate-credentials-database.hbs
index c28cba720..1ce449d1c 100644
--- 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
index 36a81e7d9..ae66657b0 100644
--- 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
index 20ce3a48f..02d4f675d 100644
--- 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
index 0f3bfb2ae..676bea71f 100644
--- 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
index b6fb4e837..b987aebac 100644
--- 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
index 9093109b2..b24f48f5a 100644
--- 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