From 6d4ec537709508f249924a7c8156eb9c9f149864 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 6 Dec 2024 03:57:47 +1100
Subject: [PATCH] [8.x] Add prompt for connector configuration being in
 editable mode (#202463) (#203117)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Add prompt for connector configuration being in editable mode
(#202463)](https://github.com/elastic/kibana/pull/202463)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Artem
Shelkovnikov","email":"artem.shelkovnikov@elastic.co"},"sourceCommit":{"committedDate":"2024-12-05T14:44:16Z","message":"Add
prompt for connector configuration being in editable mode
(#202463)\n\n### Closes
https://github.com/elastic/search-team/issues/8547\r\n##
Summary\r\n\r\nUser creates connectors following a set of steps. During
configuration\r\nstep they are able to open configuration form and then
click \"Next\" -\r\nconfiguration will not be saved and user will not be
prompted about it.\r\n\r\nThis change adds a prompt for this step - if
the configuration is in\r\neditable state, the prompt will be shown. It
does not check that the\r\nform was edited, however, and it's on
purpose. I'm open to changing it\r\nto only prompt if any value changed,
but I feel that it's important to\r\nprompt even if no values were
entered, just to confirm with the user\r\nthat they want to move on
without specifying any
values.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/af768d6d-282d-4f67-a1d0-c54bcf1cb2d0\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b8a41013ca6f13bea26dd78eaed990104741dc40","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-major"],"title":"Add
prompt for connector configuration being in editable
mode","number":202463,"url":"https://github.com/elastic/kibana/pull/202463","mergeCommit":{"message":"Add
prompt for connector configuration being in editable mode
(#202463)\n\n### Closes
https://github.com/elastic/search-team/issues/8547\r\n##
Summary\r\n\r\nUser creates connectors following a set of steps. During
configuration\r\nstep they are able to open configuration form and then
click \"Next\" -\r\nconfiguration will not be saved and user will not be
prompted about it.\r\n\r\nThis change adds a prompt for this step - if
the configuration is in\r\neditable state, the prompt will be shown. It
does not check that the\r\nform was edited, however, and it's on
purpose. I'm open to changing it\r\nto only prompt if any value changed,
but I feel that it's important to\r\nprompt even if no values were
entered, just to confirm with the user\r\nthat they want to move on
without specifying any
values.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/af768d6d-282d-4f67-a1d0-c54bcf1cb2d0\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b8a41013ca6f13bea26dd78eaed990104741dc40"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202463","number":202463,"mergeCommit":{"message":"Add
prompt for connector configuration being in editable mode
(#202463)\n\n### Closes
https://github.com/elastic/search-team/issues/8547\r\n##
Summary\r\n\r\nUser creates connectors following a set of steps. During
configuration\r\nstep they are able to open configuration form and then
click \"Next\" -\r\nconfiguration will not be saved and user will not be
prompted about it.\r\n\r\nThis change adds a prompt for this step - if
the configuration is in\r\neditable state, the prompt will be shown. It
does not check that the\r\nform was edited, however, and it's on
purpose. I'm open to changing it\r\nto only prompt if any value changed,
but I feel that it's important to\r\nprompt even if no values were
entered, just to confirm with the user\r\nthat they want to move on
without specifying any
values.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/af768d6d-282d-4f67-a1d0-c54bcf1cb2d0\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"b8a41013ca6f13bea26dd78eaed990104741dc40"}}]}]
BACKPORT-->

Co-authored-by: Artem Shelkovnikov <artem.shelkovnikov@elastic.co>
---
 .../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<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/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<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');
               }}