feat: made changes to expose the App's height and width as part of the appsmith.ui state object

app/client/src/actions/windowActions.ts

@@ -0,0 +1,6 @@
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+
+export const updateWindowDimensions = (height: number, width: number) => ({
+  type: ReduxActionTypes.UPDATE_WINDOW_DIMENSIONS,
+  payload: { height, width },
+});

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -1213,6 +1213,10 @@ const AppThemeActionsTypes = {
   RESET_APP_THEME_SUCCESS: "RESET_APP_THEME_SUCCESS",
 };
 
+const WindowActionsTypes = {
+  UPDATE_WINDOW_DIMENSIONS: "UPDATE_WINDOW_DIMENSIONS",
+};
+
 const AppThemeActionErrorTypes = {
   FETCH_APP_THEMES_ERROR: "FETCH_APP_THEMES_ERROR",
   SET_DEFAULT_SELECTED_THEME_ERROR: "SET_DEFAULT_SELECTED_THEME_ERROR",
@@ -1304,6 +1308,7 @@ export const ReduxActionTypes = {
   ...AIActionTypes,
   ...ApplicationActionTypes,
   ...AppThemeActionsTypes,
+  ...WindowActionsTypes,
   ...AppViewActionTypes,
   ...AppSettingsActionTypes,
   ...BatchUpdateActionTypes,

app/client/src/ce/reducers/uiReducers/index.tsx

@@ -33,6 +33,7 @@ import crudInfoModalReducer from "reducers/uiReducers/crudInfoModalReducer";
 import { widgetReflowReducer } from "reducers/uiReducers/reflowReducer";
 import jsObjectNameReducer from "reducers/uiReducers/jsObjectNameReducer";
 import appThemingReducer from "reducers/uiReducers/appThemingReducer";
+import windowReducer from "reducers/uiReducers/windowReducer";
 import mainCanvasReducer from "ee/reducers/uiReducers/mainCanvasReducer";
 import focusHistoryReducer from "reducers/uiReducers/focusHistoryReducer";
 import { editorContextReducer } from "ee/reducers/uiReducers/editorContextReducer";
@@ -85,6 +86,7 @@ export const uiReducerObject = {
   crudInfoModal: crudInfoModalReducer,
   widgetReflow: widgetReflowReducer,
   appTheming: appThemingReducer,
+  windowDimensions: windowReducer,
   mainCanvas: mainCanvasReducer,
   appSettingsPane: appSettingsPaneReducer,
   focusHistory: focusHistoryReducer,

app/client/src/ce/sagas/index.tsx

@@ -9,6 +9,7 @@ import { watchActionSagas } from "sagas/ActionSagas";
 import apiPaneSagas from "sagas/ApiPaneSagas";
 import applicationSagas from "ee/sagas/ApplicationSagas";
 import appThemingSaga from "sagas/AppThemingSaga";
+import windowSaga from "sagas/WindowSaga";
 import AutoHeightSagas from "sagas/autoHeightSagas";
 import autoLayoutUpdateSagas from "sagas/AutoLayoutUpdateSagas";
 import batchSagas from "sagas/BatchSagas";
@@ -95,6 +96,7 @@ export const sagas = [
   gitSyncSagas,
   SuperUserSagas,
   appThemingSaga,
+  windowSaga,
   NavigationSagas,
   editorContextSagas,
   AutoHeightSagas,

app/client/src/pages/AppIDE/AppIDE.tsx

@@ -38,6 +38,7 @@ import type { Page } from "entities/Page";
 import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
 import { GitApplicationContextProvider } from "git-artifact-helpers/application/components";
 import { AppIDEModals } from "ee/pages/AppIDE/components/AppIDEModals";
+import { updateWindowDimensions } from "actions/windowActions";
 
 interface EditorProps {
   currentApplicationId?: string;
@@ -60,12 +61,14 @@ interface EditorProps {
   isMultiPane: boolean;
   widgetConfigBuildSuccess: () => void;
   pages: Page[];
+  updateWindowDimensions: (height: number, width: number) => void;
 }
 
 type Props = EditorProps & RouteComponentProps<BuilderRouteParams>;
 
 class Editor extends Component<Props> {
   prevPageId: string | null = null;
+  private handleResize: (() => void) | null = null;
 
   componentDidMount() {
     const { basePageId } = this.props.match.params || {};
@@ -75,6 +78,17 @@ class Editor extends Component<Props> {
     editorInitializer().then(() => {
       this.props.widgetConfigBuildSuccess();
     });
+
+    // Set up window resize listener for window dimensions
+    this.handleResize = () => {
+      this.props.updateWindowDimensions(window.innerHeight, window.innerWidth);
+    };
+
+    // Set initial dimensions immediately
+    this.props.updateWindowDimensions(window.innerHeight, window.innerWidth);
+
+    // Add resize listener
+    window.addEventListener("resize", this.handleResize);
   }
 
   shouldComponentUpdate(nextProps: Props) {
@@ -159,6 +173,11 @@ class Editor extends Component<Props> {
   componentWillUnmount() {
     this.props.resetEditorRequest();
     urlBuilder.setCurrentBasePageId(null);
+
+    // Clean up window resize listener
+    if (this.handleResize) {
+      window.removeEventListener("resize", this.handleResize);
+    }
   }
 
   public render() {
@@ -218,6 +237,8 @@ const mapDispatchToProps = (dispatch: any) => {
     setupPage: (pageId: string) => dispatch(setupPageAction({ id: pageId })),
     updateCurrentPage: (pageId: string) => dispatch(updateCurrentPage(pageId)),
     widgetConfigBuildSuccess: () => dispatch(widgetInitialisationSuccess()),
+    updateWindowDimensions: (height: number, width: number) =>
+      dispatch(updateWindowDimensions(height, width)),
   };
 };
 

app/client/src/pages/AppViewer/AppPage/AppPage.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import type { CanvasWidgetStructure } from "WidgetProvider/types";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { getAppMode } from "ee/selectors/applicationSelectors";
 import { APP_MODE } from "entities/App";
 import { renderAppsmithCanvas } from "layoutSystems/CanvasFactory";
 import type { WidgetProps } from "widgets/BaseWidget";
 import { useAppViewerSidebarProperties } from "utils/hooks/useAppViewerSidebarProperties";
 import { getIsAnvilLayout } from "layoutSystems/anvil/integrations/selectors";
+import { updateWindowDimensions } from "actions/windowActions";
 
 import { PageView, PageViewWrapper } from "./AppPage.styled";
 import { useCanvasWidthAutoResize } from "../../hooks/useCanvasWidthAutoResize";
@@ -24,6 +25,7 @@ export function AppPage(props: AppPageProps) {
   const { appName, basePageId, canvasWidth, pageName, widgetsStructure } =
     props;
 
+  const dispatch = useDispatch();
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
   const isAnvilLayout = useSelector(getIsAnvilLayout);
@@ -46,6 +48,24 @@ export function AppPage(props: AppPageProps) {
     });
   }, [appName, basePageId, pageName]);
 
+  // Set up window resize listener for window dimensions
+  useEffect(() => {
+    const handleResize = () => {
+      dispatch(updateWindowDimensions(window.innerHeight, window.innerWidth));
+    };
+
+    // Set initial dimensions immediately
+    dispatch(updateWindowDimensions(window.innerHeight, window.innerWidth));
+
+    // Add resize listener
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [dispatch]);
+
   return (
     <PageViewWrapper
       hasPinnedSidebar={hasSidebarPinned}

app/client/src/reducers/uiReducers/windowReducer.ts

@@ -0,0 +1,25 @@
+import { createImmerReducer } from "utils/ReducerUtils";
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+import type { ReduxAction } from "actions/ReduxActionTypes";
+
+export interface WindowDimensionsState {
+  height: number;
+  width: number;
+}
+
+const initialState: WindowDimensionsState = {
+  height: typeof window !== "undefined" ? window.innerHeight : 0,
+  width: typeof window !== "undefined" ? window.innerWidth : 0,
+};
+
+const windowReducer = createImmerReducer(initialState, {
+  [ReduxActionTypes.UPDATE_WINDOW_DIMENSIONS]: (
+    state: WindowDimensionsState,
+    action: ReduxAction<{ height: number; width: number }>,
+  ) => {
+    state.height = action.payload.height;
+    state.width = action.payload.width;
+  },
+});
+
+export default windowReducer;

app/client/src/sagas/WindowSaga.ts

@@ -0,0 +1,17 @@
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+import { takeLatest, select, call } from "redux-saga/effects";
+import { evaluateTreeSaga } from "./EvaluationsSaga";
+import { getUnevaluatedDataTree } from "selectors/dataTreeSelectors";
+
+export function* handleWindowDimensionsUpdate() {
+  const unEvalAndConfigTree = yield select(getUnevaluatedDataTree);
+
+  yield call(evaluateTreeSaga, unEvalAndConfigTree);
+}
+
+export default function* windowSaga() {
+  yield takeLatest(
+    ReduxActionTypes.UPDATE_WINDOW_DIMENSIONS,
+    handleWindowDimensionsUpdate,
+  );
+}

app/client/src/selectors/dataTreeSelectors.ts

@@ -28,6 +28,7 @@ import {
 import "url-search-params-polyfill";
 import type { DefaultRootState } from "react-redux";
 import { getSelectedAppThemeProperties } from "./appThemingSelectors";
+import { getWindowDimensions } from "./windowSelectors";
 import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
 import _, { get } from "lodash";
 import type { EvaluationError } from "utils/DynamicBindingUtils";
@@ -149,6 +150,7 @@ export const getUnevaluatedDataTree = createSelector(
   getMetaWidgetsFromUnevaluatedDataTree,
   getAppData,
   getSelectedAppThemeProperties,
+  getWindowDimensions,
   getCurrentAppWorkspace,
   getCurrentApplication,
   getCurrentPageName,
@@ -160,6 +162,7 @@ export const getUnevaluatedDataTree = createSelector(
     metaWidgets,
     appData,
     theme,
+    windowDimensions,
     currentWorkspace,
     currentApplication,
     getCurrentPageName,
@@ -182,6 +185,7 @@ export const getUnevaluatedDataTree = createSelector(
       // taking precedence in case the key is the same
       store: appData.store,
       theme,
+      ui: windowDimensions,
       currentPageName: getCurrentPageName,
       workspaceName: currentWorkspace.name,
       appName: currentApplication?.name,

app/client/src/selectors/windowSelectors.ts

@@ -0,0 +1,5 @@
+import type { DefaultRootState } from "react-redux";
+
+export const getWindowDimensions = (state: DefaultRootState) => {
+  return state.ui.windowDimensions;
+};