Add tooltip to shareable urls copy button (#1614)

* Add tooltip to copy button, update tooltip to handle arrow size and position Signed-off-by: Vladimir <[email protected]> * Add tooltip to command copier, update tooltip Signed-off-by: Vladimir <[email protected]> * Fix scss errors, sort tooltip react props, update tooltip padding Signed-off-by: Vladimir <[email protected]> * Add to release notes Signed-off-by: Vladimir <[email protected]> --------- Signed-off-by: Vladimir <[email protected]> Co-authored-by: Tynan DeBold <[email protected]>
kedro-org · Nov 3, 2023 · 6c063bf · 6c063bf
1 parent 6e34745
commit 6c063bf
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 78 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -5,11 +5,13 @@ Please follow the established format:
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
+
 # Upcoming Release
 
 ## Bug fixes and other changes
 
 - Fix dataset factory patterns in Experiment Tracking. (#1588)
+- Improved feedback for copy to clipboard feature. (#1614)
 
 # Release 6.6.1
 

diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
@@ -658,7 +658,11 @@ export class FlowChart extends Component {
           })}
           ref={this.layerNamesRef}
         />
-        <Tooltip chartSize={chartSize} {...this.state.tooltip} />
+        <Tooltip
+          chartSize={chartSize}
+          {...this.state.tooltip}
+          style={{ fontSize: '1.5em' }}
+        />
       </div>
     );
   }

diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { toggleShareableUrlModal } from '../../actions';
-import modifiers from '../../utils/modifiers';
 import { s3BucketRegions } from '../../config';
 
 import Button from '../ui/button';
@@ -13,6 +12,7 @@ import Input from '../ui/input';
 import LoadingIcon from '../icons/loading';
 import Modal from '../ui/modal';
 import MenuOption from '../ui/menu-option';
+import Tooltip from '../ui/tooltip';
 
 import './shareable-url-modal.scss';
 
@@ -117,7 +117,10 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
   const onCopyClick = () => {
     window.navigator.clipboard.writeText(responseUrl);
     setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 1500);
+
+    setTimeout(() => {
+      setShowCopied(false);
+    }, 1500);
   };
 
   const handleModalClose = () => {
@@ -246,32 +249,30 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
             <div className="shareable-url-modal__label">Hosted link</div>
             <div className="shareable-url-modal__url-wrapper">
               <a
-                className={modifiers('shareable-url-modal__result-url', {
-                  visible: !showCopied,
-                })}
-                href={responseUrl}
+                className="shareable-url-modal__result-url"
+                href="/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 {responseUrl}
               </a>
               {window.navigator.clipboard && (
-                <>
-                  <span
-                    className={modifiers('copy-message', {
-                      visible: showCopied,
-                    })}
-                  >
-                    Copied to clipboard.
-                  </span>
+                <div className="shareable-url-modal__result-action">
                   <IconButton
                     ariaLabel="Copy run command to clipboard."
                     className="copy-button"
                     dataHeapEvent={`clicked.run_command`}
                     icon={CopyIcon}
                     onClick={onCopyClick}
                   />
-                </>
+                  <Tooltip
+                    text="Copied!"
+                    visible={showCopied}
+                    noDelay
+                    centerArrow
+                    arrowSize="small"
+                  />
+                </div>
               )}
             </div>
           </div>

diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -150,8 +150,6 @@
 
     .pipeline-icon--container {
       display: block;
-      margin: 0 12px 0 16px;
-      position: absolute;
       right: 6px;
     }
   }
@@ -161,6 +159,11 @@
     font-size: 16px;
     line-height: 20px;
   }
+
+  &__result-action {
+    position: relative;
+    margin: 0 12px 0 16px;
+  }
 }
 
 .shareable-url-timestamp {

diff --git a/src/components/ui/command-copier/command-copier.js b/src/components/ui/command-copier/command-copier.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import modifiers from '../../../utils/modifiers';
 import MetaDataValue from '../../metadata/metadata-value';
 import IconButton from '../../ui/icon-button';
+import Tooltip from '../tooltip';
 import CopyIcon from '../../icons/copy';
 import './command-copier.scss';
 
@@ -11,37 +11,34 @@ const CommandCopier = ({ command, isCommand }) => {
   const onCopyClick = () => {
     window.navigator.clipboard.writeText(command);
     setShowCopied(true);
+
     setTimeout(() => setShowCopied(false), 1500);
   };
 
   return (
     <div className="container">
       <MetaDataValue
         container={'code'}
-        className={modifiers('command-value', {
-          visible: !showCopied,
-        })}
+        className="command-value"
         value={command}
       />
       {window.navigator.clipboard && isCommand && (
-        <>
-          <span
-            className={modifiers('copy-message', {
-              visible: showCopied,
-            })}
-          >
-            Copied to clipboard.
-          </span>
-          <ul className="toolbox">
-            <IconButton
-              ariaLabel="Copy run command to clipboard."
-              className="copy-button"
-              dataHeapEvent={`clicked.run_command`}
-              icon={CopyIcon}
-              onClick={onCopyClick}
-            />
-          </ul>
-        </>
+        <ul className="toolbox">
+          <IconButton
+            ariaLabel="Copy run command to clipboard."
+            className="copy-button"
+            dataHeapEvent={`clicked.run_command`}
+            icon={CopyIcon}
+            onClick={onCopyClick}
+          />
+          <Tooltip
+            text="Copied!"
+            visible={showCopied}
+            noDelay
+            centerArrow
+            arrowSize="small"
+          />
+        </ul>
       )}
     </div>
   );

diff --git a/src/components/ui/command-copier/command-copier.scss b/src/components/ui/command-copier/command-copier.scss
@@ -28,6 +28,7 @@
 }
 
 .toolbox {
+  position: relative;
   display: block;
   width: 26px;
   height: 34px;

diff --git a/src/components/ui/tooltip/tooltip.js b/src/components/ui/tooltip/tooltip.js
@@ -14,39 +14,74 @@ export const insertZeroWidthSpace = (text) =>
 
 /**
  * Display flowchart node tooltip
+ * @param {string}  arrowSize Tooltip arrow size regular | small
+ * @param {boolean}  centerArrow Where to center tooltip arrow or not
  * @param {Object} chartSize Chart dimensions in pixels
+ * @param {boolean}  noDelay Where to show the tooltip immediately or after 1 sec delay
+ * @param {Object}  style Tooltip custom css
  * @param {Object} targetRect event.target.getBoundingClientRect()
- * @param {Boolean} visible Whether to show the tooltip
  * @param {String} text Tooltip display label
+ * @param {Boolean} visible Whether to show the tooltip
  */
-const Tooltip = ({ chartSize, targetRect, visible, text }) => {
-  const { left, top, width, height, outerWidth, sidebarWidth } = chartSize;
-  const isRight = targetRect.left - sidebarWidth > width / 2;
-  const isTop = targetRect.top < height / 2;
-  const xOffset = isRight ? targetRect.left - outerWidth : targetRect.left;
-  const yOffset = isTop ? targetRect.top + targetRect.height : targetRect.top;
-  const x = xOffset - left + targetRect.width / 2;
-  const y = yOffset - top;
+const Tooltip = ({
+  arrowSize,
+  centerArrow,
+  chartSize,
+  noDelay,
+  style,
+  targetRect,
+  text,
+  visible,
+}) => {
+  let isTop = false,
+    isRight = false;
+  const isFlowchartTooltip = chartSize && Object.keys(chartSize).length;
+  const styles = { ...style };
+
+  if (isFlowchartTooltip) {
+    let x = 0,
+      y = 0;
+    const { left, top, width, height, outerWidth, sidebarWidth } = chartSize;
+
+    isRight = targetRect.left - sidebarWidth > width / 2;
+    isTop = targetRect.top < height / 2;
+
+    const xOffset = isRight ? targetRect.left - outerWidth : targetRect.left;
+    const yOffset = isTop ? targetRect.top + targetRect.height : targetRect.top;
+
+    x = xOffset - left + targetRect.width / 2;
+    y = yOffset - top;
+
+    styles.transform = `translate(${x}px, ${y}px)`;
+  }
 
   return (
     <div
       className={classnames('pipeline-tooltip', {
         'pipeline-tooltip--visible': visible,
         'pipeline-tooltip--right': isRight,
         'pipeline-tooltip--top': isTop,
+        'pipeline-tooltip--chart': isFlowchartTooltip,
+        'pipeline-tooltip--no-delay': noDelay,
+        'pipeline-tooltip--center-arrow': centerArrow,
+        'pipeline-tooltip--small-arrow': arrowSize === 'small',
       })}
-      style={{ transform: `translate(${x}px, ${y}px)` }}
+      style={styles}
     >
       <div className="pipeline-tooltip__text">{insertZeroWidthSpace(text)}</div>
     </div>
   );
 };
 
 Tooltip.defaultProps = {
+  arrowSize: 'regular',
+  centerArrow: false,
   chartSize: {},
+  noDelay: false,
+  style: {},
   targetRect: {},
-  visible: false,
   text: '',
+  visible: false,
 };
 
 export default Tooltip;