[Canvas] Adds editor menu to Canvas

src/plugins/dashboard/public/application/top_nav/editor_menu.tsx

@@ -231,7 +231,7 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
     <SolutionToolbarPopover
       ownFocus
       label={i18n.translate('dashboard.solutionToolbar.editorMenuButtonLabel', {
-        defaultMessage: 'All types',
+        defaultMessage: 'Select type',
       })}
       iconType="arrowDown"
       iconSide="right"

src/plugins/presentation_util/public/components/solution_toolbar/items/quick_group.scss

@@ -1,11 +1,31 @@
 .quickButtonGroup {
-  .quickButtonGroup__button {
-    background-color: $euiColorEmptyShade;
-    @include kbnThemeStyle('v8') {
-      // sass-lint:disable-block no-important
-      border-width: $euiBorderWidthThin !important;
-      border-style: solid !important;
-      border-color: $euiBorderColor !important;
+  .euiButtonGroup__buttons {
+    border-radius: $euiBorderRadius;
+
+    .quickButtonGroup__button {
+      background-color: $euiColorEmptyShade;
+      @include kbnThemeStyle('v8') {
+        // sass-lint:disable-block no-important
+        border-width: $euiBorderWidthThin !important;
+        border-style: solid !important;
+        border-color: $euiBorderColor !important;
+      }
+    }
+
+    .quickButtonGroup__button:first-of-type {
+      @include kbnThemeStyle('v8') {
+        // sass-lint:disable-block no-important
+        border-top-left-radius: $euiBorderRadius !important;
+        border-bottom-left-radius: $euiBorderRadius !important;
+      }
+    }
+
+    .quickButtonGroup__button:last-of-type {
+      @include kbnThemeStyle('v8') {
+        // sass-lint:disable-block no-important
+        border-top-right-radius: $euiBorderRadius !important;
+        border-bottom-right-radius: $euiBorderRadius !important;
+      }
     }
   }
 }

x-pack/plugins/canvas/kibana.json

@@ -25,6 +25,7 @@
     "features",
     "inspector",
     "presentationUtil",
+    "visualizations",
     "uiActions",
     "share"
   ],

x-pack/plugins/canvas/public/components/workpad_app/workpad_app.scss

@@ -31,7 +31,7 @@ $canvasLayoutFontSize: $euiFontSizeS;
 .canvasLayout__stageHeader {
   flex-grow: 0;
   flex-basis: auto;
-  padding: $euiSizeS;
+  padding: $euiSizeS $euiSize;
   font-size: $canvasLayoutFontSize;
   border-bottom: $euiBorderThin;
   background: $euiColorLightestShade;

x-pack/plugins/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import { EmbeddableFactoryDefinition, IEmbeddable } from 'src/plugins/embeddable/public';
+import { BaseVisType, VisTypeAlias } from 'src/plugins/visualizations/public';
+import { EditorMenu } from '../editor_menu.component';
+
+const testFactories: EmbeddableFactoryDefinition[] = [
+  {
+    type: 'ml_anomaly_swimlane',
+    getDisplayName: () => 'Anomaly swimlane',
+    getIconType: () => '',
+    getDescription: () => 'Description for anomaly swimlane',
+    isEditable: () => Promise.resolve(true),
+    create: () => Promise.resolve({ id: 'swimlane_embeddable' } as IEmbeddable),
+    grouping: [
+      {
+        id: 'ml',
+        getDisplayName: () => 'machine learning',
+        getIconType: () => 'machineLearningApp',
+      },
+    ],
+  },
+  {
+    type: 'ml_anomaly_chart',
+    getDisplayName: () => 'Anomaly chart',
+    getIconType: () => '',
+    getDescription: () => 'Description for anomaly chart',
+    isEditable: () => Promise.resolve(true),
+    create: () => Promise.resolve({ id: 'anomaly_chart_embeddable' } as IEmbeddable),
+    grouping: [
+      {
+        id: 'ml',
+        getDisplayName: () => 'machine learning',
+        getIconType: () => 'machineLearningApp',
+      },
+    ],
+  },
+  {
+    type: 'log_stream',
+    getDisplayName: () => 'Log stream',
+    getIconType: () => '',
+    getDescription: () => 'Description for log stream',
+    isEditable: () => Promise.resolve(true),
+    create: () => Promise.resolve({ id: 'anomaly_chart_embeddable' } as IEmbeddable),
+  },
+];
+
+const testVisTypes: BaseVisType[] = [
+  { title: 'TSVB', icon: '', description: 'Description of TSVB', name: 'tsvb' } as BaseVisType,
+  {
+    titleInWizard: 'Custom visualization',
+    title: 'Vega',
+    icon: '',
+    description: 'Description of Vega',
+    name: 'vega',
+  } as BaseVisType,
+];
+
+const testVisTypeAliases: VisTypeAlias[] = [
+  {
+    title: 'Lens',
+    aliasApp: 'lens',
+    aliasPath: 'path/to/lens',
+    icon: 'lensApp',
+    name: 'lens',
+    description: 'Description of Lens app',
+    stage: 'production',
+  },
+  {
+    title: 'Maps',
+    aliasApp: 'maps',
+    aliasPath: 'path/to/maps',
+    icon: 'gisApp',
+    name: 'maps',
+    description: 'Description of Maps app',
+    stage: 'production',
+  },
+];
+
+storiesOf('components/WorkpadHeader/EditorMenu', module)
+  .add('default', () => (
+    <EditorMenu
+      factories={testFactories}
+      promotedVisTypes={testVisTypes}
+      visTypeAliases={testVisTypeAliases}
+      createNewVisType={() => action('createNewVisType')}
+      createNewEmbeddable={() => action('createNewEmbeddable')}
+    />
+  ))
+  .add('dark mode', () => (
+    <EditorMenu
+      factories={testFactories}
+      isDarkThemeEnabled
+      promotedVisTypes={testVisTypes}
+      visTypeAliases={testVisTypeAliases}
+      createNewVisType={() => action('createNewVisType')}
+      createNewEmbeddable={() => action('createNewEmbeddable')}
+    />
+  ));