fix(DataMapper): Delete DataMapper metadata entry when the step is de…

…leted

Fixes: #80

packages/ui/src/App.tsx

@@ -16,6 +16,8 @@ import {
 } from './providers';
 import { isDefined } from './utils';
 import { CatalogSchemaLoader } from './utils/catalog-schema-loader';
+import { RegisterNodeInteractions } from './components/registers/RegisterNodeInteractions';
+import { NodeInteractionProvider } from './components/registers/interactions/node-interaction.provider';
 
 function App() {
   const ReloadProvider = useReload();
@@ -40,7 +42,11 @@ function App() {
                       <VisibleFlowsProvider>
                         <RenderingProvider>
                           <RegisterComponents>
-                            <Outlet />
+                            <NodeInteractionProvider>
+                              <RegisterNodeInteractions>
+                                <Outlet />
+                              </RegisterNodeInteractions>
+                            </NodeInteractionProvider>
                           </RegisterComponents>
                         </RenderingProvider>
                       </VisibleFlowsProvider>

packages/ui/src/components/DataMapper/on-delete-datamapper.ts

@@ -0,0 +1,9 @@
+import { DataMapperMetadataService } from '../../services/datamapper-metadata.service';
+import { IMetadataApi } from '../../providers';
+import { IVisualizationNode } from '../../models';
+
+export const onDeleteDataMapper = (api: IMetadataApi, vizNode: IVisualizationNode) => {
+  const metadataId = DataMapperMetadataService.getDataMapperMetadataId(vizNode);
+  DataMapperMetadataService.deleteMetadata(api, metadataId);
+  // TODO DataMapperMetadataService.deleteXsltFile(api, metadataId);
+};

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

@@ -1,10 +1,11 @@
 import { TrashIcon } from '@patternfly/react-icons';
 import { ContextMenuItem } from '@patternfly/react-topology';
-import { FunctionComponent, PropsWithChildren, useCallback, useContext } from 'react';
+import { FunctionComponent, PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 import { IDataTestID } from '../../../../models';
 import { IVisualizationNode } from '../../../../models/visualization/base-visual-entity';
 import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
 import { EntitiesContext } from '../../../../providers/entities.provider';
+import { NodeInteractionContext } from '../../../registers/interactions/node-interaction.provider';
 
 interface ItemDeleteGroupProps extends PropsWithChildren<IDataTestID> {
   vizNode: IVisualizationNode;
@@ -15,6 +16,17 @@ export const ItemDeleteGroup: FunctionComponent<ItemDeleteGroupProps> = (props)
   const deleteModalContext = useContext(ActionConfirmationModalContext);
   const flowId = props.vizNode?.getId();
 
+  const { getRegisteredInteraction } = useContext(NodeInteractionContext);
+  const interaction = useMemo(() => getRegisteredInteraction(props.vizNode), [getRegisteredInteraction, props.vizNode]);
+
+  const onDeleteRecursively = useCallback(
+    (parentVizNode: IVisualizationNode) => {
+      parentVizNode.getChildren()?.forEach((child) => onDeleteRecursively(child));
+      interaction?.onDelete(parentVizNode);
+    },
+    [interaction],
+  );
+
   const onRemoveGroup = useCallback(async () => {
     /** Open delete confirm modal, get the confirmation  */
     const isDeleteConfirmed = await deleteModalContext?.actionConfirmation({
@@ -24,9 +36,11 @@ export const ItemDeleteGroup: FunctionComponent<ItemDeleteGroupProps> = (props)
 
     if (!isDeleteConfirmed) return;
 
+    onDeleteRecursively(props.vizNode);
+
     entitiesContext?.camelResource.removeEntity(flowId);
     entitiesContext?.updateEntitiesFromCamelResource();
-  }, [deleteModalContext, entitiesContext, flowId]);
+  }, [deleteModalContext, entitiesContext, flowId, onDeleteRecursively, props.vizNode]);
 
   return (
     <ContextMenuItem onClick={onRemoveGroup} data-testid={props['data-testid']}>

packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteStep.tsx

@@ -1,10 +1,11 @@
 import { TrashIcon } from '@patternfly/react-icons';
 import { ContextMenuItem } from '@patternfly/react-topology';
-import { FunctionComponent, PropsWithChildren, useCallback, useContext } from 'react';
+import { FunctionComponent, PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 import { IDataTestID } from '../../../../models';
 import { IVisualizationNode } from '../../../../models/visualization/base-visual-entity';
 import { EntitiesContext } from '../../../../providers/entities.provider';
 import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
+import { NodeInteractionContext } from '../../../registers/interactions/node-interaction.provider';
 
 interface ItemDeleteStepProps extends PropsWithChildren<IDataTestID> {
   vizNode: IVisualizationNode;
@@ -14,6 +15,8 @@ interface ItemDeleteStepProps extends PropsWithChildren<IDataTestID> {
 export const ItemDeleteStep: FunctionComponent<ItemDeleteStepProps> = (props) => {
   const entitiesContext = useContext(EntitiesContext);
   const deleteModalContext = useContext(ActionConfirmationModalContext);
+  const { getRegisteredInteraction } = useContext(NodeInteractionContext);
+  const interaction = useMemo(() => getRegisteredInteraction(props.vizNode), [getRegisteredInteraction, props.vizNode]);
 
   const onRemoveNode = useCallback(async () => {
     if (props.loadActionConfirmationModal) {
@@ -26,9 +29,10 @@ export const ItemDeleteStep: FunctionComponent<ItemDeleteStepProps> = (props) =>
       if (!isDeleteConfirmed) return;
     }
 
+    interaction?.onDelete(props.vizNode);
     props.vizNode?.removeChild();
     entitiesContext?.updateEntitiesFromCamelResource();
-  }, [deleteModalContext, entitiesContext, props.loadActionConfirmationModal, props.vizNode]);
+  }, [deleteModalContext, entitiesContext, interaction, props.loadActionConfirmationModal, props.vizNode]);
 
   return (
     <ContextMenuItem onClick={onRemoveNode} data-testid={props['data-testid']}>

packages/ui/src/components/Visualization/Custom/ContextMenu/ItemReplaceStep.tsx

@@ -1,11 +1,12 @@
 import { SyncAltIcon } from '@patternfly/react-icons';
 import { ContextMenuItem } from '@patternfly/react-topology';
-import { FunctionComponent, PropsWithChildren, useCallback, useContext } from 'react';
+import { FunctionComponent, PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 import { IDataTestID } from '../../../../models';
 import { AddStepMode, IVisualizationNode } from '../../../../models/visualization/base-visual-entity';
 import { CatalogModalContext } from '../../../../providers/catalog-modal.provider';
 import { EntitiesContext } from '../../../../providers/entities.provider';
 import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
+import { NodeInteractionContext } from '../../../registers/interactions/node-interaction.provider';
 
 interface ItemReplaceStepProps extends PropsWithChildren<IDataTestID> {
   vizNode: IVisualizationNode;
@@ -16,6 +17,8 @@ export const ItemReplaceStep: FunctionComponent<ItemReplaceStepProps> = (props)
   const entitiesContext = useContext(EntitiesContext);
   const catalogModalContext = useContext(CatalogModalContext);
   const replaceModalContext = useContext(ActionConfirmationModalContext);
+  const { getRegisteredInteraction } = useContext(NodeInteractionContext);
+  const interaction = useMemo(() => getRegisteredInteraction(props.vizNode), [getRegisteredInteraction, props.vizNode]);
 
   const onReplaceNode = useCallback(async () => {
     if (!props.vizNode || !entitiesContext) return;
@@ -40,12 +43,21 @@ export const ItemReplaceStep: FunctionComponent<ItemReplaceStepProps> = (props)
     const definedComponent = await catalogModalContext?.getNewComponent(catalogFilter);
     if (!definedComponent) return;
 
+    interaction?.onDelete(props.vizNode);
+
     /** Add new node to the entities */
     props.vizNode.addBaseEntityStep(definedComponent, AddStepMode.ReplaceStep);
 
     /** Update entity */
     entitiesContext.updateEntitiesFromCamelResource();
-  }, [replaceModalContext, catalogModalContext, entitiesContext, props.vizNode]);
+  }, [
+    props.vizNode,
+    props.loadActionConfirmationModal,
+    entitiesContext,
+    catalogModalContext,
+    getRegisteredInteraction,
+    replaceModalContext,
+  ]);
 
   return (
     <ContextMenuItem onClick={onReplaceNode} data-testid={props['data-testid']}>

packages/ui/src/components/registers/RegisterComponents.tsx

@@ -6,6 +6,7 @@ import { datamapperActivationFn } from './datamapper.activationfn';
 
 export const RegisterComponents: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const { registerComponent } = useContext(RenderingAnchorContext);
+
   const componentsToRegister = useRef<IRegisteredComponent[]>([
     {
       anchor: Anchors.CanvasFormHeader,

packages/ui/src/components/registers/RegisterNodeInteractions.tsx

@@ -0,0 +1,23 @@
+import { FunctionComponent, PropsWithChildren, useContext, useRef } from 'react';
+import { datamapperActivationFn } from './datamapper.activationfn';
+import { MetadataContext } from '../../providers';
+import { onDeleteDataMapper } from '../DataMapper/on-delete-datamapper';
+import { NodeInteractionContext } from './interactions/node-interaction.provider';
+import { IRegisteredInteraction } from './interactions/node-interaction.model';
+
+export const RegisterNodeInteractions: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const metadataApi = useContext(MetadataContext)!;
+  const { registerInteraction } = useContext(NodeInteractionContext);
+  const interactionsToRegister = useRef<IRegisteredInteraction[]>([
+    {
+      activationFn: datamapperActivationFn,
+      onDelete: (vizNode) => onDeleteDataMapper(metadataApi, vizNode),
+    },
+  ]);
+
+  interactionsToRegister.current.forEach((regComponent) => {
+    registerInteraction(regComponent);
+  });
+
+  return <>{children}</>;
+};

packages/ui/src/components/registers/interactions/node-interaction.model.ts

@@ -0,0 +1,40 @@
+import { IVisualizationNode } from '../../../models';
+
+export interface IRegisteredInteraction {
+  activationFn: (vizNode: IVisualizationNode) => boolean;
+  onDelete: (vizNode: IVisualizationNode) => void;
+}
+
+export interface INodeInteractionContext {
+  /**
+   * Register a component to be rendered in the given anchor
+   *
+   * @example
+   * ```tsx
+   *    const nodeInteractionContext = useContext(NodeInteractionContext);
+   *
+   *    renderingAnchorContext.registerInteraction({
+   *      activationFn: () => true,
+   *      onDelete: () => { doSomething() }
+   *    });
+   * ```
+   * @param interaction Registered node interaction
+   * @returns void
+   */
+  registerInteraction: (interaction: IRegisteredInteraction) => void;
+
+  /**
+   * Get registered interaction which pass the validation function
+   *
+   * @example
+   * ```tsx
+   *    const nodeInteractionContext = useContext(NodeInteractionContext);
+   *
+   *    const interaction = nodeInteractionContext.getRegisteredInteraction(vizNode);
+   *    interaction?.onDelete(vizNode);
+   * ```
+   * @param vizNode   The visualization node to pass to the component
+   * @returns `IRegisteredInteraction` A registered interaction
+   */
+  getRegisteredInteraction: (vizNode: IVisualizationNode) => IRegisteredInteraction | undefined;
+}

packages/ui/src/components/registers/interactions/node-interaction.provider.tsx

@@ -0,0 +1,27 @@
+import { createContext, FunctionComponent, PropsWithChildren, useCallback, useMemo, useRef } from 'react';
+import { IVisualizationNode } from '../../../models';
+import { INodeInteractionContext, IRegisteredInteraction } from './node-interaction.model';
+
+export const NodeInteractionContext = createContext<INodeInteractionContext>({
+  registerInteraction: () => {},
+  getRegisteredInteraction: () => undefined,
+});
+
+export const NodeInteractionProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const registeredInteractions = useRef<IRegisteredInteraction[]>([]);
+
+  const registerInteraction = useCallback((interaction: IRegisteredInteraction) => {
+    registeredInteractions.current.push(interaction);
+  }, []);
+
+  const getRegisteredInteraction = useCallback((vizNode: IVisualizationNode) => {
+    return registeredInteractions.current.find((registeredInteraction) => registeredInteraction.activationFn(vizNode));
+  }, []);
+
+  const value = useMemo(
+    () => ({ registerInteraction, getRegisteredInteraction }),
+    [getRegisteredInteraction, registerInteraction],
+  );
+
+  return <NodeInteractionContext.Provider value={value}>{children}</NodeInteractionContext.Provider>;
+};

packages/ui/src/multiplying-architecture/KaotoBridge.tsx

@@ -24,6 +24,8 @@ import {
   VisibleFlowsProvider,
 } from '../providers';
 import { EventNotifier } from '../utils';
+import { NodeInteractionProvider } from '../components/registers/interactions/node-interaction.provider';
+import { RegisterNodeInteractions } from '../components/registers/RegisterNodeInteractions';
 
 interface KaotoBridgeProps {
   /**
@@ -213,7 +215,11 @@ export const KaotoBridge = forwardRef<EditorApi, PropsWithChildren<KaotoBridgePr
                 <VisibleFlowsProvider>
                   <RenderingProvider>
                     <MetadataProvider api={metadataApi}>
-                      <RegisterComponents>{children}</RegisterComponents>
+                      <RegisterComponents>
+                        <NodeInteractionProvider>
+                          <RegisterNodeInteractions>{children}</RegisterNodeInteractions>
+                        </NodeInteractionProvider>
+                      </RegisterComponents>
                     </MetadataProvider>
                   </RenderingProvider>
                 </VisibleFlowsProvider>

packages/ui/src/services/datamapper-metadata.service.ts

@@ -204,4 +204,8 @@ export class DataMapperMetadataService {
       title: 'Attaching document schema file',
     });
   }
+
+  static deleteMetadata(api: IMetadataApi, metadataId: string) {
+    api.setMetadata(metadataId, undefined);
+  }
 }