fix: property pane in preview mode #38274
Conversation
WalkthroughThe pull request focuses on refactoring the layout components in the Appsmith IDE, specifically replacing Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
Bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts (1)
58-58: Extract magic numbers into named constantsThe calculation uses hardcoded values (300, 50) which should be named constants for better maintainability.
+ const EXPLORER_WIDTH = 300; + const PADDING_ADJUSTMENT = 50; // Document the purpose of this adjustment - `${windowWidth - 300 - 50}px`, + `${windowWidth - EXPLORER_WIDTH - PADDING_ADJUSTMENT}px`,
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/client/src/pages/Editor/IDE/Layout/StaticLayout.tsx(2 hunks)app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts(2 hunks)app/client/src/pages/Editor/IDE/Layout/index.ts(1 hunks)app/client/src/pages/Editor/IDE/index.tsx(2 hunks)
🔇 Additional comments (8)
app/client/src/pages/Editor/IDE/Layout/index.ts (1)
Line range hint 1-3: LGTM: Clean export changes
The export changes correctly reflect the component replacement from UnanimatedLayout to StaticLayout.
app/client/src/pages/Editor/IDE/Layout/StaticLayout.tsx (2)
Line range hint 28-64: LGTM: Well-structured layout implementation
The StaticLayout component is well-implemented with:
- Proper memoization
- Clean grid template management
- Conditional rendering for protected mode and sidebar
25-25: Verify overflow behavior fix
The addition of overflow: auto appears to be the key fix for the property pane preview mode issue. Please verify this resolves the original issue #37278 completely.
app/client/src/pages/Editor/IDE/index.tsx (1)
3-3: LGTM: Clean component replacement
The StaticLayout integration is clean and preserves the existing feature flag behavior.
Also applies to: 25-25
app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts (4)
53-53: LGTM! Consistent preview mode handling
The preview/protected mode column calculations are consistent across all states, correctly utilizing the full window width.
Also applies to: 66-66, 79-79
70-71: LGTM! Good use of constants
The settings pane width calculations properly utilize defined constants, making the code maintainable.
84-84: LGTM! Consistent with settings pattern
The libraries pane width calculation follows the same pattern as settings, maintaining consistency.
117-119: Verify the purpose of +1px adjustment
The PropertyPane width calculation includes a +1px adjustment which seems like a workaround. Could you clarify if this is addressing a specific layout issue?
✅ Verification successful
Let me search for more context about the layout calculations and PropertyPane width adjustments.
Let me search for any related layout issues or discussions in the codebase.
Let me search for any related grid layout or border adjustments in the codebase.
Let me try one final search to understand the grid layout calculations.
The +1px adjustment is necessary for grid layout precision
The +1px adjustment in both the editor pane width and PropertyPane width calculations is intentional. It ensures proper grid layout alignment when the UI segment is active, preventing any sub-pixel rendering issues or gaps between the panes in the grid layout template.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for related layout adjustments or known issues
rg -A 3 "PropertyPaneWidth.*\+" app/client/src/
Length of output: 584
Script:
#!/bin/bash
# Search for PropertyPane related layout calculations and constants
rg -B 2 -A 2 "PropertyPaneWidth" app/client/src/
# Search for any grid layout related comments or documentation
rg -B 2 -A 2 "grid.*layout|layout.*grid" app/client/src/ --type ts
Length of output: 12769
Script:
#!/bin/bash
# Search for any comments or discussions about layout issues or pixel adjustments
rg -B 2 -A 2 "layout.*issue|pixel.*adjust|border.*width" app/client/src/
# Look for constants related to layout widths
ast-grep --pattern 'const $_: number = $_'
Length of output: 65896
Script:
#!/bin/bash
# Search for grid layout related code and border adjustments
ast-grep --pattern 'const $_: string[] = [$$$]' app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts
# Look for any comments or documentation about grid layout or borders
rg -B 2 -A 2 "grid.*template|border.*adjust" app/client/src/pages/Editor/IDE/Layout/
Length of output: 206
Script:
#!/bin/bash
# Get the full content of the grid layout template file to understand the calculations
cat app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts
# Search for any related grid layout constants
rg -B 2 -A 2 "APP_SIDEBAR_WIDTH|PropertyPaneWidth" app/client/src/constants/
Length of output: 4935
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12428445536. |
|
Deploy-Preview-URL: https://ce-38274.dp.appsmith.com |
## Description Fixes an issue where property pane appeared in preview mode under certain conditions. Fixes [#37278](#37278) ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/12428449390> > Commit: b61d77a > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12428449390&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 20 Dec 2024 10:28:59 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new `StaticLayout` component for improved layout management. - **Bug Fixes** - Enhanced readability and consistency in defining column widths for various editor states. - **Chores** - Updated imports and exports to replace the deprecated `UnanimatedLayout` with `StaticLayout`. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
Fixes an issue where property pane appeared in preview mode under certain conditions.
Fixes #37278
Automation
/ok-to-test tags="@tag.All"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12428449390
Commit: b61d77a
Cypress dashboard.
Tags:
@tag.AllSpec:
Fri, 20 Dec 2024 10:28:59 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
StaticLayoutcomponent for improved layout management.Bug Fixes
Chores
UnanimatedLayoutwithStaticLayout.