feat: Limt filter for QB (#2561)

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx

@@ -9,7 +9,6 @@ import {
 	StyledIconOpen,
 	StyledInner,
 	StyledLink,
-	StyledWrapper,
 } from './AdditionalFiltersToggler.styled';
 
 export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
@@ -41,12 +40,12 @@ export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
 	});
 
 	return (
-		<StyledWrapper>
+		<div>
 			<StyledInner onClick={handleToggleOpenFilters}>
 				{isOpenedFilters ? <StyledIconClose /> : <StyledIconOpen />}
 				{!isOpenedFilters && <span>Add conditions for {filtersTexts}</span>}
 			</StyledInner>
 			{isOpenedFilters && <Row>{children}</Row>}
-		</StyledWrapper>
+		</div>
 	);
 });

frontend/src/container/QueryBuilder/components/Query/Query.tsx

@@ -19,6 +19,7 @@ import {
 	OperatorsSelect,
 	ReduceToFilter,
 } from 'container/QueryBuilder/filters';
+import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { useQueryBuilder } from 'hooks/useQueryBuilder';
 import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator';
@@ -64,6 +65,7 @@ export const Query = memo(function Query({
 				...query,
 				aggregateOperator: value,
 				having: [],
+				limit: null,
 			};
 
 			if (!aggregateDataType || query.dataSource === DataSource.METRICS) {
@@ -191,6 +193,17 @@ export const Query = memo(function Query({
 		[query.dataSource],
 	);
 
+	const handleChangeLimit = useCallback(
+		(value: number | null): void => {
+			const newQuery: IBuilderQueryForm = {
+				...query,
+				limit: value,
+			};
+			handleSetQueryData(index, newQuery);
+		},
+		[index, query, handleSetQueryData],
+	);
+
 	return (
 		<StyledRow gutter={[0, 15]}>
 			<StyledDeleteEntity onClick={handleDeleteQuery} />
@@ -253,8 +266,16 @@ export const Query = memo(function Query({
 			</Col>
 			<Col span={24}>
 				<AdditionalFiltersToggler listOfAdditionalFilter={listOfAdditionalFilters}>
-					{/* TODO: Render filter by Col component */}
-					test additional filter
+					{!isMatricsDataSource && (
+						<Row gutter={[11, 5]}>
+							<Col span={6}>
+								<FilterLabel label="Limit" />
+							</Col>
+							<Col span={18}>
+								<LimitFilter query={query} onChange={handleChangeLimit} />
+							</Col>
+						</Row>
+					)}
 				</AdditionalFiltersToggler>
 			</Col>
 			<Row style={{ width: '100%' }}>

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

@@ -0,0 +1,37 @@
+import { InputNumber } from 'antd';
+import React, { useState } from 'react';
+import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
+
+import { selectStyle } from '../QueryBuilderSearch/config';
+
+function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
+	const [isData, setIsData] = useState<number | null>(null);
+	const onChangeHandler = (value: number | null): void => {
+		setIsData(value);
+	};
+
+	const handleEnter = (e: { key: string }): void => {
+		if (e.key === 'Enter') {
+			onChange(isData);
+		}
+	};
+
+	return (
+		<InputNumber
+			min={1}
+			type="number"
+			placeholder="e.g 10"
+			disabled={!query.aggregateAttribute.key}
+			style={selectStyle}
+			onChange={onChangeHandler}
+			onPressEnter={handleEnter}
+		/>
+	);
+}
+
+interface LimitFilterProps {
+	onChange: (values: number | null) => void;
+	query: IBuilderQueryForm;
+}
+
+export default LimitFilter;

frontend/src/types/api/queryBuilder/queryBuilderData.ts

@@ -40,7 +40,7 @@ export type IBuilderQuery = {
 	expression: string;
 	disabled: boolean;
 	having: Having[];
-	limit: number;
+	limit: number | null;
 	stepInterval: number;
 	orderBy: string[];
 	reduceTo: string;