Revamp queries UI

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

This issue is to improve queries discovery, placement and navigation. The issue is basically about exploring how the queries interface can be made more integral. This was also raised in a user interview.

Problem: Arguably, queries in Toolpad is the most significant module as it connects a page to a connection. Multiple queries are needed to create a simple business app. So, the DX around queries has to be perfect. Currently, we show queries in the right sidebar and the editing happens in a big modal. Some thoughts on improvement below:

Some of this includes:

1. Sorting queries #799
2. Better error handling- #1171
3. https://github.com/mui/mui-toolpad/issues/1263
4. Show cues when the query is running https://github.com/mui/mui-toolpad/issues/1377
5. Move queries to the left: https://github.com/mui/mui-toolpad/issues/2138
6. Use panels/pop-overs instead of modals

Examples 🌈

No response

Motivation 🔦

No response

[prakhargupta1]

1. In #1065 and #1259 it is proposed to move Connections and Custom components to the home view. This gives us a lot of space in the left panel.
2. Queries will take high ground now, as all connections will appear inside the query interface (drop down).
3. An engineer would spend a good amount of time in creating all the queries required to build the app.

Based on the above 3 arguments, I think it makes sense to move queries to the left panel. When clicked on a query, a Notion style side panel coming from left should be a good experience.

[prakhargupta1]

@gerdadesign As discussed in today's call, about queries, we can explore points 4 and 5. of this issue.

[prakhargupta1]

Just came across this scenario: I am checking the output of the query and wished I was able to see how this information is being shown on the page. A quick glance would have helped, the dialog box obscures the view.