diff --git a/packages/main/src/components/FilterBar/FilterBar.cy.tsx b/packages/main/src/components/FilterBar/FilterBar.cy.tsx index eaf94ea1abf..f55a7e92af2 100644 --- a/packages/main/src/components/FilterBar/FilterBar.cy.tsx +++ b/packages/main/src/components/FilterBar/FilterBar.cy.tsx @@ -74,7 +74,7 @@ describe('FilterBar.cy.tsx', () => { it('Selection: FilterGroupItems in Dialog + events', () => { const TestComp = (props: Omit) => { - const [selectedFilters, setSelectedFilters] = useState(''); + const [selectedFilters, setSelectedFilters] = useState('0 1 2'); const [closeTrigger, setCloseTrigger] = useState(''); const [savedVisibleFilters, setSavedVisibleFilters] = useState(''); const { @@ -217,24 +217,17 @@ describe('FilterBar.cy.tsx', () => { } const checkboxes = cy.get('[ui5-checkbox]'); - checkboxes.should('have.length', 4); + checkboxes.should('have.length', 3); - let selected = '2'; - checkboxes.each((item, index, arr) => { + let selected = '0 1 2'; + checkboxes.each((item, cbIndex, arr) => { const wrappedItem = cy.wrap(item); wrappedItem.should('be.visible'); + wrappedItem.realClick(); - wrappedItem.click(); - - if (index === 0) { - // select-all: deselect all - only required is checked - wrappedItem.should('not.have.attr', 'checked'); - cy.findByTestId('selected').should('have.text', selected); - const requiredItem = cy.wrap(arr[arr.length - 1]); - requiredItem.should('have.attr', 'checked'); - } else if (index !== arr.length - 1) { - wrappedItem.should('have.attr', 'checked'); - selected += ` ${index - 1}`; + if (cbIndex !== arr.length - 1) { + wrappedItem.find('[role="checkbox"]').should('have.attr', 'aria-checked', 'false'); + selected = selected.split(' ').slice(1).join(' '); cy.findByTestId('selected').should('have.text', selected); } else { // is sometimes not selected, seems to be related to the click target and cypress @@ -243,7 +236,7 @@ describe('FilterBar.cy.tsx', () => { } }); - cy.get('@selectSpy').should('have.callCount', 3 * (index + 1)); + cy.get('@selectSpy').should('have.callCount', 2 * (index + 1)); cy.findAllByText('INPUT').should('have.length', 2); cy.findAllByText('SWITCH').should('have.length', 2); @@ -261,7 +254,7 @@ describe('FilterBar.cy.tsx', () => { cy.get('@saveSpy').should('have.callCount', saveCallCount); saveCallCount++; cy.findByTestId('close-trigger').should('have.text', 'okButtonPressed'); - cy.findByTestId('saved-filters').should('have.text', '0 1 2'); + cy.findByTestId('saved-filters').should('have.text', '2'); } else { if (action === 'Reset') { cy.get('[data-component-name="FilterBarDialogResetMessageBox"]').contains('Cancel').click(); @@ -298,10 +291,10 @@ describe('FilterBar.cy.tsx', () => { }); }); - it('select-all without required', () => { + it('select/clear-all', () => { const TestComp = (props) => { - const [selectedFilters, setSelectedFilters] = useState(''); - const [savedVisibleFilters, setSavedVisibleFilters] = useState(''); + const [selectedFilters, setSelectedFilters] = useState('0 1 2 3'); + const [savedVisibleFilters, setSavedVisibleFilters] = useState('0 1 2 3'); const handleSelectionChange: FilterBarPropTypes['onFiltersDialogSelectionChange'] = (e) => { setSelectedFilters(Array.from(e.selectedFilterKeys).join(' ')); @@ -312,13 +305,13 @@ describe('FilterBar.cy.tsx', () => { return ( <> - + - + - + + + +
Selected: @@ -339,22 +340,28 @@ describe('FilterBar.cy.tsx', () => { cy.mount(); - cy.findByTestId('selected', '0 1 2'); + cy.findByTestId('selected').should('have.text', '0 1 2 3'); cy.get('[text="Filters"]').click({ force: true }); cy.get('[ui5-checkbox]').first().click(); - cy.findByTestId('selected', ''); + cy.findByTestId('selected').should('have.text', '1 2 3'); cy.get('[ui5-checkbox]').eq(1).click(); - cy.findByTestId('selected', '0'); + cy.findByTestId('selected').should('have.text', '2 3'); cy.get('[ui5-checkbox]').first().click(); cy.get('[ui5-checkbox]').first().click(); cy.findByText('OK').click(); - cy.findByTestId('saved', ''); + cy.findByTestId('saved').should('have.text', '2 3'); cy.get('[text="Filters"]').click({ force: true }); cy.get('[ui5-checkbox]').first().click(); cy.findByText('OK').click(); - cy.findByTestId('saved', '0 1 2'); + cy.findByTestId('saved').should('have.text', '2 3 0'); + + cy.get('[text="Filters"]').click({ force: true }); + cy.get('[name="clear-all"]').click(); + cy.findByTestId('selected').should('have.text', '3'); + cy.findByText('OK').click(); + cy.findByTestId('saved').should('have.text', '3'); }); // todo selection, group + list view @@ -473,25 +480,10 @@ describe('FilterBar.cy.tsx', () => { cy.get('[text="Filters"]').click({ force: true }); cy.get('[accessible-name="Group View"]').click(); - cy.get('[data-component-name="FilterBarDialogGroupTableHeaderRow"]') - .shadow() - .find('[ui5-table-header-cell]') - .should('have.css', 'visibility', 'hidden'); - cy.get('[data-component-name="FilterBarDialogTable"][data-is-grouped]') .shadow() .find('#no-data-row') .should('have.css', 'display', 'none'); - - cy.get('[data-component-name="FilterBarDialogTable"]') - .shadow() - .find('#table') - .should('have.css', 'grid-template-columns', '44px 436px 160px'); - - cy.get('[data-component-name="FilterBarDialogPanelTable"]') - .shadow() - .find('#table') - .should('have.css', 'grid-template-columns', '44px 436px 160px'); }); it('fire FilterBar events', () => { diff --git a/packages/main/src/components/FilterBar/FilterBar.stories.tsx b/packages/main/src/components/FilterBar/FilterBar.stories.tsx index 0942469cb36..9a390cca393 100644 --- a/packages/main/src/components/FilterBar/FilterBar.stories.tsx +++ b/packages/main/src/components/FilterBar/FilterBar.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js'; import { useId, useReducer, useRef, useState } from 'react'; import { FlexBoxDirection } from '../../enums/index.js'; @@ -42,6 +43,7 @@ const meta = { ), filterContainerWidth: '13.125rem', + onFiltersDialogOpen: fn(), }, argTypes: { activeFiltersCount: { control: 'number' }, diff --git a/packages/main/src/components/FilterBar/FilterBarDialog.module.css b/packages/main/src/components/FilterBar/FilterBarDialog.module.css index 40c51c68ab9..acdd38eab89 100644 --- a/packages/main/src/components/FilterBar/FilterBarDialog.module.css +++ b/packages/main/src/components/FilterBar/FilterBarDialog.module.css @@ -97,3 +97,7 @@ .inactiveTable { pointer-events: none; } + +.checkBoxSpacer { + width: calc(var(--_ui5wcr-CheckBoxWidthHeight) - 11px); +} diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx index 8e0bfef2ec0..31f368e019e 100644 --- a/packages/main/src/components/FilterBar/FilterDialog.tsx +++ b/packages/main/src/components/FilterBar/FilterDialog.tsx @@ -73,25 +73,12 @@ interface ForceRequiredObject { addCustomCSSWithScoping( 'ui5-table', ` -:host([data-component-name="FilterBarDialogTable"][data-with-value="false"]) #table, -:host([data-component-name="FilterBarDialogPanelTable"][data-with-value="false"]) #table { - grid-template-columns: var(--_ui5wcr-CheckBoxWidthHeight) minmax(3rem, auto) minmax(3rem, 25%) !important; -} -:host([data-component-name="FilterBarDialogTable"][data-is-grouped]) #no-data-row { +:host([data-component-name="FilterBarDialogTable"][data-is-grouped="true"]) #no-data-row { display: none; } `, ); -addCustomCSSWithScoping( - 'ui5-table-header-row', - ` -:host([data-component-name="FilterBarDialogGroupTableHeaderRow"]) :first-child { - visibility: hidden; -} -`, -); - type ActiveFilterAttributes = 'all' | 'visible' | 'active' | 'visibleAndActive' | 'mandatory'; const getActiveFilters = ( activeFilterAttribute: ActiveFilterAttributes, @@ -609,20 +596,21 @@ export const FilterDialog = (props: FilterDialogPropTypes) => { ref={tableRef} className={!isListView && classNames.inactiveTable} data-component-name="FilterBarDialogTable" - data-is-grouped={!isListView} + data-is-grouped={!isListView ? 'true' : 'false'} data-with-value={`${showValues}`} noData={!isListView ? : undefined} tabIndex={!isListView ? -1 : undefined} features={ - <> - - + } headerRow={ - {filterText} + + {!isListView &&
} + {filterText} + {!showValues && {activeText}} }