From c50d2d549c331d23a68d3daabbdfbb24f4bf56f1 Mon Sep 17 00:00:00 2001 From: Rodney Norris Date: Mon, 21 Oct 2024 09:46:54 -0500 Subject: [PATCH] [Search] Fix: Enterprise Search gated form submission (#196983) ## Summary 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. (cherry picked from commit f25c12b8c7f48fa10ded3cdf5e1dd30fb9f164b5) --- .../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) => { + e.preventDefault(); + formSubmitRequest(); + }, []); const options = getOptionsFeaturesList(); return ( - + {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 = () => { - formSubmitRequest()} - > + {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 ({ 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 { + 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) => { + e.preventDefault(); + formSubmitRequest(); + }, []); return ( - + {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 = () => { - formSubmitRequest()} - > + {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'],