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>
This commit is contained in:
Artem Shelkovnikov 2024-12-05 15:44:16 +01:00 committed by GitHub
parent 06b774e788
commit b8a41013ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 48 additions and 2 deletions

View file

@ -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;

View file

@ -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');
}}