From 6bc5ceac3eb66a15d775628da6176d2852c6e295 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Mon, 12 Feb 2024 21:42:56 +0530
Subject: [PATCH] [Fix]: delete formula issue (#4526)

---
 .../container/QueryBuilder/components/Formula/Formula.tsx  | 1 +
 .../components/QBEntityOptions/QBEntityOptions.tsx         | 7 ++-----
 .../src/container/QueryBuilder/components/Query/Query.tsx  | 3 ++-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
index 4a5a50f241..5f25edb29b 100644
--- a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
+++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
@@ -151,6 +151,7 @@ export function Formula({
 				onToggleVisibility={handleToggleDisableFormula}
 				onDelete={handleDelete}
 				onCollapseEntity={handleToggleCollapseFormula}
+				showDeleteButton
 			/>
 
 			{!isCollapse && (
diff --git a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
index 28b59ed5b2..1319cf0a19 100644
--- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
@@ -2,7 +2,6 @@ import './QBEntityOptions.styles.scss';
 
 import { Button, Col } from 'antd';
 import cx from 'classnames';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ChevronDown, ChevronRight, Eye, EyeOff, Trash2 } from 'lucide-react';
 
 interface QBEntityOptionsProps {
@@ -12,6 +11,7 @@ interface QBEntityOptionsProps {
 	onDelete: () => void;
 	onToggleVisibility: () => void;
 	onCollapseEntity: () => void;
+	showDeleteButton: boolean;
 }
 
 export default function QBEntityOptions({
@@ -21,11 +21,8 @@ export default function QBEntityOptions({
 	onDelete,
 	onToggleVisibility,
 	onCollapseEntity,
+	showDeleteButton,
 }: QBEntityOptionsProps): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
-
-	const showDeleteButton = currentQuery.builder.queryData.length > 1;
-
 	return (
 		<Col span={24}>
 			<div className="qb-entity-options">
diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
index 6daac8d475..76f411ba43 100644
--- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
@@ -47,7 +47,7 @@ export const Query = memo(function Query({
 	filterConfigs,
 	queryComponents,
 }: QueryProps): JSX.Element {
-	const { panelType } = useQueryBuilder();
+	const { panelType, currentQuery } = useQueryBuilder();
 	const { pathname } = useLocation();
 
 	const [isCollapse, setIsCollapsed] = useState(false);
@@ -288,6 +288,7 @@ export const Query = memo(function Query({
 				onToggleVisibility={handleToggleDisableQuery}
 				onDelete={handleDeleteQuery}
 				onCollapseEntity={handleToggleCollapsQuery}
+				showDeleteButton={currentQuery.builder.queryData.length > 1}
 			/>
 
 			{!isCollapse && (