search

wasp-lang / wasp

The fastest way to develop full-stack web apps with React & Node.js.
https://wasp-lang.dev
MIT License
12.73k stars 1.13k forks source link

Implement a simple "Wasp dev toolbar" that will show messages in the Wasp app that is being developed #2059

Open Martinsos opened 1 month ago

Martinsos commented 1 month ago

While we do print warnings and messages into the terminal, the problem is it is easy to miss those due to all the other output and logs.

Old example of this is the messages to migrate your Prisma schema -> that your Prisma schema is out of sync.

Then, recently, we wanted to communicate that not real email was sent in case of using Dummy email provider, but that it was sent to the CLI. We started doing a PR for it here but gave up for the complete solution this issue should do. https://github.com/wasp-lang/wasp/pull/2052

And there are some other warnings and similar that we will likely want to show in the app, to make sure developer sees them on time.

All of this could be handled by Wasp Studio instead, but Wasp Studio is not there yet, and even there, it is in another tab, so there still might be benefit in having this directly in the app as a more frontal way of communication.

We discussed some options on what this could look like. The simplest one is just showing messages as they come, in a toast at the edge of the screen. If we could go just a bit more ambitious, then I would love to see this toolbar being able to do the following:

  1. Indicate if Prisma schema is out of sync (we already know this in the CLI!). So it would have a specific color, or symbol, or something that indicates this state. E.g. it is purple if Prisma is out of sync. This could be used for other stuff, could be orange if there is unread warning, red if there is an error, ... . But initially this would be most useful for Prisma.
  2. Should be moveable around the viewport, and also completely removable, both one-time via the UI and more permanently via the ENV var.
  3. We will want to feed it with information from the wasp CLI itself as it runs (probably via some file on the disk? Or some better way hm not sure this is interesting), but also via the app that is being developed itself (that should be more straightforward, especially if happening from the client code).

That is what I can think of so far!

I imagine it could be a circle (Wasp logo?) that has absolute position in the screen but can be dragged around or hidden. Also, it would have an indicator for Prisma desync (color or icon), and would have an indicator for unread warnings / errors, like number, and if you click, you can see them + the new one pops out when it arrives but then disappears after like 10 seconds.

Once we get this implemented, we will immediately want to (either in this issue, or in separate issues, but let's make sure to create them then):

Martinsos commented 1 month ago

@sodic @infomiho this turned out to be a small RFC, so feel free to share your own ideas on top of this if I missed something.

Martinsos commented 1 month ago

Related to https://github.com/wasp-lang/wasp/issues/250 (CLI Powerline) .

infomiho commented 1 month ago

I think this would a great addition to Wasp! It's bringing visibility of the server state directly to the client e.g. Prisma schema out of sync, errors in the Wasp file etc. I guess that's why Astro and Nuxt invested in their dev toolbars.

The idea on how to do it: you mentioned that it can be a client component that we regenerate and it floats on top of the user's pages. That makes sense to me 👍 I'd of course investigate how others did to and see if they maybe had a different strategy and why they did something different.