Skip to content

Commit

Permalink
Changes to the unified search save query UI (#155238)
Browse files Browse the repository at this point in the history
## Summary

Makes the changes described on
#153809 (comment)

<img width="481" alt="image"
src="https://user-images.githubusercontent.com/17003240/233070006-42d45555-a469-4aa7-969c-b121f9761b76.png">

<img width="435" alt="image"
src="https://user-images.githubusercontent.com/17003240/233070100-9ee0ea02-ce4f-4ee0-904d-f55754d40b56.png">


### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
  • Loading branch information
stratoula authored Apr 21, 2023
1 parent 29ffa17 commit 89258d7
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 80 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ describe('Querybar Menu component', () => {
expect(languageSwitcher.length).toBeTruthy();
});

it('should render the save query quick buttons', async () => {
it('should render the save query quick button', async () => {
const newProps = {
...props,
openQueryBarMenu: true,
Expand All @@ -254,10 +254,6 @@ describe('Querybar Menu component', () => {
'[data-test-subj="saved-query-management-save-changes-button"]'
);
expect(saveChangesButton.length).toBeTruthy();
const saveChangesAsNewButton = component.find(
'[data-test-subj="saved-query-management-save-as-new-button"]'
);
expect(saveChangesAsNewButton.length).toBeTruthy();
});

it('should render all filter panel options by default', async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@ import {
export const strings = {
getFilterSetButtonLabel: () =>
i18n.translate('unifiedSearch.filter.options.filterSetButtonLabel', {
defaultMessage: 'Saved query menu',
defaultMessage: 'Query menu',
}),
getSavedQueryPopoverSaveChangesButtonText: () =>
i18n.translate('unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonText', {
defaultMessage: 'Update query',
}),
};

Expand Down Expand Up @@ -171,7 +175,10 @@ function QueryBarMenuComponent({
);
case 'saveForm':
return (
<EuiContextMenuPanel items={[<div style={{ padding: 16 }}>{saveFormComponent}</div>]} />
<EuiContextMenuPanel
title={strings.getSavedQueryPopoverSaveChangesButtonText()}
items={[<div style={{ padding: 16 }}>{saveFormComponent}</div>]}
/>
);
case 'saveAsNewForm':
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,15 @@ export const strings = {
}),
getLoadOtherFilterSetLabel: () =>
i18n.translate('unifiedSearch.filter.options.loadOtherFilterSetLabel', {
defaultMessage: 'Load a different query',
defaultMessage: 'Load query',
}),
getLoadCurrentFilterSetLabel: () =>
i18n.translate('unifiedSearch.filter.options.loadCurrentFilterSetLabel', {
defaultMessage: 'Load query',
}),
getSaveAsNewFilterSetLabel: () =>
i18n.translate('unifiedSearch.filter.options.saveAsNewFilterSetLabel', {
defaultMessage: 'Save as new',
defaultMessage: 'Save query',
}),
getSaveFilterSetLabel: () =>
i18n.translate('unifiedSearch.filter.options.saveFilterSetLabel', {
Expand All @@ -88,7 +88,7 @@ export const strings = {
}),
getSavedQueryPopoverSaveChangesButtonText: () =>
i18n.translate('unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonText', {
defaultMessage: 'Save changes',
defaultMessage: 'Update query',
}),
getSavedQueryPopoverSaveAsNewButtonAriaLabel: () =>
i18n.translate('unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel', {
Expand All @@ -100,7 +100,7 @@ export const strings = {
}),
getSaveCurrentFilterSetLabel: () =>
i18n.translate('unifiedSearch.filter.options.saveCurrentFilterSetLabel', {
defaultMessage: 'Save current query',
defaultMessage: 'Save as new',
}),
getApplyAllFiltersButtonLabel: () =>
i18n.translate('unifiedSearch.filter.options.applyAllFiltersButtonLabel', {
Expand Down Expand Up @@ -238,10 +238,6 @@ export function QueryBarMenuPanels({
};
};

const handleSaveAsNew = useCallback(() => {
setRenderedComponent('saveAsNewForm');
}, [setRenderedComponent]);

const handleSave = useCallback(() => {
setRenderedComponent('saveForm');
}, [setRenderedComponent]);
Expand Down Expand Up @@ -413,38 +409,17 @@ export function QueryBarMenuPanels({
</EuiFlexItem>
{savedQuery && savedQueryHasChanged && Boolean(showSaveQuery) && hasFiltersOrQuery && (
<EuiFlexItem grow={false}>
<EuiFlexGroup
direction="row"
gutterSize="s"
alignItems="center"
justifyContent="center"
responsive={false}
wrap={false}
<EuiButton
size="s"
fill
onClick={handleSave}
aria-label={strings.getSavedQueryPopoverSaveChangesButtonAriaLabel(
savedQuery?.attributes.title
)}
data-test-subj="saved-query-management-save-changes-button"
>
<EuiFlexItem grow={false}>
<EuiButton
size="s"
fill
onClick={handleSave}
aria-label={strings.getSavedQueryPopoverSaveChangesButtonAriaLabel(
savedQuery?.attributes.title
)}
data-test-subj="saved-query-management-save-changes-button"
>
{strings.getSavedQueryPopoverSaveChangesButtonText()}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
size="s"
onClick={handleSaveAsNew}
aria-label={strings.getSavedQueryPopoverSaveAsNewButtonAriaLabel()}
data-test-subj="saved-query-management-save-as-new-button"
>
{strings.getSavedQueryPopoverSaveAsNewButtonText()}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
{strings.getSavedQueryPopoverSaveChangesButtonText()}
</EuiButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ describe('Saved query management list component', () => {
.find('[data-test-subj="saved-query-management-apply-changes-button"]')
.first()
.text()
).toBe('Apply query');
).toBe('Load query');

const newProps = {
...props,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -309,22 +309,7 @@ export function SavedQueryManagementList({
</>
)}
<EuiPopoverFooter paddingSize="s">
<EuiFlexGroup
gutterSize="s"
justifyContent={canEditSavedObjects ? 'spaceBetween' : 'flexEnd'}
>
{canEditSavedObjects && (
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href={http.basePath.prepend(
`/app/management/kibana/objects?initialQuery=type:("query")`
)}
size="s"
>
Manage
</EuiButtonEmpty>
</EuiFlexItem>
)}
<EuiFlexGroup gutterSize="s" direction="column">
<EuiFlexItem grow={false}>
<EuiButton
size="s"
Expand All @@ -334,26 +319,33 @@ export function SavedQueryManagementList({
aria-label={i18n.translate(
'unifiedSearch.search.searchBar.savedQueryPopoverApplyFilterSetLabel',
{
defaultMessage: 'Apply query',
defaultMessage: 'Load query',
}
)}
data-test-subj="saved-query-management-apply-changes-button"
>
{hasFiltersOrQuery
? i18n.translate(
'unifiedSearch.search.searchBar.savedQueryPopoverReplaceFilterSetLabel',
{
defaultMessage: 'Load query',
}
)
: i18n.translate(
'unifiedSearch.search.searchBar.savedQueryPopoverApplyFilterSetLabel',
{
defaultMessage: 'Apply query',
}
)}
{i18n.translate(
'unifiedSearch.search.searchBar.savedQueryPopoverApplyFilterSetLabel',
{
defaultMessage: 'Load query',
}
)}
</EuiButton>
</EuiFlexItem>
{canEditSavedObjects && (
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href={http.basePath.prepend(
`/app/management/kibana/objects?initialQuery=type:("query")`
)}
size="s"
>
{i18n.translate('unifiedSearch.search.searchBar.savedQueryPopoverManageLabel', {
defaultMessage: 'Manage saved objects',
})}
</EuiButtonEmpty>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiPopoverFooter>
{showDeletionConfirmationModal && toBeDeletedSavedQuery && (
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -5812,7 +5812,6 @@
"unifiedSearch.search.searchBar.savedQueryPopoverApplyFilterSetLabel": "Appliquer la requête enregistrée",
"unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionCancelButtonText": "Annuler",
"unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionConfirmButtonText": "Supprimer",
"unifiedSearch.search.searchBar.savedQueryPopoverReplaceFilterSetLabel": "Remplacer par la requête enregistrée sélectionnée",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel": "Enregistrer en tant que nouvelle requête enregistrée",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonText": "Enregistrer en tant que nouvelle",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonText": "Enregistrer les modifications",
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -5813,7 +5813,6 @@
"unifiedSearch.search.searchBar.savedQueryPopoverApplyFilterSetLabel": "保存されたクエリの適用",
"unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionCancelButtonText": "キャンセル",
"unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionConfirmButtonText": "削除",
"unifiedSearch.search.searchBar.savedQueryPopoverReplaceFilterSetLabel": "選択した保存されたクエリで置換",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel": "新規保存クエリを保存",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonText": "新規保存",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonText": "変更を保存",
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -5813,7 +5813,6 @@
"unifiedSearch.search.searchBar.savedQueryPopoverApplyFilterSetLabel": "应用已保存查询",
"unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionCancelButtonText": "取消",
"unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionConfirmButtonText": "删除",
"unifiedSearch.search.searchBar.savedQueryPopoverReplaceFilterSetLabel": "替换为选定已保存查询",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel": "另存为新的已保存查询",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveAsNewButtonText": "另存为新的",
"unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonText": "保存更改",
Expand Down

0 comments on commit 89258d7

Please sign in to comment.