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 index 5a3fc907a4653..893eb0a0ff6d9 100644 --- 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(type); + // falls back to new vis modal when Lens is not available + let factory = embeddable.getEmbeddableFactory('lens'); + if (!factory) { - throw new EmbeddableFactoryNotFoundError(type); + factory = embeddable.getEmbeddableFactory(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(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/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx index 812f8660bee62..753a66a2b54fa 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx +++ b/src/plugins/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 { 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 index b91d13dbdf75d..61c208bd5bdc2 100644 --- 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 = ({ primaryActionButton, quickButtons = [] ); + 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 ( {primaryActionButton} {quickButtons.length ? ( - {quickButtons.map(({ iconType, tooltip, action }: QuickButtons) => ( - - - - - - ))} + ) : null} diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx index 8aaaee621e80f..87a11faf99e82 100644 --- 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 index 05a64aaa6144f..8fb19cf7f156e 100644 --- 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 this.props.visType === alias.name); + + if (visType) { + this.onVisTypeSelected(visType); + return null; + } } const visNewVisDialogAriaLabel = i18n.translate(