diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx index f44b71e2bd..b4148ccf09 100644 --- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx +++ b/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((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(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, diff --git a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx index d6cfbc99d9..10cbf1b8f0 100644 --- a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx +++ b/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( (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 (
@@ -258,7 +271,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element { type="text" icon={} className="dashboard-btn" - onClick={(): void => history.push(ROUTES.ALL_DASHBOARD)} + onClick={(): void => goToListPage()} > Dashboard / diff --git a/frontend/src/providers/Dashboard/Dashboard.tsx b/frontend/src/providers/Dashboard/Dashboard.tsx index 0f8307aaa1..cd290f6477 100644 --- a/frontend/src/providers/Dashboard/Dashboard.tsx +++ b/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({ layouts: [], panelMap: {}, setPanelMap: () => {}, + listSortOrder: { columnKey: null, order: null, pagination: '1' }, + setListSortOrder: () => {}, setLayouts: () => {}, setSelectedDashboard: () => {}, updatedTimeRef: {} as React.MutableRefObject, @@ -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>(); const globalTime = useSelector( @@ -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, diff --git a/frontend/src/providers/Dashboard/types.ts b/frontend/src/providers/Dashboard/types.ts index 6f78d804b1..ce3ccebe8d 100644 --- a/frontend/src/providers/Dashboard/types.ts +++ b/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; setPanelMap: React.Dispatch>>; + 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>; setSelectedDashboard: React.Dispatch< React.SetStateAction