Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[discover] Query editor UI clean up #7896

Merged
merged 3 commits into from
Aug 29, 2024
Merged

[discover] Query editor UI clean up #7896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
596f690
follow up
abbyhu2000 Aug 28, 2024
c03d3c4
address comments
abbyhu2000 Aug 28, 2024
bcdcd4f
Changeset file for PR #7896 created/updated
opensearch-changeset-bot[bot] Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions changelogs/fragments/7896.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
fix:
- Query editor UI clean up ([#7896](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7896))
77 changes: 77 additions & 0 deletions src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how come we don't register this with the DQL language config:

https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It did get registered within the DQL language config. Within the language service, when we call createEditor, we pass in the default language reference, and eventually this editor get passed into the DQL language config.

 private registerDefaultLanguages() {
    const defaultEditor = createEditor(
      SingleLineInput,
      SingleLineInput,
      [this.createDefaultLanguageReference()],
      DQLBody
    );
    this.registerLanguage(getDQLLanguageConfig(this.defaultSearchInterceptor, defaultEditor));
    this.registerLanguage(getLuceneLanguageConfig(this.defaultSearchInterceptor, defaultEditor));
  }

const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
const [isLanguageReferenceOpen, setIsLanguageReferenceOpen] = React.useState(false);
abbyhu2000 marked this conversation as resolved.
Show resolved Hide resolved
const osdDQLDocs = opensearchDashboards.services.docLinks?.links.opensearchDashboards.dql.base;

Check warning on line 18 in src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx#L16-L18 

Added lines #L16 - L18 were not covered by tests
const dqlFullName = (
<FormattedMessage

Check warning on line 20 in src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx#L20 

Added line #L20 was not covered by tests
id="data.query.queryBar.dqlFullLanguageName"
defaultMessage="OpenSearch Dashboards Query Language"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this worth to make it a optional property of the language config?

fullLanguageTitle

/>
);

const button = (
<div>

Check warning on line 27 in src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx#L27 

Added line #L27 was not covered by tests
<EuiButtonIcon
iconType={'iInCircle'}
aria-label={i18n.translate('discover.queryControls.languageReference', {
abbyhu2000 marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage: `Language Reference`,
})}
onClick={() => setIsLanguageReferenceOpen(!isLanguageReferenceOpen)}

Check warning on line 33 in src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx#L33 

Added line #L33 was not covered by tests
/>
</div>
);

return (

Check warning on line 38 in src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx#L38 

Added line #L38 was not covered by tests
<EuiPopover
id="languageReferencePopover"
button={button}
isOpen={isLanguageReferenceOpen}
closePopover={() => setIsLanguageReferenceOpen(false)}

Check warning on line 43 in src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/query/query_string/language_service/default_language_reference.tsx#L43 

Added line #L43 was not covered by tests
panelPaddingSize="s"
anchorPosition="downLeft"
anchorClassName="euiFormControlLayout__append"
>
<EuiPopoverTitle>
<FormattedMessage
id="data.query.queryBar.syntaxOptionsTitle"
defaultMessage="Syntax options"
/>
</EuiPopoverTitle>
<div style={{ width: '350px' }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you make this a class?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need to make this a class after i added a public function call to the language service class?

  public createDefaultLanguageReference = () => {
    return createDefaultLanguageReference();
  };

<EuiText size="s">
<p>
<FormattedMessage
id="data.query.queryBar.syntaxOptionsDescription"
defaultMessage="The {docsLink} (DQL) offers a simplified query syntax and support for scripted fields."
values={{
docsLink: (
<EuiLink href={osdDQLDocs} target="_blank">
{dqlFullName}
</EuiLink>
),
}}
/>
</p>
</EuiText>
</div>
</EuiPopover>
);
};

export const createDefaultLanguageReference = () => {
return <DefaultLanguageReference />;
};
169 changes: 8 additions & 161 deletions src/plugins/data/public/query/query_string/language_service/get_query_control_links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean>(false);
const [isLanguageReferenceOpen, setIsLanguageReferenceOpen] = useState<boolean>(false);

const languageReferenceContainer = document.createElement('div');

const onCloseLanguageReference = () => {
ReactDOM.unmountComponentAtNode(languageReferenceContainer);
setIsLanguageReferenceOpen(false);
};

const osdDQLDocs = props.services.docLinks?.links.opensearchDashboards.dql.base;
const dqlFullName = (
<FormattedMessage
id="data.query.queryBar.dqlFullLanguageName"
defaultMessage="OpenSearch Dashboards Query Language"
/>
);

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(
<OpenSearchDashboardsContextProvider services={props.services}>
<PPLReferenceFlyout
onClose={() => flyoutSession?.close?.().then()}
makeUrl={(searchId: any) => `#/view/${encodeURIComponent(searchId)}`}
/>
</OpenSearchDashboardsContextProvider>
)
);
} else {
if (isLanguageReferenceOpen) {
onCloseLanguageReference();
return;
}

setIsLanguageReferenceOpen(true);
document.body.appendChild(languageReferenceContainer);

const element = (
<EuiWrappingPopover
id="languageReferencePopover"
button={anchorElement}
isOpen={true}
closePopover={onCloseLanguageReference}
panelPaddingSize="s"
anchorPosition="downLeft"
anchorClassName="euiFormControlLayout__append"
>
<EuiPopoverTitle>
<FormattedMessage
id="data.query.queryBar.syntaxOptionsTitle"
defaultMessage="Syntax options"
/>
</EuiPopoverTitle>
<div style={{ width: '350px' }}>
<EuiText size="s">
<p>
<FormattedMessage
id="data.query.queryBar.syntaxOptionsDescription"
defaultMessage="The {docsLink} (DQL) offers a simplified query
syntax and support for scripted fields."
values={{
docsLink: (
<EuiLink href={osdDQLDocs} target="_blank">
{dqlFullName}
</EuiLink>
),
}}
/>
</p>
</EuiText>
</div>
</EuiWrappingPopover>
);

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 (
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
{queryControls.map((queryControl) => (
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType={queryControl.iconType}
aria-label={queryControl.ariaLabel}
onClick={(event) => queryControl.run(event.currentTarget)}
/>
<>
{props.queryControls.map((queryControl, idx) => (
<EuiFlexItem grow={false} key={idx}>
{queryControl}
</EuiFlexItem>
))}
{props.savedQueryManagement}
</EuiFlexGroup>
</>
);
};
16 changes: 11 additions & 5 deletions src/plugins/data/public/query/query_string/language_service/language_service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, LanguageConfig> = new Map();
Expand All @@ -27,22 +28,27 @@ export class LanguageService {
this.queryEditorExtensionMap = {};
}

public createDefaultQueryEditor() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think the goal here is that the language service exposes public methods. So this was the intent instead,, that developers can add a new language an just call

const editor = data.query.queryString.getLanguageService().createDefaultQueryEditor();`

if they wanted to use the default editor for their language

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added a public function call within the language service:

  public createDefaultLanguageReference = () => {
    return createDefaultLanguageReference();
  };

return createEditor(SingleLineInput, SingleLineInput, DQLBody);
}

public __enhance = (enhancements: UiEnhancements) => {
if (enhancements.queryEditorExtension) {
this.queryEditorExtensionMap[enhancements.queryEditorExtension.id] =
enhancements.queryEditorExtension;
}
};

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));
}
Expand Down
11 changes: 3 additions & 8 deletions src/plugins/data/public/ui/query_editor/editors/shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,11 @@ type CollapsedComponent<T> = React.ComponentType<T>;
type ExpandedComponent<T> = React.ComponentType<T> | null;
type BodyComponent<T> = React.ComponentType<T>;

export interface Editor<TCollapsed, TExpanded, TBody> {
TopBar: {
Collapsed: CollapsedComponent<TCollapsed>;
Expanded: ExpandedComponent<TExpanded>;
};
Body: BodyComponent<TBody>;
}

export interface EditorInstance<TCollapsed, TExpanded, TBody> {
TopBar: {
Collapsed: () => React.ReactElement;
Expanded: (() => React.ReactElement) | null;
Controls: React.ReactElement[];
};
Body: () => React.ReactElement;
}
Expand All @@ -44,6 +37,7 @@ export function createEditor<
>(
collapsed: CollapsedComponent<TCollapsed>,
expanded: ExpandedComponent<TExpanded>,
controls: React.ReactElement[],
body: BodyComponent<TBody>
) {
return (
Expand All @@ -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),
});
Expand Down
Loading
Loading