Warn on missing page parameters

[Janpot]

Summary 💡

Toolpad allows you to set-up page parameters which you provide as query parameters in the url and which are available as page state. There are some UX problems with the current implementation:

• There is no feedback when a user is using an unknown url parameter https://github.com/mui/mui-public/pull/136
• There is no way of requiring a parameter (e.g. the bundle size app doesn't work without providing some params)

Toolpad should:

• Allow making some parameters required. If a required parameter is not provided we should give clear feedback on the page that it is missing. e.g. we could just not show the page at all and show an interstitial instead explaining what's missing
• Show a warning when an unused parameter is used. This shouldn't be an interstitial, we can show a dismissable banner or something instead.

Benchmark

• https://docs.retool.com/apps/web/guides/customize-app-urls

Motivation 🔦

No response

Search keywords:

[JerryWu1234]

Could you offer more detail if I pick this issues up.? Are there any materials about such as which parameter was required or not?

[Janpot]

We want to add an option in this dialog: that exists on each parameter. Something like a checkbox that marks it as required, exact UX needs to be determined.

In the file we will save that as:

  parameters:
    - name: foo
      required: true

if the checkbox is unchecked this will be stored as

  parameters:
    - name: foo

Now when a parameter is required, and you open the page without the parameter in the url, we will show a message that the parameter must be supplied before the page can render.

Secondly: when a user specifies a parameter in the url (e.g. ?bar=hello) that does not exist ion the page parameters we should show a warning that an unknown parameter was supplied. I'm fine using a snackbar for this for now.

This should be implemented in two different PRs, we won't accept a PR that implements both of those together

[JerryWu1234]

@Janpot I did this module before. I think I can pick this up

[Janpot]

Before you do, it needs to be determined what the exact UI/UX will be like. I suggest you think about it and propose something before implementing it.

[oliviertassinari]

Toolpad should:

1. Allow making some parameters required. If a required parameter is not provided we should give clear feedback on the page that it is missing. e.g. we could just not show the page at all and show an interstitial instead explaining what's missing
2. Show a warning when an unused parameter is used. This shouldn't be an interstitial, we can show a dismissable banner or something instead.

On 1. if we have required parameters, then I would expect to write the logic in my app with a value always define in dev mode. So developers would need a way to set a test value. Having that test value would be enough to solve my problem in https://github.com/mui/mui-public/pull/136#issuecomment-1869067489. So yeah, a checkbox can work. When unchecked the label of the input is "default value". When checked the label of the input would turn into something like "debug value". On 2. I don't see this one. I would expect to be able to add utm tag without them triggering warnings.

[Janpot]

On 1. if we have required parameters, then I would expect to write the logic in my app with a value always define in dev mode. So developers would need a way to set a test value.

Perhaps we can forward the parameters on the url of the editor to the page?

On 2. I don't see this one. I would expect to be able to add utm tag without them triggering warnings.

The idea is to catch misspelling or removed/renamed parameters. We have options though:

• ask the users to define those utm parameters as non required page parameters.
• add a checkbox "allow undeclared parameters".
• not implement this warning altogether. I'm not overly attached to the idea anyway.