diff --git a/app/client/src/ce/reducers/index.tsx b/app/client/src/ce/reducers/index.tsx index e7537b9e55..2dfaef9645 100644 --- a/app/client/src/ce/reducers/index.tsx +++ b/app/client/src/ce/reducers/index.tsx @@ -48,7 +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 { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; +import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer"; import type { SettingsReduxState } from "ee/reducers/settingsReducer"; import SettingsReducer from "ee/reducers/settingsReducer"; import type { TriggerValuesEvaluationState } from "reducers/evaluationReducers/triggerReducer"; diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index 3685e13afb..c79fe834b1 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -33,7 +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 mainCanvasReducer from "reducers/uiReducers/mainCanvasReducer"; +import mainCanvasReducer from "ee/reducers/uiReducers/mainCanvasReducer"; import focusHistoryReducer from "reducers/uiReducers/focusHistoryReducer"; import { editorContextReducer } from "ee/reducers/uiReducers/editorContextReducer"; import libraryReducer from "reducers/uiReducers/libraryReducer"; diff --git a/app/client/src/reducers/uiReducers/mainCanvasReducer.ts b/app/client/src/ce/reducers/uiReducers/mainCanvasReducer.ts similarity index 83% rename from app/client/src/reducers/uiReducers/mainCanvasReducer.ts rename to app/client/src/ce/reducers/uiReducers/mainCanvasReducer.ts index a86bf9c071..3616fecc04 100644 --- a/app/client/src/reducers/uiReducers/mainCanvasReducer.ts +++ b/app/client/src/ce/reducers/uiReducers/mainCanvasReducer.ts @@ -7,15 +7,16 @@ import { } from "constants/WidgetConstants"; import type { UpdateCanvasLayoutPayload } from "actions/controlActions"; import type { UpdateCanvasPayload } from "actions/pageActions"; +import { klona } from "klona"; -const initialState: MainCanvasReduxState = { +export const initialState: MainCanvasReduxState = { initialized: false, width: 0, height: 0, isMobile: false, }; -const mainCanvasReducer = createImmerReducer(initialState, { +export const handlers = { [ReduxActionTypes.INIT_CANVAS_LAYOUT]: ( state: MainCanvasReduxState, action: ReduxAction, @@ -38,7 +39,12 @@ const mainCanvasReducer = createImmerReducer(initialState, { state.isMobile = action.payload.width <= layoutConfigurations.MOBILE.maxWidth; }, -}); + [ReduxActionTypes.RESET_EDITOR_REQUEST]: () => { + return klona(initialState); + }, +}; + +const mainCanvasReducer = createImmerReducer(initialState, handlers); export interface MainCanvasReduxState { initialized: boolean; diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index bbadd0ab49..9bea1a5bae 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -126,7 +126,7 @@ import { getPageList } from "ee/selectors/entitiesSelector"; import { setPreviewModeAction } from "actions/editorActions"; import { SelectionRequestType } from "sagas/WidgetSelectUtils"; import { toast } from "@appsmith/ads"; -import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; +import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer"; import { UserCancelledActionExecutionError } from "sagas/ActionExecution/errorUtils"; import { getInstanceId } from "ee/selectors/organizationSelectors"; import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; diff --git a/app/client/src/ee/reducers/uiReducers/mainCanvasReducer.ts b/app/client/src/ee/reducers/uiReducers/mainCanvasReducer.ts new file mode 100644 index 0000000000..c44e13b56b --- /dev/null +++ b/app/client/src/ee/reducers/uiReducers/mainCanvasReducer.ts @@ -0,0 +1,3 @@ +export * from "ce/reducers/uiReducers/mainCanvasReducer"; +import { default as CE_mainCanvasReducer } from "ce/reducers/uiReducers/mainCanvasReducer"; +export default CE_mainCanvasReducer; diff --git a/app/client/src/layoutSystems/CanvasFactory.tsx b/app/client/src/layoutSystems/CanvasFactory.tsx index 9b0d6c6b83..909c5d6f60 100644 --- a/app/client/src/layoutSystems/CanvasFactory.tsx +++ b/app/client/src/layoutSystems/CanvasFactory.tsx @@ -16,9 +16,19 @@ import { getAppThemeSettings } from "ee/selectors/applicationSelectors"; */ const LayoutSystemBasedCanvas = memo((props: WidgetProps) => { - const renderMode = useSelector(getRenderMode); + let renderMode = useSelector(getRenderMode); const themeSetting = useSelector(getAppThemeSettings); + // This is primarily used by UI modules in app editor where it wants to load all the underlying + // widgets in page mode as they are not editable and mimics the behavior of view mode. + // Since in app's edit mode the default render mode is canvas and due to this some widgets do not behave + // properly. + // Ideally the renderMode from props should be used instead of the one from the selector but that needs + // to be handled properly as it needs a bigger change and more testing. + if (props.overrideRenderMode) { + renderMode = props.overrideRenderMode; + } + const layoutSystemType = useSelector(getLayoutSystemType); const { canvasSystem } = useMemo( () => getLayoutSystem(renderMode, layoutSystemType), diff --git a/app/client/src/pages/AppIDE/components/WidgetAdd/WidgetsList.tsx b/app/client/src/pages/AppIDE/components/WidgetAdd/WidgetsList.tsx index f7d3dd136c..c494299669 100644 --- a/app/client/src/pages/AppIDE/components/WidgetAdd/WidgetsList.tsx +++ b/app/client/src/pages/AppIDE/components/WidgetAdd/WidgetsList.tsx @@ -5,6 +5,7 @@ import UIEntitySidebar from "pages/Editor/widgetSidebar/UIEntitySidebar"; import { createMessage, UI_ELEMENT_PANEL_SEARCH_TEXT, + WIDGET_PANEL_EMPTY_MESSAGE, } from "ee/constants/messages"; interface WidgetsListProps { @@ -17,6 +18,7 @@ function WidgetsList({ focusSearchInput }: WidgetsListProps) { return ( { item.tags.forEach((tag) => { if (groupedCards[tag]) { groupedCards[tag].push(item); + } else { + groupedCards[tag] = [item]; } }); } diff --git a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx index 735d843e7d..e591c15349 100644 --- a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx +++ b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx @@ -1,7 +1,3 @@ -import { - WIDGET_PANEL_EMPTY_MESSAGE, - createMessage, -} from "ee/constants/messages"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer"; import type { @@ -23,10 +19,12 @@ interface UIEntitySidebarProps { entityLoading?: Partial>; groupedCards: WidgetCardsGroupedByTags; searchPlaceholderText?: string; + emptyMessage?: string; } function UIEntitySidebar({ cards, + emptyMessage, entityLoading, focusSearchInput, groupedCards, @@ -133,8 +131,7 @@ function UIEntitySidebar({ renderAs="p" style={{ marginBottom: "15px" }} > - {createMessage(WIDGET_PANEL_EMPTY_MESSAGE)} ` - {searchInputRef.current?.value}` + {emptyMessage} `{searchInputRef.current?.value}` )}
diff --git a/app/client/src/sagas/AutoLayoutUpdateSagas.tsx b/app/client/src/sagas/AutoLayoutUpdateSagas.tsx index bd7ed411de..bbef8b33f8 100644 --- a/app/client/src/sagas/AutoLayoutUpdateSagas.tsx +++ b/app/client/src/sagas/AutoLayoutUpdateSagas.tsx @@ -38,7 +38,7 @@ import { getIsAutoLayoutMobileBreakPoint, getMainCanvasProps, } from "selectors/editorSelectors"; -import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; +import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer"; import { updateLayoutForMobileBreakpointAction } from "actions/autoLayoutActions"; import convertDSLtoAuto from "layoutSystems/common/DSLConversions/fixedToAutoLayout"; import { convertNormalizedDSLToFixed } from "layoutSystems/common/DSLConversions/autoToFixedLayout"; diff --git a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts index 75b7fe3f1b..dbfaaaf6a6 100644 --- a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts +++ b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts @@ -26,7 +26,7 @@ import type { CanvasWidgetsReduxState, FlattenedWidgetProps, } from "ee/reducers/entityReducers/canvasWidgetsReducer"; -import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; +import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer"; import { all, call, put, select, takeLatest } from "redux-saga/effects"; import { addAndMoveBuildingBlockToCanvasSaga } from "sagas/BuildingBlockSagas/BuildingBlockAdditionSagas"; import { getUpdateDslAfterCreatingChild } from "sagas/WidgetAdditionSagas"; diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index cdb45bc03e..b6c75b1d4d 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -25,7 +25,7 @@ import { getLoadingEntities, getConfigTree, } from "selectors/dataTreeSelectors"; -import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; +import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer"; import { getActionEditorSavingMap } from "PluginActionEditor/store"; import { diff --git a/app/client/src/widgets/withWidgetProps.tsx b/app/client/src/widgets/withWidgetProps.tsx index 6c9d1e72cc..b832b99d8c 100644 --- a/app/client/src/widgets/withWidgetProps.tsx +++ b/app/client/src/widgets/withWidgetProps.tsx @@ -82,7 +82,7 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) { getMainCanvasProps(state), ); const googleMapsApiKey = useSelector(getGoogleMapsApiKey); - const renderMode = useSelector(getRenderMode); + let renderMode = useSelector(getRenderMode); const widgetName = canvasWidget?.widgetName || metaWidget?.widgetName; @@ -155,6 +155,14 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) { const widget = metaWidget || canvasWidget; + // This property is primarily used by UI modules in app editor where it wants to load all the underlying + // widgets in page mode as they are not editable and mimics the behavior of view mode. + // Since in app's edit mode the default render mode is canvas and due to this some widgets do not behave + // properly. + if (widget?.overrideRenderMode) { + renderMode = widget.overrideRenderMode; + } + if (!skipWidgetPropsHydration) { const canvasWidgetProps = (() => { if (widgetId === MAIN_CONTAINER_WIDGET_ID) {