From 22ad96d70ecb1b3d06e01a379f24f4bb5943509f Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 27 Sep 2023 13:34:21 +0200 Subject: [PATCH] fix(AnalyticalTable): add tooltip to header selection-cell (#5081) --- .../AnalyticalTable/AnalyticalTable.cy.tsx | 12 ++++++++---- .../AnalyticalTable/ColumnHeader/index.tsx | 3 +++ .../AnalyticalTable/hooks/useRowSelectionColumn.tsx | 13 ++++++++----- .../main/src/components/AnalyticalTable/index.tsx | 6 +++++- packages/main/src/i18n/messagebundle.properties | 8 +++++++- 5 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index 5a9927bda59..4523f1f261e 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx @@ -1,4 +1,3 @@ -import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils'; import { ThemingParameters } from '@ui5/webcomponents-react-base'; import { useCallback, useEffect, useRef, useState } from 'react'; import type { AnalyticalTablePropTypes } from '../..'; @@ -14,6 +13,7 @@ import { import { AnalyticalTableSelectionMode, AnalyticalTableVisibleRowCountMode, ValueState } from '../../enums/index.js'; import { useManualRowSelect } from './pluginHooks/useManualRowSelect'; import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection'; +import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils'; const generateMoreData = (count) => { return new Array(count).fill('').map((item, index) => ({ @@ -1990,8 +1990,12 @@ describe('AnalyticalTable', () => { ); }; cy.mount(); - cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]').click(); + cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]') + .as('selAll') + .should('have.attr', 'title', 'Select All') + .click(); cy.get('@selectSpy').should('have.been.calledOnce'); + cy.get('@selAll').should('have.attr', 'title', 'Deselect All'); cy.findByTestId('payload').should( 'have.text', '{"selectedRowIds":{"0":true,"1":true,"2":true,"3":true},"selectedFlatRows":[{"id":"0"},{"id":"1"},{"id":"2"},{"id":"3"}],"allRowsSelected":true}' @@ -2002,13 +2006,13 @@ describe('AnalyticalTable', () => { 'have.text', '{"selectedRowIds":{"0":true,"1":true,"3":true},"selectedFlatRows":[{"id":"0"},{"id":"1"},{"id":"3"}],"allRowsSelected":false}' ); - cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]').click(); + cy.get('@selAll').should('have.attr', 'title', 'Select All').click(); cy.get('@selectSpy').should('have.been.calledThrice'); cy.findByTestId('payload').should( 'have.text', '{"selectedRowIds":{"0":true,"1":true,"2":true,"3":true},"selectedFlatRows":[{"id":"0"},{"id":"1"},{"id":"2"},{"id":"3"}],"allRowsSelected":true}' ); - cy.get('[data-visible-column-index="0"][data-visible-row-index="0"]').click(); + cy.get('@selAll').click(); cy.get('@selectSpy').should('have.callCount', 4); cy.findByTestId('payload').should( 'have.text', diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index bb2d66e4e26..59790afc338 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -51,6 +51,7 @@ export interface ColumnHeaderProps { column: ColumnType; role: string; isFiltered?: boolean; + title?: string; ['aria-sort']?: AriaAttributes['aria-sort']; ['aria-label']?: AriaAttributes['aria-label']; } @@ -142,6 +143,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { portalContainer, scaleXFactor, isFiltered, + title, 'aria-label': ariaLabel, 'aria-sort': ariaSort, showVerticalEndBorder @@ -260,6 +262,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { onKeyUp={handleHeaderCellKeyUp} aria-label={ariaLabel} aria-sort={ariaSort} + title={title} >
{ const { flatRows, - webComponentsReactProperties: { onRowSelect, selectionMode }, + webComponentsReactProperties: { + onRowSelect, + selectionMode, + translatableTexts: { selectAllText, deselectAllText } + }, toggleAllRowsSelected, isAllRowsSelected, rowsById, @@ -96,8 +100,7 @@ const headerProps = (props, { instance }) => { onClick(e); } }; - - return [props, { onClick, onKeyDown, style }]; + return [props, { onClick, onKeyDown, style, title: isAllRowsSelected ? deselectAllText : selectAllText }]; } return props; }; @@ -171,11 +174,11 @@ const getCellProps = (props, { cell }) => { const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => { const { classes } = webComponentsReactProperties; - return [props, { className: classes.checkBox }]; + return [props, { className: classes.checkBox, title: undefined }]; }; const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProperties } }) => { const { classes } = webComponentsReactProperties; - return [props, { className: classes.checkBox }]; + return [props, { className: classes.checkBox, title: undefined }]; }; export const useRowSelectionColumn = (hooks) => { diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index b17a809e0c4..ad6bacdccf4 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -53,7 +53,9 @@ import { GROUPED, INVALID_TABLE, SELECT_PRESS_SPACE, - UNSELECT_PRESS_SPACE + UNSELECT_PRESS_SPACE, + SELECT_ALL, + DESELECT_ALL } from '../../i18n/i18n-defaults.js'; import type { CommonProps } from '../../interfaces/index.js'; import { FlexBox } from '../FlexBox/index.js'; @@ -733,6 +735,8 @@ const AnalyticalTable = forwardRef