[8.x] [Index Management] Fix Flashing error banner in Index Template …

…form (#196786) (#197279)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Index Management] Fix Flashing error banner in Index Template form
(#196786)](#196786)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jusheng
Huang","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-22T15:12:12Z","message":"[Index
Management] Fix Flashing error banner in Index Template form
(#196786)\n\n## Summary\r\n\r\nFixes #194751 \r\n\r\nIn `EuiForm`, if
the value of `isInvalid` is true, it will render\r\naddressFormErrors
tip messages.\r\n\r\nAnd In `step_logistics.tsx`, `isInValid` is setted
by\r\n`isInvalid={isSubmitted && !isFormValid}`\r\n\r\nBut form `submit`
method set `isSubmitted` to true first, then validate\r\nform. At this
time, `isSubmitted is true` and `isFormValid is\r\nunedfined`. So
addressFormErrors shows
immediately.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/687a359d-ed33-4860-8d96-4543f2ef4898)\r\n\r\n**So,
maybe when `isSubmitting` is true, addressFormErrors should not
be\r\nshown.**\r\n\r\nCo-authored-by: Elastic Machine
<[email protected]>","sha":"f629d96b85b222fbc3116e6a0a4308882d144aef","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Index
Management","Team:Kibana
Management","release_note:skip","💝community","v9.0.0","backport:prev-minor","v8.16.0","v8.17.0"],"title":"[Index
Management] Fix Flashing error banner in Index Template
form","number":196786,"url":"https://github.com/elastic/kibana/pull/196786","mergeCommit":{"message":"[Index
Management] Fix Flashing error banner in Index Template form
(#196786)\n\n## Summary\r\n\r\nFixes #194751 \r\n\r\nIn `EuiForm`, if
the value of `isInvalid` is true, it will render\r\naddressFormErrors
tip messages.\r\n\r\nAnd In `step_logistics.tsx`, `isInValid` is setted
by\r\n`isInvalid={isSubmitted && !isFormValid}`\r\n\r\nBut form `submit`
method set `isSubmitted` to true first, then validate\r\nform. At this
time, `isSubmitted is true` and `isFormValid is\r\nunedfined`. So
addressFormErrors shows
immediately.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/687a359d-ed33-4860-8d96-4543f2ef4898)\r\n\r\n**So,
maybe when `isSubmitting` is true, addressFormErrors should not
be\r\nshown.**\r\n\r\nCo-authored-by: Elastic Machine
<[email protected]>","sha":"f629d96b85b222fbc3116e6a0a4308882d144aef"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196786","number":196786,"mergeCommit":{"message":"[Index
Management] Fix Flashing error banner in Index Template form
(#196786)\n\n## Summary\r\n\r\nFixes #194751 \r\n\r\nIn `EuiForm`, if
the value of `isInvalid` is true, it will render\r\naddressFormErrors
tip messages.\r\n\r\nAnd In `step_logistics.tsx`, `isInValid` is setted
by\r\n`isInvalid={isSubmitted && !isFormValid}`\r\n\r\nBut form `submit`
method set `isSubmitted` to true first, then validate\r\nform. At this
time, `isSubmitted is true` and `isFormValid is\r\nunedfined`. So
addressFormErrors shows
immediately.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/687a359d-ed33-4860-8d96-4543f2ef4898)\r\n\r\n**So,
maybe when `isSubmitting` is true, addressFormErrors should not
be\r\nshown.**\r\n\r\nCo-authored-by: Elastic Machine
<[email protected]>","sha":"f629d96b85b222fbc3116e6a0a4308882d144aef"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jusheng Huang <[email protected]>

x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx

@@ -194,6 +194,7 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
     const {
       submit,
       isSubmitted,
+      isSubmitting,
       isValid: isFormValid,
       getErrors: getFormErrors,
       getFormData,
@@ -275,7 +276,7 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
 
         <Form
           form={form}
-          isInvalid={isSubmitted && !isFormValid}
+          isInvalid={isSubmitted && !isSubmitting && !isFormValid}
           error={getFormErrors()}
           data-test-subj="stepLogistics"
         >