From 0627e0ddb2dee18b9ea045a374aa5f31642486fb Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Fri, 19 Jan 2024 15:24:30 +0530 Subject: [PATCH] fix: re-render of pages section (#30375) ## Description Pages section in editor pane was getting rendered everytime when a page selection is made. This PR fixes that issue. #### PR fixes following issue(s) Fixes https://github.com/appsmithorg/appsmith/issues/30367 #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed ## Summary by CodeRabbit - **New Features** - Introduced a new component for page management in the editor. - **Refactor** - Simplified the rendering logic in the `EditorPane`. - Optimized performance by memoizing the `LeftPane` and `IDE` components. - **Style** - Updated component imports to match new file structure. --- .../IDE/EditorPane/components/Pages.tsx | 25 +++++++++++++++++++ .../src/pages/Editor/IDE/EditorPane/index.tsx | 22 +++------------- app/client/src/pages/Editor/IDE/index.tsx | 2 +- 3 files changed, 29 insertions(+), 20 deletions(-) create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx new file mode 100644 index 0000000000..07eb8de8af --- /dev/null +++ b/app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { useSelector } from "react-redux"; + +import { default as OldPages } from "pages/Editor/Explorer/Pages"; +import { PagesSection } from "../PagesSection"; +import { + getIsSideBySideEnabled, + getPagesActiveStatus, +} from "selectors/ideSelectors"; + +const Pages = () => { + const isSideBySideEnabled = useSelector(getIsSideBySideEnabled); + const pagesActive = useSelector(getPagesActiveStatus); + + if (!isSideBySideEnabled) { + return ; + /* divider is inside the Pages component */ + } else if (isSideBySideEnabled && pagesActive) { + return ; + } else { + return null; + } +}; + +export { Pages }; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx index 559c61fe7b..6e5562637d 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx @@ -4,35 +4,19 @@ import type { RouteComponentProps } from "react-router"; import { Switch } from "react-router"; import { useSelector } from "react-redux"; -import Pages from "pages/Editor/Explorer/Pages"; import { SentryRoute } from "@appsmith/AppRouter"; import { ADD_PATH } from "constants/routes"; import EditorPaneSegments from "./EditorPaneSegments"; import GlobalAdd from "./GlobalAdd"; import { useEditorPaneWidth } from "../hooks"; -import { - getIsSideBySideEnabled, - getPagesActiveStatus, -} from "selectors/ideSelectors"; +import { getPagesActiveStatus } from "selectors/ideSelectors"; import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties"; -import { PagesSection } from "./PagesSection"; import { MinimalSegment } from "./MinimalSegment"; +import { Pages } from "./components/Pages"; const EditorPane = ({ match: { path } }: RouteComponentProps) => { const width = useEditorPaneWidth(); const pagesActive = useSelector(getPagesActiveStatus); - const isSideBySideEnabled = useSelector(getIsSideBySideEnabled); - - const PagesRender = () => { - if (!isSideBySideEnabled) { - return ; - /* divider is inside the Pages component */ - } else if (isSideBySideEnabled && pagesActive) { - return ; - } else { - return null; - } - }; return ( { {/** Entity Properties component is needed to render the Bindings popover in the context menu. Will be removed eventually **/} - + {pagesActive ? ( diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx index 6c0954e0ff..31feb1ddd5 100644 --- a/app/client/src/pages/Editor/IDE/index.tsx +++ b/app/client/src/pages/Editor/IDE/index.tsx @@ -54,4 +54,4 @@ function IDE() { IDE.displayName = "AppsmithIDE"; -export default IDE; +export default React.memo(IDE);