fix: respect the sorting params present in the URL for dashboards list page (#5183)

* fix: respect the sorting params present in the URL for dashboards list page

* fix: move the list order params to context

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -34,7 +34,7 @@ import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import { get, isEmpty } from 'lodash-es';
+import { get, isEmpty, isNull, isUndefined } from 'lodash-es';
 import {
 	ArrowDownWideNarrow,
 	ArrowUpRight,
@@ -53,6 +53,7 @@ import {
 	Search,
 } from 'lucide-react';
 import { handleContactSupport } from 'pages/Integrations/utils';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
 	ChangeEvent,
 	Key,
@@ -91,6 +92,11 @@ function DashboardsList(): JSX.Element {
 
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
+	const {
+		listSortOrder: sortOrder,
+		setListSortOrder: setSortOrder,
+	} = useDashboard();
+
 	const [action, createNewDashboard] = useComponentPermission(
 		['action', 'create_new_dashboards'],
 		role,
@@ -116,18 +122,9 @@ function DashboardsList(): JSX.Element {
 	);
 
 	const params = useUrlQuery();
-	const orderColumnParam = params.get('columnKey');
-	const orderQueryParam = params.get('order');
-	const paginationParam = params.get('page');
 	const searchParams = params.get('search');
 	const [searchString, setSearchString] = useState<string>(searchParams || '');
 
-	const [sortOrder, setSortOrder] = useState({
-		columnKey: orderColumnParam,
-		order: orderQueryParam,
-		pagination: paginationParam,
-	});
-
 	const getLocalStorageDynamicColumns = (): DashboardDynamicColumns => {
 		const dashboardDynamicColumnsString = localStorage.getItem('dashboard');
 		let dashboardDynamicColumns: DashboardDynamicColumns = {
@@ -217,6 +214,13 @@ function DashboardsList(): JSX.Element {
 		}
 	};
 
+	useEffect(() => {
+		if (!isUndefined(sortOrder.columnKey) && !isNull(sortOrder.columnKey)) {
+			sortHandle(sortOrder.columnKey);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboards]);
+
 	function handlePageSizeUpdate(page: number): void {
 		setSortOrder((order) => ({
 			...order,
@@ -225,7 +229,6 @@ function DashboardsList(): JSX.Element {
 	}
 
 	useEffect(() => {
-		sortDashboardsByCreatedAt(dashboardListResponse);
 		const filteredDashboards = filterDashboard(
 			searchString,
 			dashboardListResponse,

frontend/src/container/NewDashboard/DashboardDescription/index.tsx

@@ -12,6 +12,7 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
+import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import {
@@ -61,6 +62,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
+		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		handleDashboardLockToggle,
@@ -82,6 +84,8 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	const updateDashboardMutation = useUpdateDashboard();
 
+	const urlQuery = useUrlQuery();
+
 	const { featureResponse, user, role } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
@@ -250,6 +254,15 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		});
 	}
 
+	function goToListPage(): void {
+		urlQuery.set('columnKey', listSortOrder.columnKey as string);
+		urlQuery.set('order', listSortOrder.order as string);
+		urlQuery.set('page', listSortOrder.pagination as string);
+
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlQuery.toString()}`;
+		history.replace(generatedUrl);
+	}
+
 	return (
 		<Card className="dashboard-description-container">
 			<div className="dashboard-header">
@@ -258,7 +271,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 						type="text"
 						icon={<LayoutGrid size={14} />}
 						className="dashboard-btn"
-						onClick={(): void => history.push(ROUTES.ALL_DASHBOARD)}
+						onClick={(): void => goToListPage()}
 					>
 						Dashboard /
 					</Button>

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -9,6 +9,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import useAxiosError from 'hooks/useAxiosError';
 import useTabVisibility from 'hooks/useTabFocus';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
 import { defaultTo } from 'lodash-es';
 import isEqual from 'lodash-es/isEqual';
@@ -51,6 +52,8 @@ const DashboardContext = createContext<IDashboardContext>({
 	layouts: [],
 	panelMap: {},
 	setPanelMap: () => {},
+	listSortOrder: { columnKey: null, order: null, pagination: '1' },
+	setListSortOrder: () => {},
 	setLayouts: () => {},
 	setSelectedDashboard: () => {},
 	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
@@ -79,6 +82,17 @@ export function DashboardProvider({
 		exact: true,
 	});
 
+	const params = useUrlQuery();
+	const orderColumnParam = params.get('columnKey');
+	const orderQueryParam = params.get('order');
+	const paginationParam = params.get('page');
+
+	const [listSortOrder, setListSortOrder] = useState({
+		columnKey: orderColumnParam,
+		order: orderQueryParam,
+		pagination: paginationParam,
+	});
+
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
 	const globalTime = useSelector<AppState, GlobalReducer>(
@@ -341,6 +355,8 @@ export function DashboardProvider({
 			selectedDashboard,
 			dashboardId,
 			layouts,
+			listSortOrder,
+			setListSortOrder,
 			panelMap,
 			setLayouts,
 			setPanelMap,
@@ -359,6 +375,8 @@ export function DashboardProvider({
 			selectedDashboard,
 			dashboardId,
 			layouts,
+			listSortOrder,
+			setListSortOrder,
 			panelMap,
 			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,

frontend/src/providers/Dashboard/types.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
 import { Layout } from 'react-grid-layout';
 import { UseQueryResult } from 'react-query';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -14,6 +15,18 @@ export interface IDashboardContext {
 	layouts: Layout[];
 	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
 	setPanelMap: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+	listSortOrder: {
+		columnKey: string | null;
+		order: string | null;
+		pagination: string | null;
+	};
+	setListSortOrder: Dispatch<
+		SetStateAction<{
+			columnKey: string | null;
+			order: string | null;
+			pagination: string | null;
+		}>
+	>;
 	setLayouts: React.Dispatch<React.SetStateAction<Layout[]>>;
 	setSelectedDashboard: React.Dispatch<
 		React.SetStateAction<Dashboard | undefined>