Table: Fix filter crashes table (#48258)

(cherry picked from commit 9df26c7)
grafana · Apr 26, 2022 · 5b8d34c · 5b8d34c
1 parent 7ea5d25
commit 5b8d34c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git 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
@@ -177,4 +177,35 @@ describe('Table', () => {
       ]);
     });
   });
+
+  describe('on filtering', () => {
+    it('the rows should be filtered', async () => {
+      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);
+
+      await userEvent.click(within(getColumnHeader(/number/)).getByRole('filterIcon'));
+      await userEvent.click(screen.getByLabelText('1'));
+      await 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
@@ -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;