Skip to content

Save query form validation on blur #43726

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

Merged
merged 6 commits into from
Aug 22, 2019
Merged

Save query form validation on blur #43726

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
9d9ab77
Fix typo
Bargs Aug 21, 2019
8fcb538
Only do validation onBlur
Bargs Aug 21, 2019
285a4c4
Merge remote-tracking branch 'upstream/master' into whitespaceErrorFixes
Bargs Aug 22, 2019
42d29f1
Validate on every render if form currently has errors
Bargs Aug 22, 2019
c501d9a
clean up after an expectation failure
Bargs Aug 22, 2019
2c01d0d
de-focus input to trigger validation
Bargs Aug 22, 2019
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
42 changes: 28 additions & 14 deletions ...ugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { sortBy } from 'lodash';
import { sortBy, isEqual } from 'lodash';
import { SavedQuery, SavedQueryAttributes } from '../../index';
import { SavedQueryService } from '../../lib/saved_query_service';

Expand Down Expand Up @@ -74,6 +74,7 @@ export const SaveQueryForm: FunctionComponent<Props> = ({
const [shouldIncludeTimefilter, setIncludeTimefilter] = useState(
savedQuery ? !!savedQuery.timefilter : false
);
const [formErrors, setFormErrors] = useState<string[]>([]);

useEffect(() => {
const fetchQueries = async () => {
Expand All @@ -91,12 +92,6 @@ export const SaveQueryForm: FunctionComponent<Props> = ({
}
);

const hasTitleConflict = !!savedQueries.find(
existingSavedQuery => !savedQuery && existingSavedQuery.attributes.title === title
);

const hasWhitespaceError = title.length > title.trim().length;

const titleConflictErrorText = i18n.translate(
'data.search.searchBar.savedQueryForm.titleConflictText',
{
Expand All @@ -106,18 +101,36 @@ export const SaveQueryForm: FunctionComponent<Props> = ({
const whitespaceErrorText = i18n.translate(
'data.search.searchBar.savedQueryForm.whitespaceErrorText',
{
defaultMessage: 'Title cannot contain leading or trailing white space',
defaultMessage: 'Title cannot contain leading or trailing whitespace',
}
);
const hasErrors = hasWhitespaceError || hasTitleConflict;

const errors = () => {
if (hasWhitespaceError) return [whitespaceErrorText];
if (hasTitleConflict) return [titleConflictErrorText];
return [];
const validate = () => {
const errors = [];
if (title.length > title.trim().length) {
errors.push(whitespaceErrorText);
}
if (
!!savedQueries.find(
existingSavedQuery => !savedQuery && existingSavedQuery.attributes.title === title
)
) {
errors.push(titleConflictErrorText);
}

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

const hasErrors = formErrors.length > 0;

if (hasErrors) {
validate();
}

const saveQueryForm = (
<EuiForm isInvalid={hasErrors} error={errors()}>
<EuiForm isInvalid={hasErrors} error={formErrors}>
<EuiFormRow>
<EuiText color="subdued">{savedQueryDescriptionText}</EuiText>
</EuiFormRow>
Expand All @@ -140,6 +153,7 @@ export const SaveQueryForm: FunctionComponent<Props> = ({
}}
data-test-subj="saveQueryFormTitle"
isInvalid={hasErrors}
onBlur={validate}
/>
</EuiFormRow>

Expand Down
15 changes: 13 additions & 2 deletions test/functional/services/saved_query_management_component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,20 @@ export function SavedQueryManagementComponentProvider({ getService }) {
if (name) {
await testSubjects.setValue('saveQueryFormTitle', name);
}

// Form input validation only happens onBlur. Clicking the save button should de-focus the
// input element and the validation should prevent a save from actually happening if there's
// an error.
await testSubjects.click('savedQueryFormSaveButton');
Copy link
Contributor

@TinaHeiligers TinaHeiligers Aug 22, 2019

Choose a reason for hiding this comment

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

This should also work.


const saveQueryFormSaveButtonStatus = await testSubjects.isEnabled('savedQueryFormSaveButton');
expect(saveQueryFormSaveButtonStatus).to.not.eql(true);
await testSubjects.click('savedQueryFormCancelButton');

try {
expect(saveQueryFormSaveButtonStatus).to.not.eql(true);
}
finally {
await testSubjects.click('savedQueryFormCancelButton');
}
}

async saveCurrentlyLoadedAsNewQuery(name, description, includeFilters, includeTimeFilter) {
Expand Down