[WIP] Fixes dependency cycles and add eslint no-cycle rule

.eslintrc.json

@@ -7,12 +7,34 @@
         "coverage"
     ],
     "plugins": ["react-refresh"],
+    "settings": {
+        "import/parsers": {
+            "@typescript-eslint/parser": [
+                ".ts",
+                ".tsx"
+            ]
+        },
+        "import/resolver": {
+            "typescript": {
+                "alwaysTryTypes": true,
+                "project": "./tsconfig.json"
+            }
+        }
+    },
     "rules": {
         "prettier/prettier": "warn",
         "curly": "error",
         "react-refresh/only-export-components": [
             "error",
             { "allowConstantExport": true }
-        ]
+        ],
+        "import/no-cycle": [
+            "error",
+            {
+                "maxDepth": "∞",
+                "ignoreExternal": true
+            }
+        ],
+        "import/no-self-import": "warn"
     }
 }

package.json

@@ -105,6 +105,7 @@
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-react-app": "^7.0.1",
+        "eslint-import-resolver-typescript": "3.8.3",
         "eslint-plugin-flowtype": "^8.0.3",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-autocomplete-filter.tsx

@@ -8,8 +8,8 @@ import React, { FunctionComponent, SyntheticEvent, useCallback, useEffect, useSt
 import { Autocomplete, TextField } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
-import { CustomAggridFilterParams, FILTER_TEXT_COMPARATORS } from '../custom-aggrid-header.type';
 import { isNonEmptyStringOrArray } from '../../../utils/types-utils';
+import { CustomAggridFilterParams, FILTER_TEXT_COMPARATORS } from './custom-aggrid-filter.type';
 
 export interface CustomAggridAutocompleteFilterParams extends CustomAggridFilterParams {
     getOptionLabel?: (value: string) => string; // Used for translation of enum values in the filter

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx

@@ -12,9 +12,9 @@ import { useIntl } from 'react-intl';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { mergeSx } from 'components/utils/functions';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
-import { CustomAggridFilterParams, FILTER_DATA_TYPES, FILTER_TEXT_COMPARATORS } from '../custom-aggrid-header.type';
 import { isNonEmptyStringOrArray } from '../../../utils/types-utils';
 import { BooleanFilterValue } from './utils/aggrid-filters-utils';
+import { CustomAggridFilterParams, FILTER_DATA_TYPES, FILTER_TEXT_COMPARATORS } from './custom-aggrid-filter.type';
 
 const styles = {
     input: {

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter.tsx

@@ -8,7 +8,8 @@ import { CustomAggridComparatorSelector } from './custom-aggrid-comparator-selec
 import { CustomAggridTextFilter } from './custom-aggrid-text-filter';
 import { Grid } from '@mui/material';
 import { useCustomAggridComparatorFilter } from './hooks/use-custom-aggrid-comparator-filter';
-import { CustomAggridFilterParams } from '../custom-aggrid-header.type';
+
+import { CustomAggridFilterParams } from './custom-aggrid-filter.type';
 
 export const CustomAggridComparatorFilter = ({ api, colId, filterParams }: CustomAggridFilterParams) => {
     const {

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx

@@ -8,10 +8,10 @@ import { ChangeEvent, FunctionComponent, useCallback, useEffect, useState } from
 import { Grid, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import ClearIcon from '@mui/icons-material/Clear';
-import { CustomAggridFilterParams } from '../custom-aggrid-header.type';
 import { CustomAggridComparatorSelector } from './custom-aggrid-comparator-selector';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
+import { CustomAggridFilterParams } from './custom-aggrid-filter.type';
 
 const styles = {
     containerStyle: {

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.tsx

@@ -6,10 +6,10 @@
  */
 import React, { ComponentType, MouseEvent, useMemo, useState } from 'react';
 import { Popover } from '@mui/material';
-import { CustomAggridFilterParams } from '../custom-aggrid-header.type';
 import { CustomFilterIcon } from './custom-filter-icon';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
 import { CustomAggridAutocompleteFilterParams } from './custom-aggrid-autocomplete-filter';
+import { CustomAggridFilterParams } from './custom-aggrid-filter.type';
 
 const styles = {
     input: {

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.type.ts

@@ -0,0 +1,62 @@
+import { ColDef, GridApi, IFilterOptionDef } from 'ag-grid-community';
+import React, { ComponentType } from 'react';
+import { CustomColumnConfigProps, SortParams } from '../custom-aggrid.type';
+import { FilterParams } from '../../../types/custom-aggrid-types';
+import { COLUMN_TYPES, CustomCellType } from '../custom-aggrid-header.type';
+
+export enum FILTER_DATA_TYPES {
+    TEXT = 'text',
+    NUMBER = 'number',
+    BOOLEAN = 'boolean',
+}
+
+export enum FILTER_TEXT_COMPARATORS {
+    EQUALS = 'equals',
+    CONTAINS = 'contains',
+    STARTS_WITH = 'startsWith',
+}
+
+export enum FILTER_NUMBER_COMPARATORS {
+    NOT_EQUAL = 'notEqual',
+    LESS_THAN_OR_EQUAL = 'lessThanOrEqual',
+    GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual',
+}
+
+// not visible in the base interface :
+export enum UNDISPLAYED_FILTER_NUMBER_COMPARATORS {
+    GREATER_THAN = 'greaterThan',
+    LESS_THAN = 'lessThan',
+}
+
+export type FilterEnumsType = Record<string, string[] | null>;
+
+export interface CustomAggridFilterParams {
+    api: GridApi;
+    colId: string;
+    filterParams: FilterParams;
+}
+
+export interface ColumnContext<F extends CustomAggridFilterParams = CustomAggridFilterParams> {
+    agGridFilterParams?: {
+        filterOptions: IFilterOptionDef[];
+    };
+    columnType?: COLUMN_TYPES;
+    columnWidth?: number;
+    fractionDigits?: number;
+    isDefaultSort?: boolean;
+    numeric?: boolean;
+    forceDisplayFilterIcon?: boolean;
+    tabIndex?: number;
+    isCustomColumn?: boolean;
+    Menu?: React.FC<CustomColumnConfigProps>;
+    filterComponent?: ComponentType<F>;
+    //We omit colId and api here to avoid duplicating its declaration, we reinject it later inside CustomHeaderComponent
+    filterComponentParams?: Omit<F, 'colId' | 'api'>;
+    sortParams?: SortParams;
+}
+
+export interface CustomColDef<TData = any, F extends CustomAggridFilterParams = CustomAggridFilterParams>
+    extends ColDef<TData, boolean | string | number | CustomCellType> {
+    colId: string;
+    context?: ColumnContext<F>;
+}

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx

@@ -8,9 +8,9 @@ import React, { useMemo } from 'react';
 import { TextField, Grid, InputAdornment, IconButton } from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear';
 import { DisplayRounding } from '../display-rounding';
-import { FILTER_DATA_TYPES } from '../custom-aggrid-header.type';
 import { mergeSx } from '../../utils/functions';
 import { useIntl } from 'react-intl';
+import { FILTER_DATA_TYPES } from './custom-aggrid-filter.type';
 
 const styles = {
     input: {