From 247dfe5f7f95ffa57833f9e8f1f5e41240a8f686 Mon Sep 17 00:00:00 2001
From: Vova Kulikov <vova@sourcegraph.com>
Date: Sat, 28 Aug 2021 02:18:42 +0300
Subject: [PATCH]  Code Insights: another attempt to fix flaky screenshot tests
 (#24383)

* Do not render tooltip in Percy run

* Add log is percy var

* Fix node version

* Fix log statement

* Fix log statement

* Fix log statement

* log process env only

* Fix is_percy env read

* Use read env helper to read percy on env variable

* Add percy inactive element (remove old fix)
---
 .percy.yml                                    |  3 +++
 .../charts/line/components/GlyphContent.tsx   | 19 ++++++++++++++-----
 .../line/components/LineChartContent.tsx      | 15 +++++++--------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/.percy.yml b/.percy.yml
index ea6ad8f0103..276c2ebda66 100644
--- a/.percy.yml
+++ b/.percy.yml
@@ -7,3 +7,6 @@ snapshot:
     .monaco-editor .cursor {
       visibility: hidden !important;
     }
+    .percy-inactive-element {
+      pointer-events: none !important;
+    }
diff --git a/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/GlyphContent.tsx b/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/GlyphContent.tsx
index beaadd3b15a..11831783c64 100644
--- a/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/GlyphContent.tsx
+++ b/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/GlyphContent.tsx
@@ -23,24 +23,33 @@ interface GlyphContentProps<Datum extends object> extends Omit<GlyphProps<Datum>
      * Just because GlyphProps has a bug with types.
      * GlyphProps key is an index of current datum and
      * GlyphProps index doesn't exist in runtime.
-     * */
+     */
     index: string
+
     /** Hovered point info (datum) to calculate proper styles for particular Glyph */
     hoveredDatum: ActiveDatum<Datum> | null
+
     /** Focused point info (datum) to calculate proper styles for particular Glyph */
     focusedDatum: ActiveDatum<Datum> | null
-    /** Focus handler for glyph (chart point) */
-    setFocusedDatum: (datum: ActiveDatum<Datum> | null) => void
+
     /** Map with getters to have a proper value of by x and y axis value for current point */
     accessors: Accessors<Datum, keyof Datum>
+
     /** Line (series) index of current point */
     lineIndex: number
+
     /** Total number of lines (series) to calculate proper aria-label for glyph content */
     totalNumberOfLines: number
+
     /** Data of particular line of current glyph (chart point) */
     line: LineChartContentProps<Datum>['series'][number]
+
+    /** Focus handler for glyph (chart point) */
+    setFocusedDatum: (datum: ActiveDatum<Datum> | null) => void
+
     /** On click handler for root component of glyph content */
     onClick: MouseEventHandler
+
     /** On pointer up handler for root component of glyph content */
     onPointerUp: PointerEventHandler
 }
@@ -56,11 +65,11 @@ export function GlyphContent<Datum extends object>(props: GlyphContentProps<Datu
         accessors,
         lineIndex,
         totalNumberOfLines,
+        x: xCoordinate,
+        y: yCoordinate,
         onPointerUp,
         onClick,
         setFocusedDatum,
-        x: xCoordinate,
-        y: yCoordinate,
     } = props
 
     const currentDatumIndex = +index
diff --git a/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/LineChartContent.tsx b/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/LineChartContent.tsx
index 50c8401433c..c4e6e6c5f9d 100644
--- a/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/LineChartContent.tsx
+++ b/client/web/src/insights/components/insight-view-content/chart-view-content/charts/line/components/LineChartContent.tsx
@@ -23,13 +23,6 @@ import { NonActiveBackground } from './NonActiveBackground'
 import { dateTickFormatter, numberFormatter, Tick, getTickXProps, getTickYProps } from './TickComponent'
 import { TooltipContent } from './TooltipContent'
 
-/**
- * Check percy test run to be able disable flaky line chart tooltip appearance
- * by disabling any point events over line chart container.
- * See https://github.com/sourcegraph/sourcegraph/issues/23669
- */
-const IS_PERCY_RUN = process.env.PERCY_ON === 'true'
-
 // Chart configuration
 const WIDTH_PER_TICK = 70
 const HEIGHT_PER_TICK = 40
@@ -176,6 +169,7 @@ export function LineChartContent<Datum extends object>(props: LineChartContentPr
     const { onPointerMove = noop, onPointerOut = noop, ...otherHandlers } = usePointerEventEmitters({
         source: XYCHART_EVENT_SOURCE,
         onFocus: true,
+        onBlur: true,
     })
 
     // We only need to catch pointerout event on root element - chart
@@ -218,6 +212,7 @@ export function LineChartContent<Datum extends object>(props: LineChartContentPr
         [focused, onPointerOut, setHoveredDatum]
     )
 
+    // Disable all event listeners explicitly to avoid flaky tooltip appearance
     const eventEmitters = {
         onPointerMove: handleRootPointerMove,
         onPointerOut: handleRootPointerOut,
@@ -297,7 +292,11 @@ export function LineChartContent<Datum extends object>(props: LineChartContentPr
                             // eslint-disable-next-line jsx-a11y/aria-role
                             role="graphics-datagroup"
                             aria-label="Chart series"
-                            pointerEvents={IS_PERCY_RUN ? 'none' : 'bounding-box'}
+                            pointerEvents="bounding-box"
+                            // Check percy test run to be able disable flaky line chart tooltip appearance
+                            // by disabling any point events over line chart container.
+                            // See https://github.com/sourcegraph/sourcegraph/issues/23669
+                            className="percy-inactive-element"
                             {...eventEmitters}
                         >
                             {/* Spread size of parent group element by transparent rect with width and height */}