From a1cef932c1532862d5c8984c3e51c2c3bdb19d0e Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Wed, 25 Sep 2024 14:15:48 +0200 Subject: [PATCH 1/3] Fix a bug that caused Datagrids with the same name to overwrite each others pinned state --- .changeset/violet-goats-study.md | 5 +++++ .../admin/admin/src/dataGrid/usePersistentColumnState.tsx | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/violet-goats-study.md diff --git a/.changeset/violet-goats-study.md b/.changeset/violet-goats-study.md new file mode 100644 index 0000000000..7c9bcc0b7c --- /dev/null +++ b/.changeset/violet-goats-study.md @@ -0,0 +1,5 @@ +--- +"@comet/admin": patch +--- + +`usePersistentColumnState`: Fix a bug that caused Datagrids with the same name to overwrite each others pinned states diff --git a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx index 012d27944e..dcfdf73f74 100644 --- a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx +++ b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx @@ -80,7 +80,8 @@ export function usePersistentColumnState(stateKey: string): GridProps { [mediaQueryColumnVisibilityModel, setStoredColumnVisibilityModel], ); - const [pinnedColumns, setPinnedColumns] = useStoredState(`${stateKey}PinnedColumns`, {}); + const [pinnedColumns, setPinnedColumns] = useStoredState(`${btoa(window.location.pathname)}${stateKey}PinnedColumns`, {}); + const handlePinnedColumnsChange = useCallback( (newModel: GridPinnedColumns) => { setPinnedColumns(newModel); From 4d4f9f1b296932d8b49bf14f74fd0f01c4f14b90 Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Mon, 30 Sep 2024 20:13:07 +0200 Subject: [PATCH 2/3] Add prefix to all stored states --- .../admin/src/dataGrid/usePersistentColumnState.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx index dcfdf73f74..835a738a6e 100644 --- a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx +++ b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx @@ -1,5 +1,6 @@ import { DataGridProps, GridColumnVisibilityModel, useGridApiRef } from "@mui/x-data-grid"; import { MutableRefObject, useCallback, useEffect, useMemo, useState } from "react"; +import { useRouteMatch } from "react-router"; import { useStoredState } from "../hooks/useStoredState"; import { GridColDef } from "./GridColDef"; @@ -55,10 +56,13 @@ type GridProps = Omit & { export function usePersistentColumnState(stateKey: string): GridProps { const apiRef = useGridApiRef(); const columns = useGridColumns(apiRef); + const match = useRouteMatch(); + + const storageKeyPrefix = `${btoa(match.path)}${stateKey}`; const mediaQueryColumnVisibilityModel = useVisibilityModelFromColumnMediaQueries(columns); const [storedColumnVisibilityModel, setStoredColumnVisibilityModel] = useStoredState( - `${stateKey}ColumnVisibility`, + `${storageKeyPrefix}ColumnVisibility`, {}, ); @@ -80,7 +84,7 @@ export function usePersistentColumnState(stateKey: string): GridProps { [mediaQueryColumnVisibilityModel, setStoredColumnVisibilityModel], ); - const [pinnedColumns, setPinnedColumns] = useStoredState(`${btoa(window.location.pathname)}${stateKey}PinnedColumns`, {}); + const [pinnedColumns, setPinnedColumns] = useStoredState(`${storageKeyPrefix}PinnedColumns`, {}); const handlePinnedColumnsChange = useCallback( (newModel: GridPinnedColumns) => { @@ -104,7 +108,7 @@ export function usePersistentColumnState(stateKey: string): GridProps { }, [columns, setPinnedColumns, pinnedColumns]); //no API for column dimensions as controlled state, export on change instead - const columnDimensionsKey = `${stateKey}ColumnDimensions`; + const columnDimensionsKey = `${storageKeyPrefix}ColumnDimensions`; const initialColumnDimensions = useMemo(() => { const serializedState = window.localStorage.getItem(columnDimensionsKey); return serializedState ? JSON.parse(serializedState) : undefined; @@ -116,7 +120,7 @@ export function usePersistentColumnState(stateKey: string): GridProps { }, [columnDimensionsKey, apiRef]); //no API for column order as controlled state, export on change instead - const columnOrderKey = `${stateKey}ColumnOrder`; + const columnOrderKey = `${storageKeyPrefix}ColumnOrder`; const initialColumnOrder = useMemo(() => { const serializedState = window.localStorage.getItem(columnOrderKey); return serializedState ? JSON.parse(serializedState) : undefined; From 6dca55f96846406ebb632c522851b062fc1a227e Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Mon, 7 Oct 2024 15:23:43 +0200 Subject: [PATCH 3/3] Remove base64 encoding of usePersistentColumnstate prefix --- .changeset/violet-goats-study.md | 2 +- packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/violet-goats-study.md b/.changeset/violet-goats-study.md index 7c9bcc0b7c..efc5e25c86 100644 --- a/.changeset/violet-goats-study.md +++ b/.changeset/violet-goats-study.md @@ -2,4 +2,4 @@ "@comet/admin": patch --- -`usePersistentColumnState`: Fix a bug that caused Datagrids with the same name to overwrite each others pinned states +`usePersistentColumnState`: Prevent Data Grids with the same name to overwrite each others pinned and column-visibility states diff --git a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx index 835a738a6e..0b46830150 100644 --- a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx +++ b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx @@ -58,7 +58,7 @@ export function usePersistentColumnState(stateKey: string): GridProps { const columns = useGridColumns(apiRef); const match = useRouteMatch(); - const storageKeyPrefix = `${btoa(match.path)}${stateKey}`; + const storageKeyPrefix = `${match.path}${stateKey}`; const mediaQueryColumnVisibilityModel = useVisibilityModelFromColumnMediaQueries(columns); const [storedColumnVisibilityModel, setStoredColumnVisibilityModel] = useStoredState(