[8.16] [Search][Connectors] Confirmation modal before leaving the connector creation flow (#197646) (#198221)

# Backport This will backport the following commits from `main` to `8.16`: - [[Search][Connectors] Confirmation modal before leaving the connector creation flow (#197646)](https://github.com/elastic/kibana/pull/197646)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: José Luis González <joseluisgj@gmail.com>
2025-04-24 09:48:58 -04:00 · 2024-10-30 11:00:35 +11:00 · 2024-10-30 11:00:35 +11:00 · 87aa6d6eaf
commit 87aa6d6eaf
parent 3343ad652c
5 changed files with 63 additions and 5 deletions
--- 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<ConfigurationStepProps> = ({ 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<ConfigurationStepProps> = ({ title, set
            <EuiSpacer size="m" />
            <EuiButton
              data-test-subj="enterpriseSearchStartStepGenerateConfigurationButton"
-              onClick={() => setCurrentStep('finish')}
+              onClick={() => {
+                setFormDirty(false);
+                setCurrentStep('finish');
+              }}
              fill
            >
              {Constants.NEXT_BUTTON_LABEL}
--- 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<SelfManagePreference>('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 (
    <EnterpriseSearchContentPageTemplate
      pageChrome={[
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/start_step.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/start_step.tsx
@ -63,7 +63,8 @@ export const StartStep: React.FC<StartStepProps> = ({
    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<HTMLInputElement>) => {
@ -236,6 +237,7 @@ export const StartStep: React.FC<StartStepProps> = ({
                    createConnector({
                      isSelfManaged: true,
                    });
+                    setFormDirty(true);
                    setCurrentStep('deployment');
                  }
                }}
@ -294,7 +296,9 @@ export const StartStep: React.FC<StartStepProps> = ({
                  <EuiButton
                    data-test-subj="enterpriseSearchStartStepGenerateConfigurationButton"
                    fill
-                    onClick={() => setCurrentStep('configure')}
+                    onClick={() => {
+                      setCurrentStep('configure');
+                    }}
                  >
                    {Constants.NEXT_BUTTON_LABEL}
                  </EuiButton>
@ -310,6 +314,7 @@ export const StartStep: React.FC<StartStepProps> = ({
                      iconType="sparkles"
                      isLoading={isGenerateLoading || isCreateLoading}
                      onClick={() => {
+                        setFormDirty(true);
                        createConnector({
                          isSelfManaged: false,
                        });
--- 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<MakeLogicType<NewConnectorValues, NewConnec
      shouldNavigateToConnectorAfterCreate,
    }),
    setCurrentStep: (step) => ({ step }),
+    setFormDirty: (isDirty) => ({ isDirty }),
    setRawName: (rawName) => ({ rawName }),
    setSelectedConnector: (connector) => ({ connector }),
  },
@ -214,6 +217,13 @@ export const NewConnectorLogic = kea<MakeLogicType<NewConnectorValues, NewConnec
        ) => step,
      },
    ],
+    isFormDirty: [
+      false, // Initial state (form is not dirty)
+      {
+        // @ts-expect-error upgrade typescript v5.1.6
+        setFormDirty: (_, { isDirty }) => isDirty,
+      },
+    ],
    rawName: [
      '',
      {
--- 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"
  ]
 }