From a5fd91e4925f262ae69dff91b94bc73f28dcd313 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 26 Apr 2022 08:04:30 -0400
Subject: [PATCH] Table: Fix filter crashes table (#48258) (#48261)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 9df26c7b7c1c706a3ef1942604a269779c50aea5)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
---
 .../src/components/Table/Filter.tsx           |  1 +
 .../src/components/Table/Table.test.tsx       | 31 +++++++++++++++++++
 .../grafana-ui/src/components/Table/Table.tsx |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Table/Filter.tsx b/packages/grafana-ui/src/components/Table/Filter.tsx
index 824bcdfc3b2..cae40aea9a2 100644
--- a/packages/grafana-ui/src/components/Table/Filter.tsx
+++ b/packages/grafana-ui/src/components/Table/Filter.tsx
@@ -32,6 +32,7 @@ export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
     <span
       className={cx(tableStyles.headerFilter, filterEnabled ? styles.filterIconEnabled : styles.filterIconDisabled)}
       ref={ref}
+      role="filterIcon"
       onClick={onShowPopover}
     >
       <Icon name="filter" />
diff --git a/packages/grafana-ui/src/components/Table/Table.test.tsx b/packages/grafana-ui/src/components/Table/Table.test.tsx
index 5a6c88246ed..95c2ffc78f9 100644
--- a/packages/grafana-ui/src/components/Table/Table.test.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.test.tsx
@@ -177,4 +177,35 @@ describe('Table', () => {
       ]);
     });
   });
+
+  describe('on filtering', () => {
+    it('the rows should be filtered', () => {
+      getTestContext({
+        data: toDataFrame({
+          name: 'A',
+          fields: [
+            {
+              name: 'number',
+              type: FieldType.number,
+              values: [1, 1, 1, 2, 2, 3, 4, 5],
+              config: {
+                custom: {
+                  filterable: true,
+                },
+              },
+            },
+          ],
+        }),
+      });
+
+      expect(within(getTable()).getAllByRole('row')).toHaveLength(9);
+
+      userEvent.click(within(getColumnHeader(/number/)).getByRole('filterIcon'));
+      userEvent.click(screen.getByLabelText('1'));
+      userEvent.click(screen.getByText('Ok'));
+
+      // 3 + header row
+      expect(within(getTable()).getAllByRole('row')).toHaveLength(4);
+    });
+  });
 });
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 7e407d12e04..1ca8e3a9ab8 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -251,7 +251,7 @@ export const Table: FC<Props> = memo((props: Props) => {
     [gotoPage]
   );
 
-  const itemCount = enablePagination ? page.length : data.length;
+  const itemCount = enablePagination ? page.length : rows.length;
   let paginationEl = null;
   if (enablePagination) {
     const itemsRangeStart = state.pageIndex * state.pageSize + 1;