fix: close delete modal on delete success (#4459)

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}

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;
 

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} />;
 }

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}

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;
 `;