diff --git a/src/components/KaotoToolbar.tsx b/src/components/KaotoToolbar.tsx index 1c54ef766..90b509d33 100644 --- a/src/components/KaotoToolbar.tsx +++ b/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); diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx index 016e03285..012e18ebc 100644 --- a/src/components/Visualization.tsx +++ b/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( diff --git a/src/store/flowsStore.tsx b/src/store/flowsStore.tsx index c3791232d..4d293ab6a 100644 --- a/src/store/flowsStore.tsx +++ b/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 = { @@ -111,6 +112,7 @@ export const useFlowsStore = create()( return state; }); }, + deleteAllIntegrations: () => set((state) => ({ ...state, ...flowsInitialState })), }), { partialize: (state) => {