Add prompt for connector configuration being in editable mode

packages/kbn-search-connectors/components/configuration/connector_configuration.tsx

@@ -47,6 +47,7 @@ interface ConnectorConfigurationProps {
   isLoading: boolean;
   saveConfig: (configuration: Record<string, string | number | boolean | null>) => void;
   saveAndSync?: (configuration: Record<string, string | number | boolean | null>) => void;
+  onEditStateChange?: (isEdit: boolean) => void;
   stackManagementLink?: string;
   subscriptionLink?: string;
   children?: React.ReactNode;
@@ -94,6 +95,7 @@ export const ConnectorConfigurationComponent: FC<
   isLoading,
   saveConfig,
   saveAndSync,
+  onEditStateChange,
   subscriptionLink,
   stackManagementLink,
 }) => {
@@ -110,6 +112,15 @@ export const ConnectorConfigurationComponent: FC<
   );
   const [isEditing, setIsEditing] = useState(false);
 
+  useEffect(
+    function propogateEditState() {
+      if (onEditStateChange) {
+        onEditStateChange(isEditing);
+      }
+    },
+    [isEditing, onEditStateChange]
+  );
+
   useEffect(() => {
     if (!isDeepEqual(configuration, configurationRef.current)) {
       configurationRef.current = configuration;

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -21,6 +21,7 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 
 import { ConnectorConfigurationComponent, ConnectorStatus } from '@kbn/search-connectors';
 
@@ -40,6 +41,8 @@ export const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ title, set
   const { connector } = useValues(ConnectorViewLogic);
   const { updateConnectorConfiguration } = useActions(ConnectorViewLogic);
   const { setFormDirty } = useActions(NewConnectorLogic);
+  const { overlays } = useKibana().services;
+  const [isFormEditing, setIsFormEditing] = useState<boolean>(false);
   const { status } = useValues(ConnectorConfigurationApiLogic);
   const isSyncing = false;
 
@@ -77,6 +80,7 @@ export const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ title, set
                   connectorId: connector.id,
                 });
               }}
+              onEditStateChange={setIsFormEditing}
             />
             <EuiSpacer size="m" />
             {isSyncing && (
@@ -111,7 +115,38 @@ export const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ title, set
             <EuiSpacer size="m" />
             <EuiButton
               data-test-subj="enterpriseSearchStartStepGenerateConfigurationButton"
-              onClick={() => {
+              onClick={async () => {
+                if (isFormEditing) {
+                  const confirmResponse = await overlays?.openConfirm(
+                    i18n.translate('xpack.enterpriseSearch.configureConnector.unsavedPrompt.body', {
+                      defaultMessage:
+                        'You are still editing connector configuration, are you sure you want to continue without saving? You can complete the setup later in the connector configuration page, but this guided flow offers more help.',
+                    }),
+                    {
+                      title: i18n.translate(
+                        'xpack.enterpriseSearch.configureConnector.unsavedPrompt.title',
+                        {
+                          defaultMessage: 'Connector configuration is not saved',
+                        }
+                      ),
+                      cancelButtonText: i18n.translate(
+                        'xpack.enterpriseSearch.configureConnector.unsavedPrompt.cancel',
+                        {
+                          defaultMessage: 'Continue setup',
+                        }
+                      ),
+                      confirmButtonText: i18n.translate(
+                        'xpack.enterpriseSearch.configureConnector.unsavedPrompt.confirm',
+                        {
+                          defaultMessage: 'Leave the page',
+                        }
+                      ),
+                    }
+                  );
+                  if (!confirmResponse) {
+                    return;
+                  }
+                }
                 setFormDirty(false);
                 setCurrentStep('finish');
               }}