From 07dbfbf5bce766951cee59137dd7934a9947f91c Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 11 Jan 2021 15:42:36 -0800 Subject: [PATCH 1/4] add buttonGroup --- .../panel_toolbar/panel_toolbar.tsx | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) 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..e6f484c2177d3 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,6 +21,7 @@ import './panel_toolbar.scss'; import React, { FC, useState, useCallback } from 'react'; import { EuiButton, + EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiPopover, @@ -29,6 +30,7 @@ import { EuiButtonIcon, EuiToolTip, } from '@elastic/eui'; +import { htmlIdGenerator } from '@elastic/eui'; import { CoreStart } from 'kibana/public'; import { useKibana } from '../../../../kibana_react/public'; import { @@ -124,24 +126,37 @@ export const PanelToolbar: FC = ({ primaryActionButton, quickButtons = [] ); + const buttonGroupOptions = []; + + quickButtons.map(({ iconType, tooltip, action }: QuickButtons, index) => { + const quickButton = { + iconType, + action, + className: 'panelToolbarButton', + id: `${htmlIdGenerator()()}${index}`, + label: tooltip, + }; + quickButton['aria-label'] = `Create new ${tooltip}`; + buttonGroupOptions.push(quickButton); + }); + + const onChangeIconsMulti = (optionId) => { + buttonGroupOptions.find((x) => x.id === optionId).action(); + }; + return ( {primaryActionButton} {quickButtons.length ? ( - {quickButtons.map(({ iconType, tooltip, action }: QuickButtons) => ( - - - - - - ))} + onChangeIconsMulti(id)} + type="multi" + isIconOnly + /> ) : null} From bc4b415ef682b66acb3cc894e2883d31484426fd Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 11 Jan 2021 15:55:49 -0800 Subject: [PATCH 2/4] add legend --- .../public/components/panel_toolbar/panel_toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e6f484c2177d3..6b849a046d9df 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 @@ -151,7 +151,7 @@ export const PanelToolbar: FC = ({ primaryActionButton, quickButtons = [] onChangeIconsMulti(id)} type="multi" From aa0aaa155a053697ab8ef6574e28f5bd264b5958 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 11 Jan 2021 16:00:45 -0800 Subject: [PATCH 3/4] remove unneeded classname --- .../public/components/panel_toolbar/panel_toolbar.tsx | 1 - 1 file changed, 1 deletion(-) 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 6b849a046d9df..bf354a37f209f 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 @@ -132,7 +132,6 @@ export const PanelToolbar: FC = ({ primaryActionButton, quickButtons = [] const quickButton = { iconType, action, - className: 'panelToolbarButton', id: `${htmlIdGenerator()()}${index}`, label: tooltip, }; From ecd6c1b6348a315fe27c6ac35ad5c0fb5ba43cf8 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 12 Jan 2021 11:13:04 -0700 Subject: [PATCH 4/4] Fixed ts errors --- .../application/top_nav/dashboard_top_nav.tsx | 33 ++++++++++++++++--- .../add_panel/add_panel_flyout.tsx | 9 ++--- .../panel_toolbar/panel_toolbar.tsx | 21 +++++------- .../visualize_embeddable_factory.tsx | 2 +- .../public/wizard/new_vis_modal.tsx | 10 ++++-- 5 files changed, 47 insertions(+), 28 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 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 bf354a37f209f..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 @@ -27,8 +27,6 @@ import { EuiPopover, EuiContextMenu, IconType, - EuiButtonIcon, - EuiToolTip, } from '@elastic/eui'; import { htmlIdGenerator } from '@elastic/eui'; import { CoreStart } from 'kibana/public'; @@ -126,21 +124,18 @@ export const PanelToolbar: FC = ({ primaryActionButton, quickButtons = [] ); - const buttonGroupOptions = []; - - quickButtons.map(({ iconType, tooltip, action }: QuickButtons, index) => { - const quickButton = { + const buttonGroupOptions = quickButtons.map( + ({ iconType, tooltip, action }: QuickButtons, index) => ({ iconType, action, id: `${htmlIdGenerator()()}${index}`, label: tooltip, - }; - quickButton['aria-label'] = `Create new ${tooltip}`; - buttonGroupOptions.push(quickButton); - }); + 'aria-label': `Create new ${tooltip}`, + }) + ); - const onChangeIconsMulti = (optionId) => { - buttonGroupOptions.find((x) => x.id === optionId).action(); + const onChangeIconsMulti = (optionId: string) => { + buttonGroupOptions.find((x) => x.id === optionId)?.action(); }; return ( @@ -152,7 +147,7 @@ export const PanelToolbar: FC = ({ primaryActionButton, quickButtons = [] onChangeIconsMulti(id)} + onChange={onChangeIconsMulti} type="multi" isIconOnly /> 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(