From 3c872eb9abda7cb90667bddd8213c211cb1e89ed Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 20 Dec 2024 14:57:53 +0300 Subject: [PATCH] fix: property pane in preview mode (#38274) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Fixes an issue where property pane appeared in preview mode under certain conditions. Fixes [#37278](https://github.com/appsmithorg/appsmith/issues/37278) ## Automation /ok-to-test tags="@tag.All" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: b61d77a9e614b0170c795fee9bb58cfb9ee37e25 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Fri, 20 Dec 2024 10:28:59 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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`. --- ...{UnanimatedLayout.tsx => StaticLayout.tsx} | 9 +-- .../IDE/Layout/hooks/useGridLayoutTemplate.ts | 59 +++++-------------- .../src/pages/Editor/IDE/Layout/index.ts | 2 +- app/client/src/pages/Editor/IDE/index.tsx | 4 +- 4 files changed, 21 insertions(+), 53 deletions(-) rename app/client/src/pages/Editor/IDE/Layout/{UnanimatedLayout.tsx => StaticLayout.tsx} (93%) diff --git a/app/client/src/pages/Editor/IDE/Layout/UnanimatedLayout.tsx b/app/client/src/pages/Editor/IDE/Layout/StaticLayout.tsx similarity index 93% rename from app/client/src/pages/Editor/IDE/Layout/UnanimatedLayout.tsx rename to app/client/src/pages/Editor/IDE/Layout/StaticLayout.tsx index 78d5f079ca6a..57e2fd104fe7 100644 --- a/app/client/src/pages/Editor/IDE/Layout/UnanimatedLayout.tsx +++ b/app/client/src/pages/Editor/IDE/Layout/StaticLayout.tsx @@ -22,9 +22,10 @@ const GridContainer = styled.div` const LayoutContainer = styled.div<{ name: string }>` position: relative; grid-area: ${(props) => props.name}; + overflow: auto; `; -function UnanimatedLayout() { +export const StaticLayout = React.memo(() => { const isProtectedMode = useSelector(protectedModeSelector); const { areas, columns } = useGridLayoutTemplate(); @@ -60,8 +61,4 @@ function UnanimatedLayout() { ); -} - -const MemoUanimatedLayout = React.memo(UnanimatedLayout); - -export { MemoUanimatedLayout as UnanimatedLayout }; +}); diff --git a/app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts b/app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts index 789a3837ebfa..b2dc0558af59 100644 --- a/app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts +++ b/app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts @@ -50,17 +50,12 @@ function useGridLayoutTemplate(): ReturnValue { switch (appState) { case EditorState.DATA: if (isPreviewMode || isProtectedMode) { - setColumns([ - "0px", - "0px", - (windowWidth + "px") as AnimatedGridUnit, - "0px", - ]); + setColumns(["0px", "0px", `${windowWidth}px`, "0px"]); } else { setColumns([ SIDEBAR_WIDTH, "300px", - (windowWidth - 300 - 50 + "px") as AnimatedGridUnit, + `${windowWidth - 300 - 50}px`, "0px", ]); } @@ -68,20 +63,12 @@ function useGridLayoutTemplate(): ReturnValue { break; case EditorState.SETTINGS: if (isPreviewMode || isProtectedMode) { - setColumns([ - "0px", - "0px", - (windowWidth + "px") as AnimatedGridUnit, - "0px", - ]); + setColumns(["0px", "0px", `${windowWidth}px`, "0px"]); } else { setColumns([ SIDEBAR_WIDTH, - (APP_SETTINGS_PANE_WIDTH + "px") as AnimatedGridUnit, - (windowWidth - - APP_SIDEBAR_WIDTH - - APP_SETTINGS_PANE_WIDTH + - "px") as AnimatedGridUnit, + `${APP_SETTINGS_PANE_WIDTH}px`, + `${windowWidth - APP_SIDEBAR_WIDTH - APP_SETTINGS_PANE_WIDTH}px`, "0px", ]); } @@ -89,20 +76,12 @@ function useGridLayoutTemplate(): ReturnValue { break; case EditorState.LIBRARIES: if (isPreviewMode || isProtectedMode) { - setColumns([ - "0px", - "0px", - (windowWidth + "px") as AnimatedGridUnit, - "0px", - ]); + setColumns(["0px", "0px", `${windowWidth}px`, "0px"]); } else { setColumns([ SIDEBAR_WIDTH, `${APP_LIBRARIES_PANE_WIDTH}px`, - (windowWidth - - APP_SIDEBAR_WIDTH - - APP_LIBRARIES_PANE_WIDTH + - "px") as AnimatedGridUnit, + `${windowWidth - APP_SIDEBAR_WIDTH - APP_LIBRARIES_PANE_WIDTH}px`, "0px", ]); } @@ -112,25 +91,22 @@ function useGridLayoutTemplate(): ReturnValue { if (isPreviewMode || isProtectedMode) { setColumns([ "0px", - (editorStateLeftPaneWidth + "px") as AnimatedGridUnit, - (windowWidth + "px") as AnimatedGridUnit, + `${editorStateLeftPaneWidth}px`, + `${windowWidth}px`, "0px", ]); } else if (segment !== EditorEntityTab.UI) { if (editorMode === EditorViewMode.SplitScreen) { setColumns([ SIDEBAR_WIDTH, - (editorStateLeftPaneWidth + "px") as AnimatedGridUnit, - (windowWidth - - APP_SIDEBAR_WIDTH - - editorStateLeftPaneWidth + - "px") as AnimatedGridUnit, + `${editorStateLeftPaneWidth}px`, + `${windowWidth - APP_SIDEBAR_WIDTH - editorStateLeftPaneWidth}px`, "0px", ]); } else { setColumns([ SIDEBAR_WIDTH, - (editorStateLeftPaneWidth + "px") as AnimatedGridUnit, + `${editorStateLeftPaneWidth}px`, "0px", "0px", ]); @@ -138,14 +114,9 @@ function useGridLayoutTemplate(): ReturnValue { } else { setColumns([ SIDEBAR_WIDTH, - (editorStateLeftPaneWidth + "px") as AnimatedGridUnit, - (windowWidth - - APP_SIDEBAR_WIDTH - - editorStateLeftPaneWidth - - PropertyPaneWidth + - 1 + - "px") as AnimatedGridUnit, - (PropertyPaneWidth + 1 + "px") as AnimatedGridUnit, + `${editorStateLeftPaneWidth}px`, + `${windowWidth - APP_SIDEBAR_WIDTH - editorStateLeftPaneWidth - PropertyPaneWidth + 1}px`, + `${PropertyPaneWidth + 1}px`, ]); } } diff --git a/app/client/src/pages/Editor/IDE/Layout/index.ts b/app/client/src/pages/Editor/IDE/Layout/index.ts index c00321e5f895..f03b94541f0f 100644 --- a/app/client/src/pages/Editor/IDE/Layout/index.ts +++ b/app/client/src/pages/Editor/IDE/Layout/index.ts @@ -1,2 +1,2 @@ export { AnimatedLayout } from "./AnimatedLayout"; -export { UnanimatedLayout } from "./UnanimatedLayout"; +export { StaticLayout } from "./StaticLayout"; diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx index 40d6acfa8bfe..9b806700cfd8 100644 --- a/app/client/src/pages/Editor/IDE/index.tsx +++ b/app/client/src/pages/Editor/IDE/index.tsx @@ -1,6 +1,6 @@ import React from "react"; import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors"; -import { AnimatedLayout, UnanimatedLayout } from "./Layout"; +import { AnimatedLayout, StaticLayout } from "./Layout"; import { useSelector } from "react-redux"; import type { AppState } from "ee/reducers"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; @@ -22,7 +22,7 @@ function IDE() { return ; } - return ; + return ; } IDE.displayName = "AppIDE";