Revamp queries UI

[prakhargupta1]

Duplicates

• I have searched the existing issues

Latest version

• 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 Queries in the query explorer should be custom sortable  #799
2. Better error handling- Warn on queries that look non-idempotent #1171
3. Show root cause of the error at the UI level #1263
4. Show cues when the query is running Show a visual response every time a query runs #1377
5. Move queries to the left: Move queries section to the left #2138
6. Use panels/pop-overs instead of modals

Examples 🌈

No response

Motivation 🔦

No response

[prakhargupta1]

1. In Connections should be global #1065 and Revamp custom components UI #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.