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 <elasticmachine@users.noreply.github.com>

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,6 +77,20 @@ export function SaveQueryForm({
   );
   const [formErrors, setFormErrors] = useState<string[]>([]);
 
+  const titleConflictErrorText = i18n.translate(
+    'data.search.searchBar.savedQueryForm.titleConflictText',
+    {
+      defaultMessage: 'Name conflicts with an existing saved query',
+    }
+  );
+
+  const savedQueryDescriptionText = i18n.translate(
+    'data.search.searchBar.savedQueryDescriptionText',
+    {
+      defaultMessage: 'Save query text and filters that you want to use again.',
+    }
+  );
+
   useEffect(() => {
     const fetchQueries = async () => {
       const allSavedQueries = await savedQueryService.getAllSavedQueries();
@@ -85,40 +100,8 @@ export function SaveQueryForm({
     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',
-    {
-      defaultMessage: 'Name cannot contain leading or trailing whitespace',
-    }
-  );
-
-  const validate = () => {
+  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,15 +112,38 @@ export function SaveQueryForm({
 
     if (!isEqual(errors, formErrors)) {
       setFormErrors(errors);
+      return false;
     }
-  };
+
+    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]);
 
   const hasErrors = formErrors.length > 0;
 
-  if (hasErrors) {
-    validate();
-  }
-
   const saveQueryForm = (
     <EuiForm isInvalid={hasErrors} error={formErrors} data-test-subj="saveQueryForm">
       <EuiFormRow>
@@ -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',

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": "クエリを保存",

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": "保存查询",