From d9535e7a8df64bc517265d36d1e4512dd527deb6 Mon Sep 17 00:00:00 2001
From: Chintan Sudani <46838508+csudani7@users.noreply.github.com>
Date: Fri, 13 Jan 2023 17:29:51 +0530
Subject: [PATCH] fix: Trigger Save layout only on title (#2039)

* fix: Trigger Save layout only on title

* chore: code improvement

* fix: Lint issues resolved

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 .../container/GridGraphLayout/Graph/index.tsx | 40 ++++++++++++-------
 .../container/GridGraphLayout/GraphLayout.tsx |  1 +
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index 5a6ab2e947..e9907dcc04 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -213,19 +213,29 @@ function GridCardGraph({
 		);
 	};
 
+	const handleOnView = (): void => {
+		onToggleModal(setModal);
+	};
+
+	const handleOnDelete = (): void => {
+		onToggleModal(setDeleteModal);
+	};
+
 	const isEmptyLayout = widget?.id === 'empty' || isEmpty(widget);
 
 	if (state.error && !isEmptyLayout) {
 		return (
 			<>
 				{getModals()}
-				<WidgetHeader
-					parentHover={hovered}
-					title={widget?.title}
-					widget={widget}
-					onView={(): void => onToggleModal(setModal)}
-					onDelete={(): void => onToggleModal(setDeleteModal)}
-				/>
+				<div className="drag-handle">
+					<WidgetHeader
+						parentHover={hovered}
+						title={widget?.title}
+						widget={widget}
+						onView={handleOnView}
+						onDelete={handleOnDelete}
+					/>
+				</div>
 
 				<ErrorContainer>{state.errorMessage}</ErrorContainer>
 			</>
@@ -255,13 +265,15 @@ function GridCardGraph({
 			}}
 		>
 			{!isEmptyLayout && (
-				<WidgetHeader
-					parentHover={hovered}
-					title={widget?.title}
-					widget={widget}
-					onView={(): void => onToggleModal(setModal)}
-					onDelete={(): void => onToggleModal(setDeleteModal)}
-				/>
+				<div className="drag-handle">
+					<WidgetHeader
+						parentHover={hovered}
+						title={widget?.title}
+						widget={widget}
+						onView={(): void => onToggleModal(setModal)}
+						onDelete={(): void => onToggleModal(setDeleteModal)}
+					/>
+				</div>
 			)}
 
 			{!isEmptyLayout && getModals()}
diff --git a/frontend/src/container/GridGraphLayout/GraphLayout.tsx b/frontend/src/container/GridGraphLayout/GraphLayout.tsx
index dfb0797488..d615fb1a13 100644
--- a/frontend/src/container/GridGraphLayout/GraphLayout.tsx
+++ b/frontend/src/container/GridGraphLayout/GraphLayout.tsx
@@ -72,6 +72,7 @@ function GraphLayout({
 				useCSSTransforms
 				allowOverlap={false}
 				onLayoutChange={onLayoutChangeHandler}
+				draggableHandle=".drag-handle"
 			>
 				{layouts.map(({ Component, ...rest }) => {
 					const currentWidget = (widgets || [])?.find((e) => e.id === rest.i);