Add metadata to dialogs.open()

[aress31]

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

No response

Motivation

No response

Search keywords: usedialogs metadata

[bharatkashyap]

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 #4375

[aress31]

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.

[Janpot]

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?

[aress31]

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.