Refactor/filters (#498)

* wip * - Added scopes on useHotkeys - Use new EditableCellV2 - Implemented Recoil Scoped State with specific context - Implemented soft focus position - Factorized open/close editable cell - Removed editable relation old components - Broke down entity table into multiple components - Added Recoil Scope by CellContext - Added Recoil Scope by RowContext * First working version * Use a new EditableCellSoftFocusMode * Fixes * wip * wip * wip * Use company filters * Refactored FilterDropdown into multiple components * Refactored entity search select in dropdown * Renamed states * Fixed people filters * Removed unused code * Cleaned states * Cleaned state * Better naming * fixed rebase * Fix * Fixed stories and mocked data and displayName bug * Fixed cancel sort * Fixed naming * Fixed dropdown height * Fix * Fixed lint
2023-07-04 15:54:58 +02:00
parent 580e6024d0
commit 820ef184d3
78 changed files with 1631 additions and 1229 deletions
--- a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
+++ b/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
@ -8,7 +8,7 @@ import { hoverBackground } from '@/ui/themes/effects';
 import { DropdownMenuButton } from './DropdownMenuButton';

 type Props = {
-  selected: boolean;
+  selected?: boolean;
  onClick: () => void;
  hovered?: boolean;
 };
--- a/front/src/modules/ui/components/table/EntityTable.tsx
+++ b/front/src/modules/ui/components/table/EntityTable.tsx
@ -8,10 +8,6 @@ import {
 } from '@tanstack/react-table';
 import { useRecoilState } from 'recoil';

-import {
-  FilterConfigType,
-  SelectedFilterType,
-} from '@/filters-and-sorts/interfaces/filters/interface';
 import {
  SelectedSortType,
  SortType,
@ -30,9 +26,7 @@ type OwnProps<TData extends { id: string }, SortField> = {
  viewName: string;
  viewIcon?: React.ReactNode;
  availableSorts?: Array<SortType<SortField>>;
-  availableFilters?: FilterConfigType<TData>[];
  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
-  onFiltersUpdate?: (filters: Array<SelectedFilterType<TData>>) => void;
  onRowSelectionChange?: (rowSelection: string[]) => void;
 };

@ -107,9 +101,7 @@ export function EntityTable<TData extends { id: string }, SortField>({
  viewName,
  viewIcon,
  availableSorts,
-  availableFilters,
  onSortsUpdate,
-  onFiltersUpdate,
 }: OwnProps<TData, SortField>) {
  const [currentRowSelection, setCurrentRowSelection] = useRecoilState(
    currentRowSelectionState,
@ -133,9 +125,7 @@ export function EntityTable<TData extends { id: string }, SortField>({
        viewName={viewName}
        viewIcon={viewIcon}
        availableSorts={availableSorts}
-        availableFilters={availableFilters}
        onSortsUpdate={onSortsUpdate}
-        onFiltersUpdate={onFiltersUpdate}
      />
      <StyledTableScrollableContainer>
        <StyledTable>
--- a/front/src/modules/ui/components/table/HooksEntityTable.tsx
+++ b/front/src/modules/ui/components/table/HooksEntityTable.tsx
@ -1,12 +1,16 @@
+import { TableFilterDefinition } from '@/filters-and-sorts/types/TableFilterDefinition';
 import { useInitializeEntityTable } from '@/ui/tables/hooks/useInitializeEntityTable';
+import { useInitializeEntityTableFilters } from '@/ui/tables/hooks/useInitializeEntityTableFilters';
 import { useMapKeyboardToSoftFocus } from '@/ui/tables/hooks/useMapKeyboardToSoftFocus';

 export function HooksEntityTable({
  numberOfColumns,
  numberOfRows,
+  availableTableFilters,
 }: {
  numberOfColumns: number;
  numberOfRows: number;
+  availableTableFilters: TableFilterDefinition[];
 }) {
  useMapKeyboardToSoftFocus();

@ -15,5 +19,9 @@ export function HooksEntityTable({
    numberOfRows,
  });

+  useInitializeEntityTableFilters({
+    availableTableFilters,
+  });
+
  return <></>;
 }
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
@ -1,227 +1,68 @@
-import { ChangeEvent, useCallback, useState } from 'react';
-import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useCallback, useState } from 'react';

-import {
-  FilterableFieldsType,
-  FilterConfigType,
-  FilterOperandType,
-  SelectedFilterType,
-} from '@/filters-and-sorts/interfaces/filters/interface';
-import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
-import { SearchResultsType, useSearch } from '@/search/services/search';
-import { humanReadableDate } from '@/utils/utils';
-
-import DatePicker from '../../form/DatePicker';
-import { DropdownMenuItemContainer } from '../../menu/DropdownMenuItemContainer';
-import { DropdownMenuSelectableItem } from '../../menu/DropdownMenuSelectableItem';
-import { DropdownMenuSeparator } from '../../menu/DropdownMenuSeparator';
+import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
+import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';

 import DropdownButton from './DropdownButton';
+import { FilterDropdownDateSearchInput } from './FilterDropdownDateSearchInput';
+import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInput';
+import { FilterDropdownEntitySelect } from './FilterDropdownEntitySelect';
+import { FilterDropdownFilterSelect } from './FilterDropdownFilterSelect';
+import { FilterDropdownNumberSearchInput } from './FilterDropdownNumberSearchInput';
+import { FilterDropdownOperandButton } from './FilterDropdownOperandButton';
+import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect';
+import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';

-type OwnProps<TData extends FilterableFieldsType> = {
-  isFilterSelected: boolean;
-  availableFilters: FilterConfigType<TData>[];
-  onFilterSelect: (filter: SelectedFilterType<TData>) => void;
-  onFilterRemove: (filterId: SelectedFilterType<TData>['key']) => void;
-};
-
-export const FilterDropdownButton = <TData extends FilterableFieldsType>({
-  availableFilters,
-  onFilterSelect,
-  isFilterSelected,
-  onFilterRemove,
-}: OwnProps<TData>) => {
+export function FilterDropdownButton() {
  const [isUnfolded, setIsUnfolded] = useState(false);
-  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
-    captureHotkeyTypeInFocusState,
+
+  const [
+    isFilterDropdownOperandSelectUnfolded,
+    setIsFilterDropdownOperandSelectUnfolded,
+  ] = useRecoilScopedState(
+    isFilterDropdownOperandSelectUnfoldedScopedState,
+    TableContext,
  );

-  const [selectedEntityId, setSelectedEntityId] = useState<string | null>(null);
+  const [
+    tableFilterDefinitionUsedInDropdown,
+    setTableFilterDefinitionUsedInDropdown,
+  ] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );

-  const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] =
-    useState(false);
+  const [, setFilterDropdownSearchInput] = useRecoilScopedState(
+    filterDropdownSearchInputScopedState,
+    TableContext,
+  );

-  const [selectedFilter, setSelectedFilter] = useState<
-    FilterConfigType<TData> | undefined
-  >(undefined);
+  const [activeTableFilters] = useRecoilScopedState(
+    activeTableFiltersScopedState,
+    TableContext,
+  );

-  const [selectedFilterOperand, setSelectedFilterOperand] = useState<
-    FilterOperandType<TData> | undefined
-  >(undefined);
-
-  const [filterSearchResults, setSearchInput, setFilterSearch] =
-    useSearch<TData>({ currentSelectedId: selectedEntityId });
+  const [selectedOperandInDropdown, setSelectedOperandInDropdown] =
+    useRecoilScopedState(selectedOperandInDropdownScopedState, TableContext);

  const resetState = useCallback(() => {
-    setIsOperandSelectionUnfolded(false);
-    setSelectedFilter(undefined);
-    setSelectedFilterOperand(undefined);
-    setFilterSearch(null);
-  }, [setFilterSearch]);
+    setIsFilterDropdownOperandSelectUnfolded(false);
+    setTableFilterDefinitionUsedInDropdown(null);
+    setSelectedOperandInDropdown(null);
+    setFilterDropdownSearchInput('');
+  }, [
+    setTableFilterDefinitionUsedInDropdown,
+    setSelectedOperandInDropdown,
+    setFilterDropdownSearchInput,
+    setIsFilterDropdownOperandSelectUnfolded,
+  ]);

-  const renderOperandSelection = selectedFilter?.operands.map(
-    (filterOperand, index) => (
-      <DropdownButton.StyledDropdownItem
-        key={`select-filter-operand-${index}`}
-        onClick={() => {
-          setSelectedFilterOperand(filterOperand);
-          setIsOperandSelectionUnfolded(false);
-        }}
-      >
-        {filterOperand.label}
-      </DropdownButton.StyledDropdownItem>
-    ),
-  );
-
-  const renderFilterSelection = availableFilters.map((filter, index) => (
-    <DropdownButton.StyledDropdownItem
-      key={`select-filter-${index}`}
-      onClick={() => {
-        setSelectedFilter(filter);
-        setSelectedFilterOperand(filter.operands[0]);
-        filter.searchConfig && setFilterSearch(filter.searchConfig);
-        setSearchInput('');
-      }}
-    >
-      <DropdownButton.StyledIcon>{filter.icon}</DropdownButton.StyledIcon>
-      {filter.label}
-    </DropdownButton.StyledDropdownItem>
-  ));
-
-  const renderSearchResults = (
-    filterSearchResults: SearchResultsType<TData>,
-    selectedFilter: FilterConfigType<TData>,
-    selectedFilterOperand: FilterOperandType<TData>,
-  ) => {
-    if (filterSearchResults.loading) {
-      return (
-        <DropdownButton.StyledDropdownItem data-testid="loading-search-results">
-          Loading
-        </DropdownButton.StyledDropdownItem>
-      );
-    }
-
-    function resultIsEntity(result: any): result is { id: string } {
-      return Object.keys(result ?? {}).includes('id');
-    }
-
-    return (
-      <>
-        <DropdownMenuSeparator />
-        <DropdownMenuItemContainer>
-          {filterSearchResults.results.map((result, index) => {
-            return (
-              <DropdownMenuSelectableItem
-                key={`fields-value-${index}`}
-                selected={
-                  resultIsEntity(result.value) &&
-                  result.value.id === selectedEntityId
-                }
-                onClick={() => {
-                  if (resultIsEntity(result.value)) {
-                    setSelectedEntityId(result.value.id);
-                  }
-
-                  onFilterSelect({
-                    key: selectedFilter.key,
-                    label: selectedFilter.label,
-                    value: result.value,
-                    displayValue: result.render(result.value),
-                    icon: selectedFilter.icon,
-                    operand: selectedFilterOperand,
-                  });
-                  setIsUnfolded(false);
-                  setCaptureHotkeyTypeInFocus(false);
-                  setSelectedFilter(undefined);
-                }}
-              >
-                <DropdownButton.StyledDropdownItemClipped>
-                  {result.render(result.value)}
-                </DropdownButton.StyledDropdownItemClipped>
-              </DropdownMenuSelectableItem>
-            );
-          })}
-        </DropdownMenuItemContainer>
-      </>
-    );
-  };
-
-  function renderValueSelection(
-    selectedFilter: FilterConfigType<TData>,
-    selectedFilterOperand: FilterOperandType<TData>,
-  ) {
-    return (
-      <>
-        <DropdownButton.StyledDropdownTopOption
-          key={'selected-filter-operand'}
-          onClick={() => setIsOperandSelectionUnfolded(true)}
-        >
-          {selectedFilterOperand.label}
-
-          <DropdownButton.StyledDropdownTopOptionAngleDown />
-        </DropdownButton.StyledDropdownTopOption>
-        <DropdownButton.StyledSearchField autoFocus key={'search-filter'}>
-          {['text', 'relation'].includes(selectedFilter.type) && (
-            <input
-              type="text"
-              placeholder={selectedFilter.label}
-              onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                if (
-                  selectedFilter.type === 'relation' &&
-                  selectedFilter.searchConfig
-                ) {
-                  setFilterSearch(selectedFilter.searchConfig);
-                  setSearchInput(event.target.value);
-                }
-
-                if (selectedFilter.type === 'text') {
-                  if (event.target.value === '') {
-                    onFilterRemove(selectedFilter.key);
-                  } else {
-                    onFilterSelect({
-                      key: selectedFilter.key,
-                      label: selectedFilter.label,
-                      value: event.target.value,
-                      displayValue: event.target.value,
-                      icon: selectedFilter.icon,
-                      operand: selectedFilterOperand,
-                    } as SelectedFilterType<TData>);
-                  }
-                }
-              }}
-            />
-          )}
-          {selectedFilter.type === 'date' && (
-            <DatePicker
-              date={new Date()}
-              onChangeHandler={(date) => {
-                onFilterSelect({
-                  key: selectedFilter.key,
-                  label: selectedFilter.label,
-                  value: date.toISOString(),
-                  displayValue: humanReadableDate(date),
-                  icon: selectedFilter.icon,
-                  operand: selectedFilterOperand,
-                } as SelectedFilterType<TData>);
-              }}
-              customInput={<></>}
-              customCalendarContainer={styled.div`
-                top: -10px;
-              `}
-            />
-          )}
-        </DropdownButton.StyledSearchField>
-        {selectedFilter.type === 'relation' &&
-          filterSearchResults &&
-          renderSearchResults(
-            filterSearchResults,
-            selectedFilter,
-            selectedFilterOperand,
-          )}
-      </>
-    );
-  }
+  const isFilterSelected = (activeTableFilters?.length ?? 0) > 0;

  return (
    <DropdownButton
@ -231,11 +72,34 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
      setIsUnfolded={setIsUnfolded}
      resetState={resetState}
    >
-      {selectedFilter && selectedFilterOperand
-        ? isOperandSelectionUnfolded
-          ? renderOperandSelection
-          : renderValueSelection(selectedFilter, selectedFilterOperand)
-        : renderFilterSelection}
+      {!tableFilterDefinitionUsedInDropdown ? (
+        <FilterDropdownFilterSelect />
+      ) : isFilterDropdownOperandSelectUnfolded ? (
+        <FilterDropdownOperandSelect />
+      ) : (
+        selectedOperandInDropdown && (
+          <>
+            <FilterDropdownOperandButton />
+            <DropdownButton.StyledSearchField autoFocus key={'search-filter'}>
+              {tableFilterDefinitionUsedInDropdown.type === 'text' && (
+                <FilterDropdownTextSearchInput />
+              )}
+              {tableFilterDefinitionUsedInDropdown.type === 'number' && (
+                <FilterDropdownNumberSearchInput />
+              )}
+              {tableFilterDefinitionUsedInDropdown.type === 'date' && (
+                <FilterDropdownDateSearchInput />
+              )}
+              {tableFilterDefinitionUsedInDropdown.type === 'entity' && (
+                <FilterDropdownEntitySearchInput />
+              )}
+            </DropdownButton.StyledSearchField>
+            {tableFilterDefinitionUsedInDropdown.type === 'entity' && (
+              <FilterDropdownEntitySelect />
+            )}
+          </>
+        )
+      )}
    </DropdownButton>
  );
-};
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx
@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+
+import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+import DatePicker from '../../form/DatePicker';
+
+export function FilterDropdownDateSearchInput() {
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const [selectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+
+  function handleChange(date: Date) {
+    if (!tableFilterDefinitionUsedInDropdown || !selectedOperandInDropdown)
+      return;
+
+    upsertActiveTableFilter({
+      field: tableFilterDefinitionUsedInDropdown.field,
+      type: tableFilterDefinitionUsedInDropdown.type,
+      value: date.toISOString(),
+      operand: selectedOperandInDropdown,
+      displayValue: date.toLocaleDateString(),
+    });
+  }
+
+  return (
+    <DatePicker
+      date={new Date()}
+      onChangeHandler={handleChange}
+      customInput={<></>}
+      customCalendarContainer={styled.div`
+        top: -10px;
+      `}
+    />
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx
@ -0,0 +1,36 @@
+import { ChangeEvent } from 'react';
+
+import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+export function FilterDropdownEntitySearchInput() {
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const [selectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
+    useRecoilScopedState(filterDropdownSearchInputScopedState, TableContext);
+
+  return (
+    tableFilterDefinitionUsedInDropdown &&
+    selectedOperandInDropdown && (
+      <input
+        type="text"
+        value={filterDropdownSearchInput}
+        placeholder={tableFilterDefinitionUsedInDropdown.label}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setFilterDropdownSearchInput(event.target.value);
+        }}
+      />
+    )
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx
@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+
+import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown';
+import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { EntitiesForMultipleEntitySelect } from '@/relation-picker/components/MultipleEntitySelect';
+import { SingleEntitySelectBase } from '@/relation-picker/components/SingleEntitySelectBase';
+import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+export function FilterDropdownEntitySearchSelect({
+  entitiesForSelect,
+}: {
+  entitiesForSelect: EntitiesForMultipleEntitySelect<EntityForSelect>;
+}) {
+  const [filterDropdownSelectedEntityId, setFilterDropdownSelectedEntityId] =
+    useRecoilScopedState(
+      filterDropdownSelectedEntityIdScopedState,
+      TableContext,
+    );
+
+  const [selectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const removeActiveTableFilter = useRemoveActiveTableFilter();
+
+  const activeFilterCurrentlyEditedInDropdown =
+    useActiveTableFilterCurrentlyEditedInDropdown();
+
+  function handleUserSelected(selectedEntity: EntityForSelect) {
+    if (!tableFilterDefinitionUsedInDropdown || !selectedOperandInDropdown) {
+      return;
+    }
+
+    const clickedOnAlreadySelectedEntity =
+      selectedEntity.id === filterDropdownSelectedEntityId;
+
+    if (clickedOnAlreadySelectedEntity) {
+      removeActiveTableFilter(tableFilterDefinitionUsedInDropdown.field);
+      setFilterDropdownSelectedEntityId(null);
+    } else {
+      setFilterDropdownSelectedEntityId(selectedEntity.id);
+
+      upsertActiveTableFilter({
+        displayValue: selectedEntity.name,
+        field: tableFilterDefinitionUsedInDropdown.field,
+        operand: selectedOperandInDropdown,
+        type: tableFilterDefinitionUsedInDropdown.type,
+        value: selectedEntity.id,
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (!activeFilterCurrentlyEditedInDropdown) {
+      setFilterDropdownSelectedEntityId(null);
+    }
+  }, [
+    activeFilterCurrentlyEditedInDropdown,
+    setFilterDropdownSelectedEntityId,
+  ]);
+
+  return (
+    <>
+      <SingleEntitySelectBase
+        entities={{
+          entitiesToSelect: entitiesForSelect.entitiesToSelect,
+          selectedEntity: entitiesForSelect.selectedEntities[0],
+        }}
+        onEntitySelected={handleUserSelected}
+      />
+    </>
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx
@ -0,0 +1,26 @@
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+import { DropdownMenuSeparator } from '../../menu/DropdownMenuSeparator';
+
+export function FilterDropdownEntitySelect() {
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  if (tableFilterDefinitionUsedInDropdown?.type !== 'entity') {
+    return null;
+  }
+
+  return (
+    <>
+      <DropdownMenuSeparator />
+      <RecoilScope>
+        {tableFilterDefinitionUsedInDropdown.entitySelectComponent}
+      </RecoilScope>
+    </>
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx
@ -0,0 +1,58 @@
+import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState';
+import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { getOperandsForFilterType } from '@/filters-and-sorts/utils/getOperandsForFilterType';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+import { DropdownMenuItemContainer } from '../../menu/DropdownMenuItemContainer';
+import { DropdownMenuSelectableItem } from '../../menu/DropdownMenuSelectableItem';
+
+import DropdownButton from './DropdownButton';
+
+export function FilterDropdownFilterSelect() {
+  const [, setTableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const [, setSelectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const [, setFilterDropdownSearchInput] = useRecoilScopedState(
+    filterDropdownSearchInputScopedState,
+    TableContext,
+  );
+
+  const availableTableFilters = useRecoilScopedValue(
+    availableTableFiltersScopedState,
+    TableContext,
+  );
+
+  return (
+    <DropdownMenuItemContainer style={{ maxHeight: '300px' }}>
+      {availableTableFilters.map((availableTableFilter, index) => (
+        <DropdownMenuSelectableItem
+          key={`select-filter-${index}`}
+          onClick={() => {
+            setTableFilterDefinitionUsedInDropdown(availableTableFilter);
+            setSelectedOperandInDropdown(
+              getOperandsForFilterType(availableTableFilter.type)?.[0],
+            );
+
+            setFilterDropdownSearchInput('');
+          }}
+        >
+          <DropdownButton.StyledIcon>
+            {availableTableFilter.icon}
+          </DropdownButton.StyledIcon>
+          {availableTableFilter.label}
+        </DropdownMenuSelectableItem>
+      ))}
+    </DropdownMenuItemContainer>
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx
@ -0,0 +1,46 @@
+import { ChangeEvent } from 'react';
+
+import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+export function FilterDropdownNumberSearchInput() {
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const [selectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const removeActiveTableFilter = useRemoveActiveTableFilter();
+
+  return (
+    tableFilterDefinitionUsedInDropdown &&
+    selectedOperandInDropdown && (
+      <input
+        type="number"
+        placeholder={tableFilterDefinitionUsedInDropdown.label}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          if (event.target.value === '') {
+            removeActiveTableFilter(tableFilterDefinitionUsedInDropdown.field);
+          } else {
+            upsertActiveTableFilter({
+              field: tableFilterDefinitionUsedInDropdown.field,
+              type: tableFilterDefinitionUsedInDropdown.type,
+              value: event.target.value,
+              operand: selectedOperandInDropdown,
+              displayValue: event.target.value,
+            });
+          }
+        }}
+      />
+    )
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx
@ -0,0 +1,34 @@
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+import DropdownButton from './DropdownButton';
+
+export function FilterDropdownOperandButton() {
+  const [selectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] =
+    useRecoilScopedState(
+      isFilterDropdownOperandSelectUnfoldedScopedState,
+      TableContext,
+    );
+
+  if (isOperandSelectionUnfolded) {
+    return null;
+  }
+
+  return (
+    <DropdownButton.StyledDropdownTopOption
+      key={'selected-filter-operand'}
+      onClick={() => setIsOperandSelectionUnfolded(true)}
+    >
+      {getOperandLabel(selectedOperandInDropdown)}
+      <DropdownButton.StyledDropdownTopOptionAngleDown />
+    </DropdownButton.StyledDropdownTopOption>
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx
@ -0,0 +1,78 @@
+import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown';
+import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { TableFilterOperand } from '@/filters-and-sorts/types/TableFilterOperand';
+import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel';
+import { getOperandsForFilterType } from '@/filters-and-sorts/utils/getOperandsForFilterType';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+import { DropdownMenuItemContainer } from '../../menu/DropdownMenuItemContainer';
+
+import DropdownButton from './DropdownButton';
+
+export function FilterDropdownOperandSelect() {
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const [, setSelectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const operandsForFilterType = getOperandsForFilterType(
+    tableFilterDefinitionUsedInDropdown?.type,
+  );
+
+  const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] =
+    useRecoilScopedState(
+      isFilterDropdownOperandSelectUnfoldedScopedState,
+      TableContext,
+    );
+
+  const activeTableFilterCurrentlyEditedInDropdown =
+    useActiveTableFilterCurrentlyEditedInDropdown();
+
+  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+
+  function handleOperangeChange(newOperand: TableFilterOperand) {
+    setSelectedOperandInDropdown(newOperand);
+    setIsOperandSelectionUnfolded(false);
+
+    if (
+      tableFilterDefinitionUsedInDropdown &&
+      activeTableFilterCurrentlyEditedInDropdown
+    ) {
+      upsertActiveTableFilter({
+        field: activeTableFilterCurrentlyEditedInDropdown.field,
+        displayValue: activeTableFilterCurrentlyEditedInDropdown.displayValue,
+        operand: newOperand,
+        type: activeTableFilterCurrentlyEditedInDropdown.type,
+        value: activeTableFilterCurrentlyEditedInDropdown.value,
+      });
+    }
+  }
+
+  if (!isOperandSelectionUnfolded) {
+    return <></>;
+  }
+
+  return (
+    <DropdownMenuItemContainer>
+      {operandsForFilterType.map((filterOperand, index) => (
+        <DropdownButton.StyledDropdownItem
+          key={`select-filter-operand-${index}`}
+          onClick={() => {
+            handleOperangeChange(filterOperand);
+          }}
+        >
+          {getOperandLabel(filterOperand)}
+        </DropdownButton.StyledDropdownItem>
+      ))}
+    </DropdownMenuItemContainer>
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx
@ -0,0 +1,60 @@
+import { ChangeEvent } from 'react';
+
+import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown';
+import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { TableContext } from '@/ui/tables/states/TableContext';
+
+export function FilterDropdownTextSearchInput() {
+  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
+    tableFilterDefinitionUsedInDropdownScopedState,
+    TableContext,
+  );
+
+  const [selectedOperandInDropdown] = useRecoilScopedState(
+    selectedOperandInDropdownScopedState,
+    TableContext,
+  );
+
+  const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
+    useRecoilScopedState(filterDropdownSearchInputScopedState, TableContext);
+
+  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const removeActiveTableFilter = useRemoveActiveTableFilter();
+
+  const activeFilterCurrentlyEditedInDropdown =
+    useActiveTableFilterCurrentlyEditedInDropdown();
+
+  return (
+    tableFilterDefinitionUsedInDropdown &&
+    selectedOperandInDropdown && (
+      <input
+        type="text"
+        placeholder={tableFilterDefinitionUsedInDropdown.label}
+        value={
+          activeFilterCurrentlyEditedInDropdown?.value ??
+          filterDropdownSearchInput
+        }
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setFilterDropdownSearchInput(event.target.value);
+
+          if (event.target.value === '') {
+            removeActiveTableFilter(tableFilterDefinitionUsedInDropdown.field);
+          } else {
+            upsertActiveTableFilter({
+              field: tableFilterDefinitionUsedInDropdown.field,
+              type: tableFilterDefinitionUsedInDropdown.type,
+              value: event.target.value,
+              operand: selectedOperandInDropdown,
+              displayValue: event.target.value,
+            });
+          }
+        }}
+      />
+    )
+  );
+}
--- a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
+++ b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
@ -1,20 +1,20 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';

-import {
-  FilterableFieldsType,
-  SelectedFilterType,
-} from '@/filters-and-sorts/interfaces/filters/interface';
+import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
 import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
+import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState';
+import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icons/index';
+import { TableContext } from '@/ui/tables/states/TableContext';

 import SortOrFilterChip from './SortOrFilterChip';

-type OwnProps<SortField, TData extends FilterableFieldsType> = {
+type OwnProps<SortField> = {
  sorts: Array<SelectedSortType<SortField>>;
  onRemoveSort: (sortId: SelectedSortType<SortField>['key']) => void;
-  filters: Array<SelectedFilterType<TData>>;
-  onRemoveFilter: (filterId: SelectedFilterType<TData>['key']) => void;
  onCancelClick: () => void;
 };

@ -59,14 +59,49 @@ const StyledCancelButton = styled.button`
  }
 `;

-function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
+function SortAndFilterBar<SortField>({
  sorts,
  onRemoveSort,
-  filters,
-  onRemoveFilter,
  onCancelClick,
-}: OwnProps<SortField, TData>) {
+}: OwnProps<SortField>) {
  const theme = useTheme();
+
+  const [activeTableFilters, setActiveTableFilters] = useRecoilScopedState(
+    activeTableFiltersScopedState,
+    TableContext,
+  );
+
+  const [availableTableFilters] = useRecoilScopedState(
+    availableTableFiltersScopedState,
+    TableContext,
+  );
+
+  const activeTableFiltersWithDefinition = activeTableFilters.map(
+    (activeTableFilter) => {
+      const tableFilterDefinition = availableTableFilters.find(
+        (availableTableFilter) => {
+          return availableTableFilter.field === activeTableFilter.field;
+        },
+      );
+
+      return {
+        ...activeTableFilter,
+        ...tableFilterDefinition,
+      };
+    },
+  );
+
+  const removeActiveTableFilter = useRemoveActiveTableFilter();
+
+  function handleCancelClick() {
+    setActiveTableFilters([]);
+    onCancelClick();
+  }
+
+  if (!activeTableFiltersWithDefinition.length && !sorts.length) {
+    return null;
+  }
+
  return (
    <StyledBar>
      <StyledChipcontainer>
@ -87,23 +122,27 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
            />
          );
        })}
-        {filters.map((filter) => {
+        {activeTableFiltersWithDefinition.map((filter) => {
          return (
            <SortOrFilterChip
-              key={filter.key}
+              key={filter.field}
              labelKey={filter.label}
-              labelValue={`${filter.operand.label} ${filter.displayValue}`}
-              id={filter.key}
+              labelValue={`${getOperandLabel(filter.operand)} ${
+                filter.displayValue
+              }`}
+              id={filter.field}
              icon={filter.icon}
-              onRemove={() => onRemoveFilter(filter.key)}
+              onRemove={() => {
+                removeActiveTableFilter(filter.field);
+              }}
            />
          );
        })}
      </StyledChipcontainer>
-      {filters.length + sorts.length > 0 && (
+      {activeTableFilters.length + sorts.length > 0 && (
        <StyledCancelButton
          data-testid={'cancel-button'}
-          onClick={onCancelClick}
+          onClick={handleCancelClick}
        >
          Cancel
        </StyledCancelButton>
--- a/front/src/modules/ui/components/table/table-header/TableHeader.tsx
+++ b/front/src/modules/ui/components/table/table-header/TableHeader.tsx
@ -1,11 +1,6 @@
 import { ReactNode, useCallback, useState } from 'react';
 import styled from '@emotion/styled';

-import {
-  FilterableFieldsType,
-  FilterConfigType,
-  SelectedFilterType,
-} from '@/filters-and-sorts/interfaces/filters/interface';
 import {
  SelectedSortType,
  SortType,
@ -15,13 +10,11 @@ import { FilterDropdownButton } from './FilterDropdownButton';
 import SortAndFilterBar from './SortAndFilterBar';
 import { SortDropdownButton } from './SortDropdownButton';

-type OwnProps<SortField, TData extends FilterableFieldsType> = {
+type OwnProps<SortField> = {
  viewName: string;
  viewIcon?: ReactNode;
  availableSorts?: Array<SortType<SortField>>;
-  availableFilters?: FilterConfigType<TData>[];
  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
-  onFiltersUpdate?: (sorts: Array<SelectedFilterType<TData>>) => void;
 };

 const StyledContainer = styled.div`
@ -60,20 +53,15 @@ const StyledFilters = styled.div`
  gap: 2px;
 `;

-export function TableHeader<SortField, TData extends FilterableFieldsType>({
+export function TableHeader<SortField>({
  viewName,
  viewIcon,
  availableSorts,
-  availableFilters,
  onSortsUpdate,
-  onFiltersUpdate,
-}: OwnProps<SortField, TData>) {
+}: OwnProps<SortField>) {
  const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
    [],
  );
-  const [filters, innerSetFilters] = useState<Array<SelectedFilterType<TData>>>(
-    [],
-  );

  const sortSelect = useCallback(
    (newSort: SelectedSortType<SortField>) => {
@ -93,25 +81,6 @@ export function TableHeader<SortField, TData extends FilterableFieldsType>({
    [onSortsUpdate, sorts],
  );

-  const filterSelect = useCallback(
-    (filter: SelectedFilterType<TData>) => {
-      const newFilters = updateSortOrFilterByKey(filters, filter);
-
-      innerSetFilters(newFilters);
-      onFiltersUpdate && onFiltersUpdate(newFilters);
-    },
-    [onFiltersUpdate, filters],
-  );
-
-  const filterUnselect = useCallback(
-    (filterId: SelectedFilterType<TData>['key']) => {
-      const newFilters = filters.filter((filter) => filter.key !== filterId);
-      innerSetFilters(newFilters);
-      onFiltersUpdate && onFiltersUpdate(newFilters);
-    },
-    [onFiltersUpdate, filters],
-  );
-
  return (
    <StyledContainer>
      <StyledTableHeader>
@ -120,12 +89,7 @@ export function TableHeader<SortField, TData extends FilterableFieldsType>({
          {viewName}
        </StyledViewSection>
        <StyledFilters>
-          <FilterDropdownButton
-            isFilterSelected={filters.length > 0}
-            availableFilters={availableFilters || []}
-            onFilterSelect={filterSelect}
-            onFilterRemove={filterUnselect}
-          />
+          <FilterDropdownButton />
          <SortDropdownButton<SortField>
            isSortSelected={sorts.length > 0}
            availableSorts={availableSorts || []}
@ -133,20 +97,14 @@ export function TableHeader<SortField, TData extends FilterableFieldsType>({
          />
        </StyledFilters>
      </StyledTableHeader>
-      {sorts.length + filters.length > 0 && (
-        <SortAndFilterBar
-          sorts={sorts}
-          filters={filters}
-          onRemoveSort={sortUnselect}
-          onRemoveFilter={filterUnselect}
-          onCancelClick={() => {
-            innerSetFilters([]);
-            onFiltersUpdate && onFiltersUpdate([]);
-            innerSetSorts([]);
-            onSortsUpdate && onSortsUpdate([]);
-          }}
-        />
-      )}
+      <SortAndFilterBar
+        sorts={sorts}
+        onRemoveSort={sortUnselect}
+        onCancelClick={() => {
+          innerSetSorts([]);
+          onSortsUpdate && onSortsUpdate([]);
+        }}
+      />
    </StyledContainer>
  );
 }
--- a/front/src/modules/ui/components/table/table-header/stories/TableHeader.stories.tsx
+++ b/front/src/modules/ui/components/table/table-header/stories/TableHeader.stories.tsx
@ -1,11 +1,9 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';

 import { IconList } from '@/ui/icons/index';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { getRenderWrapperForEntityTableComponent } from '~/testing/renderWrappers';

-import { availableFilters } from '../../../../../../pages/companies/companies-filters';
 import { availableSorts } from '../../../../../../pages/companies/companies-sorts';
 import { TableHeader } from '../TableHeader';

@ -18,23 +16,21 @@ export default meta;
 type Story = StoryObj<typeof TableHeader>;

 export const Empty: Story = {
-  render: getRenderWrapperForComponent(
+  render: getRenderWrapperForEntityTableComponent(
    <TableHeader
      viewName="ViewName"
      viewIcon={<IconList />}
      availableSorts={availableSorts}
-      availableFilters={availableFilters}
    />,
  ),
 };

 export const WithSortsAndFilters: Story = {
-  render: getRenderWrapperForComponent(
+  render: getRenderWrapperForEntityTableComponent(
    <TableHeader
      viewName="ViewName"
      viewIcon={<IconList />}
      availableSorts={availableSorts}
-      availableFilters={availableFilters}
    />,
  ),
  play: async ({ canvasElement }) => {
@ -65,7 +61,7 @@ export const WithSortsAndFilters: Story = {
    userEvent.click(await canvas.findByText('Url'));

    userEvent.click(await canvas.findByText('Filter'));
-    userEvent.click(await canvas.findByText('Created At'));
+    userEvent.click(await canvas.findByText('Created at'));
    userEvent.click(await canvas.findByText('6'));
    userEvent.click(outsideClick);
  },