github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add visual indication of selected language in query bar (#30899) (#31617)

Browse source 
* Add visual indication of selected language to the query bar

* update test snapshots

* Reduce padding a little to fit smaller text

* Pass options button to input's append prop so we don't have to manage
the padding manually

* Revert "Reduce padding a little to fit smaller text"

This reverts commit 8042b09d

* Update popover text

* delete options button translation key

* Update tests

* Review feedback

* Review feedback

* remove unused vars

* remove unused translation
This commit is contained in:
Matt Bargar 2019-02-26 16:43:21 -06:00 • committed by GitHub
parent 7db5423557
commit 9332b5eff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 89 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/legacy/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
View file

@ -12,8 +12,8 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
type="button"
>
<FormattedMessage
defaultMessage="Options"
id="common.ui.queryBar.optionsButtonLabel"
defaultMessage="Lucene"
id="common.ui.queryBar.luceneLanguageName"
values={Object {}}
/>
</EuiButtonEmpty>
@ -47,8 +47,9 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
>
<p>
<FormattedMessage
defaultMessage="Our new autocomplete and simple syntax features can help you create your
queries. Just start typing and you’ll see matches related to your data. See docs {docsLink}."
defaultMessage="The {docsLink} (KQL) offers a simplified query
syntax and support for scripted fields. KQL also provides autocomplete if you have
a Basic license or above. If you turn off KQL, Kibana uses Lucene."
id="common.ui.queryBar.syntaxOptionsDescription"
values={
Object {
@ -59,8 +60,8 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
type="button"
>
<FormattedMessage
defaultMessage="here"
id="common.ui.queryBar.syntaxOptionsDescription.docsLinkText"
defaultMessage="Kibana query language"
id="common.ui.queryBar.kqlFullLanguageName"
values={Object {}}
/>
</EuiLink>,
@ -77,6 +78,13 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Kibana query language"
id="common.ui.queryBar.kqlFullLanguageName"
values={Object {}}
/>
}
>
<EuiSwitch
checked={false}
@ -84,8 +92,8 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
id="queryEnhancementOptIn"
label={
<FormattedMessage
defaultMessage="Turn on query features"
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
defaultMessage="Off"
id="common.ui.queryBar.kqlOffLabel"
values={Object {}}
/>
}
@ -94,37 +102,6 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
/>
</EuiFormRow>
</EuiForm>
<EuiHorizontalRule
margin="s"
size="full"
/>
<EuiText
grow={true}
size="xs"
>
<p>
<FormattedMessage
defaultMessage="Not ready yet? Find our lucene docs {docsLink}."
id="common.ui.queryBar.luceneDocsDescription"
values={
Object {
"docsLink": <EuiLink
color="primary"
href="https://www.elastic.co/guide/en/elasticsearch/reference/foo/query-dsl-query-string-query.html#query-string-syntax"
target="_blank"
type="button"
>
<FormattedMessage
defaultMessage="here"
id="common.ui.queryBar.luceneDocsDescription.docsLinkText"
values={Object {}}
/>
</EuiLink>,
}
}
/>
</p>
</EuiText>
</div>
</EuiPopover>
`;
@ -141,8 +118,8 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
type="button"
>
<FormattedMessage
defaultMessage="Options"
id="common.ui.queryBar.optionsButtonLabel"
defaultMessage="KQL"
id="common.ui.queryBar.kqlLanguageName"
values={Object {}}
/>
</EuiButtonEmpty>
@ -176,8 +153,9 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
>
<p>
<FormattedMessage
defaultMessage="Our new autocomplete and simple syntax features can help you create your
queries. Just start typing and you’ll see matches related to your data. See docs {docsLink}."
defaultMessage="The {docsLink} (KQL) offers a simplified query
syntax and support for scripted fields. KQL also provides autocomplete if you have
a Basic license or above. If you turn off KQL, Kibana uses Lucene."
id="common.ui.queryBar.syntaxOptionsDescription"
values={
Object {
@ -188,8 +166,8 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
type="button"
>
<FormattedMessage
defaultMessage="here"
id="common.ui.queryBar.syntaxOptionsDescription.docsLinkText"
defaultMessage="Kibana query language"
id="common.ui.queryBar.kqlFullLanguageName"
values={Object {}}
/>
</EuiLink>,
@ -206,6 +184,13 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Kibana query language"
id="common.ui.queryBar.kqlFullLanguageName"
values={Object {}}
/>
}
>
<EuiSwitch
checked={true}
@ -213,8 +198,8 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
id="queryEnhancementOptIn"
label={
<FormattedMessage
defaultMessage="Turn on query features"
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
defaultMessage="On"
id="common.ui.queryBar.kqlOnLabel"
values={Object {}}
/>
}
@ -223,37 +208,6 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
/>
</EuiFormRow>
</EuiForm>
<EuiHorizontalRule
margin="s"
size="full"
/>
<EuiText
grow={true}
size="xs"
>
<p>
<FormattedMessage
defaultMessage="Not ready yet? Find our lucene docs {docsLink}."
id="common.ui.queryBar.luceneDocsDescription"
values={
Object {
"docsLink": <EuiLink
color="primary"
href="https://www.elastic.co/guide/en/elasticsearch/reference/foo/query-dsl-query-string-query.html#query-string-syntax"
target="_blank"
type="button"
>
<FormattedMessage
defaultMessage="here"
id="common.ui.queryBar.luceneDocsDescription.docsLinkText"
values={Object {}}
/>
</EuiLink>,
}
}
/>
</p>
</EuiText>
</div>
</EuiPopover>
`;

54
src/legacy/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
View file

@ -41,37 +41,33 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
className="kuiLocalSearchAssistedInput"
>
<EuiFieldText
append={
<QueryLanguageSwitcher
language="kuery"
onSelectLanguage={[Function]}
/>
}
aria-activedescendant=""
aria-autocomplete="list"
aria-controls="kbnTypeahead__items"
aria-label="Search input"
autoComplete="off"
autoFocus={false}
className="kuiLocalSearchAssistedInput__input"
compressed={false}
data-test-subj="queryInput"
fullWidth={true}
icon="console"
inputRef={[Function]}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
placeholder="Search… (e.g. status:200 AND extension:PHP)"
placeholder="Search"
role="textbox"
spellCheck={false}
type="text"
value="response:200"
/>
<div
className="kuiLocalSearchAssistedInput__assistance"
>
<QueryLanguageSwitcher
language="kuery"
onSelectLanguage={[Function]}
/>
</div>
</div>
</div>
</form>
@ -142,37 +138,33 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
className="kuiLocalSearchAssistedInput"
>
<EuiFieldText
append={
<QueryLanguageSwitcher
language="lucene"
onSelectLanguage={[Function]}
/>
}
aria-activedescendant=""
aria-autocomplete="list"
aria-controls="kbnTypeahead__items"
aria-label="Search input"
autoComplete="off"
autoFocus={true}
className="kuiLocalSearchAssistedInput__input"
compressed={false}
data-test-subj="queryInput"
fullWidth={true}
icon="console"
inputRef={[Function]}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
placeholder="Search… (e.g. status:200 AND extension:PHP)"
placeholder="Search"
role="textbox"
spellCheck={false}
type="text"
value="response:200"
/>
<div
className="kuiLocalSearchAssistedInput__assistance"
>
<QueryLanguageSwitcher
language="lucene"
onSelectLanguage={[Function]}
/>
</div>
</div>
</div>
</form>
@ -243,37 +235,33 @@ exports[`QueryBar Should render the given query 1`] = `
className="kuiLocalSearchAssistedInput"
>
<EuiFieldText
append={
<QueryLanguageSwitcher
language="kuery"
onSelectLanguage={[Function]}
/>
}
aria-activedescendant=""
aria-autocomplete="list"
aria-controls="kbnTypeahead__items"
aria-label="Search input"
autoComplete="off"
autoFocus={true}
className="kuiLocalSearchAssistedInput__input"
compressed={false}
data-test-subj="queryInput"
fullWidth={true}
icon="console"
inputRef={[Function]}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
placeholder="Search… (e.g. status:200 AND extension:PHP)"
placeholder="Search"
role="textbox"
spellCheck={false}
type="text"
value="response:200"
/>
<div
className="kuiLocalSearchAssistedInput__assistance"
>
<QueryLanguageSwitcher
language="kuery"
onSelectLanguage={[Function]}
/>
</div>
</div>
</div>
</form>

59
src/legacy/ui/public/query_bar/components/language_switcher.tsx
View file

@ -21,7 +21,6 @@ import {
EuiButtonEmpty,
EuiForm,
EuiFormRow,
EuiHorizontalRule,
EuiLink,
EuiPopover,
EuiPopoverTitle,
@ -33,7 +32,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
import React, { Component } from 'react';
import { documentationLinks } from '../../documentation_links/documentation_links';
const luceneQuerySyntaxDocs = documentationLinks.query.luceneQuerySyntax;
const kueryQuerySyntaxDocs = documentationLinks.query.kueryQuerySyntax;
interface State {
@ -51,9 +49,22 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
};
public render() {
const luceneLabel = (
<FormattedMessage id="common.ui.queryBar.luceneLanguageName" defaultMessage="Lucene" />
);
const kqlLabel = (
<FormattedMessage id="common.ui.queryBar.kqlLanguageName" defaultMessage="KQL" />
);
const kqlFullName = (
<FormattedMessage
id="common.ui.queryBar.kqlFullLanguageName"
defaultMessage="Kibana query language"
/>
);
const button = (
<EuiButtonEmpty size="xs" onClick={this.togglePopover}>
<FormattedMessage id="common.ui.queryBar.optionsButtonLabel" defaultMessage="Options" />
{this.props.language === 'lucene' ? luceneLabel : kqlLabel}
</EuiButtonEmpty>
);
@ -79,15 +90,13 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
<p>
<FormattedMessage
id="common.ui.queryBar.syntaxOptionsDescription"
defaultMessage="Our new autocomplete and simple syntax features can help you create your
queries. Just start typing and you’ll see matches related to your data. See docs {docsLink}."
defaultMessage="The {docsLink} (KQL) offers a simplified query
syntax and support for scripted fields. KQL also provides autocomplete if you have
a Basic license or above. If you turn off KQL, Kibana uses Lucene."
values={{
docsLink: (
<EuiLink href={kueryQuerySyntaxDocs} target="_blank">
<FormattedMessage
id="common.ui.queryBar.syntaxOptionsDescription.docsLinkText"
defaultMessage="here"
/>
{kqlFullName}
</EuiLink>
),
}}
@ -98,15 +107,16 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
<EuiSpacer size="m" />
<EuiForm>
<EuiFormRow>
<EuiFormRow label={kqlFullName}>
<EuiSwitch
id="queryEnhancementOptIn"
name="popswitch"
label={
<FormattedMessage
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
defaultMessage="Turn on query features"
/>
this.props.language === 'kuery' ? (
<FormattedMessage id="common.ui.queryBar.kqlOnLabel" defaultMessage="On" />
) : (
<FormattedMessage id="common.ui.queryBar.kqlOffLabel" defaultMessage="Off" />
)
}
checked={this.props.language === 'kuery'}
onChange={this.onSwitchChange}
@ -114,27 +124,6 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
/>
</EuiFormRow>
</EuiForm>
<EuiHorizontalRule margin="s" />
<EuiText size="xs">
<p>
<FormattedMessage
id="common.ui.queryBar.luceneDocsDescription"
defaultMessage="Not ready yet? Find our lucene docs {docsLink}."
values={{
docsLink: (
<EuiLink href={luceneQuerySyntaxDocs} target="_blank">
<FormattedMessage
id="common.ui.queryBar.luceneDocsDescription.docsLinkText"
defaultMessage="here"
/>
</EuiLink>
),
}}
/>
</p>
</EuiText>
</div>
</EuiPopover>
);

7
src/legacy/ui/public/query_bar/components/query_bar.test.tsx
View file

@ -192,7 +192,7 @@ describe('QueryBar', () => {
const mockStorage = createMockStorage();
const mockCallback = jest.fn();
const component = shallowWithIntl(
const component = mountWithIntl(
<QueryBar.WrappedComponent
query={kqlQuery}
onSubmit={mockCallback}
@ -204,7 +204,10 @@ describe('QueryBar', () => {
/>
);
component.find(QueryLanguageSwitcher).simulate('selectLanguage', 'lucene');
component
.find(QueryLanguageSwitcher)
.props()
.onSelectLanguage('lucene');
expect(mockStorage.set).toHaveBeenCalledWith('kibana.userQueryLanguage', 'lucene');
expect(mockCallback).toHaveBeenCalledWith({
dateRange: {

16
src/legacy/ui/public/query_bar/components/query_bar.tsx
View file

@ -562,10 +562,9 @@ export class QueryBarUI extends Component<Props, State> {
<div role="search">
<div className="kuiLocalSearchAssistedInput">
<EuiFieldText
className="kuiLocalSearchAssistedInput__input"
placeholder={this.props.intl.formatMessage({
id: 'common.ui.queryBar.searchInputPlaceholder',
defaultMessage: 'Search… (e.g. status:200 AND extension:PHP)',
defaultMessage: 'Search',
})}
value={this.state.query.query}
onKeyDown={this.onKeyDown}
@ -581,7 +580,6 @@ export class QueryBarUI extends Component<Props, State> {
}}
autoComplete="off"
spellCheck={false}
icon="console"
aria-label={this.props.intl.formatMessage({
id: 'common.ui.queryBar.searchInputAriaLabel',
defaultMessage: 'Search input',
@ -595,13 +593,13 @@ export class QueryBarUI extends Component<Props, State> {
}
role="textbox"
prepend={this.props.prepend}
append={
<QueryLanguageSwitcher
language={this.state.query.language}
onSelectLanguage={this.onSelectLanguage}
/>
}
/>
<div className="kuiLocalSearchAssistedInput__assistance">
<QueryLanguageSwitcher
language={this.state.query.language}
onSelectLanguage={this.onSelectLanguage}
/>
</div>
</div>
</div>
</form>

5
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -569,15 +569,10 @@
"common.ui.paginateSelectableList.sortByButtonLabelScreenReaderOnly": "排序依据",
"common.ui.parseEsInterval.invalidEsCalendarIntervalErrorMessage": "无效的日历时间间隔：{interval}，值必须为 1",
"common.ui.parseEsInterval.invalidEsIntervalFormatErrorMessage": "无效的时间间隔格式：{interval}",
"common.ui.queryBar.luceneDocsDescription": "尚未就绪？在{docsLink}查找我们的 lucene 文档。",
"common.ui.queryBar.luceneDocsDescription.docsLinkText": "此处",
"common.ui.queryBar.optionsButtonLabel": "选项",
"common.ui.queryBar.searchInputAriaLabel": "搜索输入",
"common.ui.queryBar.searchInputPlaceholder": "搜索……（例如，status:200 AND extension:PHP）",
"common.ui.queryBar.syntaxOptionsDescription": "我们的实验性自动完成功能及简单语法功能可以帮助您创建自己的查询。只需开始键入，便会看到与您的数据相关的匹配。请参阅{docsLink}的文档。",
"common.ui.queryBar.syntaxOptionsDescription.docsLinkText": "此处",
"common.ui.queryBar.syntaxOptionsTitle": "语法选项",
"common.ui.queryBar.turnOnQueryFeaturesLabel": "打开查询功能",
"common.ui.savedObjectFinder.addNewItemButtonLabel": "添加新的 {item}",
"common.ui.savedObjectFinder.manageItemsButtonLabel": "管理 {items}",
"common.ui.savedObjectFinder.noMatchesFoundDescription": "未找到任何匹配的 {items}。",