[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)](https://github.com/elastic/kibana/pull/202463)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Artem Shelkovnikov <artem.shelkovnikov@elastic.co>
2025-04-23 17:28:26 -04:00 · 2024-12-06 03:42:21 +11:00 · 2024-12-06 03:42:21 +11:00 · d3c6743f47
commit d3c6743f47
parent a93125e9ed
2 changed files with 48 additions and 2 deletions
--- 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;
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/configuration_step.tsx
+++ b/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');
              }}