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.
elastic · Oct 19, 2024 · 7b61ca9 · 7b61ca9
1 parent 47c0f5e
commit 7b61ca9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 18 deletions.
diff --git a/...rise_search/public/applications/app_search/components/app_search_gate/app_search_gate.tsx b/...rise_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/...search/public/applications/app_search/components/app_search_gate/app_search_gate_logic.ts b/...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/...gins/enterprise_search/public/applications/workplace_search/views/overview/gated_form.tsx b/...gins/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/...enterprise_search/public/applications/workplace_search/views/overview/gated_form_logic.ts b/...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'],