diff --git a/pages/property-filter/common-props.tsx b/pages/property-filter/common-props.tsx index 4b58924f7e5..7536943ae58 100644 --- a/pages/property-filter/common-props.tsx +++ b/pages/property-filter/common-props.tsx @@ -1,7 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import { PropertyFilterProps } from '~components/property-filter'; -import { I18nStringsTokenGroups } from '~components/property-filter/interfaces'; import { DateForm, @@ -184,9 +183,7 @@ export const i18nStrings: PropertyFilterProps.I18nStrings = { formatToken, removeTokenButtonAriaLabel: token => `Remove token, ${formatToken(token)}`, -}; -export const i18nStringsTokenGroups: I18nStringsTokenGroups = { groupEditAriaLabel: group => `Edit group with ${group.tokens.length} tokens`, tokenEditorTokenActionsAriaLabel: token => `Filter remove actions for ${formatToken(token)}`, tokenEditorTokenRemoveAriaLabel: token => `Remove filter, ${formatToken(token)}`, diff --git a/pages/property-filter/split-panel-app-layout-integration.page.tsx b/pages/property-filter/split-panel-app-layout-integration.page.tsx index 02b36dd988b..8f4b15cdfba 100644 --- a/pages/property-filter/split-panel-app-layout-integration.page.tsx +++ b/pages/property-filter/split-panel-app-layout-integration.page.tsx @@ -10,7 +10,7 @@ import Button from '~components/button'; import Header from '~components/header'; import I18nProvider from '~components/i18n'; import messages from '~components/i18n/messages/all.en'; -import PropertyFilter from '~components/property-filter/internal'; +import PropertyFilter from '~components/property-filter'; import SplitPanel from '~components/split-panel'; import Table from '~components/table'; diff --git a/pages/property-filter/token-editor.page.tsx b/pages/property-filter/token-editor.page.tsx index d22b38a775a..302adc94b3a 100644 --- a/pages/property-filter/token-editor.page.tsx +++ b/pages/property-filter/token-editor.page.tsx @@ -4,14 +4,12 @@ import React from 'react'; import PropertyFilter from '~components/property-filter'; import { PropertyFilterProps } from '~components/property-filter/interfaces'; -import PropertyFilterInternal from '~components/property-filter/internal'; import ScreenshotArea from '../utils/screenshot-area'; import { columnDefinitions, filteringProperties as commonFilteringProperties, i18nStrings, - i18nStringsTokenGroups, labels, } from './common-props'; @@ -28,7 +26,6 @@ const commonProps = { filteringProperties, filteringOptions: [], i18nStrings, - i18nStringsTokenGroups, countText: '5 matches', disableFreeTextFiltering: false, virtualScroll: true, @@ -102,7 +99,7 @@ export default function () { {...commonProps} freeTextFiltering={{ operators: [':', '!:', '=', '!=', '^', '!^'] }} /> - string", }, + Object { + "name": "groupEditAriaLabel", + "optional": true, + "type": "(group: PropertyFilterProps.FormattedTokenGroup) => string", + }, Object { "name": "groupPropertiesText", "optional": true, @@ -12500,6 +12511,46 @@ operations are communicated to the user in another way.", "optional": true, "type": "(token: PropertyFilterProps.FormattedToken) => string", }, + Object { + "name": "tokenEditorAddExistingTokenAriaLabel", + "optional": true, + "type": "(token: PropertyFilterProps.FormattedToken) => string", + }, + Object { + "name": "tokenEditorAddExistingTokenLabel", + "optional": true, + "type": "(token: PropertyFilterProps.FormattedToken) => string", + }, + Object { + "name": "tokenEditorAddNewTokenLabel", + "optional": true, + "type": "string", + }, + Object { + "name": "tokenEditorAddTokenActionsAriaLabel", + "optional": true, + "type": "string", + }, + Object { + "name": "tokenEditorTokenActionsAriaLabel", + "optional": true, + "type": "(token: PropertyFilterProps.FormattedToken) => string", + }, + Object { + "name": "tokenEditorTokenRemoveAriaLabel", + "optional": true, + "type": "(token: PropertyFilterProps.FormattedToken) => string", + }, + Object { + "name": "tokenEditorTokenRemoveFromGroupLabel", + "optional": true, + "type": "string", + }, + Object { + "name": "tokenEditorTokenRemoveLabel", + "optional": true, + "type": "string", + }, Object { "name": "tokenLimitShowFewer", "optional": true, diff --git a/src/property-filter/__tests__/common.tsx b/src/property-filter/__tests__/common.tsx index a27a6471e5a..a7325f9a1d6 100644 --- a/src/property-filter/__tests__/common.tsx +++ b/src/property-filter/__tests__/common.tsx @@ -4,15 +4,7 @@ import React, { useState } from 'react'; import PropertyFilter from '../../../lib/components/property-filter'; -import PropertyFilterInternal, { PropertyFilterInternalProps } from '../../../lib/components/property-filter/internal'; -import { - FilteringProperty, - I18nStrings, - I18nStringsTokenGroups, - InternalFilteringProperty, - PropertyFilterProps, - Token, -} from '../interfaces'; +import { FilteringProperty, I18nStrings, InternalFilteringProperty, PropertyFilterProps, Token } from '../interfaces'; export const i18nStrings: I18nStrings = { dismissAriaLabel: 'Dismiss', @@ -50,9 +42,7 @@ export const i18nStrings: I18nStrings = { formatToken: token => `${token.propertyLabel} ${formatOperator(token.operator)} ${token.value}`, removeTokenButtonAriaLabel: (token: Token) => 'Remove token ' + token.propertyKey + ' ' + formatOperator(token.operator) + ' ' + token.value, -}; -export const i18nStringsTokenGroups: I18nStringsTokenGroups = { groupEditAriaLabel: group => 'Edit filter, ' + group.tokens @@ -137,8 +127,3 @@ export function StatefulPropertyFilter(props: Omit(props.query); return setQuery(e.detail)} />; } - -export function StatefulInternalPropertyFilter(props: Omit) { - const [query, setQuery] = useState(props.query); - return setQuery(e.detail)} />; -} diff --git a/src/property-filter/__tests__/property-filter-i18n.test.tsx b/src/property-filter/__tests__/property-filter-i18n.test.tsx index e3fd8623e48..43bc2cd0406 100644 --- a/src/property-filter/__tests__/property-filter-i18n.test.tsx +++ b/src/property-filter/__tests__/property-filter-i18n.test.tsx @@ -6,9 +6,7 @@ import { act, render } from '@testing-library/react'; import TestI18nProvider from '../../../lib/components/i18n/testing'; import PropertyFilter from '../../../lib/components/property-filter'; -import InternalPropertyFilter from '../../../lib/components/property-filter/internal'; import createWrapper, { ElementWrapper, PropertyFilterWrapper } from '../../../lib/components/test-utils/dom'; -import { PropertyFilterWrapperInternal } from '../../../lib/components/test-utils/dom/property-filter/index.js'; import { createDefaultProps } from './common'; import styles from '../../../lib/components/property-filter/styles.selectors.js'; @@ -274,7 +272,7 @@ describe('i18n', () => { }, }} > - { /> ); - const wrapper = new PropertyFilterWrapperInternal(createWrapper(container).findPropertyFilter()!.getElement()); + const wrapper = createWrapper(container).findPropertyFilter()!; const token = (index: number) => wrapper.findTokens()[index]; const groupToken = (index: number, inGroupIndex: number) => token(index).findGroupTokens()[inGroupIndex]; diff --git a/src/property-filter/__tests__/property-filter-token-editor.test.tsx b/src/property-filter/__tests__/property-filter-token-editor.test.tsx index fcb9ab79a92..16dfcb90ecd 100644 --- a/src/property-filter/__tests__/property-filter-token-editor.test.tsx +++ b/src/property-filter/__tests__/property-filter-token-editor.test.tsx @@ -6,17 +6,14 @@ import { act, fireEvent, render as reactRender } from '@testing-library/react'; import TestI18nProvider from '../../../lib/components/i18n/testing'; import { useMobile } from '../../../lib/components/internal/hooks/use-mobile'; -import { FilteringOption, FilteringProperty } from '../../../lib/components/property-filter/interfaces'; -import PropertyFilterInternal, { PropertyFilterInternalProps } from '../../../lib/components/property-filter/internal'; -import createWrapper from '../../../lib/components/test-utils/dom'; -import { PropertyFilterWrapperInternal } from '../../../lib/components/test-utils/dom/property-filter'; +import PropertyFilter from '../../../lib/components/property-filter'; import { - createDefaultProps, - i18nStrings, - i18nStringsTokenGroups, - providedI18nStrings, - StatefulInternalPropertyFilter, -} from './common'; + FilteringOption, + FilteringProperty, + PropertyFilterProps, +} from '../../../lib/components/property-filter/interfaces'; +import createWrapper from '../../../lib/components/test-utils/dom'; +import { createDefaultProps, i18nStrings, providedI18nStrings, StatefulPropertyFilter } from './common'; jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({ ...jest.requireActual('../../../lib/components/internal/hooks/use-mobile'), @@ -71,26 +68,25 @@ const filteringOptions: readonly FilteringOption[] = [ { propertyKey: 'default-operator', value: 'value' }, ]; -const defaultProps: PropertyFilterInternalProps = { +const defaultProps: PropertyFilterProps = { filteringOptions: [], customGroupsText: [], disableFreeTextFiltering: false, - i18nStringsTokenGroups, ...createDefaultProps(filteringProperties, filteringOptions), }; -function renderComponent(props?: Partial, withI18nProvider = false) { +function renderComponent(props?: Partial, withI18nProvider = false) { return withI18nProvider ? reactRender( - + ) - : reactRender(); + : reactRender(); } function openEditor(tokenIndex: number, options: { expandToViewport?: boolean; isMobile?: boolean }) { - const propertyFilter = new PropertyFilterWrapperInternal(createWrapper().findPropertyFilter()!.getElement()); + const propertyFilter = createWrapper().findPropertyFilter()!; const token = propertyFilter.findTokens()[tokenIndex]; if (token.findEditButton()) { token.findEditButton()!.click(); @@ -104,7 +100,7 @@ function findEditor( tokenIndex: number, { expandToViewport = false, isMobile = false }: { expandToViewport?: boolean; isMobile?: boolean } ) { - const propertyFilter = new PropertyFilterWrapperInternal(createWrapper().findPropertyFilter()!.getElement()); + const propertyFilter = createWrapper().findPropertyFilter()!; const editor = propertyFilter.findTokens()[tokenIndex].findEditorDropdown({ expandToViewport })!; return editor ? { @@ -436,12 +432,12 @@ describe('token editor with groups', () => { jest.mocked(useMobile).mockReturnValue(false); }); - function render(props: Partial) { + function render(props: Partial) { return renderComponent({ enableTokenGroups: true, ...props }); } - function renderStateful(props?: Partial) { - return reactRender(); + function renderStateful(props?: Partial) { + return reactRender(); } test('changes filter property', () => { diff --git a/src/property-filter/__tests__/property-filter-token-list.test.tsx b/src/property-filter/__tests__/property-filter-token-list.test.tsx index e9091867008..3b5d86a09de 100644 --- a/src/property-filter/__tests__/property-filter-token-list.test.tsx +++ b/src/property-filter/__tests__/property-filter-token-list.test.tsx @@ -6,16 +6,8 @@ import { act, render } from '@testing-library/react'; import PropertyFilter from '../../../lib/components/property-filter'; import { PropertyFilterProps, Ref } from '../../../lib/components/property-filter/interfaces'; -import PropertyFilterInternal, { PropertyFilterInternalProps } from '../../../lib/components/property-filter/internal'; import createWrapper, { PropertyFilterWrapper } from '../../../lib/components/test-utils/dom'; -import { PropertyFilterWrapperInternal } from '../../../lib/components/test-utils/dom/property-filter'; -import { - createDefaultProps, - i18nStrings, - i18nStringsTokenGroups, - StatefulInternalPropertyFilter, - StatefulPropertyFilter, -} from './common'; +import { createDefaultProps, i18nStrings, StatefulPropertyFilter } from './common'; const defaultProps = createDefaultProps( [ @@ -51,34 +43,14 @@ const renderStatefulComponent = (props?: Partial) => { return { container, propertyFilterWrapper: createWrapper(container).findPropertyFilter()! }; }; -function renderInternalComponent(props: Partial) { - const { container } = render( - - ); - return new PropertyFilterWrapperInternal(container); +function renderWithGroups(props: Partial) { + const { container } = render(); + return createWrapper(container).findPropertyFilter()!; } -const renderStatefulInternalComponent = (props?: Partial) => { - const { container } = render( - - ); - return new PropertyFilterWrapperInternal(container); +const renderWithGroupsStateful = (props?: Partial) => { + const { container } = render(); + return createWrapper(container).findPropertyFilter()!; }; describe('filtering tokens', () => { @@ -213,7 +185,7 @@ describe('filtering tokens', () => { }); test('moves focus to the adjacent grouped token and to the single remaining token', () => { - const wrapper = renderStatefulInternalComponent({ + const wrapper = renderWithGroupsStateful({ query: { operation: 'and', tokenGroups: [ @@ -372,7 +344,7 @@ describe('grouped token', () => { const tokenJack = { propertyKey: 'string', operator: '=', value: 'Jack' }; test('token group has correct ARIA label and edit button ARIA label', () => { - const wrapper = renderInternalComponent({ + const wrapper = renderWithGroups({ query: { operation: 'and', tokenGroups: [{ operation: 'or', tokens: [tokenJohn, tokenJane] }], tokens: [] }, }); @@ -384,7 +356,7 @@ describe('grouped token', () => { test('changes group operation', () => { const onChange = jest.fn(); - const wrapper = renderInternalComponent({ + const wrapper = renderWithGroups({ query: { operation: 'and', tokenGroups: [{ operation: 'and', tokens: [tokenJohn, tokenJane] }], tokens: [] }, onChange, }); @@ -406,7 +378,7 @@ describe('grouped token', () => { test('removes token from group', () => { const onChange = jest.fn(); - const wrapper = renderInternalComponent({ + const wrapper = renderWithGroups({ query: { operation: 'and', tokenGroups: [{ operation: 'and', tokens: [tokenJohn, tokenJane, tokenJack] }], diff --git a/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx b/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx index 72d56d0444f..510b073b76a 100644 --- a/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx +++ b/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx @@ -5,7 +5,7 @@ import React, { useState } from 'react'; import { render } from '@testing-library/react'; import FilteringToken, { FilteringTokenProps } from '../../../../lib/components/property-filter/filtering-token'; -import { FilteringTokenWrapperInternal } from '../../../../lib/components/test-utils/dom/property-filter'; +import { FilteringTokenWrapper } from '../../../../lib/components/test-utils/dom/property-filter'; const token1 = { content: 'property1 = value', @@ -52,11 +52,9 @@ const defaultProps: FilteringTokenProps = { popoverSize: 'content', }; -function renderToken(props: Partial): FilteringTokenWrapperInternal { +function renderToken(props: Partial): FilteringTokenWrapper { const { container } = render(); - return new FilteringTokenWrapperInternal( - container.querySelector(`.${FilteringTokenWrapperInternal.rootSelector}`)! - ); + return new FilteringTokenWrapper(container.querySelector(`.${FilteringTokenWrapper.rootSelector}`)!); } function StatefulToken(props: FilteringTokenProps) { @@ -71,11 +69,9 @@ function StatefulToken(props: FilteringTokenProps) { ); } -function renderStatefulToken(props: Partial): FilteringTokenWrapperInternal { +function renderStatefulToken(props: Partial): FilteringTokenWrapper { const { container } = render(); - return new FilteringTokenWrapperInternal( - container.querySelector(`.${FilteringTokenWrapperInternal.rootSelector}`)! - ); + return new FilteringTokenWrapper(container.querySelector(`.${FilteringTokenWrapper.rootSelector}`)!); } test('renders a single token as role="group" with token ARIA label and dismiss button', () => { diff --git a/src/property-filter/i18n-utils.ts b/src/property-filter/i18n-utils.ts index de22972b611..4a53bce2d64 100644 --- a/src/property-filter/i18n-utils.ts +++ b/src/property-filter/i18n-utils.ts @@ -2,14 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { useInternalI18n } from '../i18n/context'; -import { - ComparisonOperator, - FormattedToken, - I18nStrings, - I18nStringsTokenGroups, - InternalToken, - InternalTokenGroup, -} from './interfaces'; +import { ComparisonOperator, FormattedToken, I18nStrings, InternalToken, InternalTokenGroup } from './interfaces'; import { tokenGroupToTokens } from './utils'; export type I18nStringsOperators = Pick< @@ -27,31 +20,32 @@ export type I18nStringsOperators = Pick< >; // Replacing i18n function with ones taking internal tokens as argument. -export type I18nStringsInternal = Omit & - Omit< - I18nStringsTokenGroups, - | 'groupEditAriaLabel' - | 'tokenEditorTokenActionsAriaLabel' - | 'tokenEditorTokenRemoveAriaLabel' - | 'tokenEditorAddExistingTokenAriaLabel' - | 'tokenEditorAddExistingTokenLabel' - > & { - formatToken: (token: InternalToken) => { - propertyLabel: string; - operator: string; - value: string; - formattedText: string; - }; - groupAriaLabel: (group: InternalTokenGroup) => string; - groupEditAriaLabel: (group: InternalTokenGroup) => string; - removeTokenButtonAriaLabel: (token: InternalToken) => string; - tokenEditorTokenActionsAriaLabel: (token: InternalToken) => string; - tokenEditorTokenRemoveAriaLabel: (token: InternalToken) => string; - tokenEditorAddExistingTokenAriaLabel: (token: InternalToken) => string; - tokenEditorAddExistingTokenLabel: (token: InternalToken) => string; +export type I18nStringsInternal = Omit< + I18nStrings, + | 'formatToken' + | 'removeTokenButtonAriaLabel' + | 'groupEditAriaLabel' + | 'tokenEditorTokenActionsAriaLabel' + | 'tokenEditorTokenRemoveAriaLabel' + | 'tokenEditorAddExistingTokenAriaLabel' + | 'tokenEditorAddExistingTokenLabel' +> & { + formatToken: (token: InternalToken) => { + propertyLabel: string; + operator: string; + value: string; + formattedText: string; }; + groupAriaLabel: (group: InternalTokenGroup) => string; + groupEditAriaLabel: (group: InternalTokenGroup) => string; + removeTokenButtonAriaLabel: (token: InternalToken) => string; + tokenEditorTokenActionsAriaLabel: (token: InternalToken) => string; + tokenEditorTokenRemoveAriaLabel: (token: InternalToken) => string; + tokenEditorAddExistingTokenAriaLabel: (token: InternalToken) => string; + tokenEditorAddExistingTokenLabel: (token: InternalToken) => string; +}; -export function usePropertyFilterI18n(def: I18nStrings & I18nStringsTokenGroups = {}): I18nStringsInternal { +export function usePropertyFilterI18n(def: I18nStrings = {}): I18nStringsInternal { const i18n = useInternalI18n('property-filter'); const allPropertiesLabel = i18n('i18nStrings.allPropertiesLabel', def?.allPropertiesLabel); diff --git a/src/property-filter/index.tsx b/src/property-filter/index.tsx index 5a721633e63..7694fb65612 100644 --- a/src/property-filter/index.tsx +++ b/src/property-filter/index.tsx @@ -14,6 +14,7 @@ const PropertyFilter = React.forwardRef( { filteringOptions = [], customGroupsText = [], + enableTokenGroups = false, disableFreeTextFiltering = false, asyncProperties, expandToViewport, @@ -33,6 +34,7 @@ const PropertyFilter = React.forwardRef( {...baseComponentProps} filteringOptions={filteringOptions} customGroupsText={customGroupsText} + enableTokenGroups={enableTokenGroups} disableFreeTextFiltering={disableFreeTextFiltering} asyncProperties={asyncProperties} expandToViewport={expandToViewport} diff --git a/src/property-filter/interfaces.ts b/src/property-filter/interfaces.ts index 8391a1b15cb..b827c0cf310 100644 --- a/src/property-filter/interfaces.ts +++ b/src/property-filter/interfaces.ts @@ -64,6 +64,11 @@ export interface PropertyFilterProps extends BaseComponentProps, ExpandToViewpor * operations are communicated to the user in another way. */ hideOperations?: boolean; + /* + * Activates token grouping mechanism to support tokens nesting (up to one level). + * When `true`, the `query.tokens` property is ignored and `query.tokenGroups` is used instead. + */ + enableTokenGroups?: boolean; /** * Fired when the `query` gets changed. Filter the dataset in response to this event using the values in the `detail` object. */ @@ -216,6 +221,7 @@ export interface PropertyFilterProps extends BaseComponentProps, ExpandToViewpor export namespace PropertyFilterProps { export type Token = PropertyFilterToken; + export type TokenGroup = PropertyFilterTokenGroup; export type JoinOperation = PropertyFilterOperation; export type ComparisonOperator = PropertyFilterOperator; export type ExtendedOperator = PropertyFilterOperatorExtended; @@ -282,6 +288,16 @@ export namespace PropertyFilterProps { tokenOperatorAriaLabel?: string; removeTokenButtonAriaLabel?: (token: FormattedToken) => string; enteredTextLabel?: AutosuggestProps.EnteredTextLabel; + + groupEditAriaLabel?: (group: FormattedTokenGroup) => string; + tokenEditorTokenActionsAriaLabel?: (token: FormattedToken) => string; + tokenEditorTokenRemoveAriaLabel?: (token: FormattedToken) => string; + tokenEditorTokenRemoveLabel?: string; + tokenEditorTokenRemoveFromGroupLabel?: string; + tokenEditorAddNewTokenLabel?: string; + tokenEditorAddTokenActionsAriaLabel?: string; + tokenEditorAddExistingTokenAriaLabel?: (token: FormattedToken) => string; + tokenEditorAddExistingTokenLabel?: (token: FormattedToken) => string; } export interface FormattedToken { @@ -291,6 +307,12 @@ export namespace PropertyFilterProps { value: string; } + export interface FormattedTokenGroup { + tokens: FormattedToken[]; + operation: string; + operationLabel: string; + } + export interface GroupText { properties: string; values: string; @@ -312,27 +334,8 @@ export namespace PropertyFilterProps { // Re-exported namespace interfaces to use module-style imports internally -export type TokenGroup = PropertyFilterTokenGroup; - -export interface FormattedTokenGroup { - tokens: FormattedToken[]; - operation: string; - operationLabel: string; -} - -export interface I18nStringsTokenGroups { - groupEditAriaLabel?: (group: FormattedTokenGroup) => string; - tokenEditorTokenActionsAriaLabel?: (token: FormattedToken) => string; - tokenEditorTokenRemoveAriaLabel?: (token: FormattedToken) => string; - tokenEditorTokenRemoveLabel?: string; - tokenEditorTokenRemoveFromGroupLabel?: string; - tokenEditorAddNewTokenLabel?: string; - tokenEditorAddTokenActionsAriaLabel?: string; - tokenEditorAddExistingTokenAriaLabel?: (token: FormattedToken) => string; - tokenEditorAddExistingTokenLabel?: (token: FormattedToken) => string; -} - export type Token = PropertyFilterProps.Token; +export type TokenGroup = PropertyFilterProps.TokenGroup; export type JoinOperation = PropertyFilterProps.JoinOperation; export type ComparisonOperator = PropertyFilterProps.ComparisonOperator; export type ExtendedOperator = PropertyFilterOperatorExtended; @@ -347,6 +350,7 @@ export type I18nStrings = PropertyFilterProps.I18nStrings; export type GroupText = PropertyFilterProps.GroupText; export type FilteringChangeDetail = PropertyFilterProps.FilteringChangeDetail; export type FormattedToken = PropertyFilterProps.FormattedToken; +export type FormattedTokenGroup = PropertyFilterProps.FormattedTokenGroup; export type Ref = PropertyFilterProps.Ref; // Utility types diff --git a/src/property-filter/internal.tsx b/src/property-filter/internal.tsx index 87f9e86193e..7aca871d110 100644 --- a/src/property-filter/internal.tsx +++ b/src/property-filter/internal.tsx @@ -24,7 +24,6 @@ import { ComparisonOperator, ExtendedOperator, FilteringProperty, - I18nStringsTokenGroups, InternalFilteringOption, InternalFilteringProperty, InternalFreeTextFiltering, @@ -47,12 +46,9 @@ import styles from './styles.css.js'; export type PropertyFilterInternalProps = SomeRequired< PropertyFilterProps, - 'filteringOptions' | 'customGroupsText' | 'disableFreeTextFiltering' + 'filteringOptions' | 'customGroupsText' | 'enableTokenGroups' | 'disableFreeTextFiltering' > & - InternalBaseComponentProps & { - enableTokenGroups?: boolean; - i18nStringsTokenGroups?: I18nStringsTokenGroups; - }; + InternalBaseComponentProps; const PropertyFilterInternal = React.forwardRef( ( @@ -85,8 +81,7 @@ const PropertyFilterInternal = React.forwardRef( expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, - enableTokenGroups = false, - i18nStringsTokenGroups, + enableTokenGroups, __internalRootRef, ...rest }: PropertyFilterInternalProps, @@ -106,7 +101,7 @@ const PropertyFilterInternal = React.forwardRef( const inputRef = useRef(null); const baseProps = getBaseProps(rest); - const i18nStrings = usePropertyFilterI18n({ ...rest.i18nStrings, ...i18nStringsTokenGroups }); + const i18nStrings = usePropertyFilterI18n(rest.i18nStrings); useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus() }), []); const showResults = !!query.tokens?.length && !disabled && !!countText; diff --git a/src/test-utils/dom/property-filter/index.ts b/src/test-utils/dom/property-filter/index.ts index db23d43fede..27a65c1924a 100644 --- a/src/test-utils/dom/property-filter/index.ts +++ b/src/test-utils/dom/property-filter/index.ts @@ -86,6 +86,16 @@ export class FilteringTokenWrapper extends ComponentWrapper { const popoverBody = root.findByClassName(popoverStyles.body); return popoverBody ? new PropertyFilterEditorDropdownWrapper(popoverBody.getElement()) : null; } + + findEditButton(): ElementWrapper { + return this.findByClassName(testUtilStyles['filtering-token-edit-button'])!; + } + + findGroupTokens(): Array { + return this.findAllByClassName(testUtilStyles['filtering-token-inner']).map( + w => new FilteringGroupedTokenWrapper(w.getElement()) + ); + } } export class PropertyFilterEditorDropdownWrapper extends ComponentWrapper { @@ -101,50 +111,38 @@ export class PropertyFilterEditorDropdownWrapper extends ComponentWrapper { return this.findByClassName(styles['token-editor-form'])!; } - findPropertyField(): FormFieldWrapper { - return this.findComponent(`.${testUtilStyles['token-editor-field-property']}`, FormFieldWrapper)!; - } - - findOperatorField(): FormFieldWrapper { - return this.findComponent(`.${testUtilStyles['token-editor-field-operator']}`, FormFieldWrapper)!; - } - - findValueField(): FormFieldWrapper { - return this.findComponent(`.${testUtilStyles['token-editor-field-value']}`, FormFieldWrapper)!; + findPropertyField(index = 1): FormFieldWrapper { + const dataIndex = `[data-testindex="${index - 1}"]`; + return this.findComponent(`.${testUtilStyles['token-editor-field-property']}${dataIndex}`, FormFieldWrapper)!; } - findCancelButton(): ButtonWrapper { - return this.findComponent(`.${testUtilStyles['token-editor-cancel']}`, ButtonWrapper)!; + findOperatorField(index = 1): FormFieldWrapper { + const dataIndex = `[data-testindex="${index - 1}"]`; + return this.findComponent(`.${testUtilStyles['token-editor-field-operator']}${dataIndex}`, FormFieldWrapper)!; } - findSubmitButton(): ButtonWrapper { - return this.findComponent(`.${testUtilStyles['token-editor-submit']}`, ButtonWrapper)!; + findValueField(index = 1): FormFieldWrapper { + const dataIndex = `[data-testindex="${index - 1}"]`; + return this.findComponent(`.${testUtilStyles['token-editor-field-value']}${dataIndex}`, FormFieldWrapper)!; } -} -export class PropertyFilterWrapperInternal extends PropertyFilterWrapper { - findTokens(): Array { - return this.findAllByClassName(FilteringTokenWrapperInternal.rootSelector).map( - (elementWrapper: ElementWrapper) => new FilteringTokenWrapperInternal(elementWrapper.getElement()) - ); + findTokenRemoveActions(index = 1): null | ButtonDropdownWrapper { + const dataIndex = `[data-testindex="${index - 1}"]`; + const buttonDropdown = this.find(`.${testUtilStyles['token-editor-token-remove-actions']}${dataIndex}`)!; + return buttonDropdown ? new ButtonDropdownWrapper(buttonDropdown.getElement()) : null; } -} -export class FilteringTokenWrapperInternal extends FilteringTokenWrapper { - findEditorDropdown(options = { expandToViewport: false }): null | PropertyFilterEditorDropdownWrapperInternal { - const root = options.expandToViewport ? createWrapper() : this; - const popoverBody = root.findByClassName(popoverStyles.body); - return popoverBody ? new PropertyFilterEditorDropdownWrapperInternal(popoverBody.getElement()) : null; + findTokenAddActions(): null | ButtonDropdownWrapper { + const buttonDropdown = this.find(`.${testUtilStyles['token-editor-token-add-actions']}`)!; + return buttonDropdown ? new ButtonDropdownWrapper(buttonDropdown.getElement()) : null; } - findEditButton(): ElementWrapper { - return this.findByClassName(testUtilStyles['filtering-token-edit-button'])!; + findCancelButton(): ButtonWrapper { + return this.findComponent(`.${testUtilStyles['token-editor-cancel']}`, ButtonWrapper)!; } - findGroupTokens(): Array { - return this.findAllByClassName(testUtilStyles['filtering-token-inner']).map( - w => new FilteringGroupedTokenWrapper(w.getElement()) - ); + findSubmitButton(): ButtonWrapper { + return this.findComponent(`.${testUtilStyles['token-editor-submit']}`, ButtonWrapper)!; } } @@ -163,31 +161,3 @@ export class FilteringGroupedTokenWrapper extends ComponentWrapper { return this.findComponent(`.${testUtilStyles['filtering-token-inner-select']}`, SelectWrapper); } } - -export class PropertyFilterEditorDropdownWrapperInternal extends PropertyFilterEditorDropdownWrapper { - findPropertyField(index = 1): FormFieldWrapper { - const dataIndex = `[data-testindex="${index - 1}"]`; - return this.findComponent(`.${testUtilStyles['token-editor-field-property']}${dataIndex}`, FormFieldWrapper)!; - } - - findOperatorField(index = 1): FormFieldWrapper { - const dataIndex = `[data-testindex="${index - 1}"]`; - return this.findComponent(`.${testUtilStyles['token-editor-field-operator']}${dataIndex}`, FormFieldWrapper)!; - } - - findValueField(index = 1): FormFieldWrapper { - const dataIndex = `[data-testindex="${index - 1}"]`; - return this.findComponent(`.${testUtilStyles['token-editor-field-value']}${dataIndex}`, FormFieldWrapper)!; - } - - findTokenRemoveActions(index = 1): null | ButtonDropdownWrapper { - const dataIndex = `[data-testindex="${index - 1}"]`; - const buttonDropdown = this.find(`.${testUtilStyles['token-editor-token-remove-actions']}${dataIndex}`)!; - return buttonDropdown ? new ButtonDropdownWrapper(buttonDropdown.getElement()) : null; - } - - findTokenAddActions(): null | ButtonDropdownWrapper { - const buttonDropdown = this.find(`.${testUtilStyles['token-editor-token-add-actions']}`)!; - return buttonDropdown ? new ButtonDropdownWrapper(buttonDropdown.getElement()) : null; - } -}