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/entities/FeatureFlag.ts

@@ -64,6 +64,7 @@ export const FEATURE_FLAG = {
     "release_jsobjects_onpageunloadactions_enabled",
   configure_block_event_tracking_for_anonymous_users:
     "configure_block_event_tracking_for_anonymous_users",
+  release_window_dimensions_enabled: "release_window_dimensions_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -116,6 +117,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_ai_agent_instance_enabled: false,
   release_jsobjects_onpageunloadactions_enabled: false,
   configure_block_event_tracking_for_anonymous_users: false,
+  release_window_dimensions_enabled: true,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

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

@@ -48,6 +48,7 @@ import type { CrudInfoModalReduxState } from "reducers/uiReducers/crudInfoModalR
 import type { FormEvaluationState } from "reducers/evaluationReducers/formEvaluationReducer";
 import type { widgetReflow } from "reducers/uiReducers/reflowReducer";
 import type { AppThemingState } from "reducers/uiReducers/appThemingReducer";
+import type { WindowDimensionsState } from "reducers/uiReducers/windowReducer";
 import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer";
 import type { SettingsReduxState } from "ee/reducers/settingsReducer";
 import SettingsReducer from "ee/reducers/settingsReducer";
@@ -147,6 +148,7 @@ export interface AppState {
     activeField: ActiveField;
     ide: IDEState;
     pluginActionEditor: PluginActionEditorState;
+    windowDimensions: WindowDimensionsState;
   };
   entities: {
     canvasWidgetsStructure: CanvasWidgetStructure;

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,6 +61,7 @@ interface EditorProps {
   isMultiPane: boolean;
   widgetConfigBuildSuccess: () => void;
   pages: Page[];
+  updateWindowDimensions: (height: number, width: number) => void;
 }
 
 type Props = EditorProps & RouteComponentProps<BuilderRouteParams>;
@@ -75,6 +77,9 @@ class Editor extends Component<Props> {
     editorInitializer().then(() => {
       this.props.widgetConfigBuildSuccess();
     });
+
+    // Set initial window dimensions
+    this.props.updateWindowDimensions(window.innerHeight, window.innerWidth);
   }
 
   shouldComponentUpdate(nextProps: Props) {
@@ -218,6 +223,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,11 @@ export function AppPage(props: AppPageProps) {
     });
   }, [appName, basePageId, pageName]);
 
+  // Set initial window dimensions
+  useEffect(() => {
+    dispatch(updateWindowDimensions(window.innerHeight, window.innerWidth));
+  }, [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,18 @@
+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: ReturnType<typeof getUnevaluatedDataTree> =
+    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,12 +185,13 @@ 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,
       currentEnvironmentName,
+      ENTITY_TYPE: ENTITY_TYPE.APPSMITH,
     } as AppsmithEntity;
-    (dataTree.appsmith as AppsmithEntity).ENTITY_TYPE = ENTITY_TYPE.APPSMITH;
     dataTree = { ...dataTree, ...metaWidgets.dataTree };
     configTree = { ...configTree, ...metaWidgets.configTree };
 

app/client/src/selectors/windowSelectors.ts

@@ -0,0 +1,12 @@
+import type { DefaultRootState } from "react-redux";
+import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+
+export const getWindowDimensions = (state: DefaultRootState) => {
+  const isWindowDimensionsEnabled = selectFeatureFlagCheck(
+    state,
+    FEATURE_FLAG.release_window_dimensions_enabled,
+  );
+
+  return isWindowDimensionsEnabled ? state.ui.windowDimensions : undefined;
+};