BWS-205: + search input to all tables

frontend/src/components/common/input/input.tsx

@@ -18,6 +18,8 @@ type Props = {
   type?: InputType;
   placeholder?: string;
   rows?: number;
+  value?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
 
 const Input: FC<Props> = ({
@@ -28,6 +30,8 @@ const Input: FC<Props> = ({
   placeholder = '',
   type = InputType.TEXT,
   rows,
+  value,
+  onChange,
 }) => {
   const { field } = useFormControl({ name, control });
   const hasError = Boolean(errors[name]);
@@ -60,6 +64,8 @@ const Input: FC<Props> = ({
             className={getValidClasses(
               hasError ? styles.inputError : styles.input,
             )}
+            value={value}
+            onChange={onChange}
           />
         )}
       </span>

frontend/src/components/common/table/components/components.ts

@@ -0,0 +1 @@
+export { GlobalFilter } from './global-filter/global-filter';

frontend/src/components/common/table/components/global-filter/global-filter.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import { FilterValue, useAsyncDebounce } from 'react-table';
+import { useState, useAppForm } from 'hooks/hooks';
+import { Input } from 'components/common/common';
+import { InputType } from 'common/enums/enums';
+
+type Props = {
+  globalFilter: string;
+  setGlobalFilter: (filterValue: FilterValue) => void;
+};
+
+const GlobalFilter: FC<Props> = ({ globalFilter, setGlobalFilter }) => {
+  const { control, errors } = useAppForm({
+    defaultValues: { search: '' },
+  });
+
+  const [value, setValue] = useState(globalFilter);
+  const onChange = useAsyncDebounce((value) => {
+    setGlobalFilter(value || undefined);
+  }, 200);
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    setValue(event.target.value);
+    onChange(event.target.value);
+  };
+
+  return (
+    <Input
+      type={InputType.TEXT}
+      label=""
+      placeholder="Search"
+      name={'search'}
+      control={control}
+      errors={errors}
+      value={value || ''}
+      onChange={handleFilterInputChange}
+    />
+  );
+};
+
+export { GlobalFilter };

frontend/src/components/common/table/table-config.d.ts

@@ -4,6 +4,7 @@ import {
   UseResizeColumnsColumnProps,
   UseSortByOptions,
   UseSortByColumnProps,
+  UseGlobalFiltersState,
 } from 'react-table';
 
 declare module 'react-table' {
@@ -20,4 +21,14 @@ declare module 'react-table' {
     D extends Record<string, unknown> = Record<string, unknown>,
   > extends UseResizeColumnsColumnProps<D>,
       UseSortByColumnProps<D> {}
+
+  export interface TableState<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderState<D>,
+      UseGlobalFiltersState<D> {}
+
+  export interface TableInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D> {}
 }

frontend/src/components/common/table/table.tsx

@@ -5,11 +5,13 @@ import {
   useResizeColumns,
   useSortBy,
   useTable,
+  useGlobalFilter,
 } from 'react-table';
 import { getValidClasses } from 'helpers/helpers';
 import styles from './styles.module.scss';
 import { Pagination } from 'components/pagination/pagination';
 import { Loader } from 'components/common/common';
+import { GlobalFilter } from './components/components';
 
 type Props = {
   columns: Column[];
@@ -39,16 +41,24 @@ const Table: FC<Props> = ({
   dataTestid,
   isLoading,
 }) => {
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
-    useTable(
-      {
-        columns: columns as Column<Record<string, string>>[],
-        data: data as Record<string, string>[],
-      },
-      useSortBy,
-      useBlockLayout,
-      useResizeColumns,
-    );
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state,
+    setGlobalFilter,
+  } = useTable(
+    {
+      columns: columns as Column<Record<string, string>>[],
+      data: data as Record<string, string>[],
+    },
+    useGlobalFilter,
+    useSortBy,
+    useBlockLayout,
+    useResizeColumns,
+  );
 
   const hasStrPlaceholder = Boolean(placeholder);
   const hasData = Boolean(data.length);
@@ -66,6 +76,10 @@ const Table: FC<Props> = ({
           {children}
         </header>
       )}
+      <GlobalFilter
+        globalFilter={state.globalFilter}
+        setGlobalFilter={setGlobalFilter}
+      />
       <div className={styles.tableContainer}>
         {isLoading ? (
           <Loader />