diff --git a/app/client/src/actions/ideActions.ts b/app/client/src/actions/ideActions.ts index fbdf13b00c37..028fa36b18f3 100644 --- a/app/client/src/actions/ideActions.ts +++ b/app/client/src/actions/ideActions.ts @@ -1,5 +1,6 @@ import type { EditorViewMode } from "ee/entities/IDE/constants"; import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; +import type { ParentEntityIDETabs } from "../reducers/uiReducers/ideReducer"; export const setIdeEditorViewMode = (mode: EditorViewMode) => { return { @@ -16,6 +17,13 @@ export const restoreIDEEditorViewMode = () => { }; }; +export const setIDETabs = (payload: ParentEntityIDETabs) => { + return { + type: ReduxActionTypes.SET_IDE_TABS, + payload, + }; +}; + export const setJSTabs = (tabs: string[], parentId: string) => { return { type: ReduxActionTypes.SET_IDE_JS_TABS, diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index a25e2fc70c60..e0ab5b641690 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -457,6 +457,7 @@ const IDEActionTypes = { SETUP_PUBLISHED_PAGE_SUCCESS: "SETUP_PUBLISHED_PAGE_SUCCESS", SET_IDE_EDITOR_VIEW_MODE: "SET_IDE_EDITOR_VIEW_MODE", RESTORE_IDE_EDITOR_VIEW_MODE: "RESTORE_IDE_EDITOR_VIEW_MODE", + SET_IDE_TABS: "SET_IDE_TABS", SET_IDE_JS_TABS: "SET_IDE_JS_TABS", SET_IDE_QUERIES_TABS: "SET_IDE_QUERIES_TABS", SET_SHOW_QUERY_CREATE_NEW_MODAL: "SET_SHOW_QUERY_CREATE_NEW_MODAL", diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts index e7a97ca3d3df..9286194b85b9 100644 --- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts +++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts @@ -1,18 +1,12 @@ import { - setAllEntityCollapsibleStates, - setAllSubEntityCollapsibleStates, setCodeEditorHistory, - setExplorerSwitchIndex, setFocusableInputField, setPanelPropertiesState, setWidgetSelectedPropertyTabIndex, } from "actions/editorContextActions"; import { - getAllEntityCollapsibleStates, getAllPropertySectionState, - getAllSubEntityCollapsibleStates, getCodeEditorHistory, - getExplorerSwitchIndex, getFocusableInputField, getPropertyPanelState, getWidgetSelectedPropertyTabIndex, @@ -24,7 +18,6 @@ import { } from "selectors/ui"; import { setDatasourceViewMode } from "actions/datasourceActions"; -import { updateExplorerWidthAction } from "actions/explorerActions"; import { setJsPaneConfigSelectedTab, setJsPaneDebuggerState, @@ -32,18 +25,12 @@ import { import { setAllPropertySectionState, setFocusablePropertyPaneField, - setPropertyPaneWidthAction, setSelectedPropertyPanels, } from "actions/propertyPaneActions"; import { selectWidgetInitAction } from "actions/widgetSelectionActions"; -import { - DEFAULT_ENTITY_EXPLORER_WIDTH, - DEFAULT_PROPERTY_PANE_WIDTH, -} from "constants/AppConstants"; import { PluginPackageName } from "entities/Plugin"; import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity"; import { SelectionRequestType } from "sagas/WidgetSelectUtils"; -import { getExplorerWidth } from "selectors/explorerSelector"; import { getJSPaneConfigSelectedTab, getJsPaneDebuggerState, @@ -51,7 +38,6 @@ import { } from "selectors/jsPaneSelectors"; import { getFocusablePropertyPaneField, - getPropertyPaneWidth, getSelectedPropertyPanel, } from "selectors/propertyPaneSelectors"; import { getLastQueryTab } from "ee/selectors/appIDESelectors"; @@ -82,17 +68,10 @@ import { } from "PluginActionEditor/store"; import { EDITOR_TABS } from "constants/QueryEditorConstants"; import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants"; +import { getIDETabs } from "selectors/ideSelectors"; +import { setIDETabs } from "actions/ideActions"; export const AppIDEFocusElements: FocusElementsConfigList = { - [FocusEntity.DATASOURCE_LIST]: [ - { - type: FocusElementConfigType.URL, - name: FocusElement.SelectedDatasource, - selector: getSelectedDatasourceId, - setter: setSelectedDatasource, - defaultValue: getFirstDatasourceId, - }, - ], [FocusEntity.DATASOURCE]: [ { type: FocusElementConfigType.Redux, @@ -102,6 +81,15 @@ export const AppIDEFocusElements: FocusElementsConfigList = { defaultValue: { datasourceId: "", viewMode: true }, }, ], + [FocusEntity.DATASOURCE_LIST]: [ + { + type: FocusElementConfigType.URL, + name: FocusElement.SelectedDatasource, + selector: getSelectedDatasourceId, + setter: setSelectedDatasource, + defaultValue: getFirstDatasourceId, + }, + ], [FocusEntity.JS_OBJECT]: [ { type: FocusElementConfigType.Redux, @@ -128,6 +116,15 @@ export const AppIDEFocusElements: FocusElementsConfigList = { }, }, ], + [FocusEntity.JS_OBJECT_LIST]: [ + { + type: FocusElementConfigType.URL, + name: FocusElement.SelectedJSObject, + selector: identifyEntityFromPath, + setter: setSelectedJSObject, + defaultValue: getLastJSTab, + }, + ], [FocusEntity.QUERY]: [ { type: FocusElementConfigType.Redux, @@ -162,7 +159,16 @@ export const AppIDEFocusElements: FocusElementsConfigList = { }, }, ], - [FocusEntity.PROPERTY_PANE]: [ + [FocusEntity.QUERY_LIST]: [ + { + type: FocusElementConfigType.URL, + name: FocusElement.SelectedQuery, + selector: identifyEntityFromPath, + setter: setSelectedQuery, + defaultValue: getLastQueryTab, + }, + ], + [FocusEntity.WIDGET]: [ { type: FocusElementConfigType.Redux, name: FocusElement.PropertyPanelContext, @@ -199,33 +205,6 @@ export const AppIDEFocusElements: FocusElementsConfigList = { defaultValue: "", }, ], - [FocusEntity.DEBUGGER]: [ - { - type: FocusElementConfigType.Redux, - name: FocusElement.DebuggerContext, - selector: getDebuggerContext, - setter: setDebuggerContext, - defaultValue: DefaultDebuggerContext, - }, - ], - [FocusEntity.QUERY_LIST]: [ - { - type: FocusElementConfigType.URL, - name: FocusElement.SelectedQuery, - selector: identifyEntityFromPath, - setter: setSelectedQuery, - defaultValue: getLastQueryTab, - }, - ], - [FocusEntity.JS_OBJECT_LIST]: [ - { - type: FocusElementConfigType.URL, - name: FocusElement.SelectedJSObject, - selector: identifyEntityFromPath, - setter: setSelectedJSObject, - defaultValue: getLastJSTab, - }, - ], [FocusEntity.WIDGET_LIST]: [ { type: FocusElementConfigType.Redux, @@ -240,41 +219,22 @@ export const AppIDEFocusElements: FocusElementsConfigList = { defaultValue: getDefaultSelectedWidgetIds, }, ], - [FocusEntity.EDITOR]: [ + [FocusEntity.DEBUGGER]: [ + { + type: FocusElementConfigType.Redux, + name: FocusElement.DebuggerContext, + selector: getDebuggerContext, + setter: setDebuggerContext, + defaultValue: DefaultDebuggerContext, + }, + ], + [FocusEntity.PAGE]: [ { type: FocusElementConfigType.URL, name: FocusElement.SelectedEntity, selector: getSelectedEntityUrl, setter: setSelectedEntityUrl, }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.EntityExplorerWidth, - selector: getExplorerWidth, - setter: updateExplorerWidthAction, - defaultValue: DEFAULT_ENTITY_EXPLORER_WIDTH, - }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.EntityCollapsibleState, - selector: getAllEntityCollapsibleStates, - setter: setAllEntityCollapsibleStates, - defaultValue: {}, - }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.SubEntityCollapsibleState, - selector: getAllSubEntityCollapsibleStates, - setter: setAllSubEntityCollapsibleStates, - defaultValue: {}, - }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.ExplorerSwitchIndex, - selector: getExplorerSwitchIndex, - setter: setExplorerSwitchIndex, - defaultValue: 0, - }, { type: FocusElementConfigType.Redux, name: FocusElement.CodeEditorHistory, @@ -282,12 +242,14 @@ export const AppIDEFocusElements: FocusElementsConfigList = { setter: setCodeEditorHistory, defaultValue: {}, }, + ], + [FocusEntity.EDITOR]: [ { type: FocusElementConfigType.Redux, - name: FocusElement.PropertyPaneWidth, - selector: getPropertyPaneWidth, - setter: setPropertyPaneWidthAction, - defaultValue: DEFAULT_PROPERTY_PANE_WIDTH, + name: FocusElement.IDETabs, + selector: getIDETabs, + setter: setIDETabs, + defaultValue: {}, }, ], }; diff --git a/app/client/src/ce/navigation/FocusElements/NoIDE.ts b/app/client/src/ce/navigation/FocusElements/NoIDE.ts index 31ab6e4bca0e..c2eb34c3a17a 100644 --- a/app/client/src/ce/navigation/FocusElements/NoIDE.ts +++ b/app/client/src/ce/navigation/FocusElements/NoIDE.ts @@ -13,7 +13,7 @@ export default { [FocusEntity.DATASOURCE]: [], [FocusEntity.JS_OBJECT]: [], [FocusEntity.QUERY]: [], - [FocusEntity.PROPERTY_PANE]: [], + [FocusEntity.WIDGET]: [], [FocusEntity.DEBUGGER]: [], [FocusEntity.QUERY_LIST]: [], [FocusEntity.JS_OBJECT_LIST]: [], diff --git a/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.test.ts b/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.test.ts index 4983766f5b7f..566fcb2e6fc7 100644 --- a/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.test.ts +++ b/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.test.ts @@ -81,7 +81,7 @@ describe("AppIDEFocusStrategy", () => { ]); }); - it("adds editor state entry if the appState or pageId", async () => { + it("adds page state entry if the appState or pageId", async () => { const state = getIDETestState({ branch: "main" }); const appStateChangeResult = await runSaga( { @@ -96,11 +96,11 @@ describe("AppIDEFocusStrategy", () => { expect(appStateChangeResult).toContainEqual({ entityInfo: { appState: "EDITOR", - entity: "EDITOR", - id: `EDITOR.${basePageId1}`, + entity: "PAGE", + id: `PAGE.${basePageId1}`, params: {}, }, - key: `EDITOR_STATE.${basePageId1}#main`, + key: `PAGE.${basePageId1}#main`, }); const pageIdChangeResult = await runSaga( @@ -116,11 +116,11 @@ describe("AppIDEFocusStrategy", () => { expect(pageIdChangeResult).toContainEqual({ entityInfo: { appState: "EDITOR", - entity: "EDITOR", - id: `EDITOR.${basePageId2}`, + entity: "PAGE", + id: `PAGE.${basePageId2}`, params: {}, }, - key: `EDITOR_STATE.${basePageId2}#main`, + key: `PAGE.${basePageId2}#main`, }); }); @@ -177,7 +177,7 @@ describe("AppIDEFocusStrategy", () => { }); }); - it("if user is in editor, it will store the editor state", async () => { + it("if user is in editor, it will store the page state", async () => { const result = await runSaga( { getState: () => state, @@ -190,9 +190,9 @@ describe("AppIDEFocusStrategy", () => { expect(result).toContainEqual({ entityInfo: expect.objectContaining({ appState: "EDITOR", - entity: "EDITOR", + entity: "PAGE", }), - key: `EDITOR_STATE.${basePageId1}#main`, + key: `PAGE.${basePageId1}#main`, }); }); diff --git a/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.ts b/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.ts index fe5440f22f27..ea26fc3bf8d5 100644 --- a/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.ts +++ b/app/client/src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.ts @@ -62,7 +62,7 @@ function shouldSetState( // While switching from selected widget state to canvas, // it should not be restored stored state for canvas return !( - prevFocusEntityInfo.entity === FocusEntity.PROPERTY_PANE && + prevFocusEntityInfo.entity === FocusEntity.WIDGET && (currFocusEntityInfo.entity === FocusEntity.WIDGET_LIST || currFocusEntityInfo.entity === FocusEntity.CANVAS) && isSamePage @@ -86,27 +86,62 @@ const isPageChange = (prevPath: string, currentPath: string) => { ); }; +const getAppId = (focusInfo: FocusEntityInfo) => { + const { appId, applicationSlug, baseApplicationId } = focusInfo.params; + + return applicationSlug || baseApplicationId || appId; +}; + +const isAppChange = ( + prevFocusInfo: FocusEntityInfo, + currentFocusInfo: FocusEntityInfo, +) => { + const prevAppId = getAppId(prevFocusInfo); + const currentAppId = getAppId(currentFocusInfo); + + return prevAppId !== currentAppId; +}; + export const createEditorFocusInfoKey = ( - basePageId: string, + appId: string, branch: string | null = null, ) => { - const r = branch - ? `EDITOR_STATE.${basePageId}#${branch}` - : `EDITOR_STATE.${basePageId}`; - - return r; + return branch ? `EDITOR_STATE.${appId}#${branch}` : `EDITOR_STATE.${appId}`; }; -export const createEditorFocusInfo = (basePageId: string, branch?: string) => ({ - key: createEditorFocusInfoKey(basePageId, branch), +export const createEditorFocusInfo = ( + appId: string, + branch: string | null, +) => ({ + key: createEditorFocusInfoKey(appId, branch), entityInfo: { - id: `EDITOR.${basePageId}`, + id: `EDITOR.${appId}`, appState: EditorState.EDITOR, entity: FocusEntity.EDITOR, params: {}, }, }); +export const createPageFocusInfoKey = ( + basePageId: string, + branch: string | null = null, +) => { + return branch ? `PAGE.${basePageId}#${branch}` : `PAGE.${basePageId}`; +}; + +export const createPageFocusInfo = ( + basePageId: string, + branch: string | null, +) => ({ + key: createPageFocusInfoKey(basePageId, branch), + entityInfo: { + id: `PAGE.${basePageId}`, + appState: EditorState.EDITOR, + entity: FocusEntity.PAGE, + params: {}, + }, +}); + export const AppIDEFocusStrategy: FocusStrategy = { focusElements: AppIDEFocusElements, getEntitiesForSet: function* ( @@ -118,7 +153,7 @@ export const AppIDEFocusStrategy: FocusStrategy = { return []; } - const branch: string | undefined = yield select( + const branch: string | null = yield select( selectGitApplicationCurrentBranch, ); const entities: Array<{ entityInfo: FocusEntityInfo; key: string }> = []; @@ -134,11 +169,19 @@ export const AppIDEFocusStrategy: FocusStrategy = { ) { if (currentEntityInfo.params.basePageId) { entities.push( - createEditorFocusInfo(currentEntityInfo.params.basePageId, branch), + createPageFocusInfo(currentEntityInfo.params.basePageId, branch), ); } } + if (isAppChange(prevEntityInfo, currentEntityInfo)) { + const appId = getAppId(currentEntityInfo); + + if (appId) { + entities.push(createEditorFocusInfo(appId, branch)); + } + } + entities.push({ entityInfo: currentEntityInfo, key: `${currentPath}#${branch}`, @@ -147,7 +190,7 @@ export const AppIDEFocusStrategy: FocusStrategy = { return entities; }, *getEntitiesForStore(path: string, currentPath: string) { - const branch: string | undefined = yield select( + const branch: string | null = yield select( selectGitApplicationCurrentBranch, ); const entities: Array = []; @@ -185,17 +228,19 @@ export const AppIDEFocusStrategy: FocusStrategy = { prevFocusEntityInfo.params.basePageId !== currentFocusEntityInfo.params.basePageId) ) { - entities.push({ - entityInfo: { - entity: FocusEntity.EDITOR, - id: `EDITOR.${prevFocusEntityInfo.params.basePageId}`, - appState: EditorState.EDITOR, - params: prevFocusEntityInfo.params, - }, - key: branch - ? `EDITOR_STATE.${prevFocusEntityInfo.params.basePageId}#${branch}` - : `EDITOR_STATE.${prevFocusEntityInfo.params.basePageId}`, - }); + if (prevFocusEntityInfo.params.basePageId) { + entities.push( + createPageFocusInfo(prevFocusEntityInfo.params.basePageId, branch), + ); + } + } + + if (isAppChange(prevFocusEntityInfo, currentFocusEntityInfo)) { + const appId = getAppId(prevFocusEntityInfo); + + if (appId) { + entities.push(createEditorFocusInfo(appId, branch)); + } } // Do not store focus of parents based on url change diff --git a/app/client/src/ce/sagas/NavigationSagas.ts b/app/client/src/ce/sagas/NavigationSagas.ts index 6a97dd9dafa6..6bf02fbea847 100644 --- a/app/client/src/ce/sagas/NavigationSagas.ts +++ b/app/client/src/ce/sagas/NavigationSagas.ts @@ -36,27 +36,23 @@ export function* handleRouteChange( try { yield fork(clearErrors); yield fork(watchForTrackableUrl, action.payload); - const ideType = getIDETypeByUrl(pathname); - const isAnEditorPath = ideType !== IDE_TYPE.None; - - // handled only on edit mode - if (isAnEditorPath) { - yield fork( - FocusRetention.onRouteChange.bind(FocusRetention), - pathname, - previousPath, - state, - ); - - if (ideType === IDE_TYPE.App) { - yield fork(logNavigationAnalytics, action.payload); - yield fork(appBackgroundHandler); - const entityInfo = identifyEntityFromPath(pathname); - - yield fork(updateRecentEntitySaga, entityInfo); - yield fork(updateIDETabsOnRouteChangeSaga, entityInfo); - yield fork(setSelectedWidgetsSaga, state?.invokedBy); - } + const IDEType = getIDETypeByUrl(pathname); + + yield fork( + FocusRetention.onRouteChange.bind(FocusRetention), + pathname, + previousPath, + state, + ); + + if (IDEType === IDE_TYPE.App) { + yield fork(logNavigationAnalytics, action.payload); + yield fork(appBackgroundHandler); + const entityInfo = identifyEntityFromPath(pathname); + + yield fork(updateRecentEntitySaga, entityInfo); + yield fork(updateIDETabsOnRouteChangeSaga, entityInfo); + yield fork(setSelectedWidgetsSaga, state?.invokedBy); } } catch (e) { log.error("Error in focus change", e); @@ -145,7 +141,7 @@ function* setSelectedWidgetsSaga(invokedBy?: NavigationMethod) { let widgets: string[] = []; let lastSelectedWidget = MAIN_CONTAINER_WIDGET_ID; - if (entityInfo.entity === FocusEntity.PROPERTY_PANE) { + if (entityInfo.entity === FocusEntity.WIDGET) { widgets = entityInfo.id.split(","); if (widgets.length) { diff --git a/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx b/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx index 6d512f184bbf..0d8ee47eaf3f 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx @@ -76,7 +76,7 @@ const useResentEntities = (): Array< ), entityType: type, }; - else if (type === FocusEntity.PROPERTY_PANE) { + else if (type === FocusEntity.WIDGET) { return { ...get(widgetsMap, id, null), entityType: type }; } }) diff --git a/app/client/src/components/editorComponents/GlobalSearch/utils.tsx b/app/client/src/components/editorComponents/GlobalSearch/utils.tsx index f836a03eead7..b4386cdd1af8 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/utils.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/utils.tsx @@ -254,7 +254,7 @@ export const getEntityId = (entity: { case FocusEntity.QUERY: case FocusEntity.JS_OBJECT: return entity.config?.id; - case FocusEntity.PROPERTY_PANE: + case FocusEntity.WIDGET: return entity.widgetId; case FocusEntity.CANVAS: case FocusEntity.EDITOR: diff --git a/app/client/src/navigation/FocusEntity.test.ts b/app/client/src/navigation/FocusEntity.test.ts index 0e70925c0205..ee286285dc6d 100644 --- a/app/client/src/navigation/FocusEntity.test.ts +++ b/app/client/src/navigation/FocusEntity.test.ts @@ -27,7 +27,7 @@ describe("identifyEntityFromPath", () => { { path: `/applications/${baseApplicationId}/pages/${basePageId}/edit/widgets/ryvc8i7oja`, expected: { - entity: FocusEntity.PROPERTY_PANE, + entity: FocusEntity.WIDGET, id: "ryvc8i7oja", appState: EditorState.EDITOR, params: { @@ -146,7 +146,7 @@ describe("identifyEntityFromPath", () => { { path: `/app/app-slug/page1-${basePageId}/edit/widgets/ryvc8i7oja`, expected: { - entity: FocusEntity.PROPERTY_PANE, + entity: FocusEntity.WIDGET, id: "ryvc8i7oja", appState: EditorState.EDITOR, params: { @@ -272,7 +272,7 @@ describe("identifyEntityFromPath", () => { { path: `/app/myCustomSlug-${basePageId}/edit/widgets/ryvc8i7oja`, expected: { - entity: FocusEntity.PROPERTY_PANE, + entity: FocusEntity.WIDGET, id: "ryvc8i7oja", appState: EditorState.EDITOR, params: { diff --git a/app/client/src/navigation/FocusEntity.ts b/app/client/src/navigation/FocusEntity.ts index fcccac7a79a9..2d61ce557e89 100644 --- a/app/client/src/navigation/FocusEntity.ts +++ b/app/client/src/navigation/FocusEntity.ts @@ -18,7 +18,7 @@ export enum FocusEntity { QUERY_LIST = "QUERY_LIST", JS_OBJECT = "JS_OBJECT", JS_OBJECT_LIST = "JS_OBJECT_LIST", - PROPERTY_PANE = "PROPERTY_PANE", + WIDGET = "WIDGET", NONE = "NONE", APP_STATE = "APP_STATE", LIBRARY = "LIBRARY", @@ -30,10 +30,11 @@ export enum FocusEntity { QUERY_MODULE_INSTANCE = "QUERY_MODULE_INSTANCE", JS_MODULE_INSTANCE = "JS_MODULE_INSTANCE", JS_OBJECT_ADD = "JS_OBJECT_ADD", + PAGE = "PAGE", } export const FocusStoreHierarchy: Partial> = { - [FocusEntity.PROPERTY_PANE]: FocusEntity.WIDGET_LIST, + [FocusEntity.WIDGET]: FocusEntity.WIDGET_LIST, [FocusEntity.DATASOURCE]: FocusEntity.DATASOURCE_LIST, [FocusEntity.JS_OBJECT]: FocusEntity.JS_OBJECT_LIST, [FocusEntity.JS_MODULE_INSTANCE]: FocusEntity.JS_OBJECT_LIST, @@ -243,7 +244,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo { if (match.params.widgetIds) { return { - entity: FocusEntity.PROPERTY_PANE, + entity: FocusEntity.WIDGET, id: match.params.widgetIds, appState: EditorState.EDITOR, params: match.params, diff --git a/app/client/src/pages/Editor/IDE/hooks.test.tsx b/app/client/src/pages/Editor/IDE/hooks.test.tsx index 9e5e40d6e98f..880f3bfa08dd 100644 --- a/app/client/src/pages/Editor/IDE/hooks.test.tsx +++ b/app/client/src/pages/Editor/IDE/hooks.test.tsx @@ -3,8 +3,7 @@ import { hookWrapper } from "test/testUtils"; import { getIDETestState } from "test/factories/AppIDEFactoryUtils"; import { PageFactory } from "test/factories/PageFactory"; import { useGetPageFocusUrl } from "./hooks"; -// eslint-disable-next-line @typescript-eslint/no-restricted-imports -import { createEditorFocusInfo } from "../../../ce/navigation/FocusStrategy/AppIDEFocusStrategy"; +import { createPageFocusInfo } from "ee/navigation/FocusStrategy/AppIDEFocusStrategy"; const mockUseGitCurrentBranch = jest.fn(() => null); @@ -16,9 +15,9 @@ describe("useGetPageFocusUrl", () => { const pages = PageFactory.buildList(4); pages[0].isDefault = true; - const page1FocusHistory = createEditorFocusInfo(pages[0].pageId); - const page2FocusHistory = createEditorFocusInfo(pages[1].pageId); - const page3FocusHistory = createEditorFocusInfo(pages[2].pageId); + const page1FocusHistory = createPageFocusInfo(pages[0].pageId, null); + const page2FocusHistory = createPageFocusInfo(pages[1].pageId, null); + const page3FocusHistory = createPageFocusInfo(pages[2].pageId, null); const focusHistory = { [page1FocusHistory.key]: { @@ -92,7 +91,7 @@ describe("useGetPageFocusUrl", () => { const branch = "featureBranch"; mockUseGitCurrentBranch.mockReturnValue(branch); - const page1FocusHistoryWithBranch = createEditorFocusInfo( + const page1FocusHistoryWithBranch = createPageFocusInfo( pages[0].pageId, branch, ); diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts index 6cf34caf2a27..d48defeba1aa 100644 --- a/app/client/src/pages/Editor/IDE/hooks.ts +++ b/app/client/src/pages/Editor/IDE/hooks.ts @@ -20,7 +20,7 @@ import { altFocusWidget, setWidgetSelectionBlock } from "actions/widgetActions"; import { useJSAdd } from "ee/pages/Editor/IDE/EditorPane/JS/hooks"; import { useQueryAdd } from "ee/pages/Editor/IDE/EditorPane/Query/hooks"; import { TabSelectors } from "./EditorTabs/constants"; -import { createEditorFocusInfoKey } from "ee/navigation/FocusStrategy/AppIDEFocusStrategy"; +import { createPageFocusInfoKey } from "ee/navigation/FocusStrategy/AppIDEFocusStrategy"; import { FocusElement } from "navigation/FocusElements"; import { closeJSActionTab } from "actions/jsActionActions"; import { closeQueryActionTab } from "actions/pluginActionActions"; @@ -101,18 +101,21 @@ export const useGetPageFocusUrl = (basePageId: string): string => { const branch = useGitCurrentBranch(); - const editorStateFocusInfo = useSelector((appState) => - getCurrentFocusInfo(appState, createEditorFocusInfoKey(basePageId, branch)), + const pageStateFocusInfo = useSelector((appState) => + getCurrentFocusInfo(appState, createPageFocusInfoKey(basePageId, branch)), ); - useEffect(() => { - if (editorStateFocusInfo) { - const lastSelectedEntity = - editorStateFocusInfo.state[FocusElement.SelectedEntity]; + useEffect( + function handleUpdateOfPageLink() { + if (pageStateFocusInfo) { + const lastSelectedEntity = + pageStateFocusInfo.state[FocusElement.SelectedEntity]; - setFocusPageUrl(builderURL({ basePageId, suffix: lastSelectedEntity })); - } - }, [editorStateFocusInfo, branch]); + setFocusPageUrl(builderURL({ basePageId, suffix: lastSelectedEntity })); + } + }, + [pageStateFocusInfo, branch, basePageId], + ); return focusPageUrl; }; @@ -127,7 +130,7 @@ export function useWidgetSelectionBlockListener() { useEffect(() => { const inUIMode = [ FocusEntity.CANVAS, - FocusEntity.PROPERTY_PANE, + FocusEntity.WIDGET, FocusEntity.WIDGET_LIST, ].includes(currentFocus.entity); diff --git a/app/client/src/pages/Editor/utils.tsx b/app/client/src/pages/Editor/utils.tsx index 3d7a9e92006c..f9b42347b8d8 100644 --- a/app/client/src/pages/Editor/utils.tsx +++ b/app/client/src/pages/Editor/utils.tsx @@ -500,7 +500,7 @@ export function getCurrentEntityInfo(entity: FocusEntity) { segment: EditorEntityTab.UI, segmentMode: EditorEntityTabState.Add, }; - case FocusEntity.PROPERTY_PANE: + case FocusEntity.WIDGET: return { segment: EditorEntityTab.UI, segmentMode: EditorEntityTabState.Edit, diff --git a/app/client/src/reducers/uiReducers/ideReducer.ts b/app/client/src/reducers/uiReducers/ideReducer.ts index d95153394e25..19f1456d0a40 100644 --- a/app/client/src/reducers/uiReducers/ideReducer.ts +++ b/app/client/src/reducers/uiReducers/ideReducer.ts @@ -27,6 +27,12 @@ const ideReducer = createImmerReducer(initialState, { state: IDEState, action: ReduxAction<{ view: EditorViewMode }>, ) => ({ ...state, view: action.payload.view }), + [ReduxActionTypes.SET_IDE_TABS]: ( + state: IDEState, + action: ReduxAction, + ) => { + set(state, "tabs", action.payload); + }, [ReduxActionTypes.SET_IDE_JS_TABS]: ( state: IDEState, action: ReduxAction<{ tabs: string[]; parentId: string }>, @@ -47,8 +53,11 @@ const ideReducer = createImmerReducer(initialState, { action.payload.tabs, ); }, - [ReduxActionTypes.RESET_EDITOR_REQUEST]: () => { - return klona(initialState); + [ReduxActionTypes.RESET_EDITOR_REQUEST]: (state: IDEState): IDEState => { + return klona({ + ...initialState, + tabs: state.tabs, + }); }, [ReduxActionTypes.SET_SHOW_QUERY_CREATE_NEW_MODAL]: ( state: IDEState, diff --git a/app/client/src/sagas/FocusRetentionSaga.ts b/app/client/src/sagas/FocusRetentionSaga.ts index d971bb6a4e7c..19e3b3c45b23 100644 --- a/app/client/src/sagas/FocusRetentionSaga.ts +++ b/app/client/src/sagas/FocusRetentionSaga.ts @@ -93,10 +93,9 @@ class FocusRetention { previousPath: string, state: AppsmithLocationState, ) { - this.updateFocusStrategy(currentPath); - /* STORE THE UI STATE OF PREVIOUS URL */ if (previousPath) { + this.updateFocusStrategy(previousPath); const toStore: Array = yield call( this.focusStrategy.getEntitiesForStore, previousPath, @@ -108,6 +107,7 @@ class FocusRetention { } } + this.updateFocusStrategy(currentPath); /* RESTORE THE UI STATE OF THE NEW URL */ yield call(this.focusStrategy.waitForPathLoad, currentPath, previousPath); const setPaths: Array = yield call( @@ -257,6 +257,7 @@ class FocusRetention { return config.selector(previousURL); } } + private *setState(config: FocusElementConfig, value: unknown): unknown { if (config.type === FocusElementConfigType.Redux) { yield put(config.setter(value)); diff --git a/app/client/src/sagas/TernSaga.ts b/app/client/src/sagas/TernSaga.ts index e7130d7f4015..659edb8ab001 100644 --- a/app/client/src/sagas/TernSaga.ts +++ b/app/client/src/sagas/TernSaga.ts @@ -54,7 +54,7 @@ function* handleSetTernRecentEntities(action: ReduxAction) { recentEntityNames.add(action.config.name); break; } - case FocusEntity.PROPERTY_PANE: { + case FocusEntity.WIDGET: { const widget = get(widgetsMap, id, null); if (!widget) break; diff --git a/app/client/src/sagas/editorContextSagas.ts b/app/client/src/sagas/editorContextSagas.ts index eb3d89a12137..5348498a21f9 100644 --- a/app/client/src/sagas/editorContextSagas.ts +++ b/app/client/src/sagas/editorContextSagas.ts @@ -23,7 +23,7 @@ function* setEditorFieldFocus(action: ReduxAction) { const { cursorPosition, key } = action.payload; const entityInfo = identifyEntityFromPath(window.location.pathname); - const ignoredEntities = [FocusEntity.DATASOURCE, FocusEntity.PROPERTY_PANE]; + const ignoredEntities = [FocusEntity.DATASOURCE, FocusEntity.WIDGET]; if (key) { if (!ignoredEntities.includes(entityInfo.entity)) {