fix: api calls (#2725)

* fix: aggregate filter and group by filter

* fix: operators labels and divider

* fix: api calls

* fix: remove ts ignore from file

frontend/src/container/FormAlertRules/useDebounce.js

@@ -1,31 +0,0 @@
-/* eslint-disable  */
-// @ts-ignore
-// @ts-nocheck
-
-import { useEffect, useState } from 'react';
-
-// see https://github.com/tannerlinsley/react-query/issues/293
-// see https://usehooks.com/useDebounce/
-export default function useDebounce(value, delay) {
-  // State and setters for debounced value
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(
-    () => {
-      // Update debounced value after delay
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-
-      // Cancel the timeout if value changes (also on delay change or unmount)
-      // This is how we prevent debounced value from updating if value is changed ...
-      // .. within the delay period. Timeout gets cleared and restarted.
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    [value, delay] // Only re-call effect if value or delay changes
-  );
-
-  return debouncedValue;
-}

frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx

@@ -7,6 +7,7 @@ import {
 	QueryBuilderKeys,
 	selectValueDivider,
 } from 'constants/queryBuilder';
+import useDebounce from 'hooks/useDebounce';
 import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue';
 import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
 import React, { memo, useCallback, useMemo, useState } from 'react';
@@ -25,16 +26,17 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 	query,
 }: AgregatorFilterProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<ExtendedSelectOption[]>([]);
+	const debouncedValue = useDebounce(query.aggregateAttribute.key, 300);
 	const { data, isFetching } = useQuery(
 		[
 			QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
-			query.aggregateAttribute.key,
+			debouncedValue,
 			query.aggregateOperator,
 			query.dataSource,
 		],
 		async () =>
 			getAggregateAttribute({
-				searchText: query.aggregateAttribute.key,
+				searchText: debouncedValue,
 				aggregateOperator: query.aggregateOperator,
 				dataSource: query.dataSource,
 			}),

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -2,6 +2,7 @@ import { Select, Spin } from 'antd';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 // ** Constants
 import { QueryBuilderKeys, selectValueDivider } from 'constants/queryBuilder';
+import useDebounce from 'hooks/useDebounce';
 import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue';
 // ** Components
 // ** Helpers
@@ -24,14 +25,16 @@ export const GroupByFilter = memo(function GroupByFilter({
 	const [optionsData, setOptionsData] = useState<ExtendedSelectOption[]>([]);
 	const [isFocused, setIsFocused] = useState<boolean>(false);
 
+	const debouncedValue = useDebounce(searchText, 300);
+
 	const { data, isFetching } = useQuery(
-		[QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText, isFocused],
+		[QueryBuilderKeys.GET_AGGREGATE_KEYS, debouncedValue, isFocused],
 		async () =>
 			getAggregateKeys({
 				aggregateAttribute: query.aggregateAttribute.key,
 				dataSource: query.dataSource,
 				aggregateOperator: query.aggregateOperator,
-				searchText,
+				searchText: debouncedValue,
 			}),
 		{
 			enabled: !disabled && isFocused,
@@ -73,6 +76,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 
 	const onBlur = (): void => {
 		setIsFocused(false);
+		setSearchText('');
 	};
 
 	const onFocus = (): void => {

frontend/src/hooks/useDebounce.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export default function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return (): void => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}