mui-toolpad icon indicating copy to clipboard operation
mui-toolpad copied to clipboard

Add metadata to dialogs.open()

Open aress31 opened this issue 1 year ago • 4 comments

Summary

It would be helpful to add a metadata prop to dialogs.open() so that the metadata can be accessed in the associated component—enabling a wide range of use cases.

Examples

  • https://sweetalert2.github.io/#configuration

Motivation

No response

Search keywords: usedialogs metadata

aress31 avatar Nov 06 '24 21:11 aress31

What do you mean by metadata? The payload can already take any arbitrary object - we're working on an example to make that clearer in the docs here https://github.com/mui/toolpad/pull/4375

bharatkashyap avatar Nov 07 '24 06:11 bharatkashyap

Semantically, a payload and metadata are distinct. While the payload can be used to pass an object, metadata refers to the data required by the payload.

aress31 avatar Nov 07 '24 06:11 aress31

We don't assign any semantic meaning to naming of the "payload" parameter. All it does is pass some data into the dialog. You are completely free to lay out an object with the exact semantics that make sense for your use-case. You can encode this layout in an interface and use the generic parameter on dialog.open to enforce it:

interface MyPayload {
  data: {/* ... */};
  metadata: {/* ... */};
}

function MyDialog({ payload, open, onClose }: DialogProps<MyPayload>) {
  const { data, metadata } = payload
  // ...
}

// ...

  await dialogs.open<MyPayload>(MyDialog, {
    data: {/* ... */},
    metadata: {/* ... */}
  })

Can you elaborate more on the specific use-case that this feature would unlock, and a concrete proposal for an API?

Janpot avatar Nov 07 '24 17:11 Janpot

I agree with you that payload is a catch-all prop, however, in my mind, payload is more relevant to the rendered component inside the dialog and meta would be relevant to any parameter consumed by said component. However, that is just a suggestion, feel free to ignore.

aress31 avatar Nov 07 '24 17:11 aress31