Skip to content

Commit

Permalink
fix: Catalog: Make "type" buttons to be toggle and allow to show mult…
Browse files Browse the repository at this point in the history 
…iple types at the same time

2nd shot - instead of collapsible grouped section, added a header tag of "Component", "Processor" or "Kamelet" to indicate the type, so it could be distinguished at a first glance

Fixes: KaotoIO#1039
Fixes: KaotoIO#1040
  • Loading branch information
@igarashitm
igarashitm committed Apr 30, 2024
1 parent 4d6d944 commit 5f7dde5
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 22 deletions.
14 changes: 10 additions & 4 deletions packages/ui-tests/cypress/e2e/componentCatalog.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,22 @@ describe('Catalog related tests', () => {

it('Catalog search', () => {
cy.openCatalog();
cy.get('[data-testid="component-catalog-tab"]').click();
cy.get('[data-testid="processor-catalog-tab"]').click();
cy.get('[data-testid="kamelet-catalog-tab"]').click();
cy.get('.pf-v5-c-text-input-group__text-input').click();
cy.get('.pf-v5-c-text-input-group__text-input').type('timer');
cy.get('div[id="timer"]').should('be.visible');
cy.get('button[aria-label="Reset"]').click();
cy.get('.pf-v5-c-text-input-group__text-input').should('have.value', '');

cy.get('[data-testid="component-catalog-tab"]').click();
cy.get('[data-testid="processor-catalog-tab"]').click();
cy.get('.pf-v5-c-text-input-group__text-input').type('choice');
cy.get('div[id="choice"]').should('be.visible');
cy.get('button[aria-label="Reset"]').click();
cy.get('.pf-v5-c-text-input-group__text-input').should('have.value', '');

cy.get('[data-testid="processor-catalog-tab"]').click();
cy.get('[data-testid="kamelet-catalog-tab"]').click();
cy.get('.pf-v5-c-text-input-group__text-input').type('google');
cy.get('div[id="google-storage-source"]').should('be.visible');
Expand All @@ -27,7 +30,8 @@ describe('Catalog related tests', () => {

it('Catalog filtering using tags', () => {
cy.openCatalog();
cy.get('[data-testid="component-catalog-tab"]').click();
cy.get('[data-testid="processor-catalog-tab"]').click();
cy.get('[data-testid="kamelet-catalog-tab"]').click();
cy.get('[data-testid="tag-cloud"]').first().click();
cy.get('[data-testid="tag-database"]').first().click();
cy.get('[data-testid="tag-serverless"]').first().click();
Expand All @@ -43,13 +47,15 @@ describe('Catalog related tests', () => {
it('Catalog list view switch check', () => {
cy.openCatalog();
cy.get('#toggle-layout-button-List').click();
cy.get('[data-testid="kamelet-catalog-tab"]').click();
cy.get('[data-testid="component-catalog-tab"]').click();
cy.get('[data-testid="processor-catalog-tab"]').click();
cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
cy.openSourceCode();
cy.openCatalog();
cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
cy.get('#toggle-layout-button-Gallery').click();
cy.get('[data-testid="component-catalog-tab"]').click();
cy.get('[data-testid="processor-catalog-tab"]').click();
cy.get('[data-testid="kamelet-catalog-tab"]').click();
cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'true');
});
});
3 changes: 1 addition & 2 deletions packages/ui-tests/cypress/support/next-commands/design.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@ Cypress.Commands.add('selectPrependNode', (nodeName: string, nodeIndex?: number)
cy.performNodeAction(nodeName, 'prepend', nodeIndex);
});

Cypress.Commands.add('chooseFromCatalog', (nodeType: string, name: string) => {
cy.get(`[data-testid="${nodeType}-catalog-tab"]`).click();
Cypress.Commands.add('chooseFromCatalog', (_nodeType: string, name: string) => {
cy.get('.pf-v5-c-text-input-group__text-input').click();
cy.get('.pf-v5-c-text-input-group__text-input').type(name);
cy.get(`#${name}`).should('be.visible').click();
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/camel-utils/camel-to-tile.adapter.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe('camelComponentToTile', () => {

const tile = camelComponentToTile(componentDef);

expect(tile.headerTags).toEqual(['Preview']);
expect(tile.headerTags).toEqual(['Component', 'Preview']);
});

it('should populate the tags and version', () => {
Expand Down Expand Up @@ -67,7 +67,7 @@ describe('camelComponentToTile', () => {

const tile = camelComponentToTile(componentDef);

expect(tile.headerTags).toEqual(['Deprecated']);
expect(tile.headerTags).toEqual(['Component', 'Deprecated']);
});
});

Expand Down Expand Up @@ -210,6 +210,6 @@ describe('kameletToTile', () => {

const tile = kameletToTile(kameletDef);

expect(tile.headerTags).toEqual(['Preview']);
expect(tile.headerTags).toEqual(['Kamelet', 'Preview']);
});
});
5 changes: 3 additions & 2 deletions packages/ui/src/camel-utils/camel-to-tile.adapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { CatalogKind, ICamelComponentDefinition, ICamelProcessorDefinition, IKam

export const camelComponentToTile = (componentDef: ICamelComponentDefinition): ITile => {
const { name, title, description, supportLevel, label, version } = componentDef.component;
const headerTags: string[] = [];
const headerTags: string[] = ['Component'];
const tags: string[] = [];

if (supportLevel && !componentDef.component.deprecated) {
Expand Down Expand Up @@ -42,13 +42,14 @@ export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): I
name,
title,
description,
headerTags: ['Processor'],
tags,
rawObject: processorDef,
};
};

export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
const headerTags: string[] = [];
const headerTags: string[] = ['Kamelet'];
if (kameletDef.metadata.annotations['camel.apache.org/kamelet.support.level']) {
headerTags.push(kameletDef.metadata.annotations['camel.apache.org/kamelet.support.level']);
}
Expand Down
15 changes: 11 additions & 4 deletions packages/ui/src/components/Catalog/Catalog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,16 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
return Object.entries(filteredTilesByGroup).map(([group, tiles]) => ({ name: group, count: tiles.length }));
}, [filteredTilesByGroup]);

const [activeGroup, setActiveGroup] = useState<string>(tilesGroups[0].name);
const [activeGroups, setActiveGroups] = useState<string[]>(tilesGroups.map((g) => g.name));
const [activeLayout, setActiveLayout] = useLocalStorage(LocalStorageKeys.CatalogLayout, CatalogLayout.Gallery);
const filteredTiles = useMemo(() => filteredTilesByGroup[activeGroup] ?? [], [activeGroup, filteredTilesByGroup]);
const filteredTiles = useMemo(() => {
return Object.entries(filteredTilesByGroup).reduce((acc, [group, tiles]) => {
if (activeGroups.includes(group)) {
acc.push(...tiles);
}
return acc;
}, [] as ITile[]);
}, [activeGroups, filteredTilesByGroup]);

const onFilterChange = useCallback(
(_event: unknown, value = '') => {
Expand Down Expand Up @@ -62,11 +69,11 @@ export const Catalog: FunctionComponent<PropsWithChildren<CatalogProps>> = (prop
searchTerm={searchTerm}
groups={tilesGroups}
layouts={[CatalogLayout.Gallery, CatalogLayout.List]}
activeGroup={activeGroup}
activeGroups={activeGroups}
activeLayout={activeLayout}
filterTags={filterTags}
onChange={onFilterChange}
setActiveGroup={setActiveGroup}
setActiveGroups={setActiveGroups}
setActiveLayout={setActiveLayout}
setFilterTags={setFilterTags}
/>
Expand Down
22 changes: 15 additions & 7 deletions packages/ui/src/components/Catalog/CatalogFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ interface CatalogFilterProps {
searchTerm: string;
groups: { name: string; count: number }[];
layouts: CatalogLayout[];
activeGroup: string;
activeGroups: string[];
activeLayout: CatalogLayout;
filterTags: string[];
onChange: (event: unknown, value?: string) => void;
setActiveGroup: (group: string) => void;
setActiveGroups: (groups: string[]) => void;
setActiveLayout: (layout: CatalogLayout) => void;
setFilterTags: (tags: string[]) => void;
}
Expand All @@ -40,6 +40,17 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
props.setFilterTags(props.filterTags.filter((savedTag) => savedTag !== tag));
};

const toggleActiveGroup = (selected: boolean, group: string) => {
if (selected && !props.activeGroups.includes(group)) {
props.activeGroups.push(group);
props.setActiveGroups([...props.activeGroups]);
} else if (!selected && props.activeGroups.includes(group)) {
props.activeGroups.splice(props.activeGroups.indexOf(group), 1);
props.setActiveGroups([...props.activeGroups]);
}
inputRef.current?.focus();
};

return (
<Form className={props.className}>
<Grid hasGutter>
Expand Down Expand Up @@ -69,11 +80,8 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
key={tileGroup.name}
data-testid={`${tileGroup.name}-catalog-tab`}
buttonId={`toggle-group-button-${tileGroup.name}`}
isSelected={props.activeGroup === tileGroup.name}
onChange={() => {
props.setActiveGroup(tileGroup.name);
inputRef.current?.focus();
}}
isSelected={props.activeGroups.includes(tileGroup.name)}
onChange={(_event, selected: boolean) => toggleActiveGroup(selected, tileGroup.name)}
/>
))}
</ToggleGroup>
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/components/Catalog/Tags/tag-color-resolver.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ export const getTagColor = (tag: string): COLOR => {
return 'orange';
case 'deprecated':
return 'red';
case 'component':
case 'processor':
case 'kamelet':
return 'blue';
default:
return 'grey';
}
Expand Down

0 comments on commit 5f7dde5

Please sign in to comment.