diff --git a/packages/ui-tests/stories/catalog/PropertiesModal.stories.tsx b/packages/ui-tests/stories/catalog/PropertiesModal.stories.tsx index 29e27f01f..de36a3e2d 100644 --- a/packages/ui-tests/stories/catalog/PropertiesModal.stories.tsx +++ b/packages/ui-tests/stories/catalog/PropertiesModal.stories.tsx @@ -1,4 +1,11 @@ import { ITile, PropertiesModal } from '@kaoto/kaoto'; +import { + CatalogLoaderProvider, + CatalogSchemaLoader, + CatalogTilesProvider, + RuntimeProvider, + SchemasLoaderProvider, +} from '@kaoto/kaoto/testing'; import { Meta, StoryFn } from '@storybook/react'; import { useState } from 'react'; import aggregate from '../../cypress/fixtures/aggregate.json'; @@ -6,9 +13,22 @@ import cronSource from '../../cypress/fixtures/cronSource.json'; import activeMq from '../../cypress/fixtures/activeMq.json'; import box from '../../cypress/fixtures/box.json'; +const ContextDecorator = (Story: StoryFn) => ( + + + + + + + + + +); + export default { title: 'Components/PropertiesModal', component: PropertiesModal, + decorators: [ContextDecorator], } as Meta; const Template: StoryFn = (args) => { diff --git a/packages/ui/src/camel-utils/camel-to-tabs.adapter.test.ts b/packages/ui/src/camel-utils/camel-to-tabs.adapter.test.ts index 914294710..1ffc1fcfa 100644 --- a/packages/ui/src/camel-utils/camel-to-tabs.adapter.test.ts +++ b/packages/ui/src/camel-utils/camel-to-tabs.adapter.test.ts @@ -143,6 +143,11 @@ describe('camelComponentToTab', () => { expect(tab).toHaveLength(2); }); + + it('should return empty tab when component definition is undefined', () => { + const tab = transformCamelComponentIntoTab(undefined); + expect(tab).toHaveLength(0); + }); }); describe('camelProcessorToTab', () => { @@ -187,6 +192,11 @@ describe('camelProcessorToTab', () => { const tab = transformCamelProcessorComponentIntoTab(processDef); expect(tab).toHaveLength(0); }); + + it('should return empty tab when processor definition is undefined', () => { + const tab = transformCamelProcessorComponentIntoTab(undefined); + expect(tab).toHaveLength(0); + }); }); describe('kameletToTab', () => { @@ -236,4 +246,9 @@ describe('kameletToTab', () => { const tab = transformKameletComponentIntoTab(kameletDef); expect(tab).toHaveLength(0); }); + + it('should return empty tab when kamelet definition is undefined', () => { + const tab = transformKameletComponentIntoTab(undefined); + expect(tab).toHaveLength(0); + }); }); diff --git a/packages/ui/src/camel-utils/camel-to-tabs.adapter.ts b/packages/ui/src/camel-utils/camel-to-tabs.adapter.ts index 7ee832ba4..2a8dd3ecd 100644 --- a/packages/ui/src/camel-utils/camel-to-tabs.adapter.ts +++ b/packages/ui/src/camel-utils/camel-to-tabs.adapter.ts @@ -1,5 +1,6 @@ import { IPropertiesTab, IPropertiesTable } from '../components/PropertiesModal'; import { ICamelComponentDefinition, ICamelProcessorDefinition, IKameletDefinition } from '../models'; +import { isDefined } from '../utils'; import { IPropertiesTableFilter, camelComponentApisToTable, @@ -46,9 +47,12 @@ const transformPropertiesIntoTab = ( }; }; -export const transformCamelComponentIntoTab = (componentDef: ICamelComponentDefinition): IPropertiesTab[] => { - const finalTabs: IPropertiesTab[] = []; +export const transformCamelComponentIntoTab = ( + componentDef: ICamelComponentDefinition | undefined, +): IPropertiesTab[] => { + if (!isDefined(componentDef)) return []; + const finalTabs: IPropertiesTab[] = []; let tab = transformPropertiesIntoTab( [ { @@ -116,7 +120,11 @@ export const transformCamelComponentIntoTab = (componentDef: ICamelComponentDefi return finalTabs; }; -export const transformCamelProcessorComponentIntoTab = (processorDef: ICamelProcessorDefinition): IPropertiesTab[] => { +export const transformCamelProcessorComponentIntoTab = ( + processorDef: ICamelProcessorDefinition | undefined, +): IPropertiesTab[] => { + if (!isDefined(processorDef)) return []; + const finalTabs: IPropertiesTab[] = []; const tab = transformPropertiesIntoTab( [ @@ -131,7 +139,9 @@ export const transformCamelProcessorComponentIntoTab = (processorDef: ICamelProc return finalTabs; }; -export const transformKameletComponentIntoTab = (kameletDef: IKameletDefinition): IPropertiesTab[] => { +export const transformKameletComponentIntoTab = (kameletDef: IKameletDefinition | undefined): IPropertiesTab[] => { + if (!isDefined(kameletDef)) return []; + const finalTabs: IPropertiesTab[] = []; const tab = transformPropertiesIntoTab( [ diff --git a/packages/ui/src/camel-utils/camel-to-tile.adapter.ts b/packages/ui/src/camel-utils/camel-to-tile.adapter.ts index 13f5b1dec..235f7e13a 100644 --- a/packages/ui/src/camel-utils/camel-to-tile.adapter.ts +++ b/packages/ui/src/camel-utils/camel-to-tile.adapter.ts @@ -30,7 +30,6 @@ export const camelComponentToTile = (componentDef: ICamelComponentDefinition): I tags, provider, version, - rawObject: componentDef, }; }; @@ -45,7 +44,6 @@ export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): I description, headerTags: ['Processor'], tags, - rawObject: processorDef, }; }; @@ -73,6 +71,5 @@ export const kameletToTile = (kameletDef: IKameletDefinition): ITile => { headerTags, tags, version, - rawObject: kameletDef, }; }; diff --git a/packages/ui/src/components/Catalog/BaseCatalog.test.tsx b/packages/ui/src/components/Catalog/BaseCatalog.test.tsx new file mode 100644 index 000000000..39ff3c5e7 --- /dev/null +++ b/packages/ui/src/components/Catalog/BaseCatalog.test.tsx @@ -0,0 +1,108 @@ +import { act, fireEvent, render, screen } from '@testing-library/react'; +import { CatalogLayout } from './Catalog.models'; +import { BaseCatalog } from './BaseCatalog'; +import { longTileList } from '../../stubs'; + +describe('BaseCatalog', () => { + it('renders correctly with Gallery Layout', () => { + const { container } = render( + , + ); + + expect(container).toMatchSnapshot(); + }); + + it('renders correctly with List Layout', () => { + const { container } = render( + , + ); + + expect(container).toMatchSnapshot(); + }); + + it('Render BaseCatalog with 60 tiles, 2 pages with 50 tiles on the 1st page and 10 tiles on the 2nd page', async () => { + render( + , + ); + + expect(screen.getByRole('spinbutton', { name: 'Current page' })).toHaveValue(1); + + expect( + screen.getAllByRole('listitem').filter((li) => li.classList.contains('catalog-data-list-item')), + ).toHaveLength(50); + + const nextPageButton = screen.getByRole('button', { name: 'Go to next page' }); + act(() => { + fireEvent.click(nextPageButton); + }); + expect(screen.getByRole('spinbutton', { name: 'Current page' })).toHaveValue(2); + + expect( + screen.getAllByRole('listitem').filter((li) => li.classList.contains('catalog-data-list-item')), + ).toHaveLength(10); + + expect(screen.getByRole('button', { name: 'Go to next page' })).toBeDisabled(); + }); + + it('Render BaseCatalog with 60 tiles, change per page setting to 20', async () => { + render( + , + ); + + expect(screen.getByRole('spinbutton', { name: 'Current page' })).toHaveValue(1); + + const pageSetting = screen.getAllByRole('button').filter((btn) => btn.id === 'catalog-pagination-top-toggle'); + act(() => { + fireEvent.click(pageSetting[0]); + }); + + act(() => { + fireEvent.click(screen.getByText('20 per page')); + }); + + expect( + screen.getAllByRole('listitem').filter((li) => li.classList.contains('catalog-data-list-item')), + ).toHaveLength(20); + + const nextPageButton = screen.getByRole('button', { name: 'Go to next page' }); + act(() => { + fireEvent.click(nextPageButton); + }); + expect(screen.getByRole('spinbutton', { name: 'Current page' })).toHaveValue(2); + + expect( + screen.getAllByRole('listitem').filter((li) => li.classList.contains('catalog-data-list-item')), + ).toHaveLength(20); + + act(() => { + fireEvent.click(nextPageButton); + }); + expect(screen.getByRole('spinbutton', { name: 'Current page' })).toHaveValue(3); + + expect( + screen.getAllByRole('listitem').filter((li) => li.classList.contains('catalog-data-list-item')), + ).toHaveLength(20); + + expect(screen.getByRole('button', { name: 'Go to next page' })).toBeDisabled(); + }); +}); diff --git a/packages/ui/src/components/Catalog/BaseCatalog.tsx b/packages/ui/src/components/Catalog/BaseCatalog.tsx index 0eef5c255..1a702caaf 100644 --- a/packages/ui/src/components/Catalog/BaseCatalog.tsx +++ b/packages/ui/src/components/Catalog/BaseCatalog.tsx @@ -1,5 +1,5 @@ -import { DataList, Gallery, Title } from '@patternfly/react-core'; -import { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import { DataList, Gallery, Pagination } from '@patternfly/react-core'; +import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'; import './BaseCatalog.scss'; import { CatalogLayout, ITile } from './Catalog.models'; import { CatalogDataListItem } from './DataListItem'; @@ -15,6 +15,10 @@ interface BaseCatalogProps { export const BaseCatalog: FunctionComponent = (props) => { const catalogBodyRef = useRef(null); + const itemCount = props.tiles?.length; + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(50); + const onTileClick = useCallback( (tile: ITile) => { props.onTileClick?.(tile); @@ -22,6 +26,17 @@ export const BaseCatalog: FunctionComponent = (props) => { [props], ); + const startIndex = (page - 1) * perPage < 0 ? 0 : (page - 1) * perPage; + const endIndex = page * perPage; + useEffect(() => { + // Handling the scenario where the item count is less the page selected. + if (startIndex + 1 > itemCount) { + setPage(Math.ceil(itemCount / perPage)); + } else if (page === 0 && itemCount > 0) setPage(1); + + catalogBodyRef.current!.scrollTop = 0; + }, [props.tiles]); + const onSelectDataListItem = useCallback( (_event: React.MouseEvent | React.KeyboardEvent, id: string) => { const tile = props.tiles.find((tile) => tile.name + '-' + tile.type === id); @@ -30,26 +45,43 @@ export const BaseCatalog: FunctionComponent = (props) => { [onTileClick, props.tiles], ); - useEffect(() => { - catalogBodyRef.current!.scrollTop = 0; - }, [props.tiles]); + const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { + setPage(newPage); + }; + + const onPerPageSelect = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPerPage: number, + newPage: number, + ) => { + setPerPage(newPerPage); + setPage(newPage); + }; + + const paginatedCards = props.tiles?.slice(startIndex, endIndex); return ( <> - - Showing {props.tiles?.length} elements - +
{props.catalogLayout == CatalogLayout.List && ( - {props.tiles?.map((tile) => ( + {paginatedCards.map((tile) => ( ))} )} {props.catalogLayout == CatalogLayout.Gallery && ( - {props.tiles?.map((tile) => ( + {paginatedCards.map((tile) => ( ))} diff --git a/packages/ui/src/components/Catalog/Catalog.models.ts b/packages/ui/src/components/Catalog/Catalog.models.ts index 32a1ee56e..1d6325c97 100644 --- a/packages/ui/src/components/Catalog/Catalog.models.ts +++ b/packages/ui/src/components/Catalog/Catalog.models.ts @@ -7,8 +7,6 @@ export interface ITile { tags: string[]; version?: string; provider?: string; - /** @deprecated Please relay on name property instead */ - rawObject?: unknown; } export type TileFilter = (item: ITile) => boolean; diff --git a/packages/ui/src/components/Catalog/DataListItem.test.tsx b/packages/ui/src/components/Catalog/DataListItem.test.tsx index bc0d71afd..e6d7a6ea6 100644 --- a/packages/ui/src/components/Catalog/DataListItem.test.tsx +++ b/packages/ui/src/components/Catalog/DataListItem.test.tsx @@ -11,7 +11,6 @@ describe('DataListItem', () => { tags: ['tag1', 'tag2'], headerTags: ['header-tag1', 'header-tag2'], version: '1.0', - rawObject: {}, }; it('renders correctly', () => { diff --git a/packages/ui/src/components/Catalog/Tile.test.tsx b/packages/ui/src/components/Catalog/Tile.test.tsx index 29cd446dd..110ae57b8 100644 --- a/packages/ui/src/components/Catalog/Tile.test.tsx +++ b/packages/ui/src/components/Catalog/Tile.test.tsx @@ -10,7 +10,6 @@ describe('Tile', () => { description: 'tile-description', tags: ['tag1', 'tag2'], headerTags: ['header-tag1', 'header-tag2'], - rawObject: {}, }; it('renders correctly', () => { diff --git a/packages/ui/src/components/Catalog/__snapshots__/BaseCatalog.test.tsx.snap b/packages/ui/src/components/Catalog/__snapshots__/BaseCatalog.test.tsx.snap new file mode 100644 index 000000000..5bb0f4125 --- /dev/null +++ b/packages/ui/src/components/Catalog/__snapshots__/BaseCatalog.test.tsx.snap @@ -0,0 +1,11115 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BaseCatalog renders correctly with Gallery Layout 1`] = ` +
+
+
+ + 1 + - + 50 + + + of + + + 60 + + +
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + ActiveMQ 5.x + + + ( + activemq + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + ActiveMQ 6.x + + + ( + activemq6 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + AMQP + + + ( + amqp + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + ArangoDb + + + ( + arangodb + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + AS2 + + + ( + as2 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + CXF + + + ( + cxf + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + Exec + + + ( + exec + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + to D + + + ( + toD + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + doTry + + + ( + doTry + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + Validate + + + ( + Validate + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + when + + + ( + when + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + onException + + + ( + onException + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + wireTap + + + ( + wireTap + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + intercept + + + ( + intercept + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + saga + + + ( + saga + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + script + + + ( + script + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + sort + + + ( + sort + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + Kamelet Sink + + + ( + sink + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + Kafka Source + + + ( + kafka-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + http-source + + + ( + http-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + ssh-source + + + ( + ssh-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + jira-source + + + ( + jira-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + coffee-source + + + ( + coffee-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + mariadbsource + + + ( + mariadb-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + dropbox-source + + + ( + dropbox-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + cassandrasource + + + ( + cassandra-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + aws-redshift-source + + + ( + aws-redshift-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + redis-source + + + ( + redis-source + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + pulsar-sink + + + ( + pulsar-sink + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + dropbox-source + + + ( + dropbox-sink + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + ActiveMQ 5.x + + + ( + activemq-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + ActiveMQ 6.x + + + ( + activemq6-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + AMQP + + + ( + amqp-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + ArangoDb + + + ( + arangodb-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + AS2 + + + ( + as2-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + CXF + + + ( + cxf-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ component icon +
+
+
+ + Exec + + + ( + exec-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + to D + + + ( + toD-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + doTry + + + ( + doTry-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + Validate + + + ( + Validate-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + when + + + ( + when-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + onException + + + ( + onException-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + wireTap + + + ( + wireTap-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + intercept + + + ( + intercept-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + saga + + + ( + saga-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + script + + + ( + script-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ processor icon +
+
+
+ + sort + + + ( + sort-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + Kamelet Sink + + + ( + sink-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + Kafka Source + + + ( + kafka-source-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ kamelet icon +
+
+
+ + http-source + + + ( + http-source-1 + ) + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+`; + +exports[`BaseCatalog renders correctly with List Layout 1`] = ` +
+
+
+ + 1 + - + 50 + + + of + + + 60 + + +
+
+ +
+ +
+
+
    +
  • +
    +
    +
    +
    +
    +
    + component icon + + ActiveMQ 5.x + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + ActiveMQ 6.x + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + AMQP + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + ArangoDb + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + AS2 + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + CXF + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + Exec + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + to D + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + doTry + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + Validate + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + when + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + onException + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + wireTap + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + intercept + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + saga + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + script + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + sort + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + Kamelet Sink + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + Kafka Source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + http-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + ssh-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + jira-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + coffee-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + mariadbsource + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + dropbox-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + cassandrasource + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + aws-redshift-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + redis-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + pulsar-sink + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + dropbox-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + ActiveMQ 5.x + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + ActiveMQ 6.x + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + AMQP + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + ArangoDb + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + AS2 + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + CXF + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + component icon + + Exec + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + to D + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + doTry + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + Validate + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + when + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + onException + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + wireTap + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + intercept + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + saga + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + script + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + processor icon + + sort + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + Kamelet Sink + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + Kafka Source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + kamelet icon + + http-source + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • +
+
+
+`; diff --git a/packages/ui/src/components/IconResolver/IconResolver.test.tsx b/packages/ui/src/components/IconResolver/IconResolver.test.tsx index 5ae1446e1..c389e44db 100644 --- a/packages/ui/src/components/IconResolver/IconResolver.test.tsx +++ b/packages/ui/src/components/IconResolver/IconResolver.test.tsx @@ -10,7 +10,6 @@ describe('IconResolver', () => { description: 'description', name: 'name', tags: [], - rawObject: {}, }; it('should render default icon', () => { diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx index 5f2bb4a71..7b4ddd3ff 100644 --- a/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx +++ b/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx @@ -1,504 +1,309 @@ +import catalogLibrary from '@kaoto/camel-catalog/index.json'; +import { CatalogLibrary } from '@kaoto/camel-catalog/types'; + import { screen } from '@testing-library/dom'; import { render } from '@testing-library/react'; -import { CatalogKind } from '../../models'; +import { + CamelCatalogService, + CatalogKind, + ICamelComponentDefinition, + ICamelProcessorDefinition, + IKameletDefinition, +} from '../../models'; import { ITile } from '../Catalog'; import { PropertiesModal } from './PropertiesModal'; +import { getFirstCatalogMap } from '../../stubs/test-load-catalog'; -describe('Component tile', () => { - const tile: ITile = { - type: CatalogKind.Component, - name: 'atom', - title: 'Atom', - description: 'Poll Atom RSS feeds.', - headerTags: ['Stable'], - tags: ['document', '4.0.0'], - rawObject: { - component: { - kind: CatalogKind.Component, - name: 'atom', - title: 'Atom', - description: 'Poll Atom RSS feeds.', - }, - componentProperties: { - bridgeErrorHandler: { - kind: 'property', - displayName: 'Bridge Error Handler', - group: 'common', - required: true, - javaType: 'java.lang.String', - description: 'Allows for bridging the consumer to the Camel', - }, - }, - properties: { - name: { - kind: 'path', - group: 'common', - required: true, - autowired: false, - javaType: 'java.lang.String', - description: 'Name of component', - }, - hostname: { - kind: 'parameter', - group: 'advanced', - required: false, - autowired: true, - javaType: 'java.lang.String', - defaultValue: 'http', - description: 'The hostname of the asterisk server', - }, - }, - headers: { - CamelAsteriskEventName: { - kind: 'header', - displayName: '', - group: 'producer', - description: 'The event name header', - javaType: 'org.apache.camel.spi.ExceptionHandler', - autowired: true, - enum: ['first', 'second'], - }, - }, - apis: { - client: { - consumerOnly: true, - producerOnly: true, - description: 'Client api', - methods: { - send: { - description: 'Send ediMessage to trading partner', - signatures: [''], - }, - }, - }, - client2: { - consumerOnly: false, - producerOnly: true, - description: 'Client2 api', - methods: { - send: { - description: 'Client2 send', - signatures: [''], - }, - }, - }, - }, - apiProperties: { - client: { - methods: { - send: { - properties: { - as2From: { - index: 0, - kind: 'parameter', - displayName: 'As2 From', - group: 'producer', - required: true, - type: 'String', - javaType: 'java.lang.String', - description: 'AS2 name of sender', - }, - }, - }, - }, - }, - }, - }, - }; - - it('renders component properties table correctly', async () => { - // modal uses React portals so baseElement needs to be used here - const { baseElement } = render(); - // info - expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Atom'); - expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Poll Atom RSS feeds.'); - // tab 0 - expect(screen.getByTestId('tab-0')).toHaveTextContent('Component Options (1)'); - // headers - expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description'); - expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default'); - expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type'); - - // rows - expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('bridgeErrorHandler (common)'); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent( - 'Required Allows for bridging the consumer to the Camel', - ); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-default')).toHaveTextContent(''); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-type')).toHaveTextContent('String'); - - //tab 1 - expect(screen.getByTestId('tab-1')).toHaveTextContent('Endpoint Options (2)'); - //table1 - screen.getByTestId('tab-1').click(); - await new Promise(process.nextTick); - expect(screen.getByTestId('tab-1-table-0-properties-modal-table-caption')).toHaveTextContent('path parameters (1)'); - //headers - expect(screen.getByTestId('tab-1-table-0-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-1-table-0-header-description')).toHaveTextContent('description'); - expect(screen.getByTestId('tab-1-table-0-header-default')).toHaveTextContent('default'); - expect(screen.getByTestId('tab-1-table-0-header-type')).toHaveTextContent('type'); - //rows - expect(screen.getByTestId('tab-1-table-0-row-0-cell-name')).toHaveTextContent('name (common)'); - expect(screen.getByTestId('tab-1-table-0-row-0-cell-description')).toHaveTextContent('Required Name of component'); - expect(screen.getByTestId('tab-1-table-0-row-0-cell-default')).toHaveTextContent(''); - expect(screen.getByTestId('tab-1-table-0-row-0-cell-type')).toHaveTextContent('String'); +describe('PropertiesModal', () => { + let componentCatalogMap: Record; + let kameletCatalogMap: Record; + let modelCatalogMap: Record; - //table2 - expect(screen.getByTestId('tab-1-table-1-properties-modal-table-caption')).toHaveTextContent( - 'query parameters (1)', - ); - //headers - expect(screen.getByTestId('tab-1-table-1-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-1-table-1-header-description')).toHaveTextContent('description'); - expect(screen.getByTestId('tab-1-table-1-header-default')).toHaveTextContent('default'); - expect(screen.getByTestId('tab-1-table-1-header-type')).toHaveTextContent('type'); - //rows - expect(screen.getByTestId('tab-1-table-1-row-0-cell-name')).toHaveTextContent('hostname (advanced)'); - expect(screen.getByTestId('tab-1-table-1-row-0-cell-description')).toHaveTextContent( - 'Autowired The hostname of the asterisk server', - ); - expect(screen.getByTestId('tab-1-table-1-row-0-cell-default')).toHaveTextContent('http'); - expect(screen.getByTestId('tab-1-table-1-row-0-cell-type')).toHaveTextContent('String'); + beforeAll(async () => { + const catalogsMap = await getFirstCatalogMap(catalogLibrary as CatalogLibrary); + componentCatalogMap = catalogsMap.componentCatalogMap; + componentCatalogMap.asterisk.properties = {}; + componentCatalogMap.asterisk.headers = {}; + componentCatalogMap.asterisk.componentProperties = {}; - //tab 2 - expect(screen.getByTestId('tab-2')).toHaveTextContent('Message Headers (1)'); - //headers - screen.getByTestId('tab-2').click(); - await new Promise(process.nextTick); - expect(screen.getByTestId('tab-2-table-0-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-2-table-0-header-description')).toHaveTextContent('description'); - expect(screen.getByTestId('tab-2-table-0-header-default')).toHaveTextContent('default'); - expect(screen.getByTestId('tab-2-table-0-header-type')).toHaveTextContent('type'); - //rows - expect(screen.getByTestId('tab-2-table-0-row-0-cell-name')).toHaveTextContent('CamelAsteriskEventName (producer)'); - expect(screen.getByTestId('tab-2-table-0-row-0-cell-description')).toHaveTextContent( - 'Autowired The event name header', - ); - expect(screen.getByTestId('tab-2-table-0-row-0-cell-description-enum-0')).toHaveTextContent('first'); - expect(screen.getByTestId('tab-2-table-0-row-0-cell-description-enum-1')).toHaveTextContent('second'); + kameletCatalogMap = catalogsMap.kameletsCatalogMap; + kameletCatalogMap['nats-sink'].spec.definition.properties = {}; - expect(screen.getByTestId('tab-2-table-0-row-0-cell-type')).toHaveTextContent('ExceptionHandler'); - expect(screen.getByTestId('tab-2-table-0-row-0-cell-default')).toHaveTextContent(''); + modelCatalogMap = catalogsMap.modelCatalogMap; + modelCatalogMap.asn1.properties = {}; - //tab 3 - expect(screen.getByTestId('tab-3')).toHaveTextContent('APIs (2)'); - //headers - screen.getByTestId('tab-3').click(); - await new Promise(process.nextTick); - expect(screen.getByTestId('tab-3-table-0-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-3-table-0-header-description')).toHaveTextContent('description'); - expect(screen.getByTestId('tab-3-table-0-header-type')).toHaveTextContent('type'); - // rows - expect(screen.getByTestId('tab-3-table-0-row-0-cell-apiKind')).toHaveTextContent('Api'); - expect(screen.getByTestId('tab-3-table-0-row-0-cell-name')).toHaveTextContent('client'); - expect(screen.getByTestId('tab-3-table-0-row-0-cell-description')).toHaveTextContent('Client api'); - expect(screen.getByTestId('tab-3-table-0-row-0-cell-type')).toHaveTextContent('Both'); - - expect(screen.getByTestId('tab-3-table-0-row-1-cell-apiKind')).toHaveTextContent('Method'); - expect(screen.getByTestId('tab-3-table-0-row-1-cell-name')).toHaveTextContent('send'); - expect(screen.getByTestId('tab-3-table-0-row-1-cell-description')).toHaveTextContent( - 'Send ediMessage to trading partner', - ); - expect(screen.getByTestId('tab-3-table-0-row-1-cell-type')).toHaveTextContent(''); + CamelCatalogService.setCatalogKey(CatalogKind.Component, componentCatalogMap); + CamelCatalogService.setCatalogKey(CatalogKind.Kamelet, kameletCatalogMap); + CamelCatalogService.setCatalogKey(CatalogKind.Processor, modelCatalogMap); + CamelCatalogService.setCatalogKey(CatalogKind.Pattern, catalogsMap.patternCatalogMap); + CamelCatalogService.setCatalogKey(CatalogKind.Language, catalogsMap.languageCatalog); + CamelCatalogService.setCatalogKey(CatalogKind.Dataformat, catalogsMap.dataformatCatalog); + CamelCatalogService.setCatalogKey(CatalogKind.Loadbalancer, catalogsMap.loadbalancerCatalog); + CamelCatalogService.setCatalogKey(CatalogKind.Entity, catalogsMap.entitiesCatalog); + }); - expect(screen.getByTestId('tab-3-table-0-row-2-cell-apiKind')).toHaveTextContent('Param'); - expect(screen.getByTestId('tab-3-table-0-row-2-cell-name')).toHaveTextContent('as2From'); - expect(screen.getByTestId('tab-3-table-0-row-2-cell-description')).toHaveTextContent('Required AS2 name of sender'); - expect(screen.getByTestId('tab-3-table-0-row-2-cell-type')).toHaveTextContent('String'); + describe('Component tile', () => { + const tile: ITile = { + type: CatalogKind.Component, + name: 'atom', + title: 'Atom', + description: 'Poll Atom RSS feeds.', + headerTags: ['Stable'], + tags: ['document'], + }; - expect(screen.getByTestId('tab-3-table-0-row-3-cell-apiKind')).toHaveTextContent('Api'); - expect(screen.getByTestId('tab-3-table-0-row-3-cell-name')).toHaveTextContent('client2'); - expect(screen.getByTestId('tab-3-table-0-row-3-cell-description')).toHaveTextContent('Client2 api'); - expect(screen.getByTestId('tab-3-table-0-row-3-cell-type')).toHaveTextContent('Producer'); - }); + it('renders component properties table correctly', async () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Atom'); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Poll Atom RSS feeds.'); + // tab 0 + expect(screen.getByTestId('tab-0')).toHaveTextContent('Component Options (2)'); + // headers + expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name'); + expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description'); + expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default'); + expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type'); - it('switchs between tabs and apis', async () => { - // modal uses React portals so baseElement needs to be used here - render(); - // switch to API tab - expect(screen.getByTestId('tab-0-table-0-properties-modal-table-caption')).toBeVisible(); - expect(screen.getByTestId('tab-3')).toHaveAttribute('aria-selected', 'false'); - screen.getByTestId('tab-3').click(); - await new Promise(process.nextTick); - expect(screen.getByTestId('tab-3-table-0-properties-modal-table-caption')).toBeVisible(); - expect(screen.getByTestId('tab-3')).toHaveAttribute('aria-selected', 'true'); + // rows + expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('bridgeErrorHandler (consumer)'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent( + 'Allows for bridging the consumer to the Camel routing Error Handler, which mean any exceptions (if possible) occurred while the Camel consumer is trying to pickup incoming messages, or the likes, will now be processed as a message and handled by the routing Error Handler. Important: This is only possible if the 3rd party component allows Camel to be alerted if an exception was thrown. Some components handle this internally only, and therefore bridgeErrorHandler is not possible. In other situations we may improve the Camel component to hook into the 3rd party component and make this possible for future releases. By default the consumer will use the org.apache.camel.spi.ExceptionHandler to deal with exceptions, that will be logged at WARN or ERROR level and ignored.', + ); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-default')).toHaveTextContent('false'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-type')).toHaveTextContent('boolean'); - // expand api - expect(screen.getByLabelText('Expand row 0')).toHaveAttribute('aria-expanded', 'false'); - screen.getByLabelText('Expand row 0').click(); - await new Promise(process.nextTick); - expect(screen.getByLabelText('Collapse row 0')).toHaveAttribute('aria-expanded', 'true'); + //tab 1 + expect(screen.getByTestId('tab-1')).toHaveTextContent('Endpoint Options (24)'); + //table1 + screen.getByTestId('tab-1').click(); + await new Promise(process.nextTick); + expect(screen.getByTestId('tab-1-table-0-properties-modal-table-caption')).toHaveTextContent( + 'path parameters (1)', + ); + //headers + expect(screen.getByTestId('tab-1-table-0-header-name')).toHaveTextContent('name'); + expect(screen.getByTestId('tab-1-table-0-header-description')).toHaveTextContent('description'); + expect(screen.getByTestId('tab-1-table-0-header-default')).toHaveTextContent('default'); + expect(screen.getByTestId('tab-1-table-0-header-type')).toHaveTextContent('type'); + //rows + expect(screen.getByTestId('tab-1-table-0-row-0-cell-name')).toHaveTextContent('feedUri (consumer)'); + expect(screen.getByTestId('tab-1-table-0-row-0-cell-description')).toHaveTextContent( + 'Required The URI to the feed to poll.', + ); + expect(screen.getByTestId('tab-1-table-0-row-0-cell-default')).toHaveTextContent(''); + expect(screen.getByTestId('tab-1-table-0-row-0-cell-type')).toHaveTextContent('String'); - // expand method - expect(screen.getByLabelText('Expand row 1')).toHaveAttribute('aria-expanded', 'false'); - screen.getByLabelText('Expand row 1').click(); - await new Promise(process.nextTick); - expect(screen.getByLabelText('Collapse row 1')).toHaveAttribute('aria-expanded', 'true'); + //table2 + expect(screen.getByTestId('tab-1-table-1-properties-modal-table-caption')).toHaveTextContent( + 'query parameters (23)', + ); + //headers + expect(screen.getByTestId('tab-1-table-1-header-name')).toHaveTextContent('name'); + expect(screen.getByTestId('tab-1-table-1-header-description')).toHaveTextContent('description'); + expect(screen.getByTestId('tab-1-table-1-header-default')).toHaveTextContent('default'); + expect(screen.getByTestId('tab-1-table-1-header-type')).toHaveTextContent('type'); + //rows + expect(screen.getByTestId('tab-1-table-1-row-0-cell-name')).toHaveTextContent( + 'sendEmptyMessageWhenIdle (consumer)', + ); + expect(screen.getByTestId('tab-1-table-1-row-0-cell-description')).toHaveTextContent( + 'If the polling consumer did not poll any files, you can enable this option to send an empty message (no body) instead.', + ); + expect(screen.getByTestId('tab-1-table-1-row-0-cell-default')).toHaveTextContent('false'); + expect(screen.getByTestId('tab-1-table-1-row-0-cell-type')).toHaveTextContent('boolean'); - // close api, method is invisible but should still be expanded - screen.getByLabelText('Collapse row 0').click(); - await new Promise(process.nextTick); - expect(screen.getByLabelText('Expand row 0')).toHaveAttribute('aria-expanded', 'false'); - expect(screen.getByLabelText('Collapse row 1')).not.toBeVisible(); - expect(screen.getByLabelText('Collapse row 1')).toHaveAttribute('aria-expanded', 'true'); - screen.getByLabelText('Expand row 0').click(); - await new Promise(process.nextTick); - expect(screen.getByLabelText('Collapse row 1')).toBeVisible(); - expect(screen.getByLabelText('Collapse row 1')).toHaveAttribute('aria-expanded', 'true'); + //tab 2 + expect(screen.getByTestId('tab-2')).toHaveTextContent('Message Headers (1)'); + //headers + screen.getByTestId('tab-2').click(); + await new Promise(process.nextTick); + expect(screen.getByTestId('tab-2-table-0-header-name')).toHaveTextContent('name'); + expect(screen.getByTestId('tab-2-table-0-header-description')).toHaveTextContent('description'); + expect(screen.getByTestId('tab-2-table-0-header-default')).toHaveTextContent('default'); + expect(screen.getByTestId('tab-2-table-0-header-type')).toHaveTextContent('type'); + //rows + expect(screen.getByTestId('tab-2-table-0-row-0-cell-name')).toHaveTextContent('CamelAtomFeed (consumer)'); + expect(screen.getByTestId('tab-2-table-0-row-0-cell-description')).toHaveTextContent( + 'When consuming the List object is set to this header.', + ); + expect(screen.getByTestId('tab-2-table-0-row-0-cell-type')).toHaveTextContent('List'); + expect(screen.getByTestId('tab-2-table-0-row-0-cell-default')).toHaveTextContent(''); + }); }); -}); -describe('Component tile with empty properties and no headers/apis', () => { - const tile: ITile = { - type: CatalogKind.Component, - name: 'atom', - title: 'Atom', - description: 'Poll Atom RSS feeds.', - headerTags: ['Stable'], - tags: ['document', '4.0.0'], - rawObject: { - component: { - kind: CatalogKind.Component, - name: 'atom', - title: 'Atom', - description: 'Poll Atom RSS feeds.', - }, - properties: {}, - componentProperties: {}, - }, - }; + describe('Component tile with empty properties and no headers/apis', () => { + const tile: ITile = { + type: CatalogKind.Component, + name: 'asterisk', + title: 'Asterisk', + description: 'Interact with Asterisk PBX Server (VoIP).', + headerTags: ['Stable'], + tags: ['document', '4.0.0'], + }; - it('renders property modal correctly', () => { - // modal uses React portals so baseElement needs to be used here - const { baseElement } = render(); - // info - expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Atom'); - expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Poll Atom RSS feeds.'); - expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for atom'); + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Asterisk'); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( + 'Interact with Asterisk PBX Server (VoIP).', + ); + expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for asterisk'); + }); }); -}); -describe('Processor tile', () => { - const tile: ITile = { - type: CatalogKind.Processor, - name: 'apiKey', - title: 'Api Key', - description: 'Rest security basic auth definition', - headerTags: ['Stable'], - tags: ['document', '4.0.0'], - rawObject: { - model: { - kind: 'model', - name: 'apiKey', - title: 'Api Key', - description: 'Rest security basic auth definition', - }, - properties: { - instanceClassName: { - index: 0, - displayName: 'Instance Class Name', - kind: 'attribute', - required: true, - javaType: 'java.lang.String', - description: 'Class name to use for marshal and unmarshalling', - type: 'string', - deprecated: false, - autowired: false, - enum: ['first', 'second'], - secret: false, - }, - }, - }, - }; + describe('Processor tile', () => { + const tile: ITile = { + type: CatalogKind.Processor, + name: 'apiKey', + title: 'Api Key', + description: 'Rest security basic auth definition', + headerTags: ['Stable'], + tags: ['document'], + }; - it('renders property modal correctly', () => { - // modal uses React portals so baseElement needs to be used here - const { baseElement } = render(); - // info - expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Api Key'); - expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Rest security basic auth definition'); - expect(screen.getByTestId('tab-0')).toHaveTextContent('Options (1)'); - // headers - expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default'); - expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type'); - expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description'); - // row - expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('instanceClassName'); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-default')).toHaveTextContent(''); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-type')).toHaveTextContent('String'); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent( - 'Required Class name to use for marshal and unmarshalling', - ); + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Api Key'); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( + 'Rest security basic auth definition', + ); + expect(screen.getByTestId('tab-0')).toHaveTextContent('Options (6)'); + // headers + expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name'); + expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default'); + expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type'); + expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description'); + // row + expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('description'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-default')).toHaveTextContent(''); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-type')).toHaveTextContent('String'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent( + 'A short description for security scheme.', + ); + }); }); -}); -describe('Processor tile with empty properties', () => { - const tile: ITile = { - type: CatalogKind.Processor, - name: 'apiKey', - title: 'Api Key', - description: 'Rest security basic auth definition', - headerTags: ['Stable'], - tags: ['document', '4.0.0'], - rawObject: { - model: { - kind: 'model', - name: 'apiKey', - title: 'Api Key', - description: 'Rest security basic auth definition', - }, - properties: {}, - }, - }; + describe('Processor tile with empty properties', () => { + const tile: ITile = { + type: CatalogKind.Processor, + name: 'asn1', + title: 'ASN.1 File', + description: 'Encode and decode data structures using Abstract Syntax Notation One (ASN.1).', + headerTags: ['Stable'], + tags: ['document', '4.0.0'], + }; - it('renders property modal correctly', () => { - // modal uses React portals so baseElement needs to be used here - const { baseElement } = render(); - // info - expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent('Api Key'); - expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Rest security basic auth definition'); - expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for apiKey'); + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( + 'ASN.1 File', + ); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( + 'Encode and decode data structures using Abstract Syntax Notation One (ASN.1).', + ); + expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for asn1'); + }); }); -}); -describe('Kamelet tile', () => { - const tile: ITile = { - type: CatalogKind.Kamelet, - name: 'aws-ddb-streams-source', - title: 'AWS DynamoDB Streams Source', - description: 'Receive events from Amazon DynamoDB Streams.', - headerTags: ['Stable'], - tags: ['source', '4.0.0-RC1'], - rawObject: { - apiVersion: 'camel.apache.org/v1alpha1', - kind: 'Kamelet', - metadata: { - name: 'aws-ddb-streams-source', - }, - spec: { - definition: { - title: 'AWS DynamoDB Streams Source', - description: 'Receive events', - required: ['table'], - type: 'object', - properties: { - table: { - title: 'Table with space', - description: 'The name of the DynamoDB table.', - type: 'string', - }, - key: { - title: 'Key', - description: 'New key', - type: 'string', - default: 'amazonaws.com', - example: 'whatever', - }, - }, - }, - }, - }, - }; + describe('Kamelet tile', () => { + const tile: ITile = { + type: CatalogKind.Kamelet, + name: 'aws-ddb-streams-source', + title: 'AWS DynamoDB Streams Source', + description: 'Receive events from Amazon DynamoDB Streams.', + headerTags: ['Stable'], + tags: ['source'], + }; - it('renders property modal correctly', () => { - // modal uses React portals so baseElement needs to be used here - const { baseElement } = render(); - // info - expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( - 'AWS DynamoDB Streams Source', - ); - expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Receive events'); - expect(screen.getByTestId('tab-0')).toHaveTextContent('Options (2)'); - // headers - expect(screen.getByTestId('tab-0-table-0-header-property')).toHaveTextContent('property'); - expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name'); - expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description'); - expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type'); - expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default'); - expect(screen.getByTestId('tab-0-table-0-header-example')).toHaveTextContent('example'); + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( + 'AWS DynamoDB Streams Source', + ); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Receive events'); + expect(screen.getByTestId('tab-0')).toHaveTextContent('Options (9)'); + // headers + expect(screen.getByTestId('tab-0-table-0-header-property')).toHaveTextContent('property'); + expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name'); + expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description'); + expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type'); + expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default'); + expect(screen.getByTestId('tab-0-table-0-header-example')).toHaveTextContent('example'); - // row - expect(screen.getByTestId('tab-0-table-0-row-0-cell-property')).toHaveTextContent('table'); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('Table with space'); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent( - 'Required The name of the DynamoDB table.', - ); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-type')).toHaveTextContent('string'); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-default')).toHaveTextContent(''); - expect(screen.getByTestId('tab-0-table-0-row-0-cell-example')).toHaveTextContent(''); - expect(screen.getByTestId('tab-0-table-0-row-1-cell-property')).toHaveTextContent('key'); - expect(screen.getByTestId('tab-0-table-0-row-1-cell-name')).toHaveTextContent('Key'); - expect(screen.getByTestId('tab-0-table-0-row-1-cell-description')).toHaveTextContent('New key'); - expect(screen.getByTestId('tab-0-table-0-row-1-cell-type')).toHaveTextContent('string'); - expect(screen.getByTestId('tab-0-table-0-row-1-cell-default')).toHaveTextContent('amazonaws.com'); - expect(screen.getByTestId('tab-0-table-0-row-1-cell-example')).toHaveTextContent('whatever'); + // row + expect(screen.getByTestId('tab-0-table-0-row-0-cell-property')).toHaveTextContent('table'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('Table'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent( + 'Required The name of the DynamoDB table.', + ); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-type')).toHaveTextContent('string'); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-default')).toHaveTextContent(''); + expect(screen.getByTestId('tab-0-table-0-row-0-cell-example')).toHaveTextContent(''); + expect(screen.getByTestId('tab-0-table-0-row-1-cell-property')).toHaveTextContent('accessKey'); + expect(screen.getByTestId('tab-0-table-0-row-1-cell-name')).toHaveTextContent('Access Key'); + expect(screen.getByTestId('tab-0-table-0-row-1-cell-description')).toHaveTextContent( + 'The access key obtained from AWS.', + ); + expect(screen.getByTestId('tab-0-table-0-row-1-cell-type')).toHaveTextContent('string'); + expect(screen.getByTestId('tab-0-table-0-row-1-cell-default')).toHaveTextContent(''); + expect(screen.getByTestId('tab-0-table-0-row-1-cell-example')).toHaveTextContent(''); + }); }); -}); -describe('Kamelet tile with no properties', () => { - const tile: ITile = { - type: CatalogKind.Kamelet, - name: 'aws-ddb-streams-source', - title: 'AWS DynamoDB Streams Source', - description: 'Receive events from Amazon DynamoDB Streams.', - headerTags: ['Stable'], - tags: ['source', '4.0.0-RC1'], - rawObject: { - apiVersion: 'camel.apache.org/v1alpha1', - kind: 'Kamelet', - metadata: { - name: 'aws-ddb-streams-source', - }, - spec: { - definition: { - title: 'AWS DynamoDB Streams Source', - description: 'Receive events', - required: ['table'], - type: 'object', - }, - }, - }, - }; + describe('Kamelet tile with no properties', () => { + const tile: ITile = { + type: CatalogKind.Kamelet, + name: 'nats-sink', + title: 'NATS Sink', + description: 'Send data to NATS topics.', + headerTags: ['Stable'], + tags: ['source', '4.0.0-RC1'], + }; - it('renders property modal correctly', () => { - // modal uses React portals so baseElement needs to be used here - const { baseElement } = render(); - // info - expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( - 'AWS DynamoDB Streams Source', - ); - expect(screen.getByTestId('properties-modal-description')).toHaveTextContent( - 'Receive events from Amazon DynamoDB Streams.', - ); - expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for aws-ddb-streams-source'); + it('renders property modal correctly', () => { + // modal uses React portals so baseElement needs to be used here + const { baseElement } = render(); + // info + expect(baseElement.getElementsByClassName('pf-v5-c-modal-box__title-text').item(0)).toHaveTextContent( + 'NATS Sink', + ); + expect(screen.getByTestId('properties-modal-description')).toHaveTextContent('Send data to NATS topics.'); + expect(screen.getByTestId('empty-state')).toHaveTextContent('No properties found for nats-sink'); + }); }); -}); -describe('Unknown tile', () => { - const tile: ITile = { - type: 'tile-type', - name: 'tile-name', - title: 'tile-title', - description: 'tile-description', - tags: ['tag1', 'tag2'], - headerTags: ['header-tag1', 'header-tag2'], - rawObject: {}, - }; + describe('Unknown tile', () => { + const tile: ITile = { + type: 'tile-type', + name: 'tile-name', + title: 'tile-title', + description: 'tile-description', + tags: ['tag1', 'tag2'], + headerTags: ['header-tag1', 'header-tag2'], + }; - // it suppresses error in the console.log since it is expected - const consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn()); + // it suppresses error in the console.log since it is expected + const consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn()); - afterAll(() => { - consoleErrorFn.mockRestore(); - }); + afterAll(() => { + consoleErrorFn.mockRestore(); + }); - it('fires error for property modal', () => { - expect(() => render()).toThrow( - 'Unknown CatalogKind during rendering modal: tile-type', - ); + it('fires error for property modal', () => { + expect(() => render()).toThrow( + 'Unknown CatalogKind during rendering modal: tile-type', + ); + }); }); }); diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx index 10cf8615e..ca678230d 100644 --- a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx +++ b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx @@ -1,16 +1,17 @@ import { Modal, ModalBoxBody, Tab, Tabs } from '@patternfly/react-core'; -import { FunctionComponent, useEffect, useMemo, useState } from 'react'; +import { FunctionComponent, useContext, useEffect, useMemo, useState } from 'react'; import { IPropertiesTab } from './PropertiesModal.models'; import { transformCamelComponentIntoTab, transformCamelProcessorComponentIntoTab, transformKameletComponentIntoTab, } from '../../camel-utils/camel-to-tabs.adapter'; -import { CatalogKind, ICamelComponentDefinition, ICamelProcessorDefinition, IKameletDefinition } from '../../models'; +import { CatalogKind } from '../../models'; import { ITile } from '../Catalog'; import './PropertiesModal.scss'; import { PropertiesTabs } from './PropertiesTabs'; import { EmptyTableState } from './Tables'; +import { CatalogContext } from '../../providers'; interface IPropertiesModalProps { tile: ITile; @@ -19,16 +20,19 @@ interface IPropertiesModalProps { } export const PropertiesModal: FunctionComponent = (props) => { + const catalogService = useContext(CatalogContext); const tabs = useMemo(() => { switch (props.tile.type) { case CatalogKind.Component: { - return transformCamelComponentIntoTab(props.tile.rawObject as ICamelComponentDefinition); + return transformCamelComponentIntoTab(catalogService.getComponent(CatalogKind.Component, props.tile.name)); } case CatalogKind.Processor: { - return transformCamelProcessorComponentIntoTab(props.tile.rawObject as ICamelProcessorDefinition); + return transformCamelProcessorComponentIntoTab( + catalogService.getComponent(CatalogKind.Processor, props.tile.name), + ); } case CatalogKind.Kamelet: { - return transformKameletComponentIntoTab(props.tile.rawObject as IKameletDefinition); + return transformKameletComponentIntoTab(catalogService.getComponent(CatalogKind.Kamelet, props.tile.name)); } default: throw Error('Unknown CatalogKind during rendering modal: ' + props.tile.type); diff --git a/packages/ui/src/stubs/tiles.ts b/packages/ui/src/stubs/tiles.ts index 27c87d2aa..75e5a6678 100644 --- a/packages/ui/src/stubs/tiles.ts +++ b/packages/ui/src/stubs/tiles.ts @@ -99,3 +99,366 @@ export const tiles: ITile[] = [ componentKubernetesSecretsTile, componentCronTile, ]; + +export const longTileList: ITile[] = [ + { + name: 'activemq', + tags: ['messaging'], + title: 'ActiveMQ 5.x', + type: 'component', + }, + { + name: 'activemq6', + tags: ['messaging'], + title: 'ActiveMQ 6.x', + type: 'component', + }, + { + name: 'amqp', + tags: ['messaging'], + title: 'AMQP', + type: 'component', + }, + { + name: 'arangodb', + tags: ['database'], + title: 'ArangoDb', + type: 'component', + }, + { + name: 'as2', + tags: ['file'], + title: 'AS2', + type: 'component', + }, + { + name: 'cxf', + tags: ['http'], + title: 'CXF', + type: 'component', + }, + { + name: 'exec', + tags: ['messaging'], + title: 'Exec', + type: 'component', + }, + { + name: 'toD', + tags: ['eip'], + title: 'to D', + type: 'processor', + }, + { + name: 'doTry', + tags: ['eip'], + title: 'doTry', + type: 'processor', + }, + { + name: 'Validate', + tags: ['eip'], + title: 'Validate', + type: 'processor', + }, + { + name: 'when', + tags: ['eip'], + title: 'when', + type: 'processor', + }, + { + name: 'onException', + tags: ['eip'], + title: 'onException', + type: 'processor', + }, + { + name: 'wireTap', + tags: ['eip'], + title: 'wireTap', + type: 'processor', + }, + { + name: 'intercept', + tags: ['eip'], + title: 'intercept', + type: 'processor', + }, + { + name: 'saga', + tags: ['eip'], + title: 'saga', + type: 'processor', + }, + { + name: 'script', + tags: ['eip'], + title: 'script', + type: 'processor', + }, + { + name: 'sort', + tags: ['eip'], + title: 'sort', + type: 'processor', + }, + { + name: 'sink', + tags: ['sink'], + title: 'Kamelet Sink', + type: 'kamelet', + }, + { + name: 'kafka-source', + tags: ['source'], + title: 'Kafka Source', + type: 'kamelet', + }, + { + name: 'http-source', + tags: ['source'], + title: 'http-source', + type: 'kamelet', + }, + { + name: 'ssh-source', + tags: ['source'], + title: 'ssh-source', + type: 'kamelet', + }, + { + name: 'jira-source', + tags: ['source'], + title: 'jira-source', + type: 'kamelet', + }, + { + name: 'coffee-source', + tags: ['source'], + title: 'coffee-source', + type: 'kamelet', + }, + { + name: 'mariadb-source', + tags: ['source'], + title: 'mariadbsource', + type: 'kamelet', + }, + { + name: 'dropbox-source', + tags: ['source'], + title: 'dropbox-source', + type: 'kamelet', + }, + { + name: 'cassandra-source', + tags: ['source'], + title: 'cassandrasource', + type: 'kamelet', + }, + { + name: 'aws-redshift-source', + tags: ['source'], + title: 'aws-redshift-source', + type: 'kamelet', + }, + { + name: 'redis-source', + tags: ['source'], + title: 'redis-source', + type: 'kamelet', + }, + { + name: 'pulsar-sink', + tags: ['sink'], + title: 'pulsar-sink', + type: 'kamelet', + }, + { + name: 'dropbox-sink', + tags: ['source'], + title: 'dropbox-source', + type: 'kamelet', + }, + { + name: 'activemq-1', + tags: ['messaging'], + title: 'ActiveMQ 5.x', + type: 'component', + }, + { + name: 'activemq6-1', + tags: ['messaging'], + title: 'ActiveMQ 6.x', + type: 'component', + }, + { + name: 'amqp-1', + tags: ['messaging'], + title: 'AMQP', + type: 'component', + }, + { + name: 'arangodb-1', + tags: ['database'], + title: 'ArangoDb', + type: 'component', + }, + { + name: 'as2-1', + tags: ['file'], + title: 'AS2', + type: 'component', + }, + { + name: 'cxf-1', + tags: ['http'], + title: 'CXF', + type: 'component', + }, + { + name: 'exec-1', + tags: ['messaging'], + title: 'Exec', + type: 'component', + }, + { + name: 'toD-1', + tags: ['eip'], + title: 'to D', + type: 'processor', + }, + { + name: 'doTry-1', + tags: ['eip'], + title: 'doTry', + type: 'processor', + }, + { + name: 'Validate-1', + tags: ['eip'], + title: 'Validate', + type: 'processor', + }, + { + name: 'when-1', + tags: ['eip'], + title: 'when', + type: 'processor', + }, + { + name: 'onException-1', + tags: ['eip'], + title: 'onException', + type: 'processor', + }, + { + name: 'wireTap-1', + tags: ['eip'], + title: 'wireTap', + type: 'processor', + }, + { + name: 'intercept-1', + tags: ['eip'], + title: 'intercept', + type: 'processor', + }, + { + name: 'saga-1', + tags: ['eip'], + title: 'saga', + type: 'processor', + }, + { + name: 'script-1', + tags: ['eip'], + title: 'script', + type: 'processor', + }, + { + name: 'sort-1', + tags: ['eip'], + title: 'sort', + type: 'processor', + }, + { + name: 'sink-1', + tags: ['sink'], + title: 'Kamelet Sink', + type: 'kamelet', + }, + { + name: 'kafka-source-1', + tags: ['source'], + title: 'Kafka Source', + type: 'kamelet', + }, + { + name: 'http-source-1', + tags: ['source'], + title: 'http-source', + type: 'kamelet', + }, + { + name: 'ssh-source-1', + tags: ['source'], + title: 'ssh-source', + type: 'kamelet', + }, + { + name: 'jira-source-1', + tags: ['source'], + title: 'jira-source', + type: 'kamelet', + }, + { + name: 'coffee-source-1', + tags: ['source'], + title: 'coffee-source', + type: 'kamelet', + }, + { + name: 'mariadb-source-1', + tags: ['source'], + title: 'mariadbsource', + type: 'kamelet', + }, + { + name: 'dropbox-source-1', + tags: ['source'], + title: 'dropbox-source', + type: 'kamelet', + }, + { + name: 'cassandra-source-1', + tags: ['source'], + title: 'cassandrasource', + type: 'kamelet', + }, + { + name: 'aws-redshift-source-1', + tags: ['source'], + title: 'aws-redshift-source', + type: 'kamelet', + }, + { + name: 'redis-source-1', + tags: ['source'], + title: 'redis-source', + type: 'kamelet', + }, + { + name: 'pulsar-sink-1', + tags: ['sink'], + title: 'pulsar-sink', + type: 'kamelet', + }, + { + name: 'dropbox-sink-1', + tags: ['source'], + title: 'dropbox-source', + type: 'kamelet', + }, +];