diff --git a/CODEOWNERS b/CODEOWNERS index 9ddca097f2..fdea23046c 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -63,15 +63,8 @@ app/client/src/actions/autoLayoutActions.ts @appsmithorg/ui-builders app/client/src/actions/canvasSelectionActions.ts @appsmithorg/ui-builders app/client/src/actions/reflowActions.ts @appsmithorg/ui-builders app/client/src/actions/widgetSelectionActions.ts @appsmithorg/ui-builders -app/client/src/components/autoHeight/* @appsmithorg/ui-builders -app/client/src/components/autoHeightOverlay/* @appsmithorg/ui-builders -app/client/src/components/designSystems/appsmith/PositionedContainer.tsx @appsmithorg/ui-builders -app/client/src/components/editorComponents/DraggableComponent.tsx @appsmithorg/ui-builders -app/client/src/components/editorComponents/ResizableComponent.tsx @appsmithorg/ui-builders -app/client/src/components/editorComponents/ResizableUtils.ts @appsmithorg/ui-builders -app/client/src/components/editorComponents/ResizeStyledComponents.tsx @appsmithorg/ui-builders -app/client/src/components/editorComponents/WidgetNameComponent/* @appsmithorg/ui-builders app/client/src/components/propertyControls/* @appsmithorg/ui-builders +app/client/src/layoutSystems/* @appsmithorg/ui-builders app/client/src/normalizers/CanvasWidgetsNormalizer.tsx @appsmithorg/ui-builders app/client/src/pages/Editor/Canvas.tsx @appsmithorg/ui-builders app/client/src/pages/Editor/CanvasLayoutConversion/* @appsmithorg/ui-builders @@ -102,7 +95,6 @@ app/client/src/selectors/canvasSelectors.ts @appsmithorg/ui-builders app/client/src/selectors/widgetSelectors.ts @appsmithorg/ui-builders app/client/src/utils/DSLConversions/* @appsmithorg/ui-builders app/client/src/utils/autoHeight/* @appsmithorg/ui-builders -app/client/src/utils/autoLayout/* @appsmithorg/ui-builders app/client/src/utils/hooks/autoHeightUIHooks.ts @appsmithorg/ui-builders app/client/src/utils/hooks/useAllowEditorDragToSelect.ts @appsmithorg/ui-builders app/client/src/utils/hooks/useClickToSelectWidget.tsx @appsmithorg/ui-builders @@ -111,7 +103,7 @@ app/client/src/utils/hooks/usePositionedContainerZIndex.ts @appsmithorg/ui-build app/client/src/utils/hooks/useReflow.ts @appsmithorg/ui-builders app/client/src/utils/hooks/useWidgetSelection.ts @appsmithorg/ui-builders app/client/src/widgets/BaseWidget.tsx @appsmithorg/ui-builders -app/client/src/widgets/CanvasResizer.tsx @appsmithorg/ui-builders +app/client/src/widgets/BaseWidgetHOC/* @appsmithorg/ui-builders app/client/src/widgets/CanvasWidget.tsx @appsmithorg/ui-builders app/client/src/widgets/ContainerWidget/* @appsmithorg/ui-builders app/client/src/widgets/MetaHOC.tsx @appsmithorg/ui-builders diff --git a/app/client/src/layoutSystems/autolayout/canvasResizer/CanvasResizer.tsx b/app/client/src/layoutSystems/autolayout/MainContainerResizer/MainContainerResizer.tsx similarity index 89% rename from app/client/src/layoutSystems/autolayout/canvasResizer/CanvasResizer.tsx rename to app/client/src/layoutSystems/autolayout/MainContainerResizer/MainContainerResizer.tsx index a04817b08b..97ea2b2fd8 100644 --- a/app/client/src/layoutSystems/autolayout/canvasResizer/CanvasResizer.tsx +++ b/app/client/src/layoutSystems/autolayout/MainContainerResizer/MainContainerResizer.tsx @@ -1,13 +1,7 @@ import { layoutConfigurations } from "constants/WidgetConstants"; import React, { useEffect, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; -import { - getCurrentApplicationLayout, - getCurrentAppPositioningType, - getCurrentPageId, - previewModeSelector, -} from "selectors/editorSelectors"; +import { getCurrentApplicationLayout } from "selectors/editorSelectors"; import { setAutoCanvasResizing } from "actions/autoLayoutActions"; import styled from "styled-components"; import { AUTOLAYOUT_RESIZER_WIDTH_BUFFER } from "utils/hooks/useDynamicAppLayout"; @@ -56,25 +50,32 @@ const AutoLayoutCanvasResizer = styled.div` } } `; -export function CanvasResizer({ + +/** + * OldName: CanvasResizer + */ +export function MainContainerResizer({ + currentPageId, + enableMainCanvasResizer, heightWithTopMargin, isPageInitiated, + isPreviewMode, shouldHaveTopMargin, }: { heightWithTopMargin: string; isPageInitiated: boolean; shouldHaveTopMargin: boolean; + isPreviewMode: boolean; + currentPageId: string; + enableMainCanvasResizer: boolean; }) { - const isPreviewMode = useSelector(previewModeSelector); - const currentPageId = useSelector(getCurrentPageId); const appLayout = useSelector(getCurrentApplicationLayout); - const appPositioningType = useSelector(getCurrentAppPositioningType); const ref = useRef(null); const dispatch = useDispatch(); useEffect(() => { const ele: any = document.getElementById(CANVAS_VIEWPORT); - if (isPageInitiated && appPositioningType === AppPositioningTypes.AUTO) { + if (isPageInitiated && enableMainCanvasResizer) { const buffer = isPreviewMode ? AUTOLAYOUT_RESIZER_WIDTH_BUFFER : 0; const fullWidthCSS = `calc(100% - ${AUTOLAYOUT_RESIZER_WIDTH_BUFFER}px)`; const wrapperElement: any = document.getElementById("widgets-editor"); @@ -161,10 +162,10 @@ export function CanvasResizer({ appLayout, isPreviewMode, currentPageId, - appPositioningType, + enableMainCanvasResizer, isPageInitiated, ]); - return appPositioningType === AppPositioningTypes.AUTO ? ( + return enableMainCanvasResizer ? ( ; + +const AUTO_LAYOUT_FEATURES = { + [LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: true, +} as Record; + +/** + * This Hook is mainly written to be used as a central control to enable + * layout specific features based on the type of current layout. + * This way the components using it need not be aware of what layout it is on + * + * @returns This hook returns a method, which can be used to get a boolean corresponding to the feature supplied as argument. + * The boolean will indicate if the feature is enabled for the current layout + */ +export const useLayoutSystemFeatures = () => { + const appPositioningType = useSelector(getCurrentAppPositioningType); + + let currentFeatureSet = {} as Record; + + switch (appPositioningType) { + case AppPositioningTypes.FIXED: + currentFeatureSet = FIXED_LAYOUT_FEATURES; + break; + case AppPositioningTypes.AUTO: + currentFeatureSet = AUTO_LAYOUT_FEATURES; + break; + } + + /** + * This method checks if the features requested in the method, + * can be enabled for the given particular layout type + */ + return (checkFeaturesArray: LayoutSystemFeatures[]) => { + const featuresArray: boolean[] = []; + + for (const checkFeature of checkFeaturesArray) { + featuresArray.push(!!currentFeatureSet[checkFeature]); + } + + return featuresArray; + }; +}; diff --git a/app/client/src/pages/AppViewer/AppPage.styled.tsx b/app/client/src/pages/AppViewer/AppPage.styled.tsx index beb90b74b7..ef95b7ed2d 100644 --- a/app/client/src/pages/AppViewer/AppPage.styled.tsx +++ b/app/client/src/pages/AppViewer/AppPage.styled.tsx @@ -1,6 +1,9 @@ import styled from "styled-components"; -export const PageViewContainer = styled.div<{ +/** + * OldName: PageViewContainer + */ +export const PageViewWrapper = styled.div<{ hasPinnedSidebar: boolean; sidebarWidth: number; isPreviewMode?: boolean; diff --git a/app/client/src/pages/AppViewer/AppPage.tsx b/app/client/src/pages/AppViewer/AppPage.tsx index aa1d7eee56..3b75874ae5 100644 --- a/app/client/src/pages/AppViewer/AppPage.tsx +++ b/app/client/src/pages/AppViewer/AppPage.tsx @@ -12,7 +12,7 @@ import { getAppMode, } from "@appsmith/selectors/applicationSelectors"; import { NAVIGATION_SETTINGS } from "constants/AppConstants"; -import { PageView, PageViewContainer } from "./AppPage.styled"; +import { PageView, PageViewWrapper } from "./AppPage.styled"; import { useIsMobileDevice } from "utils/hooks/useDeviceDetect"; import { APP_MODE } from "entities/App"; import { useLocation } from "react-router"; @@ -50,7 +50,7 @@ export function AppPage(props: AppPageProps) { }, [props.pageId, props.pageName]); return ( - - + ); } diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index de7d393d28..2239d92473 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -22,17 +22,17 @@ interface CanvasProps { widgetsStructure: CanvasWidgetStructure; pageId: string; canvasWidth: number; - isAutoLayout?: boolean; + enableMainCanvasResizer?: boolean; } -const Container = styled.section<{ +const Wrapper = styled.section<{ background: string; width: number; - $isAutoLayout: boolean; + $enableMainCanvasResizer: boolean; }>` background: ${({ background }) => background}; - width: ${({ $isAutoLayout, width }) => - $isAutoLayout ? `100%` : `${width}px`}; + width: ${({ $enableMainCanvasResizer, width }) => + $enableMainCanvasResizer ? `100%` : `${width}px`}; `; const Canvas = (props: CanvasProps) => { const { canvasWidth } = props; @@ -68,13 +68,15 @@ const Canvas = (props: CanvasProps) => { const focusRef = useWidgetFocus(); - const marginHorizontalClass = props.isAutoLayout ? `mx-0` : `mx-auto`; - const paddingBottomClass = props.isAutoLayout ? "" : "pb-52"; + const marginHorizontalClass = props.enableMainCanvasResizer + ? `mx-0` + : `mx-auto`; + const paddingBottomClass = props.enableMainCanvasResizer ? "" : "pb-52"; try { return ( - { props.widgetsStructure, RenderModes.CANVAS, )} - + ); } catch (error) { diff --git a/app/client/src/pages/Editor/CanvasPropertyPane/index.tsx b/app/client/src/pages/Editor/CanvasPropertyPane/index.tsx index 5a4f16c0bf..355bc76fe0 100644 --- a/app/client/src/pages/Editor/CanvasPropertyPane/index.tsx +++ b/app/client/src/pages/Editor/CanvasPropertyPane/index.tsx @@ -1,16 +1,19 @@ import * as Sentry from "@sentry/react"; import React from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import { Button, Tooltip } from "design-system"; import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions"; import ConversionButton from "../CanvasLayoutConversion/ConversionButton"; -import { MainContainerLayoutControl } from "../MainContainerLayoutControl"; -import { getIsAutoLayout } from "selectors/editorSelectors"; import styled from "styled-components"; import AnalyticsUtil from "utils/AnalyticsUtil"; +import { + LayoutSystemFeatures, + useLayoutSystemFeatures, +} from "../../../layoutSystems/common/useLayoutSystemFeatures"; +import { MainContainerWidthToggles } from "../MainContainerWidthToggles"; const Title = styled.p` color: var(--ads-v2-color-fg); @@ -25,7 +28,12 @@ export function CanvasPropertyPane() { AnalyticsUtil.logEvent("APP_SETTINGS_BUTTON_CLICK"); dispatch(openAppSettingsPaneAction()); }; - const isAutoLayout = useSelector(getIsAutoLayout); + + const checkLayoutSystemFeatures = useLayoutSystemFeatures(); + const [enableLayoutControl] = checkLayoutSystemFeatures([ + LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL, + ]); + return (
@@ -34,10 +42,10 @@ export function CanvasPropertyPane() {
- {!isAutoLayout && ( + {enableLayoutControl && ( <> Canvas size - + )} diff --git a/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx index cc106b9244..b41cdc59f9 100644 --- a/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx @@ -5,7 +5,7 @@ import styled from "styled-components"; import history from "utils/history"; import { generateTemplateFormURL } from "RouteBuilder"; import { useParams } from "react-router"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import type { ExplorerURLParams } from "@appsmith/pages/Editor/Explorer/helpers"; import { showTemplatesModal } from "actions/templateActions"; import { @@ -25,9 +25,12 @@ import { Tooltip, Text, } from "design-system"; -import { getIsAutoLayout } from "selectors/editorSelectors"; import { isAirgapped } from "@appsmith/utils/airgapHelpers"; import { TOOLTIP_HOVER_ON_DELAY_IN_S } from "constants/AppConstants"; +import { + LayoutSystemFeatures, + useLayoutSystemFeatures, +} from "layoutSystems/common/useLayoutSystemFeatures"; const Wrapper = styled.div` .title { @@ -53,9 +56,13 @@ function AddPageContextMenu({ const [show, setShow] = useState(openMenu); const dispatch = useDispatch(); const { pageId } = useParams(); - const isAutoLayout = useSelector(getIsAutoLayout); const isAirgappedInstance = isAirgapped(); + const checkLayoutSystemFeatures = useLayoutSystemFeatures(); + const [enableForkingFromTemplates] = checkLayoutSystemFeatures([ + LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES, + ]); + const ContextMenuItems = useMemo(() => { const items = [ { @@ -74,7 +81,7 @@ function AddPageContextMenu({ }, ]; - if (!isAutoLayout && !isAirgappedInstance) { + if (enableForkingFromTemplates && !isAirgappedInstance) { items.push({ title: createMessage(ADD_PAGE_FROM_TEMPLATE), icon: "layout-2-line", diff --git a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx index a3b38b826e..65c73bb0a0 100644 --- a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx +++ b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx @@ -29,7 +29,7 @@ import { import { MockCanvas } from "test/testMockedWidgets"; import { act, fireEvent, render, waitFor } from "test/testUtils"; import * as widgetRenderUtils from "utils/widgetRenderUtils"; -import MainContainer from "../MainContainer"; +import WidgetsEditorWrapper from "../WidgetsEditorWrapper"; import GlobalHotKeys from "./GlobalHotKeys"; import * as widgetSelectionsActions from "actions/widgetSelectionActions"; import { SelectionRequestType } from "sagas/WidgetSelectUtils"; @@ -55,7 +55,7 @@ describe("Canvas Hot Keys", () => { function UpdatedEditor({ dsl }: any) { useMockDsl(dsl); - return ; + return ; } // These need to be at the top to avoid imports not being mocked. ideally should be in setup.ts but will override for all other tests diff --git a/app/client/src/pages/Editor/MainContainerLayoutControl.test.tsx b/app/client/src/pages/Editor/MainContainerWidthToggles.test.tsx similarity index 92% rename from app/client/src/pages/Editor/MainContainerLayoutControl.test.tsx rename to app/client/src/pages/Editor/MainContainerWidthToggles.test.tsx index aa10f0c55a..613917de4d 100644 --- a/app/client/src/pages/Editor/MainContainerLayoutControl.test.tsx +++ b/app/client/src/pages/Editor/MainContainerWidthToggles.test.tsx @@ -7,7 +7,7 @@ import { Provider } from "react-redux"; import { lightTheme } from "selectors/themeSelectors"; import store from "store"; -import { MainContainerLayoutControl } from "./MainContainerLayoutControl"; +import { MainContainerWidthToggles } from "./MainContainerWidthToggles"; function navigateWithArrowKeys(key: string, noOfPresses: number) { for (let i = 0; i < noOfPresses; i++) { @@ -15,11 +15,11 @@ function navigateWithArrowKeys(key: string, noOfPresses: number) { } } -describe("", () => { +describe("", () => { const getTestComponent = () => ( - + ); diff --git a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx b/app/client/src/pages/Editor/MainContainerWidthToggles.tsx similarity index 96% rename from app/client/src/pages/Editor/MainContainerLayoutControl.tsx rename to app/client/src/pages/Editor/MainContainerWidthToggles.tsx index 85021869cf..1a9a91710d 100644 --- a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx +++ b/app/client/src/pages/Editor/MainContainerWidthToggles.tsx @@ -73,7 +73,10 @@ const options = AppsmithLayouts.map((layout, index) => ({ value: layout.type, })); -export function MainContainerLayoutControl() { +/** + * OldName: MainContainerLayoutControl + */ +export function MainContainerWidthToggles() { const dispatch = useDispatch(); const appId = useSelector(getCurrentApplicationId); const appLayout = useSelector(getCurrentApplicationLayout); diff --git a/app/client/src/pages/Editor/WidgetsEditor/EmptyCanvasSection.tsx b/app/client/src/pages/Editor/WidgetsEditor/EmptyCanvasPrompts.tsx similarity index 80% rename from app/client/src/pages/Editor/WidgetsEditor/EmptyCanvasSection.tsx rename to app/client/src/pages/Editor/WidgetsEditor/EmptyCanvasPrompts.tsx index a062159d97..ea5dff5d62 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/EmptyCanvasSection.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/EmptyCanvasPrompts.tsx @@ -3,8 +3,6 @@ import styled from "styled-components"; import { Text, TextType } from "design-system-old"; import { useDispatch, useSelector } from "react-redux"; import { - getIsAutoLayout, - previewModeSelector, selectURLSlugs, showCanvasTopSectionSelector, } from "selectors/editorSelectors"; @@ -24,6 +22,10 @@ import { import { deleteCanvasCardsState } from "actions/editorActions"; import { isAirgapped } from "@appsmith/utils/airgapHelpers"; import { Icon } from "design-system"; +import { + LayoutSystemFeatures, + useLayoutSystemFeatures, +} from "../../../layoutSystems/common/useLayoutSystemFeatures"; const Wrapper = styled.div` margin: ${(props) => @@ -76,19 +78,37 @@ const goToGenPageForm = ({ pageId }: routeId): void => { history.push(generateTemplateFormURL({ pageId })); }; -function CanvasTopSection() { +type EmptyCanvasPromptsProps = { + isPreviewMode: boolean; +}; + +/** + * OldName: CanvasTopSection + */ +/** + * This Component encompasses the prompts for empty canvas + * prompts like generate crud app or import from template + * @param props Object that contains + * @prop isPreviewMode, boolean to indicate preview mode + * @returns + */ +function EmptyCanvasPrompts(props: EmptyCanvasPromptsProps) { const dispatch = useDispatch(); const showCanvasTopSection = useSelector(showCanvasTopSectionSelector); - const inPreviewMode = useSelector(previewModeSelector); + const { isPreviewMode } = props; const { pageId } = useParams(); const { applicationSlug, pageSlug } = useSelector(selectURLSlugs); - const isAutoLayout = useSelector(getIsAutoLayout); + + const checkLayoutSystemFeatures = useLayoutSystemFeatures(); + const [enableForkingFromTemplates] = checkLayoutSystemFeatures([ + LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES, + ]); useEffect(() => { - if (!showCanvasTopSection && !inPreviewMode) { + if (!showCanvasTopSection && !isPreviewMode) { dispatch(deleteCanvasCardsState()); } - }, [showCanvasTopSection, inPreviewMode]); + }, [showCanvasTopSection, isPreviewMode]); if (!showCanvasTopSection) return null; @@ -110,7 +130,7 @@ function CanvasTopSection() { return ( - {!isAutoLayout && !isAirgappedInstance && ( + {enableForkingFromTemplates && !isAirgappedInstance && ( @@ -142,4 +162,4 @@ function CanvasTopSection() { ); } -export default CanvasTopSection; +export default EmptyCanvasPrompts; diff --git a/app/client/src/pages/Editor/WidgetsEditor/CanvasContainer.tsx b/app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx similarity index 81% rename from app/client/src/pages/Editor/WidgetsEditor/CanvasContainer.tsx rename to app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx index dc8ce0d7be..c27c3dfb75 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/CanvasContainer.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/MainContainerWrapper.tsx @@ -4,7 +4,6 @@ import { useSelector } from "react-redux"; import { getCanvasWidth, - getCurrentPageId, getIsFetchingPage, getViewModePageList, showCanvasTopSectionSelector, @@ -24,7 +23,6 @@ import { getAppThemeIsChanging, getSelectedAppTheme, } from "selectors/appThemingSelectors"; -import { getIsAutoLayout } from "selectors/canvasSelectors"; import { getCurrentThemeDetails } from "selectors/themeSelectors"; import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector"; import { @@ -33,27 +31,32 @@ import { } from "utils/hooks/useDynamicAppLayout"; import Canvas from "../Canvas"; import type { AppState } from "@appsmith/reducers"; -import { CanvasResizer } from "layoutSystems/autolayout/canvasResizer/CanvasResizer"; +import { MainContainerResizer } from "layoutSystems/autolayout/MainContainerResizer/MainContainerResizer"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { getIsAnonymousDataPopupVisible } from "selectors/onboardingSelectors"; +import { + LayoutSystemFeatures, + useLayoutSystemFeatures, +} from "../../../layoutSystems/common/useLayoutSystemFeatures"; import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants"; -type CanvasContainerProps = { +type MainCanvasWrapperProps = { isPreviewMode: boolean; shouldShowSnapShotBanner: boolean; navigationHeight?: number; isAppSettingsPaneWithNavigationTabOpen?: boolean; + currentPageId: string; }; -const Container = styled.section<{ - $isAutoLayout: boolean; +const Wrapper = styled.section<{ + $enableMainCanvasResizer: boolean; background: string; isPreviewingNavigation?: boolean; isAppSettingsPaneWithNavigationTabOpen?: boolean; navigationHeight?: number; }>` - width: ${({ $isAutoLayout }) => - $isAutoLayout + width: ${({ $enableMainCanvasResizer }) => + $enableMainCanvasResizer ? `calc(100% - ${AUTOLAYOUT_RESIZER_WIDTH_BUFFER}px)` : `100%`}; position: relative; @@ -100,15 +103,27 @@ const Container = styled.section<{ } `; -function CanvasContainer(props: CanvasContainerProps) { +/** + * OldName: CanvasContainer + */ +/** + * This Component encompasses/wraps the center section of the editor + * That involves mainly the main container and main container resizer + * @param props object that contains + * @prop isPreviewMode, boolean to indicate preview mode + * @prop shouldShowSnapShotBanner, boolean to indicate if snapshot is shown + * @prop navigationHeight, height of navigation header in pixels + * @prop isAppSettingsPaneWithNavigationTabOpen, boolean to indicate if app setting navigation ta is open + * @prop currentPageId, current page id in string + * @returns + */ +function MainContainerWrapper(props: MainCanvasWrapperProps) { const { isAppSettingsPaneWithNavigationTabOpen, navigationHeight } = props; const dispatch = useDispatch(); - const { isPreviewMode, shouldShowSnapShotBanner } = props; + const { currentPageId, isPreviewMode, shouldShowSnapShotBanner } = props; - const currentPageId = useSelector(getCurrentPageId); const isFetchingPage = useSelector(getIsFetchingPage); const canvasWidth = useSelector(getCanvasWidth); - const isAutoLayout = useSelector(getIsAutoLayout); const widgetsStructure = useSelector(getCanvasWidgetsStructure, equal); const pages = useSelector(getViewModePageList); const theme = useSelector(getCurrentThemeDetails); @@ -125,6 +140,11 @@ function CanvasContainer(props: CanvasContainerProps) { const isPageInitializing = isFetchingPage || !isLayoutingInitialized; const isWDSV2Enabled = useFeatureFlag("ab_wds_enabled"); + const checkLayoutSystemFeatures = useLayoutSystemFeatures(); + const [enableMainContainerResizer] = checkLayoutSystemFeatures([ + LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER, + ]); + useEffect(() => { return () => { dispatch(forceOpenWidgetPanel(false)); @@ -151,7 +171,7 @@ function CanvasContainer(props: CanvasContainerProps) { node = ( @@ -182,8 +202,8 @@ function CanvasContainer(props: CanvasContainerProps) { const heightWithTopMargin = `calc(100vh - 2rem - ${topMargin} - ${smallHeaderHeight} - ${bottomBarHeight} - ${scrollBarHeight} - ${navigationHeight}px)`; return ( <> - )} {node} - - + ); } -export default CanvasContainer; +export default MainContainerWrapper; diff --git a/app/client/src/pages/Editor/WidgetsEditor/PropertyPaneContainer.tsx b/app/client/src/pages/Editor/WidgetsEditor/PropertyPaneWrapper.tsx similarity index 89% rename from app/client/src/pages/Editor/WidgetsEditor/PropertyPaneContainer.tsx rename to app/client/src/pages/Editor/WidgetsEditor/PropertyPaneWrapper.tsx index 5124be032c..efba445958 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/PropertyPaneContainer.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/PropertyPaneWrapper.tsx @@ -4,7 +4,10 @@ import React, { useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors"; -function PropertyPaneContainer() { +/** + * OldName: PropertyPaneContainer + */ +function PropertyPaneWrapper() { const dispatch = useDispatch(); const propertyPaneWidth = useSelector(getPropertyPaneWidth); @@ -33,4 +36,4 @@ function PropertyPaneContainer() { ); } -export default PropertyPaneContainer; +export default PropertyPaneWrapper; diff --git a/app/client/src/pages/Editor/WidgetsEditor/index.tsx b/app/client/src/pages/Editor/WidgetsEditor/index.tsx index 0e93bb204a..4d6c78fa8a 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/index.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/index.tsx @@ -27,17 +27,17 @@ import { useAllowEditorDragToSelect } from "utils/hooks/useAllowEditorDragToSele import { inGuidedTour } from "selectors/onboardingSelectors"; import EditorContextProvider from "components/editorComponents/EditorContextProvider"; import Guide from "../GuidedTour/Guide"; -import CanvasContainer from "./CanvasContainer"; -import CanvasTopSection from "./EmptyCanvasSection"; +import MainContainerWrapper from "./MainContainerWrapper"; +import EmptyCanvasPrompts from "./EmptyCanvasPrompts"; import { useAutoHeightUIState } from "utils/hooks/autoHeightUIHooks"; -import { PageViewContainer } from "pages/AppViewer/AppPage.styled"; +import { PageViewWrapper } from "pages/AppViewer/AppPage.styled"; import { NAVIGATION_SETTINGS } from "constants/AppConstants"; import { getAppSettingsPaneContext, getIsAppSettingsPaneWithNavigationTabOpen, } from "selectors/appSettingsPaneSelectors"; import { AppSettingsTabs } from "../AppSettingsPane/AppSettings"; -import PropertyPaneContainer from "./PropertyPaneContainer"; +import PropertyPaneWrapper from "./PropertyPaneWrapper"; import SnapShotBannerCTA from "../CanvasLayoutConversion/SnapShotBannerCTA"; import { APP_MODE } from "entities/App"; import { getSelectedAppTheme } from "selectors/appThemingSelectors"; @@ -172,7 +172,9 @@ function WidgetsEditor() { isAppSettingsPaneWithNavigationTabOpen, })} > - {!isAppSettingsPaneWithNavigationTabOpen && } + {!isAppSettingsPaneWithNavigationTabOpen && ( + + )}
{showNavigation()} -
)} - - +
- +
); diff --git a/app/client/src/pages/Editor/MainContainer.test.tsx b/app/client/src/pages/Editor/WidgetsEditorWrapper.test.tsx similarity index 100% rename from app/client/src/pages/Editor/MainContainer.test.tsx rename to app/client/src/pages/Editor/WidgetsEditorWrapper.test.tsx diff --git a/app/client/src/pages/Editor/MainContainer.tsx b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx similarity index 91% rename from app/client/src/pages/Editor/MainContainer.tsx rename to app/client/src/pages/Editor/WidgetsEditorWrapper.tsx index 8d1d887c42..872314e747 100644 --- a/app/client/src/pages/Editor/MainContainer.tsx +++ b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx @@ -21,7 +21,7 @@ import BottomBar from "components/BottomBar"; const SentryRoute = Sentry.withSentryRouting(Route); -const Container = styled.div` +const Wrapper = styled.div` display: flex; height: calc( 100vh - ${(props) => props.theme.smallHeaderHeight} - @@ -30,7 +30,10 @@ const Container = styled.div` background-color: ${(props) => props.theme.appBackground}; `; -function MainContainer() { +/** + * OldName: MainContainer + */ +function WidgetsEditorWrapper() { const dispatch = useDispatch(); const sidebarWidth = useSelector(getExplorerWidth); const { path } = useRouteMatch(); @@ -57,7 +60,7 @@ function MainContainer() { return ( <> - + - + ); } -MainContainer.displayName = "MainContainer"; +WidgetsEditorWrapper.displayName = "WidgetsEditorWrapper"; -export default MainContainer; +export default WidgetsEditorWrapper; diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index 21c4437648..572f8e98fc 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -5,7 +5,7 @@ import type { RouteComponentProps } from "react-router-dom"; import { withRouter } from "react-router-dom"; import type { BuilderRouteParams } from "constants/routes"; import type { AppState } from "@appsmith/reducers"; -import MainContainer from "./MainContainer"; +import WidgetsEditorWrapper from "./WidgetsEditorWrapper"; import { getCurrentApplicationId, getIsEditorInitialized, @@ -159,7 +159,7 @@ class Editor extends Component { - + diff --git a/app/client/test/testMockedWidgets.tsx b/app/client/test/testMockedWidgets.tsx index 2b169f6876..e7c5ae48c8 100644 --- a/app/client/test/testMockedWidgets.tsx +++ b/app/client/test/testMockedWidgets.tsx @@ -1,7 +1,7 @@ import { APP_MODE } from "entities/App"; import AppViewerPageContainer from "pages/AppViewer/AppViewerPageContainer"; import Canvas from "pages/Editor/Canvas"; -import MainContainer from "pages/Editor/MainContainer"; +import WidgetsEditorWrapper from "pages/Editor/WidgetsEditorWrapper"; import React from "react"; import { useSelector } from "react-redux"; import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector"; @@ -24,5 +24,5 @@ export function UpdateAppViewer({ dsl }: any) { } export function UpdatedEditor({ dsl }: any) { useMockDsl(dsl, APP_MODE.EDIT); - return ; + return ; }