Skip to content

Commit

Permalink
Add visual indication of selected language in query bar (#30899)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@Bargs
Bargs authored Feb 20, 2019
1 parent c8cf805 commit cd7e1df
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 162 deletions.
110 changes: 32 additions & 78 deletions src/legacy/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 {
Expand All @@ -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>,
Expand All @@ -77,15 +78,22 @@ 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}
data-test-subj="languageToggle"
id="queryEnhancementOptIn"
label={
<FormattedMessage
defaultMessage="Turn on query features"
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
defaultMessage="Off"
id="common.ui.queryBar.kqlOffLabel"
values={Object {}}
/>
}
Expand All @@ -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>
`;
Expand All @@ -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>
Expand Down Expand Up @@ -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 {
Expand All @@ -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>,
Expand All @@ -206,15 +184,22 @@ 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}
data-test-subj="languageToggle"
id="queryEnhancementOptIn"
label={
<FormattedMessage
defaultMessage="Turn on query features"
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
defaultMessage="On"
id="common.ui.queryBar.kqlOnLabel"
values={Object {}}
/>
}
Expand All @@ -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 changes: 21 additions & 33 deletions src/legacy/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit cd7e1df

Please sign in to comment.