The kaoto from kaotoio

Describe the Bug

When trying to build the application in a Windows environment, fails with a path error.

Steps to Reproduce the Bug or Issue

Clone the repository
Issue a yarn command to build the project for the first time

Notice how it can be completed:

(node:29760) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:29760) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
---
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:405:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:131:11)
    at defaultLoad (node:internal/modules/esm/load:82:3)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at C:\Users\LordR\repos\kaoto-next\node_modules\ts-node\src\esm.ts:255:45
    at async addShortCircuitFlag (C:\Users\LordR\repos\kaoto-next\node_modules\ts-node\src\esm.ts:409:15)
    at async nextLoad (node:internal/modules/esm/loader:163:22)
    at async ESMLoader.load (node:internal/modules/esm/loader:603:20)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:11)
    at async link (node:internal/modules/esm/module_job:68:21) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Screenshots or Videos

No response

Platform

OS: [Windows]

Please describe the feature that you want to propose

The main piece and most important part of the Camel Tooling will be the graphical editor. We should also consider ways to use the editor just as a read-only canvas to visualize the integration in addition to the full graphical editing.

Invalid type of properties in properties table when diamond operator contains dot

Describe the Bug

When javaType is in format:

java.util.Set<java.nio.file.OpenOption>

java.util.Comparator<org.apache.camel.component.file.GenericFile<org.apache.commons.net.ftp.FTPFile>>

it is parsed wrongly as

OpenOption>

FTPFile>>

It is due to the fact that class name in a diamond operator contains a dot and we expecting that after the latest dot, there is our final class name. ( https://github.com/KaotoIO/kaoto-next/blob/main/packages/ui/src/camel-utils/camel-to-table.adapter.ts#L33 ) So sophisticate parser is needed for this cases.

Also, we don't need to show what is in diamond operator at all, e.g. List<Map<String,AttributeValue>>, Camel Docs shows only List https://camel.apache.org/components/3.21.x/aws2-ddb-component.html#_endpoint_header_CamelAwsDdbItems

Additionally, if we want to show the full class name to the user, it can be done via tooltip

Use 4.1.0-SNAPSHOT Camel YAML DSL schema

Please describe the task that needs to be done

https://issues.apache.org/jira/browse/CAMEL-19700
Recently Camel YAML DSL schema got several fixes. Let's use the SNAPSHOT version schema until 4.1.0 is released.

Parsing an OpenApi file should display error messages if happens

Please describe the feature that you want to propose

Context

When failing to parse an OpenApi file, if there's an error message, the UI should show this error message to the user.

Improve component's icon visualization

Context

Currently, the components in the Canvas view are represented by a circle, without any icon.

Goal

The goal for this issue is to provide:

A default icon for all components.
Custom icons for EIPs
An easy place for these icons to be overridden, meaning that if at a later stage, we want to add a different icon for another component, it should be a matter of adding a new asset and linking it through a list.

Note

Please see IconResolver

Feature request: Extend API table about their API methods and their properties

Please describe the feature that you want to propose

When camel connector contains API's properties ( e.g AS2 or Twilio component ), the properties table shows only API information.

They can contain lots of APIs with one method, like Twilio, or just two APIs with lots of methods, like AS2. So a table with expendable rows is preferable for that so the user will expand only the API and method in which they are interested. See https://www.patternfly.org/components/table/#tree-table

e.g. (mockup with PF tree-table):

The rawObject contains also apiProperties object with information about methods and their properties:

Port Bean configuration UI

Please describe the feature that you want to propose

Port Bean configuration UI (MetadataEditor component) from kaoto-ui.

Load Camel YAML schema in non root base path

Context

Currently, kaoto-next is being deployed on GitHub pages under the following URL:

https://kaotoio.github.io/kaoto-next/

Since the DEFAULT_CATALOG_PATH is /camel-catalog, kaoto-next tries to load the catalog from:

https://kaotoio.github.io/

Steps to Reproduce the Bug or Issue

Navigate to https://kaotoio.github.io/kaoto-next/
Open the Source Code editor
Notice monaco-editor warning that the schema couldn't be loaded

Screenshots or Videos

No response

Platform

OS: [Linux]
Browser: [Firefox]

Replace existing nodes with a different one

Please describe the feature that you want to propose

Context

Currently, there's no mechanism to replace a node in place.

Goal

The goal of this issue is to provide a mechanism to replace a node with a different one.

Show the component properties rather than endpoint properties

Please describe the feature that you want to propose

Context

In the Camel component definition catalog, there are 3 types of elements:

Headers
Component properties
Endpoint properties

Currently, the component properties' table is showing the endpoint properties, rather than the component properties.

Goal

Display the component's properties instead.

Catalog browser filter is case sensitive and only name evethough the user see title

Describe the Bug

Catalog browser filter is case-sensitive and uses a name even though the user sees the title.
e.g. let's say I would like to filter this tile

it's name is aws2-ec2 however UI shows title so filter like
AWS, AWS Elastic, aws elastic don't filter that tile.

Steps to Reproduce the Bug or Issue

^

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 0.30.0]

Improve community standards

Please describe the task that needs to be done

According to GitHub, there are missing topics that would make the project more community-friendly.

The goal for this issue is to provide said topics:

Code of conduct
Contributing
Security policy
Pull request template

Configure steps from the canvas

Context

Currently, there's no mechanism to configure steps from the canvas view.

Goal

The goal for this issue is to support configuring steps from the canvas, by leveraging uniforms-patternfly and the appropriate step JSON Schema from the catalog.

Provide a live kaoto-next environment

Please describe the feature that you want to propose

Context

In order to easily share the functionality and keep the stakeholders up to date with the latest functionality, it would be nice to have a live kaoto-next environment updated after each merge to the main branch.

Notes

netlify has an easy integration mechanism with GitHub

Show component details in the Catalog

Please describe the feature that you want to propose

Currently, by clicking on a component tile, the component name gets printed in the console.

Goal

The idea for this feature would be to show a Modal view with more detailed information about the component, like its entire description and a list of the properties and their description.

This modal should be part of the components folder but be connected to the CatalogPage component. The idea here is to be able to use the same catalog without this functionality in the future as well.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update react monorepo (@types/react, @types/react-dom, react, react-dom, react-test-renderer)
fix(deps): update @patternfly (@patternfly/patternfly, @patternfly/react-code-editor, @patternfly/react-core, @patternfly/react-icons, @patternfly/react-table, @patternfly/react-topology)
fix(deps): update dependency monaco-editor to ^0.49.0
Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

dockerfile

Dockerfile

github-actions

.github/workflows/build-lint-test.yml

actions/checkout v4

actions/setup-node v4

actions/setup-java v4

.github/workflows/chromatic.yml

actions/checkout v4

actions/setup-node v4

actions/setup-java v4

chromaui/action v11

.github/workflows/deploy-main.yml

actions/checkout v4

actions/setup-node v4

actions/setup-java v4

actions/upload-artifact v4

actions/checkout v4

actions/configure-pages v5

actions/download-artifact v4

actions/upload-pages-artifact v3

actions/deploy-pages v4

actions/checkout v4

actions/download-artifact v4

docker/login-action v3

.github/workflows/e2e-tests.yml

actions/checkout v4

actions/cache v4

actions/cache v4

actions/setup-java v4

actions/upload-artifact v4

actions/upload-artifact v4

actions/checkout v4

actions/setup-java v4

actions/download-artifact v4

actions/download-artifact v4

cypress-io/github-action v6.7.0

actions/upload-artifact v4

actions/upload-artifact v4

actions/checkout v4

actions/setup-java v4

actions/download-artifact v4

actions/download-artifact v4

cypress-io/github-action v6.7.0

actions/upload-artifact v4

actions/upload-artifact v4

actions/checkout v4

actions/setup-java v4

actions/download-artifact v4

actions/download-artifact v4

cypress-io/github-action v6.7.0

actions/upload-artifact v4

actions/upload-artifact v4

.github/workflows/release-pipeline.yml

actions/checkout v4

mathieudutour/github-tag-action v6.2

ncipollo/release-action v1

actions/checkout v4

actions/setup-node v4

actions/setup-java v4

actions/checkout v4

actions/setup-node v4

actions/setup-java v4

docker/login-action v3

.github/workflows/vscode-tests.yml

convictional/trigger-workflow-and-wait v1.6.5

maven

packages/camel-catalog/assembly/pom.xml

packages/camel-catalog/kaoto-camel-catalog-maven-plugin/pom.xml

cz.habarta.typescript-generator:typescript-generator-maven-plugin 3.2.1263

packages/camel-catalog/pom.xml

org.apache.maven.plugins:maven-dependency-plugin 3.7.0

org.apache.camel.kamelets:camel-kamelets 4.6.0

org.apache.camel.k:camel-k-crds 2.3.3

org.apache.camel:camel-bom 4.6.0

org.apache.camel.kamelets:camel-kamelets 4.6.0

org.apache.maven:maven-plugin-api 3.9.7

org.apache.maven.plugin-tools:maven-plugin-annotations 3.13.1

com.fasterxml.jackson.core:jackson-databind 2.17.1

com.fasterxml.jackson.dataformat:jackson-dataformat-yaml 2.17.1

io.fabric8:kubernetes-model 6.13.0

org.junit.jupiter:junit-jupiter-api 5.10.2

org.junit.jupiter:junit-jupiter-engine 5.10.2

org.apache.maven.plugins:maven-dependency-plugin 3.7.0

org.apache.maven.plugins:maven-antrun-plugin 3.1.0

org.apache.maven.plugins:maven-surefire-plugin 3.2.5

org.apache.maven.plugins:maven-resources-plugin 3.3.1

org.apache.maven.plugins:maven-plugin-plugin 3.13.1

org.apache.maven.plugins:maven-compiler-plugin 3.13.0

org.apache.camel:camel-yaml-dsl-maven-plugin 4.6.0

maven-wrapper

packages/camel-catalog/.mvn/wrapper/maven-wrapper.properties

maven 3.9.7

npm

package.json

@lerna-lite/cli ^3.0.0

@lerna-lite/publish ^3.0.0

@lerna-lite/version ^3.0.0

husky ^9.0.0

lint-staged ^15.0.0

node >=18.x

@patternfly/patternfly 5.2.1

@patternfly/react-code-editor 5.1.0

@patternfly/react-core 5.2.2

@patternfly/react-icons 5.2.1

@patternfly/react-table 5.2.2

@patternfly/react-topology 5.2.1

axios 1.7.2

react 18.2.0

react-dom 18.2.0

uniforms 4.0.0-alpha.5

uniforms-bridge-json-schema 4.0.0-alpha.5

uniforms-bridge-simple-schema-2 4.0.0-alpha.5

simpl-schema 3.4.6

typescript 5.4.5

yarn 3.8.2

packages/camel-catalog/package.json

@types/node ^20.0.0

eslint ^8.45.0

eslint-config-prettier ^9.0.0

eslint-plugin-import ^2.26.0

eslint-plugin-prettier ^5.0.0

json-schema-to-typescript ^14.0.0

prettier ^3.0.0

rimraf ^5.0.1

ts-node ^10.9.1

typescript ^5.4.2

packages/ui-tests/package.json

storybook ^7.2.3

@storybook/addon-essentials ^7.2.3

@storybook/addon-interactions ^7.2.3

@storybook/addon-links ^7.2.3

@storybook/addon-onboarding ^1.0.8

@storybook/blocks ^7.2.3

@storybook/channels ^7.4.0

@storybook/components ^7.4.0

@storybook/core-events ^7.4.0

@storybook/manager-api ^7.4.0

@storybook/preview-api ^7.4.0

@storybook/react ^7.4.0

@storybook/react-vite ^7.2.3

@storybook/testing-library ^0.2.0

@storybook/theming ^7.4.0

chromatic ^11.0.0

cypress ^13.11.0

cypress-file-upload ^5.0.8

eslint ^8.45.0

eslint-config-prettier ^9.0.0

eslint-plugin-import ^2.26.0

eslint-plugin-jest ^27.2.1

eslint-plugin-prettier ^5.0.0

eslint-plugin-react-hooks ^4.6.0

eslint-plugin-react-refresh ^0.4.3

eslint-plugin-storybook ^0.8.0

msw ^2.0.2

msw-storybook-addon ^2.0.0

prettier ^3.0.0

react ^18.2.0

react-dom ^18.2.0

react-router-dom ^6.14.1

start-server-and-test ^2.0.0

storybook-addon-react-router-v6 ^2.0.7

storybook-fixtures 0.12.0

typescript ^5.4.2

vite ^4.4.5

packages/ui/package.json

@kaoto-next/uniforms-patternfly ^0.6.10

@kie-tools-core/editor 0.32.0

@kie-tools-core/notifications 0.32.0

@patternfly/patternfly 5.2.1

@patternfly/react-code-editor 5.1.0

@patternfly/react-core 5.2.2

@patternfly/react-icons 5.2.1

@patternfly/react-table 5.2.2

@patternfly/react-topology 5.2.1

@types/uuid ^9.0.2

ajv ^8.12.0

ajv-draft-04 ^1.0.0

ajv-formats ^2.1.1

clsx ^2.1.0

html-to-image ^1.11.11

lodash.clonedeep ^4.5.0

lodash.get ^4.4.2

lodash.isempty ^4.4.0

lodash.memoize ^4.1.2

lodash.set ^4.3.2

monaco-editor ^0.45.0

monaco-yaml ^5.1.1

react ^18.2.0

react-dom ^18.2.0

react-monaco-editor ^0.55.0

react-router-dom ^6.14.1

simple-zustand-devtools ^1.1.0

uniforms 4.0.0-alpha.5

uniforms-bridge-json-schema 4.0.0-alpha.5

usehooks-ts ^2.15.1

uuid ^9.0.0

yaml ^2.3.2

zustand ^4.3.9

@babel/core ^7.23.2

@babel/preset-env ^7.21.5

@babel/preset-react ^7.18.6

@babel/preset-typescript ^7.21.5

@testing-library/dom ^9.3.0

@testing-library/jest-dom ^6.0.0

@testing-library/react ^14.0.0

@testing-library/user-event ^14.4.3

@types/jest ^29.4.0

@types/json-schema ^7.0.15

@types/lodash.clonedeep ^4.5.7

@types/lodash.get ^4.4.2

@types/lodash.isempty ^4.4.9

@types/lodash.memoize ^4.1.9

@types/lodash.set ^4.3.7

@types/node ^20.0.0

@types/react ^18.2.25

@types/react-dom ^18.2.10

@typescript-eslint/eslint-plugin ^7.0.0

@typescript-eslint/parser ^7.0.0

@vitejs/plugin-react ^4.0.3

babel-jest ^29.4.2

copyfiles ^2.4.1

eslint ^8.45.0

eslint-config-prettier ^9.0.0

eslint-plugin-import ^2.26.0

eslint-plugin-jest ^27.2.1

eslint-plugin-prettier ^5.0.0

eslint-plugin-react-hooks ^4.6.0

eslint-plugin-react-refresh ^0.4.3

jest ^29.4.2

jest-canvas-mock ^2.5.2

jest-environment-jsdom ^29.4.2

prettier ^3.0.0

react-test-renderer ^18.2.0

rimraf ^5.0.5

sass ^1.63.6

simple-git ^3.22.0

stylelint ^16.1.0

stylelint-config-standard-scss ^13.0.0

stylelint-prettier ^5.0.0

ts-node ^10.9.1

typescript ^5.4.2

vite ^4.4.5

vite-plugin-dts ^3.5.1

vite-plugin-static-copy ^1.0.0

Check this box to trigger a request for Renovate to run again on this repository

Camel K CRD file extraction fails

Describe the Bug

There is a maven plugin misconfiguration for extracting Camel K CRD files, currently only Pipe CRD file is extracted as crd-schema-camel-2.1.0-SNAPSHOT.json, missing other CRDs

It must be a bug from #94

Steps to Reproduce the Bug or Issue

yarn build in packages/camel-catalog
See dist

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 0.30.0]

Indication that some of the connectors mandatory properties are not yet configured

Please describe the feature that you want to propose

It would be useful to show in the flow diagram that some of the connectors are not yet configured. The connectors have "mandatory" fields and the nodes could be displaying configuration status decorators, as in attached image.

const NODES: NodeModel[] = [
  {
    id: 'node-0',
    type: 'node',
    label: 'Node 0',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NodeShape.ellipse,
    status: NodeStatus.danger,
    data: {
      badge: 'B',
      isAlternate: false
    }
  },
  {
    id: 'node-1',
    type: 'node',
    label: 'Node 1',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NodeShape.hexagon,
    status: NodeStatus.warning,
    data: {
      badge: 'B',
      isAlternate: false
    }
  },
  {
    id: 'node-2',
    type: 'node',
    label: 'Node 2',
    width: NODE_DIAMETER,
    height: NODE_DIAMETER,
    shape: NodeShape.octagon,
    status: NodeStatus.success,
    data: {
      badge: 'A',
      isAlternate: true
    }
  },

above is from the PF example code. The interesting part is the status: NodeStatus.xxx which controls what icon is displayed.

Configure Chromatic

Please describe the task that needs to be done

After completing:

#17
#18

we also could leverage the new package to also configure Chromatic

The idea here would be to have visual testing for exported packages, the ones exported here: https://github.com/KaotoIO/kaoto-next/blob/main/packages/ui/src/public-api.ts

Format/align Endpoint Options subtables in component properties modal

Please describe the feature that you want to propose

The Endpoint Options tab in the component properties modal contains two tables with path parameters and query parameters. The tables are independent <PropertiesTableSimple> components so they have different formatting from each other which causes the columns to be not vertically aligned.

This can happen also at different tabs (Component options or message headers) tabs when 2 or more tables will be rendered in same tab.

Provide a better mechanism to refresh the Canvas component

Describe the Bug

When opening the Design pane in kaoto-next, there's a flash in the Canvas component.

Steps to Reproduce the Bug or Issue

Go to the Design pane
Notice the flash when loading the Canvas component for the first time

Screenshots or Videos

Screencast.from.2023-09-12.12-46-37.webm

Platform

OS: [Linux]
Browser: [Firefox]

Leverage Camel YAML DSL Schema

Context

In Kaoto v1, there's no direct access to the underlying Camel model from the UI. In turn, the Camel model gets transformed into an intermediate model called the Kaoto model, and this means that every Camel entity needs to have a Kaoto model counterpart, otherwise, data is lost.

Goal

The goal is to leverage the Camel model directly from the UI, meaning that as soon as a Camel entity is available, Kaoto will leverage said definition automatically.

Related issues

Implement BaseVisualCamelEntity for Kamelet CRD

Context

Currently, there's only support to render Camel Routes in the Design section of kaoto-next.

Goal

This issue aims to implement a BaseVisualCamelEntity for the Kamelet CRD.

Requisites

Support a VisualEntity flow, meaning the user can interact with nodes by adding, removing, replacing, or configuring them. #421
Support the dependencies array.
a. Delegated into #489, as it's not a priority at the moment.
Support for Metadata configuration like annotations, labels, and the icon.
a. #480
Handle special Kamelets boundaries. (kamelet:source & kamelet:sink):
a. #429
b. #445
c. #455

Notes

Camel Route Example
After building kaoto-next/packages/camel-catalog, using yarn workspace @kaoto-next/camel-catalog run build, you will find the Kamelet CRD JSON Schema in packages/camel-catalog/dist/crd-schema-kamelets-2.1.0-SNAPSHOT.json
You could use a Typescript definition for Kamelet like:

import { Kamelet } from '@kaoto-next/camel-catalog/types';

Configure Storybook

Please describe the task that needs to be done

After completing:

#17

we could leverage the new package to also configure Storybook

The idea here would be to have stories for exported packages, the ones exported here: https://github.com/KaotoIO/kaoto-next/blob/main/packages/ui/src/public-api.ts

Connect missing schema link between Camel K CRD and Camel YAML DSL

Please describe the task that needs to be done

In the @kaoto-next/camel-catalog, ATM we holds the Camel K CRD schema and Camel YAML DSL separately, without any information about the disconnection.

For example, Kamelet template is described as object in Camel K
https://github.com/apache/camel-k/blob/main/config/crd/bases/camel.apache.org_kamelets.yaml#L505-L508

This implicitly jumps to RouteTemplateDefinition in Camel YAML DSL
https://github.com/apache/camel/blob/main/dsl/camel-yaml-dsl/camel-yaml-dsl/src/generated/resources/schema/camel-yaml-dsl.json#L3432

In the best case we can leverage external schema reference and directly point to the definition in Camel YAML DSL schema from Camel K CRD schema.
https://json-schema.org/understanding-json-schema/structuring.html

But we have to carefully test if the external reference resolution works, especially with uniforms. Can we have a logical path to the separate file? just relative file path works? etc.

In the worst case, we might need to import the part of Camel YAML DSL schema into Camel K CRD schema.

A white background is not on the whole page when the page is scrollable

Describe the Bug

When the page is scrollable ( e.g. catalog page), the height of the white background for is the same as the height of the window.

I noticed that this background comes from

Improve the catalog's search algorithm

Please describe the feature that you want to propose

The SearchBar looks for the component name or tags but in a case-sensitive fashion. It's worth mentioning that the component name it's not the title

Example

name	title	description
jcache	J Cache	Perform caching operations against JSR107/JCache.

Goal

Improve the algorithm to turn the search into a case-insensitive search. As an example, typing Serialize should show components that:

Its title contains serialize, Serialize, SeRiAlIzE
At least one of the tags includes the same text (case-insensitive)
The description contains the same text (case-insensitive)

Notes

It's very likely that we're gonna need to use the Browser's Internationalization API

Implement BaseVisualCamelEntity for Pipe CRD

Context

Currently, there's only support to render Camel Routes in the Design section of kaoto-next.

Goal

This issue aims to implement a BaseVisualCamelEntity for the Pipe CRD.

Notes

Camel Route Example
After building kaoto-next/packages/camel-catalog, using yarn workspace @kaoto-next/camel-catalog run build, you will find the Pipe CRD JSON Schema in packages/camel-catalog/dist/crd-schema-pipes-2.1.0-SNAPSHOT.json
You could use a Typescript definition for Kamelet like:

import { Pipe } from '@kaoto-next/camel-catalog/types';

Port multiple route support controls from kaoto

Context

Currently, there's no visual mechanism to handle which route is presented in the canvas

Goal

The goal of this issue is to port the multiple route controls from kaoto into kaoto-next. This could be done by leveraging contextToolbar property of @patternfly/react-topology

Prerequisites

#136
#137

Demo

Todo list

Port the multiple route support components to kaoto-next
Wire up the new route toggle with the currentDsl property (Remember to warn the user that the source code will be removed)
Wire up the new route button, depending on the currentDsl property to add new entities (Some DSL might support multiple routes while others don't)

Note: IT might be needed to update the `toVizNode()` method to return an `Array<VisualNodes>` to support Integration type

Implement BaseVisualCamelEntity for Integration CRD

Please describe the feature that you want to propose

Context

Currently, there's only support to render Camel Routes in the Design section of kaoto-next.

Goal

This issue aims to implement a BaseVisualCamelEntity for the Integration CRD.

Notes

Camel Route Example
After building kaoto-next/packages/camel-catalog, using yarn workspace @kaoto-next/camel-catalog run build, you will find the Integration CRD JSON Schema in packages/camel-catalog/dist/crd-schema-integrations-2.1.0-SNAPSHOT.json
You could use a Typescript definition for Integration like:

import { Integration } from '@kaoto-next/camel-catalog/types';

Reorder nodes using drag and drop

Please describe the feature that you want to propose

Context

Currently, there's no mechanism to reorder nodes in the canvas.

Goal

The goal of this issue is to allow users to reorder canvas nodes using drag and drop functionality.

Wrap tags in the tile component when component contains more tags

Please describe the feature that you want to propose

When a component contains more tags or the version tag is too long, the version is shown on a new line which does not look pretty/ aligned.

e.g.

Remove nodes from the canvas

Context

Currently, there's no mechanism to remove nodes from the canvas.

Goal

The goal for this issue is to provide a mechanism to remove nodes from the canvas, considering their position in it.

Open questions

Should we aim to support placeholders when a step is removed?

Offer a list view for the Catalog

Please describe the feature that you want to propose

Context

Currently, we have the tiles view in the catalog.

Goal

The goal for this ticket would be to offer another type of visualization for the catalog, presenting it as a list instead.

This should be configurable to the user.

Extract CamelK CRD from maven artifacts

Please describe the task that needs to be done

From Camel K 2.1.0, CRD files are available in the distribution - apache/camel-k#4655

We should change this to extract them from maven artifacts instead of retrieving from GitHub
https://github.com/KaotoIO/kaoto-next/blob/main/packages/camel-catalog/assembly/pom.xml#L76-L109

Export TypeScript definitions for Camel model objects

Please describe the task that needs to be done

By feeding Camel YAML DSL schema and Camel K CRD schema, we would be able to generate type definitions for Camel model objects
This tool would help https://www.npmjs.com/package/json-schema-to-typescript

#6 would block us from doing this for Camel K CRD

Build errors with node v20

Describe the Bug

When installing dependencies using node v20, the yarn command fails. It was likely introduced with #56

It seems the offending command is:

ts-node --esm ./src/json-schema-to-typescript.mts

Log trace

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".mts" for /home/repos/kaoto-next/packages/camel-catalog/src/json-schema-to-typescript.mts
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
    at defaultLoad (node:internal/modules/esm/load:91:20)
    at nextLoad (node:internal/modules/esm/hooks:733:28)
    at load (/home/rmartinez/repos/kaoto-next/node_modules/ts-node/dist/child/child-loader.js:19:122)
    at nextLoad (node:internal/modules/esm/hooks:733:28)
    at Hooks.load (node:internal/modules/esm/hooks:377:26)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:168:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:778:20) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Steps to Reproduce the Bug or Issue

On a new kaoto-next clone (or in an existing one, removing the node_modules folder)
Issue the yarn command to install dependencies
The command fails and points to a log file.

Screenshots or Videos

No response

Platform

OS: [Linux]
Browser: [n/a]
Version: [0.0.0]

Export TypeScript definitions for @kaoto/camel-catalog

Please describe the feature that you want to propose

Currently, there are no TypeScript definitions for the catalog, meaning that all the information is typed as any, defeating the static checks' purpose.

Cache the camel-catalog artifact in GitHub actions

Context

In order to build @kaoto-next/ui, @kaoto-next/camel-catalog needs to be built first.

Run yarn workspace @kaoto-next/ui run build
Error: R] Failed to resolve entry for package "@kaoto-next/camel-catalog". The package may have incorrect main/module/exports specified in its package.json. [plugin externalize-deps]

    ../../node_modules/esbuild/lib/main.js:13[7](https://github.com/KaotoIO/kaoto-next/actions/runs/5811727443/job/15755586382?pr=10#step:5:8)3:27:
      1373 │         let result = await callback({
           ╵                            ^

    at packageEntryFailure (file:///home/runner/work/kaoto-next/kaoto-next/node_modules/vite/dist/node/chunks/dep-df561101.js:2[8](https://github.com/KaotoIO/kaoto-next/actions/runs/5811727443/job/15755586382?pr=10#step:5:9)6[9](https://github.com/KaotoIO/kaoto-next/actions/runs/5811727443/job/15755586382?pr=10#step:5:10)1:[11](https://github.com/KaotoIO/kaoto-next/actions/runs/5811727443/job/15755586382?pr=10#step:5:12))
...

Originally posted by @igarashitm in #10 (comment)

This can be fixed by running a yarn command like the following:

yarn workspaces foreach --topological-dev --verbose run build

but it would be better to cache the result of said artifact in order to avoid building it everytime

Goal

Provide a cache mechanism, at the GitHub action level, that caches the @kaoto-next/camel-catalog built artifact. (the packages/camel-catalog/dist folder)

Offer a reformat feature

Context

Currently, there are changes in the Camel YAML Schema, going from kebab-case to camelCase and this might be transformed using automated process directly from kaoto-next

Goal

The goal of this issue is to provide a reformat button to the source code editor that:

Transform from kebab-case to camelCase
Transform URI query parameters to property objects
Use the recommended to: syntax

Implement a Source Code editor

Context

In order to adjust the fine details of components, a Source Code editor is required. It should support the correct JSON validation schema depending on the selected DSL.

Configure cypress

Please describe the task that needs to be done

We're gonna need e2e tests in the project, but before we do that, we need to configure the project.

Goal

Install cypress in a monorepo fashion, meaning that the dependency should go into a new package (maybe /packages/ui-tests?), rather than @kaoto-next/ui package or the root package.json. The idea of doing this is to reduce the number of dependencies of the @kaoto-next/ui package as this package is meant to be exported.

In addition to that, configure typescript, so we could leverage typings for custom commands and queries: https://docs.cypress.io/guides/tooling/typescript-support#Types-for-Custom-Commands

Implement BaseVisualCamelEntity for KameletBinding CRD

Context

Currently, there's only support to render Camel Routes in the Design section of kaoto-next.

Goal

This issue aims to implement a BaseVisualCamelEntity for the KameletBinding CRD.

Notes

Camel Route Example
After building kaoto-next/packages/camel-catalog, using yarn workspace @kaoto-next/camel-catalog run build, you will find the Kamelet CRD JSON Schema in packages/camel-catalog/dist/crd-schema-kameletbindings-2.1.0-SNAPSHOT.json
You could use a Typescript definition for KameletBinding like:

import { KameletBinding } from '@kaoto-next/camel-catalog/types';

Automatic versioning

Context

Currently, there's no version bump after each merge in the main branch.

Goal

The goal is to provide automatic versioning for every merge on the main branch for each package, following semver and automatically generating a CHANGELOG.md file as well.

Tag filtering in catalog

Please describe the feature that you want to propose

Users can search in the catalog by typing name or tag but they are not able to combine them.
e.g. as a user, I want to filter only "database" component and after that search by name or filter only "database" and "cloud" component

Use the index property for sorting component's properties

Context

Currently, the Camel Catalog provides an index property for sorting purposes.

  "componentProperties": {
    "bridgeErrorHandler": { "index": 0, "kind": "property", "

Goal

The goal for this issue is to leverage said property and sort the component's properties table

Add new components from the Canvas

Context

Currently, there's no possibility to add new components from the Canvas view.

Goal

The goal for this issue is to allow users to:

Add new components where it makes sense, from the canvas view.
Support the right type of components, f.i., adding when and otherwise from the Choice EIP.

Pull requests:

#262
New nodes for Pipes: pending

Relates to: #225

Remove kebab-case YAML schema in favor of camelCase one

Please describe the task that needs to be done

https://issues.apache.org/jira/browse/CAMEL-19703
kebab-case camel-yaml-dsl.json schema file has been removed from upstream in favor of camelCase camelYamlDsl.json. That's in effect from Camel 4.1.0. We should follow the direction.

First, remove this kebab-case file generation
https://github.com/KaotoIO/kaoto-next/blob/main/packages/camel-catalog/assembly/pom.xml#L126-L140

And then use camelCase file
https://github.com/KaotoIO/kaoto-next/blob/main/packages/camel-catalog/kaoto-camel-catalog-maven-plugin/src/main/java/io/kaoto/camelcatalog/KaotoCamelCatalogMojo.java#L62

Implement first iteration of Rest DSL

Please describe the feature that you want to propose

Context

Currently, the Camel YAML schema is available in the zustand store at useSchemasStore

Despite that, there's no Rest Configuration UI available yet.

Goal

The goal is to provide a first iteration of the config UI for Rest and RestConfiguration objects.

Requirements (can be implemented in subsequent GitHub issues if needed)

Create a dedicated Rest page that will hold the Rest-related UI
Provide a simple mechanism to create new Rest and RestConfiguration objects. Please see the POC

Upon clicking one of the objects, the AutoForm component should be fired with the model and the schema and connect it through a callback to update the model.
See the right side of the POC

Notes

POC Source code

kaotoio / kaoto Goto Github PK

kaoto's People

Contributors

Stargazers

Watchers

Forkers

kaoto's Issues

Describe the Bug

Steps to Reproduce the Bug or Issue

Screenshots or Videos

Platform

Please describe the feature that you want to propose

Describe the Bug

Please describe the task that needs to be done

Please describe the feature that you want to propose

Context

Context

Goal

Note

Please describe the feature that you want to propose

Please describe the feature that you want to propose

Context

Steps to Reproduce the Bug or Issue

Screenshots or Videos

Platform

Please describe the feature that you want to propose

Context

Goal

Please describe the feature that you want to propose

Context

Goal

Describe the Bug

Steps to Reproduce the Bug or Issue

Screenshots or Videos

Platform

Please describe the task that needs to be done

Context

Goal

Please describe the feature that you want to propose

Context

Notes

Please describe the feature that you want to propose

Goal

Related links

Awaiting Schedule

Open

Ignored or Blocked

Detected dependencies

Describe the Bug

Steps to Reproduce the Bug or Issue

Screenshots or Videos

Platform

Please describe the feature that you want to propose

Please describe the task that needs to be done

Please describe the feature that you want to propose

Describe the Bug

Steps to Reproduce the Bug or Issue

Screenshots or Videos

Platform

Context

Goal

Related issues

Context

Goal

Requisites

Notes

Please describe the task that needs to be done

Please describe the task that needs to be done

Describe the Bug

Please describe the feature that you want to propose

Example

Goal

Notes

Context

Goal

Notes

Context

Goal

Prerequisites

Demo

Note: IT might be needed to update the `toVizNode()` method to return an `Array<VisualNodes>` to support Integration type