feat: Add customFilterActions slot to property filter (#1591)

pages/property-filter/permutations.page.tsx

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import { ButtonDropdown } from '~components';
 import PropertyFilter, { PropertyFilterProps } from '~components/property-filter';
 import Select from '~components/select';
 import FormField from '~components/form-field';
@@ -93,6 +94,22 @@ const permutations = createPermutations<Partial<PropertyFilterProps>>([
       </FormField>,
     ],
   },
+  {
+    query: [
+      { tokens: [], operation: 'and' },
+      {
+        tokens: [
+          { value: '123', operator: ':' },
+          { value: '234', operator: '!:' },
+          { propertyKey: 'instanceid', value: '345', operator: '=' },
+        ],
+        operation: 'and',
+      },
+    ],
+    customFilterActions: [
+      <ButtonDropdown key={0} mainAction={{ text: 'Clear filters' }} items={[]} ariaLabel="Filter actions" />,
+    ],
+  },
 ]);
 
 export default function () {

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -10730,6 +10730,12 @@ filter queries only after an initial filter is applied.",
       "isDefault": false,
       "name": "customControl",
     },
+    Object {
+      "description": "A slot that replaces the standard \\"Clear filter\\" button.
+When using this slot, make sure to still provide a mechanism to clear all filters.",
+      "isDefault": false,
+      "name": "customFilterActions",
+    },
     Object {
       "description": "Displayed when there are no options to display.
 This is only shown when \`statusType\` is set to \`finished\` or not set at all.",

src/property-filter/__tests__/property-filter.test.tsx

@@ -1343,6 +1343,22 @@ describe('property filter parts', () => {
     });
   });
 
+  describe('custom element slots', () => {
+    test('can define a customControl element', () => {
+      const { propertyFilterWrapper } = renderComponent({ customControl: <div>Custom</div> });
+      expect(propertyFilterWrapper.findCustomControl()?.getElement()).toHaveTextContent('Custom');
+    });
+
+    test('can define a customFilterAction that replaces the clear filters button', () => {
+      const { propertyFilterWrapper } = renderComponent({
+        customFilterActions: <div>Custom actions</div>,
+        query: { tokens: [{ value: 'free text', operator: '=' }], operation: 'and' },
+      });
+      expect(propertyFilterWrapper.findRemoveAllButton()).toBeNull();
+      expect(propertyFilterWrapper.findCustomFilterActions()?.getElement()).toHaveTextContent('Custom actions');
+    });
+  });
+
   test('property filter input can be found with autosuggest selector', () => {
     const { container } = renderComponent();
     expect(createWrapper(container).findAutosuggest()!.getElement()).not.toBe(null);

src/property-filter/index.tsx

@@ -79,6 +79,7 @@ const PropertyFilter = React.forwardRef(
       onLoadItems,
       virtualScroll,
       customControl,
+      customFilterActions,
       filteringPlaceholder,
       filteringAriaLabel,
       filteringEmpty,
@@ -407,14 +408,18 @@ const PropertyFilter = React.forwardRef(
                   limitShowMore: i18nStrings.tokenLimitShowMore,
                 }}
                 after={
-                  <InternalButton
-                    formAction="none"
-                    onClick={removeAllTokens}
-                    className={styles['remove-all']}
-                    disabled={disabled}
-                  >
-                    {i18nStrings.clearFiltersText}
-                  </InternalButton>
+                  customFilterActions ? (
+                    <div className={styles['custom-filter-actions']}>{customFilterActions}</div>
+                  ) : (
+                    <InternalButton
+                      formAction="none"
+                      onClick={removeAllTokens}
+                      className={styles['remove-all']}
+                      disabled={disabled}
+                    >
+                      {i18nStrings.clearFiltersText}
+                    </InternalButton>
+                  )
                 }
                 removedItemIndex={removedTokenIndex}
               />

src/property-filter/interfaces.ts

@@ -131,6 +131,11 @@ export interface PropertyFilterProps extends BaseComponentProps, ExpandToViewpor
    * filter queries only after an initial filter is applied.
    */
   customControl?: React.ReactNode;
+  /**
+   * A slot that replaces the standard "Clear filter" button.
+   * When using this slot, make sure to still provide a mechanism to clear all filters.
+   */
+  customFilterActions?: React.ReactNode;
   /**
    * Set `asyncProperties` if you need to load `filteringProperties` asynchronousely. This would cause extra `onLoadMore`
    * events to fire calling for more properties.

src/property-filter/styles.scss

@@ -103,6 +103,7 @@
 
 .remove-all,
 .token-label,
-.join-operation {
+.join-operation,
+.custom-filter-actions {
   /* used in test-utils */
 }

src/test-utils/dom/property-filter/index.ts

@@ -34,4 +34,18 @@ export default class PropertyFilterWrapper extends AutosuggestWrapper {
   findRemoveAllButton(): ElementWrapper | null {
     return this.findByClassName(styles['remove-all']);
   }
+
+  /**
+   * Returns the element containing the `customControl` slot.
+   */
+  findCustomControl(): ElementWrapper | null {
+    return this.findByClassName(styles['custom-control']);
+  }
+
+  /**
+   * Returns the element containing the `customFilterActions` slot.
+   */
+  findCustomFilterActions(): ElementWrapper | null {
+    return this.findByClassName(styles['custom-filter-actions']);
+  }
 }