FE: Fix table filter module name

Author: Vixtir

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Column } from '@tanstack/react-table';
+
+import * as FilterVariant from './variants';
+
+interface FilterProps<T> {
+  column: Column<T, unknown>;
+}
+export const Filter = <T,>(props: FilterProps<T>) => {
+  const { column } = props;
+
+  switch (column.columnDef.meta?.filterVariant) {
+    case 'multi-select': {
+      return <FilterVariant.MultiSelect column={column} />;
+    }
+    default: {
+      throw Error('Not implemented filter');
+    }
+  }
+};
+
+export default Filter;

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 { getFilterableColumns } from './lib/getFilterableColumns';
+export default Filter;

frontend/src/components/common/NewTable/Filter/lib/getFilterableColumns.ts

@@ -0,0 +1,19 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { FilterableColumnDef } from 'components/common/NewTable/Filter/types';
+
+export function isFilterableColumn<TData, TValue>(
+  column: ColumnDef<TData, TValue>
+): column is FilterableColumnDef<TData, TValue> {
+  return (
+    'accessorKey' in column &&
+    typeof column.accessorKey === 'string' &&
+    !!column.meta &&
+    'filterVariant' in column.meta
+  );
+}
+
+export function getFilterableColumns<TData, TValue>(
+  columns: ColumnDef<TData, TValue>[]
+): FilterableColumnDef<TData, TValue>[] {
+  return columns.filter(isFilterableColumn);
+}

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

@@ -0,0 +1,6 @@
+export {
+  getFilterableColumns,
+  isFilterableColumn,
+} from './getFilterableColumns';
+
+export { type Persister, useQueryPersister } from './persisters/index';

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

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

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

@@ -0,0 +1,127 @@
+import {
+  ColumnDef,
+  ColumnFilter,
+  ColumnFiltersState,
+} from '@tanstack/react-table';
+import { useSearchParams } from 'react-router-dom';
+import {
+  FilterableColumnDef,
+  KafbatFilterVariant,
+  getFilterableColumns,
+} from 'components/common/NewTable/Filter';
+import { useCallback, useMemo } from 'react';
+
+import { Persister } from './types';
+
+function getParamsByKeys(
+  params: URLSearchParams,
+  keyToFilterVariant: {
+    [k: string]: KafbatFilterVariant;
+  }
+) {
+  return Object.entries(keyToFilterVariant).reduce(
+    (acc, [key, variant]) => {
+      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;
+        }
+      }
+      return acc;
+    },
+    {} 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>[]
+): {
+  [k: string]: KafbatFilterVariant;
+} {
+  return columns.reduce(
+    (acc, cur) => {
+      if (cur.meta?.filterVariant) {
+        const key = normalizeAccessorKey(cur.accessorKey);
+        acc[key] = cur.meta?.filterVariant;
+      }
+
+      return acc;
+    },
+    {} as Record<string, KafbatFilterVariant>
+  );
+}
+
+function isEmptyFilterValue(columnFilter: ColumnFilter): boolean {
+  if (Array.isArray(columnFilter.value) && columnFilter.value.length === 0) {
+    return true;
+  }
+
+  return columnFilter.value === undefined;
+}
+
+export function useQueryPersister<TData, TValue>(
+  columns: ColumnDef<TData, TValue>[]
+): Persister {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const keyToFilterVariant = useMemo(() => {
+    const filterableColumns = getFilterableColumns(columns);
+
+    return mapColumnKeyToFilterVariant(filterableColumns);
+  }, [columns]);
+
+  const getPrevState = useCallback(() => {
+    const filterParams = getParamsByKeys(searchParams, keyToFilterVariant);
+    const prevState: ColumnFiltersState = Object.entries(filterParams).map(
+      ([id, value]) => {
+        return { id, value };
+      }
+    );
+    return prevState;
+  }, [searchParams, keyToFilterVariant]);
+
+  const update: Persister['update'] = useCallback(
+    (nextState: ColumnFiltersState, resetPage: boolean = true) => {
+      const prevState: ColumnFiltersState = getPrevState();
+
+      const nextKeys = new Set();
+      nextState.forEach((columnFilter) => {
+        if (!isEmptyFilterValue(columnFilter)) {
+          nextKeys.add(columnFilter.id);
+          searchParams.set(columnFilter.id, String(columnFilter.value));
+        }
+      });
+
+      prevState
+        .map(({ id }) => id)
+        .forEach((key) => {
+          if (!nextKeys.has(key)) {
+            searchParams.delete(key);
+          }
+        });
+
+      if (resetPage) {
+        searchParams.delete('page');
+      }
+
+      setSearchParams(searchParams);
+    },
+    [getPrevState, searchParams]
+  );
+
+  return useMemo(
+    () => ({
+      getPrevState,
+      update,
+    }),
+    [getPrevState, update]
+  );
+}
+export default useQueryPersister;

frontend/src/components/common/NewTable/Filter/lib/persisters/types.ts

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

frontend/src/components/common/NewTable/Filter/types.ts

@@ -0,0 +1,24 @@
+import {
+  ColumnDef,
+  ColumnMeta,
+  FilterFnOption,
+  RowData,
+} from '@tanstack/react-table';
+import { FullConnectorInfo } from 'generated-sources';
+
+export type KafbatFilterVariant<T = RowData> = ColumnMeta<
+  T,
+  unknown
+>['filterVariant'];
+
+export type FilterableColumnDef<TData = RowData, TValue = unknown> = ColumnDef<
+  TData,
+  TValue
+> &
+  Required<{
+    filterFn: FilterFnOption<FullConnectorInfo>;
+    accessorKey: string;
+    meta: ColumnMeta<TData, TValue> & {
+      filterVariant: KafbatFilterVariant;
+    };
+  }>;

frontend/src/components/common/NewTable/Filter/variants/MultiSelect/MultiSelect.styled.tsx

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+import { MultiSelect as ReactMultiSelect } from 'react-multi-select-component';
+
+export const MultiSelect = styled(ReactMultiSelect)<{
+  minWidth?: string;
+  height?: string;
+}>`
+  font-size: 14px;
+  padding-right: 12px;
+  .search input {
+    color: ${({ theme }) => theme.input.color.normal};
+    background-color: ${(props) =>
+      props.theme.input.backgroundColor.normal} !important;
+  }
+  .select-item {
+    color: ${({ theme }) => theme.select.color.normal};
+    background-color: ${({ theme }) =>
+      theme.select.backgroundColor.normal} !important;
+
+    &:active {
+      background-color: ${({ theme }) =>
+        theme.select.backgroundColor.active} !important;
+    }
+  }
+  .select-item.selected {
+    background-color: ${({ theme }) =>
+      theme.select.backgroundColor.active} !important;
+  }
+  .options li {
+    background-color: ${({ theme }) =>
+      theme.select.backgroundColor.normal} !important;
+  }
+
+  & > .dropdown-container {
+    border: none !important;
+    background-color: ${({ theme }) =>
+      theme.input.backgroundColor.normal} !important;
+    border-color: ${({ theme }) => theme.select.borderColor.normal} !important;
+    &:hover {
+      border-color: ${({ theme }) => theme.select.borderColor.hover} !important;
+    }
+
+    height: ${({ height }) => height ?? '32px'};
+    * {
+      cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+    }
+
+    & > .dropdown-content {
+      width: fit-content;
+      min-width: 120px;
+      right: 0px;
+    }
+
+    & > .dropdown-heading {
+      height: ${({ height }) => height ?? '32px'};
+      color: ${({ disabled, theme }) =>
+        disabled
+          ? theme.select.color.disabled
+          : theme.select.color.active} !important;
+      & > .dropdown-heading-value {
+        color: ${({ theme }) => theme.table.filter.multiSelect.value.color};
+      }
+    }
+  }
+
+  & .clear-selected-button + div {
+    color: ${({ theme }) =>
+      theme.table.filter.multiSelect.filterIcon.fill.active};
+  }
+`;

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

@@ -0,0 +1,58 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Column } from '@tanstack/react-table';
+
+import * as S from './MultiSelect.styled';
+import { type Option } from './types';
+import {
+  toOption,
+  getOptionValue,
+  customValueRenderer,
+  sortOptionSelectedFirst,
+} from './lib';
+import FilterIcon from './ui/FilterIcon';
+import ClearIcon from './ui/ClearIcon';
+
+interface Props<T, K = string> {
+  column: Column<T, K>;
+}
+
+function MultiSelect<T, K = string>(props: Props<T, K>) {
+  const { column } = props;
+
+  const [selectedOptions, setValues] = useState<Option[]>(() => {
+    const value = column.getFilterValue() as string[] | undefined;
+
+    if (value) {
+      return value.map(toOption);
+    }
+
+    return [];
+  });
+
+  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));
+    setValues(options);
+  }, []);
+
+  return (
+    <S.MultiSelect
+      options={sortedOptions}
+      value={selectedOptions}
+      onChange={onSelect}
+      labelledBy=""
+      valueRenderer={customValueRenderer}
+      ArrowRenderer={FilterIcon}
+      hasSelectAll
+      ClearSelectedIcon={<ClearIcon />}
+    />
+  );
+}
+
+export default MultiSelect;