Use copy button component for the plots ribbon experiments (#1812)

* Add plots ribbon

* Fix tests and event name

* Add tests

* Add react-virtualized

* Add extension test

* Add button in plots ribbon to add experiments

* Add tests

* Add refresh all button

* add refresh all visible action to plots (#1808)

* Use copy button instead of creating new copy function

* Fix tests

* Fix format after merge

Co-authored-by: mattseddon <[email protected]>

Author: sroy3

webview/src/experiments/components/table/styles.module.scss

@@ -478,18 +478,7 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 }
 
 .copyButton {
-  flex: 0 0 0.8em;
-  font-size: 1.5em;
   display: none;
-  border: none;
-  background: none;
-  color: $fg-color;
-  cursor: pointer;
-  width: 0.8em;
-  height: 0.8em;
-  line-height: 0.8em;
-  padding: 0;
-  margin: 0 0.25em;
 }
 
 .cellContents {

webview/src/experiments/util/buildDynamicColumns.tsx

@@ -14,7 +14,7 @@ import Tooltip, {
 } from '../../shared/components/tooltip/Tooltip'
 import styles from '../components/table/styles.module.scss'
 import tooltipStyles from '../../shared/components/tooltip/styles.module.scss'
-import { CopyButton } from '../components/copyButton/CopyButton'
+import { CopyButton } from '../../shared/components/copyButton/CopyButton'
 import { OverflowHoverTooltip } from '../components/overflowHoverTooltip/OverflowHoverTooltip'
 const UndefinedCell = (
   <div className={styles.innerCell}>
@@ -63,7 +63,11 @@ const Cell: React.FC<Cell<Experiment, string | number>> = cell => {
       delay={[CELL_TOOLTIP_DELAY, 0]}
     >
       <div className={styles.innerCell}>
-        <CopyButton value={stringValue} />
+        <CopyButton
+          value={stringValue}
+          className={styles.copyButton}
+          tooltip="Copy cell contents"
+        />
         <span className={styles.cellContents}>{displayValue}</span>
       </div>
     </Tooltip>

webview/src/plots/components/App.test.tsx

@@ -36,7 +36,6 @@ import { act } from 'react-dom/test-utils'
 import { App } from './App'
 import { Plots } from './Plots'
 import { NewSectionBlock } from './templatePlots/TemplatePlots'
-import { CopyTooltip } from './ribbon/RibbonBlock'
 import { vsCodeApi } from '../../shared/api'
 import { createBubbledEvent, dragAndDrop, dragEnter } from '../../test/dragDrop'
 import { DragEnterDirection } from '../../shared/components/dragDrop/util'
@@ -1526,79 +1525,5 @@ describe('App', () => {
         type: MessageFromWebviewType.REFRESH_REVISIONS
       })
     })
-
-    describe('Copy button', () => {
-      const mockWriteText = jest.fn()
-      Object.assign(navigator, {
-        clipboard: {
-          writeText: mockWriteText
-        }
-      })
-
-      beforeAll(() => {
-        jest.useFakeTimers()
-      })
-
-      afterAll(() => {
-        jest.useRealTimers()
-      })
-
-      it('should copy the experiment name when clicking the text', async () => {
-        mockWriteText.mockResolvedValueOnce('success')
-
-        renderAppWithData({
-          comparison: comparisonTableFixture,
-          sectionCollapsed: DEFAULT_SECTION_COLLAPSED
-        })
-
-        const mainNameButton = within(
-          screen.getByTestId('ribbon-main')
-        ).getAllByRole('button')[0]
-
-        fireEvent.mouseEnter(mainNameButton, { bubbles: true })
-        fireEvent.click(mainNameButton)
-
-        expect(mockWriteText).toBeCalledWith('main')
-        await screen.findByText(CopyTooltip.COPIED)
-      })
-
-      it('should display that the experiment was copied when clicking the text', async () => {
-        mockWriteText.mockResolvedValueOnce('success')
-
-        renderAppWithData({
-          comparison: comparisonTableFixture,
-          sectionCollapsed: DEFAULT_SECTION_COLLAPSED
-        })
-
-        const mainNameButton = within(
-          screen.getByTestId('ribbon-main')
-        ).getAllByRole('button')[0]
-
-        fireEvent.mouseEnter(mainNameButton, { bubbles: true })
-        fireEvent.click(mainNameButton)
-
-        expect(await screen.findByText(CopyTooltip.COPIED)).toBeInTheDocument()
-      })
-
-      it('should display copy again when hovering the text 2s after clicking the text', async () => {
-        mockWriteText.mockResolvedValueOnce('success')
-
-        renderAppWithData({
-          comparison: comparisonTableFixture,
-          sectionCollapsed: DEFAULT_SECTION_COLLAPSED
-        })
-
-        const mainNameButton = within(
-          screen.getByTestId('ribbon-main')
-        ).getAllByRole('button')[0]
-
-        fireEvent.mouseEnter(mainNameButton, { bubbles: true })
-        fireEvent.click(mainNameButton)
-
-        jest.advanceTimersByTime(2001)
-
-        expect(await screen.findByText(CopyTooltip.NORMAL)).toBeInTheDocument()
-      })
-    })
   })
 })

webview/src/plots/components/ribbon/RibbonBlock.tsx

@@ -1,8 +1,9 @@
 import { Revision } from 'dvc/src/plots/webview/contract'
-import React, { useRef, useState, useEffect } from 'react'
+import React from 'react'
 import styles from './styles.module.scss'
 import { AllIcons, Icon } from '../../../shared/components/Icon'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
+import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
 
 interface RibbonBlockProps {
   revision: Revision
@@ -18,26 +19,6 @@ export const RibbonBlock: React.FC<RibbonBlockProps> = ({
   revision,
   onClear
 }) => {
-  const [copyTooltip, setCopyTooltip] = useState(CopyTooltip.NORMAL)
-  const copyTooltipTimeout = useRef(0)
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(copyTooltipTimeout.current)
-    }
-  }, [])
-
-  const copyExp = async (exp: string) => {
-    try {
-      await navigator.clipboard.writeText(exp)
-      setCopyTooltip(CopyTooltip.COPIED)
-      copyTooltipTimeout.current = window.setTimeout(() => {
-        setCopyTooltip(CopyTooltip.NORMAL)
-      }, 2000)
-    } catch {
-      setCopyTooltip(CopyTooltip.NORMAL)
-    }
-  }
   const exp = revision.group?.replace(/[[\]]/g, '') || revision.revision
 
   return (
@@ -46,14 +27,15 @@ export const RibbonBlock: React.FC<RibbonBlockProps> = ({
       style={{ borderColor: revision.displayColor }}
       data-testid={`ribbon-${revision.id}`}
     >
-      <Tooltip content={<>{copyTooltip}</>} hideOnClick={false} delay={500}>
-        <button className={styles.label} onClick={() => copyExp(exp)}>
-          <span>{exp}</span>
-          {revision.group && (
-            <span className={styles.subtitle}>{revision.revision}</span>
-          )}
-        </button>
-      </Tooltip>
+      <div className={styles.label}>
+        <div className={styles.title}>
+          <CopyButton value={exp} className={styles.copyButton} />
+          {exp}
+        </div>
+        {revision.group && (
+          <div className={styles.subtitle}>{revision.revision}</div>
+        )}
+      </div>
       <Tooltip content="Clear" placement="bottom" delay={500}>
         <button className={styles.clearButton} onClick={onClear}>
           <Icon icon={AllIcons.CLOSE} width={12} height={12} />

webview/src/plots/components/ribbon/styles.module.scss

@@ -1,5 +1,9 @@
 @import '../../../shared/variables.scss';
 
+.copyButton {
+  display: none;
+}
+
 .block {
   border-left-style: solid;
   border-left-width: 3px;
@@ -16,6 +20,11 @@
     fill: $fg-color;
     display: block;
   }
+
+  &:hover .copyButton {
+    display: inline;
+    font-size: 0.8125rem;
+  }
 }
 
 .label {
@@ -24,11 +33,15 @@
   border: none;
   text-align: left;
   color: $fg-color;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   min-width: max-content;
+}
 
-  span {
-    display: block;
-  }
+.title {
+  display: inline-flex;
+  align-items: center;
 }
 
 .subtitle {

webview/src/experiments/components/copyButton/CopyButton.test.tsx renamed to webview/src/shared/components/copyButton/CopyButton.test.tsx

@@ -35,7 +35,7 @@ describe('CopyButton', () => {
 
   it('should call writeText with the value prop and show the success icon for a second when writeText resolves', async () => {
     mockWriteText.mockResolvedValueOnce(undefined)
-    render(<CopyButton value={exampleCopyText} />)
+    render(<CopyButton value={exampleCopyText} tooltip={defaultStateTitle} />)
     const copyButtonElement = screen.getByTitle(defaultStateTitle)
 
     fireEvent.click(copyButtonElement, {
@@ -53,7 +53,7 @@ describe('CopyButton', () => {
 
   it('should call writeText with the value prop and show the failure icon for a second when writeText rejects', async () => {
     mockWriteText.mockRejectedValueOnce(new Error('Copying is not allowed!'))
-    render(<CopyButton value={exampleCopyText} />)
+    render(<CopyButton value={exampleCopyText} tooltip={defaultStateTitle} />)
     const copyButtonElement = screen.getByTitle(defaultStateTitle)
 
     fireEvent.click(copyButtonElement, {
@@ -73,7 +73,7 @@ describe('CopyButton', () => {
 
   it('should restart the state reset timer if clicked while in the success state', async () => {
     mockWriteText.mockResolvedValueOnce(undefined)
-    render(<CopyButton value={exampleCopyText} />)
+    render(<CopyButton value={exampleCopyText} tooltip={defaultStateTitle} />)
     const copyButtonElement = screen.getByTitle(defaultStateTitle)
 
     // Click once

webview/src/experiments/components/copyButton/CopyButton.tsx renamed to webview/src/shared/components/copyButton/CopyButton.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useEffect, useRef, useState } from 'react'
-import CopyIcon from '../../../shared/components/icons/Copy'
-import CheckIcon from '../../../shared/components/icons/Check'
-import styles from '../table/styles.module.scss'
+import cx from 'classnames'
+import styles from './styles.module.scss'
+import CopyIcon from '../icons/Copy'
+import CheckIcon from '../icons/Check'
 
 const enum CopyButtonState {
   DEFAULT,
@@ -17,13 +18,17 @@ const copyIconComponents: Record<CopyButtonState, FC> = {
   [CopyButtonState.FAILURE]: FailureIcon
 }
 
-const copyIconTitles: Record<CopyButtonState, string> = {
-  [CopyButtonState.DEFAULT]: 'Copy cell contents',
-  [CopyButtonState.SUCCESS]: 'Copy successful',
-  [CopyButtonState.FAILURE]: 'Copy failed'
-}
+export const CopyButton: React.FC<{
+  value: string
+  tooltip?: string
+  className?: string
+}> = ({ value, tooltip, className }) => {
+  const copyIconTitles: Record<CopyButtonState, string> = {
+    [CopyButtonState.DEFAULT]: tooltip || 'Copy',
+    [CopyButtonState.SUCCESS]: 'Copy successful',
+    [CopyButtonState.FAILURE]: 'Copy failed'
+  }
 
-export const CopyButton: React.FC<{ value: string }> = ({ value }) => {
   const timer = useRef<number>()
   const [state, setState] = useState<CopyButtonState>(CopyButtonState.DEFAULT)
   const IconComponent = copyIconComponents[state]
@@ -38,7 +43,7 @@ export const CopyButton: React.FC<{ value: string }> = ({ value }) => {
   return (
     <button
       title={copyIconTitles[state]}
-      className={styles.copyButton}
+      className={cx(styles.button, className)}
       onClick={() => {
         navigator.clipboard
           .writeText(value)

webview/src/shared/components/copyButton/styles.module.scss

@@ -0,0 +1,16 @@
+@import '../../variables.scss';
+
+.button {
+  flex: 0 0 0.8em;
+  font-size: 1.5em;
+  display: none;
+  border: none;
+  background: none;
+  color: $fg-color;
+  cursor: pointer;
+  width: 0.8em;
+  height: 0.8em;
+  line-height: 0.8em;
+  padding: 0;
+  margin: 0 0.25em;
+}