Fix: Positioning widgets without left right column towards the end of the page. (#4777)

app/client/src/constants/WidgetConstants.tsx

@@ -96,7 +96,7 @@ export const layoutConfigurations: LayoutConfigurations = {
   FLUID: { minWidth: -1, maxWidth: -1 },
 };
 
-export const LATEST_PAGE_VERSION = 21;
+export const LATEST_PAGE_VERSION = 22;
 
 export const GridDefaults = {
   DEFAULT_CELL_SIZE: 1,

app/client/src/utils/WidgetPropsUtils.tsx

@@ -22,7 +22,7 @@ import defaultTemplate from "templates/default";
 import { generateReactKey } from "./generators";
 import { ChartDataPoint } from "widgets/ChartWidget";
 import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
-import { has, isString, set } from "lodash";
+import { has, isString, omit, set } from "lodash";
 import log from "loglevel";
 import {
   migrateTablePrimaryColumnsBindings,
@@ -33,7 +33,10 @@ import * as Sentry from "@sentry/react";
 import { migrateTextStyleFromTextWidget } from "./migrations/TextWidgetReplaceTextStyle";
 import { nextAvailableRowInContainer } from "entities/Widget/utils";
 import { DATA_BIND_REGEX_GLOBAL } from "constants/BindingsConstants";
-import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse";
+import WidgetConfigResponse, {
+  GRID_DENSITY_MIGRATION_V1,
+} from "mockResponses/WidgetConfigResponse";
+import CanvasWidgetsNormalizer from "normalizers/CanvasWidgetsNormalizer";
 
 export type WidgetOperationParams = {
   operation: WidgetOperation;
@@ -740,12 +743,103 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
 
   if (currentDSL.version === 20) {
     currentDSL = migrateNewlyAddedTabsWidgetsMissingData(currentDSL);
+    currentDSL.version = 21;
+  }
+
+  if (currentDSL.version === 21) {
+    const {
+      entities: { canvasWidgets },
+    } = CanvasWidgetsNormalizer.normalize(currentDSL);
+    currentDSL = migrateWidgetsWithoutLeftRightColumns(
+      currentDSL,
+      canvasWidgets,
+    );
+    currentDSL = migrateOverFlowingTabsWidgets(currentDSL, canvasWidgets);
     currentDSL.version = LATEST_PAGE_VERSION;
   }
 
   return currentDSL;
 };
 
+const migrateOverFlowingTabsWidgets = (
+  currentDSL: ContainerWidgetProps<WidgetProps>,
+  canvasWidgets: any,
+) => {
+  if (
+    currentDSL.type === "TABS_WIDGET" &&
+    currentDSL.version === 3 &&
+    currentDSL.children &&
+    currentDSL.children.length
+  ) {
+    const tabsWidgetHeight =
+      (currentDSL.bottomRow - currentDSL.topRow) * currentDSL.parentRowSpace;
+    const widgetHasOverflowingChildren = currentDSL.children.some((eachTab) => {
+      if (eachTab.children && eachTab.children.length) {
+        return eachTab.children.some((child: WidgetProps) => {
+          if (canvasWidgets[child.widgetId].repositioned) {
+            const tabHeight = child.bottomRow * child.parentRowSpace;
+            return tabsWidgetHeight < tabHeight;
+          }
+          return false;
+        });
+      }
+      return false;
+    });
+    if (widgetHasOverflowingChildren) {
+      currentDSL.shouldScrollContents = true;
+    }
+  }
+  if (currentDSL.children && currentDSL.children.length) {
+    currentDSL.children = currentDSL.children.map((eachChild) =>
+      migrateOverFlowingTabsWidgets(eachChild, canvasWidgets),
+    );
+  }
+  return currentDSL;
+};
+
+const migrateWidgetsWithoutLeftRightColumns = (
+  currentDSL: ContainerWidgetProps<WidgetProps>,
+  canvasWidgets: any,
+) => {
+  if (
+    currentDSL.widgetId !== MAIN_CONTAINER_WIDGET_ID &&
+    !(
+      currentDSL.hasOwnProperty("leftColumn") &&
+      currentDSL.hasOwnProperty("rightColumn")
+    )
+  ) {
+    try {
+      const nextRow = nextAvailableRowInContainer(
+        currentDSL.parentId || MAIN_CONTAINER_WIDGET_ID,
+        omit(canvasWidgets, [currentDSL.widgetId]),
+      );
+      canvasWidgets[currentDSL.widgetId].repositioned = true;
+      const leftColumn = 0;
+      const rightColumn = WidgetConfigResponse.config[currentDSL.type].rows;
+      const bottomRow = nextRow + (currentDSL.bottomRow - currentDSL.topRow);
+      const topRow = nextRow;
+      currentDSL = {
+        ...currentDSL,
+        topRow,
+        bottomRow,
+        rightColumn,
+        leftColumn,
+      };
+    } catch (error) {
+      Sentry.captureException({
+        message: "Migrating position of widget on data loss failed",
+        oldData: currentDSL,
+      });
+    }
+  }
+  if (currentDSL.children && currentDSL.children.length) {
+    currentDSL.children = currentDSL.children.map((dsl) =>
+      migrateWidgetsWithoutLeftRightColumns(dsl, canvasWidgets),
+    );
+  }
+  return currentDSL;
+};
+
 const migrateNewlyAddedTabsWidgetsMissingData = (
   currentDSL: ContainerWidgetProps<WidgetProps>,
 ) => {