diff --git a/packages/kbn-search-connectors/components/configuration/connector_configuration.tsx b/packages/kbn-search-connectors/components/configuration/connector_configuration.tsx index cd80b2489012e..8adc6ac2e38c4 100644 --- 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) => void; saveAndSync?: (configuration: Record) => 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/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 index 9749c49ea4d68..f8bff23aa56a1 100644 --- 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 = ({ title, set const { connector } = useValues(ConnectorViewLogic); const { updateConnectorConfiguration } = useActions(ConnectorViewLogic); const { setFormDirty } = useActions(NewConnectorLogic); + const { overlays } = useKibana().services; + const [isFormEditing, setIsFormEditing] = useState(false); const { status } = useValues(ConnectorConfigurationApiLogic); const isSyncing = false; @@ -77,6 +80,7 @@ export const ConfigurationStep: React.FC = ({ title, set connectorId: connector.id, }); }} + onEditStateChange={setIsFormEditing} /> {isSyncing && ( @@ -111,7 +115,38 @@ export const ConfigurationStep: React.FC = ({ title, set { + 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'); }}