From b8a41013ca6f13bea26dd78eaed990104741dc40 Mon Sep 17 00:00:00 2001 From: Artem Shelkovnikov Date: Thu, 5 Dec 2024 15:44:16 +0100 Subject: [PATCH] Add prompt for connector configuration being in editable mode (#202463) ### Closes https://github.com/elastic/search-team/issues/8547 ## Summary User creates connectors following a set of steps. During configuration step they are able to open configuration form and then click "Next" - configuration will not be saved and user will not be prompted about it. This change adds a prompt for this step - if the configuration is in editable state, the prompt will be shown. It does not check that the form was edited, however, and it's on purpose. I'm open to changing it to only prompt if any value changed, but I feel that it's important to prompt even if no values were entered, just to confirm with the user that they want to move on without specifying any values. https://github.com/user-attachments/assets/af768d6d-282d-4f67-a1d0-c54bcf1cb2d0 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../configuration/connector_configuration.tsx | 11 ++++++ .../create_connector/configuration_step.tsx | 39 ++++++++++++++++++- 2 files changed, 48 insertions(+), 2 deletions(-) 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'); }}