fix: revert "fix: canvas resizing issues" #35129
Conversation
This reverts commit cbe1f58.
alex-golovanov
requested review from
a team and
riodeuno
and removed request for
a team
WalkthroughThe recent changes across multiple components focus on enhancing modularity and simplifying the logic of the application. A new custom hook, Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component
participant H as useDynamicAppLayout
participant R as Redux Store
C->>H: Request layout info
H->>R: Retrieve layout state
R-->>H: Return layout state
H-->>C: Provide updated layout info
C->>C: Render updated layout
Poem
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (7)
- app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx (1 hunks)
- app/client/src/pages/AppViewer/AppPage.tsx (2 hunks)
- app/client/src/pages/Editor/IDE/AppsmithIDE.test.tsx (2 hunks)
- app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper.tsx (7 hunks)
- app/client/src/pages/Editor/WidgetsEditor/components/NavigationAdjustedPageViewer.tsx (1 hunks)
- app/client/src/utils/hooks/useDynamicAppLayout.tsx (1 hunks)
- app/client/src/widgets/ContainerWidget/widget/index.test.tsx (2 hunks)
Files skipped from review due to trivial changes (1)
- app/client/src/pages/Editor/WidgetsEditor/components/NavigationAdjustedPageViewer.tsx
Additional context used
Biome
app/client/src/utils/hooks/useDynamicAppLayout.tsx
[error] 169-169: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
Additional comments not posted (19)
app/client/src/pages/AppViewer/AppPage.tsx (3)
1-5: Good job on updating the imports!The inclusion of
useDynamicAppLayoutand removal ofuseDispatchindicates a move towards a more modular and streamlined approach to managing layout dynamics.
29-30: Great use of useMemo for width calculation!Referencing
props.canvasWidthdirectly improves clarity and ensures consistent width calculation.
32-32: Excellent use of useDynamicAppLayout!Introducing the
useDynamicAppLayouthook simplifies the layout management logic and reduces dependencies on Redux.app/client/src/widgets/ContainerWidget/widget/index.test.tsx (2)
5-5: Nice update on the import statement!Replacing
useCanvasWidthAutoResizewithuseDynamicAppLayoutHookreflects the updated functionality being tested.
23-23: Good job updating the spy!Updating the spy to
useDynamicAppLayoutensures that the tests are validating the new dynamic layout behavior.app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx (1)
7-7: Great refactor on the import statement!Importing
AUTOLAYOUT_RESIZER_WIDTH_BUFFERfromutils/hooks/useDynamicAppLayoutconsolidates the source of constants and improves modularity.app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper.tsx (4)
25-25: Good job adding the new import!The
useDynamicAppLayouthook is correctly imported and will be used in the component.
110-110: Nice change to default export!Changing
MainContainerWrapperto a default export can simplify imports in other parts of the application.
131-132: Good implementation of the new hook!Replacing
useCanvasWidthAutoResizewithuseDynamicAppLayoutseems to streamline the layout management logic.
141-141: Ensure the useEffect dependency array change is intentional.Changing the dependency array to an empty array means the effect will only run once on mount. Ensure that this change does not affect any necessary updates tied to the
dispatchfunction.app/client/src/utils/hooks/useDynamicAppLayout.tsx (7)
1-39: Good job on the comprehensive imports!All necessary utilities and hooks are imported, ensuring the hook can function correctly.
40-291: Excellent implementation of the custom hook!The
useDynamicAppLayouthook is well-structured and covers various layout scenarios. The use of memoization and debouncing is a great touch for performance optimization.Tools
Biome
[error] 169-169: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
203-218: Good use of ResizeObserver!The implementation of
ResizeObserverwithin theuseEffecthook is well done, ensuring the canvas resizes dynamically.
220-222: Nice implementation of debounced resizing!The use of debounced resizing ensures that the layout updates are optimized and do not cause unnecessary re-renders.
240-257: Thorough layout resize effect!The
useEffecthook covers various conditions for resizing the layout, ensuring that the canvas adjusts correctly based on the application state.
259-269: Good handling of mobile breakpoints!The
useEffecthook ensures that the layout updates correctly for mobile breakpoints.
271-289: Effective canvas resizing logic!The
useEffecthook handles canvas resizing effectively, ensuring that the layout updates correctly when the canvas is resized.app/client/src/pages/Editor/IDE/AppsmithIDE.test.tsx (2)
25-25: Good job updating the import!The import statement for
useDynamicAppLayoutcorrectly reflects the changes in the application logic.
109-109: Nice update to the hook mocking!The spy on
useDynamicAppLayoutensures that the test correctly mocks the new hook's implementation.
|
This PR fixes #35126 . |
## Description This reverts commit cbe1f58. ## 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/10072532868> > Commit: 9ab856d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10072532868&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Wed, 24 Jul 2024 09:06:01 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`Issue Number` _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="" ### :mag: Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!CAUTION] > If you modify the content in this section, you are likely to disrupt the CI result for your PR. <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No
## Description This reverts commit cbe1f58. ## 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/10072532868> > Commit: 9ab856d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10072532868&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Wed, 24 Jul 2024 09:06:01 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
Description
This reverts commit cbe1f58.
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/10072532868
Commit: 9ab856d
Cypress dashboard.
Tags:
@tag.AllSpec:
Wed, 24 Jul 2024 09:06:01 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?