[8.16] [Search] Fix: Enterprise Search gated form submission (elastic…

…#196983) (elastic#197087)

# Backport

This will backport the following commits from `8.x` to `8.16`:
- [[Search] Fix: Enterprise Search gated form submission
(elastic#196983)](elastic#196983)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Rodney
Norris","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-21T14:46:54Z","message":"[Search]
Fix: Enterprise Search gated form submission (elastic#196983)\n\n##
Summary\r\n\r\nUpdated the gate forms to explicit reload the browser
after the api call\r\nsucceeds to avoid race conditions from relying on
the form default\r\nbehavior to reload the
browser.","sha":"f25c12b8c7f48fa10ded3cdf5e1dd30fb9f164b5","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","Team:Search","v8.16.0","v8.17.0","v8.15.4"],"number":196983,"url":"https://github.com/elastic/kibana/pull/196983","mergeCommit":{"message":"[Search]
Fix: Enterprise Search gated form submission (elastic#196983)\n\n##
Summary\r\n\r\nUpdated the gate forms to explicit reload the browser
after the api call\r\nsucceeds to avoid race conditions from relying on
the form default\r\nbehavior to reload the
browser.","sha":"f25c12b8c7f48fa10ded3cdf5e1dd30fb9f164b5"}},"sourceBranch":"8.x","suggestedTargetBranches":["8.16","8.15"],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.15","label":"v8.15.4","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -447,10 +447,14 @@ export const AppSearchGate: React.FC = () => {
   const { feature, participateInUXLabs } = useValues(AppSearchGateLogic);
   const { formSubmitRequest, setAdditionalFeedback, setParticipateInUXLabs, setFeature } =
     useActions(AppSearchGateLogic);
+  const onSubmitForm = useCallback((e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    formSubmitRequest();
+  }, []);
   const options = getOptionsFeaturesList();
   return (
     <EuiPanel hasShadow={false}>
-      <EuiForm component="form" fullWidth>
+      <EuiForm component="form" fullWidth onSubmit={onSubmitForm}>
         <EuiFormLabel>
           {i18n.translate('xpack.enterpriseSearch.appSearch.gateForm.features.Label', {
             defaultMessage: 'What App Search feature are you looking to use?',
@@ -595,12 +599,7 @@ export const AppSearchGate: React.FC = () => {
         <EuiSpacer />
         <EuiFlexGroup justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButton
-              isDisabled={!feature ?? false}
-              type="submit"
-              fill
-              onClick={() => formSubmitRequest()}
-            >
+            <EuiButton isDisabled={!feature ?? false} type="submit" fill>
               {i18n.translate('xpack.enterpriseSearch.appSearch.gateForm.submit', {
                 defaultMessage: 'Submit',
               })}

x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate_logic.ts

@@ -39,7 +39,10 @@ export const AppSearchGateLogic = kea<MakeLogicType<AppSearchGateValues, AppSear
     setParticipateInUXLabs: (participateInUXLabs) => ({ participateInUXLabs }),
   },
   connect: {
-    actions: [UpdateAppSearchGatedFormDataApiLogic, ['makeRequest as submitGatedFormDataRequest']],
+    actions: [
+      UpdateAppSearchGatedFormDataApiLogic,
+      ['makeRequest as submitGatedFormDataRequest', 'apiSuccess as submitGatedFormSuccess'],
+    ],
   },
   listeners: ({ actions, values }) => ({
     formSubmitRequest: () => {
@@ -52,6 +55,9 @@ export const AppSearchGateLogic = kea<MakeLogicType<AppSearchGateValues, AppSear
         });
       }
     },
+    submitGatedFormSuccess: () => {
+      window.location.reload();
+    },
   }),
   path: ['enterprise_search', 'app_search', 'gate_form'],
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback } from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -538,10 +538,14 @@ export const WorkplaceSearchGate: React.FC = () => {
     useActions(WorkplaceSearchGateLogic);
 
   const { feature, participateInUXLabs } = useValues(WorkplaceSearchGateLogic);
+  const onSubmitForm = useCallback((e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    formSubmitRequest();
+  }, []);
 
   return (
     <EuiPanel hasShadow={false}>
-      <EuiForm component="form" fullWidth>
+      <EuiForm component="form" fullWidth onSubmit={onSubmitForm}>
         <EuiFormLabel>
           {i18n.translate('xpack.enterpriseSearch.workplaceSearch.gateForm.features.Label', {
             defaultMessage: 'What Workplace Search feature are you looking to use?',
@@ -686,12 +690,7 @@ export const WorkplaceSearchGate: React.FC = () => {
         <EuiSpacer />
         <EuiFlexGroup justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButton
-              isDisabled={!feature ?? false}
-              type="submit"
-              fill
-              onClick={() => formSubmitRequest()}
-            >
+            <EuiButton isDisabled={!feature ?? false} type="submit" fill>
               {i18n.translate('xpack.enterpriseSearch.workplaceSearch.gateForm.submit', {
                 defaultMessage: 'Submit',
               })}

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_logic.ts

@@ -36,7 +36,10 @@ export const WorkplaceSearchGateLogic = kea<
     setParticipateInUXLabs: (participateInUXLabs) => ({ participateInUXLabs }),
   },
   connect: {
-    actions: [UpdateGatedFormDataApiLogic, ['makeRequest as submitGatedFormDataRequest']],
+    actions: [
+      UpdateGatedFormDataApiLogic,
+      ['makeRequest as submitGatedFormDataRequest', 'apiSuccess as submitGatedFormSuccess'],
+    ],
   },
   listeners: ({ actions, values }) => ({
     formSubmitRequest: () => {
@@ -49,6 +52,9 @@ export const WorkplaceSearchGateLogic = kea<
         });
       }
     },
+    submitGatedFormSuccess: () => {
+      window.location.reload();
+    },
   }),
   path: ['enterprise_search', 'workplace_search', 'gate_form'],