[8.16] [Search][Connectors] Confirmation modal before leaving the connector creation flow (#197646)

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/configuration_step.tsx

@@ -29,6 +29,7 @@ import { Status } from '../../../../../../common/types/api';
 import * as Constants from '../../../../shared/constants';
 import { ConnectorConfigurationApiLogic } from '../../../api/connector/update_connector_configuration_api_logic';
 import { ConnectorViewLogic } from '../../connector_detail/connector_view_logic';
+import { NewConnectorLogic } from '../../new_index/method_connector/new_connector_logic';
 
 interface ConfigurationStepProps {
   setCurrentStep: Function;
@@ -38,6 +39,7 @@ interface ConfigurationStepProps {
 export const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ title, setCurrentStep }) => {
   const { connector } = useValues(ConnectorViewLogic);
   const { updateConnectorConfiguration } = useActions(ConnectorViewLogic);
+  const { setFormDirty } = useActions(NewConnectorLogic);
   const { status } = useValues(ConnectorConfigurationApiLogic);
   const isSyncing = false;
 
@@ -109,7 +111,10 @@ export const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ title, set
             <EuiSpacer size="m" />
             <EuiButton
               data-test-subj="enterpriseSearchStartStepGenerateConfigurationButton"
-              onClick={() => setCurrentStep('finish')}
+              onClick={() => {
+                setFormDirty(false);
+                setCurrentStep('finish');
+              }}
               fill
             >
               {Constants.NEXT_BUTTON_LABEL}

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx

@@ -28,6 +28,11 @@ import {
 
 import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
 import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
+
+import { HttpLogic } from '../../../../shared/http';
+import { KibanaLogic } from '../../../../shared/kibana';
 
 import { AddConnectorApiLogic } from '../../../api/connector/add_connector_api_logic';
 import { EnterpriseSearchContentPageTemplate } from '../../layout';
@@ -47,11 +52,16 @@ import { StartStep } from './start_step';
 export type ConnectorCreationSteps = 'start' | 'deployment' | 'configure' | 'finish';
 export type SelfManagePreference = 'native' | 'selfManaged';
 export const CreateConnector: React.FC = () => {
+  const { overlays } = useKibana().services;
+
+  const { http } = useValues(HttpLogic);
+  const { application, history } = useValues(KibanaLogic);
+
   const { error } = useValues(AddConnectorApiLogic);
   const { euiTheme } = useEuiTheme();
   const [selfManagePreference, setSelfManagePreference] = useState<SelfManagePreference>('native');
 
-  const { selectedConnector, currentStep } = useValues(NewConnectorLogic);
+  const { selectedConnector, currentStep, isFormDirty } = useValues(NewConnectorLogic);
   const { setCurrentStep } = useActions(NewConnectorLogic);
   const stepStates = generateStepState(currentStep);
 
@@ -137,6 +147,33 @@ export const CreateConnector: React.FC = () => {
     ),
   };
 
+  useUnsavedChangesPrompt({
+    cancelButtonText: i18n.translate(
+      'xpack.enterpriseSearch.createConnector.unsavedPrompt.cancel',
+      {
+        defaultMessage: 'Continue setup',
+      }
+    ),
+    confirmButtonText: i18n.translate(
+      'xpack.enterpriseSearch.createConnector.unsavedPrompt.confirm',
+      {
+        defaultMessage: 'Leave the page',
+      }
+    ),
+    hasUnsavedChanges: isFormDirty,
+    history,
+    http,
+    messageText: i18n.translate('xpack.enterpriseSearch.createConnector.unsavedPrompt.body', {
+      defaultMessage:
+        'Your connector is created but missing some details. You can complete the setup later in the connector configuration page, but this guided flow offers more help.',
+    }),
+    navigateToUrl: application.navigateToUrl,
+    openConfirm: overlays?.openConfirm ?? (() => Promise.resolve(false)),
+    titleText: i18n.translate('xpack.enterpriseSearch.createConnector.unsavedPrompt.title', {
+      defaultMessage: 'Your connector is not fully configured',
+    }),
+  });
+
   return (
     <EnterpriseSearchContentPageTemplate
       pageChrome={[

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/start_step.tsx

@@ -63,7 +63,8 @@ export const StartStep: React.FC<StartStepProps> = ({
     isGenerateLoading,
     isCreateLoading,
   } = useValues(NewConnectorLogic);
-  const { setRawName, createConnector, generateConnectorName } = useActions(NewConnectorLogic);
+  const { setRawName, createConnector, generateConnectorName, setFormDirty } =
+    useActions(NewConnectorLogic);
   const { connector } = useValues(ConnectorViewLogic);
 
   const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -236,6 +237,7 @@ export const StartStep: React.FC<StartStepProps> = ({
                     createConnector({
                       isSelfManaged: true,
                     });
+                    setFormDirty(true);
                     setCurrentStep('deployment');
                   }
                 }}
@@ -294,7 +296,9 @@ export const StartStep: React.FC<StartStepProps> = ({
                   <EuiButton
                     data-test-subj="enterpriseSearchStartStepGenerateConfigurationButton"
                     fill
-                    onClick={() => setCurrentStep('configure')}
+                    onClick={() => {
+                      setCurrentStep('configure');
+                    }}
                   >
                     {Constants.NEXT_BUTTON_LABEL}
                   </EuiButton>
@@ -310,6 +314,7 @@ export const StartStep: React.FC<StartStepProps> = ({
                       iconType="sparkles"
                       isLoading={isGenerateLoading || isCreateLoading}
                       onClick={() => {
+                        setFormDirty(true);
                         createConnector({
                           isSelfManaged: false,
                         });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts

@@ -56,6 +56,7 @@ export interface NewConnectorValues {
     | undefined;
   generatedNameData: GenerateConnectorNamesApiResponse | undefined;
   isCreateLoading: boolean;
+  isFormDirty: boolean;
   isGenerateLoading: boolean;
   rawName: string;
   selectedConnector: ConnectorDefinition | null;
@@ -85,6 +86,7 @@ type NewConnectorActions = {
   createConnectorApi: AddConnectorApiLogicActions['makeRequest'];
   fetchConnector: ConnectorViewActions['fetchConnector'];
   setCurrentStep(step: ConnectorCreationSteps): { step: ConnectorCreationSteps };
+  setFormDirty: (isDirty: boolean) => { isDirty: boolean };
   setRawName(rawName: string): { rawName: string };
   setSelectedConnector(connector: ConnectorDefinition | null): {
     connector: ConnectorDefinition | null;
@@ -103,6 +105,7 @@ export const NewConnectorLogic = kea<MakeLogicType<NewConnectorValues, NewConnec
       shouldNavigateToConnectorAfterCreate,
     }),
     setCurrentStep: (step) => ({ step }),
+    setFormDirty: (isDirty) => ({ isDirty }),
     setRawName: (rawName) => ({ rawName }),
     setSelectedConnector: (connector) => ({ connector }),
   },
@@ -214,6 +217,13 @@ export const NewConnectorLogic = kea<MakeLogicType<NewConnectorValues, NewConnec
         ) => step,
       },
     ],
+    isFormDirty: [
+      false, // Initial state (form is not dirty)
+      {
+        // @ts-expect-error upgrade typescript v5.1.6
+        setFormDirty: (_, { isDirty }) => isDirty,
+      },
+    ],
     rawName: [
       '',
       {

x-pack/plugins/enterprise_search/tsconfig.json

@@ -82,6 +82,7 @@
     "@kbn/navigation-plugin",
     "@kbn/security-plugin-types-common",
     "@kbn/core-security-server",
-    "@kbn/core-security-server-mocks"
+    "@kbn/core-security-server-mocks",
+    "@kbn/unsaved-changes-prompt"
   ]
 }