From a3e36cbac97b29d756af98798cb1f027988c43fd Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Mon, 10 Jun 2024 18:12:20 +0530
Subject: [PATCH] fix: unsaved changes popping up for newly created dashboard
 in settings (#5182)

* fix: unsaved changes popping up for newly created dashboard in settings

* fix: width changing of right bar when adding new queries

* fix: address review comments
---
 .../DashboardSettings/General/index.tsx       | 35 ++++++++++---------
 frontend/src/container/NewWidget/styles.ts    |  5 ++-
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx
index 632cb13dae..066b60074e 100644
--- a/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx
+++ b/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx
@@ -71,24 +71,24 @@ function GeneralDashboardSettings(): JSX.Element {
 
 	useEffect(() => {
 		let numberOfUnsavedChanges = 0;
-		if (!isEqual(updatedTitle, selectedData?.title)) {
-			numberOfUnsavedChanges += 1;
-		}
-		if (!isEqual(updatedDescription, selectedData?.description)) {
-			numberOfUnsavedChanges += 1;
-		}
-		if (!isEqual(updatedTags, selectedData?.tags)) {
-			numberOfUnsavedChanges += 1;
-		}
-		if (!isEqual(updatedImage, selectedData?.image)) {
-			numberOfUnsavedChanges += 1;
-		}
+		const initialValues = [title, description, tags, image];
+		const updatedValues = [
+			updatedTitle,
+			updatedDescription,
+			updatedTags,
+			updatedImage,
+		];
+		initialValues.forEach((val, index) => {
+			if (!isEqual(val, updatedValues[index])) {
+				numberOfUnsavedChanges += 1;
+			}
+		});
 		setNumberOfUnsavedChanges(numberOfUnsavedChanges);
 	}, [
-		selectedData?.description,
-		selectedData?.image,
-		selectedData?.tags,
-		selectedData?.title,
+		description,
+		image,
+		tags,
+		title,
 		updatedDescription,
 		updatedImage,
 		updatedTags,
@@ -167,7 +167,8 @@ function GeneralDashboardSettings(): JSX.Element {
 					<div className="unsaved">
 						<div className="unsaved-dot" />
 						<Typography.Text className="unsaved-changes">
-							{numberOfUnsavedChanges} Unsaved change
+							{numberOfUnsavedChanges} unsaved change
+							{numberOfUnsavedChanges > 1 && 's'}
 						</Typography.Text>
 					</div>
 					<div className="footer-action-btns">
diff --git a/frontend/src/container/NewWidget/styles.ts b/frontend/src/container/NewWidget/styles.ts
index 54a01817b4..6b52d1fee1 100644
--- a/frontend/src/container/NewWidget/styles.ts
+++ b/frontend/src/container/NewWidget/styles.ts
@@ -10,10 +10,9 @@ export const Container = styled.div`
 
 export const RightContainerWrapper = styled(Col)`
 	&&& {
-		min-width: 330px;
-		overflow-y: auto;
 		max-width: 400px;
 		width: 30%;
+		overflow-y: auto;
 	}
 	&::-webkit-scrollbar {
 		width: 0rem;
@@ -26,7 +25,7 @@ interface LeftContainerWrapperProps {
 
 export const LeftContainerWrapper = styled(Col)<LeftContainerWrapperProps>`
 	&&& {
-		min-width: 70%;
+		width: 100%;
 		overflow-y: auto;
 		border-right: ${({ isDarkMode }): string =>
 			isDarkMode