feat(gh_112) - BaseVisualCamelEntity for Pipe

packages/ui/src/camel-utils/index.ts

@@ -3,3 +3,5 @@ export * from './camel-to-tile.adapter';
 export * from './camel-to-table.adapter';
 export * from './camel-to-tabs.adapter';
 export * from './is-camel-route';
+export * from './is-kamelet-binding';
+export * from './is-pipe';

packages/ui/src/camel-utils/is-pipe.test.ts

@@ -0,0 +1,15 @@
+import { isPipe } from './is-pipe';
+import { pipeJson } from '../stubs/pipe-route';
+
+describe('isPipe', () => {
+  it.each([
+    [{ apiVersion: 'camel.apache.org/v1', kind: 'Pipe' }, true],
+    [pipeJson, true],
+    [undefined, false],
+    [null, false],
+    [true, false],
+    [false, false],
+  ])('should mark %s as isPipe: %s', (route, result) => {
+    expect(isPipe(route)).toEqual(result);
+  });
+});

packages/ui/src/camel-utils/is-pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe } from '@kaoto-next/camel-catalog/types';
+import { isDefined } from '../utils';
+
+/** Very basic check to determine whether this object is a Pipe */
+export const isPipe = (rawEntity: unknown): rawEntity is Pipe => {
+  if (!isDefined(rawEntity) || Array.isArray(rawEntity) || typeof rawEntity !== 'object') {
+    return false;
+  }
+
+  return (
+    typeof rawEntity === 'object' && 'apiVersion' in rawEntity! && 'kind' in rawEntity! && rawEntity.kind == 'Pipe'
+  );
+};

packages/ui/src/hooks/entities.ts

@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { parse } from 'yaml';
-import { isCamelRoute } from '../camel-utils';
-import { BaseCamelEntity, BaseVisualCamelEntity, CamelRoute, KameletBinding } from '../models/camel-entities';
+import { isCamelRoute, isPipe, isKameletBinding } from '../camel-utils';
+import { BaseCamelEntity, BaseVisualCamelEntity, CamelRoute, KameletBinding, Pipe } from '../models/camel-entities';
 import { isDefined } from '../utils';
-import { isKameletBinding } from '../camel-utils/is-kamelet-binding';
 
 export const useEntities = () => {
   const [sourceCode, setSourceCode] = useState<string>('');
@@ -20,7 +19,7 @@ export const useEntities = () => {
         (acc, rawEntity) => {
           const entity = getEntity(rawEntity);
 
-          if (entity instanceof CamelRoute || entity instanceof KameletBinding) {
+          if (entity instanceof CamelRoute || entity instanceof KameletBinding || entity instanceof Pipe) {
             acc.visualEntities.push(entity);
           } else if (isDefined(entity) && typeof entity === 'object') {
             acc.entities.push(entity);
@@ -65,6 +64,8 @@ function getEntity(rawEntity: unknown): BaseCamelEntity | BaseVisualCamelEntity
     return new CamelRoute(rawEntity.route);
   } else if (isKameletBinding(rawEntity)) {
     return new KameletBinding(rawEntity);
+  } else if (isPipe(rawEntity)) {
+    return new Pipe(rawEntity);
   }
 
   return rawEntity as BaseCamelEntity;

packages/ui/src/models/camel-entities/flows/index.ts

@@ -1,2 +1,3 @@
 export * from './kamelet-binding';
+export * from './pipe';
 export * from './route';

packages/ui/src/models/camel-entities/flows/kamelet-binding.ts

@@ -2,11 +2,16 @@ import { KameletBinding as KameletBindingModel } from '@kaoto-next/camel-catalog
 import { v4 as uuidv4 } from 'uuid';
 import { VisualizationNode } from '../../visualization';
 import { BaseVisualCamelEntity, EntityType } from '../base-entity';
-import { KameletBindingSink, KameletBindingSource, KameletBindingStep, KameletBindingSteps } from '../kamelet-binding';
+import {
+  KameletBindingSink,
+  KameletBindingSource,
+  KameletBindingStep,
+  KameletBindingSteps,
+} from '../kamelet-binding-overrides';
 
 export class KameletBinding implements BaseVisualCamelEntity {
   readonly id = uuidv4();
-  readonly type = EntityType.KameletBinding;
+  type = EntityType.KameletBinding;
 
   constructor(public route: Partial<KameletBindingModel> = {}) {}
 

packages/ui/src/models/camel-entities/flows/pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe as PipeModel } from '@kaoto-next/camel-catalog/types';
+import { v4 as uuidv4 } from 'uuid';
+import { BaseVisualCamelEntity, EntityType } from '../base-entity';
+import { KameletBinding } from './kamelet-binding';
+
+export class Pipe extends KameletBinding implements BaseVisualCamelEntity {
+  readonly id = uuidv4();
+  type = EntityType.Pipe;
+
+  constructor(public route: Partial<PipeModel> = {}) {
+    super();
+  }
+}

packages/ui/src/stubs/pipe-route.ts

@@ -0,0 +1,66 @@
+import { Pipe } from '../models/camel-entities';
+
+/**
+ * This is a stub Pipe in YAML format.
+ * It is used to test the Canvas component.
+ */
+export const pipeYaml = `
+apiVersion: camel.apache.org/v1
+kind: Pipe
+metadata:
+  name: webhook-binding
+spec:
+  source:
+    ref:
+      kind: Kamelet
+      apiVersion: camel.apache.org/v1
+      name: webhook-source
+  steps:
+    - ref:
+        kind: Kamelet
+        apiVersion: camel.apache.org/v1
+        name: delay-action
+  sink:
+    ref:
+      kind: Kamelet
+      apiVersion: camel.apache.org/v1
+      name: log-sink`;
+
+/**
+ * This is a stub Pipe in JSON format.
+ * It is used to test the Canvas component.
+ */
+export const pipeJson = {
+  apiVersion: 'camel.apache.org/v1',
+  kind: 'Pipe',
+  metadata: {
+    name: 'webhook-binding',
+  },
+  spec: {
+    source: {
+      ref: {
+        kind: 'Kamelet',
+        apiVersion: 'camel.apache.org/v1',
+        name: 'webhook-source',
+      },
+    },
+    steps: [
+      {
+        ref: {
+          kind: 'Kamelet',
+          apiVersion: 'camel.apache.org/v1',
+          name: 'delay-action',
+        },
+      },
+    ],
+    sink: {
+      ref: {
+        kind: 'Kamelet',
+        apiVersion: 'camel.apache.org/v1alpha1',
+        name: 'log-sink',
+      },
+    },
+  },
+};
+
+export const pipe = new Pipe(pipeJson);