KaotoIO · igarashitm · Oct 10, 2023 · Oct 10, 2023
diff --git a/packages/ui/src/camel-utils/is-kamelet-binding.test.ts b/packages/ui/src/camel-utils/is-kamelet-binding.test.ts
@@ -1,5 +1,5 @@
 import { isKameletBinding } from './is-kamelet-binding';
-import { kameletBindingJson } from '../stubs/kamelet-route';
+import { kameletBindingJson } from '../stubs/kamelet-binding';
 
 describe('isKameBinding', () => {
   it.each([

diff --git a/packages/ui/src/camel-utils/is-kamelet.test.ts b/packages/ui/src/camel-utils/is-kamelet.test.ts
@@ -1,6 +1,6 @@
 import { isKamelet } from './is-kamelet';
 import { kameletJson } from '../stubs/kamelet';
-import { kameletBindingJson } from '../stubs/kamelet-route';
+import { kameletBindingJson } from '../stubs/kamelet-binding';
 
 describe('isKamelet', () => {
   it.each([

diff --git a/packages/ui/src/components/Form/properties/AddPropertyButtons.test.tsx b/packages/ui/src/components/Form/properties/AddPropertyButtons.test.tsx
@@ -1,16 +1,11 @@
-import { AddPropertyButtons } from './AddPropertyButtons.tsx';
+import { AddPropertyButtons } from './AddPropertyButtons';
 import { screen } from '@testing-library/dom';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('AddPropertyButtons.tsx', () => {
   test('Add string property button', () => {
     const events: boolean[] = [];
-    render(
-      <AddPropertyButtons
-        path={['foo', 'bar']}
-        createPlaceholder={(isObject) => events.push(isObject)}
-      />,
-    );
+    render(<AddPropertyButtons path={['foo', 'bar']} createPlaceholder={(isObject) => events.push(isObject)} />);
     const element = screen.getByTestId('properties-add-string-property-foo-bar-btn');
     expect(events.length).toBe(0);
     fireEvent.click(element);
@@ -20,12 +15,7 @@ describe('AddPropertyButtons.tsx', () => {
 
   test('Add object property button', () => {
     const events: boolean[] = [];
-    render(
-      <AddPropertyButtons
-        path={['foo', 'bar']}
-        createPlaceholder={(isObject) => events.push(isObject)}
-      />,
-    );
+    render(<AddPropertyButtons path={['foo', 'bar']} createPlaceholder={(isObject) => events.push(isObject)} />);
     const element = screen.getByTestId('properties-add-object-property-foo-bar-btn');
     expect(events.length).toBe(0);
     fireEvent.click(element);

diff --git a/packages/ui/src/components/Form/properties/PropertyRow.test.tsx b/packages/ui/src/components/Form/properties/PropertyRow.test.tsx
@@ -1,12 +1,12 @@
-import { PropertyRow } from './PropertyRow.tsx';
+import { PropertyRow } from './PropertyRow';
 import { TdProps } from '@patternfly/react-table';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 describe('PropertyRow.tsx', () => {
   test('render string property change name and value', () => {
     const model: any = { foo: 'bar' };
     let onChangeModel = 0;
-    let onCreatePlaceholder: boolean[] = [];
+    const onCreatePlaceholder: boolean[] = [];
     const treeRow: TdProps['treeRow'] = {
       rowIndex: 0,
       onCollapse: () => {},
@@ -44,9 +44,7 @@ describe('PropertyRow.tsx', () => {
     const nameInput = screen.getByTestId('beans-one-two-name-input');
     expect(nameInput).toHaveValue('foo');
     fireEvent.input(nameInput, { target: { value: 'fooModified' } });
-    const propertyEditConfirmBtn = screen.getByTestId(
-      'beans-one-two-property-edit-confirm-foo-btn',
-    );
+    const propertyEditConfirmBtn = screen.getByTestId('beans-one-two-property-edit-confirm-foo-btn');
     fireEvent.click(propertyEditConfirmBtn);
     expect(model.fooModified).toBe('barModified');
     expect(onChangeModel).toBe(1);
@@ -55,7 +53,7 @@ describe('PropertyRow.tsx', () => {
   test('render string property delete', () => {
     const model: any = { foo: 'bar' };
     let onChangeModel = 0;
-    let onCreatePlaceholder: boolean[] = [];
+    const onCreatePlaceholder: boolean[] = [];
     const treeRow: TdProps['treeRow'] = {
       rowIndex: 0,
       onCollapse: () => {},
@@ -94,7 +92,7 @@ describe('PropertyRow.tsx', () => {
   test('render object property', () => {
     const model: any = { foo: {} };
     let onChangeModel = 0;
-    let onCreatePlaceholder: boolean[] = [];
+    const onCreatePlaceholder: boolean[] = [];
     const treeRow: TdProps['treeRow'] = {
       rowIndex: 0,
       onCollapse: () => {},

diff --git a/packages/ui/src/components/MetadataEditor/MetadataEditor.tsx b/packages/ui/src/components/MetadataEditor/MetadataEditor.tsx
@@ -1,12 +1,12 @@
-import {createElement, FunctionComponent, PropsWithChildren, useEffect, useRef, useState} from 'react';
-import {Split, SplitItem, Stack, StackItem, Title} from "@patternfly/react-core";
-import {TopmostArrayTable} from "./ToopmostArrayTable.tsx";
-import {ErrorsField} from "@kaoto-next/uniforms-patternfly";
-import {AutoForm} from "uniforms";
-import {CustomAutoField} from "../Form/CustomAutoField.tsx";
-import {SchemaService} from "../Form";
-import {JSONSchemaBridge} from "uniforms-bridge-json-schema";
-import cloneDeep from "lodash/cloneDeep";
+import { createElement, FunctionComponent, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { Split, SplitItem, Stack, StackItem, Title } from '@patternfly/react-core';
+import { TopmostArrayTable } from './ToopmostArrayTable';
+import { ErrorsField } from '@kaoto-next/uniforms-patternfly';
+import { AutoForm } from 'uniforms';
+import { CustomAutoField } from '../Form/CustomAutoField';
+import { SchemaService } from '../Form';
+import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
+import cloneDeep from 'lodash/cloneDeep';
 
 interface MetadataEditorProps {
   name: string;
@@ -17,8 +17,9 @@ interface MetadataEditorProps {
 
 export const MetadataEditor: FunctionComponent<PropsWithChildren<MetadataEditorProps>> = (props) => {
   const schemaServiceRef = useRef(new SchemaService());
-  const [schemaBridge, setSchemaBridge] =
-    useState<JSONSchemaBridge | undefined>(schemaServiceRef.current.getSchemaBridge(getFormSchema()));
+  const [schemaBridge, setSchemaBridge] = useState<JSONSchemaBridge | undefined>(
+    schemaServiceRef.current.getSchemaBridge(getFormSchema()),
+  );
   const firstInputRef = useRef<HTMLInputElement>();
   const [selected, setSelected] = useState(-1);
   const [preparedModel, setPreparedModel] = useState<any>(null);
@@ -47,7 +48,7 @@ export const MetadataEditor: FunctionComponent<PropsWithChildren<MetadataEditorP
     if (isTopmostArray()) {
       let itemSchema = cloneDeep(props.schema.items);
       if (itemSchema.$ref) {
-        itemSchema =cloneDeep(props.schema.definitions[itemSchema.$ref.replace('#/definitions/', '')]);
+        itemSchema = cloneDeep(props.schema.definitions[itemSchema.$ref.replace('#/definitions/', '')]);
       }
       itemSchema.title = props.schema.title;
       itemSchema.description = props.schema.description;
@@ -90,73 +91,72 @@ export const MetadataEditor: FunctionComponent<PropsWithChildren<MetadataEditorP
 
   function renderTopmostArrayView() {
     return (
-        <Split hasGutter>
-          <SplitItem className="metadataEditorModalListView">
-            <TopmostArrayTable
-                model={preparedModel != null ? preparedModel : props.metadata}
-                itemSchema={getFormSchema()}
-                name={props.name}
-                selected={selected}
-                onSelected={handleSetSelected}
-                onChangeModel={onChangeArrayModel}
-            />
-          </SplitItem>
-
-          <SplitItem className="metadataEditorModalDetailsView">
-            <Stack hasGutter>
-              <StackItem>
-                <Title headingLevel="h2">Details</Title>
-              </StackItem>
-              <StackItem isFilled>{renderDetailsForm()}</StackItem>
-            </Stack>
-          </SplitItem>
-        </Split>
+      <Split hasGutter>
+        <SplitItem className="metadataEditorModalListView">
+          <TopmostArrayTable
+            model={preparedModel != null ? preparedModel : props.metadata}
+            itemSchema={getFormSchema()}
+            name={props.name}
+            selected={selected}
+            onSelected={handleSetSelected}
+            onChangeModel={onChangeArrayModel}
+          />
+        </SplitItem>
+
+        <SplitItem className="metadataEditorModalDetailsView">
+          <Stack hasGutter>
+            <StackItem>
+              <Title headingLevel="h2">Details</Title>
+            </StackItem>
+            <StackItem isFilled>{renderDetailsForm()}</StackItem>
+          </Stack>
+        </SplitItem>
+      </Split>
     );
   }
 
   function renderAutoFields(props: any = {}) {
     return createElement(
-        'div',
-        props,
-        schemaBridge!.getSubfields()
-          .sort((a, b) => {
-            const propsA = schemaBridge!.getProps(a);
-            const propsB = schemaBridge!.getProps(b);
-            if (propsA.required) {
-              return propsB.required ? 0 : -1;
-            }
-            return propsB.required ? 1 : 0;
-          })
-          .map((field, index) => {
-            const props: any = { key: field, name: field };
-            if (index === 0) {
-              props.inputRef = firstInputRef;
-            }
-            return createElement(CustomAutoField, props);
-          })
+      'div',
+      props,
+      schemaBridge!
+        .getSubfields()
+        .sort((a, b) => {
+          const propsA = schemaBridge!.getProps(a);
+          const propsB = schemaBridge!.getProps(b);
+          if (propsA.required) {
+            return propsB.required ? 0 : -1;
+          }
+          return propsB.required ? 1 : 0;
+        })
+        .map((field, index) => {
+          const props: any = { key: field, name: field };
+          if (index === 0) {
+            props.inputRef = firstInputRef;
+          }
+          return createElement(CustomAutoField, props);
+        }),
     );
   }
 
   function renderDetailsForm() {
-    return schemaBridge && (
+    return (
+      schemaBridge && (
         <AutoForm
-            schema={schemaBridge}
-            model={getFormModel()}
-            onChangeModel={onChangeFormModel}
-            data-testid={'metadata-editor-form-' + props.name}
-            placeholder={true}
-            disabled={isFormDisabled()}
+          schema={schemaBridge}
+          model={getFormModel()}
+          onChangeModel={onChangeFormModel}
+          data-testid={'metadata-editor-form-' + props.name}
+          placeholder={true}
+          disabled={isFormDisabled()}
         >
           {renderAutoFields()}
           <ErrorsField />
           <br />
         </AutoForm>
+      )
     );
   }
 
-  return schemaBridge && (
-      <>
-          {isTopmostArray() ? renderTopmostArrayView() : renderDetailsForm()}
-      </>
-  );
+  return schemaBridge && <>{isTopmostArray() ? renderTopmostArrayView() : renderDetailsForm()}</>;
 };
diff --git a/packages/ui/src/models/visualization/flows/kamelet-binding.test.ts b/packages/ui/src/models/visualization/flows/kamelet-binding.test.ts
@@ -1,9 +1,9 @@
 import { KameletBinding as KameletBindingModel } from '@kaoto-next/camel-catalog/types';
 import { JSONSchemaType } from 'ajv';
 import { kameletBindingJson } from '../../../stubs/kamelet-binding';
-import { EntityType } from '../../camel-entities/base-entity';
+import { EntityType } from '../../camel-entities';
 import { KameletBinding } from './kamelet-binding';
-import { KameletSchemaService } from './kamelet-schema.service.ts';
+import { KameletSchemaService } from './kamelet-schema.service';
 
 describe('Kamelet Binding', () => {
   let kameletBinding: KameletBinding;

diff --git a/packages/ui/src/models/visualization/flows/kamelet-visual-entity.ts b/packages/ui/src/models/visualization/flows/kamelet-visual-entity.ts
@@ -0,0 +1,41 @@
+import { v4 as uuidv4 } from 'uuid';
+import { BaseVisualCamelEntity, IVisualizationNode, VisualComponentSchema } from '../base-visual-entity';
+import { EntityType } from '../../camel-entities';
+import { createVisualizationNode } from '../visualization-node';
+
+export class KameletVisualEntity implements BaseVisualCamelEntity {
+  readonly id = uuidv4();
+  type = EntityType.Kamelet;
+
+  constructor(json: unknown) {
+    json;
+    // TODO
+  }
+
+  getComponentSchema(path: string | undefined): VisualComponentSchema | undefined {
+    path;
+    return undefined; // TODO
+  }
+
+  getId(): string {
+    return ''; // TODO
+  }
+
+  getSteps(): unknown[] {
+    return []; // TODO
+  }
+
+  toJSON(): unknown {
+    return undefined; // TODO
+  }
+
+  toVizNode(): IVisualizationNode {
+    return createVisualizationNode(''); // TODO
+  }
+
+  updateModel(path: string | undefined, value: unknown): void {
+    path;
+    value;
+    // TODO
+  }
+}
diff --git a/packages/ui/src/pages/Beans/BeansPage.tsx b/packages/ui/src/pages/Beans/BeansPage.tsx
@@ -1,19 +1,19 @@
 import { Title } from '@patternfly/react-core';
-import {FunctionComponent, useContext} from 'react';
-import {MetadataEditor} from "../../components/MetadataEditor";
+import { FunctionComponent, useContext } from 'react';
+import { MetadataEditor } from '../../components/MetadataEditor';
 import { useSchemasStore } from '../../store';
 import { EntitiesContext } from '../../providers/entities.provider';
-import {BeansDeserializer} from "@kaoto-next/camel-catalog/types";
-import {EntityType} from "../../models/camel-entities";
-import {Beans} from "../../models/visualization/metadata";
+import { BeansDeserializer } from '@kaoto-next/camel-catalog/types';
+import { EntityType } from '../../models/camel-entities';
+import { Beans } from '../../models/visualization/metadata';
 
 export const BeansPage: FunctionComponent = () => {
   const schemaMap = useSchemasStore((state) => state.schemas);
   const entitiesContext = useContext(EntitiesContext);
   const metadata = entitiesContext?.entities ?? [];
 
   function findBeansData() {
-    return metadata.find(item => item.type === EntityType.Beans) as {beans: BeansDeserializer} | undefined
+    return metadata.find((item) => item.type === EntityType.Beans) as { beans: BeansDeserializer } | undefined;
   }
 
   function getBeansData() {
@@ -22,10 +22,10 @@ export const BeansPage: FunctionComponent = () => {
   }
 
   function onChangeModel(model: BeansDeserializer) {
-    let beansData  = findBeansData();
+    let beansData = findBeansData();
     if (model?.length > 0) {
       if (!beansData) {
-        beansData = {beans: [...model]}
+        beansData = { beans: [...model] };
         metadata.push(new Beans(beansData.beans));
       } else {
         beansData.beans = [...model];

diff --git a/packages/ui/src/pages/Beans/router-exports.tsx b/packages/ui/src/pages/Beans/router-exports.tsx
@@ -1,3 +1,3 @@
-import { BeansPage } from './BeansPage.tsx';
+import { BeansPage } from './BeansPage';
 
 export const element = <BeansPage />;