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 8644cd72f53d3..9749c49ea4d68 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 @@ -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 = ({ 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 = ({ title, set setCurrentStep('finish')} + onClick={() => { + setFormDirty(false); + setCurrentStep('finish'); + }} fill > {Constants.NEXT_BUTTON_LABEL} diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx index e8cef81662096..a4ed43e2a8fcd 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx +++ b/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('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 ( = ({ 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) => { @@ -236,6 +237,7 @@ export const StartStep: React.FC = ({ createConnector({ isSelfManaged: true, }); + setFormDirty(true); setCurrentStep('deployment'); } }} @@ -294,7 +296,9 @@ export const StartStep: React.FC = ({ setCurrentStep('configure')} + onClick={() => { + setCurrentStep('configure'); + }} > {Constants.NEXT_BUTTON_LABEL} @@ -310,6 +314,7 @@ export const StartStep: React.FC = ({ iconType="sparkles" isLoading={isGenerateLoading || isCreateLoading} onClick={() => { + setFormDirty(true); createConnector({ isSelfManaged: false, }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts index 796a2a64ab56c..0d21db6e03baf 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector/new_connector_logic.ts +++ b/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 ({ step }), + setFormDirty: (isDirty) => ({ isDirty }), setRawName: (rawName) => ({ rawName }), setSelectedConnector: (connector) => ({ connector }), }, @@ -214,6 +217,13 @@ export const NewConnectorLogic = kea step, }, ], + isFormDirty: [ + false, // Initial state (form is not dirty) + { + // @ts-expect-error upgrade typescript v5.1.6 + setFormDirty: (_, { isDirty }) => isDirty, + }, + ], rawName: [ '', { diff --git a/x-pack/plugins/enterprise_search/tsconfig.json b/x-pack/plugins/enterprise_search/tsconfig.json index fa0751078c0f7..7b7556729a76c 100644 --- a/x-pack/plugins/enterprise_search/tsconfig.json +++ b/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" ] }