[EPIC] Online demo version

[Janpot]

Allow evaluation of Toolpad through an online demo. Toolpad doesn't support authentication yet. The goal is to demonstrate a subset of the app building experience.

The demo version will be unauthenticated. We will disable all possibilities of entering sensitive data.

To Do:

• [x] Introduce TOOLPAD_DEMO configuration to enable demo version
  • [x] remove the applications list from the overview page. Just show the app creation dialog
  • [x] clearly mark in the UI that demo is enabled.
  • [x] clearly mark that the app is ephemeral and may be deleted at any time without notice. Don't use for anything else than evaluation purposes.
  • [x] disable all datasources
  • ~enable only the REST datasource, but disable headers/authentication. Enforce a baseurl?~
  • [x] Expand the fake movies datasource and enable it in demo only
  • [x] add captcha when creating application
• [x] Currently saving the application deletes and recreates the whole app in the db, replace it with an incremental update to reduce the throughput on the database.
• [x] host using render.com
• [x] usage metrics: Add Google analytics?
• [x] developer metrics:
  • database workload (Can we monitor this sufficiently on render.com)
  • application logs
  • application errors (Sentry?)
  • monitor REST dataSource requests
• [x] Disable the "make application public" feature for the demo mode. All apps are public
• [x] App names have to be unique. Let's not complicate the createApp logic too much. We either add a unique id to name the user gives, or we just generate a unique name and don't let them specify one. They can't list their apps so what'd be the purpose of naming it anyway?
• [ ] ...

[apedroferreira]

Will do in 3 separate PRs (actually will separate into issues as it's too much stuff):

• [ ] application changes
• [ ] set up metrics
• [ ] deployment

[prakhargupta1]

Correct me if I am wrong, we will provide 3 pre-enabled connections:

1. Stats app public API (Template 1)
2. Dog app API (Template 2)
3. Fake movies API

@bytasv Regarding examples in our docs, is there any other connection that you think we should provide?

[bytasv]

I think it really depends how much freedom we want to give. There is also google sheets and postgres that must use connection. But it seems that for demo purposes all we gonna allow us a short list of allowed URLs that users can try to use for fetching in fetch or function datasource?

[apedroferreira]

It shouldn't be too difficult to add more APIs similar to movies just to enable more options, as long as they have about the same functionality.

[Janpot]

But it seems that for demo purposes all we gonna allow us a short list of allowed URLs that users can try to use for fetching in fetch or function datasource?

A whitelist of urls for the fetch/function datasources could be an idea. The only thing I'd still be worried about is Toolpad being used for DDOS attacks to those urls.

Another thing that we should probably consider for "application changes" is the addition of a captcha when creating a Toolpad application.

[apedroferreira]

I've created separate issues for adding metrics as it might not be such a simple task and seems a bit independent from creating the online demo.

This issue can be about building the demo itself + hosting it.

One more note about:

database workload (Can we monitor this sufficiently on render.com)

Render does have some default database metrics, other than that they have a Datadog integration for Postgres databases. If we want automatic alerts it's a paid feature of Datadog I think (not sure if Render alerts us if we get to certain % of memory or CPU usage). So if we want to use anything other than the default Render metrics maybe we should create a separate issue for it too.

[oliviertassinari]

Relative to the demo app experience, I have found:

https://app.forestadmin.com/Live%20Demo/Production/Operations/data/806052/index

Maybe it would make sense to have a banner for our demo app to point to how to install it. I haven't seen our demo app UX yet. (I changed ForestAdmin banner color contrast because OMG black).

[apedroferreira]

Relative to the demo app experience, I have found:

https://app.forestadmin.com/Live%20Demo/Production/Operations/data/806052/index

Maybe it would make sense to have a banner for our demo app to point to how to install it. I haven't seen our demo app UX yet. (I changed ForestAdmin banner color contrast because OMG black).

Would that be a link for the instructions on how to self-host? We should have space for a banner like this in the demo, we could make an issue for it if you think it's worth adding. I think it's worth it if we're interested in having demo users try to self-host the app. Issue link: #1254

[apedroferreira]

I've just deployed the latest version of the demo, it should be functional. Some notes:

• I did not add an option for creating a query for the movies "API" because it's already the initial value for default queries, so it would be a bit redundant?
• I did not add an option for directly creating a query for the COVID or dogs APIs not to have to include a new feature just for the demo, but also because there are already queries for both these APIs in the templates that users can pick, and they make more sense inside those apps.

We can easily add pre-created queries though if you still think it would make sense.

There's also a couple more small things we maybe should fix before launching the demo:

• [x] Calling the movies "API" isn't working as the initial value is https://master--toolpad.mui.com/static/movies.json, should be a simple fix?
• [ ] We only allow client-side queries in the demo, but client-side queries don't work with connections, which means creating connections is useless in this case... Should we just disable being able to create connections for now in the demo?

[Janpot]

Should we just disable being able to create connections for now in the demo

connections are a server side thing and will become when more so when we make them global so I'd say yes

[apedroferreira]

@prakhargupta1 The demo should be good to go unless there's anything else!

[oliviertassinari]

@apedroferreira Awesome! I have started to use the demo app in https://github.com/mui/mui-x/issues/6899#issuecomment-1331089873. I have one last question: https://github.com/mui/mui-toolpad/issues/1213#issuecomment-1332538744.

[apedroferreira]

Can we finally close this issue? :) Or should we keep it ongoing?

[prakhargupta1]

Can we finally close this issue? :) Or should we keep it ongoing?

yes sure, marking it closed.