chore: Refactor entity explorer to support displaying module instances in the list (#28855)

app/client/src/actions/pageActions.tsx

@@ -551,3 +551,27 @@ export const resetApplicationWidgets = () => ({
 export const fetchPageDSLs = () => ({
   type: ReduxActionTypes.POPULATE_PAGEDSLS_INIT,
 });
+
+export const setupPage = (
+  pageId: string,
+  isFirstLoad = false,
+): ReduxAction<FetchPageRequest> => ({
+  type: ReduxActionTypes.SETUP_PAGE_INIT,
+  payload: {
+    id: pageId,
+    isFirstLoad,
+  },
+});
+
+export const setupPublishedPage = (
+  pageId: string,
+  bustCache = false,
+  firstLoad = false,
+) => ({
+  type: ReduxActionTypes.SETUP_PUBLISHED_PAGE_INIT,
+  payload: {
+    pageId,
+    bustCache,
+    firstLoad,
+  },
+});

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

@@ -894,6 +894,10 @@ const ActionTypes = {
     "IMPORT_TEMPLATE_TO_APPLICATION_ONBOARDING_FLOW",
   IMPORT_TEMPLATE_TO_APPLICATION_ONBOARDING_FLOW_SUCCESS:
     "IMPORT_TEMPLATE_TO_APPLICATION_ONBOARDING_FLOW_SUCCESS",
+  SETUP_PAGE_INIT: "SETUP_PAGE_INIT",
+  SETUP_PAGE_SUCCESS: "SETUP_PAGE_SUCCESS",
+  SETUP_PUBLISHED_PAGE_INIT: "SETUP_PUBLISHED_PAGE_INIT",
+  SETUP_PUBLISHED_PAGE_SUCCESS: "SETUP_PUBLISHED_PAGE_SUCCESS",
 };
 
 export const ReduxActionTypes = {
@@ -1087,6 +1091,8 @@ export const ReduxActionErrorTypes = {
   DELETE_MULTIPLE_APPLICATION_ERROR: "DELETE_MULTIPLE_APPLICATION_ERROR",
   IMPORT_TEMPLATE_TO_APPLICATION_ONBOARDING_FLOW_ERROR:
     "IMPORT_TEMPLATE_TO_APPLICATION_ONBOARDING_FLOW_ERROR",
+  SETUP_PAGE_ERROR: "SETUP_PAGE_ERROR",
+  SETUP_PUBLISHED_PAGE_ERROR: "SETUP_PUBLISHED_PAGE_ERROR",
 };
 
 export const ReduxFormActionTypes = {

app/client/src/ce/pages/Editor/Explorer/ModuleInstanceEntity.tsx

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+export const ExplorerModuleInstanceEntity = (props: any) => {
+  return null;
+};

app/client/src/ce/sagas/JSActionSagas.ts

@@ -1,24 +1,24 @@
 import type {
-  ReduxAction,
   EvaluationReduxAction,
+  ReduxAction,
 } from "@appsmith/constants/ReduxActionConstants";
 import {
-  ReduxActionTypes,
   ReduxActionErrorTypes,
+  ReduxActionTypes,
 } from "@appsmith/constants/ReduxActionConstants";
 import { put, select, call } from "redux-saga/effects";
 import type { FetchActionsPayload } from "actions/pluginActionActions";
-import type { JSCollection, JSAction } from "entities/JSCollection";
+import type { JSAction, JSCollection } from "entities/JSCollection";
 import {
-  createJSCollectionSuccess,
-  deleteJSCollectionSuccess,
-  deleteJSCollectionError,
-  copyJSCollectionSuccess,
   copyJSCollectionError,
-  moveJSCollectionSuccess,
-  moveJSCollectionError,
+  copyJSCollectionSuccess,
+  createJSCollectionSuccess,
+  deleteJSCollectionError,
+  deleteJSCollectionSuccess,
   fetchJSCollectionsForPage,
   fetchJSCollectionsForPageSuccess,
+  moveJSCollectionError,
+  moveJSCollectionSuccess,
 } from "actions/jsActionActions";
 import {
   getJSCollection,
@@ -30,17 +30,17 @@ import type { JSCollectionCreateUpdateResponse } from "@appsmith/api/JSActionAPI
 import JSActionAPI from "@appsmith/api/JSActionAPI";
 import {
   createMessage,
-  JS_ACTION_COPY_SUCCESS,
   ERROR_JS_ACTION_COPY_FAIL,
-  JS_ACTION_DELETE_SUCCESS,
-  JS_ACTION_MOVE_SUCCESS,
   ERROR_JS_ACTION_MOVE_FAIL,
   ERROR_JS_COLLECTION_RENAME_FAIL,
+  JS_ACTION_COPY_SUCCESS,
+  JS_ACTION_DELETE_SUCCESS,
+  JS_ACTION_MOVE_SUCCESS,
 } from "@appsmith/constants/messages";
 import { validateResponse } from "../../sagas/ErrorSagas";
 import type { FetchPageResponse, PageLayout } from "api/PageApi";
 import PageApi from "api/PageApi";
-import { updateCanvasWithDSL } from "sagas/PageSagas";
+import { updateCanvasWithDSL } from "@appsmith/sagas/PageSagas";
 import type { JSCollectionData } from "reducers/entityReducers/jsActionsReducer";
 import type { ApiResponse } from "api/ApiResponses";
 import AppsmithConsole from "utils/AppsmithConsole";

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

@@ -59,17 +59,7 @@ import type {
   CanvasWidgetsReduxState,
   FlattenedWidgetProps,
 } from "reducers/entityReducers/canvasWidgetsReducer";
-import {
-  all,
-  call,
-  debounce,
-  delay,
-  put,
-  select,
-  takeEvery,
-  takeLatest,
-  takeLeading,
-} from "redux-saga/effects";
+import { all, call, delay, put, select } from "redux-saga/effects";
 import history from "utils/history";
 import { isNameValid } from "utils/helpers";
 import { extractCurrentDSL } from "utils/WidgetPropsUtils";
@@ -79,8 +69,11 @@ import {
   getDefaultPageId,
   getEditorConfigs,
   getWidgets,
-} from "./selectors";
-import { IncorrectBindingError, validateResponse } from "./ErrorSagas";
+} from "../../sagas/selectors";
+import {
+  IncorrectBindingError,
+  validateResponse,
+} from "../../sagas/ErrorSagas";
 import type { ApiResponse } from "api/ApiResponses";
 import {
   combinedPreviewModeSelector,
@@ -101,7 +94,7 @@ import {
 } from "actions/pluginActionActions";
 import type { UrlDataState } from "reducers/entityReducers/appReducer";
 import { APP_MODE } from "entities/App";
-import { clearEvalCache } from "./EvaluationsSaga";
+import { clearEvalCache } from "../../sagas/EvaluationsSaga";
 import { getQueryParams } from "utils/URLUtils";
 import PerformanceTracker, {
   PerformanceTransactionName,
@@ -126,9 +119,12 @@ import {
 import WidgetFactory from "WidgetProvider/factory";
 import { toggleShowDeviationDialog } from "actions/onboardingActions";
 import { builderURL } from "@appsmith/RouteBuilder";
-import { failFastApiCalls, waitForWidgetConfigBuild } from "./InitSagas";
-import { resizePublishedMainCanvasToLowestWidget } from "./WidgetOperationUtils";
-import { checkAndLogErrorsIfCyclicDependency } from "./helper";
+import {
+  failFastApiCalls,
+  waitForWidgetConfigBuild,
+} from "../../sagas/InitSagas";
+import { resizePublishedMainCanvasToLowestWidget } from "../../sagas/WidgetOperationUtils";
+import { checkAndLogErrorsIfCyclicDependency } from "../../sagas/helper";
 import { LOCAL_STORAGE_KEYS } from "utils/localStorage";
 import { generateAutoHeightLayoutTreeAction } from "actions/autoHeightActions";
 import { getUsedActionNames } from "selectors/actionSelectors";
@@ -138,7 +134,7 @@ import { SelectionRequestType } from "sagas/WidgetSelectUtils";
 import { toast } from "design-system";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
 import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer";
-import { UserCancelledActionExecutionError } from "./ActionExecution/errorUtils";
+import { UserCancelledActionExecutionError } from "../../sagas/ActionExecution/errorUtils";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
 import { getInstanceId } from "@appsmith/selectors/tenantSelectors";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
@@ -154,9 +150,9 @@ import { LayoutSystemTypes } from "layoutSystems/types";
 import { getLayoutSystemDSLTransformer } from "layoutSystems/common/utils/LayoutSystemDSLTransformer";
 import type { DSLWidget } from "WidgetProvider/constants";
 
-const WidgetTypes = WidgetFactory.widgetTypes;
+export const WidgetTypes = WidgetFactory.widgetTypes;
 
-const getWidgetName = (state: AppState, widgetId: string) =>
+export const getWidgetName = (state: AppState, widgetId: string) =>
   state.entities.canvasWidgets[widgetId];
 
 export function* fetchPageListSaga(
@@ -357,7 +353,7 @@ export function* handleFetchedPage({
   }
 }
 
-const getLastUpdateTime = (pageResponse: FetchPageResponse): number =>
+export const getLastUpdateTime = (pageResponse: FetchPageResponse): number =>
   pageResponse.data.lastUpdatedTime;
 
 export function* fetchPageSaga(
@@ -493,7 +489,7 @@ export function* fetchAllPublishedPagesSaga() {
   }
 }
 
-function* savePageSaga(action: ReduxAction<{ isRetry?: boolean }>) {
+export function* savePageSaga(action: ReduxAction<{ isRetry?: boolean }>) {
   const widgets: CanvasWidgetsReduxState = yield select(getWidgets);
   const editorConfigs:
     | {
@@ -658,7 +654,7 @@ export function* saveAllPagesSaga(pageLayouts: PageLayoutsRequest[]) {
   }
 }
 
-function getLayoutSavePayload(
+export function getLayoutSavePayload(
   widgets: {
     [widgetId: string]: FlattenedWidgetProps;
   },
@@ -1348,7 +1344,7 @@ export function* generateTemplatePageSaga(
   }
 }
 
-function* deleteCanvasCardsStateSaga() {
+export function* deleteCanvasCardsStateSaga() {
   const currentPageId: string = yield select(getCurrentPageId);
   const state = JSON.parse(
     localStorage.getItem(LOCAL_STORAGE_KEYS.CANVAS_CARDS_STATE) ?? "{}",
@@ -1360,7 +1356,7 @@ function* deleteCanvasCardsStateSaga() {
   );
 }
 
-function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
+export function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
   const state = localStorage.getItem(LOCAL_STORAGE_KEYS.CANVAS_CARDS_STATE);
   const stateObject = JSON.parse(state ?? "{}");
   stateObject[action.payload] = true;
@@ -1370,7 +1366,7 @@ function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
   );
 }
 
-function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
+export function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
   const currentPageId: string = yield select(getCurrentPageId);
   const isPreviewMode: boolean = yield select(combinedPreviewModeSelector);
   if (action.payload) {
@@ -1393,41 +1389,48 @@ function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
   }
 }
 
-export default function* pageSagas() {
-  yield all([
-    takeLatest(ReduxActionTypes.FETCH_PAGE_INIT, fetchPageSaga),
-    takeLatest(
-      ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT,
-      fetchPublishedPageSaga,
-    ),
-    takeLatest(ReduxActionTypes.UPDATE_LAYOUT, saveLayoutSaga),
-    takeLeading(ReduxActionTypes.CREATE_PAGE_INIT, createPageSaga),
-    takeLeading(
-      ReduxActionTypes.CREATE_NEW_PAGE_FROM_ENTITIES,
-      createNewPageFromEntity,
-    ),
-    takeLeading(ReduxActionTypes.CLONE_PAGE_INIT, clonePageSaga),
-    takeLatest(ReduxActionTypes.UPDATE_PAGE_INIT, updatePageSaga),
-    takeLatest(ReduxActionTypes.DELETE_PAGE_INIT, deletePageSaga),
-    debounce(500, ReduxActionTypes.SAVE_PAGE_INIT, savePageSaga),
-    takeLatest(ReduxActionTypes.UPDATE_WIDGET_NAME_INIT, updateWidgetNameSaga),
-    takeLatest(
-      ReduxActionTypes.FETCH_ALL_PUBLISHED_PAGES,
-      fetchAllPublishedPagesSaga,
-    ),
-    takeLatest(
-      ReduxActionTypes.GENERATE_TEMPLATE_PAGE_INIT,
-      generateTemplatePageSaga,
-    ),
-    takeLatest(ReduxActionTypes.SET_PAGE_ORDER_INIT, setPageOrderSaga),
-    takeLatest(ReduxActionTypes.POPULATE_PAGEDSLS_INIT, populatePageDSLsSaga),
-    takeEvery(ReduxActionTypes.SET_CANVAS_CARDS_STATE, setCanvasCardsStateSaga),
-    takeEvery(
-      ReduxActionTypes.DELETE_CANVAS_CARDS_STATE,
-      deleteCanvasCardsStateSaga,
-    ),
-    takeEvery(ReduxActionTypes.SET_PREVIEW_MODE_INIT, setPreviewModeInitSaga),
-    takeLatest(ReduxActionTypes.REFRESH_THE_APP, refreshTheApp),
-    takeLatest(ReduxActionTypes.CLEAR_CACHE, clearEvalCache),
-  ]);
+export function* setupPageSaga(action: ReduxAction<FetchPageRequest>) {
+  try {
+    const { id, isFirstLoad } = action.payload;
+
+    yield call(fetchPageSaga, {
+      type: ReduxActionTypes.FETCH_PAGE_INIT,
+      payload: { id, isFirstLoad },
+    });
+
+    yield put({
+      type: ReduxActionTypes.SETUP_PAGE_SUCCESS,
+    });
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.SETUP_PAGE_ERROR,
+      payload: { error },
+    });
+  }
+}
+
+export function* setupPublishedPageSaga(
+  action: ReduxAction<{
+    pageId: string;
+    bustCache: boolean;
+    firstLoad: boolean;
+  }>,
+) {
+  try {
+    const { bustCache, firstLoad, pageId } = action.payload;
+
+    yield call(fetchPublishedPageSaga, {
+      type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT,
+      payload: { bustCache, firstLoad, pageId },
+    });
+
+    yield put({
+      type: ReduxActionTypes.SETUP_PUBLISHED_PAGE_SUCCESS,
+    });
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.SETUP_PUBLISHED_PAGE_ERROR,
+      payload: { error },
+    });
+  }
 }

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

@@ -33,7 +33,7 @@ import layoutConversionSagas from "sagas/layoutConversionSagas";
 import LintingSaga from "sagas/LintingSagas";
 import modalSagas from "sagas/ModalSagas";
 import onboardingSagas from "sagas/OnboardingSagas";
-import pageSagas from "sagas/PageSagas";
+import pageSagas from "@appsmith/sagas/PageSagas";
 import PageVisibilitySaga from "sagas/PageVisibilitySagas";
 import pluginSagas from "sagas/PluginSagas";
 import providersSagas from "sagas/ProvidersSaga";

app/client/src/ee/pages/Editor/Explorer/ModuleInstanceEntity.tsx

@@ -0,0 +1 @@
+export * from "ce/pages/Editor/Explorer/ModuleInstanceEntity";

app/client/src/ee/sagas/PageSagas.tsx

@@ -0,0 +1,76 @@
+export * from "ce/sagas/PageSagas";
+import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import {
+  fetchPageSaga,
+  fetchPublishedPageSaga,
+  saveLayoutSaga,
+  createPageSaga,
+  createNewPageFromEntity,
+  clonePageSaga,
+  updatePageSaga,
+  deletePageSaga,
+  savePageSaga,
+  updateWidgetNameSaga,
+  fetchAllPublishedPagesSaga,
+  generateTemplatePageSaga,
+  setPageOrderSaga,
+  populatePageDSLsSaga,
+  setCanvasCardsStateSaga,
+  deleteCanvasCardsStateSaga,
+  setPreviewModeInitSaga,
+  refreshTheApp,
+  setupPageSaga,
+  setupPublishedPageSaga,
+} from "ce/sagas/PageSagas";
+import {
+  all,
+  debounce,
+  takeEvery,
+  takeLatest,
+  takeLeading,
+} from "redux-saga/effects";
+import { clearEvalCache } from "sagas/EvaluationsSaga";
+
+export default function* pageSagas() {
+  yield all([
+    takeLatest(ReduxActionTypes.FETCH_PAGE_INIT, fetchPageSaga),
+    takeLatest(
+      ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT,
+      fetchPublishedPageSaga,
+    ),
+    takeLatest(ReduxActionTypes.UPDATE_LAYOUT, saveLayoutSaga),
+    takeLeading(ReduxActionTypes.CREATE_PAGE_INIT, createPageSaga),
+    takeLeading(
+      ReduxActionTypes.CREATE_NEW_PAGE_FROM_ENTITIES,
+      createNewPageFromEntity,
+    ),
+    takeLeading(ReduxActionTypes.CLONE_PAGE_INIT, clonePageSaga),
+    takeLatest(ReduxActionTypes.UPDATE_PAGE_INIT, updatePageSaga),
+    takeLatest(ReduxActionTypes.DELETE_PAGE_INIT, deletePageSaga),
+    debounce(500, ReduxActionTypes.SAVE_PAGE_INIT, savePageSaga),
+    takeLatest(ReduxActionTypes.UPDATE_WIDGET_NAME_INIT, updateWidgetNameSaga),
+    takeLatest(
+      ReduxActionTypes.FETCH_ALL_PUBLISHED_PAGES,
+      fetchAllPublishedPagesSaga,
+    ),
+    takeLatest(
+      ReduxActionTypes.GENERATE_TEMPLATE_PAGE_INIT,
+      generateTemplatePageSaga,
+    ),
+    takeLatest(ReduxActionTypes.SET_PAGE_ORDER_INIT, setPageOrderSaga),
+    takeLatest(ReduxActionTypes.POPULATE_PAGEDSLS_INIT, populatePageDSLsSaga),
+    takeEvery(ReduxActionTypes.SET_CANVAS_CARDS_STATE, setCanvasCardsStateSaga),
+    takeEvery(
+      ReduxActionTypes.DELETE_CANVAS_CARDS_STATE,
+      deleteCanvasCardsStateSaga,
+    ),
+    takeEvery(ReduxActionTypes.SET_PREVIEW_MODE_INIT, setPreviewModeInitSaga),
+    takeLatest(ReduxActionTypes.REFRESH_THE_APP, refreshTheApp),
+    takeLatest(ReduxActionTypes.CLEAR_CACHE, clearEvalCache),
+    takeLatest(ReduxActionTypes.SETUP_PAGE_INIT, setupPageSaga),
+    takeLatest(
+      ReduxActionTypes.SETUP_PUBLISHED_PAGE_INIT,
+      setupPublishedPageSaga,
+    ),
+  ]);
+}

app/client/src/entities/Engine/AppEditorEngine.ts

@@ -1,7 +1,3 @@
-import {
-  fetchAppThemesAction,
-  fetchSelectedAppThemeAction,
-} from "actions/appThemingActions";
 import { fetchMockDatasources } from "actions/datasourceActions";
 import {
   fetchGitRemoteStatusInit,
@@ -13,9 +9,8 @@ import {
 } from "actions/gitSyncActions";
 import { restoreRecentEntitiesRequest } from "actions/globalSearchActions";
 import { resetEditorSuccess } from "actions/initActions";
-import { fetchJSCollections } from "actions/jsActionActions";
 import { loadGuidedTourInit } from "actions/onboardingActions";
-import { fetchAllPageEntityCompletion, fetchPage } from "actions/pageActions";
+import { fetchAllPageEntityCompletion, setupPage } from "actions/pageActions";
 import {
   executePageLoadActions,
   fetchActions,
@@ -71,6 +66,11 @@ import {
   getFeatureFlagsForEngine,
   type DependentFeatureFlags,
 } from "@appsmith/selectors/engineSelectors";
+import { fetchJSCollections } from "actions/jsActionActions";
+import {
+  fetchAppThemesAction,
+  fetchSelectedAppThemeAction,
+} from "actions/appThemingActions";
 
 export default class AppEditorEngine extends AppEngine {
   constructor(mode: APP_MODE) {
@@ -115,7 +115,7 @@ export default class AppEditorEngine extends AppEngine {
     applicationId: string,
   ) {
     const initActionsCalls = [
-      fetchPage(toLoadPageId, true),
+      setupPage(toLoadPageId, true),
       fetchActions({ applicationId }, []),
       fetchJSCollections({ applicationId }),
       fetchSelectedAppThemeAction(applicationId),
@@ -127,7 +127,7 @@ export default class AppEditorEngine extends AppEngine {
       ReduxActionTypes.FETCH_ACTIONS_SUCCESS,
       ReduxActionTypes.FETCH_APP_THEMES_SUCCESS,
       ReduxActionTypes.FETCH_SELECTED_APP_THEME_SUCCESS,
-      ReduxActionTypes.FETCH_PAGE_SUCCESS,
+      ReduxActionTypes.SETUP_PAGE_SUCCESS,
     ];
 
     const failureActionEffects = [
@@ -135,7 +135,7 @@ export default class AppEditorEngine extends AppEngine {
       ReduxActionErrorTypes.FETCH_ACTIONS_ERROR,
       ReduxActionErrorTypes.FETCH_APP_THEMES_ERROR,
       ReduxActionErrorTypes.FETCH_SELECTED_APP_THEME_ERROR,
-      ReduxActionErrorTypes.FETCH_PAGE_ERROR,
+      ReduxActionErrorTypes.SETUP_PAGE_ERROR,
     ];
 
     initActionsCalls.push(fetchJSLibraries(applicationId));

app/client/src/entities/Engine/AppViewerEngine.ts

@@ -1,12 +1,6 @@
-import {
-  fetchAppThemesAction,
-  fetchSelectedAppThemeAction,
-} from "actions/appThemingActions";
-import { fetchJSCollectionsForView } from "actions/jsActionActions";
 import {
   fetchAllPageEntityCompletion,
-  fetchPublishedPage,
-  fetchPublishedPageSuccess,
+  setupPublishedPage,
 } from "actions/pageActions";
 import {
   executePageLoadActions,
@@ -34,6 +28,11 @@ import {
   waitForFetchUserSuccess,
 } from "@appsmith/sagas/userSagas";
 import { waitForFetchEnvironments } from "@appsmith/sagas/EnvironmentSagas";
+import { fetchJSCollectionsForView } from "actions/jsActionActions";
+import {
+  fetchAppThemesAction,
+  fetchSelectedAppThemeAction,
+} from "actions/appThemingActions";
 
 export default class AppViewerEngine extends AppEngine {
   constructor(mode: APP_MODE) {
@@ -85,7 +84,7 @@ export default class AppViewerEngine extends AppEngine {
       fetchJSCollectionsForView({ applicationId }),
       fetchSelectedAppThemeAction(applicationId),
       fetchAppThemesAction(applicationId),
-      fetchPublishedPage(toLoadPageId, true, true),
+      setupPublishedPage(toLoadPageId, true, true),
     ];
 
     const successActionEffects = [
@@ -93,14 +92,14 @@ export default class AppViewerEngine extends AppEngine {
       ReduxActionTypes.FETCH_JS_ACTIONS_VIEW_MODE_SUCCESS,
       ReduxActionTypes.FETCH_APP_THEMES_SUCCESS,
       ReduxActionTypes.FETCH_SELECTED_APP_THEME_SUCCESS,
-      fetchPublishedPageSuccess().type,
+      ReduxActionTypes.SETUP_PUBLISHED_PAGE_SUCCESS,
     ];
     const failureActionEffects = [
       ReduxActionErrorTypes.FETCH_ACTIONS_VIEW_MODE_ERROR,
       ReduxActionErrorTypes.FETCH_JS_ACTIONS_VIEW_MODE_ERROR,
       ReduxActionErrorTypes.FETCH_APP_THEMES_ERROR,
       ReduxActionErrorTypes.FETCH_SELECTED_APP_THEME_ERROR,
-      ReduxActionErrorTypes.FETCH_PUBLISHED_PAGE_ERROR,
+      ReduxActionErrorTypes.SETUP_PUBLISHED_PAGE_ERROR,
     ];
 
     initActionsCalls.push(fetchJSLibraries(applicationId));

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

@@ -28,7 +28,7 @@ import BrandingBadge from "./BrandingBadge";
 import { setAppViewHeaderHeight } from "actions/appViewActions";
 import { showPostCompletionMessage } from "selectors/onboardingSelectors";
 import { CANVAS_SELECTOR } from "constants/WidgetConstants";
-import { fetchPublishedPage } from "actions/pageActions";
+import { setupPublishedPage } from "actions/pageActions";
 import usePrevious from "utils/hooks/usePrevious";
 import { getIsBranchUpdated } from "../utils";
 import { APP_MODE } from "entities/App";
@@ -176,7 +176,7 @@ function AppViewer(props: Props) {
        * when redirected to the default page
        */
       if (prevPageId && pageId && isPageIdUpdated) {
-        dispatch(fetchPublishedPage(pageId, true));
+        dispatch(setupPublishedPage(pageId, true));
       }
     }
   }, [branch, pageId, applicationId, pathname]);

app/client/src/pages/Editor/Explorer/Files/Submenu.tsx

@@ -12,10 +12,6 @@ import keyBy from "lodash/keyBy";
 import type { AppState } from "@appsmith/reducers";
 import { EntityIcon, getPluginIcon } from "../ExplorerIcons";
 import { AddButtonWrapper, EntityClassNames } from "../Entity";
-import {
-  ADD_QUERY_JS_TOOLTIP,
-  createMessage,
-} from "@appsmith/constants/messages";
 import { useCloseMenuOnScroll } from "../hooks";
 import { SIDEBAR_ID } from "constants/Explorer";
 import {
@@ -47,6 +43,7 @@ interface SubMenuProps {
   fileOperations: ActionOperation[] | undefined;
   setQuery: (val: string) => void;
   query: string;
+  tooltipText: string;
 }
 
 export default function ExplorerSubMenu({
@@ -58,6 +55,7 @@ export default function ExplorerSubMenu({
   openMenu,
   query,
   setQuery,
+  tooltipText,
 }: SubMenuProps) {
   const [show, setShow] = useState(openMenu);
 
@@ -98,7 +96,7 @@ export default function ExplorerSubMenu({
             content={
               (
                 <>
-                  {createMessage(ADD_QUERY_JS_TOOLTIP)} (
+                  {tooltipText} (
                   {comboHelpText[SEARCH_CATEGORY_ID.ACTION_OPERATION]})
                 </>
               ) as unknown as string

app/client/src/pages/Editor/Explorer/Files/index.tsx

@@ -6,6 +6,7 @@ import {
   ADD_QUERY_JS_BUTTON,
   EMPTY_QUERY_JS_BUTTON_TEXT,
   EMPTY_QUERY_JS_MAIN_TEXT,
+  ADD_QUERY_JS_TOOLTIP,
 } from "@appsmith/constants/messages";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -30,6 +31,7 @@ import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/p
 import { useFilteredFileOperations } from "components/editorComponents/GlobalSearch/GlobalSearchHooks";
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import { DatasourceCreateEntryPoints } from "constants/Datasource";
+import { ExplorerModuleInstanceEntity } from "@appsmith/pages/Editor/Explorer/ModuleInstanceEntity";
 
 const StyledText = styled(Text)`
   color: var(--ads-v2-color-fg-emphasis);
@@ -93,6 +95,17 @@ function Files() {
               {entity.name}
             </StyledText>
           );
+        } else if (type === "moduleInstance") {
+          return (
+            <ExplorerModuleInstanceEntity
+              id={entity.id}
+              isActive={entity.id === activeActionId}
+              key={entity.id}
+              searchKeyword={""}
+              step={2}
+              type={type}
+            />
+          );
         } else if (type === "JS") {
           return (
             <ExplorerJSCollectionEntity
@@ -146,6 +159,7 @@ function Files() {
           openMenu={isMenuOpen}
           query={query}
           setQuery={setQuery}
+          tooltipText={createMessage(ADD_QUERY_JS_TOOLTIP)}
         />
       }
       entityId={pageId + "_actions"}

app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx

@@ -74,8 +74,8 @@ describe("Canvas Hot Keys", () => {
       ...jest.requireActual("sagas/EvaluationsSaga"),
       default: mockGenerator,
     }));
-    jest.mock("sagas/PageSagas", () => ({
-      ...jest.requireActual("sagas/PageSagas"),
+    jest.mock("@appsmith/sagas/PageSagas", () => ({
+      ...jest.requireActual("@appsmith/sagas/PageSagas"),
       default: mockGenerator,
     }));
   });

app/client/src/pages/Editor/IDE/AppsmithIDE.test.tsx

@@ -133,8 +133,8 @@ describe("Drag and Drop widgets into Main container", () => {
       ...jest.requireActual("sagas/EvaluationsSaga"),
       default: mockGenerator,
     }));
-    jest.mock("sagas/PageSagas", () => ({
-      ...jest.requireActual("sagas/PageSagas"),
+    jest.mock("@appsmith/sagas/PageSagas", () => ({
+      ...jest.requireActual("@appsmith/sagas/PageSagas"),
       default: mockGenerator,
     }));
   });
@@ -804,8 +804,8 @@ describe("Drag in a nested container", () => {
       ...jest.requireActual("sagas/EvaluationsSaga"),
       default: mockGenerator,
     }));
-    jest.mock("sagas/PageSagas", () => ({
-      ...jest.requireActual("sagas/PageSagas"),
+    jest.mock("@appsmith/sagas/PageSagas", () => ({
+      ...jest.requireActual("@appsmith/sagas/PageSagas"),
       default: mockGenerator,
     }));
   });

app/client/src/pages/Editor/index.tsx

@@ -26,7 +26,7 @@ import type { Theme } from "constants/DefaultTheme";
 import GlobalHotKeys from "./GlobalHotKeys";
 import GitSyncModal from "pages/Editor/gitSync/GitSyncModal";
 import DisconnectGitModal from "pages/Editor/gitSync/DisconnectGitModal";
-import { fetchPage, updateCurrentPage } from "actions/pageActions";
+import { setupPage, updateCurrentPage } from "actions/pageActions";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import { getSearchQuery } from "utils/helpers";
 import { loading } from "selectors/onboardingSelectors";
@@ -57,7 +57,7 @@ interface EditorProps {
   user?: User;
   lightTheme: Theme;
   resetEditorRequest: () => void;
-  fetchPage: (pageId: string) => void;
+  setupPage: (pageId: string) => void;
   updateCurrentPage: (pageId: string) => void;
   handleBranchChange: (branch: string) => void;
   currentPageId?: string;
@@ -133,7 +133,7 @@ class Editor extends Component<Props> {
        */
       if (prevPageId && pageId && isPageIdUpdated) {
         this.props.updateCurrentPage(pageId);
-        this.props.fetchPage(pageId);
+        this.props.setupPage(pageId);
         urlBuilder.setCurrentPageId(pageId);
       }
     }
@@ -200,7 +200,7 @@ const mapDispatchToProps = (dispatch: any) => {
     initEditor: (payload: InitializeEditorPayload) =>
       dispatch(initEditor(payload)),
     resetEditorRequest: () => dispatch(resetEditorRequest()),
-    fetchPage: (pageId: string) => dispatch(fetchPage(pageId)),
+    setupPage: (pageId: string) => dispatch(setupPage(pageId)),
     updateCurrentPage: (pageId: string) => dispatch(updateCurrentPage(pageId)),
     widgetConfigBuildSuccess: () => dispatch(widgetInitialisationSuccess()),
   };

app/client/src/sagas/ActionExecution/NavigateActionSaga.ts

@@ -7,7 +7,7 @@ import { getAppMode } from "@appsmith/selectors/applicationSelectors";
 import { APP_MODE } from "entities/App";
 import { getQueryStringfromObject } from "@appsmith/entities/URLRedirect/URLAssembly";
 import history from "utils/history";
-import { setDataUrl } from "sagas/PageSagas";
+import { setDataUrl } from "@appsmith/sagas/PageSagas";
 import AppsmithConsole from "utils/AppsmithConsole";
 import { builderURL, viewerURL } from "@appsmith/RouteBuilder";
 import { TriggerFailureError } from "./errorUtils";

app/client/src/sagas/ActionSagas.ts

@@ -23,7 +23,7 @@ import ActionAPI from "api/ActionAPI";
 import type { ApiResponse } from "api/ApiResponses";
 import type { FetchPageResponse } from "api/PageApi";
 import PageApi from "api/PageApi";
-import { updateCanvasWithDSL } from "sagas/PageSagas";
+import { updateCanvasWithDSL } from "@appsmith/sagas/PageSagas";
 import type {
   FetchActionsPayload,
   SetActionPropertyPayload,

app/client/src/sagas/JSPaneSagas.ts

@@ -72,7 +72,7 @@ import { ENTITY_TYPE, PLATFORM_ERROR } from "entities/AppsmithConsole";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
 import type { FetchPageResponse } from "api/PageApi";
 import PageApi from "api/PageApi";
-import { updateCanvasWithDSL } from "sagas/PageSagas";
+import { updateCanvasWithDSL } from "@appsmith/sagas/PageSagas";
 import { set } from "lodash";
 import { updateReplayEntity } from "actions/pageActions";
 import { jsCollectionIdURL } from "@appsmith/RouteBuilder";

app/client/src/sagas/TemplatesSagas.ts

@@ -59,7 +59,7 @@ import { fetchDatasources } from "actions/datasourceActions";
 import { fetchPluginFormConfigs } from "actions/pluginActions";
 import { fetchAllPageEntityCompletion, saveLayout } from "actions/pageActions";
 import { getAllPageIds } from "./selectors";
-import { fetchPageDSLSaga } from "sagas/PageSagas";
+import { fetchPageDSLSaga } from "@appsmith/sagas/PageSagas";
 import { toast } from "design-system";
 import { isAirgapped } from "@appsmith/utils/airgapHelpers";
 import { STARTER_BUILDING_BLOCKS } from "constants/TemplatesConstants";

app/client/src/sagas/layoutConversionSagas.ts

@@ -18,7 +18,7 @@ import {
 } from "./SnapshotSagas";
 import * as Sentry from "@sentry/react";
 import log from "loglevel";
-import { saveAllPagesSaga } from "./PageSagas";
+import { saveAllPagesSaga } from "@appsmith/sagas/PageSagas";
 import { updateApplicationLayout } from "@appsmith/actions/applicationActions";
 import {
   getCurrentApplicationId,

app/client/test/testCommon.ts

@@ -6,7 +6,7 @@ import { APP_MODE } from "entities/App";
 import { useDispatch } from "react-redux";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import { createSelector } from "reselect";
-import { getCanvasWidgetsPayload } from "sagas/PageSagas";
+import { getCanvasWidgetsPayload } from "@appsmith/sagas/PageSagas";
 import { getCanvasWidgets } from "@appsmith/selectors/entitiesSelector";
 import { editorInitializer } from "utils/editor/EditorUtils";
 import { extractCurrentDSL } from "utils/WidgetPropsUtils";