From b7f179ab20e3bae831f1e7ed5b499ceff59ce6bd Mon Sep 17 00:00:00 2001
From: Viktor Tsvetkov <142901247+vtsvetkov-splunk@users.noreply.github.com>
Date: Tue, 6 Feb 2024 12:30:47 +0100
Subject: [PATCH] fix(EntityModal): prevent Enter from submitting the form in
 Modal window (#1047)

## The problem

Enter for a form with single input triggers the form submission. [The
specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission).
The form submission was not properly handled.

## The fix
- hook up on form submission by adding callback onSubmit for `<form />`
element
- prevent default behavior (sending GET with formdata in params and
redirect) and proceed with our handlers (validation and sending as JSON
with AJAX)

## References
- https://splunk.atlassian.net/browse/ADDON-61126
- https://splunk.atlassian.net/browse/ADDON-58706

Resolves #875
---
 ui/src/components/BaseFormView.tsx            | 9 ++++++---
 ui/src/components/ConfigurationFormView.jsx   | 7 +++++--
 ui/src/components/EntityModal/EntityModal.tsx | 7 ++++---
 ui/src/components/EntityPage.tsx              | 6 ++++--
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/BaseFormView.tsx b/ui/src/components/BaseFormView.tsx
index 6c9557ca1..ccc147188 100644
--- a/ui/src/components/BaseFormView.tsx
+++ b/ui/src/components/BaseFormView.tsx
@@ -522,8 +522,8 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
         }
     };
 
-    // eslint-disable-next-line react/no-unused-class-component-methods
-    handleSubmit = () => {
+    handleSubmit = (event: React.MouseEvent | React.FormEvent) => {
+        event.preventDefault();
         this.clearErrorMsg();
         this.props.handleFormSubmit(/* isSubmitting */ true, /* closeEntity */ false);
 
@@ -1253,7 +1253,10 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
         }
         return (
             <div>
-                <form style={this.props.mode === MODE_CONFIG ? { marginTop: '25px' } : {}}>
+                <form
+                    onSubmit={this.handleSubmit}
+                    style={this.props.mode === MODE_CONFIG ? { marginTop: '25px' } : {}}
+                >
                     {this.generateWarningMessage()}
                     {this.generateErrorMessage()}
                     {this.entities?.map((e) => {
diff --git a/ui/src/components/ConfigurationFormView.jsx b/ui/src/components/ConfigurationFormView.jsx
index 949badf82..87b6cc284 100644
--- a/ui/src/components/ConfigurationFormView.jsx
+++ b/ui/src/components/ConfigurationFormView.jsx
@@ -37,8 +37,11 @@ function ConfigurationFormView({ serviceName }) {
         });
     }, [serviceName]);
 
-    const handleSubmit = () => {
-        form.current.handleSubmit();
+    /**
+     * @param event {React.MouseEvent<HTMLButtonElement>}
+     */
+    const handleSubmit = (event) => {
+        form.current.handleSubmit(event);
     };
 
     const handleFormSubmit = (set) => {
diff --git a/ui/src/components/EntityModal/EntityModal.tsx b/ui/src/components/EntityModal/EntityModal.tsx
index 640b2751d..0c47c6456 100644
--- a/ui/src/components/EntityModal/EntityModal.tsx
+++ b/ui/src/components/EntityModal/EntityModal.tsx
@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 import { _ } from '@splunk/ui-utils/i18n';
 
-import { MODE_CLONE, MODE_CREATE, MODE_EDIT, Mode } from '../../constants/modes';
+import { ButtonClickHandler } from '@splunk/react-ui/Button';
+import { Mode, MODE_CLONE, MODE_CREATE, MODE_EDIT } from '../../constants/modes';
 import { StyledButton } from '../../pages/EntryPageStyle';
 import BaseFormView from '../BaseFormView';
 
@@ -53,8 +54,8 @@ class EntityModal extends Component<EntityModalProps, EntityModalState> {
         this.props.handleRequestClose();
     };
 
-    handleSubmit = () => {
-        const result = this.form.current?.handleSubmit();
+    handleSubmit: ButtonClickHandler = (e) => {
+        const result = this.form.current?.handleSubmit(e);
         if (result) {
             this.handleRequestClose();
         }
diff --git a/ui/src/components/EntityPage.tsx b/ui/src/components/EntityPage.tsx
index 61866cf48..fbe689153 100644
--- a/ui/src/components/EntityPage.tsx
+++ b/ui/src/components/EntityPage.tsx
@@ -8,6 +8,7 @@ import { variables } from '@splunk/themes';
 
 import Heading from '@splunk/react-ui/Heading';
 import styled from 'styled-components';
+import { ButtonClickHandler } from '@splunk/react-ui/Button';
 import { MODE_CLONE, MODE_CREATE, MODE_EDIT, Mode } from '../constants/modes';
 import BaseFormView from './BaseFormView';
 import { SubTitleComponent } from '../pages/Input/InputPageStyle';
@@ -55,8 +56,8 @@ function EntityPage({
         buttonText = _('Update');
     }
 
-    const handleSubmit = () => {
-        const result = form.current?.handleSubmit();
+    const handleSubmit: ButtonClickHandler = (e) => {
+        const result = form.current?.handleSubmit(e);
         if (result) {
             handleRequestClose();
         }
@@ -107,6 +108,7 @@ function EntityPage({
                             style={{ width: '80px' }}
                         />
                         <StyledButton
+                            type="Submit"
                             appearance="primary"
                             label={isSubmitting ? <WaitSpinner /> : buttonText}
                             onClick={handleSubmit}