chore: [Plugin Action Editor] Combine Plugin Editor UI state

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

@@ -1,25 +1,22 @@
 import { useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { getApiPaneConfigSelectedTabIndex } from "selectors/apiPaneSelectors";
-import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
-import { setApiPaneConfigSelectedTabIndex } from "actions/apiPaneActions";
+import {
+ 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(getApiPaneConfigSelectedTabIndex);
- 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(setApiPaneConfigSelectedTabIndex(index));
+ dispatch(setPluginActionEditorSelectedTab(value));
  },
  [dispatch],
  );
 
- return [selectedValue, setSelectedIndex];
+ return [selectedValue, setSelectedTab];
 }

app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx

@@ -2,20 +2,16 @@ import { renderHook } from "@testing-library/react-hooks/dom";
 import { useDispatch } from "react-redux";
 import { PluginType } from "entities/Action";
 import { usePluginActionContext } from "PluginActionEditor";
-import { changeApi } from "actions/apiPaneActions";
-import { changeQuery } from "actions/queryPaneActions";
+import { changeApi, changeQuery } from "../../../store";
 import usePrevious from "utils/hooks/usePrevious";
 import { useChangeActionCall } from "./useChangeActionCall";
 
 jest.mock("react-redux", () => ({
  useDispatch: jest.fn(),
 }));
 
-jest.mock("actions/apiPaneActions", () => ({
+jest.mock("../../../store", () => ({
  changeApi: jest.fn(),
-}));
-
-jest.mock("actions/queryPaneActions", () => ({
  changeQuery: jest.fn(),
 }));
 

app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
-import { changeApi } from "actions/apiPaneActions";
-import { changeQuery } from "actions/queryPaneActions";
 import { PluginType } from "entities/Action";
 import { usePluginActionContext } from "PluginActionEditor";
+import { changeApi, changeQuery } from "PluginActionEditor/store";
 import usePrevious from "utils/hooks/usePrevious";
 
 export const useChangeActionCall = () => {

app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx

@@ -3,9 +3,9 @@ import { IDEBottomView, ViewHideBehaviour } from "IDE";
 import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
 import EntityBottomTabs from "components/editorComponents/EntityBottomTabs";
 import { useDispatch, useSelector } from "react-redux";
-import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors";
-import { setApiPaneDebuggerState } from "actions/apiPaneActions";
-import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers";
+import { setPluginActionEditorDebuggerState } from "../../store";
+import { getPluginActionDebuggerState } from "../../store";
+import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import { usePluginActionResponseTabs } from "./hooks";
 
@@ -16,11 +16,11 @@ function PluginActionResponse() {
 
  // TODO combine API and Query Debugger state
  const { open, responseTabHeight, selectedTab } = useSelector(
- getApiPaneDebuggerState,
+ getPluginActionDebuggerState,
  );
 
  const toggleHide = useCallback(
- () => dispatch(setApiPaneDebuggerState({ open: !open })),
+ () => dispatch(setPluginActionEditorDebuggerState({ open: !open })),
  [dispatch, open],
  );
 
@@ -32,14 +32,18 @@ function PluginActionResponse() {
  });
  }
 
- dispatch(setApiPaneDebuggerState({ open: true, selectedTab: tabKey }));
+ dispatch(
+ setPluginActionEditorDebuggerState({ open: true, selectedTab: tabKey }),
+ );
  },
  [dispatch],
  );
 
  const updateResponsePaneHeight = useCallback(
  (height: number) => {
- dispatch(setApiPaneDebuggerState({ responseTabHeight: height }));
+ dispatch(
+ setPluginActionEditorDebuggerState({ responseTabHeight: height }),
+ );
  },
  [dispatch],
  );

app/client/src/PluginActionEditor/constants.ts

@@ -0,0 +1 @@
+export const POST_BODY_FORM_DATA_KEY = "displayFormat";

app/client/src/PluginActionEditor/index.ts

@@ -11,3 +11,5 @@ export type {
  PluginActionNameEditorProps,
 } from "./components/PluginActionNameEditor";
 export { default as PluginActionNameEditor } from "./components/PluginActionNameEditor";
+
+export type { PluginActionEditorState } from "./store/pluginEditorReducer";

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

@@ -0,0 +1,4 @@
+export { default as pluginActionReducer } from "./pluginEditorReducer";
+
+export * from "./pluginActionEditorActions";
+export * from "./pluginActionEditorSelectors";

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

@@ -0,0 +1,57 @@
+import type { PluginEditorDebuggerState } from "./pluginEditorReducer";
+import {
+ type ReduxAction,
+ ReduxActionTypes,
+} from "ee/constants/ReduxActionConstants";
+import type { Action } from "entities/Action";
+
+export const setPluginActionEditorDebuggerState = (
+ payload: Partial<PluginEditorDebuggerState>,
+) => ({
+ type: ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_DEBUGGER_STATE,
+ payload,
+});
+
+export const setPluginActionEditorSelectedTab = (payload: string) => ({
+ type: ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB,
+ payload: {
+ selectedTab: payload,
+ },
+});
+
+export const updatePostBodyContentType = (
+ title: string,
+ apiId: string,
+): ReduxAction<{ title: string; apiId: string }> => ({
+ type: ReduxActionTypes.UPDATE_API_ACTION_BODY_CONTENT_TYPE,
+ payload: { title, apiId },
+});
+
+export const changeApi = (
+ id: string,
+ isSaas: boolean,
+ newApi?: boolean,
+): ReduxAction<{ id: string; isSaas: boolean; newApi?: boolean }> => {
+ return {
+ type: ReduxActionTypes.API_PANE_CHANGE_API,
+ payload: { id, isSaas, newApi },
+ };
+};
+
+export interface ChangeQueryPayload {
+ baseQueryId: string;
+ packageId?: string;
+ applicationId?: string;
+ basePageId?: string;
+ moduleId?: string;
+ workflowId?: string;
+ newQuery?: boolean;
+ action?: Action;
+}
+
+export const changeQuery = (payload: ChangeQueryPayload) => {
+ return {
+ type: ReduxActionTypes.QUERY_PANE_CHANGE,
+ payload,
+ };
+};

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

@@ -0,0 +1,61 @@
+import type { AppState } from "ee/reducers";
+import { createSelector } from "reselect";
+
+import { POST_BODY_FORM_DATA_KEY } from "../constants";
+
+export const getActionEditorSavingMap = (state: AppState) =>
+ state.ui.pluginActionEditor.isSaving;
+
+export const isActionSaving = (id: string) =>
+ createSelector([getActionEditorSavingMap], (savingMap) => {
+ return id in savingMap && savingMap[id];
+ });
+
+const getActionDirtyState = (state: AppState) =>
+ state.ui.pluginActionEditor.isDirty;
+
+export const isActionDirty = (id: string) =>
+ createSelector([getActionDirtyState], (actionDirtyMap) => {
+ return id in actionDirtyMap && actionDirtyMap[id];
+ });
+
+const getActionRunningState = (state: AppState) =>
+ state.ui.pluginActionEditor.isRunning;
+
+export const getActionIsRunning = (id: string) =>
+ createSelector(
+ [getActionRunningState],
+ (isRunningMap) => id in isRunningMap && isRunningMap[id],
+ );
+
+const getActionDeletingState = (state: AppState) =>
+ state.ui.pluginActionEditor.isDeleting;
+
+export const getActionIsDeleting = (id: string) =>
+ createSelector(
+ [getActionDeletingState],
+ (deletingMap) => id in deletingMap && deletingMap[id],
+ );
+
+type GetFormData = (
+ state: AppState,
+ id: string,
+) => { label: string; value: string } | undefined;
+
+export const getPostBodyFormat: GetFormData = (state, id) => {
+ const formData = state.ui.pluginActionEditor.formData;
+
+ if (id in formData) {
+ return formData[id][POST_BODY_FORM_DATA_KEY];
+ }
+
+ return undefined;
+};
+export const getPluginActionConfigSelectedTab = (state: AppState) =>
+ state.ui.pluginActionEditor.selectedConfigTab;
+
+export const getPluginActionDebuggerState = (state: AppState) =>
+ state.ui.pluginActionEditor.debugger;
+
+export const isPluginActionCreating = (state: AppState) =>
+ state.ui.pluginActionEditor.isCreating;