feat(tooltip): pinned tooltip with actions (#1782)

BREAKING CHANGE: tooltip actions, interaction behavior and styles

Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
Co-authored-by: elastic-datavis[bot] <98618603+elastic-datavis[bot]@users.noreply.github.com>

.buildkite/utils/github.ts

@@ -32,7 +32,7 @@ const auth = JSON.parse(process.env.GITHUB_AUTH);
 const MyOctokit = Octokit.plugin(retry);
 export const octokit = new MyOctokit({
   authStrategy: createAppAuth,
-  auth: auth,
+  auth,
 });
 
 export const defaultGHOptions = {
@@ -237,7 +237,7 @@ export const updateCheckStatus = async (
     const output =
       title && typeof title === 'string'
         ? {
-            title: title,
+            title,
             summary: title,
             ...options.output,
           }

.eslintrc.js

@@ -94,9 +94,11 @@ module.exports = {
     'react/require-default-props': 0,
     'react/display-name': 0,
     'react/require-render-return': 0, // rule is broken for certain types of function syntax
+    'react/prefer-stateless-function': 0, // annoying rule that could be used in the future
     'jsx-a11y/no-static-element-interactions': 1,
     'jsx-a11y/mouse-events-have-key-events': 1,
     'jsx-a11y/click-events-have-key-events': 1,
+    'jsx-a11y/no-static-element-interactions': 0,
     '@typescript-eslint/member-ordering': 0,
     eqeqeq: 2,
 
@@ -112,6 +114,7 @@ module.exports = {
     'consistent-return': 0,
     'no-plusplus': 0,
     'no-bitwise': 0,
+    'object-shorthand': ['error', 'properties'],
     'no-void': [2, { allowAsStatement: true }],
     yoda: 0,
     'no-restricted-globals': 0,

e2e/page_objects/common.ts

@@ -282,11 +282,12 @@ export class CommonPage {
    * @param mousePosition
    * @param selector
    */
-  clickMouseRelativeToDOMElement = (page: Page) => async (mousePosition: MousePosition, selector: string) => {
-    const element = await this.getBoundingClientRect(page)(selector);
-    const { x, y } = getCursorPosition(mousePosition, element);
-    await page.mouse.click(x, y);
-  };
+  clickMouseRelativeToDOMElement =
+    (page: Page) => async (mousePosition: MousePosition, selector: string, button?: 'left' | 'right' | 'middle') => {
+      const element = await this.getBoundingClientRect(page)(selector);
+      const { x, y } = getCursorPosition(mousePosition, element);
+      await page.mouse.click(x, y, { button });
+    };
 
   /**
    * Drag mouse relative to element
@@ -435,6 +436,33 @@ export class CommonPage {
       });
     };
 
+  /**
+   * Expect a chart given a url from storybook with mouse click
+   *
+   * TODO - Find why this always creates a 2px diff
+   *
+   * @param url Storybook url from knobs section
+   * @param mousePosition - position of mouse relative to chart
+   * @param options
+   */
+  expectChartWithClickAtUrlToMatchScreenshot =
+    (page: Page) =>
+    async (
+      url: string,
+      mousePosition: MousePosition,
+      button?: 'left' | 'right' | 'middle',
+      options?: ScreenshotElementAtUrlOptions,
+    ) => {
+      const action = async () => {
+        await options?.action?.();
+        await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, button);
+      };
+      await this.expectChartAtUrlToMatchScreenshot(page)(url, {
+        ...options,
+        action,
+      });
+    };
+
   /**
    * Expect a chart given a url from storybook with keyboard events
    * @param url

e2e/tests/tooltip.test.ts

@@ -0,0 +1,105 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { test } from '@playwright/test';
+
+import { common } from '../page_objects/common';
+
+process.env.ENV_URL = 'http://localhost:9002/';
+
+test.describe('Tooltip', () => {
+  test.describe('Chart Types', () => {
+    test.describe('Cartesian', () => {
+      test('pinning without selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 240, bottom: 260 },
+          'right',
+        );
+      });
+
+      test('pinning over selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
+          { left: 220, bottom: 285 },
+          'right',
+        );
+      });
+
+      test('show loading prompt for async actions', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=1000',
+          { left: 220, bottom: 285 },
+          'right',
+        );
+      });
+
+      test('selecting series on pinned tooltip', async ({ page }) => {
+        await common.expectChartAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
+          {
+            action: async () => {
+              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
+              // table row not visible thus not clickable by playwright
+              const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
+              await items.nth(5).click();
+              await items.nth(0).click();
+              await items.nth(2).click();
+            },
+          },
+        );
+      });
+
+      test('selecting series on pinned tooltip async', async ({ page }) => {
+        const delay = 100;
+        await common.expectChartAtUrlToMatchScreenshot(page)(
+          `http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=${delay}`,
+          {
+            action: async () => {
+              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
+              // table row not visible thus not clickable by playwright
+              const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
+              await items.nth(2).click();
+            },
+            delay,
+          },
+        );
+      });
+    });
+
+    test.describe('Partition', () => {
+      test('pinning with selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--partition-charts&globals=background:white;theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 245, bottom: 185 },
+          'right',
+        );
+      });
+    });
+
+    test.describe('Heatmap', () => {
+      test('pinning with selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--heatmap-chart&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 300, bottom: 180 },
+          'right',
+        );
+      });
+    });
+
+    test.describe('Flamegraph', () => {
+      test('pinning with selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--flamegraph&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 220, bottom: 220 },
+          'right',
+        );
+      });
+    });
+  });
+});