chore: Updates property filter demos to feature token groups

src/fake-server/distributions.js

@@ -59,16 +59,26 @@ function filterItemsByProperty(options) {
   };
 
   const filteringFunction = function (item, tokens, operation) {
+    function filterWithToken(include, opFn, tokenOrGroup) {
+      if ('operation' in tokenOrGroup) {
+        const nextOpFn = operationFn(tokenOrGroup.operation);
+        return tokenOrGroup.tokens.reduce(
+          (include, token) => filterWithToken(include, nextOpFn, token),
+          operation === 'and'
+        );
+      }
+      if ('operator' in tokenOrGroup) {
+        const comparator = getComparatorForOperator(tokenOrGroup.operator);
+        const searchableProps = tokenOrGroup.propertyKey ? [tokenOrGroup.propertyKey] : Object.keys(item);
+        return searchableProps.some(propertyKey => {
+          const matched = match(propertyKey, tokenOrGroup.value, item, comparator);
+          return opFn(include, matched);
+        });
+      }
+      throw new Error('Invariant violation: unexpected token shape.');
+    }
     const opFn = operationFn(operation);
-    return tokens.reduce((include, token) => {
-      const comparator = getComparatorForOperator(token.operator);
-      const searchableProps = token.propertyKey ? [token.propertyKey] : Object.keys(item);
-
-      return searchableProps.some(propertyKey => {
-        const matched = match(propertyKey, token.value, item, comparator);
-        return opFn(include, matched);
-      });
-    }, operation === 'and');
+    return tokens.reduce((include, token) => filterWithToken(include, opFn, token), operation === 'and');
   };
 
   return items.filter(item => filteringFunction(item, options.filteringTokens, options.filteringOperation));

src/pages/server-side-table-property-filter/index.jsx

@@ -48,7 +48,7 @@ function ServerSidePropertyFilterTable({ columnDefinitions, saveWidths, loadHelp
       sortingDescending,
     },
     filtering: {
-      filteringTokens: filteringQuery.tokens,
+      filteringTokens: filteringQuery.tokenGroups ?? filteringQuery.tokens,
       filteringOperation: filteringQuery.operation,
     },
   };
@@ -119,6 +119,7 @@ function ServerSidePropertyFilterTable({ columnDefinitions, saveWidths, loadHelp
           customGroupsText={[{ group: 'tags', properties: 'Tags', values: 'Tags values' }]}
           countText={getTextFilterCounterServerSideText(items, pagesCount, pageSize)}
           expandToViewport={true}
+          enableTokenGroups={true}
         />
       }
       pagination={

src/pages/table-date-filter/table-date-filter-forms.jsx

@@ -5,7 +5,6 @@ import Calendar from '@cloudscape-design/components/calendar';
 import DateInput from '@cloudscape-design/components/date-input';
 import FormField from '@cloudscape-design/components/form-field';
 import TimeInput from '@cloudscape-design/components/time-input';
-import SpaceBetween from '@cloudscape-design/components/space-between';
 import DatePicker from '@cloudscape-design/components/date-picker';
 
 export function DateTimeForm({ filter, operator, value, onChange }) {
@@ -61,11 +60,11 @@ export function DateTimeForm({ filter, operator, value, onChange }) {
   if (typeof filter !== 'undefined') {
     return (
       <div className="date-time-form">
-        <FormField description="Date" constraintText="Use YYYY/MM/DD format.">
+        <FormField description="Date">
           <DateInput {...dateInputProps} />
         </FormField>
 
-        <FormField description="Time" constraintText="Use 24-hour format.">
+        <FormField description="Time">
           <TimeInput {...timeInputProps} />
         </FormField>
 
@@ -75,15 +74,15 @@ export function DateTimeForm({ filter, operator, value, onChange }) {
   }
 
   return (
-    <SpaceBetween direction="vertical" size="m">
-      <FormField description="Date" constraintText="Use YYYY/MM/DD format.">
+    <div className="date-time-form">
+      <FormField description="Date">
         <DatePicker {...dateInputProps} {...calendarProps} />
       </FormField>
 
-      <FormField description="Time" constraintText="Use 24-hour format.">
+      <FormField description="Time">
         <TimeInput {...timeInputProps} />
       </FormField>
-    </SpaceBetween>
+    </div>
   );
 }
 

src/pages/table-expandable/index.tsx

@@ -191,6 +191,7 @@ function App() {
                 filteringOptions={filteringOptions}
                 countText={getTextFilterCounterText(filteredItemsCount ?? 0)}
                 filteringPlaceholder="Search databases"
+                enableTokenGroups={true}
               />
             }
             expandableRows={expandableRows}

src/pages/table-property-filter/property-filter-table.jsx

@@ -91,6 +91,7 @@ export function PropertyFilterTable({
           i18nStrings={propertyFilterI18nStrings}
           countText={getTextFilterCounterText(filteredItemsCount)}
           expandToViewport={true}
+          enableTokenGroups={true}
         />
       }
       pagination={<Pagination {...paginationProps} />}

src/pages/table-saved-filters/filter-set-modals.tsx

@@ -16,32 +16,39 @@ function queryToString(
   query: PropertyFilterProps.Query,
   filteringProperties?: readonly PropertyFilterProps.FilteringProperty[]
 ): string {
-  return query.tokens
-    .map(({ operator, value, propertyKey }) => {
-      if (propertyKey) {
-        const property = filteringProperties?.find(({ key }) => key === propertyKey);
-        const keyLabel = property?.propertyLabel ?? propertyKey;
+  function tokenToString({ operator, value, propertyKey }: PropertyFilterProps.Token): string {
+    if (propertyKey) {
+      const property = filteringProperties?.find(({ key }) => key === propertyKey);
+      const keyLabel = property?.propertyLabel ?? propertyKey;
 
-        let valueLabel = value;
+      let valueLabel = value;
 
-        // See if there is a custom value formatter defined for this property and operator
-        if (property && property.operators) {
-          property.operators.forEach(propertyOperator => {
-            if (
-              typeof propertyOperator !== 'string' &&
-              propertyOperator.operator === operator &&
-              propertyOperator.format
-            ) {
-              valueLabel = propertyOperator.format(value);
-            }
-          });
-        }
-
-        return `${keyLabel} ${operator} ${valueLabel}`;
+      // See if there is a custom value formatter defined for this property and operator
+      if (property && property.operators) {
+        property.operators.forEach(propertyOperator => {
+          if (
+            typeof propertyOperator !== 'string' &&
+            propertyOperator.operator === operator &&
+            propertyOperator.format
+          ) {
+            valueLabel = propertyOperator.format(value);
+          }
+        });
       }
-      return value;
-    })
-    .join(`, ${query.operation} `);
+      return `${keyLabel} ${operator} ${valueLabel}`;
+    }
+    return operator === ':' ? value : `${operator} ${value}`;
+  }
+
+  function tokenOrGroupToString(tokenOrGroup: PropertyFilterProps.TokenGroup | PropertyFilterProps.Token): string {
+    if ('operation' in tokenOrGroup) {
+      return '(' + tokenOrGroup.tokens.map(tokenOrGroupToString).join(`, ${tokenOrGroup.operation} `) + ')';
+    } else {
+      return tokenToString(tokenOrGroup);
+    }
+  }
+
+  return (query.tokenGroups || query.tokens).map(tokenOrGroupToString).join(`, ${query.operation} `);
 }
 
 export function SaveFilterSetModal({

src/pages/table-saved-filters/index.jsx

@@ -3,15 +3,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useCollection } from '@cloudscape-design/collection-hooks';
-import {
-  ButtonDropdown,
-  FormField,
-  Flashbar,
-  Pagination,
-  PropertyFilter,
-  Select,
-  Table,
-} from '@cloudscape-design/components';
+import { ButtonDropdown, Flashbar, Pagination, PropertyFilter, Select, Table } from '@cloudscape-design/components';
 import { FILTERING_PROPERTIES } from '../table-property-filter/table-property-filter-config';
 import { COLUMN_DEFINITIONS, DEFAULT_PREFERENCES } from '../commons/table-config';
 import { useDisclaimerFlashbarItem } from '../commons/disclaimer-flashbar-item';
@@ -50,6 +42,23 @@ const defaultFilterSets = [
       tokens: [{ propertyKey: 'origin', operator: ':', value: 'BUCKET' }],
     },
   },
+  {
+    name: 'Best performance in buckets 1,2',
+    query: {
+      operation: 'and',
+      tokenGroups: [
+        {
+          operation: 'or',
+          tokens: [
+            { propertyKey: 'origin', operator: '=', value: 'EXAMPLE-BUCKET-1.s3.amazon' },
+            { propertyKey: 'origin', operator: '=', value: 'EXAMPLE-BUCKET-2.s3.amazon' },
+          ],
+        },
+        { propertyKey: 'priceClass', operator: '=', value: 'Use all edge locations (best performance)' },
+      ],
+      tokens: [],
+    },
+  },
 ];
 
 function App() {
@@ -170,6 +179,7 @@ function App() {
                 i18nStrings={propertyFilterI18nStrings}
                 countText={getTextFilterCounterText(filteredItemsCount)}
                 expandToViewport={true}
+                enableTokenGroups={true}
                 customControl={
                   <Select
                     {...selectProps}

src/pages/table-saved-filters/use-filter-sets.tsx

@@ -6,6 +6,7 @@ import { ButtonDropdownProps } from '@cloudscape-design/components/button-dropdo
 import { SelectProps } from '@cloudscape-design/components/select';
 import { DeleteFilterSetModal, SaveFilterSetModal, UpdateFilterSetModal } from './filter-set-modals';
 import { FlashbarProps } from '@cloudscape-design/components/flashbar';
+import { isEqual } from 'lodash';
 
 export interface FilterSet {
   name: string;
@@ -34,18 +35,12 @@ export interface UseFilterSetsResult {
 
 type FilterAction = 'update' | 'new' | 'delete';
 
+function isQueryEmpty(query: PropertyFilterProps.Query) {
+  return (!query.tokenGroups || query.tokenGroups.length === 0) && query.tokens.length === 0;
+}
+
 function isQueryEqual(queryA: PropertyFilterProps.Query, queryB: PropertyFilterProps.Query) {
-  return (
-    queryA.operation === queryB.operation &&
-    queryA.tokens.length === queryB.tokens.length &&
-    queryA.tokens.every((_, i) => {
-      return (
-        queryA.tokens[i].operator === queryB.tokens[i].operator &&
-        queryA.tokens[i].value === queryB.tokens[i].value &&
-        queryA.tokens[i].propertyKey === queryB.tokens[i].propertyKey
-      );
-    })
-  );
+  return isEqual(queryA, queryB);
 }
 
 export function useFilterSets({
@@ -89,10 +84,10 @@ export function useFilterSets({
     : filterSetOptions.find(({ value }) => value === selectedFilterSetValue) ?? null;
 
   useEffect(() => {
-    const hasFilters = query.tokens.length > 0;
+    const hasFilters = !isQueryEmpty(query);
 
     // Reset everything if there are no filters
-    if (query.tokens.length === 0) {
+    if (!hasFilters) {
       setHasUnsavedChanges(false);
       setCurrentFilterSet(null);
       setSelectedFilterSetValue(null);

src/styles/table-date-filter.scss

@@ -9,8 +9,9 @@
   grid-template-columns: auto;
   gap: cs.$space-scaled-s;
 }
+
 @media (min-width: 688px) {
   .date-time-form {
-    grid-template-columns: min-content minmax(100px, max-content);
+    grid-template-columns: repeat(2, minmax(100px, max-content));
   }
 }

test/e2e/table-saved-filters.test.ts

@@ -5,6 +5,7 @@ import TableSavedFiltersPageObject from './page/table-saved-filters-page-object'
 import commonTableTests from './common/table/table-tests';
 import commonPropertyFilteringTests from './common/table/table-property-filtering-tests';
 import commonPreferencesTests from './common/table/table-preferences-tests';
+import createWrapper from '@cloudscape-design/board-components/test-utils/selectors';
 
 describe('Table - Saved Filters', () => {
   const setupTest = (testFn: { (page: TableSavedFiltersPageObject): Promise<void> }) => {
@@ -21,9 +22,9 @@ describe('Table - Saved Filters', () => {
   commonPropertyFilteringTests(setupTest);
 
   test(
-    'Has two default saved filter sets',
+    'Has three default saved filter sets',
     setupTest(async page => {
-      await expect(page.countSavedFilterSets()).resolves.toBe(2);
+      await expect(page.countSavedFilterSets()).resolves.toBe(3);
     })
   );
 
@@ -140,4 +141,18 @@ describe('Table - Saved Filters', () => {
       await expect(page.getSelectedFilterSet()).resolves.toBe('Choose a filter set');
     })
   );
+
+  test(
+    'Parses filter set with groups correctly',
+    setupTest(async page => {
+      await page.selectSavedFilterSet(3);
+      await expect(page.countTokens()).resolves.toBe(2);
+      await expect(page.getSelectedFilterSet()).resolves.toBe('Best performance in buckets 1,2');
+
+      await page.openSaveFilterModal();
+      await expect(page.getText(createWrapper().findModal().toSelector())).resolves.toContain(
+        '(Origin = EXAMPLE-BUCKET-1.s3.amazon, or Origin = EXAMPLE-BUCKET-2.s3.amazon), and Price class = Use all edge locations (best performance)'
+      );
+    })
+  );
 });