chore: Refactor JS and Query List context switching

app/client/src/ce/navigation/FocusElements/AppIDE.ts

@@ -47,11 +47,11 @@ import {
   DEFAULT_PROPERTY_PANE_WIDTH,
 } from "constants/AppConstants";
 import { PluginPackageName } from "entities/Action";
-import { FocusEntity } from "navigation/FocusEntity";
+import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { SelectionRequestType } from "sagas/WidgetSelectUtils";
 import { getExplorerWidth } from "selectors/explorerSelector";
 import {
-  getFirstJSObjectId,
+  getFirstJSObject,
   getJSPaneConfigSelectedTab,
 } from "selectors/jsPaneSelectors";
 import {
@@ -60,7 +60,7 @@ import {
   getSelectedPropertyPanel,
 } from "selectors/propertyPaneSelectors";
 import {
-  getFirstQueryId,
+  getFirstQuery,
   getQueryPaneConfigSelectedTabIndex,
 } from "selectors/queryPaneSelectors";
 import { getDebuggerContext } from "selectors/debuggerSelectors";
@@ -70,8 +70,6 @@ import { NavigationMethod } from "../../../utils/history";
 import { JSEditorTab } from "reducers/uiReducers/jsPaneReducer";
 import {
   getSelectedDatasourceId,
-  getSelectedJSObjectId,
-  getSelectedQueryId,
   getSelectedSegment,
 } from "@appsmith/navigation/FocusSelectors";
 import {
@@ -210,18 +208,18 @@ export const AppIDEFocusElements: FocusElementsConfigList = {
     {
       type: FocusElementConfigType.URL,
       name: FocusElement.SelectedQuery,
-      selector: getSelectedQueryId,
+      selector: identifyEntityFromPath,
       setter: setSelectedQuery,
-      defaultValue: getFirstQueryId,
+      defaultValue: getFirstQuery,
     },
   ],
   [FocusEntity.JS_OBJECT_LIST]: [
     {
       type: FocusElementConfigType.URL,
       name: FocusElement.SelectedJSObject,
-      selector: getSelectedJSObjectId,
+      selector: identifyEntityFromPath,
       setter: setSelectedJSObject,
-      defaultValue: getFirstJSObjectId,
+      defaultValue: getFirstJSObject,
     },
   ],
   [FocusEntity.WIDGET_LIST]: [

app/client/src/ce/navigation/FocusSelectors.ts

@@ -4,7 +4,6 @@ import {
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
 } from "constants/routes";
-import { PluginType } from "entities/Action";
 import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 
@@ -15,39 +14,6 @@ export const getSelectedDatasourceId = (path: string): string | undefined => {
   }
 };
 
-export type QueryListState =
-  | { id: string; type: PluginType; pluginPackageName?: string }
-  | undefined;
-
-export const getSelectedQueryId = (path: string): QueryListState => {
-  const entityInfo = identifyEntityFromPath(path);
-  if ([FocusEntity.API, FocusEntity.QUERY].includes(entityInfo.entity)) {
-    const { apiId, pluginPackageName, queryId } = entityInfo.params;
-    const id = apiId ? apiId : queryId;
-    if (!id) return undefined;
-    let type: PluginType = PluginType.API;
-    if (pluginPackageName) {
-      type = PluginType.SAAS;
-    } else if (queryId) {
-      type = PluginType.DB;
-    } else if (id === "curl") {
-      type = PluginType.API;
-    }
-    return {
-      type,
-      id,
-      pluginPackageName,
-    };
-  }
-};
-
-export const getSelectedJSObjectId = (path: string): string | undefined => {
-  const entityInfo = identifyEntityFromPath(path);
-  if (entityInfo.entity === FocusEntity.JS_OBJECT) {
-    return entityInfo.id;
-  }
-};
-
 export const getSelectedSegment = (path: string): string | undefined => {
   const match = matchPath<{ entity: string }>(path, {
     path: [

app/client/src/ce/navigation/FocusSetters.ts

@@ -1,19 +1,18 @@
 import history, { NavigationMethod } from "utils/history";
 import {
-  apiEditorIdURL,
   builderURL,
   curlImportPageURL,
   datasourcesEditorIdURL,
   jsCollectionIdURL,
   jsCollectionListURL,
-  queryEditorIdURL,
   queryListURL,
-  saasEditorApiIdURL,
   widgetListURL,
 } from "@appsmith/RouteBuilder";
 import { PluginType } from "entities/Action";
-import type { QueryListState } from "./FocusSelectors";
 import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
+import type { FocusEntityInfo } from "navigation/FocusEntity";
+import { FocusEntity } from "navigation/FocusEntity";
+import { getQueryEntityItemUrl } from "../pages/Editor/IDE/EditorPane/Query/utils";
 
 export function setSelectedDatasource(id: string | undefined) {
   if (id) {
@@ -28,57 +27,37 @@ export function setSelectedDatasource(id: string | undefined) {
   }
 }
 
-export function setSelectedQuery(state: QueryListState) {
-  if (state) {
-    switch (state.type) {
-      case PluginType.SAAS:
-        if (state.pluginPackageName) {
-          history.replace(
-            saasEditorApiIdURL({
-              apiId: state.id,
-              pluginPackageName: state.pluginPackageName,
-            }),
-            {
-              invokedBy: NavigationMethod.ContextSwitching,
-            },
-          );
-        }
-        break;
-      case PluginType.DB:
-        history.replace(
-          queryEditorIdURL({
-            queryId: state.id,
-          }),
-          {
-            invokedBy: NavigationMethod.ContextSwitching,
-          },
-        );
-        break;
-      case PluginType.API:
-        if (state.id === "curl") {
-          history.replace(curlImportPageURL({}));
-        } else {
-          history.replace(
-            apiEditorIdURL({
-              apiId: state.id,
-            }),
-            {
-              invokedBy: NavigationMethod.ContextSwitching,
-            },
-          );
-        }
-        break;
-      default:
-        break;
+export function setSelectedQuery(entityInfo: FocusEntityInfo) {
+  if (entityInfo && entityInfo.params.pageId) {
+    if ([FocusEntity.API, FocusEntity.QUERY].includes(entityInfo.entity)) {
+      const { apiId, pluginPackageName, queryId } = entityInfo.params;
+      const key = apiId ? apiId : queryId;
+      if (!key) return undefined;
+      let type: PluginType = PluginType.API;
+      if (pluginPackageName) {
+        type = PluginType.SAAS;
+      } else if (queryId) {
+        type = PluginType.DB;
+      } else if (key === "curl") {
+        history.replace(curlImportPageURL({}), {
+          invokedBy: NavigationMethod.ContextSwitching,
+        });
+      }
+
+      const url = getQueryEntityItemUrl(
+        { type, key, title: key },
+        entityInfo.params.pageId,
+      );
+      history.replace(url, { invokedBy: NavigationMethod.ContextSwitching });
     }
   }
 }
 
-export function setSelectedJSObject(id: string | undefined) {
-  if (id) {
+export function setSelectedJSObject(focusInfo: FocusEntityInfo) {
+  if (focusInfo.entity === FocusEntity.JS_OBJECT) {
     history.replace(
       jsCollectionIdURL({
-        collectionId: id,
+        collectionId: focusInfo.id,
       }),
     );
   }

app/client/src/ce/pages/Editor/IDE/EditorPane/JS/utils.ts

@@ -0,0 +1,12 @@
+import type { EntityItem } from "@appsmith/entities/IDE/constants";
+import { jsCollectionIdURL } from "@appsmith/RouteBuilder";
+
+export const getJSEntityItemUrl = (
+  item: EntityItem,
+  pageId: string,
+): string => {
+  return jsCollectionIdURL({
+    collectionId: item.key,
+    pageId,
+  });
+};

app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts

@@ -211,7 +211,10 @@ function useRoutes(path: string): RouteReturnType[] {
       key: "JSEditor File",
       component: JSEditor,
       exact: true,
-      path: `${path}${JS_COLLECTION_ID_PATH}`,
+      path: [
+        `${path}${JS_COLLECTION_ID_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}${ADD_PATH}`,
+      ],
     },
     {
       key: "CurlImportEditor",

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

@@ -24,7 +24,6 @@ import {
   moveJSCollectionSuccess,
 } from "actions/jsActionActions";
 import {
-  getCurrentJSCollections,
   getJSCollection,
   getPageNameByPageId,
 } from "@appsmith/selectors/entitiesSelector";
@@ -41,7 +40,7 @@ import {
   JS_ACTION_DELETE_SUCCESS,
   JS_ACTION_MOVE_SUCCESS,
 } from "@appsmith/constants/messages";
-import { validateResponse } from "../../sagas/ErrorSagas";
+import { validateResponse } from "sagas/ErrorSagas";
 import type {
   FetchPageRequest,
   FetchPageResponse,
@@ -56,28 +55,22 @@ import { ENTITY_TYPE } from "entities/AppsmithConsole";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
 import type { CreateJSCollectionRequest } from "@appsmith/api/JSActionAPI";
 import * as log from "loglevel";
-import {
-  builderURL,
-  jsCollectionAddURL,
-  jsCollectionIdURL,
-} from "@appsmith/RouteBuilder";
+import { builderURL, jsCollectionIdURL } from "@appsmith/RouteBuilder";
 import type { EventLocation } from "@appsmith/utils/analyticsUtilTypes";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import {
   checkAndLogErrorsIfCyclicDependency,
   getFromServerWhenNoPrefetchedResult,
-} from "../../sagas/helper";
+} from "sagas/helper";
 import { toast } from "design-system";
 import { updateAndSaveLayout } from "actions/pageActions";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import { getIsServerDSLMigrationsEnabled } from "selectors/pageSelectors";
-import { getWidgets } from "../../sagas/selectors";
-import { removeFocusHistoryRequest } from "../../actions/focusHistoryActions";
-import { selectFeatureFlagCheck } from "../selectors/featureFlagsSelectors";
+import { getWidgets } from "sagas/selectors";
+import { removeFocusHistoryRequest } from "actions/focusHistoryActions";
+import { selectFeatureFlagCheck } from "@appsmith/selectors/featureFlagsSelectors";
 import { FEATURE_FLAG } from "../entities/FeatureFlag";
-import { identifyEntityFromPath } from "../../navigation/FocusEntity";
-import { findIndex, sortBy } from "lodash";
-import type { JSCollectionDataState } from "@appsmith/reducers/entityReducers/jsActionsReducer";
+import { handleJSEntityRedirect } from "sagas/IDESaga";
 
 export function* fetchJSCollectionsSaga(
   action: EvaluationReduxAction<FetchActionsPayload>,
@@ -284,47 +277,6 @@ export const getIndexToBeRedirected = (
   return redirectIndex;
 };
 
-/**
- * Adds custom redirect logic to redirect after an item is deleted
- * 1. Do not navigate if the deleted item is not selected
- * 2. If it is the only item, navigate to a list url
- * 3. If there are other items, navigate to an item close to the current one
- * **/
-function* handleDeleteRedirect(deletedJSObjectId: string) {
-  const allJsObjects: JSCollectionDataState = yield select(
-    getCurrentJSCollections,
-  );
-  const sortedJSObjects = sortBy([...allJsObjects], "name");
-  const currentSelectedEntity = identifyEntityFromPath(
-    window.location.pathname,
-  );
-  // Do not do any redirect if the deleted item is not currently selected
-  const isSelectedJSDeleted = currentSelectedEntity.id === deletedJSObjectId;
-  if (!isSelectedJSDeleted) {
-    return;
-  }
-  const remainingJsObjects = allJsObjects.filter(
-    (js) => js.config.id !== deletedJSObjectId,
-  );
-  // If this was the only item, we navigate to the list url
-  if (remainingJsObjects.length === 0) {
-    history.push(jsCollectionAddURL({}));
-    return;
-  }
-  const deletedIndex = findIndex(
-    sortedJSObjects,
-    (js) => js.config.id === deletedJSObjectId,
-  );
-  // Go to the next item in case it is the first item in the list,
-  // or go to an item above
-  const toRedirect: JSCollectionData =
-    deletedIndex === 0 ? sortedJSObjects[1] : sortedJSObjects[deletedIndex - 1];
-
-  if (toRedirect) {
-    history.push(jsCollectionIdURL({ collectionId: toRedirect.config.id }));
-  }
-}
-
 export function* deleteJSCollectionSaga(
   actionPayload: ReduxAction<{ id: string; name: string }>,
 ) {
@@ -345,7 +297,7 @@ export function* deleteJSCollectionSaga(
         FEATURE_FLAG.release_show_new_sidebar_pages_pane_enabled,
       );
       if (isPagePaneSegmentsEnabled) {
-        yield call(handleDeleteRedirect, id);
+        yield call(handleJSEntityRedirect, id);
       } else if (pageId) {
         history.push(builderURL({ pageId }));
       }

app/client/src/ce/selectors/appIDESelectors.ts

@@ -12,7 +12,7 @@ export type EditorSegmentList = Array<{
   items: EntityItem[];
 }>;
 
-const groupAndSortEntitySegmentList = (
+export const groupAndSortEntitySegmentList = (
   items: EntityItem[],
 ): EditorSegmentList => {
   const groups = groupBy(items, (item) => {

app/client/src/ee/pages/Editor/IDE/EditorPane/JS/utils.ts

@@ -0,0 +1 @@
+export * from "ce/pages/Editor/IDE/EditorPane/JS/utils";

app/client/src/navigation/FocusEntity.ts

@@ -39,7 +39,7 @@ export const FocusStoreHierarchy: Partial<Record<FocusEntity, FocusEntity>> = {
   [FocusEntity.PROPERTY_PANE]: FocusEntity.WIDGET_LIST,
   [FocusEntity.DATASOURCE]: FocusEntity.DATASOURCE_LIST,
   [FocusEntity.JS_OBJECT]: FocusEntity.JS_OBJECT_LIST,
-  [FocusEntity.JS_MODULE_INSTANCE]: FocusEntity.JS_MODULE_INSTANCE,
+  [FocusEntity.JS_MODULE_INSTANCE]: FocusEntity.JS_OBJECT_LIST,
   [FocusEntity.QUERY]: FocusEntity.QUERY_LIST,
   [FocusEntity.QUERY_MODULE_INSTANCE]: FocusEntity.QUERY_LIST,
 };