[RFC] Close expanded panels on list change

[makbol]

Is your feature request related to a problem? Please describe.
One of my resource has a filter which when changes its value, changes list completely so expanded panels makes no sense.

Describe the solution you'd like
My suggestion is adding param closeExpandedOnRefresh to Datagrid (List?) to close all expanded panels when resource is refreshed. Currently, AFAIK there's no possibility to add such functionality manually.

Additional context
Adding RFC as I'm not sure if this make sense for you. I don't want to pollute framework with features that serves only small fraction of users. Maybe instead would be better to add onChange callback to list and additionally expose hook for closing panels.

Anyways I'm willing to help!

[fzaninotto]

Thanks for your suggestion!

I'm not sure it make sense to reset the expanded state on filter in all cases. I agree with you that it should be configurable.

As the expanded state is stored in Redux, I believe we need to expose an action that allows to reset this state. That way you will be able to dispatch it when the user changes the filter in a custom component via a useEffect dependent on [filterValues].

[WiXSL]

Implemented in #6603

You can refer to useToggleSidebar hook in the documentation

[elstgav]

@WiXSL @fzaninotto #6603 seems unrelated to this issue, I think this should be reopened? As far as I can tell, there’s still no official way to reset the expanded state 🤔.

[fzaninotto]

React-admin now exposes a useExpandAll hook that lets you do that in user land.

react-admin/packages/ra-core/src/controller/list/useExpanded.tsx

Line 67 in 4ac02b5

export const useExpandAll = (

[elstgav]

Thanks @fzaninotto. Checking the comments and source code though:

react-admin/packages/ra-core/src/controller/list/useExpanded.tsx

Lines 53 to 94 in 4ac02b5

	/**
	* State-like hook for controlling the expanded state of many list items
	* expanded state is true when at least one item from ids is expanded.
	*
	* @param {string} resource The resource name, e.g. 'posts'
	* @param {Identifier[]} ids A list of record identifiers
	* @returns {Object} Destructure as [expanded, toggleExpanded].
	*
	* @example
	*
	* const [expanded, toggleExpanded] = useExpandAll('posts', [123, 124, 125]);
	* const expandIcon = expanded ? ExpandLess : ExpandMore;
	* const onExpandClick = () => toggleExpanded();
	*/
	export const useExpandAll = (
	resource: string,
	ids: Identifier[]
	): [boolean, () => void] => {
	const [expandedIds, setExpandedIds] = useStore<Identifier[]>(
	`${resource}.datagrid.expanded`,
	[]
	);
	const isExpanded = Array.isArray(expandedIds)
	? // eslint-disable-next-line eqeqeq
	expandedIds.some(id => ids.some(id2 => id2 == id))
	: false;
	const toggleExpandedAll = useCallback(() => {
	const unaffectedExpandedIds = expandedIds.filter(
	// eslint-disable-next-line eqeqeq
	expanded_id => !ids.some(id => id == expanded_id)
	);
	setExpandedIds(
	isExpanded
	? unaffectedExpandedIds
	: unaffectedExpandedIds.concat(ids)
	);
	}, [expandedIds, setExpandedIds, isExpanded, ids]);
	return [isExpanded, toggleExpandedAll];
	};

…this only appears to let you control expanded rows that you already know the ID for ahead of time—it doesn’t report on currently expanded IDs. So it doesn’t look like there’s an official way to reset all expanded rows (unless you know all their IDs).

I think in that case the current user land workaround is to access/alter the store directly, but it’s brittle relying on the preference key:

const resource = useResourceContext()
const [expandedIds, setExpandedIds] = useStore(
  `${resource}.datagrid.expanded`, // Could change in ra-core updates
  [],
)

// Clear/Reset expanded rows
setExpandedIds([])

[fzaninotto]

Right. But as the expanded ids are stored in the store, you can easily do it with useStore:

const useCollapseAll = ( resource ) => {
    const [expandedIds, setExpandedIds] = useStore<Identifier[]>(
        `${resource}.datagrid.expanded`,
        []
    );
    return () => {
        setExpandedIds([]);
    };
}