From 0200fb3a21dabe054694830fa05f0a87cba3d034 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Tue, 30 Jan 2024 16:47:58 +0530
Subject: [PATCH] fix: close delete modal on delete success (#4459)

---
 .../GridCardLayout/GridCard/WidgetGraphComponent.tsx  |  2 ++
 .../src/container/GridCardLayout/GridCardLayout.tsx   |  6 +++++-
 frontend/src/container/GridCardLayout/index.tsx       | 11 ++---------
 frontend/src/container/NewWidget/index.tsx            |  8 +++++---
 frontend/src/container/NewWidget/styles.ts            |  2 +-
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index f77f714b26..0af1b9474f 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -124,6 +124,7 @@ function WidgetGraphComponent({
 				if (setSelectedDashboard && updatedDashboard.payload) {
 					setSelectedDashboard(updatedDashboard.payload);
 				}
+				setDeleteModal(false);
 				featureResponse.refetch();
 			},
 			onError: () => {
@@ -255,6 +256,7 @@ function WidgetGraphComponent({
 				destroyOnClose
 				onCancel={onDeleteModelHandler}
 				open={deleteModal}
+				confirmLoading={updateDashboardMutation.isLoading}
 				title="Delete"
 				height="10vh"
 				onOk={onDeleteHandler}
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
index 80221a3ef8..b4f1dbe19c 100644
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -55,7 +55,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 
 	const isDarkMode = useIsDarkMode();
 
-	const [dashboardLayout, setDashboardLayout] = useState(layouts);
+	const [dashboardLayout, setDashboardLayout] = useState<Layout[]>([]);
 
 	const updateDashboardMutation = useUpdateDashboard();
 
@@ -77,6 +77,10 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 		userRole,
 	);
 
+	useEffect(() => {
+		setDashboardLayout(layouts);
+	}, [layouts]);
+
 	const onSaveHandler = (): void => {
 		if (!selectedDashboard) return;
 
diff --git a/frontend/src/container/GridCardLayout/index.tsx b/frontend/src/container/GridCardLayout/index.tsx
index a54daa313c..a2a82dc8ad 100644
--- a/frontend/src/container/GridCardLayout/index.tsx
+++ b/frontend/src/container/GridCardLayout/index.tsx
@@ -1,21 +1,14 @@
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback } from 'react';
-import { Layout } from 'react-grid-layout';
 
-import { EMPTY_WIDGET_LAYOUT } from './config';
 import GraphLayoutContainer from './GridCardLayout';
 
 function GridGraph(): JSX.Element {
-	const { handleToggleDashboardSlider, setLayouts } = useDashboard();
+	const { handleToggleDashboardSlider } = useDashboard();
 
 	const onEmptyWidgetHandler = useCallback(() => {
 		handleToggleDashboardSlider(true);
-
-		setLayouts((preLayout: Layout[]) => [
-			EMPTY_WIDGET_LAYOUT,
-			...(preLayout || []),
-		]);
-	}, [handleToggleDashboardSlider, setLayouts]);
+	}, [handleToggleDashboardSlider]);
 
 	return <GraphLayoutContainer onAddPanelHandler={onEmptyWidgetHandler} />;
 }
diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx
index 9ea47330bf..5192644a5e 100644
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -307,7 +307,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 							disabled={isSaveDisabled}
 							onClick={onSaveDashboard}
 						>
-							Save
+							Save Changes
 						</Button>
 					</Tooltip>
 				)}
@@ -316,13 +316,14 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 					<Button
 						type="primary"
 						data-testid="new-widget-save"
+						loading={updateDashboardMutation.isLoading}
 						disabled={isSaveDisabled}
 						onClick={onSaveDashboard}
 					>
-						Save
+						Save Changes
 					</Button>
 				)}
-				<Button onClick={onClickDiscardHandler}>Discard</Button>
+				<Button onClick={onClickDiscardHandler}>Discard Changes</Button>
 			</ButtonContainer>
 
 			<PanelContainer>
@@ -385,6 +386,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 				closable
 				onCancel={closeModal}
 				onOk={onClickSaveHandler}
+				confirmLoading={updateDashboardMutation.isLoading}
 				centered
 				open={saveModal}
 				width={600}
diff --git a/frontend/src/container/NewWidget/styles.ts b/frontend/src/container/NewWidget/styles.ts
index c9941ad07c..7ae40d8b27 100644
--- a/frontend/src/container/NewWidget/styles.ts
+++ b/frontend/src/container/NewWidget/styles.ts
@@ -25,7 +25,7 @@ export const LeftContainerWrapper = styled(Col)`
 
 export const ButtonContainer = styled.div`
 	display: flex;
-	gap: 1rem;
+	gap: 8px;
 	margin-bottom: 1rem;
 	justify-content: flex-end;
 `;