Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: added anvil type for app layout (#27633)

Browse Source 
## Description
This PR adds a new type ANVIL in the acceptable app layout types.
In this PR, 
BE changes: 
- Anvil type is added to appPositioiningType enum.

FE changes:
- rename appPositioningType to layoutSystemType internally in all places
except the reducer and application payload.
- move certain layout system specific files into layout system folder

#### PR fixes following issue(s)
Fixes #26973 

#### Type of change
- New feature (non-breaking change which adds functionality)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
This commit is contained in:
Nilansh Bansal 2023-10-04 14:24:16 +05:30 committed by GitHub
parent eb567c0af5
commit 9be87c2cc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 226 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/src/actions/autoLayoutActions.ts
View File

@ -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,
};
};

8
app/client/src/ce/api/ApplicationApi.tsx
View File

@ -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;
};

10
app/client/src/ce/constants/ReduxActionConstants.tsx
View File

@ -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;

4
app/client/src/ce/entities/DataTree/types.ts
View File

@ -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<string, ModuleInput>;
appPositioningType: AppPositioningTypes;
layoutSystemType: LayoutSystemTypes;
loadingEntities: LoadingEntitiesState;
};

10
app/client/src/components/editorComponents/DropTargetComponent.tsx
View File

@ -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,

5
app/client/src/entities/DataTree/dataTreeFactory.ts
View File

@ -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;
});

6
app/client/src/entities/DataTree/dataTreeWidget.ts
View File

@ -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<string, unknown> = {},
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,
);

6
app/client/src/layoutSystems/autolayout/utils/AutoLayoutUtils.ts
View File

@ -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;

4
app/client/src/layoutSystems/autolayout/utils/positionUtils.test.ts
View File

@ -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 }] },

12
app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts
View File

@ -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<LayoutSystemFeatures, boolean>;
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;
}

8
app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts
View File

@ -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);

13
app/client/src/layoutSystems/types/index.ts Normal file
View File

@ -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;
}

75
app/client/src/layoutSystems/withLayoutSystemHOC.test.tsx
View File

@ -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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
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(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,

22
app/client/src/layoutSystems/withLayoutSystemHOC.tsx
View File

@ -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 (

4
app/client/src/pages/Editor/PropertyPane/helpers.tsx
View File

@ -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,
) ||

9
app/client/src/reducers/entityReducers/pageListReducer.tsx
View File

@ -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;

34
app/client/src/sagas/AutoLayoutUpdateSagas.tsx
View File

@ -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<unknown>) {
const isAutoLayout: boolean = yield select(getIsAutoLayout);
@ -145,21 +145,21 @@ export function* updateLayoutForMobileCheckpoint(
* @param actionPayload
* @returns
*/
export function* updateLayoutPositioningSaga(
actionPayload: ReduxAction<AppPositioningTypes>,
export function* updateLayoutSystemTypeSaga(
actionPayload: ReduxAction<LayoutSystemTypes>,
) {
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,

10
app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
View File

@ -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.

20
app/client/src/sagas/SnapshotSagas.ts
View File

@ -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) {

6
app/client/src/sagas/WidgetEnhancementHelpers.ts
View File

@ -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)
);
}

16
app/client/src/sagas/WidgetOperationSagas.tsx
View File

@ -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<WidgetResize>) {
try {
@ -212,8 +212,8 @@ export function* resizeSaga(resizeAction: ReduxAction<WidgetResize>) {
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<WidgetResize>) {
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<WidgetResize>) {
// 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<WidgetResize>) {
}
// 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<string, any> = yield select(getWidgetsMeta);
updatedWidgetsAfterResizing = updatePositionsOfParentAndSiblings(
movedWidgets,
@ -286,7 +286,7 @@ export function* resizeSaga(resizeAction: ReduxAction<WidgetResize>) {
// 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) {

4
app/client/src/sagas/WidgetOperationUtils.ts
View File

@ -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) *

6
app/client/src/sagas/layoutConversionSagas.ts
View File

@ -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<SupportedLayouts>) {
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),

10
app/client/src/selectors/canvasSelectors.ts
View File

@ -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;
},
);

8
app/client/src/selectors/dataTreeSelectors.ts
View File

@ -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,
});

37
app/client/src/selectors/editorSelectors.tsx
View File

@ -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;
},

13
app/client/src/selectors/flattenedChildCanvasSelector.ts
View File

@ -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<string, FlattenedWidgetProps> = {},
) {
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,
],

18
app/client/src/selectors/layoutSystemSelectors.ts Normal file
View File

@ -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;
};

8
app/client/src/selectors/propertyPaneSelectors.tsx
View File

@ -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;

12
app/client/src/utils/hooks/useDynamicAppLayout.tsx
View File

@ -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,

6
app/client/src/widgets/BaseWidget.tsx
View File

@ -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;

6
app/client/src/widgets/CanvasWidget.tsx
View File

@ -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 (
<ContainerComponent {...props}>
@ -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 = {

14
app/client/src/widgets/ContainerWidget/component/index.tsx
View File

@ -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<ContainerWrapperProps, "widgetId">
@ -58,7 +58,7 @@ function ContainerComponentWrapper(
props: PropsWithChildren<ContainerWrapperProps>,
) {
const containerRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(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;
}

6
app/client/src/widgets/ListWidgetV2/widget/index.tsx
View File

@ -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;

6
app/client/src/widgets/TabsWidget/widget/index.tsx
View File

@ -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;

11
app/client/src/widgets/withWidgetProps.tsx
View File

@ -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;

3
app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Application.java
View File

@ -405,7 +405,8 @@ public class Application extends BaseDomain {
public enum Type {
FIXED,
AUTO
AUTO,
ANVIL
}
}
}