fix: Order By filter feedback on new QB (#2626)

* fix: removing key from groupby is not updating value of orderby

* fix: removing operator is not updating value of orderby

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

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

@@ -71,8 +71,6 @@ export const Query = memo(function Query({
 				...query,
 				aggregateOperator: value,
 				having: [],
-				groupBy: [],
-				orderBy: [],
 				limit: null,
 				tagFilters: { items: [], op: 'AND' },
 			};

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

@@ -1,12 +1,10 @@
 import { Select, Spin } from 'antd';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
-import { IOption } from 'hooks/useResourceAttribute/types';
 import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregateOperator } from 'types/common/queryBuilder';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
@@ -41,22 +39,22 @@ export function OrderByFilter({
 		[],
 	);
 
-	const generateOptionsData = (
+	const noAggregationOptions = useMemo(
-		attributeKeys: BaseAutocompleteData[] | undefined,
+		() =>
-		selectedValue: OrderByFilterValue[],
+			data?.payload?.attributeKeys
-		query: IBuilderQueryForm,
+				? mapLabelValuePairs(data?.payload?.attributeKeys)
-	): IOption[] => {
-		const selectedValueLabels = getLabelFromValue(selectedValue);
-
-		const noAggregationOptions = attributeKeys
-			? mapLabelValuePairs(attributeKeys)
 						.flat()
 						.filter(
-						(option) => !selectedValueLabels.includes(option.label.split(' ')[0]),
+							(option) =>
+								!getLabelFromValue(selectedValue).includes(option.label.split(' ')[0]),
 						)
-			: [];
+				: [],
+		[data?.payload?.attributeKeys, selectedValue],
+	);
 
-		const aggregationOptions = mapLabelValuePairs(query.groupBy)
+	const aggregationOptions = useMemo(
+		() =>
+			mapLabelValuePairs(query.groupBy)
 				.flat()
 				.concat([
 					{
@@ -69,17 +67,23 @@ export function OrderByFilter({
 					},
 				])
 				.filter(
-				(option) => !selectedValueLabels.includes(option.label.split(' ')[0]),
+					(option) =>
+						!getLabelFromValue(selectedValue).includes(option.label.split(' ')[0]),
+				),
+		[
+			query.aggregateAttribute.key,
+			query.aggregateOperator,
+			query.groupBy,
+			selectedValue,
+		],
 	);
 
-		return query.aggregateOperator === MetricAggregateOperator.NOOP
-			? noAggregationOptions
-			: aggregationOptions;
-	};
-
 	const optionsData = useMemo(
-		() => generateOptionsData(data?.payload?.attributeKeys, selectedValue, query),
+		() =>
-		[data?.payload?.attributeKeys, query, selectedValue],
+			query.aggregateOperator === MetricAggregateOperator.NOOP
+				? noAggregationOptions
+				: aggregationOptions,
+		[aggregationOptions, noAggregationOptions, query.aggregateOperator],
 	);
 
 	const handleChange = (values: OrderByFilterValue[]): void => {
@@ -103,7 +107,17 @@ export function OrderByFilter({
 		onChange(orderByValues);
 	};
 
-	const values: OrderByFilterValue[] = query.orderBy.map((item) => ({
+	const values: OrderByFilterValue[] = useMemo(
+		() =>
+			query.orderBy
+				.filter((order) =>
+					query.groupBy.find(
+						(group) =>
+							order.key.includes(group.key) ||
+							order.key.includes(query.aggregateOperator),
+					),
+				)
+				.map((item) => ({
 					label: transformStringWithPrefix({
 						str: item.key,
 						prefix: item.type || '',
@@ -113,7 +127,9 @@ export function OrderByFilter({
 					value: item.key,
 					disabled: undefined,
 					title: undefined,
-	}));
+				})),
+		[query.aggregateOperator, query.groupBy, query.orderBy],
+	);
 
 	const isDisabledSelect = useMemo(
 		() =>