Skip to content

Commit

Permalink
[Canvas] Adds editor menu to Canvas (#113194)
Browse files Browse the repository at this point in the history
  • Loading branch information
cqliu1 committed Oct 25, 2021
1 parent f6fd928 commit 151ceac
Show file tree
Hide file tree
Showing 21 changed files with 629 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
1 change: 1 addition & 0 deletions x-pack/plugins/canvas/kibana.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"features",
"inspector",
"presentationUtil",
"visualizations",
"uiActions",
"share"
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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')}
/>
));
Loading

0 comments on commit 151ceac

Please sign in to comment.