chore: Add IDE Tabs state in Focus Retention (#38799)

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,

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",

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,34 +18,26 @@ import {
 } from "selectors/ui";
 
 import { setDatasourceViewMode } from "actions/datasourceActions";
-import { updateExplorerWidthAction } from "actions/explorerActions";
 import {
   setJsPaneConfigSelectedTab,
   setJsPaneDebuggerState,
 } from "actions/jsPaneActions";
 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,
   getLastJSTab,
 } 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,54 +219,37 @@ 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,
       selector: getCodeEditorHistory,
       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: {},
     },
   ],
 };

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]: [],

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`,
       });
     });