feat: element is made into focus and scrolled into view after edit/save (#4046)

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -9,7 +9,8 @@ import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import isEmpty from 'lodash-es/isEmpty';
 import _noop from 'lodash-es/noop';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -32,6 +33,7 @@ function GridCardGraph({
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
@@ -49,6 +51,17 @@ function GridCardGraph({
 
 	const isVisible = useIntersectionObserver(graphRef, undefined, true);
 
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -165,7 +165,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 								className={isDashboardLocked ? '' : 'enable-resize'}
 								isDarkMode={isDarkMode}
 								key={id}
-								data-grid={layout}
+								data-grid={JSON.stringify(currentWidget)}
 							>
 								<Card
 									className="grid-item"

frontend/src/container/NewWidget/index.tsx

@@ -21,7 +21,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { generatePath, useLocation, useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
@@ -41,7 +41,11 @@ import {
 import { NewWidgetProps } from './types';
 
 function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
-	const { selectedDashboard } = useDashboard();
+	const {
+		selectedDashboard,
+		setSelectedDashboard,
+		setToScrollWidgetId,
+	} = useDashboard();
 
 	const { currentQuery } = useQueryBuilder();
 
@@ -104,8 +108,6 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		enum: selectedWidget?.timePreferance || 'GLOBAL_TIME',
 	});
 
-	const { notifications } = useNotifications();
-
 	const updateDashboardMutation = useUpdateDashboard();
 
 	const { afterWidgets, preWidgets } = useMemo(() => {
@@ -135,49 +137,54 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		return { selectedWidget, preWidgets, afterWidgets };
 	}, [selectedDashboard, query]);
 
+	const { notifications } = useNotifications();
+
 	const onClickSaveHandler = useCallback(() => {
 		if (!selectedDashboard) {
 			return;
 		}
 
-		updateDashboardMutation.mutateAsync(
+		const dashboard: Dashboard = {
-			{
+			...selectedDashboard,
-				uuid: selectedDashboard.uuid,
+			uuid: selectedDashboard.uuid,
-				data: {
+			data: {
-					...selectedDashboard.data,
+				...selectedDashboard.data,
-					widgets: [
+				widgets: [
-						...preWidgets,
+					...preWidgets,
-						{
+					{
-							...(selectedWidget || ({} as Widgets)),
+						...(selectedWidget || ({} as Widgets)),
-							description,
+						description,
-							timePreferance: selectedTime.enum,
+						timePreferance: selectedTime.enum,
-							isStacked: stacked,
+						isStacked: stacked,
-							opacity,
+						opacity,
-							nullZeroValues: selectedNullZeroValue,
+						nullZeroValues: selectedNullZeroValue,
-							title,
+						title,
-							yAxisUnit,
+						yAxisUnit,
-							panelTypes: graphType,
+						panelTypes: graphType,
-							thresholds,
+						thresholds,
-						},
+					},
-						...afterWidgets,
+					...afterWidgets,
-					],
+				],
-				},
 			},
-			{
+		};
-				onSuccess: () => {
+
-					featureResponse.refetch();
+		updateDashboardMutation.mutateAsync(dashboard, {
-					history.push(generatePath(ROUTES.DASHBOARD, { dashboardId }));
+			onSuccess: () => {
-				},
+				setSelectedDashboard(dashboard);
-				onError: () => {
+				setToScrollWidgetId(selectedWidget?.id || '');
-					notifications.error({
+				featureResponse.refetch();
-						message: SOMETHING_WENT_WRONG,
+				history.push({
-					});
+					pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
-				},
+				});
 			},
-		);
+			onError: () => {
+				notifications.error({
+					message: SOMETHING_WENT_WRONG,
+				});
+			},
+		});
 	}, [
 		selectedDashboard,
-		updateDashboardMutation,
 		preWidgets,
 		selectedWidget,
 		description,
@@ -190,6 +197,9 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		graphType,
 		thresholds,
 		afterWidgets,
+		updateDashboardMutation,
+		setSelectedDashboard,
+		setToScrollWidgetId,
 		featureResponse,
 		dashboardId,
 		notifications,

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -48,6 +48,8 @@ const DashboardContext = createContext<IDashboardContext>({
 	setLayouts: () => {},
 	setSelectedDashboard: () => {},
 	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
+	toScrollWidgetId: '',
+	setToScrollWidgetId: () => {},
 });
 
 interface Props {
@@ -59,6 +61,8 @@ export function DashboardProvider({
 }: PropsWithChildren): JSX.Element {
 	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
 
+	const [toScrollWidgetId, setToScrollWidgetId] = useState<string>('');
+
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
 	const isDashboardPage = useRouteMatch<Props>({
@@ -235,6 +239,7 @@ export function DashboardProvider({
 
 	const value: IDashboardContext = useMemo(
 		() => ({
+			toScrollWidgetId,
 			isDashboardSliderOpen,
 			isDashboardLocked,
 			handleToggleDashboardSlider,
@@ -246,6 +251,7 @@ export function DashboardProvider({
 			setLayouts,
 			setSelectedDashboard,
 			updatedTimeRef,
+			setToScrollWidgetId,
 		}),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
@@ -255,6 +261,7 @@ export function DashboardProvider({
 			selectedDashboard,
 			dashboardId,
 			layouts,
+			toScrollWidgetId,
 		],
 	);
 

frontend/src/providers/Dashboard/types.ts

@@ -17,4 +17,6 @@ export interface IDashboardContext {
 		React.SetStateAction<Dashboard | undefined>
 	>;
 	updatedTimeRef: React.MutableRefObject<dayjs.Dayjs | null>;
+	toScrollWidgetId: string;
+	setToScrollWidgetId: React.Dispatch<React.SetStateAction<string>>;
 }