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

Jump to bottom

Clicking cancel in saved query save modal doesn't close it #62774

Merged
merged 6 commits into from
Apr 14, 2020
Merged

Clicking cancel in saved query save modal doesn't close it #62774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e82de8f
use validation by clicking on save, added autotrim
VladLasitsa Apr 7, 2020
d53c994
Fixes form errors.
VladLasitsa Apr 7, 2020
dc23f17
Fixed comments
VladLasitsa Apr 7, 2020
168e765
Merge branch 'master' into #62463
elasticmachine Apr 7, 2020
ece1c3a
Merge branch 'master' into #62463
elasticmachine Apr 13, 2020
17e6fda
Merge branch 'master' into #62463
elasticmachine Apr 14, 2020
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
99 changes: 48 additions & 51 deletions src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useCallback } from 'react';
import {
EuiButtonEmpty,
EuiOverlayMask,
Expand Down Expand Up @@ -63,6 +63,7 @@ export function SaveQueryForm({
showTimeFilterOption = true,
}: Props) {
const [title, setTitle] = useState(savedQuery ? savedQuery.title : '');
const [enabledSaveButton, setEnabledSaveButton] = useState(Boolean(savedQuery));
const [description, setDescription] = useState(savedQuery ? savedQuery.description : '');
const [savedQueries, setSavedQueries] = useState<SavedQuery[]>([]);
const [shouldIncludeFilters, setShouldIncludeFilters] = useState(
Expand All @@ -76,49 +77,31 @@ export function SaveQueryForm({
);
const [formErrors, setFormErrors] = useState<string[]>([]);

useEffect(() => {
const fetchQueries = async () => {
const allSavedQueries = await savedQueryService.getAllSavedQueries();
const sortedAllSavedQueries = sortBy(allSavedQueries, 'attributes.title') as SavedQuery[];
setSavedQueries(sortedAllSavedQueries);
};
fetchQueries();
}, [savedQueryService]);

const savedQueryDescriptionText = i18n.translate(
'data.search.searchBar.savedQueryDescriptionText',
{
defaultMessage: 'Save query text and filters that you want to use again.',
}
);

const titleConflictErrorText = i18n.translate(
'data.search.searchBar.savedQueryForm.titleConflictText',
{
defaultMessage: 'Name conflicts with an existing saved query',
}
);
const titleMissingErrorText = i18n.translate(
'data.search.searchBar.savedQueryForm.titleMissingText',
{
defaultMessage: 'Name is required',
}
);
const whitespaceErrorText = i18n.translate(
'data.search.searchBar.savedQueryForm.whitespaceErrorText',

const savedQueryDescriptionText = i18n.translate(
'data.search.searchBar.savedQueryDescriptionText',
{
defaultMessage: 'Name cannot contain leading or trailing whitespace',
defaultMessage: 'Save query text and filters that you want to use again.',
Copy link
Contributor

Choose a reason for hiding this comment

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

Save search bar configuration for future use.

}
);

const validate = () => {
useEffect(() => {
const fetchQueries = async () => {
const allSavedQueries = await savedQueryService.getAllSavedQueries();
const sortedAllSavedQueries = sortBy(allSavedQueries, 'attributes.title') as SavedQuery[];
setSavedQueries(sortedAllSavedQueries);
};
fetchQueries();
}, [savedQueryService]);

const validate = useCallback(() => {
const errors = [];
if (!title.length) {
errors.push(titleMissingErrorText);
}
if (title.length > title.trim().length) {
errors.push(whitespaceErrorText);
}
if (
!!savedQueries.find(
existingSavedQuery => !savedQuery && existingSavedQuery.attributes.title === title
Expand All @@ -129,14 +112,37 @@ export function SaveQueryForm({

if (!isEqual(errors, formErrors)) {
setFormErrors(errors);
return false;
}
};

const hasErrors = formErrors.length > 0;
return !formErrors.length;
}, [savedQueries, savedQuery, title, titleConflictErrorText, formErrors]);

const onClickSave = useCallback(() => {
if (validate()) {
onSave({
title,
description,
shouldIncludeFilters,
shouldIncludeTimefilter,
});
}
}, [validate, onSave, title, description, shouldIncludeFilters, shouldIncludeTimefilter]);

const onInputChange = useCallback(event => {
setEnabledSaveButton(Boolean(event.target.value));
setFormErrors([]);
setTitle(event.target.value);
}, []);

const autoTrim = useCallback(() => {
const trimmedTitle = title.trim();
if (title.length > trimmedTitle.length) {
setTitle(trimmedTitle);
}
}, [title]);

if (hasErrors) {
validate();
}
const hasErrors = formErrors.length > 0;

const saveQueryForm = (
<EuiForm isInvalid={hasErrors} error={formErrors} data-test-subj="saveQueryForm">
Expand All @@ -157,12 +163,10 @@ export function SaveQueryForm({
disabled={!!savedQuery}
value={title}
name="title"
onChange={event => {
setTitle(event.target.value);
}}
onChange={onInputChange}
data-test-subj="saveQueryFormTitle"
isInvalid={hasErrors}
onBlur={validate}
onBlur={autoTrim}
/>
</EuiFormRow>

Expand Down Expand Up @@ -235,17 +239,10 @@ export function SaveQueryForm({
</EuiButtonEmpty>

<EuiButton
onClick={() =>
onSave({
title,
description,
shouldIncludeFilters,
shouldIncludeTimefilter,
})
}
onClick={onClickSave}
fill
data-test-subj="savedQueryFormSaveButton"
disabled={hasErrors}
disabled={hasErrors || !enabledSaveButton}
>
{i18n.translate('data.search.searchBar.savedQueryFormSaveButtonText', {
defaultMessage: 'Save',
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -798,8 +798,6 @@
"data.search.searchBar.savedQueryDescriptionLabelText": "説明",
"data.search.searchBar.savedQueryDescriptionText": "再度使用するクエリテキストとフィルターを保存します。",
"data.search.searchBar.savedQueryForm.titleConflictText": "タイトルが既に保存されているクエリに使用されています",
"data.search.searchBar.savedQueryForm.titleMissingText": "名前が必要です",
"data.search.searchBar.savedQueryForm.whitespaceErrorText": "タイトルの始めと終わりにはスペースを使用できません",
"data.search.searchBar.savedQueryFormCancelButtonText": "キャンセル",
"data.search.searchBar.savedQueryFormSaveButtonText": "保存",
"data.search.searchBar.savedQueryFormTitle": "クエリを保存",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -799,8 +799,6 @@
"data.search.searchBar.savedQueryDescriptionLabelText": "描述",
"data.search.searchBar.savedQueryDescriptionText": "保存想要再次使用的查询文本和筛选。",
"data.search.searchBar.savedQueryForm.titleConflictText": "标题与现有已保存查询有冲突",
"data.search.searchBar.savedQueryForm.titleMissingText": "“名称”必填",
"data.search.searchBar.savedQueryForm.whitespaceErrorText": "标题不能包含前导或尾随空格",
"data.search.searchBar.savedQueryFormCancelButtonText": "取消",
"data.search.searchBar.savedQueryFormSaveButtonText": "保存",
"data.search.searchBar.savedQueryFormTitle": "保存查询",
Expand Down