From 54bcb82334915c135386e0588c54c4f0ea52e6ea Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Tue, 26 Nov 2024 09:43:51 +0100
Subject: [PATCH] fix(FLowsList): Evaluate action confirmation when deleting a
 Flow

Currently, when deleting a flow, the confirmation modal is not properly
evaluated, leading to always deleting the flow regardless of the user
choice.

The fix is to check the return of the modal and act in consequence.

fix: https://github.com/KaotoIO/kaoto/issues/1660
---
 .../ContextToolbar/Flows/FlowsList.test.tsx   | 55 ++++++++++++++++++-
 .../ContextToolbar/Flows/FlowsList.tsx        | 11 ++--
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
index debdf06aa..33782fb4d 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
@@ -2,10 +2,13 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { CamelRouteResource } from '../../../../models/camel';
 import { EntityType } from '../../../../models/camel/entities';
 import { VisualFlowsApi } from '../../../../models/visualization/flows/support/flows-visibility';
+import {
+  ActionConfirmationModalContext,
+  ActionConfirmationModalContextProvider,
+} from '../../../../providers/action-confirmation-modal.provider';
 import { VisibleFLowsContextResult } from '../../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../../stubs';
 import { FlowsList } from './FlowsList';
-import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
 
 describe('FlowsList.tsx', () => {
   let camelResource: CamelRouteResource;
@@ -117,7 +120,7 @@ describe('FlowsList.tsx', () => {
       </Provider>,
     );
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(wrapper.getByTestId('delete-btn-route-1234'));
     });
 
@@ -127,6 +130,52 @@ describe('FlowsList.tsx', () => {
     });
   });
 
+  it('should delete a flow when clicking the delete icon and then clicking delete', async () => {
+    const { Provider } = TestProvidersWrapper({ camelResource });
+    const wrapper = render(
+      <Provider>
+        <ActionConfirmationModalContextProvider>
+          <FlowsList />
+        </ActionConfirmationModalContextProvider>
+      </Provider>,
+    );
+
+    await act(async () => {
+      const deleteBtn = wrapper.getByTestId('delete-btn-route-1234');
+      fireEvent.click(deleteBtn);
+    });
+
+    await act(async () => {
+      const actionConfirmationModalBtnConfirm = wrapper.getByTestId('action-confirmation-modal-btn-confirm');
+      fireEvent.click(actionConfirmationModalBtnConfirm);
+    });
+
+    expect(camelResource.getVisualEntities()).toHaveLength(1);
+  });
+
+  it('should not delete a flow when clicking the delete icon and then clicking cancel', async () => {
+    const { Provider } = TestProvidersWrapper({ camelResource });
+    const wrapper = render(
+      <Provider>
+        <ActionConfirmationModalContextProvider>
+          <FlowsList />
+        </ActionConfirmationModalContextProvider>
+      </Provider>,
+    );
+
+    await act(async () => {
+      const deleteBtn = wrapper.getByTestId('delete-btn-route-1234');
+      fireEvent.click(deleteBtn);
+    });
+
+    await act(async () => {
+      const actionConfirmationModalBtnCancel = wrapper.getByTestId('action-confirmation-modal-btn-cancel');
+      fireEvent.click(actionConfirmationModalBtnCancel);
+    });
+
+    expect(camelResource.getVisualEntities()).toHaveLength(2);
+  });
+
   it('should toggle the visibility of a flow clicking on the Eye icon', async () => {
     let resId = '';
     const visualFlowsApi = new VisualFlowsApi(jest.fn);
@@ -148,7 +197,7 @@ describe('FlowsList.tsx', () => {
 
     const toggleFlowId = await wrapper.findByTestId('toggle-btn-route-1234');
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(toggleFlowId);
     });
 
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
index 6b440f740..7384fcda3 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
@@ -2,15 +2,18 @@ import { Button, Icon } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon, TrashIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { FunctionComponent, useCallback, useContext, useRef } from 'react';
+import { ValidationResult } from '../../../../models';
 import { BaseVisualCamelEntity } from '../../../../models/visualization/base-visual-entity';
+import {
+  ACTION_ID_CONFIRM,
+  ActionConfirmationModalContext,
+} from '../../../../providers/action-confirmation-modal.provider';
 import { EntitiesContext } from '../../../../providers/entities.provider';
-import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
 import { VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
 import { InlineEdit } from '../../../InlineEdit';
+import { RouteIdValidator } from '../../../InlineEdit/routeIdValidator';
 import './FlowsList.scss';
 import { FlowsListEmptyState } from './FlowsListEmptyState';
-import { RouteIdValidator } from '../../../InlineEdit/routeIdValidator';
-import { ValidationResult } from '../../../../models';
 
 interface IFlowsList {
   onClose?: () => void;
@@ -110,7 +113,7 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
                     text: 'All steps will be lost.',
                   });
 
-                  if (!isDeleteConfirmed) return;
+                  if (isDeleteConfirmed !== ACTION_ID_CONFIRM) return;
 
                   camelResource.removeEntity(flow.id);
                   updateEntitiesFromCamelResource();