chore: Add delete all flows functionality

This commit add the functionality to remove all
existing flows in the canvas

related: #801

src/components/KaotoToolbar.tsx

@@ -9,6 +9,7 @@ import { LOCAL_STORAGE_UI_THEME_KEY, THEME_DARK_CLASS } from '@kaoto/constants';
 import { ValidationService } from '@kaoto/services';
 import {
   useDeploymentStore,
+  useFlowsStore,
   useIntegrationJsonStore,
   useIntegrationSourceStore,
   useSettingsStore,
@@ -61,6 +62,7 @@ export const KaotoToolbar = ({ toggleCatalog, toggleCodeEditor, hideLeftPanel, l
   const { settings, setSettings } = useSettingsStore((state) => state);
   const { sourceCode, setSourceCode } = useIntegrationSourceStore((state) => state);
   const deleteIntegration = useIntegrationJsonStore((state) => state.deleteIntegration);
+  const deleteAllIntegrations = useFlowsStore((state) => state.deleteAllIntegrations);
   const [isActiveButton,setIsActiveButton] = useState('');
   const htmlTagElement = document.documentElement;
 
@@ -435,7 +437,11 @@ export const KaotoToolbar = ({ toggleCatalog, toggleCodeEditor, hideLeftPanel, l
           setIsConfirmationModalOpen(false);
         }}
         handleConfirm={() => {
+          /** Delete current flow */
           deleteIntegration();
+
+          /** Delete all flows */
+          deleteAllIntegrations();
           setSourceCode('');
           setSettings({ dsl: settings.dsl, name: 'integration', namespace: 'default' });
           setIsConfirmationModalOpen(false);

src/components/Visualization.tsx

@@ -9,7 +9,7 @@ import {
   VisualizationStepViews,
 } from '@kaoto/components';
 import { StepsService, VisualizationService } from '@kaoto/services';
-import { useIntegrationJsonStore, useSettingsStore, useVisualizationStore } from '@kaoto/store';
+import { useFlowsStore, useIntegrationJsonStore, useSettingsStore, useVisualizationStore } from '@kaoto/store';
 import { IStepProps, IVizStepNode } from '@kaoto/types';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactFlow, { Background, Viewport } from 'reactflow';
@@ -35,6 +35,7 @@ const Visualization = () => {
   });
 
   const useMultipleFlows = useSettingsStore((state) => state.settings.useMultipleFlows);
+  const flows = useFlowsStore((state) => state.flows);
   const visualizationStore = useVisualizationStore.getState();
   const layout = useVisualizationStore((state) => state.layout);
   const nodes = useVisualizationStore((state) => state.nodes);
@@ -49,7 +50,7 @@ const Visualization = () => {
    */
   useEffect(() => {
     stepsService.updateViews();
-  }, [integrationJson, stepsService]);
+  }, [integrationJson, flows, stepsService]);
 
   /**
    * Check for changes to integrationJson to refresh the selected step's data.
@@ -72,7 +73,7 @@ const Visualization = () => {
 
   useEffect(() => {
     visualizationService.redrawDiagram(handleDeleteStep, true).catch((e) => console.error(e));
-  }, [integrationJson, layout, useMultipleFlows]);
+  }, [integrationJson, layout, useMultipleFlows, flows]);
 
   const nodeTypes = useMemo(() => ({ step: VisualizationStep }), []);
   const edgeTypes = useMemo(

src/store/flowsStore.tsx

@@ -26,6 +26,7 @@ export interface IFlowsStore {
   // Handler methods
   insertStep: IInsertOptions;
   deleteStep: (integrationId: string, stepUUID: string) => void;
+  deleteAllIntegrations: () => void;
 }
 
 export const flowsInitialState: Pick<IFlowsStore, 'flows' | 'properties' | 'views'> = {
@@ -111,6 +112,7 @@ export const useFlowsStore = create<IFlowsStore>()(
           return state;
         });
       },
+      deleteAllIntegrations: () => set((state) => ({ ...state, ...flowsInitialState })),
     }),
     {
       partialize: (state) => {