fix: [Table Widget] Remove unnecessary scrollbar when page size fits in available height

[sbalaji1192]

Fixes #17857

Automation

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

🔍 Cypress test results

Tip

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

[sbalaji1192]

/build-deploy-preview skipTests=true env=release

[github-actions]

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

[github-actions]

Deploy-Preview-URL: https://appsmith-m5s1ljecf-get-appsmith.vercel.app

🚨 Note: The release environment runs EE code, so using a frontend-only DP on this repo, will
likely behave unexpectedly. Consider using a full DP instead.
Learn more.

[github-actions]

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

[coderabbitai]

Walkthrough

Walkthrough

The recent changes focus on enhancing the TableWidgetV2 across several files, primarily addressing scrollbar issues and optimizing table dimensions and styles. New tests ensure the table behaves as expected without unnecessary scrollbars, and adjustments in table styling and button dimensions improve user interaction and visual consistency.

Changes

File Path	Change Summary
.../TableV2_GeneralProperty_spec.js	Updated height validation from "29px" to "30px".
.../scrollbar_spec.ts, .../ScrollbarDSL.json	Introduced tests and configurations to ensure the table body does not have a scrollbar when data changes.
.../Table.tsx, .../TableStyledWrappers.tsx	Adjusted scrollContainerStyles and dynamic width setting; refactored border styling using pseudo-elements.
.../cellComponents/Button.tsx	Modified button dimensions and font size based on compactMode prop.

Assessment against linked issues

Objective	Addressed	Explanation
Address scrollbar issues when fitting all items in table window (#17857)	✅
Ensure no test failures due to recent changes (#30378)	❓	It's unclear if the new test scenarios fully cover all potential issues introduced by recent changes.
Ensure widget list visibility and scrollability (#30179)	❌	The changes do not directly address widget list visibility or scrollability issues.

Possibly related issues

• [Task]: Fix cypress test suite failures caused by PR #29794 #30378: This issue could be related due to the introduction of new test scenarios that might address previously failing tests due to changes in the table widget.
• [Bug]: Widget list getting cut down in the bottom #30179: Although not directly addressed, the changes in table layout and styling might indirectly affect overall UI components, including widget list visibility, warranting further investigation.

---

Recent Review Details

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between d857d5d and a0001d8.

Files selected for processing (6)

• app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js (1 hunks)
• app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts (1 hunks)
• app/client/cypress/fixtures/Table/ScrollbarDSL.json (1 hunks)
• app/client/src/widgets/TableWidgetV2/component/Table.tsx (1 hunks)
• app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx (3 hunks)
• app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx (1 hunks)

Additional comments not posted (8)

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts (2)

16-16: Ensure the DSL file Table/ScrollbarDSL exists and is correctly configured.

Verification successful

---

The provided DSL file ScrollbarDSL.json indeed exists and contains a detailed configuration for a TABLE_WIDGET_V2. The configuration includes various properties related to the table's appearance, behavior, and data bindings, which are essential for the table's functionality within a web application.

From the output, it's clear that the DSL file is structured to support a table widget with various interactive features such as sorting, pagination, and inline editing. These features are crucial for testing the scrollbar functionality in a dynamic table environment, as they can affect the table's layout and the behavior of its scrollbar.

Given this information, the DSL file Table/ScrollbarDSL is correctly configured and exists as required for the tests in scrollbar_spec.ts to function properly. This confirms the appropriateness of the file's usage in the test script.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Check if the DSL file exists and contains the necessary configurations for the scrollbar test.
fd "ScrollbarDSL.json" --exec cat {}

Length of output: 6855

---

22-29: Validate the logic for checking the absence of the scrollbar.

app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx (1)

14-14: Ensure the compactMode prop is properly passed down and utilized.

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js (1)

184-184: Confirm the updated height validation from "29px" to "30px" is correct and consistent with UI changes.

app/client/cypress/fixtures/Table/ScrollbarDSL.json (1)

1-211: Verify the structure and content of the DSL configuration for accuracy and completeness.

Verification successful

---

The output from the shell script confirms that the DSL configuration in ScrollbarDSL.json matches the provided snippet in the review comment. The structure and content of the DSL, including properties like widgetName, backgroundColor, children, and their respective attributes, are consistent with the expectations for testing scrollbar behavior in a table widget setup.

The DSL configuration appears to be accurate and complete based on the information provided and the output from the executed script. There are no discrepancies between the expected DSL structure and the actual content in the file.

Based on this analysis, the DSL configuration for testing the scrollbar behavior is verified as correct.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Verify the structure and content of the DSL configuration in `ScrollbarDSL.json` to ensure it is accurate and complete for testing the scrollbar behavior.
fd "ScrollbarDSL.json" --exec cat {}

Length of output: 6855

app/client/src/widgets/TableWidgetV2/component/Table.tsx (1)

301-310: Ensure the new calculation for scrollContainerStyles correctly handles different scenarios, especially when headers are visible or not.

app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx (2)

95-95: Confirm that the dynamic setting of the width property for the TableWrapper is correctly implemented and tested.

---

172-184: Review the refactoring of border styling using a pseudo-element for correctness and browser compatibility.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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.