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: #1660

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

packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx

@@ -4,7 +4,7 @@ import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { FunctionComponent, useCallback, useContext, useRef } from 'react';
 import { BaseVisualCamelEntity } from '../../../../models/visualization/base-visual-entity';
 import { EntitiesContext } from '../../../../providers/entities.provider';
-import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
+import { ACTION_ID_CONFIRM, ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
 import { VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
 import { InlineEdit } from '../../../InlineEdit';
 import './FlowsList.scss';
@@ -110,7 +110,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();