[Obs AI Assistant] Remove double confirmation when deleting conversation (#217991)

Closes https://github.com/elastic/kibana/issues/213987

## Summary

Remove the checkbox from the confirm modal to avoid double confirmation.

### Before

<img width="475" alt="Screenshot 2025-04-11 at 11 56 54"
src="https://github.com/user-attachments/assets/6b24aa8a-06b8-4f97-b43d-a82e91ce8328"
/>

### After

<img width="580" alt="Screenshot 2025-04-11 at 11 07 19"
src="https://github.com/user-attachments/assets/91965922-8b66-473a-903c-c6d14e2ee49e"
/>

### Checklist

- [x] 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:
eleonoramicozzi 2025-04-14 18:48:54 +01:00 committed by GitHub
parent 9f5425f061
commit b8e78bcd55
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 5 additions and 31 deletions

View file

@ -129,12 +129,7 @@ export function ChatContextMenu({
`}
icon={<EuiIcon type="trash" size="m" color="danger" />}
onClick={() => {
confirmDeleteCallback(
i18n.translate('xpack.aiAssistant.flyout.confirmDeleteCheckboxLabel', {
defaultMessage: 'Delete "{title}"',
values: { title: conversationTitle },
})
).then((confirmed) => {
confirmDeleteCallback().then((confirmed) => {
if (!confirmed) {
return;
}

View file

@ -185,12 +185,7 @@ export function ConversationList({
currentUser,
}),
onClick: () => {
confirmDeleteCallback(
i18n.translate('xpack.aiAssistant.flyout.confirmDeleteCheckboxLabel', {
defaultMessage: 'Delete "{title}"',
values: { title: conversation.label },
})
).then((confirmed) => {
confirmDeleteCallback().then((confirmed) => {
if (!confirmed) return;
deleteConversation(conversation.id).then(() => {
if (conversation.id === selectedConversationId) {

View file

@ -6,27 +6,22 @@
*/
import React from 'react';
import { EuiCheckbox, EuiConfirmModal, EuiText } from '@elastic/eui';
import { EuiConfirmModal, EuiText } from '@elastic/eui';
import { useState } from 'react';
import { css } from '@emotion/css';
const ConfirmModal = ({
checkboxLabel,
onClose,
title,
children,
confirmButtonText,
setElement,
}: {
checkboxLabel: string;
onClose: (confirmed: boolean) => void;
title: React.ReactNode;
children: React.ReactNode;
confirmButtonText: React.ReactNode;
setElement: (element: React.ReactNode | undefined) => void;
}) => {
const [isChecked, setIsChecked] = useState(false);
return (
<EuiConfirmModal
title={title}
@ -41,19 +36,9 @@ const ConfirmModal = ({
confirmButtonText={confirmButtonText}
cancelButtonText="Cancel"
buttonColor="danger"
confirmButtonDisabled={!isChecked}
maxWidth
>
<EuiText>{children}</EuiText>
<EuiCheckbox
id="deleteConfirmationCheckbox"
label={checkboxLabel}
checked={isChecked}
onChange={(e) => setIsChecked(e.target.checked)}
className={css`
margin-top: 15px;
`}
/>
</EuiConfirmModal>
);
};
@ -68,16 +53,15 @@ export function useConfirmModal({
confirmButtonText: React.ReactNode;
}): {
element: React.ReactNode | undefined;
confirm: (checkBoxLabel: string) => Promise<boolean>;
confirm: () => Promise<boolean>;
} {
const [element, setElement] = useState<React.ReactNode | undefined>(undefined);
const confirm = (checkboxLabel: string) => {
const confirm = () => {
return new Promise<boolean>((resolve) => {
setElement(() => {
return (
<ConfirmModal
checkboxLabel={checkboxLabel}
onClose={resolve}
title={title}
children={children}