Description
In the web version of Kaoto, the Catalog is accessible in two ways:
- Catalog page — a dedicated entry in the main navigation (same level as Design), reachable at
/catalog. It shows the full list of components and, when clicking on one, opens a detail modal (PropertiesModal) with the component's documentation, properties, and description.
- Catalog modal — triggered from within the Design tab, either via the "Open Catalog" button (book icon, bottom of the canvas) or when adding/replacing a component in the flow. In this case clicking a tile selects and inserts the component — no details are shown, by design.
In the VSCode extension, only the second mode is available. The KaotoEditorRouter does not include a /catalog route, and the KaotoEditor component does not expose a "Catalog" tab in its tab bar. As a result, users in VSCode have no way to browse the catalog and read component documentation before inserting a component into a flow.
Expected behavior
VSCode users should be able to access the same catalog browsing experience available in the web version: a dedicated view listing all components where clicking on one shows its full details (description, properties, etc.).
Proposed solutions
-
Add a "Catalog" tab mirroring the web navigation experience.
-
Enhance the "Open Catalog" button modal (book icon, bottom of the Design canvas) so that clicking a tile opens a PropertiesModal with the component's full details instead of silently closing the modal. This solution could be applicable to both web and VSCode version.
Description
In the web version of Kaoto, the Catalog is accessible in two ways:
/catalog. It shows the full list of components and, when clicking on one, opens a detail modal (PropertiesModal) with the component's documentation, properties, and description.In the VSCode extension, only the second mode is available. The
KaotoEditorRouterdoes not include a/catalogroute, and theKaotoEditorcomponent does not expose a "Catalog" tab in its tab bar. As a result, users in VSCode have no way to browse the catalog and read component documentation before inserting a component into a flow.Expected behavior
VSCode users should be able to access the same catalog browsing experience available in the web version: a dedicated view listing all components where clicking on one shows its full details (description, properties, etc.).
Proposed solutions
Add a "Catalog" tab mirroring the web navigation experience.
Enhance the "Open Catalog" button modal (book icon, bottom of the Design canvas) so that clicking a tile opens a
PropertiesModalwith the component's full details instead of silently closing the modal. This solution could be applicable to both web and VSCode version.