From fd8af76ae1327f96f7b7058f24296900bd5817b0 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Wed, 28 Aug 2024 18:28:32 -0700 Subject: [PATCH] [discover] Query editor UI clean up (#7896) * follow up Signed-off-by: abbyhu2000 * address comments Signed-off-by: abbyhu2000 * Changeset file for PR #7896 created/updated --------- Signed-off-by: abbyhu2000 Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7896.yml | 2 + .../default_language_reference.tsx | 77 ++++++++ .../get_query_control_links.tsx | 169 +----------------- .../language_service/language_service.ts | 16 +- .../public/ui/query_editor/editors/shared.tsx | 11 +- .../public/ui/query_editor/query_editor.tsx | 44 +++-- .../query_enhancements/public/plugin.tsx | 13 +- .../query_editor}/flyout_containers.tsx | 0 .../query_editor}/ppl_docs/commands/dedup.ts | 0 .../query_editor}/ppl_docs/commands/eval.ts | 0 .../query_editor}/ppl_docs/commands/fields.ts | 0 .../query_editor}/ppl_docs/commands/head.ts | 0 .../query_editor}/ppl_docs/commands/index.ts | 0 .../query_editor}/ppl_docs/commands/parse.ts | 0 .../query_editor}/ppl_docs/commands/rare.ts | 0 .../query_editor}/ppl_docs/commands/rename.ts | 0 .../query_editor}/ppl_docs/commands/search.ts | 0 .../query_editor}/ppl_docs/commands/sort.ts | 0 .../query_editor}/ppl_docs/commands/stats.ts | 0 .../query_editor}/ppl_docs/commands/syntax.ts | 0 .../query_editor}/ppl_docs/commands/top.ts | 0 .../query_editor}/ppl_docs/commands/where.ts | 0 .../ppl_docs/functions/condition.ts | 0 .../ppl_docs/functions/datetime.ts | 0 .../ppl_docs/functions/full_text_search.ts | 0 .../query_editor}/ppl_docs/functions/index.ts | 0 .../query_editor}/ppl_docs/functions/math.ts | 0 .../ppl_docs/functions/string.ts | 0 .../public/query_editor}/ppl_docs/groups.tsx | 0 .../ppl_docs/language_structure/datatypes.ts | 0 .../language_structure/identifiers.ts | 0 .../ppl_docs/language_structure/index.ts | 0 .../query_editor}/ppl_docs/overview.tsx | 0 .../query_editor}/ppl_reference_flyout.tsx | 0 .../query_editor/query_language_reference.tsx | 50 ++++++ .../query_editor}/sql_reference_flyout.tsx | 0 36 files changed, 192 insertions(+), 190 deletions(-) create mode 100644 changelogs/fragments/7896.yml create mode 100644 src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/flyout_containers.tsx (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/dedup.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/eval.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/fields.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/head.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/index.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/parse.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/rare.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/rename.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/search.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/sort.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/stats.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/syntax.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/top.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/commands/where.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/functions/condition.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/functions/datetime.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/functions/full_text_search.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/functions/index.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/functions/math.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/functions/string.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/groups.tsx (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/language_structure/datatypes.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/language_structure/identifiers.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/language_structure/index.ts (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_docs/overview.tsx (100%) rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/ppl_reference_flyout.tsx (100%) create mode 100644 src/plugins/query_enhancements/public/query_editor/query_language_reference.tsx rename src/plugins/{data/public/query/query_string/language_service => query_enhancements/public/query_editor}/sql_reference_flyout.tsx (100%) diff --git a/changelogs/fragments/7896.yml b/changelogs/fragments/7896.yml new file mode 100644 index 000000000000..cfac5d806ff4 --- /dev/null +++ b/changelogs/fragments/7896.yml @@ -0,0 +1,2 @@ +fix: +- Query editor UI clean up ([#7896](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7896)) \ No newline at end of file diff --git a/src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx b/src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx new file mode 100644 index 000000000000..56dda2550426 --- /dev/null +++ b/src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx @@ -0,0 +1,77 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { i18n } from '@osd/i18n'; + +import { EuiButtonIcon, EuiLink, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui'; + +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { IDataPluginServices } from '../../../types'; +import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public'; + +export const DefaultLanguageReference = () => { + const opensearchDashboards = useOpenSearchDashboards(); + const [isLanguageReferenceOpen, setIsLanguageReferenceOpen] = React.useState(false); + const osdDQLDocs = opensearchDashboards.services.docLinks?.links.opensearchDashboards.dql.base; + const dqlFullName = ( + + ); + + const button = ( +
+ setIsLanguageReferenceOpen(!isLanguageReferenceOpen)} + /> +
+ ); + + return ( + setIsLanguageReferenceOpen(false)} + panelPaddingSize="s" + anchorPosition="downLeft" + anchorClassName="euiFormControlLayout__append" + > + + + +
+ +

+ + {dqlFullName} + + ), + }} + /> +

+ +
+ + ); +}; + +export const createDefaultLanguageReference = () => { + return ; +}; diff --git a/src/plugins/data/public/query/query_string/language_service/get_query_control_links.tsx b/src/plugins/data/public/query/query_string/language_service/get_query_control_links.tsx index 75fcabe27fd4..80898d5468b7 100644 --- a/src/plugins/data/public/query/query_string/language_service/get_query_control_links.tsx +++ b/src/plugins/data/public/query/query_string/language_service/get_query_control_links.tsx @@ -3,170 +3,17 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { i18n } from '@osd/i18n'; -import React, { useState } from 'react'; -import { - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiLink, - EuiPopoverTitle, - EuiText, - EuiWrappingPopover, -} from '@elastic/eui'; -import ReactDOM from 'react-dom'; -import { FormattedMessage } from 'react-intl'; -import { - OpenSearchDashboardsContextProvider, - toMountPoint, -} from '../../../../../opensearch_dashboards_react/public'; -import { IDataPluginServices } from '../../../types'; -import { PPLReferenceFlyout } from './ppl_reference_flyout'; - -export interface QueryControl { - id: string; - label: string; - testId: string; - ariaLabel: string; - run: (anchorElement: HTMLElement) => void; - iconType: string; -} - -export const QueryControls = (props: { - services: IDataPluginServices; - queryLanguage: string; - onToggleCollapse: () => void; - savedQueryManagement?: any; - additionalControls?: QueryControl[]; -}) => { - const [isCollapsed, setIsCollapsed] = useState(false); - const [isLanguageReferenceOpen, setIsLanguageReferenceOpen] = useState(false); - - const languageReferenceContainer = document.createElement('div'); - - const onCloseLanguageReference = () => { - ReactDOM.unmountComponentAtNode(languageReferenceContainer); - setIsLanguageReferenceOpen(false); - }; - - const osdDQLDocs = props.services.docLinks?.links.opensearchDashboards.dql.base; - const dqlFullName = ( - - ); - - const languageReference: QueryControl = { - id: 'languageReference', - label: i18n.translate('discover.queryControls.languageReference', { - defaultMessage: 'Open', - }), - testId: 'languageReference', - ariaLabel: i18n.translate('discover.queryControls.languageReference', { - defaultMessage: `Language Reference`, - }), - run: async (anchorElement) => { - if (props.queryLanguage === 'PPL' || props.queryLanguage === 'SQL') { - const flyoutSession = props.services.overlays!.openFlyout( - toMountPoint( - - flyoutSession?.close?.().then()} - makeUrl={(searchId: any) => `#/view/${encodeURIComponent(searchId)}`} - /> - - ) - ); - } else { - if (isLanguageReferenceOpen) { - onCloseLanguageReference(); - return; - } - - setIsLanguageReferenceOpen(true); - document.body.appendChild(languageReferenceContainer); - - const element = ( - - - - -
- -

- - {dqlFullName} - - ), - }} - /> -

- -
- - ); - - ReactDOM.render(element, languageReferenceContainer); - } - }, - iconType: 'iInCircle', - }; - - const languageToggle: QueryControl = { - id: 'languageToggle', - label: i18n.translate('discover.queryControls.languageToggle', { - defaultMessage: 'Toggle', - }), - testId: 'languageToggle', - ariaLabel: i18n.translate('discover.queryControls.languageToggle', { - defaultMessage: `Language Toggle`, - }), - run: () => { - setIsCollapsed(!isCollapsed); - props.onToggleCollapse(); - }, - iconType: isCollapsed ? 'expand' : 'minimize', - }; - - const queryControls = - props.queryLanguage === 'PPL' || props.queryLanguage === 'SQL' - ? [languageReference, languageToggle] - : [languageReference]; - - if (props.additionalControls) { - queryControls.push(...props.additionalControls); - } +import React from 'react'; +import { EuiFlexItem } from '@elastic/eui'; +export const QueryControls = (props: { queryControls: React.ReactElement[] }) => { return ( - - {queryControls.map((queryControl) => ( - - queryControl.run(event.currentTarget)} - /> + <> + {props.queryControls.map((queryControl, idx) => ( + + {queryControl} ))} - {props.savedQueryManagement} - + ); }; diff --git a/src/plugins/data/public/query/query_string/language_service/language_service.ts b/src/plugins/data/public/query/query_string/language_service/language_service.ts index 923838c26bb2..113a85e25e10 100644 --- a/src/plugins/data/public/query/query_string/language_service/language_service.ts +++ b/src/plugins/data/public/query/query_string/language_service/language_service.ts @@ -14,6 +14,7 @@ import { UiEnhancements, } from '../../../ui'; import { DataStorage, setOverrides as setFieldOverrides } from '../../../../common'; +import { createDefaultLanguageReference } from './default_language_reference'; export class LanguageService { private languages: Map = new Map(); @@ -27,10 +28,6 @@ export class LanguageService { this.queryEditorExtensionMap = {}; } - public createDefaultQueryEditor() { - return createEditor(SingleLineInput, SingleLineInput, DQLBody); - } - public __enhance = (enhancements: UiEnhancements) => { if (enhancements.queryEditorExtension) { this.queryEditorExtensionMap[enhancements.queryEditorExtension.id] = @@ -38,11 +35,20 @@ export class LanguageService { } }; + public createDefaultLanguageReference = () => { + return createDefaultLanguageReference(); + }; + /** * Registers default handlers for index patterns and indices. */ private registerDefaultLanguages() { - const defaultEditor = createEditor(SingleLineInput, SingleLineInput, DQLBody); + const defaultEditor = createEditor( + SingleLineInput, + SingleLineInput, + [this.createDefaultLanguageReference()], + DQLBody + ); this.registerLanguage(getDQLLanguageConfig(this.defaultSearchInterceptor, defaultEditor)); this.registerLanguage(getLuceneLanguageConfig(this.defaultSearchInterceptor, defaultEditor)); } diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx index 1da3b2c880c3..6608b95042de 100644 --- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx +++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx @@ -21,18 +21,11 @@ type CollapsedComponent = React.ComponentType; type ExpandedComponent = React.ComponentType | null; type BodyComponent = React.ComponentType; -export interface Editor { - TopBar: { - Collapsed: CollapsedComponent; - Expanded: ExpandedComponent; - }; - Body: BodyComponent; -} - export interface EditorInstance { TopBar: { Collapsed: () => React.ReactElement; Expanded: (() => React.ReactElement) | null; + Controls: React.ReactElement[]; }; Body: () => React.ReactElement; } @@ -44,6 +37,7 @@ export function createEditor< >( collapsed: CollapsedComponent, expanded: ExpandedComponent, + controls: React.ReactElement[], body: BodyComponent ) { return ( @@ -54,6 +48,7 @@ export function createEditor< TopBar: { Collapsed: () => React.createElement(collapsed, collapsedProps), Expanded: expanded ? () => React.createElement(expanded, expandedProps) : null, + Controls: controls, }, Body: () => React.createElement(body, bodyProps), }); diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index 619184883220..3c9e81b4824d 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -3,7 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiCompressedFieldText, EuiText, PopoverAnchorPosition } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; + +import { + EuiButtonIcon, + EuiCompressedFieldText, + EuiFlexGroup, + EuiFlexItem, + EuiText, + PopoverAnchorPosition, +} from '@elastic/eui'; import classNames from 'classnames'; import { isEqual } from 'lodash'; import React, { Component, createRef, RefObject } from 'react'; @@ -293,21 +302,24 @@ export default class QueryEditorUI extends Component { }; }; - public onToggleCollapse = () => { - this.setState({ isCollapsed: !this.state.isCollapsed }); - }; - - private renderQueryControls = () => { + private renderToggleIcon = () => { return ( - + + this.setIsCollapsed(!this.state.isCollapsed)} + /> + ); }; + private renderQueryControls = (queryControls: React.ReactElement[]) => { + return ; + }; + public render() { const className = classNames(this.props.className); @@ -416,7 +428,13 @@ export default class QueryEditorUI extends Component { : languageEditor.TopBar.Expanded && languageEditor.TopBar.Expanded()} {languageSelector} -
{this.renderQueryControls()}
+
+ + {this.renderQueryControls(languageEditor.TopBar.Controls)} + {!languageEditor.TopBar.Expanded && this.renderToggleIcon()} + {this.props.savedQueryManagement} + +
) { + startServices.then(([coreStart]) => { + this.coreStart = coreStart; + this.overLaysService = coreStart.overlays; + }); + } + + public createPPLLanguageReference() { + const button = ( + { + const flyoutSession = this.overLaysService!.openFlyout( + toMountPoint( + + flyoutSession?.close()} + makeUrl={(searchId: any) => `#/view/${encodeURIComponent(searchId)}`} + /> + + ) + ); + }} + /> + ); + return button; + } +} diff --git a/src/plugins/data/public/query/query_string/language_service/sql_reference_flyout.tsx b/src/plugins/query_enhancements/public/query_editor/sql_reference_flyout.tsx similarity index 100% rename from src/plugins/data/public/query/query_string/language_service/sql_reference_flyout.tsx rename to src/plugins/query_enhancements/public/query_editor/sql_reference_flyout.tsx