diff --git a/app/client/src/actions/autoLayoutActions.ts b/app/client/src/actions/autoLayoutActions.ts index a49ede4223..a2b5e9f457 100644 --- a/app/client/src/actions/autoLayoutActions.ts +++ b/app/client/src/actions/autoLayoutActions.ts @@ -1,6 +1,6 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; +import type { LayoutSystemTypes } from "layoutSystems/types"; import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; -import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import type { CONVERSION_STATES, SnapShotDetails, @@ -28,12 +28,10 @@ export const updateLayoutForMobileBreakpointAction = ( }; }; -export const updateLayoutPositioning = ( - positioningType: AppPositioningTypes, -) => { +export const updateLayoutSystemType = (layoutSystemType: LayoutSystemTypes) => { return { - type: ReduxActionTypes.UPDATE_LAYOUT_POSITIONING, - payload: positioningType, + type: ReduxActionTypes.UPDATE_LAYOUT_SYSTEM_TYPE, + payload: layoutSystemType, }; }; diff --git a/app/client/src/ce/api/ApplicationApi.tsx b/app/client/src/ce/api/ApplicationApi.tsx index ec9614280f..239f383efd 100644 --- a/app/client/src/ce/api/ApplicationApi.tsx +++ b/app/client/src/ce/api/ApplicationApi.tsx @@ -3,15 +3,13 @@ import type { ApiResponse } from "api/ApiResponses"; import type { AxiosPromise } from "axios"; import type { AppColorCode } from "constants/DefaultTheme"; import type { IconNames } from "design-system"; -import type { - AppLayoutConfig, - AppPositioningTypeConfig, -} from "reducers/entityReducers/pageListReducer"; +import type { AppLayoutConfig } from "reducers/entityReducers/pageListReducer"; import type { APP_MODE } from "entities/App"; import type { ApplicationVersion } from "@appsmith/actions/applicationActions"; import type { Datasource } from "entities/Datasource"; import type { NavigationSetting } from "constants/AppConstants"; import { getSnapShotAPIRoute } from "@appsmith/constants/ApiConstants"; +import type { LayoutSystemTypeConfig } from "layoutSystems/types"; export type EvaluationVersion = number; @@ -117,7 +115,7 @@ export type UpdateApplicationPayload = { embedSetting?: AppEmbedSetting; applicationDetail?: { navigationSetting?: NavigationSetting; - appPositioning?: AppPositioningTypeConfig; + appPositioning?: LayoutSystemTypeConfig; }; forkingEnabled?: boolean; }; diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index 76fe684c23..4056b04b74 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -13,11 +13,9 @@ import type { LayoutOnLoadActionErrors, PageAction, } from "constants/AppsmithActionConstants/ActionConstants"; -import type { - AppLayoutConfig, - AppPositioningTypeConfig, -} from "reducers/entityReducers/pageListReducer"; +import type { AppLayoutConfig } from "reducers/entityReducers/pageListReducer"; import type { DSLWidget } from "WidgetProvider/constants"; +import type { LayoutSystemTypeConfig } from "layoutSystems/types"; export const ReduxSagaChannels = { WEBSOCKET_APP_LEVEL_WRITE_CHANNEL: "WEBSOCKET_APP_LEVEL_WRITE_CHANNEL", @@ -806,7 +804,7 @@ const ActionTypes = { AUTOLAYOUT_REORDER_WIDGETS: "AUTOLAYOUT_REORDER_WIDGETS", AUTOLAYOUT_ADD_NEW_WIDGETS: "AUTOLAYOUT_ADD_NEW_WIDGETS", RECALCULATE_COLUMNS: "RECALCULATE_COLUMNS", - UPDATE_LAYOUT_POSITIONING: "UPDATE_LAYOUT_POSITIONING", + UPDATE_LAYOUT_SYSTEM_TYPE: "UPDATE_LAYOUT_SYSTEM_TYPE", SET_LAYOUT_CONVERSION_STATE: "SET_LAYOUT_CONVERSION_STATE", START_CONVERSION_FLOW: "START_CONVERSION_FLOW", STOP_CONVERSION_FLOW: "STOP_CONVERSION_FLOW", @@ -1194,7 +1192,7 @@ export interface ApplicationPayload { isManualUpdate?: boolean; embedSetting?: AppEmbedSetting; applicationDetail?: { - appPositioning?: AppPositioningTypeConfig; + appPositioning?: LayoutSystemTypeConfig; navigationSetting?: NavigationSetting; }; collapseInvisibleWidgets?: boolean; diff --git a/app/client/src/ce/entities/DataTree/types.ts b/app/client/src/ce/entities/DataTree/types.ts index c7764795a0..f2daa0fed1 100644 --- a/app/client/src/ce/entities/DataTree/types.ts +++ b/app/client/src/ce/entities/DataTree/types.ts @@ -15,8 +15,8 @@ import type { MetaState } from "reducers/entityReducers/metaReducer"; import type { AppDataState } from "reducers/entityReducers/appReducer"; import type { JSCollectionDataState } from "reducers/entityReducers/jsActionsReducer"; import type { AppTheme } from "entities/AppTheming"; -import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer"; +import type { LayoutSystemTypes } from "layoutSystems/types"; export type ActionDispatcher = (...args: any[]) => ActionDescription; @@ -194,7 +194,7 @@ export type DataTreeSeed = { metaWidgets: MetaWidgetsReduxState; isMobile: boolean; moduleInputs: Record; - appPositioningType: AppPositioningTypes; + layoutSystemType: LayoutSystemTypes; loadingEntities: LoadingEntitiesState; }; diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx index 84c9a9f3e7..554ba8a228 100644 --- a/app/client/src/components/editorComponents/DropTargetComponent.tsx +++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx @@ -21,7 +21,6 @@ import DragLayerComponent from "./DragLayerComponent"; import { useDispatch } from "react-redux"; import { useShowPropertyPane } from "utils/hooks/dragResizeHooks"; import { - getCurrentAppPositioningType, getOccupiedSpacesSelectorForContainer, previewModeSelector, } from "selectors/editorSelectors"; @@ -38,7 +37,8 @@ import { isAutoHeightEnabledForWidgetWithLimits, } from "widgets/WidgetUtils"; import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; type DropTargetComponentProps = PropsWithChildren<{ snapColumnSpace: number; @@ -200,10 +200,8 @@ export function DropTargetComponent(props: DropTargetComponentProps) { const isAppSettingsPaneWithNavigationTabOpen = useSelector( getIsAppSettingsPaneWithNavigationTabOpen, ); - const appPositioningType: AppPositioningTypes = useSelector( - getCurrentAppPositioningType, - ); - const isAutoLayoutActive = appPositioningType === AppPositioningTypes.AUTO; + const layoutSystemType: LayoutSystemTypes = useSelector(getLayoutSystemType); + const isAutoLayoutActive = layoutSystemType === LayoutSystemTypes.AUTO; const { contextValue, dropTargetRef, rowRef } = useUpdateRows( props.bottomRow, props.widgetId, diff --git a/app/client/src/entities/DataTree/dataTreeFactory.ts b/app/client/src/entities/DataTree/dataTreeFactory.ts index 20e1e9d91f..7428610823 100644 --- a/app/client/src/entities/DataTree/dataTreeFactory.ts +++ b/app/client/src/entities/DataTree/dataTreeFactory.ts @@ -21,10 +21,10 @@ export class DataTreeFactory { static create({ actions, appData, - appPositioningType, editorConfigs, isMobile, jsActions, + layoutSystemType, loadingEntities, metaWidgets, moduleInputs, @@ -78,12 +78,11 @@ export class DataTreeFactory { widget, widgetsMeta[widget.metaWidgetId || widget.widgetId], loadingEntities, - appPositioningType, + layoutSystemType, isMobile, ); dataTree[widget.widgetName] = unEvalEntity; - configTree[widget.widgetName] = configEntity; }); diff --git a/app/client/src/entities/DataTree/dataTreeWidget.ts b/app/client/src/entities/DataTree/dataTreeWidget.ts index 0fb0dfcb64..bd474b15eb 100644 --- a/app/client/src/entities/DataTree/dataTreeWidget.ts +++ b/app/client/src/entities/DataTree/dataTreeWidget.ts @@ -19,8 +19,8 @@ import { setOverridingProperty } from "@appsmith/entities/DataTree/utils"; import { error } from "loglevel"; import WidgetFactory from "WidgetProvider/factory"; import { getComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; /** * @@ -350,7 +350,7 @@ export const generateDataTreeWidget = ( widget: FlattenedWidgetProps, widgetMetaProps: Record = {}, loadingEntities: LoadingEntitiesState, - appPositioningType: AppPositioningTypes = AppPositioningTypes.FIXED, + layoutSystemType: LayoutSystemTypes = LayoutSystemTypes.FIXED, isMobile = false, ) => { const { @@ -389,7 +389,7 @@ export const generateDataTreeWidget = ( const { componentHeight, componentWidth } = getComponentDimensions( dataTreeWidget, - appPositioningType, + layoutSystemType, isMobile, ); diff --git a/app/client/src/layoutSystems/autolayout/utils/AutoLayoutUtils.ts b/app/client/src/layoutSystems/autolayout/utils/AutoLayoutUtils.ts index 06b214e0ec..897a4de233 100644 --- a/app/client/src/layoutSystems/autolayout/utils/AutoLayoutUtils.ts +++ b/app/client/src/layoutSystems/autolayout/utils/AutoLayoutUtils.ts @@ -12,7 +12,7 @@ import type { CanvasWidgetsReduxState, FlattenedWidgetProps, } from "reducers/entityReducers/canvasWidgetsReducer"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { updatePositionsOfParentAndSiblings, updateWidgetPositions, @@ -67,8 +67,8 @@ export function updateFlexLayersOnDelete( ): CanvasWidgetsReduxState { const widgets = { ...allWidgets }; if ( - widgets[MAIN_CONTAINER_WIDGET_ID].appPositioningType === - AppPositioningTypes.FIXED || + widgets[MAIN_CONTAINER_WIDGET_ID].layoutSystemType === + LayoutSystemTypes.FIXED || widgets[MAIN_CONTAINER_WIDGET_ID].positioning === Positioning.Fixed ) return widgets; diff --git a/app/client/src/layoutSystems/autolayout/utils/positionUtils.test.ts b/app/client/src/layoutSystems/autolayout/utils/positionUtils.test.ts index 0b9a5add25..94f811a090 100644 --- a/app/client/src/layoutSystems/autolayout/utils/positionUtils.test.ts +++ b/app/client/src/layoutSystems/autolayout/utils/positionUtils.test.ts @@ -16,7 +16,7 @@ import { placeWrappedWidgets, updateWidgetPositions, } from "./positionUtils"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { LabelPosition } from "components/constants"; import * as utils from "./flexWidgetUtils"; import type { FlexLayer } from "./types"; @@ -1317,7 +1317,7 @@ describe("test PositionUtils methods", () => { responsiveBehavior: ResponsiveBehavior.Fill, parentId: "", positioning: Positioning.Vertical, - appPositioningType: AppPositioningTypes.AUTO, + layoutSystemType: LayoutSystemTypes.AUTO, useAutoLayout: true, flexLayers: [ { children: [{ id: "3", align: FlexLayerAlignment.Start }] }, diff --git a/app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts b/app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts index ae601761dc..a17ef17a34 100644 --- a/app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts +++ b/app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts @@ -1,6 +1,6 @@ import { useSelector } from "react-redux"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; -import { getCurrentAppPositioningType } from "selectors/editorSelectors"; +import { LayoutSystemTypes } from "layoutSystems/types"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; export enum LayoutSystemFeatures { ENABLE_MAIN_CONTAINER_RESIZER = "ENABLE_MAIN_CONTAINER_RESIZER", //enable main canvas resizer @@ -26,15 +26,15 @@ const AUTO_LAYOUT_FEATURES = { * The boolean will indicate if the feature is enabled for the current layout */ export const useLayoutSystemFeatures = () => { - const appPositioningType = useSelector(getCurrentAppPositioningType); + const layoutSystemType = useSelector(getLayoutSystemType); let currentFeatureSet = {} as Record; - switch (appPositioningType) { - case AppPositioningTypes.FIXED: + switch (layoutSystemType) { + case LayoutSystemTypes.FIXED: currentFeatureSet = FIXED_LAYOUT_FEATURES; break; - case AppPositioningTypes.AUTO: + case LayoutSystemTypes.AUTO: currentFeatureSet = AUTO_LAYOUT_FEATURES; break; } diff --git a/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts b/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts index 326ac9e5ea..d87670e82a 100644 --- a/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts +++ b/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts @@ -1,6 +1,6 @@ import { GridDefaults } from "constants/WidgetConstants"; +import { LayoutSystemTypes } from "layoutSystems/types"; import memo from "micro-memoize"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC"; /** @@ -109,14 +109,14 @@ export const getAnvilComponentDimensions = ({ export const getComponentDimensions = memo( ( props: BaseWidgetProps, - appPositioningType: AppPositioningTypes, + layoutSystemType: LayoutSystemTypes, isMobile: boolean, ): { componentHeight: number; componentWidth: number; } => { - switch (appPositioningType) { - case AppPositioningTypes.AUTO: + switch (layoutSystemType) { + case LayoutSystemTypes.AUTO: return getAutoLayoutComponentDimensions({ ...props, isMobile }); default: return getFixedLayoutComponentDimensions(props); diff --git a/app/client/src/layoutSystems/types/index.ts b/app/client/src/layoutSystems/types/index.ts new file mode 100644 index 0000000000..c077f834bc --- /dev/null +++ b/app/client/src/layoutSystems/types/index.ts @@ -0,0 +1,13 @@ +// Layout system types that Appsmith provides +export enum LayoutSystemTypes { + FIXED = "FIXED", + AUTO = "AUTO", + ANVIL = "ANVIL", +} + +// interface for appPositioning(aka layoutStystem) details. +// It is part of applicationDetails Record of an Application +// Refer to ApplicationPayload +export interface LayoutSystemTypeConfig { + type: LayoutSystemTypes; +} diff --git a/app/client/src/layoutSystems/withLayoutSystemHOC.test.tsx b/app/client/src/layoutSystems/withLayoutSystemHOC.test.tsx index 559c846ae5..8dea0d4cf1 100644 --- a/app/client/src/layoutSystems/withLayoutSystemHOC.test.tsx +++ b/app/client/src/layoutSystems/withLayoutSystemHOC.test.tsx @@ -1,7 +1,8 @@ import { RenderModes } from "constants/WidgetConstants"; import React from "react"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import * as editorSelectors from "selectors/editorSelectors"; +import * as layoutSystemSelectors from "selectors/layoutSystemSelectors"; import { WidgetTypeFactories } from "test/factories/Widgets/WidgetTypeFactories"; import { render } from "test/testUtils"; import CanvasWidget from "widgets/CanvasWidget"; @@ -19,8 +20,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.FIXED); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.FIXED); const component = render(); const positionedLayer = component.container.getElementsByClassName("positioned-widget")[0]; @@ -39,8 +40,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.FIXED); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.FIXED); const component = render(); const positionedLayer = component.container.getElementsByClassName("positioned-widget")[0]; @@ -60,8 +61,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.FIXED); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.FIXED); const component = render(); const positionedLayer = component.container.getElementsByClassName("positioned-widget")[0]; @@ -80,8 +81,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.FIXED); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.FIXED); const component = render(); const positionedLayer = component.container.getElementsByClassName("positioned-widget")[0]; @@ -101,8 +102,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.FIXED); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.FIXED); const component = render(); const positionedLayer = component.container.getElementsByClassName("positioned-widget")[0]; @@ -120,8 +121,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.FIXED); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.FIXED); const component = render(); const positionedLayer = component.container.getElementsByClassName("positioned-widget")[0]; @@ -140,8 +141,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.AUTO); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.AUTO); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "auto-layout-child-" + widgetProps.widgetId, @@ -161,8 +162,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.AUTO); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.AUTO); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "auto-layout-child-" + widgetProps.widgetId, @@ -183,8 +184,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.AUTO); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.AUTO); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "auto-layout-child-" + widgetProps.widgetId, @@ -204,8 +205,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.AUTO); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.AUTO); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "auto-layout-child-" + widgetProps.widgetId, @@ -226,8 +227,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.AUTO); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.AUTO); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "auto-layout-child-" + widgetProps.widgetId, @@ -246,8 +247,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.AUTO); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.AUTO); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "auto-layout-child-" + widgetProps.widgetId, @@ -267,8 +268,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.ANVIL); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.ANVIL); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "anvil-layout-child-" + widgetProps.widgetId, @@ -285,8 +286,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.ANVIL); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.ANVIL); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "anvil-layout-child-" + widgetProps.widgetId, @@ -304,8 +305,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.CANVAS); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.ANVIL); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.ANVIL); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "anvil-layout-child-" + widgetProps.widgetId, @@ -322,8 +323,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.ANVIL); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.ANVIL); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "anvil-layout-child-" + widgetProps.widgetId, @@ -341,8 +342,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.ANVIL); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.ANVIL); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "anvil-layout-child-" + widgetProps.widgetId, @@ -357,8 +358,8 @@ describe("Layout System HOC's Tests", () => { .spyOn(editorSelectors, "getRenderMode") .mockImplementation(() => RenderModes.PAGE); jest - .spyOn(editorSelectors, "getAppPositioningType") - .mockImplementation(() => AppPositioningTypes.ANVIL); + .spyOn(layoutSystemSelectors, "getLayoutSystemType") + .mockImplementation(() => LayoutSystemTypes.ANVIL); const component = render(); const flexPositionedLayer = component.container.getElementsByClassName( "anvil-layout-child-" + widgetProps.widgetId, diff --git a/app/client/src/layoutSystems/withLayoutSystemHOC.tsx b/app/client/src/layoutSystems/withLayoutSystemHOC.tsx index 1d15c4e727..23f486e6e1 100644 --- a/app/client/src/layoutSystems/withLayoutSystemHOC.tsx +++ b/app/client/src/layoutSystems/withLayoutSystemHOC.tsx @@ -1,14 +1,12 @@ import type { RenderModes } from "constants/WidgetConstants"; import React from "react"; import { useSelector } from "react-redux"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; -import { - getAppPositioningType, - getRenderMode, -} from "selectors/editorSelectors"; +import { getRenderMode } from "selectors/editorSelectors"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; import type { WidgetProps } from "widgets/BaseWidget"; import { getAutoLayoutSystem } from "./autolayout"; import { getFixedLayoutSystem } from "./fixedlayout"; +import { LayoutSystemTypes } from "./types"; import { getAnvilSystem } from "./anvil"; export type LayoutSystem = { @@ -18,12 +16,12 @@ export type LayoutSystem = { export const getLayoutSystem = ( renderMode: RenderModes, - appPositioningType: AppPositioningTypes, + layoutSystemType: LayoutSystemTypes, ): LayoutSystem => { - switch (appPositioningType) { - case AppPositioningTypes.ANVIL: + switch (layoutSystemType) { + case LayoutSystemTypes.ANVIL: return getAnvilSystem(renderMode); - case AppPositioningTypes.AUTO: + case LayoutSystemTypes.AUTO: return getAutoLayoutSystem(renderMode); default: return getFixedLayoutSystem(renderMode); @@ -38,13 +36,13 @@ const LayoutSystemWrapper = ({ Widget: (props: WidgetProps) => any; }) => { const renderMode = useSelector(getRenderMode); - const appPositioningType = useSelector(getAppPositioningType); - // based on appPositioningType and renderMode + const layoutSystemType = useSelector(getLayoutSystemType); + // based on layoutSystemType and renderMode // get the layout system wrapper(adds layout system specific functionality) and // properties enhancer(adds/modifies properties of a widget based on layout system) const { LayoutSystemWrapper, propertyEnhancer } = getLayoutSystem( renderMode, - appPositioningType, + layoutSystemType, ); const enhancedProperties = propertyEnhancer(widgetProps); return ( diff --git a/app/client/src/pages/Editor/PropertyPane/helpers.tsx b/app/client/src/pages/Editor/PropertyPane/helpers.tsx index 5649880a17..5d0011ad7d 100644 --- a/app/client/src/pages/Editor/PropertyPane/helpers.tsx +++ b/app/client/src/pages/Editor/PropertyPane/helpers.tsx @@ -5,7 +5,7 @@ import type { } from "constants/PropertyControlConstants"; import { debounce } from "lodash"; import { useCallback, useState } from "react"; -import { appPositioningBasedPropertyFilter } from "sagas/WidgetEnhancementHelpers"; +import { layoutSystemBasedPropertyFilter } from "sagas/WidgetEnhancementHelpers"; import type { WidgetProps } from "widgets/BaseWidget"; import { Callout } from "design-system"; import React from "react"; @@ -63,7 +63,7 @@ export function evaluateHiddenProperty( } } else if (controlConfig.controlType) { const isControlHidden = - appPositioningBasedPropertyFilter( + layoutSystemBasedPropertyFilter( widgetProps, controlConfig.propertyName, ) || diff --git a/app/client/src/reducers/entityReducers/pageListReducer.tsx b/app/client/src/reducers/entityReducers/pageListReducer.tsx index 73afc7b1f3..fc2bee888e 100644 --- a/app/client/src/reducers/entityReducers/pageListReducer.tsx +++ b/app/client/src/reducers/entityReducers/pageListReducer.tsx @@ -253,15 +253,6 @@ export interface AppLayoutConfig { type: SupportedLayouts; } -export enum AppPositioningTypes { - FIXED = "FIXED", - ANVIL = "ANVIL", - AUTO = "AUTO", -} -export interface AppPositioningTypeConfig { - type: AppPositioningTypes; -} - export interface PageListReduxState { pages: Page[]; applicationId: string; diff --git a/app/client/src/sagas/AutoLayoutUpdateSagas.tsx b/app/client/src/sagas/AutoLayoutUpdateSagas.tsx index 799911843e..1032caae51 100644 --- a/app/client/src/sagas/AutoLayoutUpdateSagas.tsx +++ b/app/client/src/sagas/AutoLayoutUpdateSagas.tsx @@ -27,14 +27,13 @@ import { getWidgets, getWidgetsMeta, } from "./selectors"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { GridDefaults, MAIN_CONTAINER_WIDGET_ID, } from "constants/WidgetConstants"; import { getCurrentApplicationId, - getCurrentAppPositioningType, getIsAutoLayout, getIsAutoLayoutMobileBreakPoint, getMainCanvasProps, @@ -64,6 +63,7 @@ import { getIsResizing } from "selectors/widgetSelectors"; import { generateAutoHeightLayoutTreeAction } from "actions/autoHeightActions"; import type { AppState } from "@appsmith/reducers"; import { nestDSL, flattenDSL } from "@shared/dsl"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; function* shouldRunSaga(saga: any, action: ReduxAction) { const isAutoLayout: boolean = yield select(getIsAutoLayout); @@ -145,21 +145,21 @@ export function* updateLayoutForMobileCheckpoint( * @param actionPayload * @returns */ -export function* updateLayoutPositioningSaga( - actionPayload: ReduxAction, +export function* updateLayoutSystemTypeSaga( + actionPayload: ReduxAction, ) { try { - const currPositioningType: AppPositioningTypes = yield select( - getCurrentAppPositioningType, + const currLayoutSystemType: LayoutSystemTypes = yield select( + getLayoutSystemType, ); - const payloadPositioningType = actionPayload.payload; + const payloadLayoutSystemType = actionPayload.payload; - if (currPositioningType === payloadPositioningType) return; + if (currLayoutSystemType === payloadLayoutSystemType) return; const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets); //Convert fixed layout to auto-layout - if (payloadPositioningType === AppPositioningTypes.AUTO) { + if (payloadLayoutSystemType === LayoutSystemTypes.AUTO) { const nestedDSL = nestDSL(allWidgets); const autoDSL = convertDSLtoAuto(nestedDSL); @@ -177,7 +177,7 @@ export function* updateLayoutPositioningSaga( ); } - yield call(updateApplicationLayoutType, payloadPositioningType); + yield call(updateApplicationLayoutType, payloadLayoutSystemType); } catch (error) { yield put({ type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, @@ -193,9 +193,7 @@ export function* updateLayoutPositioningSaga( export function* recalculateAutoLayoutColumnsAndSave( widgets?: CanvasWidgetsReduxState, ) { - const appPositioningType: AppPositioningTypes = yield select( - getCurrentAppPositioningType, - ); + const layoutSystemType: LayoutSystemTypes = yield select(getLayoutSystemType); const mainCanvasProps: MainCanvasReduxState = yield select( getMainCanvasProps, ); @@ -203,7 +201,7 @@ export function* recalculateAutoLayoutColumnsAndSave( yield put( updateLayoutForMobileBreakpointAction( MAIN_CONTAINER_WIDGET_ID, - appPositioningType === AppPositioningTypes.AUTO + layoutSystemType === LayoutSystemTypes.AUTO ? mainCanvasProps?.isMobile : false, mainCanvasProps.width, @@ -425,14 +423,14 @@ function* processAutoLayoutDimensionUpdatesSaga() { } export function* updateApplicationLayoutType( - positioningType: AppPositioningTypes, + layoutSystemType: LayoutSystemTypes, ) { const applicationId: string = yield select(getCurrentApplicationId); yield put( updateApplication(applicationId || "", { applicationDetail: { appPositioning: { - type: positioningType, + type: layoutSystemType, }, }, }), @@ -499,8 +497,8 @@ export default function* layoutUpdateSagas() { updateLayoutForMobileCheckpoint, ), takeLatest( - ReduxActionTypes.UPDATE_LAYOUT_POSITIONING, - updateLayoutPositioningSaga, + ReduxActionTypes.UPDATE_LAYOUT_SYSTEM_TYPE, + updateLayoutSystemTypeSaga, ), takeLatest( ReduxActionTypes.UPDATE_WIDGET_DIMENSIONS, diff --git a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts index 186929626e..aea0418006 100644 --- a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts +++ b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts @@ -19,7 +19,7 @@ import type { CanvasWidgetsReduxState, FlattenedWidgetProps, } from "reducers/entityReducers/canvasWidgetsReducer"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; import { all, call, put, select, takeLatest } from "redux-saga/effects"; import { getWidget, getWidgets, getWidgetsMeta } from "sagas/selectors"; @@ -30,7 +30,6 @@ import { } from "sagas/WidgetBlueprintSagas"; import { getCanvasWidth, - getCurrentAppPositioningType, getIsAutoLayoutMobileBreakPoint, getMainCanvasProps, getOccupiedSpacesSelectorForContainer, @@ -42,6 +41,7 @@ import type { WidgetProps } from "widgets/BaseWidget"; import { BlueprintOperationTypes } from "WidgetProvider/constants"; import { toast } from "design-system"; import type { WidgetDraggingUpdateParams } from "layoutSystems/common/CanvasArenas/ArenaTypes"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; export type WidgetMoveParams = { widgetId: string; @@ -335,11 +335,11 @@ function* moveWidgetsSaga( ); } - const appPositioningType: AppPositioningTypes = yield select( - getCurrentAppPositioningType, + const layoutSystemType: LayoutSystemTypes = yield select( + getLayoutSystemType, ); let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets }; - if (appPositioningType === AppPositioningTypes.AUTO) { + if (layoutSystemType === LayoutSystemTypes.AUTO) { /** * If previous parent is an auto-layout container, * then update the flex layers. diff --git a/app/client/src/sagas/SnapshotSagas.ts b/app/client/src/sagas/SnapshotSagas.ts index f004c554f7..2ca9bacfa2 100644 --- a/app/client/src/sagas/SnapshotSagas.ts +++ b/app/client/src/sagas/SnapshotSagas.ts @@ -10,15 +10,13 @@ import log from "loglevel"; import type { SnapShotDetails } from "reducers/uiReducers/layoutConversionReducer"; import { CONVERSION_STATES } from "reducers/uiReducers/layoutConversionReducer"; import { all, call, put, select, takeLatest } from "redux-saga/effects"; -import { - getAppPositioningType, - getCurrentApplicationId, -} from "selectors/editorSelectors"; +import { getCurrentApplicationId } from "selectors/editorSelectors"; import { getLogToSentryFromResponse } from "utils/helpers"; import { validateResponse } from "./ErrorSagas"; import { updateApplicationLayoutType } from "./AutoLayoutUpdateSagas"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import AnalyticsUtil from "utils/AnalyticsUtil"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; //Saga to create application snapshot export function* createSnapshotSaga() { @@ -86,8 +84,8 @@ function* restoreApplicationFromSnapshotSaga() { applicationId, }); - const currentAppPositioningType: AppPositioningTypes = yield select( - getAppPositioningType, + const currentLayoutSystemType: LayoutSystemTypes = yield select( + getLayoutSystemType, ); const isValidResponse: boolean = yield validateResponse( @@ -110,12 +108,12 @@ function* restoreApplicationFromSnapshotSaga() { }); } - //update layout positioning type from + //update layout system type from yield call( updateApplicationLayoutType, - currentAppPositioningType === AppPositioningTypes.FIXED - ? AppPositioningTypes.AUTO - : AppPositioningTypes.FIXED, + currentLayoutSystemType === LayoutSystemTypes.FIXED + ? LayoutSystemTypes.AUTO + : LayoutSystemTypes.FIXED, ); if (isValidResponse) { diff --git a/app/client/src/sagas/WidgetEnhancementHelpers.ts b/app/client/src/sagas/WidgetEnhancementHelpers.ts index b59891bf27..1845bf69ed 100644 --- a/app/client/src/sagas/WidgetEnhancementHelpers.ts +++ b/app/client/src/sagas/WidgetEnhancementHelpers.ts @@ -4,7 +4,7 @@ import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; import { get, set } from "lodash"; import { useSelector } from "react-redux"; import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { select } from "redux-saga/effects"; import WidgetFactory from "WidgetProvider/factory"; import { getWidgets } from "./selectors"; @@ -69,12 +69,12 @@ export function getParentWithEnhancementFn( const propertiesToExcludeForAutoLayout = ["dynamicHeight"]; -export function appPositioningBasedPropertyFilter( +export function layoutSystemBasedPropertyFilter( parentProps: any, propertyName: string, ) { return ( - parentProps.appPositioningType === AppPositioningTypes.AUTO && + parentProps.layoutSystemType === LayoutSystemTypes.AUTO && propertiesToExcludeForAutoLayout.includes(propertyName) ); } diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index 0bf213dc78..c94be7f11b 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -37,7 +37,6 @@ import { import { getCanvasWidth, getContainerWidgetSpacesSelector, - getCurrentAppPositioningType, getCurrentPageId, getIsAutoLayout, getIsAutoLayoutMobileBreakPoint, @@ -171,7 +170,7 @@ import { SelectionRequestType } from "sagas/WidgetSelectUtils"; import { BlueprintOperationTypes } from "WidgetProvider/constants"; import { toast } from "design-system"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { updatePositionsOfParentAndSiblings, updateWidgetPositions, @@ -184,6 +183,7 @@ import { import localStorage from "utils/localStorage"; import type { FlexLayer } from "layoutSystems/autolayout/utils/types"; import { EMPTY_BINDING } from "components/editorComponents/ActionCreator/constants"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; export function* resizeSaga(resizeAction: ReduxAction) { try { @@ -212,8 +212,8 @@ export function* resizeSaga(resizeAction: ReduxAction) { widgetId, } = resizeAction.payload; - const appPositioningType: AppPositioningTypes = yield select( - getCurrentAppPositioningType, + const layoutSystemType: LayoutSystemTypes = yield select( + getLayoutSystemType, ); const mainCanvasWidth: number = yield select(getCanvasWidth); widget = { @@ -228,7 +228,7 @@ export function* resizeSaga(resizeAction: ReduxAction) { mobileBottomRow, }; - if (appPositioningType === AppPositioningTypes.AUTO) { + if (layoutSystemType === LayoutSystemTypes.AUTO) { // Keeps track of user defined widget width in terms of percentage if (isMobile) { widget.mobileWidthInPercentage = @@ -258,7 +258,7 @@ export function* resizeSaga(resizeAction: ReduxAction) { // If it is a fixed canvas, update bottomRow directly. if ( updatedCanvasBottomRow && - appPositioningType !== AppPositioningTypes.AUTO + layoutSystemType === LayoutSystemTypes.FIXED ) { const canvasWidget = movedWidgets[parentId]; movedWidgets[parentId] = { @@ -268,7 +268,7 @@ export function* resizeSaga(resizeAction: ReduxAction) { } // If it is an auto-layout canvas, then use positionUtils to update canvas bottomRow. let updatedWidgetsAfterResizing = movedWidgets; - if (appPositioningType === AppPositioningTypes.AUTO) { + if (layoutSystemType === LayoutSystemTypes.AUTO) { const metaProps: Record = yield select(getWidgetsMeta); updatedWidgetsAfterResizing = updatePositionsOfParentAndSiblings( movedWidgets, @@ -286,7 +286,7 @@ export function* resizeSaga(resizeAction: ReduxAction) { // Widget resize based auto-height is only required for fixed-layout // Auto-layout has UPDATE_WIDGET_DIMENSIONS to handle auto height - if (appPositioningType !== AppPositioningTypes.AUTO) { + if (layoutSystemType === LayoutSystemTypes.FIXED) { yield put(generateAutoHeightLayoutTreeAction(true, true)); } } catch (error) { diff --git a/app/client/src/sagas/WidgetOperationUtils.ts b/app/client/src/sagas/WidgetOperationUtils.ts index 279c0969df..2618465f7a 100644 --- a/app/client/src/sagas/WidgetOperationUtils.ts +++ b/app/client/src/sagas/WidgetOperationUtils.ts @@ -60,8 +60,8 @@ import type { WidgetEntity } from "@appsmith/entities/DataTree/types"; import { isWidget } from "@appsmith/workers/Evaluation/evaluationUtils"; import { CANVAS_DEFAULT_MIN_HEIGHT_PX } from "constants/AppConstants"; import type { MetaState } from "reducers/entityReducers/metaReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { Positioning } from "layoutSystems/common/utils/constants"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; export interface CopiedWidgetGroup { widgetId: string; @@ -747,7 +747,7 @@ export function getMousePositions( export function getSnappedGrid(LayoutWidget: WidgetProps, canvasWidth: number) { // For all widgets inside a container, we remove both container padding as well as widget padding from component width let padding = - ((LayoutWidget?.appPositioningType === AppPositioningTypes.AUTO + ((LayoutWidget?.layoutSystemType === LayoutSystemTypes.AUTO ? AUTO_LAYOUT_CONTAINER_PADDING : CONTAINER_GRID_PADDING) + WIDGET_PADDING) * diff --git a/app/client/src/sagas/layoutConversionSagas.ts b/app/client/src/sagas/layoutConversionSagas.ts index 731e1ba39c..a987892098 100644 --- a/app/client/src/sagas/layoutConversionSagas.ts +++ b/app/client/src/sagas/layoutConversionSagas.ts @@ -3,7 +3,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import type { Page } from "@appsmith/constants/ReduxActionConstants"; import type { ReduxAction } from "@appsmith/constants/ReduxActionConstants"; import type { AppState } from "@appsmith/reducers"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import type { SupportedLayouts } from "reducers/entityReducers/pageListReducer"; import { CONVERSION_STATES } from "reducers/uiReducers/layoutConversionReducer"; import type { PageWidgetsReduxState } from "reducers/uiReducers/pageWidgetsReducer"; @@ -84,7 +84,7 @@ function* convertFromAutoToFixedSaga(action: ReduxAction) { yield call(saveAllPagesSaga, pageLayouts); //Set type of fixed layout yield call(setLayoutTypePostConversion, action.payload); - yield call(updateApplicationLayoutType, AppPositioningTypes.FIXED); + yield call(updateApplicationLayoutType, LayoutSystemTypes.FIXED); //update conversion form state to success yield put( setLayoutConversionStateAction(CONVERSION_STATES.COMPLETED_SUCCESS), @@ -165,7 +165,7 @@ function* convertFromFixedToAutoSaga() { } yield call(saveAllPagesSaga, pageLayouts); - yield call(updateApplicationLayoutType, AppPositioningTypes.AUTO); + yield call(updateApplicationLayoutType, LayoutSystemTypes.AUTO); //update conversion form state to success yield put( setLayoutConversionStateAction(CONVERSION_STATES.COMPLETED_SUCCESS), diff --git a/app/client/src/selectors/canvasSelectors.ts b/app/client/src/selectors/canvasSelectors.ts index 90e131e8ea..31d44b055f 100644 --- a/app/client/src/selectors/canvasSelectors.ts +++ b/app/client/src/selectors/canvasSelectors.ts @@ -1,15 +1,15 @@ -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { createSelector } from "reselect"; -import { getCurrentAppPositioningType } from "./editorSelectors"; import type { AppState } from "@appsmith/reducers"; +import { getLayoutSystemType } from "./layoutSystemSelectors"; export const getIsDraggingForSelection = (state: AppState) => { return state.ui.canvasSelection.isDraggingForSelection; }; export const getIsAutoLayout = createSelector( - getCurrentAppPositioningType, - (appPositionType: AppPositioningTypes): boolean => { - return appPositionType === AppPositioningTypes.AUTO; + getLayoutSystemType, + (layoutSystemType: LayoutSystemTypes): boolean => { + return layoutSystemType === LayoutSystemTypes.AUTO; }, ); diff --git a/app/client/src/selectors/dataTreeSelectors.ts b/app/client/src/selectors/dataTreeSelectors.ts index 8fd2a7d666..48a4cecc40 100644 --- a/app/client/src/selectors/dataTreeSelectors.ts +++ b/app/client/src/selectors/dataTreeSelectors.ts @@ -24,7 +24,7 @@ import type { EvaluationError } from "utils/DynamicBindingUtils"; import { getEvalErrorPath } from "utils/DynamicBindingUtils"; import ConfigTreeActions from "utils/configTree"; import { DATATREE_INTERNAL_KEYWORDS } from "constants/WidgetValidation"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; export const getLoadingEntities = (state: AppState) => state.evaluations.loadingEntities; @@ -37,10 +37,10 @@ export const getLoadingEntities = (state: AppState) => const getLayoutSystemPayload = (state: AppState) => ({ // appPositioning?.type instead of appPositioning.type is for legacy applications that may not have the appPositioning object. // All new applications will have appPositioning.type - appPositioningType: - AppPositioningTypes[ + layoutSystemType: + LayoutSystemTypes[ state.ui.applications.currentApplication?.applicationDetail - ?.appPositioning?.type || AppPositioningTypes.FIXED + ?.appPositioning?.type || LayoutSystemTypes.FIXED ], isMobile: state.ui.mainCanvas.isMobile, }); diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index e257392dd9..074ad833f7 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -31,7 +31,6 @@ import type { WidgetEntityConfig, } from "@appsmith/entities/DataTree/types"; import { find, sortBy } from "lodash"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import { getDataTree, getLoadingEntities, @@ -62,6 +61,8 @@ import { getIsAnonymousDataPopupVisible } from "./onboardingSelectors"; import { WDS_V2_WIDGET_MAP } from "components/wds/constants"; import { selectFeatureFlagCheck } from "@appsmith/selectors/featureFlagsSelectors"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; +import { LayoutSystemTypes } from "layoutSystems/types"; +import { getLayoutSystemType } from "./layoutSystemSelectors"; const getIsDraggingOrResizing = (state: AppState) => state.ui.widgetDragResize.isResizing || state.ui.widgetDragResize.isDragging; @@ -217,7 +218,9 @@ export const selectURLSlugs = createSelector( getCurrentPageId, (application, pages, pageId) => { const applicationSlug = application?.slug || PLACEHOLDER_APP_SLUG; - const currentPage = pages.find((page) => page.pageId === pageId); + const currentPage: Page | undefined = pages.find( + (page) => page.pageId === pageId, + ); const pageSlug = currentPage?.slug || PLACEHOLDER_PAGE_SLUG; const customSlug = currentPage?.customSlug; return { applicationSlug, pageSlug, customSlug }; @@ -257,36 +260,16 @@ const defaultLayout: AppLayoutConfig = { const getAppLayout = (state: AppState) => state.ui.applications.currentApplication?.appLayout || defaultLayout; -export const getAppPositioningType = (state: AppState) => { - if ( - state.ui.applications?.currentApplication?.applicationDetail?.appPositioning - ?.type - ) { - return AppPositioningTypes[ - state.ui.applications.currentApplication?.applicationDetail - ?.appPositioning?.type - ]; - } - return AppPositioningTypes.FIXED; -}; - -export const getCurrentAppPositioningType = createSelector( - getAppPositioningType, - (appPositionType: AppPositioningTypes): AppPositioningTypes => { - return appPositionType || AppPositioningTypes.FIXED; - }, -); - export const getIsAutoLayout = createSelector( - getCurrentAppPositioningType, - (positioningType) => positioningType === AppPositioningTypes.AUTO, + getLayoutSystemType, + (layoutSystemType) => layoutSystemType === LayoutSystemTypes.AUTO, ); export const getCurrentApplicationLayout = createSelector( getAppLayout, - getCurrentAppPositioningType, - (appLayout: AppLayoutConfig, appPositionType) => { - return appPositionType === AppPositioningTypes.FIXED + getLayoutSystemType, + (appLayout: AppLayoutConfig, layoutSystemType) => { + return layoutSystemType === LayoutSystemTypes.FIXED ? appLayout : defaultLayout; }, diff --git a/app/client/src/selectors/flattenedChildCanvasSelector.ts b/app/client/src/selectors/flattenedChildCanvasSelector.ts index be1a6a09b1..7e2940802e 100644 --- a/app/client/src/selectors/flattenedChildCanvasSelector.ts +++ b/app/client/src/selectors/flattenedChildCanvasSelector.ts @@ -5,22 +5,23 @@ import type { CanvasWidgetsReduxState, FlattenedWidgetProps, } from "reducers/entityReducers/canvasWidgetsReducer"; -import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import { createSelector } from "reselect"; -import { getAppPositioningType, getRenderMode } from "./editorSelectors"; +import { getRenderMode } from "./editorSelectors"; import { getIsMobileBreakPoint } from "sagas/selectors"; import type { AppState } from "@appsmith/reducers"; +import type { LayoutSystemTypes } from "layoutSystems/types"; +import { getLayoutSystemType } from "./layoutSystemSelectors"; function buildFlattenedChildCanvasWidgets( canvasWidgets: CanvasWidgetsReduxState, renderMode: RenderModes, - appPositioningType: AppPositioningTypes, + layoutSystemType: LayoutSystemTypes, isMobile: boolean, parentWidgetId: string, flattenedChildCanvasWidgets: Record = {}, ) { const parentWidget = canvasWidgets[parentWidgetId]; - const { propertyEnhancer } = getLayoutSystem(renderMode, appPositioningType); + const { propertyEnhancer } = getLayoutSystem(renderMode, layoutSystemType); parentWidget?.children?.forEach((childId) => { const childWidget = canvasWidgets[childId]; let parentRowSpace = @@ -37,7 +38,7 @@ function buildFlattenedChildCanvasWidgets( buildFlattenedChildCanvasWidgets( canvasWidgets, renderMode, - appPositioningType, + layoutSystemType, isMobile, childId, flattenedChildCanvasWidgets, @@ -51,7 +52,7 @@ export const getFlattenedChildCanvasWidgets = createSelector( [ getCanvasWidgets, getRenderMode, - getAppPositioningType, + getLayoutSystemType, getIsMobileBreakPoint, (_state: AppState, parentWidgetId: string) => parentWidgetId, ], diff --git a/app/client/src/selectors/layoutSystemSelectors.ts b/app/client/src/selectors/layoutSystemSelectors.ts new file mode 100644 index 0000000000..963a93f612 --- /dev/null +++ b/app/client/src/selectors/layoutSystemSelectors.ts @@ -0,0 +1,18 @@ +import type { AppState } from "@appsmith/reducers"; +import { LayoutSystemTypes } from "layoutSystems/types"; + +/** + * selector to fetch the application's layout type + */ +export const getLayoutSystemType = (state: AppState) => { + if ( + state.ui.applications?.currentApplication?.applicationDetail?.appPositioning + ?.type + ) { + return LayoutSystemTypes[ + state.ui.applications.currentApplication?.applicationDetail + ?.appPositioning?.type + ]; + } + return LayoutSystemTypes.FIXED; +}; diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx index 5666ae9ac0..78f6469bce 100644 --- a/app/client/src/selectors/propertyPaneSelectors.tsx +++ b/app/client/src/selectors/propertyPaneSelectors.tsx @@ -23,7 +23,7 @@ import { getGoogleMapsApiKey } from "@appsmith/selectors/tenantSelectors"; import type { WidgetProps } from "widgets/BaseWidget"; import { getCanvasWidgets } from "@appsmith/selectors/entitiesSelector"; import { getLastSelectedWidget, getSelectedWidgets } from "./ui"; -import { getCurrentAppPositioningType } from "./editorSelectors"; +import { getLayoutSystemType } from "./layoutSystemSelectors"; export type WidgetProperties = WidgetProps & { [EVALUATION_PATH]?: DataTreeEntity; @@ -71,7 +71,7 @@ const getCurrentWidgetName = createSelector( export const getWidgetPropsForPropertyPane = createSelector( getCurrentWidgetProperties, - getCurrentAppPositioningType, + getLayoutSystemType, (state) => { const currentWidget = getCurrentWidgetProperties(state); if (!currentWidget) return; @@ -83,14 +83,14 @@ export const getWidgetPropsForPropertyPane = createSelector( }, ( widget: WidgetProps | undefined, - appPositioningType, + layoutSystemType, evaluatedValue: any, ): WidgetProps | undefined => { if (!widget) return undefined; const widgetProperties = { ...widget, - appPositioningType, + layoutSystemType, }; if (evaluatedValue) { widgetProperties[EVALUATION_PATH] = evaluatedValue; diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx index ed1a1383cb..0dd29351a3 100644 --- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx +++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx @@ -11,10 +11,9 @@ import { MAIN_CONTAINER_WIDGET_ID, } from "constants/WidgetConstants"; import { APP_MODE } from "entities/App"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { getCurrentApplicationLayout, - getCurrentAppPositioningType, getCurrentPageId, getMainCanvasProps, previewModeSelector, @@ -42,6 +41,7 @@ import type { AppState } from "@appsmith/reducers"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { useLocation } from "react-router"; import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; const GUTTER_WIDTH = 72; export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40; @@ -59,7 +59,7 @@ export const useDynamicAppLayout = () => { const isCanvasInitialized = useSelector(getIsCanvasInitialized); const appLayout = useSelector(getCurrentApplicationLayout); const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen); - const appPositioningType = useSelector(getCurrentAppPositioningType); + const layoutSystemType = useSelector(getLayoutSystemType); const isAppSidebarPinned = useSelector(getAppSidebarPinned); const sidebarWidth = useSelector(getSidebarWidth); const isAppSettingsPaneWithNavigationTabOpen = useSelector( @@ -124,7 +124,7 @@ export const useDynamicAppLayout = () => { let calculatedWidth = screenWidth - scrollbarWidth(); const gutterWidth = - appPositioningType === AppPositioningTypes.AUTO ? 0 : GUTTER_WIDTH; + layoutSystemType === LayoutSystemTypes.AUTO ? 0 : GUTTER_WIDTH; // if preview mode is not on and the app setting pane is not opened, we need to subtract the width of the property pane if ( @@ -305,7 +305,7 @@ export const useDynamicAppLayout = () => { dispatch( updateLayoutForMobileBreakpointAction( MAIN_CONTAINER_WIDGET_ID, - appPositioningType === AppPositioningTypes.AUTO + layoutSystemType === LayoutSystemTypes.AUTO ? mainCanvasProps?.isMobile : false, calculateCanvasWidth(), @@ -321,7 +321,7 @@ export const useDynamicAppLayout = () => { dispatch( updateLayoutForMobileBreakpointAction( MAIN_CONTAINER_WIDGET_ID, - appPositioningType === AppPositioningTypes.AUTO + layoutSystemType === LayoutSystemTypes.AUTO ? mainCanvasProps?.isMobile : false, canvasWidth, diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index b17d8c4891..04e96505fd 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -47,11 +47,11 @@ import type { LayoutDirection, ResponsiveBehavior, } from "layoutSystems/common/utils/constants"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import type { FeatureFlag } from "@appsmith/entities/FeatureFlag"; import store from "store"; import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors"; import type { WidgetFeatures } from "utils/WidgetFeatures"; +import { LayoutSystemTypes } from "layoutSystems/types"; /*** * BaseWidget @@ -324,7 +324,7 @@ abstract class BaseWidget< } get isAutoLayoutMode() { - return this.props.appPositioningType === AppPositioningTypes.AUTO; + return this.props.layoutSystemType === LayoutSystemTypes.AUTO; } updateOneClickBindingOptionsVisibility(visibility: boolean) { @@ -455,7 +455,7 @@ export interface WidgetPositionProps extends WidgetRowCols { minWidth?: number; // Required to avoid squishing of widgets on mobile viewport. isMobile?: boolean; flexVerticalAlignment?: FlexVerticalAlignment; - appPositioningType?: AppPositioningTypes; + layoutSystemType?: LayoutSystemTypes; widthInPercentage?: number; // Stores the widget's width set by the user mobileWidthInPercentage?: number; width?: number; diff --git a/app/client/src/widgets/CanvasWidget.tsx b/app/client/src/widgets/CanvasWidget.tsx index dcc6ed9598..4d927fed41 100644 --- a/app/client/src/widgets/CanvasWidget.tsx +++ b/app/client/src/widgets/CanvasWidget.tsx @@ -23,7 +23,7 @@ import type { WidgetDefaultProps, } from "../WidgetProvider/constants"; import ContainerComponent from "./ContainerWidget/component"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import FlexBoxComponent from "../layoutSystems/autolayout/common/flexCanvas/FlexBoxComponent"; import { AutoCanvasDraggingArena } from "layoutSystems/autolayout/editor/AutoLayoutCanvasArenas/AutoCanvasDraggingArena"; import { FixedCanvasDraggingArena } from "layoutSystems/fixedlayout/editor/FixedLayoutCanvasArenas/FixedCanvasDraggingArena"; @@ -129,7 +129,7 @@ class CanvasWidget extends ContainerWidget { this.props.bottomRow, this.props.mobileBottomRow, this.props.isMobile, - this.props.appPositioningType === AppPositioningTypes.AUTO, + this.props.layoutSystemType === LayoutSystemTypes.AUTO, ); return ( @@ -222,7 +222,7 @@ class CanvasWidget extends ContainerWidget { this.props.bottomRow, this.props.mobileBottomRow, this.props.isMobile, - this.props.appPositioningType === AppPositioningTypes.AUTO, + this.props.layoutSystemType === LayoutSystemTypes.AUTO, ); height = snapRows * GridDefaults.DEFAULT_GRID_ROW_HEIGHT; const style: CSSProperties = { diff --git a/app/client/src/widgets/ContainerWidget/component/index.tsx b/app/client/src/widgets/ContainerWidget/component/index.tsx index 71083cccd5..6f47e381b9 100644 --- a/app/client/src/widgets/ContainerWidget/component/index.tsx +++ b/app/client/src/widgets/ContainerWidget/component/index.tsx @@ -13,10 +13,10 @@ import type { WidgetStyleContainerProps } from "components/designSystems/appsmit import WidgetStyleContainer from "components/designSystems/appsmith/WidgetStyleContainer"; import { scrollCSS } from "widgets/WidgetUtils"; import { useSelector } from "react-redux"; -import { getCurrentAppPositioningType } from "selectors/editorSelectors"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; import type { WidgetType } from "WidgetProvider/factory"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; const StyledContainerComponent = styled.div< Omit @@ -58,7 +58,7 @@ function ContainerComponentWrapper( props: PropsWithChildren, ) { const containerRef: RefObject = useRef(null); - const appPositioningType = useSelector(getCurrentAppPositioningType); + const layoutSystemType = useSelector(getLayoutSystemType); useEffect(() => { if (!props.shouldScrollContents) { @@ -126,7 +126,7 @@ function ContainerComponentWrapper( className={`${ props.shouldScrollContents ? getCanvasClassName() : "" } ${generateClassName(props.widgetId)} container-with-scrollbar ${ - appPositioningType === AppPositioningTypes.AUTO && + layoutSystemType === LayoutSystemTypes.AUTO && props.widgetId === MAIN_CONTAINER_WIDGET_ID ? "auto-layout" : "" @@ -158,7 +158,7 @@ function ContainerComponent(props: ContainerComponentProps) { resizeDisabled={props.resizeDisabled} shouldScrollContents={ props.shouldScrollContents && - props.appPositioningType !== AppPositioningTypes.AUTO + props.layoutSystemType === LayoutSystemTypes.FIXED } type={props.type} widgetId={props.widgetId} @@ -189,7 +189,7 @@ function ContainerComponent(props: ContainerComponentProps) { shouldScrollContents={ props.shouldScrollContents && // Disable scrollbar on auto-layout canvas as it meddles with canvas drag and highlight position. - (props.appPositioningType !== AppPositioningTypes.AUTO || + (props.layoutSystemType === LayoutSystemTypes.FIXED || // We need to allow scrollbars for list items as they don't have auto-height props.isListItemContainer) } @@ -222,7 +222,7 @@ export interface ContainerComponentProps extends WidgetStyleContainerProps { justifyContent?: string; alignItems?: string; dropDisabled?: boolean; - appPositioningType?: AppPositioningTypes; + layoutSystemType?: LayoutSystemTypes; isListItemContainer?: boolean; } diff --git a/app/client/src/widgets/ListWidgetV2/widget/index.tsx b/app/client/src/widgets/ListWidgetV2/widget/index.tsx index 52a508ce1f..f4c37027c2 100644 --- a/app/client/src/widgets/ListWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/ListWidgetV2/widget/index.tsx @@ -47,8 +47,8 @@ import type { import { getMetaFlexLayers, isTargetElementClickable } from "./helper"; import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; import type { ExtraDef } from "utils/autocomplete/dataTreeTypeDefCreator"; +import { LayoutSystemTypes } from "layoutSystems/types"; import { generateTypeDef } from "utils/autocomplete/dataTreeTypeDefCreator"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import defaultProps from "./defaultProps"; import IconSVG from "../icon.svg"; @@ -1187,7 +1187,7 @@ class ListWidget extends BaseWidget< child.rightColumn = componentWidth; child.canExtend = true; child.positioning = this.props.positioning; - if (this.props.appPositioningType === AppPositioningTypes.AUTO) { + if (this.props.layoutSystemType === LayoutSystemTypes.AUTO) { child.isListWidgetCanvas = true; } child.children = child.children?.map((container, viewIndex) => { @@ -1196,7 +1196,7 @@ class ListWidget extends BaseWidget< this.props.renderMode === RenderModes.CANVAS && rowIndex === 0; const key = this.metaWidgetGenerator.getPrimaryKey(rowIndex); if ( - this.props.appPositioningType === AppPositioningTypes.AUTO && + this.props.layoutSystemType === LayoutSystemTypes.AUTO && container.children?.[0] ) { container.children[0].isListWidgetCanvas = true; diff --git a/app/client/src/widgets/TabsWidget/widget/index.tsx b/app/client/src/widgets/TabsWidget/widget/index.tsx index 24c374784b..c7db5ce8c9 100644 --- a/app/client/src/widgets/TabsWidget/widget/index.tsx +++ b/app/client/src/widgets/TabsWidget/widget/index.tsx @@ -9,7 +9,7 @@ import type { ValidationResponse } from "constants/WidgetValidation"; import { ValidationTypes } from "constants/WidgetValidation"; import { find } from "lodash"; import React from "react"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; +import { LayoutSystemTypes } from "layoutSystems/types"; import type { WidgetProperties } from "selectors/propertyPaneSelectors"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import WidgetFactory from "WidgetProvider/factory"; @@ -545,7 +545,7 @@ class TabsWidget extends BaseWidget< selectedTabWidgetId={this.getSelectedTabWidgetId()} shouldScrollContents={ this.props.shouldScrollContents && - this.props.appPositioningType !== AppPositioningTypes.AUTO + this.props.layoutSystemType === LayoutSystemTypes.FIXED } > {this.renderComponent()} @@ -577,7 +577,7 @@ class TabsWidget extends BaseWidget< (item) => item.widgetId === selectedTabWidgetId, )[0]; const positioning: Positioning = - this.props.appPositioningType == AppPositioningTypes.AUTO + this.props.layoutSystemType == LayoutSystemTypes.AUTO ? Positioning.Vertical : Positioning.Fixed; childWidgetData.positioning = positioning; diff --git a/app/client/src/widgets/withWidgetProps.tsx b/app/client/src/widgets/withWidgetProps.tsx index 6b29143d4e..df0d70bc6a 100644 --- a/app/client/src/widgets/withWidgetProps.tsx +++ b/app/client/src/widgets/withWidgetProps.tsx @@ -19,7 +19,6 @@ import { import { computeMainContainerWidget, getChildWidgets, - getCurrentAppPositioningType, getMainCanvasProps, getRenderMode, getMetaWidgetChildrenStructure, @@ -35,7 +34,6 @@ import { import type { WidgetProps } from "./BaseWidget"; import type BaseWidget from "./BaseWidget"; import type { WidgetEntityConfig } from "@appsmith/entities/DataTree/types"; -import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer"; import { Positioning } from "layoutSystems/common/utils/constants"; import { isAutoHeightEnabledForWidget } from "./WidgetUtils"; import { CANVAS_DEFAULT_MIN_HEIGHT_PX } from "constants/AppConstants"; @@ -45,6 +43,8 @@ import { getSelectedWidgetAncestry } from "../selectors/widgetSelectors"; import { getWidgetMinMaxDimensionsInPixel } from "layoutSystems/autolayout/utils/flexWidgetUtils"; import { defaultAutoLayoutWidgets } from "layoutSystems/autolayout/utils/constants"; import { getFlattenedChildCanvasWidgets } from "selectors/flattenedChildCanvasSelector"; +import { LayoutSystemTypes } from "layoutSystems/types"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; const WIDGETS_WITH_CHILD_WIDGETS = ["LIST_WIDGET", "FORM_WIDGET"]; const WIDGETS_REQUIRING_SELECTED_ANCESTRY = ["MODAL_WIDGET", "TABS_WIDGET"]; @@ -91,8 +91,8 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) { equal, ); const isMobile = useSelector(getIsAutoLayoutMobileBreakPoint); - const appPositioningType = useSelector(getCurrentAppPositioningType); - const isAutoLayout = appPositioningType === AppPositioningTypes.AUTO; + const layoutSystemType = useSelector(getLayoutSystemType); + const isAutoLayout = layoutSystemType === LayoutSystemTypes.AUTO; const configTree = ConfigTreeActions.getConfigTree(); const evaluatedWidgetConfig = configTree[ @@ -164,7 +164,6 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) { widgetProps = { ...canvasWidgetProps }; widgetProps.isMobile = !!isMobile; - widgetProps.appPositioningType = appPositioningType; widgetProps.selectedWidgetAncestry = selectedWidgetAncestry || []; /** @@ -215,7 +214,7 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) { widgetProps.flattenedChildCanvasWidgets = flattenedChildCanvasWidgets; } //merging with original props - widgetProps = { ...props, ...widgetProps, renderMode }; + widgetProps = { ...props, ...widgetProps, layoutSystemType, renderMode }; // adding google maps api key to widget props (although meant for map widget only) widgetProps.googleMapsApiKey = googleMapsApiKey; diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Application.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Application.java index d08c45d26c..12ffb3c160 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Application.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Application.java @@ -405,7 +405,8 @@ public class Application extends BaseDomain { public enum Type { FIXED, - AUTO + AUTO, + ANVIL } } }