Query panel improvements

[bharatkashyap]

Collecting tasks be taken up once #2393 is merged

Bugs

• Query naming issue in the new query panel #3051

Code

• packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx

  const isAction = React.useMemo(() => {
      if (latestDeletedNode?.type === 'query' && latestDeletedNode?.attributes?.mode === 'mutation') {

  We can likely abstract this in a function and reuse in the filter where we split queries into "queries" and "actions". It's probably also not necessary to memoize. The memoization call is going to be more computationally expensive than two nested property lookups and a boolean operation.

Nomenclature

• packages/toolpad-app/src/runtime/ToolpadApp.tsx

     let kind: 'query' | 'action' = 'query';

  • either we call it "action" everywhere and just do a translation to "mutation", right before we read/write to a file
  • or we call it "mutation" everywhere and name it "action" just right before we display in the UI

  The reason is that this prevents us from mismatching and constant translation all around the codebase. Ideally if the rename is done in a large PR, you start with the latter, just to avoid introducing many unnecessary chamges to unrelated code. Then in a separate PR update the codebase to the former.

UI/UX

• The "Run" and "Save" button locations and types seem fine to me, but design-wise it feels like they need more vertical space around them. Not sure what the best way to improve that would be though.

  

• Creating a new file in a custom function doesn't let us name the file, right? And the button at the bottom does not take the full-width of the popover so that may feel a bit weird. We can maybe improve the UX here later!