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

* use validation by clicking on save, added autotrim * Fixes form errors. * Fixed comments Co-authored-by: Elastic Machine <[email protected]>
elastic · Apr 15, 2020 · 7d9ad9e · 7d9ad9e
1 parent 7698bf1
commit 7d9ad9e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 55 deletions.
diff --git a/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx b/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import {
   EuiButtonEmpty,
   EuiOverlayMask,
@@ -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(
@@ -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.',
     }
   );
 
-  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
@@ -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">
@@ -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>
 
@@ -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',

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -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": "クエリを保存",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -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": "保存查询",