fix(1657): better name as subject when deleting a flow

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

@@ -125,7 +125,7 @@ describe('FlowsList.tsx', () => {
     });
 
     expect(mockDeleteModalContext.actionConfirmation).toHaveBeenCalledWith({
-      title: 'Permanently delete flow?',
+      title: "Do you want to delete the 'route-1234' route?",
       text: 'All steps will be lost.',
     });
   });

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

@@ -109,7 +109,12 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
                 variant="plain"
                 onClick={async (event) => {
                   const isDeleteConfirmed = await deleteModalContext?.actionConfirmation({
-                    title: 'Permanently delete flow?',
+                    title:
+                      "Do you want to delete the '" +
+                      flow.toVizNode().getId() +
+                      "' " +
+                      flow.toVizNode().getTitle() +
+                      '?',
                     text: 'All steps will be lost.',
                   });
 

packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx

@@ -42,7 +42,7 @@ describe('ItemDeleteGroup', () => {
     fireEvent.click(wrapper.getByText('Delete'));
 
     expect(mockDeleteModalContext.actionConfirmation).toHaveBeenCalledWith({
-      title: 'Permanently delete flow?',
+      title: "Do you want to delete the 'undefined' test?",
       text: 'All steps will be lost.',
     });
   });

packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx

@@ -11,7 +11,7 @@ export const useDeleteGroup = (vizNode: IVisualizationNode) => {
   const onDeleteGroup = useCallback(async () => {
     /** Open delete confirm modal, get the confirmation  */
     const isDeleteConfirmed = await deleteModalContext?.actionConfirmation({
-      title: 'Permanently delete flow?',
+      title: "Do you want to delete the '" + vizNode.getId() + "' " + vizNode.getTitle() + '?',
       text: 'All steps will be lost.',
     });
 

packages/ui/src/providers/action-confirmation-modal.provider.scss

@@ -0,0 +1,5 @@
+.pf-v5-c-modal-box {
+  &__title-text {
+    white-space: normal;
+  }
+}

packages/ui/src/providers/action-confirmation-modal.provider.tsx

@@ -1,5 +1,6 @@
 import { Button, ButtonVariant, Modal, ModalVariant, Split, SplitItem } from '@patternfly/react-core';
 import { FunctionComponent, PropsWithChildren, createContext, useCallback, useMemo, useRef, useState } from 'react';
+import './action-confirmation-modal.provider.scss';
 
 export const ACTION_ID_CANCEL = 'cancel';
 export const ACTION_ID_CONFIRM = 'confirm';