From 7b61ca9bed530e851bb6665bd1d818d19c2edf2c Mon Sep 17 00:00:00 2001
From: Rodney Norris <rodney.norris@elastic.co>
Date: Sat, 19 Oct 2024 23:06:24 +0000
Subject: [PATCH] fix(ent-search): gate form submission

Updated the gate forms to explicit reload the browser after the api call
succeeds to avoid race conditions from relying on the form default
behavior to reload the browser.
---
 .../app_search_gate/app_search_gate.tsx           | 15 +++++++--------
 .../app_search_gate/app_search_gate_logic.ts      |  8 +++++++-
 .../views/overview/gated_form.tsx                 | 15 +++++++--------
 .../views/overview/gated_form_logic.ts            |  8 +++++++-
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate.tsx
index 85cea5e8bf3c1..155f06f508d3c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate.tsx
+++ b/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',
               })}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate_logic.ts
index 0cce74ef59de1..a0ee020c0318a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/app_search_gate/app_search_gate_logic.ts
+++ b/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'],
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form.tsx
index dedcc2fc53d07..9b37a219ada4f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form.tsx
+++ b/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',
               })}
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_logic.ts
index 9a7177a17c330..326845fae009e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/gated_form_logic.ts
+++ b/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'],