DeleteWithConfirmButton unsafely uses getRecordContext causing runtime error

[gauthierm]

What you were expecting:

Using DeleteWithConfirmButton on a show or edit context should work without crashing, even when viewing records that are not in the data-provider cache.

What happened instead:

When you load the page directly and the data is not cached, you get a runtime error when the DeleteWithConfirmButton tries to access the id field on undefined.

Steps to reproduce:

1. Make a show page
2. Add a DeleteWithConfimButton
3. Load the page directly in a browser with a known record id in the URL (simulating a bookmark)
4. You get a runtime error when the DeleteWithConfirmButton tries to access id on an undefined.

Other information:

The record is loaded using useRecordContext on this line https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx#L40

Because the types are not able to indicate the return value is initially undefined when the data is not cached, it does not indicate that record could be undefined. See #9622

The id field is dereferenced from the record on without checking if it is undefined https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx#L87

Environment

• React-admin version: 4.16.7
• Last version that did not exhibit the issue (if applicable): n/a
• React version: n/a
• Browser: n/a
• Stack trace (in case of a JS error):

Unhandled Runtime Error

TypeError: record is undefined
Call Stack
DeleteWithConfirmButton
node_modules/.pnpm/ra-ui-materialui@4.16.7_@mui+icons-material@5.15.6_@mui+material@5.14.20_ra-core@4.16.7_react_7afaxbz6efd4hp544gcloxmzsy/node_modules/ra-ui-materialui/dist/esm/button/DeleteWithConfirmButton.js (52:17)
renderWithHooks
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (16305:0)

[djhi]

Good catch!