fix: sidebar showing when page is hidden#39735
Conversation
alex-golovanov
requested review from
rahulbarwal
and removed request for
a team
WalkthroughThis PR removes the Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component (NavigationAdjustedPageViewer / useAppViewerSidebarProperties)
participant H as useSidebarWidth Hook
participant R as Redux Store
C->>H: Call useSidebarWidth()
H->>R: useSelector to fetch app state (details, sidebar pinning, page id)
R-->>H: Return state data
H->>H: Compute sidebar width based on conditions
H-->>C: Return computed width
sequenceDiagram
participant Nav as Navigation Component
participant R as Redux Store
participant M as useMemo Hook
Nav->>Nav: Read `forceShowNavBar` from query params
Nav->>Nav: useEffect: Adjust header height based on navigation style/orientation
Nav->>R: Dispatch header height update
Nav->>Nav: useEffect: Trigger analytics events if conditions match
Nav->>M: Evaluate navigation layout (Sidebar/TopHeader)
M-->>Nav: Return layout component
Nav->>User: Render updated Navigation UI
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
🔇 Additional comments (1)
🪧 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
App Navigation
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/13859102336. |
|
🔴🔴🔴 Cyclic Dependency Check: This PR has increased the number of cyclic dependencies by 1, when compared with the release branch. Refer this document to identify the cyclic dependencies introduced by this PR. You can view the dependency diff in the run log. Look for the check-cyclic-dependencies job in the run. |
|
Deploy-Preview-URL: https://ce-39735.dp.appsmith.com |
| @@ -1,23 +1,32 @@ | |||
| import type { ReactNode } from "react"; | |||
| // React and core libraries | |||
There was a problem hiding this comment.
Just curious why we need these comments? Over time, it all degrades as code editors automatically add imports.
There was a problem hiding this comment.
These are done by copilot. Do you think it's better to remove the comments and just leave blank lines?
![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 (2)
app/client/src/ce/entities/IDE/utils/saveEntityName.ts (1)
15-23: Consider a more declarative approachThe current implementation uses a mutable variable that gets conditionally reassigned. Consider a more declarative approach:
- export const saveEntityName = ({ params, segment }: SaveEntityName) => { - let saveNameAction = saveActionName(params); - - if (EditorEntityTab.JS === segment) { - saveNameAction = saveJSObjectName(params); - } - - return saveNameAction; - }; + export const saveEntityName = ({ params, segment }: SaveEntityName) => { + return EditorEntityTab.JS === segment + ? saveJSObjectName(params) + : saveActionName(params); + };Also note that the
entityparameter is defined in the interface but not used in the function.app/client/src/ce/entities/IDE/utils/getEditableTabPermissions.ts (1)
21-29: Function is a thin wrapper around getHasManageActionPermissionThis function provides a clean interface for checking permissions with proper default handling for the entity's userPermissions. Consider adding a comment explaining why this wrapper exists instead of directly using getHasManageActionPermission.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (9)
app/client/src/actions/propertyPaneActions.ts(1 hunks)app/client/src/ce/entities/IDE/utils.ts(0 hunks)app/client/src/ce/entities/IDE/utils/getBaseUrlsForIDEType.ts(1 hunks)app/client/src/ce/entities/IDE/utils/getEditableTabPermissions.ts(1 hunks)app/client/src/ce/entities/IDE/utils/getIDETypeByUrl.ts(1 hunks)app/client/src/ce/entities/IDE/utils/index.ts(1 hunks)app/client/src/ce/entities/IDE/utils/saveEntityName.ts(1 hunks)app/client/src/reducers/uiReducers/propertyPaneReducer.tsx(1 hunks)app/client/src/reducers/uiReducers/tableFilterPaneReducer.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- app/client/src/ce/entities/IDE/utils.ts
✅ Files skipped from review due to trivial changes (2)
- app/client/src/reducers/uiReducers/tableFilterPaneReducer.tsx
- app/client/src/ce/entities/IDE/utils/index.ts
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (5)
app/client/src/reducers/uiReducers/propertyPaneReducer.tsx (1)
10-14: Good code organization - moving the interface to its logical location.The
ShowPropertyPanePayloadinterface has been moved from the actions file to the reducer where it's being used, which follows good code organization principles. This improves maintainability by keeping type definitions close to their primary usage.app/client/src/actions/propertyPaneActions.ts (1)
2-5: Import updated to match relocated interface.This import statement has been correctly updated to reflect the relocation of the
ShowPropertyPanePayloadinterface to the reducer file. This maintains the functionality while improving code organization.app/client/src/ce/entities/IDE/utils/getBaseUrlsForIDEType.ts (1)
4-6: Simple and effective implementationThe function cleanly retrieves base URLs for a specified IDE type.
app/client/src/ce/entities/IDE/utils/getIDETypeByUrl.ts (1)
6-14: Implementation looks correct, but type assertion should be reviewedThe function effectively maps URLs to IDE types by iterating through IDEBasePaths. However, note the type assertion on line 7 (
type as IDEType). Since this comes from iterating through object keys, it should be safe, but worth verifying that all keys in IDEBasePaths conform to IDEType.app/client/src/ce/entities/IDE/utils/getEditableTabPermissions.ts (1)
10-14: Clear constant definitionThe EDITOR_PATHS array effectively consolidates the builder paths in one accessible location.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/13900416740. |
|
Deploy-Preview-URL: https://ce-39735.dp.appsmith.com |
## Description Fixes an issue, when the "Show Page Navigation" option is disabled in the page settings, the sidebar should not appear when navigating to that page. However, even after turning off navigation, the sidebar is still visible. Fixes appsmithorg#39580 ## Automation /ok-to-test tags="@tag.IDE,@tag.Git" ### 🔍 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/13900210279> > Commit: d1385f8 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13900210279&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.IDE,@tag.Git` > Spec: > <hr>Mon, 17 Mar 2025 14:04:53 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 ## Summary by CodeRabbit - **New Features** - Introduced a custom hook for retrieving sidebar width, enhancing the management of sidebar dimensions. - Added new functions for managing IDE-related functionalities, including retrieving base URLs and editable tab permissions. - **Refactor** - Streamlined the navigation component's logic and improved the organization of import statements. - Removed deprecated methods and interfaces related to sidebar width management, simplifying the codebase. - Enhanced the organization of import statements across various components for better clarity. - Refactored the sidebar component to improve readability and maintainability while preserving functionality. - Updated the handling of property pane actions to improve type safety and clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
3 participants
Description
Fixes an issue, when the "Show Page Navigation" option is disabled in the page settings, the sidebar should not appear when navigating to that page. However, even after turning off navigation, the sidebar is still visible.
Fixes #39580
Automation
/ok-to-test tags="@tag.IDE,@tag.Git"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/13900210279
Commit: d1385f8
Cypress dashboard.
Tags:
@tag.IDE,@tag.GitSpec:
Mon, 17 Mar 2025 14:04:53 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Refactor