[Feature]: Need a minimize/collapse icon for the debugger on the query editor

[ramsaptami]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

Currently, there's a close/collapse icon present on the debugger for the canvas and JS editor but there's no such icon present on the query editor. This needs to be added and the experience needs to be made consistent across the platform

Why should this be worked on?

On the cavnas

On the JS editor

On the query editor

[Nikhil-Nandagopal]

@ayushpahwa was this due to the recent change? I can see this is different across canvas, query, & js object. Also the tab text styles and much larger than anywhere else.

[ramsaptami]

Collapse option on the editor was added a few months ago but the text has change since console log changes went in @Nikhil-Nandagopal

[Nikhil-Nandagopal]

@ramsaptami but there are options and this USD to be consistent so something has broken. X, Chevron and no option. This is bad.

[ayushpahwa]

Hey @Nikhil-Nandagopal , this doesn't seem to be due to my changes. I haven't touched the logic for this particular place. (For reference, this is the first POC I built for console in June, it has the same issue as highlighted above.)

[eco-monk]

DP: https://appsmith-hqq5w5ttz-get-appsmith.vercel.app/

• Added the collapse icons for query and api bottom bars.
• X makes more sense to me as far as debugger is concerned. (because the header isn't docked like the others) But I have changed to arrow down so we can review it.
• Please review the font sizes for tab headers too

cc: @RoopKrrish9696 / @aakashDesign

[RoopKrrish9696]

There are many inconsistencies wrt how the debugger or the response pane should behave. In many cases some interactions relate to the debugger and response pane, also some don't. Here in this notion doc, I've specified how different the interactions of debugger and response panes today in the appsmith.

The reasoning for the temporary solution:

1. The debugger can be accessed from the bottom bar so that it can be closed or collapsed. It is an app-level action
2. Response panes can only be collapsed since there are no other entry points for them ( maybe can be opened while you click run - not a good solution IMO ). This is a page-level action that still contains the app-level items.

The temporary solution:

Chevron to collapse all the panes and debugger makes sense as of now. This means

1. The debugger close icon changes to chevron and will be collapsed to the icon.
2. All the response panes will have chevron and will be collapsed to the bottom.

cc @eco-monk @kocharrahul7 @Nikhil-Nandagopal

[eco-monk]

Adding to this: https://www.loom.com/share/a133a4142041414d946dbcb4c9492257

Headers are clickable when the bottom bar is docked. Need to handle this interaction.

[ginilpg]

@eco-monk Can we show up the panel on click of the minified tabs? We can close this ticket along with that fix. Other enhancements we can take as part of a separate ticket @RoopKrrish9696

[eco-monk]

@RoopKrrish9696, @ginilpg Created a new issue (#17338) with some details from the conversation here.

[eco-monk]

Update: PR is on hold because the tabs component is being moved into the design-system

We can proceed after that. cc: @Richarex @ginilpg @albinAppsmith

[Richarex]

@eco-monk @ginilpg

• [ ] Even after deleting the Api2 while trying to add another api it is throwing these errors "Api2 already exists, please use different name" & "There was an unexpected error". Please refer to the attached video:- https://www.loom.com/share/fc6f0fef60a64414adc1053a07f28cef

[eco-monk]

@Richarex, Tested after merging with latest release. https://www.loom.com/share/4bfe5fa2d77140a990d8a508f8ba462d

I don't think this has anything to do with actual change in PR. This can be caused because the same app was open in two tabs.

[ramsaptami]

@eco-monk Verify the changes on DP, LGTM. Please merge in the changes

[eco-monk]

Thanks @ramsaptami. Waiting on CI now, will merge once it's done.