From 726c80e91317c02ed8d1761d825b3efa412308c8 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Fri, 20 Sep 2024 01:55:46 +0530 Subject: [PATCH 1/7] fix: remove redundant eval trigger --- app/client/src/actions/pageActions.tsx | 6 -- app/client/src/ce/sagas/PageSagas.tsx | 91 ++++++++++--------- .../src/entities/Engine/AppViewerEngine.ts | 2 +- app/client/src/pages/AppViewer/index.tsx | 7 +- 4 files changed, 48 insertions(+), 58 deletions(-) diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 51a10762d293..0bff47cf300a 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -68,7 +68,6 @@ export const fetchPageAction = ( export interface FetchPublishedPageActionPayload { pageId: string; bustCache?: boolean; - firstLoad?: boolean; pageWithMigratedDsl?: FetchPageResponse; } @@ -79,14 +78,12 @@ export interface FetchPublishedPageResourcesPayload { export const fetchPublishedPageAction = ( pageId: string, bustCache = false, - firstLoad = false, pageWithMigratedDsl?: FetchPageResponse, ): ReduxAction => ({ type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT, payload: { pageId, bustCache, - firstLoad, pageWithMigratedDsl, }, }); @@ -675,21 +672,18 @@ 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 2ab7c28753ea..89ad551968ce 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -325,12 +325,47 @@ 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, +) { + // Clear any existing caches + yield call(clearEvalCache); + // Set url params + yield call(setDataUrl); + + yield call(updateCanvasLayout, response); + // set current page + yield put( + updateCurrentPage( + pageId, + response.data.slug, + response.data.userPermissions, + ), + ); +} + export function* fetchPublishedPageSaga( action: ReduxAction, ) { try { - const { bustCache, firstLoad, pageId, pageWithMigratedDsl } = - action.payload; + const { bustCache, pageId, pageWithMigratedDsl } = action.payload; const params = { pageId, bustCache }; const response: FetchPageResponse = yield call( @@ -342,41 +377,9 @@ export function* fetchPublishedPageSaga( const isValidResponse: boolean = yield validateResponse(response); if (isValidResponse) { - // 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, - ), - ); + yield call(postFetchedPublishedPage, response, pageId); - // 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({ @@ -410,6 +413,12 @@ 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, + ); + // Sending applicationId as empty as we have publishedActions present, // it won't call the actions view api with applicationId yield put(fetchActionsForView({ applicationId: "", publishedActions })); @@ -1425,21 +1434,13 @@ export function* setupPublishedPageSaga( action: ReduxAction, ) { try { - const { bustCache, firstLoad, pageId, pageWithMigratedDsl } = - action.payload; + const { bustCache, 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, - firstLoad, - pageWithMigratedDsl, - ), - ); + yield put(fetchPublishedPageAction(pageId, bustCache, pageWithMigratedDsl)); yield take(ReduxActionTypes.FETCH_PUBLISHED_PAGE_SUCCESS); yield put({ diff --git a/app/client/src/entities/Engine/AppViewerEngine.ts b/app/client/src/entities/Engine/AppViewerEngine.ts index d93d7b6cb1a5..e4cca1b7db6e 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, true, pageWithMigratedDsl), + setupPublishedPage(toLoadPageId, true, pageWithMigratedDsl), ]; const successActionEffects = [ diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index bde4699342c4..b86d43cc5a32 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -28,10 +28,7 @@ import { useSelector } from "react-redux"; import BrandingBadge from "./BrandingBadge"; import { setAppViewHeaderHeight } from "actions/appViewActions"; import { CANVAS_SELECTOR } from "constants/WidgetConstants"; -import { - setupPublishedPage, - fetchPublishedPageResourcesAction, -} from "actions/pageActions"; +import { fetchPublishedPageResourcesAction } from "actions/pageActions"; import usePrevious from "utils/hooks/usePrevious"; import { getIsBranchUpdated } from "../utils"; import { APP_MODE } from "entities/App"; @@ -165,8 +162,6 @@ function AppViewer(props: Props) { )?.pageId; if (pageId) { - dispatch(setupPublishedPage(pageId, true)); - // Used for fetching page resources dispatch(fetchPublishedPageResourcesAction(basePageId)); } From 0a18cfe200f456db178dd281ec9ce2d8e91dd732 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Fri, 20 Sep 2024 02:17:28 +0530 Subject: [PATCH 2/7] fix type in jest test --- app/client/src/ce/sagas/__tests__/PageSaga.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/client/src/ce/sagas/__tests__/PageSaga.test.ts b/app/client/src/ce/sagas/__tests__/PageSaga.test.ts index 96dc534cc274..4fb55f74d31b 100644 --- a/app/client/src/ce/sagas/__tests__/PageSaga.test.ts +++ b/app/client/src/ce/sagas/__tests__/PageSaga.test.ts @@ -47,7 +47,6 @@ describe("ce/PageSaga", () => { pageWithMigratedDsl: mockResponse.data .pageWithMigratedDsl as FetchPageResponse, bustCache: false, - firstLoad: true, }, }; @@ -57,7 +56,6 @@ describe("ce/PageSaga", () => { fetchPublishedPageAction( action.payload.pageId, action.payload.bustCache, - action.payload.firstLoad, action.payload.pageWithMigratedDsl, ), ) From 69cd49df4978f4a8bb7158c7b56ff0dc580db106 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Fri, 20 Sep 2024 19:33:06 +0530 Subject: [PATCH 3/7] make the redux action call blocking --- app/client/src/ce/sagas/PageSagas.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index 89ad551968ce..d85b591877fc 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -332,13 +332,15 @@ export function* updateCanvasLayout(response: FetchPageResponse) { const canvasWidgetsPayload = getCanvasWidgetsPayload(response); // resize main canvas - resizePublishedMainCanvasToLowestWidget(canvasWidgetsPayload.widgets); + yield call( + resizePublishedMainCanvasToLowestWidget, + canvasWidgetsPayload.widgets, + ); // Update the canvas - yield put(initCanvasLayout(canvasWidgetsPayload)); - + yield call(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)); + yield call(generateAutoHeightLayoutTreeAction, true, true); } export function* postFetchedPublishedPage( @@ -352,12 +354,11 @@ export function* postFetchedPublishedPage( yield call(updateCanvasLayout, response); // set current page - yield put( - updateCurrentPage( - pageId, - response.data.slug, - response.data.userPermissions, - ), + yield call( + updateCurrentPage, + pageId, + response.data.slug, + response.data.userPermissions, ); } @@ -421,7 +422,9 @@ export function* fetchPublishedPageResourcesSaga( // 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( + fetchActionsForView({ applicationId: applicationId, publishedActions }), + ); yield put(fetchAllPageEntityCompletion([executePageLoadActions()])); } } catch (error) { From 087b59fd2bdb588f6b59f660e8b16e1f962f84d4 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Fri, 20 Sep 2024 19:50:38 +0530 Subject: [PATCH 4/7] Add applicationId to fetchPublishedPageResourcesAction --- app/client/src/actions/pageActions.tsx | 3 +++ app/client/src/ce/sagas/PageSagas.tsx | 9 +++------ app/client/src/pages/AppViewer/index.tsx | 4 +++- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 0bff47cf300a..462cbb1aeb40 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -73,6 +73,7 @@ export interface FetchPublishedPageActionPayload { export interface FetchPublishedPageResourcesPayload { pageId: string; + applicationId: string; } export const fetchPublishedPageAction = ( @@ -298,10 +299,12 @@ 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, }, }); diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index d85b591877fc..db157aab9ae7 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -396,7 +396,7 @@ export function* fetchPublishedPageResourcesSaga( action: ReduxAction, ) { try { - const { pageId } = action.payload; + const { applicationId, pageId } = action.payload; const params = { defaultPageId: pageId }; const initConsolidatedApiResponse: ApiResponse = @@ -420,11 +420,8 @@ export function* fetchPublishedPageResourcesSaga( pageId, ); - // Sending applicationId as empty as we have publishedActions present, - // it won't call the actions view api with applicationId - yield put( - fetchActionsForView({ applicationId: applicationId, publishedActions }), - ); + // NOTE: fetchActionsForView is used here to update publishedActions in redux store and not to fetch actions again + yield put(fetchActionsForView({ applicationId, publishedActions })); yield put(fetchAllPageEntityCompletion([executePageLoadActions()])); } } catch (error) { diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index b86d43cc5a32..f17badca3c58 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -163,7 +163,9 @@ function AppViewer(props: Props) { if (pageId) { // Used for fetching page resources - dispatch(fetchPublishedPageResourcesAction(basePageId)); + dispatch( + fetchPublishedPageResourcesAction(basePageId, baseApplicationId), + ); } } } From ba66e4e8cdb6b8d37bef160a8fa4e0d38b01d6d2 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Sat, 21 Sep 2024 01:21:00 +0530 Subject: [PATCH 5/7] Revert "make the redux action call blocking" This reverts commit 69cd49df4978f4a8bb7158c7b56ff0dc580db106. --- app/client/src/ce/sagas/PageSagas.tsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index db157aab9ae7..4f6b377c0a3f 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -332,15 +332,13 @@ export function* updateCanvasLayout(response: FetchPageResponse) { const canvasWidgetsPayload = getCanvasWidgetsPayload(response); // resize main canvas - yield call( - resizePublishedMainCanvasToLowestWidget, - canvasWidgetsPayload.widgets, - ); + resizePublishedMainCanvasToLowestWidget(canvasWidgetsPayload.widgets); // Update the canvas - yield call(initCanvasLayout, canvasWidgetsPayload); + 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 call(generateAutoHeightLayoutTreeAction, true, true); + yield put(generateAutoHeightLayoutTreeAction(true, true)); } export function* postFetchedPublishedPage( @@ -354,11 +352,12 @@ export function* postFetchedPublishedPage( yield call(updateCanvasLayout, response); // set current page - yield call( - updateCurrentPage, - pageId, - response.data.slug, - response.data.userPermissions, + yield put( + updateCurrentPage( + pageId, + response.data.slug, + response.data.userPermissions, + ), ); } From 957fee4555bb8ed369109be80ea418cb6815cf43 Mon Sep 17 00:00:00 2001 From: rishabhrathod01 Date: Tue, 1 Oct 2024 15:53:00 +0530 Subject: [PATCH 6/7] update current page before eval trigger --- app/client/src/ce/sagas/PageSagas.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index f36d1ab31a23..2f7003b7754a 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -345,12 +345,6 @@ export function* postFetchedPublishedPage( response: FetchPageResponse, pageId: string, ) { - // Clear any existing caches - yield call(clearEvalCache); - // Set url params - yield call(setDataUrl); - - yield call(updateCanvasLayout, response); // set current page yield put( updateCurrentPage( @@ -359,6 +353,12 @@ export function* postFetchedPublishedPage( response.data.userPermissions, ), ); + // Clear any existing caches + yield call(clearEvalCache); + // Set url params + yield call(setDataUrl); + + yield call(updateCanvasLayout, response); } export function* fetchPublishedPageSaga( From 026ef4e704ce878be75446d470eef1af842aff39 Mon Sep 17 00:00:00 2001 From: rishabhrathod01 Date: Wed, 2 Oct 2024 01:05:44 +0530 Subject: [PATCH 7/7] fix the gitSync related issue --- app/client/src/actions/pageActions.tsx | 12 ++++++------ .../src/ce/constants/ReduxActionConstants.tsx | 2 ++ app/client/src/ce/sagas/PageSagas.tsx | 9 ++++++--- app/client/src/pages/AppViewer/index.tsx | 8 +++++--- .../src/reducers/uiReducers/appViewReducer.tsx | 13 +++++++++++++ 5 files changed, 32 insertions(+), 12 deletions(-) diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index 462cbb1aeb40..22cfe873e309 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -73,7 +73,7 @@ export interface FetchPublishedPageActionPayload { export interface FetchPublishedPageResourcesPayload { pageId: string; - applicationId: string; + basePageId: string; } export const fetchPublishedPageAction = ( @@ -297,14 +297,14 @@ export const clonePageSuccess = ({ // Fetches resources required for published page, currently only used for fetching actions // In future we can reuse this for fetching other page level resources in published mode -export const fetchPublishedPageResourcesAction = ( - pageId: string, - applicationId: string, -): ReduxAction => ({ +export const fetchPublishedPageResources = ({ + basePageId, + pageId, +}: FetchPublishedPageResourcesPayload): ReduxAction => ({ type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_RESOURCES_INIT, payload: { pageId, - applicationId, + basePageId, }, }); diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index 1e94ce4336cf..2f6381de77f7 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -981,6 +981,8 @@ const AppViewActionTypes = { SET_APP_VIEWER_HEADER_HEIGHT: "SET_APP_VIEWER_HEADER_HEIGHT", SET_APP_SIDEBAR_PINNED: "SET_APP_SIDEBAR_PINNED", FETCH_PUBLISHED_PAGE_RESOURCES_INIT: "FETCH_PUBLISHED_PAGE_RESOURCES_INIT", + FETCH_PUBLISHED_PAGE_RESOURCES_SUCCESS: + "FETCH_PUBLISHED_PAGE_RESOURCES_SUCCESS", }; const AppViewActionErrorTypes = { diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index 2f7003b7754a..aeee2a7b60c4 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -395,9 +395,9 @@ export function* fetchPublishedPageResourcesSaga( action: ReduxAction, ) { try { - const { applicationId, pageId } = action.payload; + const { basePageId, pageId } = action.payload; - const params = { defaultPageId: pageId }; + const params = { defaultPageId: basePageId }; const initConsolidatedApiResponse: ApiResponse = yield ConsolidatedPageLoadApi.getConsolidatedPageLoadDataView(params); @@ -420,8 +420,11 @@ export function* fetchPublishedPageResourcesSaga( ); // NOTE: fetchActionsForView is used here to update publishedActions in redux store and not to fetch actions again - yield put(fetchActionsForView({ applicationId, publishedActions })); + yield put(fetchActionsForView({ applicationId: "", publishedActions })); yield put(fetchAllPageEntityCompletion([executePageLoadActions()])); + yield put({ + type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_RESOURCES_SUCCESS, + }); } } catch (error) { yield put({ diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index f17badca3c58..abe1ebbf3884 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -28,7 +28,7 @@ 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 { fetchPublishedPageResources } from "actions/pageActions"; import usePrevious from "utils/hooks/usePrevious"; import { getIsBranchUpdated } from "../utils"; import { APP_MODE } from "entities/App"; @@ -162,9 +162,11 @@ function AppViewer(props: Props) { )?.pageId; if (pageId) { - // Used for fetching page resources dispatch( - fetchPublishedPageResourcesAction(basePageId, baseApplicationId), + fetchPublishedPageResources({ + basePageId, + pageId, + }), ); } } diff --git a/app/client/src/reducers/uiReducers/appViewReducer.tsx b/app/client/src/reducers/uiReducers/appViewReducer.tsx index 1d3671392f24..05ffcdbfcad3 100644 --- a/app/client/src/reducers/uiReducers/appViewReducer.tsx +++ b/app/client/src/reducers/uiReducers/appViewReducer.tsx @@ -26,6 +26,11 @@ const appViewReducer = createReducer(initialState, { [ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT]: (state: AppViewReduxState) => { return { ...state, isFetchingPage: true }; }, + [ReduxActionTypes.FETCH_PUBLISHED_PAGE_RESOURCES_INIT]: ( + state: AppViewReduxState, + ) => { + return { ...state, isFetchingPage: true }; + }, [ReduxActionErrorTypes.FETCH_PUBLISHED_PAGE_ERROR]: ( state: AppViewReduxState, ) => { @@ -44,6 +49,14 @@ const appViewReducer = createReducer(initialState, { isFetchingPage: false, }; }, + [ReduxActionTypes.FETCH_PUBLISHED_PAGE_RESOURCES_SUCCESS]: ( + state: AppViewReduxState, + ) => { + return { + ...state, + isFetchingPage: false, + }; + }, [ReduxActionTypes.SET_APP_VIEWER_HEADER_HEIGHT]: ( state: AppViewReduxState, action: ReduxAction,