[7.x] [Canvas] Top Menu (#59982) (#64462)

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -7,6 +7,7 @@
 import path from 'path';
 import moment from 'moment';
 import 'moment-timezone';
+import ReactDOM from "react-dom";
 
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
@@ -24,6 +25,9 @@ moment.tz.setDefault('UTC');
 const testTime = new Date(Date.UTC(2019, 5, 1)); // June 1 2019
 Date.now = jest.fn(() => testTime);
 
+// Mock telemetry service 
+jest.mock('../public/lib/ui_metric', () => ({ trackCanvasUiMetric: () => { } }));
+
 // Mock EUI generated ids to be consistently predictable for snapshots.
 jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `generated-id`);
 
@@ -32,7 +36,7 @@ jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `gene
 jest.mock('@elastic/eui/lib/components/code/code', () => {
   const React = require.requireActual('react');
   return {
-    EuiCode: ({children, className}) => (
+    EuiCode: ({ children, className }) => (
       <span>
         <code>{children}</code>
       </span>
@@ -61,6 +65,12 @@ jest.mock('@elastic/eui/packages/react-datepicker', () => {
   };
 });
 
+
+// Mock React Portal for components that use modals, tooltips, etc
+ReactDOM.createPortal = jest.fn((element) => {
+  return element;
+});
+
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
   return {
     htmlIdGenerator: () => () => `generated-id`,
@@ -71,7 +81,7 @@ jest.mock('plugins/interpreter/registries', () => ({}));
 
 // Disabling this test due to https://github.com/elastic/eui/issues/2242
 jest.mock(
-  '../public/components/workpad_header/workpad_export/flyout/__examples__/share_website_flyout.stories',
+  '../public/components/workpad_header/share_menu/flyout/__examples__/share_website_flyout.stories',
   () => {
     return 'Disabled Panel';
   }

x-pack/legacy/plugins/canvas/.storybook/webpack.config.js

@@ -177,8 +177,10 @@ module.exports = async ({ config }) => {
     }),
 
     // Mock out libs used by a few componets to avoid loading in kibana_legacy and platform
-    new webpack.NormalModuleReplacementPlugin(/lib\/notify/, path.resolve(__dirname, '../tasks/mocks/uiNotify')),
+    new webpack.NormalModuleReplacementPlugin(/(lib)?\/notify/, path.resolve(__dirname, '../tasks/mocks/uiNotify')),
     new webpack.NormalModuleReplacementPlugin(/lib\/download_workpad/, path.resolve(__dirname, '../tasks/mocks/downloadWorkpad')),
+    new webpack.NormalModuleReplacementPlugin(/(lib)?\/custom_element_service/, path.resolve(__dirname, '../tasks/mocks/customElementService')),
+    new webpack.NormalModuleReplacementPlugin(/(lib)?\/ui_metric/, path.resolve(__dirname, '../tasks/mocks/uiMetric')),
   );
 
   // Tell Webpack about relevant extensions

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/area_chart/index.ts

@@ -5,14 +5,13 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const areaChart: ElementFactory = () => ({
   name: 'areaChart',
-  displayName: 'Area chart',
+  displayName: 'Area',
   help: 'A line chart with a filled body',
-  tags: ['chart'],
-  image: header,
+  type: 'chart',
+  icon: 'visArea',
   expression: `filters
   | demodata
   | pointseries x="time" y="mean(price)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/bubble_chart/index.ts

@@ -5,16 +5,15 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const bubbleChart: ElementFactory = () => ({
   name: 'bubbleChart',
-  displayName: 'Bubble chart',
-  tags: ['chart'],
+  displayName: 'Bubble',
+  type: 'chart',
   help: 'A customizable bubble chart',
   width: 700,
   height: 300,
-  image: header,
+  icon: 'heatmap',
   expression: `filters
 | demodata
 | pointseries x="project" y="sum(price)" color="state" size="size(username)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/debug/index.ts

@@ -5,14 +5,12 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const debug: ElementFactory = () => ({
   name: 'debug',
-  displayName: 'Debug',
-  tags: ['text'],
+  displayName: 'Debug data',
   help: 'Just dumps the configuration of the element',
-  image: header,
+  icon: 'bug',
   expression: `demodata
 | render as=debug`,
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/dropdown_filter/index.ts

@@ -5,14 +5,13 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const dropdownFilter: ElementFactory = () => ({
-  name: 'dropdown_filter',
-  displayName: 'Dropdown filter',
-  tags: ['filter'],
+  name: 'dropdownFilter',
+  displayName: 'Dropdown select',
+  type: 'filter',
   help: 'A dropdown from which you can select values for an "exactly" filter',
-  image: header,
+  icon: 'filter',
   height: 50,
   expression: `demodata
 | dropdownControl valueColumn=project filterColumn=project | render`,

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/filter_debug/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ElementFactory } from '../../../types';
+
+export const filterDebug: ElementFactory = () => ({
+  name: 'filterDebug',
+  displayName: 'Debug filter',
+  help: 'Shows the underlying global filters in a workpad',
+  icon: 'bug',
+  expression: `filters
+| render as=debug`,
+});

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/horizontal_bar_chart/index.ts

@@ -5,14 +5,13 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const horizontalBarChart: ElementFactory = () => ({
   name: 'horizontalBarChart',
-  displayName: 'Horizontal bar chart',
-  tags: ['chart'],
+  displayName: 'Bar horizontal',
+  type: 'chart',
   help: 'A customizable horizontal bar chart',
-  image: header,
+  icon: 'visBarHorizontal',
   expression: `filters
 | demodata
 | pointseries x="size(cost)" y="project" color="project"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/horizontal_progress_bar/index.ts

@@ -6,16 +6,14 @@
 
 import { openSans } from '../../../common/lib/fonts';
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const horizontalProgressBar: ElementFactory = () => ({
   name: 'horizontalProgressBar',
-  displayName: 'Horizontal progress bar',
-  tags: ['chart', 'proportion'],
+  displayName: 'Horizontal bar',
+  type: 'progress',
   help: 'Displays progress as a portion of a horizontal bar',
   width: 400,
   height: 30,
-  image: header,
   expression: `filters
 | demodata
 | math "mean(percent_uptime)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/horizontal_progress_pill/index.ts

@@ -6,16 +6,14 @@
 
 import { openSans } from '../../../common/lib/fonts';
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const horizontalProgressPill: ElementFactory = () => ({
   name: 'horizontalProgressPill',
-  displayName: 'Horizontal progress pill',
-  tags: ['chart', 'proportion'],
+  displayName: 'Horizontal pill',
+  type: 'progress',
   help: 'Displays progress as a portion of a horizontal pill',
   width: 400,
   height: 30,
-  image: header,
   expression: `filters
 | demodata
 | math "mean(percent_uptime)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/image/index.ts

@@ -5,14 +5,13 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const image: ElementFactory = () => ({
   name: 'image',
   displayName: 'Image',
-  tags: ['graphic'],
+  type: 'image',
   help: 'A static image',
-  image: header,
+  icon: 'image',
   expression: `image dataurl=null mode="contain"
 | render`,
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/index.ts

@@ -8,8 +8,8 @@ import { applyElementStrings } from '../../i18n/elements';
 import { areaChart } from './area_chart';
 import { bubbleChart } from './bubble_chart';
 import { debug } from './debug';
-import { donut } from './donut';
 import { dropdownFilter } from './dropdown_filter';
+import { filterDebug } from './filter_debug';
 import { horizontalBarChart } from './horizontal_bar_chart';
 import { horizontalProgressBar } from './horizontal_progress_bar';
 import { horizontalProgressPill } from './horizontal_progress_pill';
@@ -26,7 +26,6 @@ import { repeatImage } from './repeat_image';
 import { revealImage } from './reveal_image';
 import { shape } from './shape';
 import { table } from './table';
-import { tiltedPie } from './tilted_pie';
 import { timeFilter } from './time_filter';
 import { verticalBarChart } from './vert_bar_chart';
 import { verticalProgressBar } from './vertical_progress_bar';
@@ -39,8 +38,8 @@ const elementSpecs = [
   areaChart,
   bubbleChart,
   debug,
-  donut,
   dropdownFilter,
+  filterDebug,
   image,
   horizontalBarChart,
   horizontalProgressBar,
@@ -56,7 +55,6 @@ const elementSpecs = [
   revealImage,
   shape,
   table,
-  tiltedPie,
   timeFilter,
   verticalBarChart,
   verticalProgressBar,

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/line_chart/index.ts

@@ -5,14 +5,13 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const lineChart: ElementFactory = () => ({
   name: 'lineChart',
-  displayName: 'Line chart',
-  tags: ['chart'],
+  displayName: 'Line',
+  type: 'chart',
   help: 'A customizable line chart',
-  image: header,
+  icon: 'visLine',
   expression: `filters
 | demodata
 | pointseries x="time" y="mean(price)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/markdown/index.ts

@@ -4,15 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import header from './header.png';
-
 import { ElementFactory } from '../../../types';
 export const markdown: ElementFactory = () => ({
   name: 'markdown',
-  displayName: 'Markdown',
-  tags: ['text'],
-  help: 'Markup from Markdown',
-  image: header,
+  displayName: 'Text',
+  type: 'text',
+  help: 'Add text using Markdown',
+  icon: 'visText',
   expression: `filters
 | demodata
 | markdown "### Welcome to the Markdown element

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts

@@ -5,20 +5,18 @@
  */
 
 import { openSans } from '../../../common/lib/fonts';
-import header from './header.png';
-
 import { ElementFactory } from '../../../types';
 import { SetupInitializer } from '../../plugin';
 
 export const metricElementInitializer: SetupInitializer<ElementFactory> = (core, setup) => {
   return () => ({
     name: 'metric',
     displayName: 'Metric',
-    tags: ['text'],
+    type: 'chart',
     help: 'A number with a label',
     width: 200,
     height: 100,
-    image: header,
+    icon: 'visMetric',
     expression: `filters
   | demodata
   | math "unique(country)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/pie/index.ts

@@ -4,17 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import header from './header.png';
-
 import { ElementFactory } from '../../../types';
 export const pie: ElementFactory = () => ({
   name: 'pie',
-  displayName: 'Pie chart',
-  tags: ['chart', 'proportion'],
+  displayName: 'Pie',
+  type: 'chart',
   width: 300,
   height: 300,
   help: 'A simple pie chart',
-  image: header,
+  icon: 'visPie',
   expression: `filters
 | demodata
 | pointseries color="state" size="max(price)"

x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/plot/index.ts

@@ -5,14 +5,12 @@
  */
 
 import { ElementFactory } from '../../../types';
-import header from './header.png';
 
 export const plot: ElementFactory = () => ({
   name: 'plot',
   displayName: 'Coordinate plot',
-  tags: ['chart'],
+  type: 'chart',
   help: 'Mixed line, bar or dot charts',
-  image: header,
   expression: `filters
 | demodata
 | pointseries x="time" y="sum(price)" color="state"