fix: do not save dashboard panel on creating a new panel if discard is pressed (#4884)

* fix: do not save dashboard panel on creating a new panel if discard is pressed * fix: remove console log
2025-10-13 21:01:27 +08:00 · 2024-04-23 19:39:41 +05:30 · 2024-04-23 19:39:41 +05:30 · 5e3dba2587
commit 5e3dba2587
parent 374f30e0cd
5 changed files with 125 additions and 132 deletions
--- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
@ -1,146 +1,59 @@
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useNotifications } from 'hooks/useNotifications';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { LogsAggregatorOperator } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';

-import {
-	listViewInitialLogQuery,
-	listViewInitialTraceQuery,
-	PANEL_TYPES_INITIAL_QUERY,
-} from './constants';
+import { PANEL_TYPES_INITIAL_QUERY } from './constants';
 import menuItems from './menuItems';
 import { Card, Container, Text } from './styles';

 function DashboardGraphSlider(): JSX.Element {
-	const {
-		handleToggleDashboardSlider,
-		layouts,
-		selectedDashboard,
-	} = useDashboard();
-
-	const { data } = selectedDashboard || {};
-
-	const { notifications } = useNotifications();
-
-	const updateDashboardMutation = useUpdateDashboard();
+	const { handleToggleDashboardSlider } = useDashboard();

 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const onClickHandler = (name: PANEL_TYPES) => (): void => {
 		const id = uuid();
-
-		updateDashboardMutation.mutateAsync(
-			{
-				uuid: selectedDashboard?.uuid || '',
-				data: {
-					title: data?.title || '',
-					variables: data?.variables || {},
-					description: data?.description || '',
-					name: data?.name || '',
-					tags: data?.tags || [],
-					version: data?.version || 'v3',
-					layout: [
+		handleToggleDashboardSlider(false);
+		const queryParamsLog = {
+			graphType: name,
+			widgetId: id,
+			[QueryParams.compositeQuery]: JSON.stringify({
+				...PANEL_TYPES_INITIAL_QUERY[name],
+				builder: {
+					...PANEL_TYPES_INITIAL_QUERY[name].builder,
+					queryData: [
 						{
-							i: id,
-							w: 6,
-							x: 0,
-							h: 3,
-							y: 0,
-						},
-						...(layouts.filter((layout) => layout.i !== PANEL_TYPES.EMPTY_WIDGET) ||
-							[]),
-					],
-					widgets: [
-						...(data?.widgets || []),
-						{
-							id,
-							title: '',
-							description: '',
-							isStacked: false,
-							nullZeroValues: '',
-							opacity: '',
-							panelTypes: name,
-							query:
-								name === PANEL_TYPES.LIST
-									? listViewInitialLogQuery
-									: PANEL_TYPES_INITIAL_QUERY[name],
-							timePreferance: 'GLOBAL_TIME',
-							softMax: null,
-							softMin: null,
-							selectedLogFields: [
-								{
-									dataType: 'string',
-									type: '',
-									name: 'body',
-								},
-								{
-									dataType: 'string',
-									type: '',
-									name: 'timestamp',
-								},
-							],
-							selectedTracesFields: [
-								...listViewInitialTraceQuery.builder.queryData[0].selectColumns,
-							],
+							...PANEL_TYPES_INITIAL_QUERY[name].builder.queryData[0],
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+							offset: 0,
+							pageSize: 100,
 						},
 					],
 				},
-			},
-			{
-				onSuccess: (data) => {
-					if (data.payload) {
-						handleToggleDashboardSlider(false);
-						const queryParamsLog = {
-							graphType: name,
-							widgetId: id,
-							[QueryParams.compositeQuery]: JSON.stringify({
-								...PANEL_TYPES_INITIAL_QUERY[name],
-								builder: {
-									...PANEL_TYPES_INITIAL_QUERY[name].builder,
-									queryData: [
-										{
-											...PANEL_TYPES_INITIAL_QUERY[name].builder.queryData[0],
-											aggregateOperator: LogsAggregatorOperator.NOOP,
-											orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-											offset: 0,
-											pageSize: 100,
-										},
-									],
-								},
-							}),
-						};
+			}),
+		};

-						const queryParams = {
-							graphType: name,
-							widgetId: id,
-							[QueryParams.compositeQuery]: JSON.stringify(
-								PANEL_TYPES_INITIAL_QUERY[name],
-							),
-						};
+		const queryParams = {
+			graphType: name,
+			widgetId: id,
+			[QueryParams.compositeQuery]: JSON.stringify(
+				PANEL_TYPES_INITIAL_QUERY[name],
+			),
+		};

-						if (name === PANEL_TYPES.LIST) {
-							history.push(
-								`${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`,
-							);
-						} else {
-							history.push(
-								`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
-							);
-						}
-					}
-				},
-				onError: () => {
-					notifications.success({
-						message: SOMETHING_WENT_WRONG,
-					});
-				},
-			},
-		);
+		if (name === PANEL_TYPES.LIST) {
+			history.push(
+				`${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`,
+			);
+		} else {
+			history.push(
+				`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
+			);
+		}
 	};

 	return (
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@ -4,6 +4,7 @@ import { Button, Tabs, Tooltip, Typography } from 'antd';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
+import { getDefaultWidgetData } from 'container/NewWidget/utils';
 import { QueryBuilder } from 'container/QueryBuilder';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@ -11,6 +12,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { defaultTo } from 'lodash-es';
 import { Atom, Play, Terminal } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
@ -55,8 +57,11 @@ function QuerySection({

 	const getWidget = useCallback(() => {
 		const widgetId = urlQuery.get('widgetId');
-		return widgets?.find((e) => e.id === widgetId);
-	}, [widgets, urlQuery]);
+		return defaultTo(
+			widgets?.find((e) => e.id === widgetId),
+			getDefaultWidgetData(widgetId || '', selectedGraph),
+		);
+	}, [urlQuery, widgets, selectedGraph]);

 	const selectedWidget = getWidget() as Widgets;

--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@ -14,6 +14,7 @@ import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
+import { defaultTo, isUndefined } from 'lodash-es';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
@ -45,7 +46,11 @@ import {
 	RightContainerWrapper,
 } from './styles';
 import { NewWidgetProps } from './types';
-import { getIsQueryModified, handleQueryChange } from './utils';
+import {
+	getDefaultWidgetData,
+	getIsQueryModified,
+	handleQueryChange,
+} from './utils';

 function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 	const {
@ -80,10 +85,26 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {

 	const { dashboardId } = useParams<DashboardWidgetPageParams>();

+	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
+
+	useEffect(() => {
+		const widgetId = query.get('widgetId');
+		const selectedWidget = widgets?.find((e) => e.id === widgetId);
+		const isWidgetNotPresent = isUndefined(selectedWidget);
+		if (isWidgetNotPresent) {
+			setIsNewDashboard(true);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const getWidget = useCallback(() => {
 		const widgetId = query.get('widgetId');
-		return widgets?.find((e) => e.id === widgetId);
-	}, [query, widgets]);
+		const selectedWidget = widgets?.find((e) => e.id === widgetId);
+		return defaultTo(
+			selectedWidget,
+			getDefaultWidgetData(widgetId || '', selectedGraph),
+		);
+	}, [query, selectedGraph, widgets]);

 	const [selectedWidget, setSelectedWidget] = useState(getWidget());

@ -227,6 +248,20 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 			return;
 		}

+		const widgetId = query.get('widgetId');
+		let updatedLayout = selectedDashboard.data.layout || [];
+		if (isNewDashboard) {
+			updatedLayout = [
+				{
+					i: widgetId || '',
+					w: 6,
+					x: 0,
+					h: 3,
+					y: 0,
+				},
+				...updatedLayout,
+			];
+		}
 		const dashboard: Dashboard = {
 			...selectedDashboard,
 			uuid: selectedDashboard.uuid,
@ -254,6 +289,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 					},
 					...afterWidgets,
 				],
+				layout: [...updatedLayout],
 			},
 		};

@ -274,6 +310,8 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		});
 	}, [
 		selectedDashboard,
+		query,
+		isNewDashboard,
 		preWidgets,
 		selectedWidget,
 		selectedTime.enum,
--- a/frontend/src/container/NewWidget/utils.ts
+++ b/frontend/src/container/NewWidget/utils.ts
@ -3,7 +3,13 @@ import {
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
+import {
+	listViewInitialLogQuery,
+	listViewInitialTraceQuery,
+	PANEL_TYPES_INITIAL_QUERY,
+} from 'container/NewDashboard/ComponentsSlider/constants';
 import { isEqual, set, unset } from 'lodash-es';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

@ -302,3 +308,38 @@ export function handleQueryChange(
 		},
 	};
 }
+
+export const getDefaultWidgetData = (
+	id: string,
+	name: PANEL_TYPES,
+): Widgets => ({
+	id,
+	title: '',
+	description: '',
+	isStacked: false,
+	nullZeroValues: '',
+	opacity: '',
+	panelTypes: name,
+	query:
+		name === PANEL_TYPES.LIST
+			? listViewInitialLogQuery
+			: PANEL_TYPES_INITIAL_QUERY[name],
+	timePreferance: 'GLOBAL_TIME',
+	softMax: null,
+	softMin: null,
+	selectedLogFields: [
+		{
+			dataType: 'string',
+			type: '',
+			name: 'body',
+		},
+		{
+			dataType: 'string',
+			type: '',
+			name: 'timestamp',
+		},
+	],
+	selectedTracesFields: [
+		...listViewInitialTraceQuery.builder.queryData[0].selectColumns,
+	],
+});
--- a/frontend/src/pages/DashboardWidget/index.tsx
+++ b/frontend/src/pages/DashboardWidget/index.tsx
@ -49,15 +49,11 @@ function DashboardWidget(): JSX.Element | null {
 		);
 	}

-	if (selectedWidget === undefined) {
-		return null;
-	}
-
 	return (
 		<NewWidget
-			yAxisUnit={selectedWidget.yAxisUnit}
+			yAxisUnit={selectedWidget?.yAxisUnit}
 			selectedGraph={selectedGraph}
-			fillSpans={selectedWidget.fillSpans}
+			fillSpans={selectedWidget?.fillSpans}
 		/>
 	);
 }