Merge branch 'main' into update-cell-hover-style

iterative · Aug 19, 2022 · 9066afc · 9066afc
2 parents d26305c + 7b6d699
commit 9066afc
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 21 deletions.
diff --git a/extension/package.json b/extension/package.json
@@ -1571,7 +1571,7 @@
     "@types/lodash.omit": "4.5.7",
     "@types/mocha": "9.1.1",
     "@types/mock-require": "2.0.1",
-    "@types/node": "16.11.47",
+    "@types/node": "16.11.48",
     "@types/react-vega": "7.0.0",
     "@types/sinon-chai": "3.2.8",
     "@types/uuid": "8.3.4",

diff --git a/webview/package.json b/webview/package.json
@@ -53,7 +53,7 @@
     "@types/classnames": "2.3.1",
     "@types/jest": "28.1.6",
     "@types/jsdom": "20.0.0",
-    "@types/node": "16.11.47",
+    "@types/node": "16.11.48",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
     "@types/react-measure": "2.0.8",

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.test.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.test.tsx
@@ -14,6 +14,10 @@ import {
 } from './ComparisonTableRow'
 import styles from '../styles.module.scss'
 import { plotsReducers } from '../../store'
+import {
+  clearSelection,
+  createWindowTextSelection
+} from '../../../test/selection'
 
 jest.mock('../../../shared/api')
 
@@ -67,27 +71,56 @@ describe('ComparisonTableRow', () => {
     renderRow()
 
     const rowToggler = screen.getByText(basicProps.path)
-    const [plot] = screen.getAllByAltText(
-      /(Plot of path\/to\/the-file\/image\.png)/
-    )
+    const [row] = screen.getAllByTestId('row-images')
 
-    /* eslint-disable testing-library/no-node-access */
-    expect(plot.parentElement).not.toHaveClass(styles.cellHidden)
+    expect(row).not.toHaveClass(styles.cellHidden)
 
     fireEvent.click(rowToggler, {
       bubbles: true,
       cancelable: true
     })
 
-    /* eslint-disable testing-library/no-node-access */
-    expect(plot.parentElement).toHaveClass(styles.cellHidden)
+    expect(row).toHaveClass(styles.cellHidden)
 
     fireEvent.click(rowToggler, {
       bubbles: true,
       cancelable: true
     })
 
-    /* eslint-disable testing-library/no-node-access */
-    expect(plot.parentElement).not.toHaveClass(styles.cellHidden)
+    expect(row).not.toHaveClass(styles.cellHidden)
+  })
+
+  it('should not toggle the row if the path was selected', () => {
+    renderRow()
+
+    const rowToggler = screen.getByText(basicProps.path)
+    const [row] = screen.getAllByTestId('row-images')
+
+    createWindowTextSelection(basicProps.path, 5)
+    fireEvent.click(rowToggler)
+
+    expect(row).not.toHaveClass(styles.cellHidden)
+
+    clearSelection()
+    fireEvent.click(rowToggler)
+
+    expect(row).toHaveClass(styles.cellHidden)
+
+    createWindowTextSelection(basicProps.path, 0)
+    fireEvent.click(rowToggler)
+
+    expect(row).not.toHaveClass(styles.cellHidden)
+  })
+
+  it('should toggle the row if some other path is selected', () => {
+    renderRow()
+
+    const rowToggler = screen.getByText(basicProps.path)
+    const [row] = screen.getAllByTestId('row-images')
+
+    createWindowTextSelection('other/path/img.gif', 5)
+    fireEvent.click(rowToggler)
+
+    expect(row).toHaveClass(styles.cellHidden)
   })
 })
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx
@@ -9,6 +9,7 @@ import { RefreshButton } from '../../../shared/components/button/RefreshButton'
 import { sendMessage } from '../../../shared/vscode'
 import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
 import { PlotsState } from '../../store'
+import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
 
 export interface ComparisonTableRowProps {
   path: string
@@ -28,16 +29,28 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
   )
   const [isShown, setIsShown] = useState(true)
 
-  const toggleIsShownState = () => setIsShown(!isShown)
+  const toggleIsShownState = () => {
+    const selection = window.getSelection()
+    if (
+      selection?.focusNode?.nodeValue === path &&
+      selection.anchorOffset !== selection.focusOffset
+    ) {
+      return
+    }
+    setIsShown(!isShown)
+  }
 
   return (
     <tbody>
       <tr>
         <td className={cx({ [styles.pinnedColumnCell]: pinnedColumn })}>
-          <button className={styles.rowToggler} onClick={toggleIsShownState}>
-            <Icon icon={isShown ? ChevronDown : ChevronRight} />
-            {path}
-          </button>
+          <div className={styles.rowPath}>
+            <button className={styles.rowToggler} onClick={toggleIsShownState}>
+              <Icon icon={isShown ? ChevronDown : ChevronRight} />
+              {path}
+            </button>
+            <CopyButton value={path} className={styles.copyButton} />
+          </div>
         </td>
         {nbColumns > 1 && <td colSpan={nbColumns - 1}></td>}
       </tr>
@@ -56,6 +69,7 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
               })}
             >
               <div
+                data-testid="row-images"
                 className={cx(styles.cell, { [styles.cellHidden]: !isShown })}
               >
                 {missing ? (

diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -90,11 +90,11 @@ $gap: 4px;
 
 .rowToggler {
   border: none;
-  width: 100%;
   background: none;
   color: $fg-color;
   text-align: left;
   display: flex;
+  user-select: text;
 
   svg {
     fill: $fg-color;
@@ -173,3 +173,18 @@ $gap: 4px;
   opacity: 1;
   color: $bg-color;
 }
+
+.copyButton {
+  display: none;
+}
+
+.rowPath {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  &:hover .copyButton {
+    display: inline;
+    font-size: 0.8125rem;
+  }
+}
diff --git a/webview/src/test/selection.ts b/webview/src/test/selection.ts
@@ -0,0 +1,14 @@
+export const createWindowTextSelection = (
+  nodeValue: string | null,
+  offset = 0
+) => {
+  window.getSelection = () => {
+    return {
+      anchorOffset: 1,
+      focusNode: nodeValue ? ({ nodeValue } as Node) : null,
+      focusOffset: 1 + offset
+    } as Selection
+  }
+}
+
+export const clearSelection = () => createWindowTextSelection(null)
diff --git a/yarn.lock b/yarn.lock
@@ -3969,10 +3969,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
   integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
 
-"@types/node@16.11.47":
-  version "16.11.47"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.47.tgz#efa9e3e0f72e7aa6a138055dace7437a83d9f91c"
-  integrity sha512-fpP+jk2zJ4VW66+wAMFoBJlx1bxmBKx4DUFf68UHgdGCOuyUTDlLWqsaNPJh7xhNDykyJ9eIzAygilP/4WoN8g==
+"@types/node@16.11.48":
+  version "16.11.48"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.48.tgz#22d386f32b24fb644940b606ed393b56be7d8686"
+  integrity sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==
 
 "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
   version "16.11.39"