feat(Canvas): Add containers for branches

Currently, all children are rendered as individual nodes in the Canvas,
making complicated to understand when a step belongs to a parent EIP or
if it comes as a next step in the Camel Route.

This commit adds support for rendering EIP branches as containers.

fix: #368

packages/ui-tests/cypress/support/next-commands/design.ts

@@ -112,7 +112,7 @@ Cypress.Commands.add('selectCamelRouteType', (type: string, subType?: string) =>
 
 Cypress.Commands.add('selectRuntimeVersion', (type: string) => {
   cy.hoverOnRuntime(type);
-  cy.get(`[data-testid^="runtime-selector-Camel ${type}"] button.pf-v5-c-menu__item`).click({ force: true });
+  cy.get(`[data-testid^="runtime-selector-Camel ${type}"] button.pf-v5-c-menu__item`).first().click({ force: true });
   cy.waitSchemasLoading();
 
   cy.get('[data-testid="visualization-empty-state"]').should('exist');

packages/ui/src/components/Visualization/Canvas/CanvasFormTabs.test.tsx

@@ -114,7 +114,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const setHeaderNode = rootNode.getChildren()![0].getChildren()![0];
+      const setHeaderNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -179,7 +179,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const marshalNode = rootNode.getChildren()![0].getChildren()![0];
+      const marshalNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -267,7 +267,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const loadBalanceNode = rootNode.getChildren()![0].getChildren()![0];
+      const loadBalanceNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -360,7 +360,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const setHeaderNode = rootNode.getChildren()![0].getChildren()![0];
+      const setHeaderNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -420,7 +420,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const setHeaderNode = rootNode.getChildren()![0].getChildren()![0];
+      const setHeaderNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -485,7 +485,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const marshalNode = rootNode.getChildren()![0].getChildren()![0];
+      const marshalNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -535,7 +535,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const marshalNode = rootNode.getChildren()![0].getChildren()![0];
+      const marshalNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -591,7 +591,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const loadBalanceNode = rootNode.getChildren()![0].getChildren()![0];
+      const loadBalanceNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',
@@ -641,7 +641,7 @@ describe('CanvasFormTabs', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
-      const loadBalanceNode = rootNode.getChildren()![0].getChildren()![0];
+      const loadBalanceNode = rootNode.getChildren()![1];
       const selectedNode = {
         id: '1',
         type: 'node',