diff --git a/packages/ui-tests/cypress/e2e/componentCatalog.cy.ts b/packages/ui-tests/cypress/e2e/componentCatalog.cy.ts index a39216cd0..8ccbaf01c 100644 --- a/packages/ui-tests/cypress/e2e/componentCatalog.cy.ts +++ b/packages/ui-tests/cypress/e2e/componentCatalog.cy.ts @@ -54,8 +54,8 @@ describe('Catalog related tests', () => { 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="processor-catalog-tab"]').click(); - cy.get('[data-testid="kamelet-catalog-tab"]').click(); + cy.get('[data-testid="processor-catalog-tab"]').click({ force: true }); + cy.get('[data-testid="kamelet-catalog-tab"]').click({ force: true }); cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'true'); }); }); diff --git a/packages/ui/src/components/Catalog/CatalogFilter.tsx b/packages/ui/src/components/Catalog/CatalogFilter.tsx index 7b2c25ec3..abae60821 100644 --- a/packages/ui/src/components/Catalog/CatalogFilter.tsx +++ b/packages/ui/src/components/Catalog/CatalogFilter.tsx @@ -7,6 +7,7 @@ import { SearchInput, ToggleGroup, ToggleGroupItem, + Tooltip, capitalize, } from '@patternfly/react-core'; import { TimesCircleIcon } from '@patternfly/react-icons'; @@ -97,17 +98,19 @@ export const CatalogFilter: FunctionComponent = (props) => { {props.layouts.map((key) => ( - } - key={key} - data-testid={`toggle-layout-button-${key}`} - buttonId={`toggle-layout-button-${key}`} - aria-label={`toggle-layout-button-${key}`} - isSelected={props.activeLayout === key} - onChange={() => { - props.setActiveLayout(key); - }} - /> + Display elements with a {key} view

}> + } + key={key} + data-testid={`toggle-layout-button-${key}`} + buttonId={`toggle-layout-button-${key}`} + aria-label={`toggle-layout-button-${key}`} + isSelected={props.activeLayout === key} + onChange={() => { + props.setActiveLayout(key); + }} + /> +
))}