diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 462cbb1aeb40..51a10762d293 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -68,23 +68,25 @@ export const fetchPageAction = ( export interface FetchPublishedPageActionPayload { pageId: string; bustCache?: boolean; + firstLoad?: boolean; pageWithMigratedDsl?: FetchPageResponse; } export interface FetchPublishedPageResourcesPayload { pageId: string; - applicationId: string; } export const fetchPublishedPageAction = ( pageId: string, bustCache = false, + firstLoad = false, pageWithMigratedDsl?: FetchPageResponse, ): ReduxAction => ({ type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT, payload: { pageId, bustCache, + firstLoad, pageWithMigratedDsl, }, }); @@ -299,12 +301,10 @@ export const clonePageSuccess = ({ // In future we can reuse this for fetching other page level resources in published mode export const fetchPublishedPageResourcesAction = ( pageId: string, - applicationId: string, ): ReduxAction => ({ type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_RESOURCES_INIT, payload: { pageId, - applicationId, }, }); @@ -675,18 +675,21 @@ export const setupPageAction = ( export interface SetupPublishedPageActionPayload { pageId: string; bustCache: boolean; + firstLoad: boolean; pageWithMigratedDsl?: FetchPageResponse; } export const setupPublishedPage = ( pageId: string, bustCache = false, + firstLoad = false, pageWithMigratedDsl?: FetchPageResponse, ): ReduxAction => ({ type: ReduxActionTypes.SETUP_PUBLISHED_PAGE_INIT, payload: { pageId, bustCache, + firstLoad, pageWithMigratedDsl, }, }); diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index 2f7003b7754a..12e52ba930c5 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -325,47 +325,12 @@ export function* fetchPageSaga(action: ReduxAction) { } } -export function* updateCanvasLayout(response: FetchPageResponse) { - // Wait for widget config to load before we can get the canvas payload - yield call(waitForWidgetConfigBuild); - // Get Canvas payload - const canvasWidgetsPayload = getCanvasWidgetsPayload(response); - - // resize main canvas - resizePublishedMainCanvasToLowestWidget(canvasWidgetsPayload.widgets); - // Update the canvas - yield put(initCanvasLayout(canvasWidgetsPayload)); - - // Since new page has new layout, we need to generate a data structure - // to compute dynamic height based on the new layout. - yield put(generateAutoHeightLayoutTreeAction(true, true)); -} - -export function* postFetchedPublishedPage( - response: FetchPageResponse, - pageId: string, -) { - // set current page - yield put( - updateCurrentPage( - pageId, - response.data.slug, - response.data.userPermissions, - ), - ); - // Clear any existing caches - yield call(clearEvalCache); - // Set url params - yield call(setDataUrl); - - yield call(updateCanvasLayout, response); -} - export function* fetchPublishedPageSaga( action: ReduxAction, ) { try { - const { bustCache, pageId, pageWithMigratedDsl } = action.payload; + const { bustCache, firstLoad, pageId, pageWithMigratedDsl } = + action.payload; const params = { pageId, bustCache }; const response: FetchPageResponse = yield call( @@ -377,9 +342,41 @@ export function* fetchPublishedPageSaga( const isValidResponse: boolean = yield validateResponse(response); if (isValidResponse) { - yield call(postFetchedPublishedPage, response, pageId); + // Clear any existing caches + yield call(clearEvalCache); + // Set url params + yield call(setDataUrl); + // Wait for widget config to load before we can get the canvas payload + yield call(waitForWidgetConfigBuild); + // Get Canvas payload + const canvasWidgetsPayload = getCanvasWidgetsPayload(response); + + // resize main canvas + resizePublishedMainCanvasToLowestWidget(canvasWidgetsPayload.widgets); + // Update the canvas + yield put(initCanvasLayout(canvasWidgetsPayload)); + // set current page + yield put( + updateCurrentPage( + pageId, + response.data.slug, + response.data.userPermissions, + ), + ); + // dispatch fetch page success yield put(fetchPublishedPageSuccess()); + + // Since new page has new layout, we need to generate a data structure + // to compute dynamic height based on the new layout. + yield put(generateAutoHeightLayoutTreeAction(true, true)); + + /* Currently, All Actions are fetched in initSagas and on pageSwitch we only fetch page + */ + // Hence, if is not isFirstLoad then trigger evaluation with execute pageLoad action + if (!firstLoad) { + yield put(fetchAllPageEntityCompletion([executePageLoadActions()])); + } } } catch (error) { yield put({ @@ -395,7 +392,7 @@ export function* fetchPublishedPageResourcesSaga( action: ReduxAction, ) { try { - const { applicationId, pageId } = action.payload; + const { pageId } = action.payload; const params = { defaultPageId: pageId }; const initConsolidatedApiResponse: ApiResponse = @@ -413,14 +410,9 @@ export function* fetchPublishedPageResourcesSaga( // In future, we can reuse this saga to fetch other resources of the page like actionCollections etc const { publishedActions } = response; - yield call( - postFetchedPublishedPage, - response.pageWithMigratedDsl, - pageId, - ); - - // NOTE: fetchActionsForView is used here to update publishedActions in redux store and not to fetch actions again - yield put(fetchActionsForView({ applicationId, publishedActions })); + // Sending applicationId as empty as we have publishedActions present, + // it won't call the actions view api with applicationId + yield put(fetchActionsForView({ applicationId: "", publishedActions })); yield put(fetchAllPageEntityCompletion([executePageLoadActions()])); } } catch (error) { @@ -1433,13 +1425,21 @@ export function* setupPublishedPageSaga( action: ReduxAction, ) { try { - const { bustCache, pageId, pageWithMigratedDsl } = action.payload; + const { bustCache, firstLoad, pageId, pageWithMigratedDsl } = + action.payload; /* Added the first line for isPageSwitching redux state to be true when page is being fetched to fix scroll position issue. Added the second line for sync call instead of async (due to first line) as it was leading to issue with on page load actions trigger. */ - yield put(fetchPublishedPageAction(pageId, bustCache, pageWithMigratedDsl)); + yield put( + fetchPublishedPageAction( + pageId, + bustCache, + firstLoad, + pageWithMigratedDsl, + ), + ); yield take(ReduxActionTypes.FETCH_PUBLISHED_PAGE_SUCCESS); yield put({ diff --git a/app/client/src/ce/sagas/__tests__/PageSaga.test.ts b/app/client/src/ce/sagas/__tests__/PageSaga.test.ts index 4fb55f74d31b..96dc534cc274 100644 --- a/app/client/src/ce/sagas/__tests__/PageSaga.test.ts +++ b/app/client/src/ce/sagas/__tests__/PageSaga.test.ts @@ -47,6 +47,7 @@ describe("ce/PageSaga", () => { pageWithMigratedDsl: mockResponse.data .pageWithMigratedDsl as FetchPageResponse, bustCache: false, + firstLoad: true, }, }; @@ -56,6 +57,7 @@ describe("ce/PageSaga", () => { fetchPublishedPageAction( action.payload.pageId, action.payload.bustCache, + action.payload.firstLoad, action.payload.pageWithMigratedDsl, ), ) diff --git a/app/client/src/entities/Engine/AppViewerEngine.ts b/app/client/src/entities/Engine/AppViewerEngine.ts index e4cca1b7db6e..d93d7b6cb1a5 100644 --- a/app/client/src/entities/Engine/AppViewerEngine.ts +++ b/app/client/src/entities/Engine/AppViewerEngine.ts @@ -105,7 +105,7 @@ export default class AppViewerEngine extends AppEngine { }), fetchSelectedAppThemeAction(applicationId, currentTheme), fetchAppThemesAction(applicationId, themes), - setupPublishedPage(toLoadPageId, true, pageWithMigratedDsl), + setupPublishedPage(toLoadPageId, true, true, pageWithMigratedDsl), ]; const successActionEffects = [ diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index f17badca3c58..bde4699342c4 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -28,7 +28,10 @@ import { useSelector } from "react-redux"; import BrandingBadge from "./BrandingBadge"; import { setAppViewHeaderHeight } from "actions/appViewActions"; import { CANVAS_SELECTOR } from "constants/WidgetConstants"; -import { fetchPublishedPageResourcesAction } from "actions/pageActions"; +import { + setupPublishedPage, + fetchPublishedPageResourcesAction, +} from "actions/pageActions"; import usePrevious from "utils/hooks/usePrevious"; import { getIsBranchUpdated } from "../utils"; import { APP_MODE } from "entities/App"; @@ -162,10 +165,10 @@ function AppViewer(props: Props) { )?.pageId; if (pageId) { + dispatch(setupPublishedPage(pageId, true)); + // Used for fetching page resources - dispatch( - fetchPublishedPageResourcesAction(basePageId, baseApplicationId), - ); + dispatch(fetchPublishedPageResourcesAction(basePageId)); } } }