add placeholder constants

shivamG640 · lordrip · commit 89dd2987c131 · 2026-03-11T11:58:43.000+01:00
diff --git a/packages/ui/src/components/IconResolver/node-icon-resolver.ts b/packages/ui/src/components/IconResolver/node-icon-resolver.ts
@@ -241,6 +241,7 @@ import questionIcon from '../../assets/question-mark.svg';
 import { DynamicCatalogRegistry } from '../../dynamic-catalog';
 import { EntityType } from '../../models/camel/entities';
 import { CatalogKind } from '../../models/catalog-kind';
+import { PlaceholderType } from '../../models/placeholder.constants';
 
 export class NodeIconResolver {
   static async getIcon(elementName: string | undefined, type: CatalogKind): Promise<string> {
@@ -1047,7 +1048,7 @@ export class NodeIconResolver {
         return icon_eip_route;
       case EntityType.OnException:
         return icon_eip_throwException;
-      case 'placeholder':
+      case PlaceholderType.Placeholder:
         return expandIcon;
       default:
         return undefined;
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNodeUtils.test.ts b/packages/ui/src/components/Visualization/Custom/Node/CustomNodeUtils.test.ts
@@ -1,5 +1,6 @@
 import { waitFor } from '@testing-library/react';
 
+import { PlaceholderType } from '../../../../models/placeholder.constants';
 import { AddStepMode, IVisualizationNode } from '../../../../models/visualization/base-visual-entity';
 import { IOnCopyAddon } from '../../../registers/interactions/node-interaction-addon.model';
 import { NoBendpointsEdge } from '../NoBendingEdge';
@@ -114,7 +115,7 @@ describe('CustomNodeUtils', () => {
     it('should return true for compatible nodes in case of placeholder node', () => {
       const mockValidate = jest.fn().mockReturnValue(true);
       vizNode1.data.name = 'log';
-      placeholderNode.data.name = 'placeholder';
+      placeholderNode.data.name = PlaceholderType.Placeholder;
       const result = checkNodeDropCompatibility(vizNode1, placeholderNode, mockValidate);
       expect(result).toBe(true);
       expect(mockValidate).toHaveBeenCalled();
@@ -229,7 +230,11 @@ describe('CustomNodeUtils', () => {
       const choiceNode = getMockVizNode('route.from.steps.0.choice');
       (choiceNode.getId as jest.Mock).mockReturnValue('same-choice');
       const whenBranchPlaceholder = getMockVizNode('route.from.steps.0.choice.when.0.steps.0.placeholder');
-      whenBranchPlaceholder.data = { ...whenBranchPlaceholder.data, name: 'placeholder', isPlaceholder: true };
+      whenBranchPlaceholder.data = {
+        ...whenBranchPlaceholder.data,
+        name: PlaceholderType.Placeholder,
+        isPlaceholder: true,
+      };
       whenBranchPlaceholder.getPreviousNode = jest.fn().mockReturnValue(undefined);
       whenBranchPlaceholder.getId = jest.fn().mockReturnValue('same-choice');
 
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNodeUtils.ts b/packages/ui/src/components/Visualization/Custom/Node/CustomNodeUtils.ts
@@ -1,6 +1,7 @@
 import { isDefined } from '@kaoto/forms';
 import { ElementModel, GraphElement, Node } from '@patternfly/react-topology';
 
+import { PlaceholderType } from '../../../../models/placeholder.constants';
 import { AddStepMode, IVisualizationNode } from '../../../../models/visualization/base-visual-entity';
 import { IClipboardCopyObject } from '../../../../models/visualization/clipboard';
 import { EntitiesContextResult } from '../../../../providers/entities.provider';
@@ -73,7 +74,7 @@ export const handleValidNodeDrop = (
   // Drop onto special placeholder
   const isSpecialChildPlaceholder =
     droppedVizNode.data?.isPlaceholder &&
-    droppedVizNode.data?.name !== 'placeholder' &&
+    droppedVizNode.data?.name !== PlaceholderType.Placeholder &&
     droppedVizNode.getParentNode()?.getNodeInteraction().canHaveSpecialChildren;
   if (isSpecialChildPlaceholder) {
     const parentVizNode = droppedVizNode.getParentNode();
@@ -124,7 +125,10 @@ export const checkNodeDropCompatibility = (
       return !(draggedParent?.id === droppedParent?.id && draggedParent?.getId() === droppedParent?.getId());
     }
 
-    if (droppedVizNode.data.name === 'placeholder' && droppedVizNode.getPreviousNode() !== draggedVizNode) {
+    if (
+      droppedVizNode.data.name === PlaceholderType.Placeholder &&
+      droppedVizNode.getPreviousNode() !== draggedVizNode
+    ) {
       if (
         droppedVizNode.data.path?.includes(draggedVizNode.data.path ?? '') &&
         droppedVizNode.getId() === draggedVizNode.getId()
diff --git a/packages/ui/src/components/Visualization/Custom/Node/PlaceholderNode.test.tsx b/packages/ui/src/components/Visualization/Custom/Node/PlaceholderNode.test.tsx
@@ -3,6 +3,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { CatalogKind, createVisualizationNode, IVisualizationNode, IVisualizationNodeData } from '../../../../models';
+import { PlaceholderType } from '../../../../models/placeholder.constants';
 import { TestProvidersWrapper } from '../../../../stubs';
 import { ControllerService } from '../../Canvas/controller.service';
 import { PlaceholderNode, PlaceholderNodeObserver } from './PlaceholderNode';
@@ -95,11 +96,11 @@ describe('PlaceholderNode', () => {
   it('should render placeholder container with data-testid when vizNode is provided', () => {
     const vizNode = createVisualizationNode('route.from.steps.1.placeholder', {
       catalogKind: CatalogKind.Processor,
-      name: 'placeholder',
+      name: PlaceholderType.Placeholder,
       path: 'route.from.steps.1.placeholder',
       isPlaceholder: true,
     }) as IVisualizationNode;
-    jest.spyOn(vizNode, 'getNodeLabel').mockReturnValue('placeholder');
+    jest.spyOn(vizNode, 'getNodeLabel').mockReturnValue(PlaceholderType.Placeholder);
     jest.spyOn(vizNode, 'getId').mockReturnValue('route-1234');
 
     const parentElement = new BaseGraph();
@@ -158,15 +159,15 @@ describe('PlaceholderNode', () => {
     };
 
     it('should render PlusCircleIcon for special child placeholder', () => {
-      const wrapper = setupWithVizNode({ name: 'placeholder-special-child' });
+      const wrapper = setupWithVizNode({ name: PlaceholderType.PlaceholderSpecialChild });
 
       const svgIcon = wrapper.container.querySelector('svg');
       expect(svgIcon).toBeInTheDocument();
       expect(wrapper.asFragment()).toMatchSnapshot();
     });
 
     it('should render PlusCircleIcon for regular placeholder', () => {
-      const wrapper = setupWithVizNode({ name: 'placeholder' });
+      const wrapper = setupWithVizNode({ name: PlaceholderType.Placeholder });
 
       const svgIcon = wrapper.container.querySelector('svg');
       expect(svgIcon).toBeInTheDocument();
@@ -182,7 +183,7 @@ describe('PlaceholderNode', () => {
     });
 
     it('should call onInsertStep when clicking on special child placeholder', () => {
-      setupWithVizNode({ name: 'placeholder-special-child' });
+      setupWithVizNode({ name: PlaceholderType.PlaceholderSpecialChild });
 
       const placeholderNode = screen.getByTestId('placeholder-node__test-placeholder');
       fireEvent.click(placeholderNode);
@@ -192,7 +193,7 @@ describe('PlaceholderNode', () => {
     });
 
     it('should call onReplaceNode when clicking on regular placeholder', () => {
-      setupWithVizNode({ name: 'placeholder' });
+      setupWithVizNode({ name: PlaceholderType.Placeholder });
 
       const placeholderNode = screen.getByTestId('placeholder-node__test-placeholder');
       fireEvent.click(placeholderNode);
diff --git a/packages/ui/src/components/Visualization/Custom/Node/PlaceholderNode.tsx b/packages/ui/src/components/Visualization/Custom/Node/PlaceholderNode.tsx
@@ -26,6 +26,7 @@ import { FunctionComponent, useContext, useMemo, useRef } from 'react';
 import { CatalogModalContext } from '../../../../dynamic-catalog/catalog-modal.provider';
 import { useEntityContext } from '../../../../hooks/useEntityContext/useEntityContext';
 import { AddStepMode, CatalogKind, IVisualizationNode } from '../../../../models';
+import { PlaceholderType } from '../../../../models/placeholder.constants';
 import { SettingsContext } from '../../../../providers/settings.provider';
 import { CanvasDefaults } from '../../Canvas/canvas.defaults';
 import { CanvasNode } from '../../Canvas/canvas.models';
@@ -112,7 +113,7 @@ const PlaceholderNodeInner: FunctionComponent<PlaceholderNodeInnerProps> = obser
   const entitiesContext = useEntityContext();
   const catalogModalContext = useContext(CatalogModalContext);
   const label = vizNode?.getNodeLabel(settingsAdapter.getSettings().nodeLabel);
-  const updatedLabel = label === 'placeholder' ? 'Add step' : `Add ${label}`;
+  const updatedLabel = label === PlaceholderType.Placeholder ? 'Add step' : `Add ${label}`;
   const boxRef = useRef<Rect | null>(null);
   const boxXRef = useRef<number | null>(null);
   const boxYRef = useRef<number | null>(null);
@@ -125,8 +126,10 @@ const PlaceholderNodeInner: FunctionComponent<PlaceholderNodeInnerProps> = obser
     return null;
   }
   const { onReplaceNode } = useReplaceStep(vizNode);
-  const isSpecialPlaceholder = vizNode.data.name !== 'placeholder' && vizNode.data.name !== 'placeholder-special-child';
-  const isSpecialChildPlaceholder = vizNode.data.name === 'placeholder-special-child';
+  const isSpecialPlaceholder =
+    vizNode.data.name !== PlaceholderType.Placeholder && vizNode.data.name !== PlaceholderType.PlaceholderSpecialChild;
+  const isSpecialChildPlaceholder = vizNode.data.name === PlaceholderType.PlaceholderSpecialChild;
+
   const parentVizNode = vizNode.getParentNode();
   const insertStepTargetNode = isSpecialPlaceholder ? (parentVizNode ?? vizNode) : vizNode;
   const insertStepOptions = isSpecialPlaceholder
diff --git a/packages/ui/src/models/placeholder.constants.ts b/packages/ui/src/models/placeholder.constants.ts
@@ -0,0 +1,11 @@
+/**
+ * Fixed placeholder node names used in visualization (viz node data.name).
+ * Dynamic placeholder names (e.g. 'when', 'otherwise', 'to') are derived from path
+ * in base-node-mapper and are not listed here.
+ */
+export enum PlaceholderType {
+  /** Generic "add step" placeholder in the flow */
+  Placeholder = 'placeholder',
+  /** Special empty-state placeholder (e.g. empty REST DSL) */
+  PlaceholderSpecialChild = 'placeholder-special-child',
+}
diff --git a/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.test.ts
@@ -8,6 +8,7 @@ import { getFirstCatalogMap } from '../../../stubs/test-load-catalog';
 import { SourceSchemaType } from '../../camel';
 import { NonStringEIP } from '../../camel/types';
 import { CatalogKind } from '../../catalog-kind';
+import { PlaceholderType } from '../../placeholder.constants';
 import { NodeLabelType } from '../../settings';
 import { AddStepMode } from '../base-visual-entity';
 import { CamelCatalogService } from './camel-catalog.service';
@@ -315,7 +316,7 @@ describe('AbstractCamelVisualEntity', () => {
         mode: AddStepMode.ReplaceStep,
         data: {
           catalogKind: CatalogKind.Processor,
-          name: 'placeholder',
+          name: PlaceholderType.Placeholder,
           isPlaceholder: true,
           path: 'route.from.steps.1.multicast.steps.0.placeholder',
         },
diff --git a/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts b/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts
@@ -7,6 +7,7 @@ import { SourceSchemaType } from '../../camel/source-schema-type';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { CatalogKind } from '../../catalog-kind';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
+import { PlaceholderType } from '../../placeholder.constants';
 import { NodeLabelType } from '../../settings/settings.model';
 import {
   AddStepMode,
@@ -281,7 +282,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
 
     if (!this.getRootUri()) {
       fromNode.data.catalogKind = CatalogKind.Entity;
-      fromNode.data.name = 'placeholder';
+      fromNode.data.name = PlaceholderType.Placeholder;
     }
     routeGroupNode.addChild(fromNode);
 
diff --git a/packages/ui/src/models/visualization/flows/camel-rest-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-rest-visual-entity.test.ts
@@ -7,6 +7,7 @@ import { EntityType } from '../../camel/entities';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { CatalogKind } from '../../catalog-kind';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
+import { PlaceholderType } from '../../placeholder.constants';
 import { REST_ELEMENT_NAME } from '../../special-processors.constants';
 import { AddStepMode } from '../base-visual-entity';
 import { AbstractCamelVisualEntity } from './abstract-camel-visual-entity';
@@ -358,7 +359,7 @@ describe('CamelRestVisualEntity', () => {
         mode: AddStepMode.ReplaceStep,
         data: {
           catalogKind: CatalogKind.Pattern,
-          name: 'placeholder',
+          name: PlaceholderType.Placeholder,
           path: 'rest.get.0.to.placeholder',
           isPlaceholder: true,
         },
@@ -376,7 +377,7 @@ describe('CamelRestVisualEntity', () => {
       entity.addStep({
         definedComponent: { type: CatalogKind.Component, name: 'direct' } as DefinedComponent,
         mode: AddStepMode.ReplaceStep,
-        data: { catalogKind: CatalogKind.Pattern, name: 'placeholder', path: undefined },
+        data: { catalogKind: CatalogKind.Pattern, name: PlaceholderType.Placeholder, path: undefined },
       });
 
       // Should not throw and rest should remain unchanged
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/base-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/base-node-mapper.ts
@@ -2,6 +2,7 @@ import { DoCatch, ProcessorDefinition, When1 } from '@kaoto/camel-catalog/types'
 
 import { getValue } from '../../../../../utils';
 import { CatalogKind } from '../../../../catalog-kind';
+import { PlaceholderType } from '../../../../placeholder.constants';
 import { SPECIAL_PROCESSORS_PARENTS_MAP } from '../../../../special-processors.constants';
 import { IVisualizationNode } from '../../../base-visual-entity';
 import { createVisualizationNode } from '../../../visualization-node';
@@ -101,7 +102,7 @@ export class BaseNodeMapper implements INodeMapper {
     const previousNode = branchVizNodes[branchVizNodes.length - 1];
     const placeholderNode = createVisualizationNode(placeholderPath, {
       catalogKind: CatalogKind.Entity,
-      name: 'placeholder',
+      name: PlaceholderType.Placeholder,
       isPlaceholder: true,
       path: placeholderPath,
     });
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-node-mapper.test.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-node-mapper.test.ts
@@ -1,6 +1,7 @@
 import { ProcessorDefinition, Rest } from '@kaoto/camel-catalog/types';
 
 import { CatalogKind } from '../../../../catalog-kind';
+import { PlaceholderType } from '../../../../placeholder.constants';
 import { REST_DSL_VERBS, REST_ELEMENT_NAME } from '../../../../special-processors.constants';
 import { RootNodeMapper } from '../root-node-mapper';
 import { RestDslNodeMapper } from './rest-dsl-node-mapper';
@@ -51,7 +52,7 @@ describe('RestDslNodeMapper', () => {
     const children = vizNode.getChildren();
     expect(children).toHaveLength(1);
     expect(children?.[0].data.isPlaceholder).toBe(true);
-    expect(children?.[0].data.name).toBe('placeholder-special-child');
+    expect(children?.[0].data.name).toBe(PlaceholderType.PlaceholderSpecialChild);
   });
 
   it('should return children for GET verb', () => {
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-node-mapper.ts
@@ -1,4 +1,5 @@
 import { CatalogKind } from '../../../../catalog-kind';
+import { PlaceholderType } from '../../../../placeholder.constants';
 import { REST_DSL_VERBS, REST_ELEMENT_NAME } from '../../../../special-processors.constants';
 import { IVisualizationNode } from '../../../base-visual-entity';
 import { createVisualizationNode } from '../../../visualization-node';
@@ -36,7 +37,7 @@ export class RestDslNodeMapper extends BaseNodeMapper {
     if (isEmptyRest) {
       const placeholderNode = createVisualizationNode(`${path}.placeholder`, {
         catalogKind: CatalogKind.Pattern,
-        name: 'placeholder-special-child',
+        name: PlaceholderType.PlaceholderSpecialChild,
         isPlaceholder: true,
         processorName: REST_ELEMENT_NAME,
         path: 'rest.placeholder',
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-verbs-node-mapper.test.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-verbs-node-mapper.test.ts
@@ -1,6 +1,7 @@
 import { ProcessorDefinition, Rest } from '@kaoto/camel-catalog/types';
 
 import { CatalogKind } from '../../../../catalog-kind';
+import { PlaceholderType } from '../../../../placeholder.constants';
 import { RootNodeMapper } from '../root-node-mapper';
 import { RestDslVerbsNodeMapper } from './rest-dsl-verbs-node-mapper';
 import { noopNodeMapper } from './testing/noop-node-mapper';
@@ -64,7 +65,7 @@ describe('RestDslVerbsNodeMapper', () => {
     const child = vizNode.getChildren()?.[0];
     expect(child?.data.path).toBe('rest.get.0.to.placeholder');
     expect(child?.data.isPlaceholder).toBe(true);
-    expect(child?.data.name).toBe('placeholder');
+    expect(child?.data.name).toBe(PlaceholderType.Placeholder);
   });
 
   describe('different HTTP methods', () => {
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-verbs-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/rest-dsl-verbs-node-mapper.ts
@@ -2,6 +2,7 @@ import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { isDefined } from '@kaoto/forms';
 
 import { CatalogKind } from '../../../../catalog-kind';
+import { PlaceholderType } from '../../../../placeholder.constants';
 import { IVisualizationNode } from '../../../base-visual-entity';
 import { createVisualizationNode } from '../../../visualization-node';
 import { CamelRouteVisualEntityData, ICamelElementLookupResult } from '../../support/camel-component-types';
@@ -41,7 +42,7 @@ export class RestDslVerbsNodeMapper extends BaseNodeMapper {
     } else {
       const placeholderNode = createVisualizationNode(`${path}.to.placeholder`, {
         catalogKind: CatalogKind.Pattern,
-        name: 'placeholder',
+        name: PlaceholderType.Placeholder,
         path: `${path}.to.placeholder`,
         processorName: this.method as keyof ProcessorDefinition,
         isPlaceholder: true,
diff --git a/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts b/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts
@@ -15,6 +15,7 @@ import { SourceSchemaType } from '../../camel/source-schema-type';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { CatalogKind } from '../../catalog-kind';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
+import { PlaceholderType } from '../../placeholder.constants';
 import {
   AddStepMode,
   BaseVisualCamelEntity,
@@ -299,7 +300,7 @@ export class PipeVisualEntity implements BaseVisualCamelEntity {
 
     const data: IVisualizationNodeData = {
       catalogKind: CatalogKind.Kamelet,
-      name: step?.ref?.name ?? 'placeholder',
+      name: step?.ref?.name ?? PlaceholderType.Placeholder,
       path,
       entity: isRoot ? this : undefined,
       isPlaceholder,
diff --git a/packages/ui/src/models/visualization/flows/support/camel-component-filter.service.test.ts b/packages/ui/src/models/visualization/flows/support/camel-component-filter.service.test.ts
@@ -22,6 +22,7 @@ import {
 } from '../../../../stubs';
 import { EntityType } from '../../../camel/entities';
 import { CatalogKind } from '../../../catalog-kind';
+import { PlaceholderType } from '../../../placeholder.constants';
 import { AddStepMode } from '../../base-visual-entity';
 import { CamelComponentFilterService } from './camel-component-filter.service';
 
@@ -206,7 +207,7 @@ describe('CamelComponentFilterService', () => {
       it('should only offer direct component when replacing REST verb placeholder', () => {
         const filterFn = CamelComponentFilterService.getCamelCompatibleComponents(AddStepMode.ReplaceStep, {
           catalogKind: CatalogKind.Pattern,
-          name: 'placeholder',
+          name: PlaceholderType.Placeholder,
           path: 'rest.get.0.to.placeholder',
           processorName: 'get' as keyof ProcessorDefinition,
           isPlaceholder: true,
@@ -220,7 +221,7 @@ describe('CamelComponentFilterService', () => {
         (verb) => {
           const filterFn = CamelComponentFilterService.getCamelCompatibleComponents(AddStepMode.ReplaceStep, {
             catalogKind: CatalogKind.Pattern,
-            name: 'placeholder',
+            name: PlaceholderType.Placeholder,
             path: `rest.${verb}.0.to.placeholder`,
             processorName: verb as keyof ProcessorDefinition,
             isPlaceholder: true,
