FE: Add ability to reset pagination after filter change

Author: Vixtir

frontend/src/components/Connect/List/List.tsx

@@ -7,8 +7,7 @@ import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
-import { useQueryPersister } from 'components/common/NewTable/Filter/lib/persisters';
-import { getFilterableColumns } from 'components/common/NewTable/Filter/lib';
+import { useQueryPersister } from 'components/common/NewTable/Filter';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
@@ -60,8 +59,6 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
   { header: '', id: 'action', cell: ActionsCell },
 ];
 
-const filterableColumns = getFilterableColumns(kafkaConnectColumns);
-
 const List: React.FC = () => {
   const navigate = useNavigate();
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -71,7 +68,7 @@ const List: React.FC = () => {
     searchParams.get('q') || ''
   );
 
-  const persister = useQueryPersister(filterableColumns);
+  const persister = useQueryPersister(kafkaConnectColumns);
 
   return (
     <Table

frontend/src/components/common/NewTable/FIlter/Filter.tsx

@@ -6,7 +6,7 @@ import * as FilterVariant from './variants';
 interface FilterProps<T> {
   column: Column<T, unknown>;
 }
-const Filter = <T,>(props: FilterProps<T>) => {
+export const Filter = <T,>(props: FilterProps<T>) => {
   const { column } = props;
 
   switch (column.columnDef.meta?.filterVariant) {

frontend/src/components/common/NewTable/FIlter/index.ts

@@ -0,0 +1,6 @@
+import Filter from './Filter';
+
+export { type FilterableColumnDef, type KafbatFilterVariant } from './types';
+export { type Persister, useQueryPersister } from './lib';
+
+export default Filter;

frontend/src/components/common/NewTable/FIlter/lib/index.ts

@@ -2,3 +2,5 @@ export {
   getFilterableColumns,
   isFilterableColumn,
 } from './getFilterableColumns';
+
+export { type Persister, useQueryPersister } from './persisters/index';

frontend/src/components/common/NewTable/FIlter/lib/persisters/index.ts

@@ -1,3 +1,3 @@
-export { type Persister } from './Persister';
+export { type Persister } from './types';
 
 export { useQueryPersister } from './queryPersister';

frontend/src/components/common/NewTable/FIlter/lib/persisters/queryPersister.ts

@@ -1,12 +1,19 @@
-import { ColumnFilter, ColumnFiltersState } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  ColumnFilter,
+  ColumnFiltersState,
+  noop,
+} from '@tanstack/react-table';
 import { useSearchParams } from 'react-router-dom';
 import {
   FilterableColumnDef,
   KafbatFilterVariant,
-} from 'components/common/NewTable/Filter/types';
+} from 'components/common/NewTable/Filter';
 import { useCallback, useMemo } from 'react';
 
-import { Persister } from './Persister';
+import { getFilterableColumns } from '../getFilterableColumns';
+
+import { Persister } from './types';
 
 function getParamsByKeys(
   params: URLSearchParams,
@@ -19,6 +26,7 @@ function getParamsByKeys(
       const foundValue = params.get(key);
       if (foundValue) {
         if (variant === 'multi-select') {
+          // Array stored to query params as string, we should recover it back to array of values
           acc[key] = foundValue.split(',');
         } else {
           acc[key] = foundValue;
@@ -29,6 +37,10 @@ function getParamsByKeys(
     {} as Record<string, string | string[]>
   );
 }
+// By default tanstack table replace all . in accessrorKey by _
+// We should normalize out filterable columns key accordingly
+const normalizeAccessorKey = (accessorKey: string) =>
+  accessorKey.replace(/\./g, '_');
 
 function mapColumnKeyToFilterVariant<TData, TValue>(
   columns: FilterableColumnDef<TData, TValue>[]
@@ -38,7 +50,8 @@ function mapColumnKeyToFilterVariant<TData, TValue>(
   return columns.reduce(
     (acc, cur) => {
       if (cur.meta?.filterVariant) {
-        acc[cur.accessorKey] = cur.meta?.filterVariant;
+        const key = normalizeAccessorKey(cur.accessorKey);
+        acc[key] = cur.meta?.filterVariant;
       }
 
       return acc;
@@ -56,14 +69,15 @@ function isEmptyFilterValue(columnFilter: ColumnFilter): boolean {
 }
 
 export function useQueryPersister<TData, TValue>(
-  columns: FilterableColumnDef<TData, TValue>[]
+  columns: ColumnDef<TData, TValue>[]
 ): Persister {
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const keyToFilterVariant = useMemo(
-    () => mapColumnKeyToFilterVariant(columns),
-    [columns]
-  );
+  const keyToFilterVariant = useMemo(() => {
+    const filterableColumns = getFilterableColumns(columns);
+
+    return mapColumnKeyToFilterVariant(filterableColumns);
+  }, [columns]);
 
   const getPrevState = useCallback(() => {
     const filterParams = getParamsByKeys(searchParams, keyToFilterVariant);
@@ -75,8 +89,8 @@ export function useQueryPersister<TData, TValue>(
     return prevState;
   }, [searchParams, keyToFilterVariant]);
 
-  const update = useCallback(
-    (nextState: ColumnFiltersState) => {
+  const update: Persister['update'] = useCallback(
+    (nextState: ColumnFiltersState, resetPage: boolean = true) => {
       const prevState: ColumnFiltersState = getPrevState();
 
       const nextKeys = new Set();
@@ -95,6 +109,10 @@ export function useQueryPersister<TData, TValue>(
           }
         });
 
+      if (resetPage) {
+        searchParams.delete('page');
+      }
+
       setSearchParams(searchParams);
     },
     [getPrevState, searchParams]

frontend/src/components/common/NewTable/FIlter/lib/persisters/Persister.ts renamed to frontend/src/components/common/NewTable/FIlter/lib/persisters/types.ts

@@ -2,5 +2,5 @@ import { ColumnFiltersState } from '@tanstack/react-table';
 
 export interface Persister {
   getPrevState: () => ColumnFiltersState;
-  update: (nextState: ColumnFiltersState) => void;
+  update: (nextState: ColumnFiltersState, resetPagination?: boolean) => void;
 }

frontend/src/components/common/NewTable/FIlter/variants/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Column } from '@tanstack/react-table';
 
 import * as S from './MultiSelect.styled';
@@ -19,9 +19,6 @@ interface Props<T, K = string> {
 function MultiSelect<T, K = string>(props: Props<T, K>) {
   const { column } = props;
 
-  const allColumnValues = [...column.getFacetedUniqueValues().keys()].flat();
-  const allOptions = allColumnValues.map(toOption);
-
   const [selectedOptions, setValues] = useState<Option[]>(() => {
     const value = column.getFilterValue() as string[] | undefined;
 
@@ -32,7 +29,12 @@ function MultiSelect<T, K = string>(props: Props<T, K>) {
     return [];
   });
 
-  const sortedOptions = sortOptionSelectedFirst(selectedOptions, allOptions);
+  const allValues = column.getFacetedUniqueValues();
+  const sortedOptions = useMemo(() => {
+    const allColumnValues = [...new Set([...allValues.keys()].flat())];
+    const allOptions = allColumnValues.map(toOption);
+    return sortOptionSelectedFirst(selectedOptions, allOptions);
+  }, [allValues]);
 
   const onSelect = useCallback((options: Option[]) => {
     column.setFilterValue(options.map(getOptionValue));

frontend/src/components/common/NewTable/Table.tsx

@@ -30,7 +30,7 @@ import ExpanderCell from './ExpanderCell';
 import SelectRowCell from './SelectRowCell';
 import SelectRowHeader from './SelectRowHeader';
 import TableHeader from './TableHeader';
-import { Persister } from './Filter/lib/persisters';
+import { type Persister } from './Filter';
 
 export interface TableProps<TData> {
   data: TData[];
@@ -55,6 +55,7 @@ export interface TableProps<TData> {
   enableSorting?: boolean; // Enables sorting for table.
 
   filterPersister?: Persister;
+  resetPaginationOnFilter?: boolean;
 
   // Placeholder for empty table
   emptyMessage?: React.ReactNode;
@@ -150,10 +151,13 @@ function Table<TData>({
   onMouseLeave,
   setRowId,
   filterPersister,
+  resetPaginationOnFilter = true,
 }: TableProps<TData>) {
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
+
   const [rowSelection, setRowSelection] = React.useState({});
+
   const onSortingChange = React.useCallback(
     (updater: UpdaterFn<SortingState>) => {
       const newState = updateSortingState(updater, searchParams);
@@ -178,7 +182,7 @@ function Table<TData>({
       return (updater: UpdaterFn<ColumnFiltersState>) => {
         const prevState = filterPersister.getPrevState();
         const nextState = updater(prevState);
-        filterPersister.update(nextState);
+        filterPersister.update(nextState, resetPaginationOnFilter);
         return nextState;
       };
     }

frontend/src/components/common/NewTable/TableHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Header, flexRender } from '@tanstack/react-table';
 
 import * as S from './Table.styled';
-import Filter from './Filter/Filter';
+import Filter from './Filter';
 
 interface TableHeaderProps<TData> {
   header: Header<TData, unknown>;