fix: rest api response box is unreachable via scroll #29830

vaibhavchobisa · 2023-12-24T09:54:06Z

Description

Scrollbar of API response is escaping the viewport. This PR fixes the issue.

Media

Fixes #29534
or
Fixes Issue URL

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

/ok-to-test tags="@tag.Datasource"

🔍 Cypress test results

Caution

If you modify the content in this section, you are likely to disrupt the CI result for your PR.

Summary by CodeRabbit

Style
- Improved the visual layout and padding of the TabPanelWrapper component for better readability and user interface experience.
- Updated the layout or styling of the DebuggerLogs component to enhance the user interface.

coderabbitai · 2023-12-24T09:54:14Z

Walkthrough

The code update introduces a CSS modification aimed at improving the user experience in scrolling through long REST API responses. By adjusting the overflow and padding settings for the TabPanelWrapper component, the change aims to ensure that users can scroll to the bottom of lengthy responses without obstruction, addressing a specific scrolling issue in the application's user interface.

Changes

File Path	Change Summary
`app/client/src/components/editorComponents/EntityBottomTabs.tsx` `app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx`	Introduced new constant `FOOTER_MARGIN` to manage the layout and styling of the components.

Assessment against linked issues

Objective	Addressed	Explanation
Enable reaching the actual bottom of a long REST API response through scrolling. (#29534)	✅
Ensure the entire response is visible within the current viewport without relying on keyboard "down" strokes. (#29534)	✅

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

rohan-arthur · 2023-12-24T16:24:17Z

/build-deploy-preview skip-tests=true

github-actions · 2023-12-24T16:24:43Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7315678477.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 29830.
recreate: .

github-actions · 2023-12-24T16:38:11Z

Deploy-Preview-URL: https://ce-29830.dp.appsmith.com

vaibhavchobisa · 2023-12-25T10:25:49Z

/build-deploy-preview skip-tests=true

vaibhavchobisa · 2023-12-25T12:33:19Z

/build-deploy-preview skip-tests=true

rohan-arthur · 2023-12-26T06:07:00Z

/build-deploy-preview skip-tests=true

github-actions · 2023-12-26T06:07:26Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7327104040.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 29830.
recreate: .

rohan-arthur · 2023-12-26T06:08:37Z

@vaibhavchobisa looks like the issue is still there. You can sign up with a new user and test here: https://ce-29830.dp.appsmith.com/

Screen.Recording.2023-12-26.at.11.35.03.mov

github-actions · 2023-12-26T06:18:47Z

Deploy-Preview-URL: https://ce-29830.dp.appsmith.com

vaibhavchobisa · 2023-12-26T08:48:24Z

Hey @rohan-arthur
This issue is resolved on my end. I think the re-deploy was completed after you tested on the old DP.
Could you please re-test and verify?

rohan-arthur · 2023-12-26T09:08:37Z

tested ok on incognito.
@sneha122 would you please review?

sneha122 · 2023-12-26T11:39:53Z

app/client/src/components/editorComponents/EntityBottomTabs.tsx

@@ -13,6 +13,12 @@ const TabPanelWrapper = styled(TabPanel)`
  &.ads-v2-tabs__panel {
    overflow: auto;
  }
+  & .t--code-editor-wrapper.codeWrapper {
+    overflow-y: scroll;


@vaibhavchobisa Why is this overflow-y necessary? It seems to be adding another scroll bar in the UI, other than the one we already have for code editor

sneha122 · 2023-12-26T11:45:56Z

app/client/src/components/editorComponents/EntityBottomTabs.tsx

+  & .t--code-editor-wrapper.codeWrapper {
+    overflow-y: scroll;
+    & .CodeMirror-scroll {
+      padding-bottom: 0;


The root cause of the issue is that the div with class CodeMirror-scroll does not have its height configured correctly, its height is overflowing over the footer and hence some of the content gets hidden behind the footer, can you please check where this height is coming from and fix the issue from root cause?

Thank you for the feedback @sneha122.

Div with the class "t--code-editor-wrapper codeWrapper" is the one that is causing the overflow beyond the screen. I have provided it with the height of "100% - 40px" which takes both the footer size and the little padding above it into account.
I have also replaced the bottom padding with box-sizing: border-box; so that the bottom padding of 50px stays.

It seems to be working fine now, please re-review and let me know, thanks!

vaibhavchobisa · 2023-12-27T12:04:17Z

/build-deploy-preview skip-tests=true

github-actions · 2024-01-03T16:35:30Z

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

vaibhavchobisa · 2024-01-03T16:59:17Z

Hi @sneha122
Can you please review the changes in the PR?

app/client/src/components/editorComponents/EntityBottomTabs.tsx

sneha122 · 2024-01-04T06:24:50Z

/build-deploy-preview skip-tests=true

sneha122 · 2024-01-04T06:24:56Z

/ok-to-test tags="@tag.All"

github-actions · 2024-01-04T06:25:13Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7406261278.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 29830.
recreate: .

github-actions · 2024-01-04T06:25:20Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7406261868.
Workflow: Appsmith External Integration Test Workflow.
Tags: ``.

github-actions · 2024-01-04T06:36:08Z

Deploy-Preview-URL: https://ce-29830.dp.appsmith.com

github-actions · 2024-01-04T07:18:22Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7406261868.
Commit: ``.
Cypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉

github-actions · 2024-01-11T16:36:46Z

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

sneha122 · 2024-01-12T05:52:36Z

This PR is active

github-actions · 2024-01-21T16:35:08Z

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

github-actions · 2024-02-17T16:33:59Z

This PR has been closed because of inactivity.

github-actions · 2024-04-02T16:35:28Z

This PR has been closed because of inactivity.

sneha122 · 2024-04-08T08:14:44Z

@vaibhavchobisa Apologies for the delay here, but since this PR has become very old and our automation processes have been updated since then, I would kindly request you to sync the forked repo with the original one and merge latest release into the branch, this way everything will be updated and we can proceed ahead with the PR.

…eachable-via-scrollbar

vaibhavchobisa · 2024-04-08T08:32:33Z

@sneha122 Done. Thanks!

sneha122 · 2024-04-08T10:00:33Z

/build-deploy-preview skip-tests=true

github-actions · 2024-04-08T10:00:53Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8598157520.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 29830.
recreate: .

github-actions · 2024-04-08T10:13:43Z

Deploy-Preview-URL: https://ce-29830.dp.appsmith.com

sneha122 · 2024-04-09T07:41:49Z

All automation test cases have passed in this [draft PR created internally]
(#32491)

Also tested the PR for the issue fix and it looks as expected

fix: rest api response box is unreachable via scroll

1733a9a

rectified syntax fumble

cd16f1d

rohan-arthur requested a review from sneha122 December 26, 2023 09:11

sneha122 reviewed Dec 26, 2023

View reviewed changes

replaced extra overflow scroll with appropriate component height

b972b95

github-actions bot added the Stale label Jan 3, 2024

sneha122 reviewed Jan 4, 2024

View reviewed changes

app/client/src/components/editorComponents/EntityBottomTabs.tsx Show resolved Hide resolved

sneha122 approved these changes Jan 4, 2024

View reviewed changes

github-actions bot removed the Stale label Jan 4, 2024

github-actions bot added the Stale label Jan 11, 2024

github-actions bot removed the Stale label Jan 13, 2024

github-actions bot added the Stale label Jan 21, 2024

github-actions bot closed this Feb 17, 2024

rohan-arthur reopened this Mar 12, 2024

github-actions bot closed this Apr 2, 2024

sneha122 reopened this Apr 8, 2024

sneha122 added the ok-to-test Required label for CI label Apr 8, 2024

Merge branch 'appsmithorg:release' into fix/rest-api-response-box-unr…

7cf99cf

…eachable-via-scrollbar

sneha122 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Apr 8, 2024

sneha122 mentioned this pull request Apr 8, 2024

[DO NOT MERGE] fix: response box scroll issue #32491

Closed

hetunandu approved these changes Apr 9, 2024

View reviewed changes

hetunandu merged commit 5870bd3 into appsmithorg:release Apr 9, 2024
16 of 17 checks passed

fix: rest api response box is unreachable via scroll #29830

fix: rest api response box is unreachable via scroll #29830

Conversation

vaibhavchobisa commented Dec 24, 2023 • edited by sneha122 Loading

Description

Media

Automation

🔍 Cypress test results

Summary by CodeRabbit

coderabbitai bot commented Dec 24, 2023 • edited Loading

Walkthrough

Changes

Assessment against linked issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

rohan-arthur commented Dec 24, 2023

github-actions bot commented Dec 24, 2023

github-actions bot commented Dec 24, 2023

vaibhavchobisa commented Dec 25, 2023

vaibhavchobisa commented Dec 25, 2023

rohan-arthur commented Dec 26, 2023

github-actions bot commented Dec 26, 2023

rohan-arthur commented Dec 26, 2023

github-actions bot commented Dec 26, 2023

vaibhavchobisa commented Dec 26, 2023

rohan-arthur commented Dec 26, 2023

sneha122 Dec 26, 2023

Choose a reason for hiding this comment

sneha122 Dec 26, 2023

Choose a reason for hiding this comment

sneha122 Dec 26, 2023

Choose a reason for hiding this comment

vaibhavchobisa Dec 27, 2023 • edited Loading

Choose a reason for hiding this comment

vaibhavchobisa commented Dec 27, 2023

github-actions bot commented Jan 3, 2024

vaibhavchobisa commented Jan 3, 2024

sneha122 commented Jan 4, 2024

sneha122 commented Jan 4, 2024

github-actions bot commented Jan 4, 2024

github-actions bot commented Jan 4, 2024

github-actions bot commented Jan 4, 2024

github-actions bot commented Jan 4, 2024

github-actions bot commented Jan 11, 2024

sneha122 commented Jan 12, 2024

github-actions bot commented Jan 21, 2024

github-actions bot commented Feb 17, 2024

github-actions bot commented Apr 2, 2024

sneha122 commented Apr 8, 2024

vaibhavchobisa commented Apr 8, 2024

sneha122 commented Apr 8, 2024

github-actions bot commented Apr 8, 2024

github-actions bot commented Apr 8, 2024

sneha122 commented Apr 9, 2024

vaibhavchobisa commented Dec 24, 2023 •

edited by sneha122

Loading

coderabbitai bot commented Dec 24, 2023 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

vaibhavchobisa Dec 27, 2023 •

edited

Loading