Merge pull request #16 from andreadelrio/design-emb-bar

cqliu1 · Jan 12, 2021 · 0f37597 · 0f37597
2 parents a2f8f6d + ecd6c1b
commit 0f37597
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 29 deletions.
diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -28,6 +28,7 @@ import { useKibana } from '../../services/kibana_react';
 import { IndexPattern, SavedQuery, TimefilterContract } from '../../services/data';
 import {
   EmbeddableFactoryNotFoundError,
+  EmbeddableInput,
   isErrorEmbeddable,
   openAddPanelFlyout,
   ViewMode,
@@ -137,29 +138,41 @@ export function DashboardTopNav({
 
   const createNew = useCallback(async () => {
     const type = 'visualization';
-    const factory = embeddable.getEmbeddableFactory<VisualizeInput>(type);
+    // falls back to new vis modal when Lens is not available
+    let factory = embeddable.getEmbeddableFactory<EmbeddableInput>('lens');
+
     if (!factory) {
-      throw new EmbeddableFactoryNotFoundError(type);
+      factory = embeddable.getEmbeddableFactory<VisualizeInput>(type);
+
+      if (!factory) {
+        throw new EmbeddableFactoryNotFoundError(type);
+      }
+
+      await factory.create({} as VisualizeInput, dashboardContainer);
     }
 
-    await factory.create({} as VisualizeInput, dashboardContainer);
+    await factory.create({} as EmbeddableInput, dashboardContainer);
   }, [dashboardContainer, embeddable]);
 
   const createNewMarkdown = useCallback(async () => {
     const type = 'visualization';
     const factory = embeddable.getEmbeddableFactory<VisualizeInput>(type);
+
     if (!factory) {
       throw new EmbeddableFactoryNotFoundError(type);
     }
+
     await factory.create({ visType: 'markdown' } as VisualizeInput, dashboardContainer);
   }, [dashboardContainer, embeddable]);
 
   const createNewInputControl = useCallback(async () => {
     const type = 'visualization';
     const factory = embeddable.getEmbeddableFactory(type);
+
     if (!factory) {
       throw new EmbeddableFactoryNotFoundError(type);
     }
+
     await factory.create({ visType: 'input_control_vis' } as VisualizeInput, dashboardContainer);
   }, [dashboardContainer, embeddable]);
 
@@ -501,8 +514,18 @@ export function DashboardTopNav({
   );
 
   const quickButtons = [
-    { iconType: 'visText', tooltip: 'Markdown', action: createNewMarkdown },
-    { iconType: 'controlsHorizontal', tooltip: 'Input control', action: createNewInputControl },
+    {
+      iconType: 'visText',
+      tooltip: 'Markdown',
+      action: createNewMarkdown,
+      ariaLabel: 'Create new markdown',
+    },
+    {
+      iconType: 'controlsHorizontal',
+      tooltip: 'Input control',
+      action: createNewInputControl,
+      ariaLabel: 'Create new input control',
+    },
   ];
 
   return (

diff --git a/...ins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/...ins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
@@ -18,15 +18,14 @@
  */
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { CoreSetup } from 'src/core/public';
 
-import { EuiContextMenuItem, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+import { EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 
 import { EmbeddableStart } from 'src/plugins/embeddable/public';
 import { IContainer } from '../../../../containers';
 import { EmbeddableFactoryNotFoundError } from '../../../../errors';
-import { SavedObjectFinderCreateNew } from './saved_object_finder_create_new';
 import { SavedObjectEmbeddableInput } from '../../../../embeddables';
 
 interface Props {
@@ -42,10 +41,6 @@ interface State {
   isCreateMenuOpen: boolean;
 }
 
-function capitalize([first, ...letters]: string) {
-  return `${first.toUpperCase()}${letters.join('')}`;
-}
-
 export class AddPanelFlyout extends React.Component<Props, State> {
   private lastToast: any;
 

diff --git a/src/plugins/presentation_util/public/components/panel_toolbar/panel_toolbar.tsx b/src/plugins/presentation_util/public/components/panel_toolbar/panel_toolbar.tsx
@@ -21,14 +21,14 @@ import './panel_toolbar.scss';
 import React, { FC, useState, useCallback } from 'react';
 import {
   EuiButton,
+  EuiButtonGroup,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
   EuiContextMenu,
   IconType,
-  EuiButtonIcon,
-  EuiToolTip,
 } from '@elastic/eui';
+import { htmlIdGenerator } from '@elastic/eui';
 import { CoreStart } from 'kibana/public';
 import { useKibana } from '../../../../kibana_react/public';
 import {
@@ -124,24 +124,33 @@ export const PanelToolbar: FC<Props> = ({ primaryActionButton, quickButtons = []
     </EuiButton>
   );
 
+  const buttonGroupOptions = quickButtons.map(
+    ({ iconType, tooltip, action }: QuickButtons, index) => ({
+      iconType,
+      action,
+      id: `${htmlIdGenerator()()}${index}`,
+      label: tooltip,
+      'aria-label': `Create new ${tooltip}`,
+    })
+  );
+
+  const onChangeIconsMulti = (optionId: string) => {
+    buttonGroupOptions.find((x) => x.id === optionId)?.action();
+  };
+
   return (
     <EuiFlexGroup className="panelToolbar" id="kbnPresentationToolbar__panelToolbar" gutterSize="s">
       <EuiFlexItem grow={false}>{primaryActionButton}</EuiFlexItem>
       {quickButtons.length ? (
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none">
-            {quickButtons.map(({ iconType, tooltip, action }: QuickButtons) => (
-              <EuiFlexItem id={tooltip}>
-                <EuiToolTip content={tooltip}>
-                  <EuiButtonIcon
-                    className="panelToolbarButton"
-                    iconType={iconType}
-                    onClick={action}
-                    aria-label={`Create new ${tooltip}`}
-                  />
-                </EuiToolTip>
-              </EuiFlexItem>
-            ))}
+            <EuiButtonGroup
+              legend="Quick buttons"
+              options={buttonGroupOptions}
+              onChange={onChangeIconsMulti}
+              type="multi"
+              isIconOnly
+            />
           </EuiFlexGroup>
         </EuiFlexItem>
       ) : null}

diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
@@ -38,7 +38,7 @@ import {
   VisualizeSavedObjectAttributes,
 } from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
-import { SerializedVis, Vis } from '../vis';
+import { Vis } from '../vis';
 import {
   getCapabilities,
   getTypes,

diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
@@ -97,8 +97,14 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
     }
 
     if (this.props.visType) {
-      this.onVisTypeSelected(this.props.visTypesRegistry.get(this.props.visType));
-      return null;
+      const visType =
+        this.props.visTypesRegistry.get(this.props.visType) ||
+        this.props.visTypesRegistry.getAliases().find((alias) => this.props.visType === alias.name);
+
+      if (visType) {
+        this.onVisTypeSelected(visType);
+        return null;
+      }
     }
 
     const visNewVisDialogAriaLabel = i18n.translate(