fix(1075): hover on Layout buttons of catalog modal

KaotoIO · Jun 24, 2024 · 482ea1d · 482ea1d
1 parent 19c1f81
commit 482ea1d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git 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
@@ -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<CatalogFilterProps> = (props) => {
         <FormGroup label="Layout" fieldId="layout">
           <ToggleGroup aria-label="Change layout">
             {props.layouts.map((key) => (
-              <ToggleGroupItem
-                icon={<CatalogLayoutIcon key={key} layout={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);
-                }}
-              />
+              <Tooltip aria-label="Layout toggle Tooltip" content={<p>Display elements with a {key} view</p>}>
+                <ToggleGroupItem
+                  icon={<CatalogLayoutIcon key={key} layout={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);
+                  }}
+                />
+              </Tooltip>
             ))}
           </ToggleGroup>
         </FormGroup>