From 71750cb89cd5ff696379501a3827ae2adacbf72c Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 7 Dec 2022 21:51:59 +0100
Subject: [PATCH 1/3] Fix types on <SelectColumnsButton> / fix user defined
 preferenceKey discrepencies

---
 .../src/list/datagrid/SelectColumnsButton.tsx | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
index afcd272a31e..4051e39b103 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
@@ -38,17 +38,22 @@ import { styled } from '@mui/material/styles';
  *   </List>
  * );
  */
-export const SelectColumnsButton = props => {
+export const SelectColumnsButton = (props: SelectColumnsButtonProps) => {
+    const { preferenceKey } = props;
+
     const resource = useResourceContext(props);
-    const preferenceKey =
-        props.preferenceKey || `preferences.${resource}.datagrid`;
+    const finalPreferenceKey = preferenceKey || `${resource}.datagrid`;
+
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [availableColumns, setAvailableColumns] = useStore<
         ConfigurableDatagridColumn[]
-    >(`${preferenceKey}.availableColumns`, []);
-    const [omit] = useStore<string[]>(`${preferenceKey}.omit`, []);
+    >(`preferences.${finalPreferenceKey}.availableColumns`, []);
+    const [omit] = useStore<string[]>(
+        `preferences.${finalPreferenceKey}.omit`,
+        []
+    );
     const [columns, setColumns] = useStore<string[]>(
-        `${preferenceKey}.columns`,
+        `preferences.${preferenceKey}.columns`,
         availableColumns
             .filter(column => !omit?.includes(column.source))
             .map(column => column.index)
@@ -130,6 +135,7 @@ export const SelectColumnsButton = props => {
                         color="primary"
                         onClick={handleClick}
                         size="large"
+                        {...sanitizeRestProps(props)}
                     >
                         <ViewWeekIcon />
                     </IconButton>
@@ -139,6 +145,7 @@ export const SelectColumnsButton = props => {
                     size="small"
                     onClick={handleClick}
                     startIcon={<ViewWeekIcon />}
+                    {...sanitizeRestProps(props)}
                 >
                     {title}
                 </StyledButton>
@@ -184,6 +191,14 @@ const StyledButton = styled(Button, {
     },
 });
 
-export interface SelectColumnsButtonProps {
-    preferenceKey: string;
+const sanitizeRestProps = ({
+    resource = null,
+    preferenceKey = null,
+    ...rest
+}) => rest;
+
+export interface SelectColumnsButtonProps
+    extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    resource?: string;
+    preferenceKey?: string;
 }

From b438ae9df89d2fcf684f852eff8d843642805c74 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 7 Dec 2022 21:53:43 +0100
Subject: [PATCH 2/3] Update stories to show <SelectColumnsButton> and
 <InspectorButton> working together

---
 .../datagrid/DatagridConfigurable.stories.tsx | 75 ++++++++++---------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
index d3c689acbea..b12b145a59d 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
@@ -8,6 +8,7 @@ import { Inspector, InspectorButton } from '../../preferences';
 import { TextField } from '../../field';
 import { EditButton } from '../../button';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { SelectColumnsButton } from './SelectColumnsButton';
 
 export default { title: 'ra-ui-materialui/list/DatagridConfigurable' };
 
@@ -96,38 +97,44 @@ export const Omit = () => (
 );
 
 export const PreferenceKey = () => (
-    <PreferencesEditorContextProvider>
-        <MemoryRouter>
-            <Inspector />
-            <Box display="flex" justifyContent="flex-end">
-                <InspectorButton />
-            </Box>
-            <Box p={2} display="flex" justifyContent="space-between">
-                <DatagridConfigurable
-                    resource="books3"
-                    data={data}
-                    sort={{ field: 'title', order: 'ASC' }}
-                    bulkActionButtons={false}
-                    preferenceKey="pref1"
-                >
-                    <TextField source="id" />
-                    <TextField source="title" label="Original title" />
-                    <TextField source="author" />
-                    <TextField source="year" />
-                </DatagridConfigurable>
-                <DatagridConfigurable
-                    resource="books3"
-                    data={data}
-                    sort={{ field: 'title', order: 'ASC' }}
-                    bulkActionButtons={false}
-                    preferenceKey="pref2"
-                >
-                    <TextField source="id" />
-                    <TextField source="title" label="Original title" />
-                    <TextField source="author" />
-                    <TextField source="year" />
-                </DatagridConfigurable>
-            </Box>
-        </MemoryRouter>
-    </PreferencesEditorContextProvider>
+    <ThemeProvider theme={theme}>
+        <PreferencesEditorContextProvider>
+            <MemoryRouter>
+                <Inspector />
+                <Box display="flex" justifyContent="space-around">
+                    <SelectColumnsButton
+                        resource="books3"
+                        preferenceKey="pref1"
+                    />
+                    <InspectorButton color="primary" />
+                </Box>
+                <Box p={2} display="flex" justifyContent="space-between">
+                    <DatagridConfigurable
+                        resource="books3"
+                        data={data}
+                        sort={{ field: 'title', order: 'ASC' }}
+                        bulkActionButtons={false}
+                        preferenceKey="pref1"
+                    >
+                        <TextField source="id" />
+                        <TextField source="title" label="Original title" />
+                        <TextField source="author" />
+                        <TextField source="year" />
+                    </DatagridConfigurable>
+                    <DatagridConfigurable
+                        resource="books3"
+                        data={data}
+                        sort={{ field: 'title', order: 'ASC' }}
+                        bulkActionButtons={false}
+                        preferenceKey="pref2"
+                    >
+                        <TextField source="id" />
+                        <TextField source="title" label="Original title" />
+                        <TextField source="author" />
+                        <TextField source="year" />
+                    </DatagridConfigurable>
+                </Box>
+            </MemoryRouter>
+        </PreferencesEditorContextProvider>
+    </ThemeProvider>
 );

From c9770a08f33b47f3018f8f13530a699a622421e8 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Wed, 7 Dec 2022 22:16:22 +0100
Subject: [PATCH 3/3] Fix test

---
 .../ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
index 4051e39b103..5dbfcc1aa83 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
@@ -53,7 +53,7 @@ export const SelectColumnsButton = (props: SelectColumnsButtonProps) => {
         []
     );
     const [columns, setColumns] = useStore<string[]>(
-        `preferences.${preferenceKey}.columns`,
+        `preferences.${finalPreferenceKey}.columns`,
         availableColumns
             .filter(column => !omit?.includes(column.source))
             .map(column => column.index)