From aa6faf20b70542d8712350198faf05c68e70056a Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 7 Oct 2019 17:40:47 +0300 Subject: [PATCH 1/4] EUIficate Vega options tab --- .../vis_type_vega/public/_vega_editor.scss | 36 ----- .../vis_type_vega/public/components/index.ts | 20 +++ .../public/components/vega_actions_menu.tsx | 85 ++++++++++++ .../public/components/vega_help_menu.tsx | 91 +++++++++++++ .../public/components/vega_vis_editor.tsx | 96 +++++++++++++ .../public/help_menus/vega_action_menu.js | 114 ---------------- .../public/help_menus/vega_help_menu.js | 126 ------------------ .../public/shim/legacy_dependencies_plugin.ts | 5 +- .../public/shim/vega_legacy_module.ts | 49 ------- .../public/vega_editor_controller.js | 86 ------------ .../public/vega_editor_template.html | 30 ----- .../vis_type_vega/public/vega_type.ts | 4 +- 12 files changed, 295 insertions(+), 447 deletions(-) create mode 100644 src/legacy/core_plugins/vis_type_vega/public/components/index.ts create mode 100644 src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx create mode 100644 src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx create mode 100644 src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx delete mode 100644 src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_action_menu.js delete mode 100644 src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_help_menu.js delete mode 100644 src/legacy/core_plugins/vis_type_vega/public/shim/vega_legacy_module.ts delete mode 100644 src/legacy/core_plugins/vis_type_vega/public/vega_editor_controller.js delete mode 100644 src/legacy/core_plugins/vis_type_vega/public/vega_editor_template.html diff --git a/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss b/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss index 94ba9a9c6bc43..432a33799afc1 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss +++ b/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss @@ -1,41 +1,5 @@ -.visEditor--vega { - .visEditorSidebar__config { - padding: 0; - // Makes sure the vega options dropdown menu is visible - overflow: inherit; - } - - // The following is necessary for the Vega editor to expand to full height of the editor panel - .visEditorSidebar__config, - .visEditorSidebar__options { - @include flex-parent(1, 1, auto); - - > * { - @include flex-parent(1, 1, auto); - } - } - - @include euiBreakpoint('xs', 's', 'm') { - .visEditor__collapsibleSidebar { - flex-grow: 1; - } - } -} - - .vgaEditor { - @include flex-parent(1, 1, auto); position: relative; - - @include euiBreakpoint('xs', 's', 'm') { - min-height: $euiSize * 15; - } - - position: relative; -} - -.vgaEditor__aceEditor { - flex: 1 1 auto; } .vgaEditor__aceEditorActions { diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/index.ts b/src/legacy/core_plugins/vis_type_vega/public/components/index.ts new file mode 100644 index 0000000000000..90f067c778fd2 --- /dev/null +++ b/src/legacy/core_plugins/vis_type_vega/public/components/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { VegaVisEditor } from './vega_vis_editor'; diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx new file mode 100644 index 0000000000000..00893d427682b --- /dev/null +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx @@ -0,0 +1,85 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useState, useCallback } from 'react'; +import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +interface VegaActionsMenuProps { + formatHJson(): void; + formatJson(): void; +} + +function VegaActionsMenu({ formatHJson, formatJson }: VegaActionsMenuProps) { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const onButtonClick = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]); + const onHJsonCLick = useCallback(() => { + formatHJson(); + setIsPopoverOpen(false); + }, [isPopoverOpen, formatHJson]); + + const onJsonCLick = useCallback(() => { + formatJson(); + setIsPopoverOpen(false); + }, [isPopoverOpen, formatJson]); + + const closePopover = useCallback(() => setIsPopoverOpen(false), []); + + const button = ( + + ); + + const items = [ + + + , + + + , + ]; + + return ( + + + + ); +} + +export { VegaActionsMenu }; diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx new file mode 100644 index 0000000000000..c43ce60506f94 --- /dev/null +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx @@ -0,0 +1,91 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useCallback, useState } from 'react'; +import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +function VegaHelpMenu() { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]); + + const closePopover = useCallback(() => setIsPopoverOpen(false), []); + + const button = ( + + ); + + const items = [ + + + , + + + , + + + , + ]; + + return ( + + + + ); +} + +export { VegaHelpMenu }; diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx new file mode 100644 index 0000000000000..b8099cd8b2c39 --- /dev/null +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx @@ -0,0 +1,96 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useCallback } from 'react'; +import { EuiCodeEditor } from '@elastic/eui'; +import compactStringify from 'json-stringify-pretty-compact'; +// @ts-ignore +import hjson from 'hjson'; +import { i18n } from '@kbn/i18n'; + +import { toastNotifications } from 'ui/notify'; +import { VisOptionsProps } from 'ui/vis/editors/default'; +import { VisParams } from '../vega_fn'; +import { VegaHelpMenu } from './vega_help_menu'; +import { VegaActionsMenu } from './vega_actions_menu'; + +const aceOptions = { + maxLines: Infinity, + highlightActiveLine: false, + showPrintMargin: false, + tabSize: 2, + useSoftTabs: true, + wrap: true, +}; + +function format(value: string, stringify: typeof compactStringify) { + try { + const spec = hjson.parse(value, { legacyRoot: false, keepWsc: true }); + return stringify(spec); + } catch (err) { + // This is a common case - user tries to format an invalid HJSON text + toastNotifications.addError(err, { + title: i18n.translate('visTypeVega.editor.formatError', { + defaultMessage: 'Error formatting spec', + }), + }); + + return value; + } +} + +function VegaVisEditor({ stateParams, setValue }: VisOptionsProps) { + const onChange = useCallback( + (value: string) => { + setValue('spec', value); + }, + [setValue] + ); + + const formatJson = useCallback( + () => setValue('spec', format(stateParams.spec, compactStringify)), + [setValue] + ); + + const formatHJson = useCallback( + () => setValue('spec', format(stateParams.spec, hjson.stringify)), + [setValue] + ); + + return ( +
+ +
+ + +
+
+ ); +} + +export { VegaVisEditor }; diff --git a/src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_action_menu.js b/src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_action_menu.js deleted file mode 100644 index 6f136e3679f30..0000000000000 --- a/src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_action_menu.js +++ /dev/null @@ -1,114 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import PropTypes from 'prop-types'; - -import React, { - Component, -} from 'react'; - -import { - EuiButtonIcon, - EuiContextMenuPanel, - EuiContextMenuItem, - EuiPopover, -} from '@elastic/eui'; - -import { FormattedMessage } from '@kbn/i18n/react'; - -export class VegaActionsMenu extends Component { - constructor(props) { - super(props); - - this.state = { - isPopoverOpen: false, - }; - } - - onButtonClick = () => { - this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen, - })); - }; - - closePopover = () => { - this.setState({ - isPopoverOpen: false, - }); - }; - - render() { - const button = ( - - } - /> - ); - - const items = [ - ( - { this.closePopover(); this.props.formatHJson(event); }} - > - - - ), ( - { this.closePopover(); this.props.formatJson(event); }} - > - - - ) - ]; - - return ( - - - - ); - } -} - -VegaActionsMenu.propTypes = { - formatHJson: PropTypes.func.isRequired, - formatJson: PropTypes.func.isRequired, -}; diff --git a/src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_help_menu.js b/src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_help_menu.js deleted file mode 100644 index fe0819a729490..0000000000000 --- a/src/legacy/core_plugins/vis_type_vega/public/help_menus/vega_help_menu.js +++ /dev/null @@ -1,126 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { - Component, -} from 'react'; - -import { - EuiButtonIcon, - EuiContextMenuPanel, - EuiContextMenuItem, - EuiPopover, -} from '@elastic/eui'; - -import { FormattedMessage } from '@kbn/i18n/react'; - -export class VegaHelpMenu extends Component { - constructor(props) { - super(props); - - this.state = { - isPopoverOpen: false, - }; - } - - onButtonClick = () => { - this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen, - })); - }; - - closePopover = () => { - this.setState({ - isPopoverOpen: false, - }); - }; - - render() { - const button = ( - - } - /> - ); - - const items = [ - ( - { this.closePopover(); }} - > - - - ), ( - { this.closePopover(); }} - > - - - ), ( - { this.closePopover(); }} - > - - - ) - ]; - - return ( - - - - ); - } -} diff --git a/src/legacy/core_plugins/vis_type_vega/public/shim/legacy_dependencies_plugin.ts b/src/legacy/core_plugins/vis_type_vega/public/shim/legacy_dependencies_plugin.ts index 2c4c2d2491fc4..af4425e3d5548 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/shim/legacy_dependencies_plugin.ts +++ b/src/legacy/core_plugins/vis_type_vega/public/shim/legacy_dependencies_plugin.ts @@ -18,9 +18,9 @@ */ import chrome from 'ui/chrome'; +import 'ui/vis/map/service_settings'; import 'ui/es'; // required for $injector.get('es') below import { CoreStart, Plugin } from 'kibana/public'; -import { initVegaLegacyModule } from './vega_legacy_module'; /** @internal */ export interface LegacyDependenciesPluginSetup { @@ -31,9 +31,6 @@ export interface LegacyDependenciesPluginSetup { export class LegacyDependenciesPlugin implements Plugin, void> { public async setup() { - // Init kibana/vega AngularJS module. - initVegaLegacyModule(); - const $injector = await chrome.dangerouslyGetActiveInjector(); return { diff --git a/src/legacy/core_plugins/vis_type_vega/public/shim/vega_legacy_module.ts b/src/legacy/core_plugins/vis_type_vega/public/shim/vega_legacy_module.ts deleted file mode 100644 index 4dc6f03821649..0000000000000 --- a/src/legacy/core_plugins/vis_type_vega/public/shim/vega_legacy_module.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import 'ngreact'; -import 'brace/mode/hjson'; -import 'brace/ext/searchbox'; -import 'ui/accessibility/kbn_ui_ace_keyboard_mode'; -import 'ui/vis/map/service_settings'; - -import { once } from 'lodash'; -// @ts-ignore -import { uiModules } from 'ui/modules'; -import { wrapInI18nContext } from 'ui/i18n'; - -// @ts-ignore -import { VegaEditorController } from '../vega_editor_controller'; -// @ts-ignore -import { VegaHelpMenu } from '../help_menus/vega_help_menu'; -// @ts-ignore -import { VegaActionsMenu } from '../help_menus/vega_action_menu'; - -/** @internal */ -export const initVegaLegacyModule = once((): void => { - uiModules - .get('kibana/vega', ['react']) - .controller('VegaEditorController', VegaEditorController) - .directive('vegaActionsMenu', (reactDirective: any) => - reactDirective(wrapInI18nContext(VegaActionsMenu)) - ) - .directive('vegaHelpMenu', (reactDirective: any) => - reactDirective(wrapInI18nContext(VegaHelpMenu)) - ); -}); diff --git a/src/legacy/core_plugins/vis_type_vega/public/vega_editor_controller.js b/src/legacy/core_plugins/vis_type_vega/public/vega_editor_controller.js deleted file mode 100644 index f91beff59a34f..0000000000000 --- a/src/legacy/core_plugins/vis_type_vega/public/vega_editor_controller.js +++ /dev/null @@ -1,86 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import compactStringify from 'json-stringify-pretty-compact'; -import hjson from 'hjson'; -import { toastNotifications } from 'ui/notify'; -import { i18n } from '@kbn/i18n'; - -export class VegaEditorController { - constructor($scope) { - this.$scope = $scope; - $scope.aceLoaded = (editor) => { - editor.$blockScrolling = Infinity; - - const session = editor.getSession(); - session.setTabSize(2); - session.setUseSoftTabs(true); - - this.aceEditor = editor; - }; - - $scope.formatJson = (event) => { - this._format(event, compactStringify, { - maxLength: this._getCodeWidth(), - }); - }; - - $scope.formatHJson = (event) => { - this._format(event, hjson.stringify, { - condense: this._getCodeWidth(), - bracesSameLine: true, - keepWsc: true, - }); - }; - } - - _getCodeWidth() { - return this.aceEditor.getSession().getWrapLimit(); - } - - _format(event, stringify, opts) { - event.preventDefault(); - - let newSpec; - try { - const spec = hjson.parse(this.aceEditor.getSession().doc.getValue(), { legacyRoot: false, keepWsc: true }); - newSpec = stringify(spec, opts); - } catch (err) { - // This is a common case - user tries to format an invalid HJSON text - toastNotifications.addError(err, { - title: i18n.translate('visTypeVega.editor.formatError', { - defaultMessage: 'Error formatting spec', - }), - }); - return; - } - - // ui-ace only accepts changes from the editor when they - // happen outside of a digest cycle - // Per @spalger, we used $$postDigest() instead of setTimeout(() => {}, 0) - // because it better described the intention. - this.$scope.$$postDigest(() => { - // set the new value to the session doc so that it - // is treated as an edit by ace: ace adds it to the - // undo stack and emits it as a change like all - // other edits - this.aceEditor.getSession().doc.setValue(newSpec); - }); - } -} diff --git a/src/legacy/core_plugins/vis_type_vega/public/vega_editor_template.html b/src/legacy/core_plugins/vis_type_vega/public/vega_editor_template.html deleted file mode 100644 index 4d5d6189f3302..0000000000000 --- a/src/legacy/core_plugins/vis_type_vega/public/vega_editor_template.html +++ /dev/null @@ -1,30 +0,0 @@ -
-
- -
- - - -
- -
diff --git a/src/legacy/core_plugins/vis_type_vega/public/vega_type.ts b/src/legacy/core_plugins/vis_type_vega/public/vega_type.ts index 6ffcd8867ffea..0d5290ddbefc7 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/vega_type.ts +++ b/src/legacy/core_plugins/vis_type_vega/public/vega_type.ts @@ -24,9 +24,9 @@ import { DefaultEditorSize } from 'ui/vis/editor_size'; // @ts-ignore import { defaultFeedbackMessage } from 'ui/vis/default_feedback_message'; -import vegaEditorTemplate from './vega_editor_template.html'; import { visFactory } from '../../visualizations/public'; import { VegaVisualizationDependencies } from './plugin'; +import { VegaVisEditor } from './components'; import { createVegaRequestHandler } from './vega_request_handler'; // @ts-ignore @@ -48,7 +48,7 @@ export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependen icon: 'visVega', visConfig: { defaults: { spec: defaultSpec } }, editorConfig: { - optionsTemplate: vegaEditorTemplate, + optionsTemplate: VegaVisEditor, enableAutoApply: true, defaultSize: DefaultEditorSize.MEDIUM, }, From 7797a76ec728f637e835f2dde04b8797fc767cc4 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 10 Oct 2019 15:21:16 +0300 Subject: [PATCH 2/4] Update list of dependencies --- .../vis_type_vega/public/components/vega_vis_editor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx index b8099cd8b2c39..0ff024b1f8b40 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx @@ -65,12 +65,12 @@ function VegaVisEditor({ stateParams, setValue }: VisOptionsProps) { const formatJson = useCallback( () => setValue('spec', format(stateParams.spec, compactStringify)), - [setValue] + [setValue, stateParams.spec] ); const formatHJson = useCallback( () => setValue('spec', format(stateParams.spec, hjson.stringify)), - [setValue] + [setValue, stateParams.spec] ); return ( From a8a41efd27056f93f855fe4b18dd145d31bfcd85 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Wed, 16 Oct 2019 15:48:45 +0300 Subject: [PATCH 3/4] Fix comments --- .../public/components/vega_actions_menu.tsx | 2 +- .../public/components/vega_help_menu.tsx | 6 +++--- .../public/components/vega_vis_editor.tsx | 11 ++++++++--- x-pack/plugins/translations/translations/ja-JP.json | 5 +---- x-pack/plugins/translations/translations/zh-CN.json | 5 +---- 5 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx index 00893d427682b..71a88b47a8be3 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_actions_menu.tsx @@ -30,7 +30,7 @@ interface VegaActionsMenuProps { function VegaActionsMenu({ formatHJson, formatJson }: VegaActionsMenuProps) { const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const onButtonClick = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]); + const onButtonClick = useCallback(() => setIsPopoverOpen(isOpen => !isOpen), []); const onHJsonCLick = useCallback(() => { formatHJson(); setIsPopoverOpen(false); diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx index c43ce60506f94..e4443c0058e9b 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_help_menu.tsx @@ -47,7 +47,7 @@ function VegaHelpMenu() { > , , , ]; diff --git a/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx b/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx index 0ff024b1f8b40..6d14acf6ec7aa 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx +++ b/src/legacy/core_plugins/vis_type_vega/public/components/vega_vis_editor.tsx @@ -39,10 +39,15 @@ const aceOptions = { wrap: true, }; -function format(value: string, stringify: typeof compactStringify) { +const hjsonStringifyOptions = { + bracesSameLine: true, + keepWsc: true, +}; + +function format(value: string, stringify: typeof compactStringify, options?: any) { try { const spec = hjson.parse(value, { legacyRoot: false, keepWsc: true }); - return stringify(spec); + return stringify(spec, options); } catch (err) { // This is a common case - user tries to format an invalid HJSON text toastNotifications.addError(err, { @@ -69,7 +74,7 @@ function VegaVisEditor({ stateParams, setValue }: VisOptionsProps) { ); const formatHJson = useCallback( - () => setValue('spec', format(stateParams.spec, hjson.stringify)), + () => setValue('spec', format(stateParams.spec, hjson.stringify, hjsonStringifyOptions)), [setValue, stateParams.spec] ); diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 59ac561065fa0..0159e1886f6f5 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -3161,11 +3161,8 @@ "visTypeVega.editor.formatError": "仕様のフォーマット中にエラーが発生", "visTypeVega.editor.reformatAsHJSONButtonLabel": "HJSON に変換", "visTypeVega.editor.reformatAsJSONButtonLabel": "JSON に変換しコメントを削除", - "visTypeVega.editor.vegaDocumentationLinkText": "Vega ドキュメント", "visTypeVega.editor.vegaEditorOptionsButtonAriaLabel": "Vega エディターオプション", "visTypeVega.editor.vegaHelpButtonAriaLabel": "Vega ヘルプ", - "visTypeVega.editor.vegaHelpLinkText": "Kibana Vega ヘルプ", - "visTypeVega.editor.vegaLiteDocumentationLinkText": "Vega-Lite ドキュメンテーション", "visTypeVega.emsFileParser.emsFileNameDoesNotExistErrorMessage": "{emsfile} {emsfileName} が存在しません", "visTypeVega.emsFileParser.missingNameOfFileErrorMessage": "{dataUrlParamValue} の {dataUrlParam} には {nameParam} パラメーター (ファイル名) が必要です", "visTypeVega.esQueryParser.autointervalValueTypeErrorMessage": "{autointerval} は文字 {trueValue} または数字である必要があります", @@ -10514,4 +10511,4 @@ "xpack.fileUpload.fileParser.errorReadingFile": "ファイルの読み込み中にエラーが発生しました", "xpack.fileUpload.fileParser.noFileProvided": "エラー、ファイルが提供されていません" } -} \ No newline at end of file +} diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index cf40c5cb6e973..1d98f9f4bf227 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -3162,11 +3162,8 @@ "visTypeVega.editor.formatError": "格式化规范时出错", "visTypeVega.editor.reformatAsHJSONButtonLabel": "重新格式化为 HJSON", "visTypeVega.editor.reformatAsJSONButtonLabel": "重新格式化为 JSON，删除注释", - "visTypeVega.editor.vegaDocumentationLinkText": "Vega 文档", "visTypeVega.editor.vegaEditorOptionsButtonAriaLabel": "Vega 编辑器选项", "visTypeVega.editor.vegaHelpButtonAriaLabel": "Vega 帮助", - "visTypeVega.editor.vegaHelpLinkText": "Kibana Vega 帮助", - "visTypeVega.editor.vegaLiteDocumentationLinkText": "Vega-Lite 文档", "visTypeVega.emsFileParser.emsFileNameDoesNotExistErrorMessage": "{emsfile} {emsfileName} 不存在", "visTypeVega.emsFileParser.missingNameOfFileErrorMessage": "具有 {dataUrlParamValue} 的 {dataUrlParam} 需要 {nameParam} 参数（文件名）", "visTypeVega.esQueryParser.autointervalValueTypeErrorMessage": "{autointerval} 必须为 {trueValue} 或数字", @@ -10670,4 +10667,4 @@ "xpack.fileUpload.fileParser.errorReadingFile": "读取文件时出错", "xpack.fileUpload.fileParser.noFileProvided": "错误，未提供任何文件" } -} \ No newline at end of file +} From e78a95bea8291842cc7a0d665a584d46a9795344 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Fri, 18 Oct 2019 14:04:36 +0300 Subject: [PATCH 4/4] Adjust styles --- .../vis_type_vega/public/_vega_editor.scss | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss b/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss index 432a33799afc1..f4276541d5d9e 100644 --- a/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss +++ b/src/legacy/core_plugins/vis_type_vega/public/_vega_editor.scss @@ -1,5 +1,22 @@ +.visEditor--vega { + .visEditorSidebar__config { + padding: 0; + position: relative; + } + + .visEditorSidebar__options { + @include euiScrollBar; + flex-shrink: 1; + overflow-y: auto; + } +} + .vgaEditor { - position: relative; + @include euiBreakpoint('xs', 's', 'm') { + @include euiScrollBar; + max-height: $euiSize * 15; + overflow-y: auto; + } } .vgaEditor__aceEditorActions {