Add clean filter value button

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Update ESLint configuration and sort imports (#93)
 - Update Safari layout for favorites (#97)
 - Update to Grafana 10.2.1 (#98)
+- Add clean filter value button (#99)
 
 ## 2.1.0 (2023-11-08)
 

src/components/Table/Filter.tsx

@@ -86,6 +86,16 @@ export const Filter = <TableData extends object>({ column, alwaysVisible }: Prop
       onChange={onChangeFilterValue}
       className={styles.filterInput}
       data-testid={TestIds.table.fieldFilterValue}
+      addonAfter={
+        columnFilterValue ? (
+          <Button
+            variant="secondary"
+            icon="times"
+            onClick={() => column.setFilterValue('')}
+            data-testid={TestIds.table.buttonCleanFilterValue}
+          />
+        ) : null
+      }
     />
   );
 

src/components/Table/Table.test.tsx

@@ -158,6 +158,57 @@ describe('Table', () => {
     expect(selectors.cell(true, 'device2', 0)).not.toBeInTheDocument();
   });
 
+  it('Should clean value filter', async () => {
+    render(
+      getComponent({
+        showHeader: true,
+        columns: [
+          {
+            id: 'value',
+            header: 'cell header',
+            accessorKey: 'value',
+            enableColumnFilter: true,
+            cell: ({ getValue, row }: any) => {
+              const value = getValue() as string;
+              return <span data-testid={InTestIds.cell(value, row.depth)}>{value}</span>;
+            },
+          },
+        ],
+        data: [{ value: 'device1' }, { value: 'device2' }],
+      })
+    );
+
+    /**
+     * Check Filter presence
+     */
+    expect(selectors.buttonFilter()).toBeInTheDocument();
+    expect(selectors.fieldFilterValue(true)).not.toBeInTheDocument();
+
+    /**
+     * Open Filter
+     */
+    fireEvent.click(selectors.buttonFilter());
+
+    /**
+     * Check Filter Content Presence
+     */
+    expect(selectors.fieldFilterValue()).toBeInTheDocument();
+
+    /**
+     * Apply filter
+     */
+    await act(() => fireEvent.change(selectors.fieldFilterValue(), { target: { value: 'device1' } }));
+
+    expect(selectors.buttonCleanFilterValue()).toBeInTheDocument();
+
+    /**
+     * Clean filter value
+     */
+    await act(async () => fireEvent.click(selectors.buttonCleanFilterValue()));
+
+    expect(selectors.fieldFilterValue()).toHaveValue('');
+  });
+
   it('Should always show value filter', async () => {
     render(
       getComponent({

src/constants/tests.ts

@@ -20,6 +20,7 @@ export const TestIds = {
     favoritesControl: 'data-testid table favorites-control',
     favoritesFilter: 'data-testid table favorites-filter',
     fieldFilterValue: 'data-testid table field-filter-value',
+    buttonCleanFilterValue: 'data-testid table button-clean-filter-value',
     header: 'data-testid table header',
     label: 'data-testid table label',
   },