[8.16] Add prompt for connector configuration being in editable mode (#…

…202463) (#203115) # Backport This will backport the following commits from `main` to `8.16`: - [Add prompt for connector configuration being in editable mode (#202463)](#202463)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Artem Shelkovnikov <[email protected]>
elastic · Dec 5, 2024 · d3c6743 · d3c6743
1 parent a93125e
commit d3c6743
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/packages/kbn-search-connectors/components/configuration/connector_configuration.tsx b/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;

diff --git a/...s/enterprise_search_content/components/connectors/create_connector/configuration_step.tsx b/...s/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');
               }}