From fafa6f996077ba62117a55b563767c7e93e3ad2a Mon Sep 17 00:00:00 2001
From: dnazarenkoo <134951516+dnazarenkoo@users.noreply.github.com>
Date: Wed, 2 Aug 2023 08:22:33 +0300
Subject: [PATCH] fix: avoid double API call on the adding new panel type
 (#3246)

---
 frontend/src/container/GridGraphLayout/Graph/index.tsx | 6 +++++-
 frontend/src/container/GridGraphLayout/GraphLayout.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index 1ee8cedeb8..95daa02eea 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -62,6 +62,10 @@ function GridCardGraph({
 	allowEdit,
 	isQueryEnabled,
 }: GridCardGraphProps): JSX.Element {
+	const { isAddWidget } = useSelector<AppState, DashboardReducer>(
+		(state) => state.dashboards,
+	);
+
 	const { ref: graphRef, inView: isGraphVisible } = useInView({
 		threshold: 0,
 		triggerOnce: true,
@@ -116,7 +120,7 @@ function GridCardGraph({
 				variables,
 			],
 			keepPreviousData: true,
-			enabled: isGraphVisible && !isEmptyWidget && isQueryEnabled,
+			enabled: isGraphVisible && !isEmptyWidget && isQueryEnabled && !isAddWidget,
 			refetchOnMount: false,
 			onError: (error) => {
 				setErrorMessage(error.message);
diff --git a/frontend/src/container/GridGraphLayout/GraphLayout.tsx b/frontend/src/container/GridGraphLayout/GraphLayout.tsx
index 316b6877cc..6fc6aca63f 100644
--- a/frontend/src/container/GridGraphLayout/GraphLayout.tsx
+++ b/frontend/src/container/GridGraphLayout/GraphLayout.tsx
@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
+import DashboardReducer from 'types/reducer/dashboards';
 
 import { LayoutProps, State } from '.';
 import {
@@ -28,6 +29,9 @@ function GraphLayout({
 	widgets,
 	setLayout,
 }: GraphLayoutProps): JSX.Element {
+	const { isAddWidget } = useSelector<AppState, DashboardReducer>(
+		(state) => state.dashboards,
+	);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const isDarkMode = useIsDarkMode();
 
@@ -53,7 +57,7 @@ function GraphLayout({
 				{addPanelPermission && (
 					<Button
 						loading={addPanelLoading}
-						disabled={addPanelLoading}
+						disabled={addPanelLoading || isAddWidget}
 						onClick={onAddPanelHandler}
 						icon={<PlusOutlined />}
 					>