[WEB-5099] improvement: enhance rich filters with new components and configurations (#7916)

* feat: enhance rich filters with new components and configurations

- Added `AdditionalFilterValueInput` for unsupported filter types.
- Introduced `FilterItem` and related components for better filter item management.
- Updated filter configurations to include new properties and support for multiple values.
- Improved loading states and error handling in filter components.
- Refactored existing filter logic to streamline operations and enhance performance.

* Refactor rich filters component structure and enhance filter item functionality

- Moved AddFilterButton and AddFilterDropdown to a new directory structure for better organization.
- Updated FilterItemProperty to handle filter selection and condition updates more effectively.
- Enhanced the FilterInstance class with methods to update condition properties and operators, improving filter management.
- Added new functionality to handle invalid filter states and improve user feedback.

* [WEB-5111] feat: add 'created_at' and 'updated_at' filters to work item configuration

- Introduced new filter configurations for 'created_at' and 'updated_at' in the work item filters.
- Updated relevant components to utilize these new filters, enhancing filtering capabilities.
- Added corresponding filter configuration functions in the utils for better date handling.

* fix: build

packages/types/src/rich-filters/config/filter-config.ts

@@ -15,4 +15,6 @@ export type TFilterConfig<P extends TFilterProperty, V extends TFilterValue = TF
   isEnabled: boolean;
   allowMultipleFilters?: boolean;
   supportedOperatorConfigsMap: TOperatorConfigMap<V>;
+  rightContent?: React.ReactNode; // content to display on the right side of the filter option in the dropdown
+  tooltipContent?: React.ReactNode; // content to display when hovering over the applied filter item in the filter list
 };

packages/types/src/rich-filters/operators/core.ts

@@ -26,6 +26,11 @@ export const CORE_COMPARISON_OPERATOR = {
   RANGE: "range",
 } as const;
 
+/**
+ * Core operators that support multiple values
+ */
+export const CORE_MULTI_VALUE_OPERATORS = [CORE_COLLECTION_OPERATOR.IN, CORE_COMPARISON_OPERATOR.RANGE] as const;
+
 /**
  * All core operators
  */

packages/types/src/rich-filters/operators/extended.ts

@@ -18,6 +18,11 @@ export const EXTENDED_COLLECTION_OPERATOR = {} as const;
  */
 export const EXTENDED_COMPARISON_OPERATOR = {} as const;
 
+/**
+ * Extended operators that support multiple values
+ */
+export const EXTENDED_MULTI_VALUE_OPERATORS = [] as const;
+
 /**
  * All extended operators
  */

packages/types/src/rich-filters/operators/index.ts

@@ -4,6 +4,7 @@ import {
   CORE_COLLECTION_OPERATOR,
   CORE_COMPARISON_OPERATOR,
   TCoreSupportedOperators,
+  CORE_MULTI_VALUE_OPERATORS,
 } from "./core";
 import {
   EXTENDED_LOGICAL_OPERATOR,
@@ -11,6 +12,7 @@ import {
   EXTENDED_COLLECTION_OPERATOR,
   EXTENDED_COMPARISON_OPERATOR,
   TExtendedSupportedOperators,
+  EXTENDED_MULTI_VALUE_OPERATORS,
 } from "./extended";
 
 // -------- COMPOSED OPERATORS --------
@@ -35,6 +37,11 @@ export const COMPARISON_OPERATOR = {
   ...EXTENDED_COMPARISON_OPERATOR,
 } as const;
 
+export const MULTI_VALUE_OPERATORS: ReadonlyArray<TSupportedOperators> = [
+  ...CORE_MULTI_VALUE_OPERATORS,
+  ...EXTENDED_MULTI_VALUE_OPERATORS,
+] as const;
+
 // -------- COMPOSED TYPES --------
 
 export type TLogicalOperator = (typeof LOGICAL_OPERATOR)[keyof typeof LOGICAL_OPERATOR];

packages/types/src/view-props.ts

@@ -100,13 +100,15 @@ export const WORK_ITEM_FILTER_PROPERTY_KEYS = [
   "cycle_id",
   "module_id",
   "project_id",
+  "created_at",
+  "updated_at",
 ] as const;
 export type TWorkItemFilterProperty = (typeof WORK_ITEM_FILTER_PROPERTY_KEYS)[number];
 
 export type TWorkItemFilterConditionKey = `${TWorkItemFilterProperty}__${TSupportedOperators}`;
 
 export type TWorkItemFilterConditionData = Partial<{
-  [K in TWorkItemFilterConditionKey]: string;
+  [K in TWorkItemFilterConditionKey]: string | boolean | number;
 }>;
 
 export type TWorkItemFilterAndGroup = {