From a981f3fad5dfe4cf507e836c79ff22b189fbe709 Mon Sep 17 00:00:00 2001
From: Stephanie Roy <stephanie@iterative.ai>
Date: Wed, 19 Oct 2022 10:33:30 -0400
Subject: [PATCH] Check if element clicked is link to skip the toggle of the
 section

---
 webview/src/plots/components/App.test.tsx     | 26 +++++++++++++++++++
 .../src/plots/components/PlotsContainer.tsx   |  6 ++++-
 webview/src/util/objects.ts                   |  4 +++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
index 4c70b46669..cb03575d5c 100644
--- a/webview/src/plots/components/App.test.tsx
+++ b/webview/src/plots/components/App.test.tsx
@@ -428,6 +428,32 @@ describe('App', () => {
     })
   })
 
+  it('should not toggle the checkpoint plots section if a link is clicked', () => {
+    renderAppWithOptionalData({
+      checkpoint: checkpointPlotsFixture
+    })
+
+    const checkpointsTooltipToggle = screen.getAllByTestId(
+      'info-tooltip-toggle'
+    )[2]
+    fireEvent.mouseEnter(checkpointsTooltipToggle, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    const tooltip = screen.getByTestId('tooltip-checkpoint-plots')
+    const tooltipLink = within(tooltip).getByRole('link')
+    fireEvent.click(tooltipLink, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    expect(mockPostMessage).not.toHaveBeenCalledWith({
+      payload: { [Section.CHECKPOINT_PLOTS]: true },
+      type: MessageFromWebviewType.TOGGLE_PLOTS_SECTION
+    })
+  })
+
   it('should not toggle the checkpoint plots section when its header is clicked and the content of its tooltip is selected', async () => {
     renderAppWithOptionalData({
       checkpoint: checkpointPlotsFixture
diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx
index 5858d9a396..beee636082 100644
--- a/webview/src/plots/components/PlotsContainer.tsx
+++ b/webview/src/plots/components/PlotsContainer.tsx
@@ -18,6 +18,7 @@ import {
   Lines
 } from '../../shared/components/icons'
 import { isSelecting } from '../../util/strings'
+import { EventTargetWithNodeName } from '../../util/objects'
 
 export interface CommonPlotsContainerProps {
   onResize: (size: PlotSize) => void
@@ -139,7 +140,10 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
 
   const toggleSection = (e: MouseEvent) => {
     e.preventDefault()
-    if (!isSelecting([title, SectionDescription[sectionKey].props.children])) {
+    if (
+      !isSelecting([title, SectionDescription[sectionKey].props.children]) &&
+      !['A', 'BUTTON'].includes((e.target as EventTargetWithNodeName).nodeName)
+    ) {
       sendMessage({
         payload: {
           [sectionKey]: !sectionCollapsed
diff --git a/webview/src/util/objects.ts b/webview/src/util/objects.ts
index d3c80108cb..3a49462564 100644
--- a/webview/src/util/objects.ts
+++ b/webview/src/util/objects.ts
@@ -15,3 +15,7 @@ export type Obj = { [key: string]: Any }
 
 export const keepReferenceIfEqual = (old: BaseType, recent: BaseType) =>
   isEqual(old, recent) ? old : recent
+
+export interface EventTargetWithNodeName extends EventTarget {
+  nodeName: string
+}