fix for config tabs

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts

@@ -1,27 +1,22 @@
 import { useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
 import {
-  getPluginActionConfigSelectedTabIndex,
+  getPluginActionConfigSelectedTab,
   setPluginActionEditorSelectedTab,
 } from "PluginActionEditor/store";
 
-export function useSelectedFormTab(): [string, (id: string) => void] {
+export function useSelectedFormTab(): [
+  string | undefined,
+  (id: string) => void,
+] {
   const dispatch = useDispatch();
-  // the redux form has been configured with indexes, but the new ads components need strings to work.
-  // these functions convert them back and forth as needed.
-  const selectedIndex = useSelector(getPluginActionConfigSelectedTabIndex) || 0;
-  const selectedValue = Object.values(API_EDITOR_TABS)[selectedIndex];
-  const setSelectedIndex = useCallback(
+  const selectedValue = useSelector(getPluginActionConfigSelectedTab);
+  const setSelectedTab = useCallback(
     (value: string) => {
-      const index = Object.values(API_EDITOR_TABS).indexOf(
-        value as API_EDITOR_TABS,
-      );
-
-      dispatch(setPluginActionEditorSelectedTab(index));
+      dispatch(setPluginActionEditorSelectedTab(value));
     },
     [dispatch],
   );
 
-  return [selectedValue, setSelectedIndex];
+  return [selectedValue, setSelectedTab];
 }

app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts

@@ -12,9 +12,11 @@ export const setPluginActionEditorDebuggerState = (
   payload,
 });
 
-export const setPluginActionEditorSelectedTab = (payload: number | string) => ({
+export const setPluginActionEditorSelectedTab = (payload: string) => ({
   type: ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB,
-  payload,
+  payload: {
+    selectedTab: payload,
+  },
 });
 
 export const updatePostBodyContentType = (

app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts

@@ -40,12 +40,18 @@ export const getActionIsDeleting = (id: string) =>
 type GetFormData = (
   state: AppState,
   id: string,
-) => { label: string; value: string };
+) => { label: string; value: string } | undefined;
 
 export const getPostBodyFormat: GetFormData = (state, id) => {
-  return state.ui.pluginActionEditor.formData[id][POST_BODY_FORM_DATA_KEY];
+  const formData = state.ui.pluginActionEditor.formData;
+
+  if (id in formData) {
+    return formData[id][POST_BODY_FORM_DATA_KEY];
+  }
+
+  return undefined;
 };
-export const getPluginActionConfigSelectedTabIndex = (state: AppState) =>
+export const getPluginActionConfigSelectedTab = (state: AppState) =>
   state.ui.pluginActionEditor.selectedConfigTab;
 
 export const getPluginActionDebuggerState = (state: AppState) =>

app/client/src/PluginActionEditor/store/pluginEditorReducer.ts

@@ -25,7 +25,7 @@ export interface PluginActionEditorState {
   isDeleting: Record<string, boolean>;
   isDirty: Record<string, boolean>;
   runErrorMessage: Record<string, string>;
-  selectedConfigTab?: number;
+  selectedConfigTab?: string;
   formData: Record<string, Record<string, { label: string; value: string }>>;
   debugger: PluginEditorDebuggerState;
 }
@@ -232,7 +232,7 @@ export const handlers = {
   },
   [ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: (
     state: PluginActionEditorState,
-    action: ReduxAction<{ selectedTab: number }>,
+    action: ReduxAction<{ selectedTab: string }>,
   ): PluginActionEditorState => {
     const { selectedTab } = action.payload;
 

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

@@ -75,11 +75,13 @@ import { FocusElement, FocusElementConfigType } from "navigation/FocusElements";
 import type { FocusElementsConfigList } from "sagas/FocusRetentionSaga";
 import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
 import {
-  getPluginActionConfigSelectedTabIndex,
+  getPluginActionConfigSelectedTab,
   getPluginActionDebuggerState,
   setPluginActionEditorDebuggerState,
   setPluginActionEditorSelectedTab,
 } from "PluginActionEditor/store";
+import { EDITOR_TABS } from "constants/QueryEditorConstants";
+import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
 
 export const AppIDEFocusElements: FocusElementsConfigList = {
   [FocusEntity.DATASOURCE_LIST]: [
@@ -136,12 +138,15 @@ export const AppIDEFocusElements: FocusElementsConfigList = {
     {
       type: FocusElementConfigType.Redux,
       name: FocusElement.PluginActionConfigTabs,
-      selector: getPluginActionConfigSelectedTabIndex,
+      selector: getPluginActionConfigSelectedTab,
       setter: setPluginActionEditorSelectedTab,
-      defaultValue: 0,
+      defaultValue: EDITOR_TABS.QUERY,
       subTypes: {
         [PluginPackageName.GRAPHQL]: {
-          defaultValue: 2,
+          defaultValue: API_EDITOR_TABS.BODY,
+        },
+        [PluginPackageName.REST_API]: {
+          defaultValue: API_EDITOR_TABS.HEADERS,
         },
       },
     },

app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts

@@ -11,21 +11,21 @@ export default class ApiPaneNavigation extends ActionPaneNavigation {
     super(entityInfo);
     this.getConfig = this.getConfig.bind(this);
     this.navigate = this.navigate.bind(this);
-    this.getTabIndex = this.getTabIndex.bind(this);
+    this.getTab = this.getTab.bind(this);
   }
 
   *getConfig() {
     let config: IApiPaneNavigationConfig = {};
 
     if (!this.entityInfo.propertyPath) return {};
 
-    const tabIndex: number | undefined = yield call(
-      this.getTabIndex,
+    const tab: string | undefined = yield call(
+      this.getTab,
       this.entityInfo.propertyPath,
     );
 
     config = {
-      tabIndex,
+      tab,
     };
 
     return config;
@@ -37,17 +37,16 @@ export default class ApiPaneNavigation extends ActionPaneNavigation {
 
     if (!this.entityInfo.propertyPath) return;
 
-    if (isNumber(config.tabIndex)) {
-      yield put(setPluginActionEditorSelectedTab(config.tabIndex));
+    if (isNumber(config.tab)) {
+      yield put(setPluginActionEditorSelectedTab(config.tab));
       yield delay(NAVIGATION_DELAY);
     }
 
     yield call(this.scrollToView, this.entityInfo.propertyPath);
   }
 
-  *getTabIndex(propertyPath: string) {
-    let currentTab;
-    let index;
+  *getTab(propertyPath: string) {
+    let currentTab: string | undefined;
     const modifiedProperty = propertyPath.replace(
       "config",
       "actionConfiguration",
@@ -79,10 +78,6 @@ export default class ApiPaneNavigation extends ActionPaneNavigation {
       }
     }
 
-    if (currentTab) {
-      index = Object.values(API_EDITOR_TABS).indexOf(currentTab);
-    }
-
-    return index;
+    return currentTab;
   }
 }

app/client/src/pages/Editor/EntityNavigation/types.ts

@@ -33,7 +33,7 @@ export interface IMatchedSection {
 }
 
 export interface IApiPaneNavigationConfig {
-  tabIndex?: number;
+  tab?: string;
 }
 
 export interface IQueryPaneNavigationConfig {

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -24,8 +24,8 @@ import type { UIComponentTypes } from "api/PluginApi";
 import { EDITOR_TABS } from "constants/QueryEditorConstants";
 import type { FormEvalOutput } from "reducers/evaluationReducers/formEvaluationReducer";
 import {
-  getPluginActionDebuggerState,
-  setPluginActionEditorDebuggerState,
+  getPluginActionConfigSelectedTab,
+  setPluginActionEditorSelectedTab,
 } from "PluginActionEditor/store";
 import type { SourceEntity } from "entities/AppsmithConsole";
 import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
@@ -232,15 +232,11 @@ export function EditorJSONtoForm(props: Props) {
     id: currentActionConfig ? currentActionConfig.id : "",
   };
 
-  const { selectedTab } = useSelector(getPluginActionDebuggerState);
+  const selectedTab = useSelector(getPluginActionConfigSelectedTab);
 
   const setSelectedConfigTab = useCallback(
     (selectedIndex: string) => {
-      dispatch(
-        setPluginActionEditorDebuggerState({
-          selectedTab: selectedIndex,
-        }),
-      );
+      dispatch(setPluginActionEditorSelectedTab(selectedIndex));
     },
     [dispatch],
   );

app/client/src/utils/replayHelpers.tsx

@@ -17,7 +17,6 @@ import {
 } from "ee/constants/messages";
 import { toast } from "@appsmith/ads";
 import { setPluginActionEditorSelectedTab } from "PluginActionEditor/store";
-import { API_EDITOR_TABS } from "../constants/ApiEditorConstants/CommonApiConstants";
 import store from "../store";
 
 /**
@@ -173,11 +172,7 @@ export function switchTab(replayId: string): boolean {
 
   if (element.getAttribute("data-state") == "active") return false;
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const index = Object.values(API_EDITOR_TABS).indexOf(replayId);
-
-  store.dispatch(setPluginActionEditorSelectedTab(index));
+  store.dispatch(setPluginActionEditorSelectedTab(replayId));
 
   return true;
 }