poc: vertical alignment

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/JSONForm/JSONForm_Footer_spec.js

@@ -46,7 +46,7 @@ describe("JSONForm Footer spec", () => {
       cy.get(".t--jsonform-footer").then(($footer) => {
         const gap = $footer.prop("offsetTop") - $body.prop("scrollHeight");
 
-        expect(gap).equals(0);
+        expect(gap).equals(1);
       });
     });
   });
@@ -72,7 +72,7 @@ describe("JSONForm Footer spec", () => {
             $footer.prop("offsetHeight") -
             $form.prop("offsetHeight");
 
-          expect(gap).equals(0);
+          expect(gap).equals(1);
         });
       });
   });
@@ -91,7 +91,7 @@ describe("JSONForm Footer spec", () => {
             $footer.prop("offsetHeight") -
             $form.prop("scrollHeight");
 
-          expect(gap).equals(0);
+          expect(gap).equals(1);
         });
       });
   });

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Multiselect/MultiSelect3_spec.js

@@ -28,7 +28,7 @@ describe("Dropdown Widget Functionality", function () {
       .find(widgetLocators.menuButton)
       .invoke("outerWidth")
       .then((width) => {
-        expect(parseInt(width)).to.equal(147);
+        expect(parseInt(width)).to.equal(146);
       });
     cy.get(formWidgetsPage.menuButtonWidget)
       .find(widgetLocators.menuButton)
@@ -40,7 +40,7 @@ describe("Dropdown Widget Functionality", function () {
     cy.get(".menu-button-popover")
       .invoke("outerWidth")
       .then((width) => {
-        expect(parseInt(width)).to.equal(147);
+        expect(parseInt(width)).to.equal(146);
       });
 
     // MultiSelect

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js

@@ -8,8 +8,7 @@ describe("Label feature", () => {
   it("CheckboxGroupWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "checkboxgroupwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='checkboxgroup-container']",
       isCompact: true,
       labelText: "Name",
@@ -22,8 +21,7 @@ describe("Label feature", () => {
   it("CurrencyInputWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "currencyinputwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='input-container']",
       isCompact: true,
       labelText: "Name",
@@ -36,8 +34,7 @@ describe("Label feature", () => {
   it("DatePickerWidget2 label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "datepickerwidget2",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='datepicker-container']",
       isCompact: true,
       labelText: "Name",
@@ -50,8 +47,7 @@ describe("Label feature", () => {
   it("InputWidgetV2 label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "inputwidgetv2",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='input-container']",
       isCompact: true,
       labelText: "Name",
@@ -64,8 +60,7 @@ describe("Label feature", () => {
   it("MultiSelectTreeWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "multiselecttreewidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='multitreeselect-container']",
       isCompact: true,
       labelText: "Name",
@@ -78,8 +73,7 @@ describe("Label feature", () => {
   it("MultiSelectWidgetV2 label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "multiselectwidgetv2",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='multiselect-container']",
       isCompact: true,
       labelText: "Name",
@@ -92,8 +86,7 @@ describe("Label feature", () => {
   it("PhoneInputWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "phoneinputwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='input-container']",
       isCompact: true,
       labelText: "Name",
@@ -106,8 +99,7 @@ describe("Label feature", () => {
   it("RadioGroupWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "radiogroupwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='radiogroup-container']",
       isCompact: true,
       labelText: "Name",
@@ -120,8 +112,7 @@ describe("Label feature", () => {
   it("RichTextEditorWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "richtexteditorwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='rte-container']",
       isCompact: false,
       labelText: "Name",
@@ -134,8 +125,7 @@ describe("Label feature", () => {
   it("SelectWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "selectwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='select-container']",
       isCompact: true,
       labelText: "Name",
@@ -148,8 +138,7 @@ describe("Label feature", () => {
   it("SingleSelectTreeWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "singleselecttreewidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='treeselect-container']",
       isCompact: true,
       labelText: "Name",
@@ -162,8 +151,7 @@ describe("Label feature", () => {
   it("SwitchGroupWidget label properties: Text, Position, Alignment, Width", () => {
     const options = {
       widgetName: "switchgroupwidget",
-      // parentColumnSpace: 11.90625,
-      parentColumnSpace: 11.9375,
+      parentColumnSpace: 11.90625,
       containerSelector: "[data-testid='switchgroup-container']",
       isCompact: true,
       labelText: "Name",

app/client/package.json

@@ -75,7 +75,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system-old": "npm:@appsmithorg/[email protected].52",
+    "design-system-old": "npm:@appsmithorg/[email protected].53-alpha.1",
     "downloadjs": "^1.4.7",
     "exceljs": "^4.3.0",
     "fast-deep-equal": "^3.1.3",
@@ -329,4 +329,4 @@
     "trim": "0.0.3",
     "webpack": "5.76.0"
   }
-}
+}

app/client/src/actions/autoLayoutActions.ts

@@ -1,14 +1,88 @@
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
+import type {
+  CONVERSION_STATES,
+  SnapShotDetails,
+} from "reducers/uiReducers/layoutConversionReducer";
 
+/**
+ * Calculate size and position changes owing to minSizes and flex wrap.
+ * This function is triggered the first time mobile viewport (480px) is encountered.
+ * It is also called when increasing viewport size from mobile to desktop.
+ */
 export const updateLayoutForMobileBreakpointAction = (
   parentId: string,
   isMobile: boolean,
   canvasWidth: number,
-) => ({
-  type: ReduxActionTypes.RECALCULATE_COLUMNS,
-  payload: {
-    parentId,
-    isMobile,
-    canvasWidth,
-  },
-});
+) => {
+  return {
+    type: ReduxActionTypes.RECALCULATE_COLUMNS,
+    payload: {
+      parentId,
+      isMobile,
+      canvasWidth,
+    },
+  };
+};
+
+export const updateLayoutPositioning = (
+  positioningType: AppPositioningTypes,
+) => {
+  return {
+    type: ReduxActionTypes.UPDATE_LAYOUT_POSITIONING,
+    payload: positioningType,
+  };
+};
+
+export const setLayoutConversionStateAction = (
+  conversionState: CONVERSION_STATES,
+  error?: Error,
+) => {
+  return {
+    type: ReduxActionTypes.SET_LAYOUT_CONVERSION_STATE,
+    payload: { conversionState, error },
+  };
+};
+
+export const updateSnapshotDetails = (
+  snapShotDetails: SnapShotDetails | undefined,
+) => {
+  return {
+    type: ReduxActionTypes.UPDATE_SNAPSHOT_DETAILS,
+    payload: snapShotDetails,
+  };
+};
+export function updateWidgetDimensionAction(
+  widgetId: string,
+  width: number,
+  height: number,
+) {
+  return {
+    type: ReduxActionTypes.UPDATE_WIDGET_DIMENSIONS,
+    payload: {
+      widgetId,
+      width,
+      height,
+    },
+  };
+}
+
+export const setConversionStart = (conversionState: CONVERSION_STATES) => {
+  return {
+    type: ReduxActionTypes.START_CONVERSION_FLOW,
+    payload: conversionState,
+  };
+};
+
+export const setConversionStop = () => {
+  return {
+    type: ReduxActionTypes.STOP_CONVERSION_FLOW,
+  };
+};
+
+export const setAutoCanvasResizing = (isAutoCanvasResizing: boolean) => {
+  return {
+    type: ReduxActionTypes.SET_AUTO_CANVAS_RESIZING,
+    payload: isAutoCanvasResizing,
+  };
+};

app/client/src/actions/pageActions.tsx

@@ -185,6 +185,24 @@ export const createPage = (
   };
 };
 
+export const createNewPageFromEntities = (
+  applicationId: string,
+  pageName: string,
+  blockNavigation?: boolean,
+) => {
+  AnalyticsUtil.logEvent("CREATE_PAGE", {
+    pageName,
+  });
+  return {
+    type: ReduxActionTypes.CREATE_NEW_PAGE_FROM_ENTITIES,
+    payload: {
+      applicationId,
+      name: pageName,
+      blockNavigation,
+    },
+  };
+};
+
 /**
  * action to clone page
  *
@@ -282,10 +300,14 @@ export type MultipleWidgetDeletePayload = {
 export type WidgetResize = {
   widgetId: string;
   parentId: string;
-  leftColumn: number;
-  rightColumn: number;
-  topRow: number;
-  bottomRow: number;
+  leftColumn?: number;
+  rightColumn?: number;
+  topRow?: number;
+  bottomRow?: number;
+  mobileLeftColumn?: number;
+  mobileRightColumn?: number;
+  mobileTopRow?: number;
+  mobileBottomRow?: number;
   snapColumnSpace: number;
   snapRowSpace: number;
 };

app/client/src/api/ApplicationApi.tsx

@@ -3,10 +3,14 @@ import type { ApiResponse } from "./ApiResponses";
 import type { AxiosPromise } from "axios";
 import type { AppColorCode } from "constants/DefaultTheme";
 import type { AppIconName } from "design-system-old";
-import type { AppLayoutConfig } from "reducers/entityReducers/pageListReducer";
+import type {
+  AppLayoutConfig,
+  AppPositioningTypeConfig,
+} from "reducers/entityReducers/pageListReducer";
 import type { APP_MODE } from "entities/App";
 import type { ApplicationVersion } from "actions/applicationActions";
 import type { Datasource } from "entities/Datasource";
+import { getSnapShotAPIRoute } from "ce/constants/ApiConstants";
 
 export type EvaluationVersion = number;
 
@@ -110,6 +114,9 @@ export type UpdateApplicationPayload = {
   currentApp?: boolean;
   appLayout?: AppLayoutConfig;
   applicationVersion?: number;
+  applicationDetail?: {
+    appPositioning?: AppPositioningTypeConfig;
+  };
   embedSetting?: AppEmbedSetting;
 };
 
@@ -208,6 +215,10 @@ export interface PageDefaultMeta {
   default: boolean;
 }
 
+export interface snapShotApplicationRequest {
+  applicationId: string;
+}
+
 class ApplicationApi extends Api {
   static baseURL = "v1/applications";
   static publishURLPath = (applicationId: string) =>
@@ -337,6 +348,22 @@ class ApplicationApi extends Api {
       },
     );
   }
+
+  static createApplicationSnapShot(request: snapShotApplicationRequest) {
+    return Api.post(getSnapShotAPIRoute(request.applicationId));
+  }
+
+  static getSnapShotDetails(request: snapShotApplicationRequest) {
+    return Api.get(getSnapShotAPIRoute(request.applicationId));
+  }
+
+  static restoreApplicationFromSnapshot(request: snapShotApplicationRequest) {
+    return Api.post(getSnapShotAPIRoute(request.applicationId) + "/restore");
+  }
+
+  static deleteApplicationSnapShot(request: snapShotApplicationRequest) {
+    return Api.delete(getSnapShotAPIRoute(request.applicationId));
+  }
 }
 
 export default ApplicationApi;