From 2e624d088c6caa843461aa20c9d6fd5a93cc9d25 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 1 Oct 2024 15:42:28 +0530 Subject: [PATCH 1/8] chore: [Plugin Action Form] Common UI State --- app/client/src/PluginActionEditor/index.ts | 3 + .../store/pluginEditorReducer.ts | 263 ++++++++++++++++++ .../src/ce/constants/ReduxActionConstants.tsx | 4 + app/client/src/ce/reducers/index.tsx | 2 + .../src/ce/reducers/uiReducers/index.tsx | 2 + 5 files changed, 274 insertions(+) create mode 100644 app/client/src/PluginActionEditor/store/pluginEditorReducer.ts diff --git a/app/client/src/PluginActionEditor/index.ts b/app/client/src/PluginActionEditor/index.ts index e8083e1b0f0..713890a9c95 100644 --- a/app/client/src/PluginActionEditor/index.ts +++ b/app/client/src/PluginActionEditor/index.ts @@ -11,3 +11,6 @@ export type { PluginActionNameEditorProps, } from "./components/PluginActionNameEditor"; export { default as PluginActionNameEditor } from "./components/PluginActionNameEditor"; + +export type { PluginActionEditorState } from "./store/pluginEditorReducer"; +export { default as PluginActionEditorReducer } from "./store/pluginEditorReducer"; diff --git a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts new file mode 100644 index 00000000000..0518ffd50a9 --- /dev/null +++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts @@ -0,0 +1,263 @@ +import { createReducer } from "utils/ReducerUtils"; +import type { ReduxAction } from "ee/constants/ReduxActionConstants"; +import { + ReduxActionTypes, + ReduxActionErrorTypes, +} from "ee/constants/ReduxActionConstants"; +import type { Action } from "entities/Action"; +import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import type { ActionResponse } from "api/ActionAPI"; +import { omit } from "lodash"; +import { objectKeys } from "@appsmith/utils"; +import type { UpdateActionPropertyActionPayload } from "actions/pluginActionActions"; + +export interface PluginEditorDebuggerState { + open: boolean; + responseTabHeight: number; + selectedTab?: string; +} + +export interface PluginActionEditorState { + isCreating: boolean; + isRunning: Record; + isSaving: Record; + isDeleting: Record; + isDirty: Record; + runErrorMessage: Record; + selectedConfigTab?: string; + formData: Record; + debugger: PluginEditorDebuggerState; +} + +export const initialState: PluginActionEditorState = { + isCreating: false, + isRunning: {}, + isSaving: {}, + isDeleting: {}, + isDirty: {}, + runErrorMessage: {}, + formData: {}, + debugger: { + open: false, + responseTabHeight: ActionExecutionResizerHeight, + }, +}; + +export const handlers = { + [ReduxActionTypes.CREATE_ACTION_INIT]: (state: PluginActionEditorState) => { + return { + ...state, + isCreating: true, + }; + }, + [ReduxActionTypes.CREATE_ACTION_SUCCESS]: ( + state: PluginActionEditorState, + ) => { + return { + ...state, + isCreating: false, + }; + }, + [ReduxActionErrorTypes.CREATE_ACTION_ERROR]: ( + state: PluginActionEditorState, + ) => { + return { + ...state, + isCreating: false, + }; + }, + [ReduxActionTypes.UPDATE_ACTION_PROPERTY]: ( + state: PluginActionEditorState, + action: ReduxAction, + ) => ({ + ...state, + isDirty: { + ...state.isDirty, + [action.payload.id]: true, + }, + }), + [ReduxActionTypes.UPDATE_ACTION_INIT]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ) => ({ + ...state, + isSaving: { + ...state.isSaving, + [action.payload.id]: true, + }, + }), + [ReduxActionTypes.UPDATE_ACTION_SUCCESS]: ( + state: PluginActionEditorState, + action: ReduxAction<{ data: Action }>, + ) => ({ + ...state, + isSaving: { + ...state.isSaving, + [action.payload.data.id]: false, + }, + isDirty: { + ...state.isDirty, + [action.payload.data.id]: false, + }, + }), + [ReduxActionErrorTypes.UPDATE_ACTION_ERROR]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ) => ({ + ...state, + isSaving: { + ...state.isSaving, + [action.payload.id]: false, + }, + }), + [ReduxActionTypes.DELETE_ACTION_INIT]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ) => ({ + ...state, + isDeleting: { + ...state.isDeleting, + [action.payload.id]: true, + }, + }), + [ReduxActionTypes.DELETE_ACTION_SUCCESS]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ) => ({ + ...state, + isDeleting: { + ...state.isDeleting, + [action.payload.id]: false, + }, + }), + [ReduxActionErrorTypes.DELETE_ACTION_ERROR]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ) => ({ + ...state, + isDeleting: { + ...state.isDeleting, + [action.payload.id]: false, + }, + }), + [ReduxActionTypes.RUN_ACTION_REQUEST]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ): PluginActionEditorState => { + return { + ...state, + isRunning: { + ...state.isRunning, + [action.payload.id]: true, + }, + debugger: { + ...state.debugger, + selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, + open: true, + }, + }; + }, + + [ReduxActionTypes.RUN_ACTION_CANCELLED]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string }>, + ) => { + return { + ...state, + isRunning: { + ...state.isRunning, + [action.payload.id]: false, + }, + }; + }, + + [ReduxActionTypes.RUN_ACTION_SUCCESS]: ( + state: PluginActionEditorState, + action: ReduxAction<{ [id: string]: ActionResponse }>, + ) => { + const actionId = objectKeys(action.payload)[0]; + + return { + ...state, + isRunning: { + ...state.isRunning, + [actionId]: false, + }, + runErrorMessage: omit(state.runErrorMessage, [actionId]), + }; + }, + [ReduxActionErrorTypes.RUN_ACTION_ERROR]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string; error: Error }>, + ) => { + const { error, id } = action.payload; + + return { + ...state, + isRunning: { + ...state.isRunning, + [id]: false, + }, + runErrorMessage: { + ...state.runErrorMessage, + [id]: error.message, + }, + }; + }, + /** + * This redux action sets the extra form data field for an action. This is used to select the + * appropriate body type tab selection in the Rest API plugin based on the content-type. + * This redux action can be extended to other functionalities as well in the future. + * + * @param {PluginActionEditorState} state + * @param {ReduxAction} action + * @returns {PluginActionEditorState} + */ + [ReduxActionTypes.SET_EXTRA_FORMDATA]: ( + state: PluginActionEditorState, + action: ReduxAction<{ id: string; values: Record }>, + ): PluginActionEditorState => { + const { id, values } = action.payload; + + return { + ...state, + formData: { + [id]: values, + }, + }; + }, + [ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: ( + state: PluginActionEditorState, + action: ReduxAction<{ selectedTab: string }>, + ): PluginActionEditorState => { + const { selectedTab } = action.payload; + + return { + ...state, + selectedConfigTab: selectedTab, + }; + }, + [ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_DEBUGGER_STATE]: ( + state: PluginActionEditorState, + action: ReduxAction>, + ) => { + return { + ...state, + debugger: { + ...state.debugger, + ...action.payload, + }, + }; + }, + [ReduxActionTypes.RESET_EDITOR_REQUEST]: (state: PluginActionEditorState) => { + return { + ...state, + isSaving: {}, + }; + }, +}; + +const pluginActionEditorReducer = createReducer(initialState, handlers); + +export default pluginActionEditorReducer; diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index 1e94ce4336c..5d9a68d41c5 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -452,6 +452,8 @@ const IDEActionTypes = { REMOVE_FOCUS_HISTORY: "REMOVE_FOCUS_HISTORY", SET_FOCUSABLE_PROPERTY_FIELD: "SET_FOCUSABLE_PROPERTY_FIELD", ROUTE_CHANGED: "ROUTE_CHANGED", + SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB: + "SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB", SET_API_PANE_CONFIG_SELECTED_TAB: "SET_API_PANE_CONFIG_SELECTED_TAB", SET_EDITOR_FIELD_FOCUS: "SET_EDITOR_FIELD_FOCUS", SET_FOCUSABLE_INPUT_FIELD: "SET_FOCUSABLE_INPUT_FIELD", @@ -711,6 +713,8 @@ const IDEDebuggerActionTypes = { SET_RESPONSE_PANE_SCROLL_POSITION: "SET_RESPONSE_PANE_SCROLL_POSITION", TOGGLE_EXPAND_ERROR_LOG_ITEM: "TOGGLE_EXPAND_ERROR_LOG_ITEM", NAVIGATE_TO_ENTITY: "NAVIGATE_TO_ENTITY", + SET_PLUGIN_ACTION_EDITOR_DEBUGGER_STATE: + "SET_PLUGIN_ACTION_EDITOR_DEBUGGER_STATE", SET_QUERY_PANE_DEBUGGER_STATE: "SET_QUERY_PANE_DEBUGGER_STATE", SET_API_PANE_DEBUGGER_STATE: "SET_API_PANE_DEBUGGER_STATE", SET_JS_PANE_DEBUGGER_STATE: "SET_JS_PANE_DEBUGGER_STATE", diff --git a/app/client/src/ce/reducers/index.tsx b/app/client/src/ce/reducers/index.tsx index a371011e661..3b0fd4cd0c3 100644 --- a/app/client/src/ce/reducers/index.tsx +++ b/app/client/src/ce/reducers/index.tsx @@ -73,6 +73,7 @@ import type { MetaWidgetsReduxState } from "reducers/entityReducers/metaWidgetsR import type { layoutConversionReduxState } from "reducers/uiReducers/layoutConversionReducer"; import type { OneClickBindingState } from "reducers/uiReducers/oneClickBindingReducer"; import type { IDEState } from "reducers/uiReducers/ideReducer"; +import type { PluginActionEditorState } from "PluginActionEditor"; /* Reducers which are integrated into the core system when registering a pluggable module or done so by a module that is designed to be eventually pluggable */ @@ -146,6 +147,7 @@ export interface AppState { oneClickBinding: OneClickBindingState; activeField: ActiveField; ide: IDEState; + pluginActionEditor: PluginActionEditorState; }; entities: { canvasWidgetsStructure: CanvasWidgetStructure; diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index 0a746521b70..066da0e791d 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -50,6 +50,7 @@ import activeFieldReducer from "reducers/uiReducers/activeFieldEditorReducer"; import selectedWorkspaceReducer from "ee/reducers/uiReducers/selectedWorkspaceReducer"; import ideReducer from "../../../reducers/uiReducers/ideReducer"; import consolidatedPageLoadReducer from "reducers/uiReducers/consolidatedPageLoadReducer"; +import { PluginActionEditorReducer } from "PluginActionEditor"; export const uiReducerObject = { analytics: analyticsReducer, @@ -104,4 +105,5 @@ export const uiReducerObject = { activeField: activeFieldReducer, ide: ideReducer, consolidatedPageLoad: consolidatedPageLoadReducer, + pluginActionEditor: PluginActionEditorReducer, }; From 966b8c51ff10a2e8e0d37c9f158538805a4b7431 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 2 Oct 2024 11:59:52 +0530 Subject: [PATCH 2/8] transfer from apiPaneReducer --- .../hooks/useSelectedFormTab.ts | 10 +- .../hooks/useChangeActionCall.test.tsx | 3 +- .../hooks/useChangeActionCall.ts | 3 +- .../PluginActionResponse.tsx | 16 +- .../src/PluginActionEditor/constants.ts | 1 + app/client/src/PluginActionEditor/index.ts | 3 + .../store/pluginActionEditorActions.ts | 36 +++ .../store/pluginActionEditorSelectors.ts | 55 ++++ .../store/pluginEditorReducer.ts | 11 +- app/client/src/actions/apiPaneActions.ts | 34 --- .../hooks/usePluginActionResponseTabs.tsx | 4 +- .../src/ce/navigation/FocusElements/AppIDE.ts | 54 +--- app/client/src/ce/reducers/index.tsx | 2 - .../ce/reducers/uiReducers/apiPaneReducer.ts | 256 ------------------ .../src/ce/reducers/uiReducers/index.tsx | 4 +- .../src/ce/selectors/entitiesSelector.ts | 22 -- .../editorComponents/ApiResponseView.tsx | 18 +- .../Debugger/hooks/useDebuggerTriggerClick.ts | 27 +- .../ee/reducers/uiReducers/apiPaneReducer.tsx | 3 - app/client/src/navigation/FocusElements.ts | 7 +- .../src/pages/Editor/APIEditor/Editor.tsx | 17 +- .../pages/Editor/APIEditor/PostBodyData.tsx | 13 +- .../ActionPane/ApiPaneNavigation.ts | 4 +- .../ActionPane/QueryPaneNavigation.ts | 2 +- .../CreateNewDatasourceTab.tsx | 3 +- .../src/pages/Editor/QueryEditor/Editor.tsx | 15 +- .../sagas/ActionExecution/PluginActionSaga.ts | 48 ++-- app/client/src/sagas/ApiPaneSagas.ts | 9 +- app/client/src/selectors/apiPaneSelectors.ts | 29 -- app/client/src/selectors/editorSelectors.tsx | 15 +- app/client/src/utils/replayHelpers.tsx | 4 +- 31 files changed, 230 insertions(+), 498 deletions(-) create mode 100644 app/client/src/PluginActionEditor/constants.ts create mode 100644 app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts create mode 100644 app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts delete mode 100644 app/client/src/ce/reducers/uiReducers/apiPaneReducer.ts delete mode 100644 app/client/src/ee/reducers/uiReducers/apiPaneReducer.tsx delete mode 100644 app/client/src/selectors/apiPaneSelectors.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts index b7421a6dfc5..ae47f45220b 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts @@ -1,14 +1,16 @@ 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 { + getPluginActionConfigSelectedTabIndex, + setPluginActionEditorSelectedTab, +} from "PluginActionEditor"; export function useSelectedFormTab(): [string, (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 selectedIndex = useSelector(getPluginActionConfigSelectedTabIndex) || 0; const selectedValue = Object.values(API_EDITOR_TABS)[selectedIndex]; const setSelectedIndex = useCallback( (value: string) => { @@ -16,7 +18,7 @@ export function useSelectedFormTab(): [string, (id: string) => void] { value as API_EDITOR_TABS, ); - dispatch(setApiPaneConfigSelectedTabIndex(index)); + dispatch(setPluginActionEditorSelectedTab(index)); }, [dispatch], ); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx index 98c144af91a..af4d95dbba7 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx @@ -1,8 +1,7 @@ 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 { changeApi, usePluginActionContext } from "PluginActionEditor"; import { changeQuery } from "actions/queryPaneActions"; import usePrevious from "utils/hooks/usePrevious"; import { useChangeActionCall } from "./useChangeActionCall"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts index 88a56e14d90..a7a76d88d72 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts +++ b/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, usePluginActionContext } from "PluginActionEditor"; import usePrevious from "utils/hooks/usePrevious"; export const useChangeActionCall = () => { diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 9359c8130f3..69979829732 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -3,8 +3,8 @@ 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 { setPluginActionEditorDebuggerState } from "../../store/pluginActionEditorActions"; +import { getPluginActionDebuggerState } from "../../store/pluginActionEditorSelectors"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; 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], ); diff --git a/app/client/src/PluginActionEditor/constants.ts b/app/client/src/PluginActionEditor/constants.ts new file mode 100644 index 00000000000..cba99efea29 --- /dev/null +++ b/app/client/src/PluginActionEditor/constants.ts @@ -0,0 +1 @@ +export const POST_BODY_FORM_DATA_KEY = "displayFormat"; diff --git a/app/client/src/PluginActionEditor/index.ts b/app/client/src/PluginActionEditor/index.ts index 713890a9c95..3eb9a8ff7f1 100644 --- a/app/client/src/PluginActionEditor/index.ts +++ b/app/client/src/PluginActionEditor/index.ts @@ -14,3 +14,6 @@ export { default as PluginActionNameEditor } from "./components/PluginActionName export type { PluginActionEditorState } from "./store/pluginEditorReducer"; export { default as PluginActionEditorReducer } from "./store/pluginEditorReducer"; + +export * from "./store/pluginActionEditorActions"; +export * from "./store/pluginActionEditorSelectors"; diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts new file mode 100644 index 00000000000..d5cf2b763de --- /dev/null +++ b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts @@ -0,0 +1,36 @@ +import type { PluginEditorDebuggerState } from "./pluginEditorReducer"; +import { + type ReduxAction, + ReduxActionTypes, +} from "ee/constants/ReduxActionConstants"; + +export const setPluginActionEditorDebuggerState = ( + payload: Partial, +) => ({ + type: ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_DEBUGGER_STATE, + payload, +}); + +export const setPluginActionEditorSelectedTab = (payload: number) => ({ + type: ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB, + 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 }, + }; +}; diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts new file mode 100644 index 00000000000..e2111027ae5 --- /dev/null +++ b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts @@ -0,0 +1,55 @@ +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 }; + +export const getPostBodyFormat: GetFormData = (state, id) => { + return state.ui.pluginActionEditor.formData[id][POST_BODY_FORM_DATA_KEY]; +}; +export const getPluginActionConfigSelectedTabIndex = (state: AppState) => + state.ui.pluginActionEditor.selectedConfigTab; + +export const getPluginActionDebuggerState = (state: AppState) => + state.ui.pluginActionEditor.debugger; + +export const isPluginActionCreating = (state: AppState) => + state.ui.pluginActionEditor.isCreating; diff --git a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts index 0518ffd50a9..511520749cc 100644 --- a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts +++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts @@ -25,8 +25,8 @@ export interface PluginActionEditorState { isDeleting: Record; isDirty: Record; runErrorMessage: Record; - selectedConfigTab?: string; - formData: Record; + selectedConfigTab?: number; + formData: Record>; debugger: PluginEditorDebuggerState; } @@ -216,7 +216,10 @@ export const handlers = { */ [ReduxActionTypes.SET_EXTRA_FORMDATA]: ( state: PluginActionEditorState, - action: ReduxAction<{ id: string; values: Record }>, + action: ReduxAction<{ + id: string; + values: Record; + }>, ): PluginActionEditorState => { const { id, values } = action.payload; @@ -229,7 +232,7 @@ export const handlers = { }, [ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: ( state: PluginActionEditorState, - action: ReduxAction<{ selectedTab: string }>, + action: ReduxAction<{ selectedTab: number }>, ): PluginActionEditorState => { const { selectedTab } = action.payload; diff --git a/app/client/src/actions/apiPaneActions.ts b/app/client/src/actions/apiPaneActions.ts index 30c2ee87751..5775e7adf6b 100644 --- a/app/client/src/actions/apiPaneActions.ts +++ b/app/client/src/actions/apiPaneActions.ts @@ -2,18 +2,6 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; import type { EventLocation } from "ee/utils/analyticsUtilTypes"; import type { SlashCommandPayload } from "entities/Action"; -import type { ApiPaneDebuggerState } from "ee/reducers/uiReducers/apiPaneReducer"; - -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 const createNewApiAction = ( pageId: string, @@ -39,29 +27,7 @@ export const createNewQueryAction = ( payload: { pageId, from, datasourceId, queryDefaultTableName }, }); -export const updateBodyContentType = ( - title: string, - apiId: string, -): ReduxAction<{ title: string; apiId: string }> => ({ - type: ReduxActionTypes.UPDATE_API_ACTION_BODY_CONTENT_TYPE, - payload: { title, apiId }, -}); - export const executeCommandAction = (payload: SlashCommandPayload) => ({ type: ReduxActionTypes.EXECUTE_COMMAND, payload: payload, }); - -export const setApiPaneConfigSelectedTabIndex: ( - payload: number, -) => ReduxAction<{ selectedTabIndex: number }> = (payload: number) => ({ - type: ReduxActionTypes.SET_API_PANE_CONFIG_SELECTED_TAB, - payload: { selectedTabIndex: payload }, -}); - -export const setApiPaneDebuggerState = ( - payload: Partial, -) => ({ - type: ReduxActionTypes.SET_API_PANE_DEBUGGER_STATE, - payload, -}); diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 8e44395d5a0..49ac9952e0d 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -20,7 +20,7 @@ import { ApiResponseHeaders } from "PluginActionEditor/components/PluginActionRe import { noop } from "lodash"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import { getErrorCount } from "selectors/debuggerSelectors"; -import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors"; +import { getPluginActionDebuggerState } from "PluginActionEditor"; function usePluginActionResponseTabs() { const { action, actionResponse, plugin } = usePluginActionContext(); @@ -28,7 +28,7 @@ function usePluginActionResponseTabs() { const IDEViewMode = useSelector(getIDEViewMode); const errorCount = useSelector(getErrorCount); - const { responseTabHeight } = useSelector(getApiPaneDebuggerState); + const { responseTabHeight } = useSelector(getPluginActionDebuggerState); const tabs: BottomTab[] = []; diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts index d179e44d22c..879daeec6bb 100644 --- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts +++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts @@ -1,7 +1,3 @@ -import { - setApiPaneConfigSelectedTabIndex, - setApiPaneDebuggerState, -} from "actions/apiPaneActions"; import { setAllEntityCollapsibleStates, setAllSubEntityCollapsibleStates, @@ -11,10 +7,6 @@ import { setPanelPropertiesState, setWidgetSelectedPropertyTabIndex, } from "actions/editorContextActions"; -import { - getApiPaneConfigSelectedTabIndex, - getApiPaneDebuggerState, -} from "selectors/apiPaneSelectors"; import { getAllEntityCollapsibleStates, getAllPropertySectionState, @@ -43,10 +35,6 @@ import { setPropertyPaneWidthAction, setSelectedPropertyPanels, } from "actions/propertyPaneActions"; -import { - setQueryPaneConfigSelectedTabIndex, - setQueryPaneDebuggerState, -} from "actions/queryPaneActions"; import { selectWidgetInitAction } from "actions/widgetSelectionActions"; import { DEFAULT_ENTITY_EXPLORER_WIDTH, @@ -66,11 +54,7 @@ import { getPropertyPaneWidth, getSelectedPropertyPanel, } from "selectors/propertyPaneSelectors"; -import { - getLastQueryTab, - getQueryPaneConfigSelectedTabIndex, - getQueryPaneDebuggerState, -} from "selectors/queryPaneSelectors"; +import { getLastQueryTab } from "selectors/queryPaneSelectors"; import { getDebuggerContext } from "selectors/debuggerSelectors"; import { setDebuggerContext } from "actions/debuggerActions"; import { DefaultDebuggerContext } from "reducers/uiReducers/debuggerReducer"; @@ -90,6 +74,12 @@ import { getFirstDatasourceId } from "selectors/datasourceSelectors"; import { FocusElement, FocusElementConfigType } from "navigation/FocusElements"; import type { FocusElementsConfigList } from "sagas/FocusRetentionSaga"; import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; +import { + getPluginActionConfigSelectedTabIndex, + getPluginActionDebuggerState, + setPluginActionEditorDebuggerState, + setPluginActionEditorSelectedTab, +} from "PluginActionEditor"; export const AppIDEFocusElements: FocusElementsConfigList = { [FocusEntity.DATASOURCE_LIST]: [ @@ -145,16 +135,9 @@ export const AppIDEFocusElements: FocusElementsConfigList = { }, { type: FocusElementConfigType.Redux, - name: FocusElement.QueryPaneConfigTabs, - selector: getQueryPaneConfigSelectedTabIndex, - setter: setQueryPaneConfigSelectedTabIndex, - defaultValue: 0, - }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.ApiPaneConfigTabs, - selector: getApiPaneConfigSelectedTabIndex, - setter: setApiPaneConfigSelectedTabIndex, + name: FocusElement.PluginActionConfigTabs, + selector: getPluginActionConfigSelectedTabIndex, + setter: setPluginActionEditorSelectedTab, defaultValue: 0, subTypes: { [PluginPackageName.GRAPHQL]: { @@ -170,20 +153,9 @@ export const AppIDEFocusElements: FocusElementsConfigList = { }, { type: FocusElementConfigType.Redux, - name: FocusElement.QueryDebugger, - selector: getQueryPaneDebuggerState, - setter: setQueryPaneDebuggerState, - defaultValue: { - open: false, - responseTabHeight: ActionExecutionResizerHeight, - selectedTab: undefined, - }, - }, - { - type: FocusElementConfigType.Redux, - name: FocusElement.ApiDebugger, - selector: getApiPaneDebuggerState, - setter: setApiPaneDebuggerState, + name: FocusElement.PluginActionDebugger, + selector: getPluginActionDebuggerState, + setter: setPluginActionEditorDebuggerState, defaultValue: { open: false, responseTabHeight: ActionExecutionResizerHeight, diff --git a/app/client/src/ce/reducers/index.tsx b/app/client/src/ce/reducers/index.tsx index 3b0fd4cd0c3..e8b06cdbe25 100644 --- a/app/client/src/ce/reducers/index.tsx +++ b/app/client/src/ce/reducers/index.tsx @@ -13,7 +13,6 @@ import type { AppViewReduxState } from "reducers/uiReducers/appViewReducer"; import type { DatasourcePaneReduxState } from "reducers/uiReducers/datasourcePaneReducer"; import type { ApplicationsReduxState } from "ee/reducers/uiReducers/applicationsReducer"; import type { PageListReduxState } from "reducers/entityReducers/pageListReducer"; -import type { ApiPaneReduxState } from "ee/reducers/uiReducers/apiPaneReducer"; import type { QueryPaneReduxState } from "ee/reducers/uiReducers/queryPaneReducer"; import type { PluginDataState } from "reducers/entityReducers/pluginsReducer"; import type { AuthState } from "reducers/uiReducers/authReducer"; @@ -103,7 +102,6 @@ export interface AppState { errors: ErrorReduxState; appView: AppViewReduxState; applications: ApplicationsReduxState; - apiPane: ApiPaneReduxState; auth: AuthState; templates: TemplatesReduxState; buildingBlocks: BuildingBlocksReduxState; diff --git a/app/client/src/ce/reducers/uiReducers/apiPaneReducer.ts b/app/client/src/ce/reducers/uiReducers/apiPaneReducer.ts deleted file mode 100644 index 61bbf458ba1..00000000000 --- a/app/client/src/ce/reducers/uiReducers/apiPaneReducer.ts +++ /dev/null @@ -1,256 +0,0 @@ -import { createReducer } from "utils/ReducerUtils"; -import type { ReduxAction } from "ee/constants/ReduxActionConstants"; -import { - ReduxActionTypes, - ReduxActionErrorTypes, -} from "ee/constants/ReduxActionConstants"; -import type { Action } from "entities/Action"; -import type { UpdateActionPropertyActionPayload } from "actions/pluginActionActions"; -import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; - -export const initialState: ApiPaneReduxState = { - isCreating: false, - isRunning: {}, - isSaving: {}, - isDeleting: {}, - isDirty: {}, - extraformData: {}, - selectedConfigTabIndex: 0, - debugger: { - open: false, - responseTabHeight: ActionExecutionResizerHeight, - }, -}; - -export interface ApiPaneDebuggerState { - open: boolean; - responseTabHeight: number; - selectedTab?: string; -} - -export interface ApiPaneReduxState { - isCreating: boolean; // RR - isRunning: Record; - isSaving: Record; // RN - isDeleting: Record; - isDirty: Record; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - extraformData: Record; - selectedConfigTabIndex: number; - debugger: ApiPaneDebuggerState; -} - -export const handlers = { - [ReduxActionTypes.FETCH_ACTIONS_INIT]: (state: ApiPaneReduxState) => ({ - ...state, - isFetching: true, - }), - [ReduxActionTypes.FETCH_ACTIONS_SUCCESS]: (state: ApiPaneReduxState) => ({ - ...state, - isFetching: false, - }), - [ReduxActionErrorTypes.FETCH_ACTIONS_ERROR]: (state: ApiPaneReduxState) => ({ - ...state, - isFetching: false, - }), - [ReduxActionTypes.CREATE_ACTION_INIT]: ( - state: ApiPaneReduxState, - ): ApiPaneReduxState => ({ - ...state, - isCreating: true, - }), - [ReduxActionTypes.CREATE_ACTION_SUCCESS]: ( - state: ApiPaneReduxState, - ): ApiPaneReduxState => ({ - ...state, - isCreating: false, - }), - [ReduxActionErrorTypes.CREATE_ACTION_ERROR]: ( - state: ApiPaneReduxState, - ): ApiPaneReduxState => ({ - ...state, - isCreating: false, - }), - [ReduxActionTypes.RUN_ACTION_REQUEST]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isRunning: { - ...state.isRunning, - [action.payload.id]: true, - }, - debugger: { - ...state.debugger, - open: true, - }, - }), - [ReduxActionTypes.RUN_ACTION_SUCCESS]: ( - state: ApiPaneReduxState, - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - action: ReduxAction<{ [id: string]: any }>, - ) => { - const actionId = Object.keys(action.payload)[0]; - - return { - ...state, - isRunning: { - ...state.isRunning, - [actionId]: false, - }, - }; - }, - [ReduxActionErrorTypes.RUN_ACTION_ERROR]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isRunning: { - ...state.isRunning, - [action.payload.id]: false, - }, - }), - [ReduxActionTypes.RUN_ACTION_CANCELLED]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ): ApiPaneReduxState => ({ - ...state, - isRunning: { - ...state.isRunning, - [action.payload.id]: false, - }, - }), - [ReduxActionTypes.UPDATE_ACTION_PROPERTY]: ( - state: ApiPaneReduxState, - action: ReduxAction, - ) => ({ - ...state, - isDirty: { - ...state.isDirty, - [action.payload.id]: true, - }, - }), - [ReduxActionTypes.UPDATE_ACTION_INIT]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isSaving: { - ...state.isSaving, - [action.payload.id]: true, - }, - }), - [ReduxActionTypes.UPDATE_ACTION_SUCCESS]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ data: Action }>, - ) => ({ - ...state, - isSaving: { - ...state.isSaving, - [action.payload.data.id]: false, - }, - isDirty: { - ...state.isDirty, - [action.payload.data.id]: false, - }, - }), - [ReduxActionErrorTypes.UPDATE_ACTION_ERROR]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isSaving: { - ...state.isSaving, - [action.payload.id]: false, - }, - }), - [ReduxActionTypes.DELETE_ACTION_INIT]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isDeleting: { - ...state.isDeleting, - [action.payload.id]: true, - }, - }), - [ReduxActionTypes.DELETE_ACTION_SUCCESS]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isDeleting: { - ...state.isDeleting, - [action.payload.id]: false, - }, - }), - [ReduxActionErrorTypes.DELETE_ACTION_ERROR]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isDeleting: { - ...state.isDeleting, - [action.payload.id]: false, - }, - }), - - /** - * This redux action sets the extraformData field for an action. This is used to select the - * appropriate body type tab selection in the Rest API plugin based on the content-type. - * This redux action can be extended to other functionalities as well in the future. - * - * @param {ApiPaneReduxState} state - * @param {ReduxAction} action - * @returns {ApiPaneReduxState} - */ - [ReduxActionTypes.SET_EXTRA_FORMDATA]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ id: string; values: Record }>, - ): ApiPaneReduxState => { - const { id, values } = action.payload; - - return { - ...state, - extraformData: { - ...state.extraformData, - [id]: values, - }, - }; - }, - [ReduxActionTypes.SET_API_PANE_CONFIG_SELECTED_TAB]: ( - state: ApiPaneReduxState, - action: ReduxAction<{ selectedTabIndex: number }>, - ) => { - const { selectedTabIndex } = action.payload; - - return { - ...state, - selectedConfigTabIndex: selectedTabIndex, - }; - }, - [ReduxActionTypes.SET_API_PANE_DEBUGGER_STATE]: ( - state: ApiPaneReduxState, - action: ReduxAction>, - ) => { - return { - ...state, - debugger: { - ...state.debugger, - ...action.payload, - }, - }; - }, - [ReduxActionTypes.RESET_EDITOR_REQUEST]: (state: ApiPaneReduxState) => { - return { - ...state, - isSaving: {}, - }; - }, -}; - -const apiPaneReducer = createReducer(initialState, handlers); - -export default apiPaneReducer; diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index 066da0e791d..b56ff0f101d 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -3,7 +3,6 @@ import errorReducer from "reducers/uiReducers/errorReducer"; import propertyPaneReducer from "reducers/uiReducers/propertyPaneReducer"; import appViewReducer from "reducers/uiReducers/appViewReducer"; import applicationsReducer from "ee/reducers/uiReducers/applicationsReducer"; -import apiPaneReducer from "ee/reducers/uiReducers/apiPaneReducer"; import datasourcePaneReducer from "reducers/uiReducers/datasourcePaneReducer"; import authReducer from "reducers/uiReducers/authReducer"; import workspaceReducer from "ee/reducers/uiReducers/workspaceReducer"; @@ -48,7 +47,7 @@ import layoutConversionReducer from "reducers/uiReducers/layoutConversionReducer import oneClickBindingReducer from "reducers/uiReducers/oneClickBindingReducer"; import activeFieldReducer from "reducers/uiReducers/activeFieldEditorReducer"; import selectedWorkspaceReducer from "ee/reducers/uiReducers/selectedWorkspaceReducer"; -import ideReducer from "../../../reducers/uiReducers/ideReducer"; +import ideReducer from "reducers/uiReducers/ideReducer"; import consolidatedPageLoadReducer from "reducers/uiReducers/consolidatedPageLoadReducer"; import { PluginActionEditorReducer } from "PluginActionEditor"; @@ -60,7 +59,6 @@ export const uiReducerObject = { tableFilterPane: tableFilterPaneReducer, appView: appViewReducer, applications: applicationsReducer, - apiPane: apiPaneReducer, auth: authReducer, templates: templateReducer, buildingBlocks: buildingBlockReducer, diff --git a/app/client/src/ce/selectors/entitiesSelector.ts b/app/client/src/ce/selectors/entitiesSelector.ts index afe96173b64..4f50d471cb0 100644 --- a/app/client/src/ce/selectors/entitiesSelector.ts +++ b/app/client/src/ce/selectors/entitiesSelector.ts @@ -869,28 +869,6 @@ export function getPageNameByPageId(state: AppState, pageId: string): string { return page ? page.pageName : ""; } -const getQueryPaneSavingMap = (state: AppState) => state.ui.queryPane.isSaving; - -export const getApiPaneSavingMap = (state: AppState) => - state.ui.apiPane.isSaving; -const getActionDirtyState = (state: AppState) => state.ui.apiPane.isDirty; - -export const isActionSaving = (id: string) => - createSelector( - [getQueryPaneSavingMap, getApiPaneSavingMap], - (querySavingMap, apiSavingsMap) => { - return ( - (id in querySavingMap && querySavingMap[id]) || - (id in apiSavingsMap && apiSavingsMap[id]) - ); - }, - ); - -export const isActionDirty = (id: string) => - createSelector([getActionDirtyState], (actionDirtyMap) => { - return id in actionDirtyMap && actionDirtyMap[id]; - }); - export const getAppData = (state: AppState) => state.entities.app; export const getAppStoreData = (state: AppState): AppStoreState => diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index 623973d2373..c6c0326a097 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -19,8 +19,10 @@ import { getErrorCount } from "selectors/debuggerSelectors"; import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; import type { Action } from "entities/Action"; import { EMPTY_RESPONSE } from "./emptyResponse"; -import { setApiPaneDebuggerState } from "actions/apiPaneActions"; -import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors"; +import { + getPluginActionDebuggerState, + setPluginActionEditorDebuggerState, +} from "PluginActionEditor"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "ee/entities/IDE/constants"; import useDebuggerTriggerClick from "./Debugger/hooks/useDebuggerTriggerClick"; @@ -49,7 +51,7 @@ function ApiResponseView(props: Props) { const dispatch = useDispatch(); const errorCount = useSelector(getErrorCount); const { open, responseTabHeight, selectedTab } = useSelector( - getApiPaneDebuggerState, + getPluginActionDebuggerState, ); const ideViewMode = useSelector(getIDEViewMode); @@ -72,7 +74,9 @@ function ApiResponseView(props: Props) { }); } - dispatch(setApiPaneDebuggerState({ open: true, selectedTab: tabKey })); + dispatch( + setPluginActionEditorDebuggerState({ open: true, selectedTab: tabKey }), + ); }, [dispatch], ); @@ -80,7 +84,9 @@ function ApiResponseView(props: Props) { // update the height of the response pane on resize. const updateResponsePaneHeight = useCallback( (height: number) => { - dispatch(setApiPaneDebuggerState({ responseTabHeight: height })); + dispatch( + setPluginActionEditorDebuggerState({ responseTabHeight: height }), + ); }, [dispatch], ); @@ -135,7 +141,7 @@ function ApiResponseView(props: Props) { // close the debugger //TODO: move this to a common place const toggleHide = useCallback( - () => dispatch(setApiPaneDebuggerState({ open: !open })), + () => dispatch(setPluginActionEditorDebuggerState({ open: !open })), [dispatch, open], ); diff --git a/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts b/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts index f6ae639baf9..a967db0c719 100644 --- a/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts +++ b/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts @@ -5,11 +5,11 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import type { FocusEntityInfo } from "navigation/FocusEntity"; import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity"; import { setJsPaneDebuggerState } from "actions/jsPaneActions"; -import { setApiPaneDebuggerState } from "actions/apiPaneActions"; -import { setQueryPaneDebuggerState } from "actions/queryPaneActions"; import { getJsPaneDebuggerState } from "selectors/jsPaneSelectors"; -import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors"; -import { getQueryPaneDebuggerState } from "selectors/queryPaneSelectors"; +import { + getPluginActionDebuggerState, + setPluginActionEditorDebuggerState, +} from "PluginActionEditor"; import { getCanvasDebuggerState } from "selectors/debuggerSelectors"; import { getIDEViewMode } from "selectors/ideSelectors"; import { useDispatch, useSelector } from "react-redux"; @@ -30,26 +30,15 @@ const canvasDebuggerConfig: Config = { get: getCanvasDebuggerState, }; -const queryDebuggerConfig: Config = { - set: setQueryPaneDebuggerState, - get: getQueryPaneDebuggerState, +const pluginActionEditorDebuggerConfig: Config = { + set: setPluginActionEditorDebuggerState, + get: getPluginActionDebuggerState, }; const getConfig = (focusInfo: FocusEntityInfo): Config => { switch (focusInfo.entity) { case FocusEntity.QUERY: - if (focusInfo.params.baseApiId) { - if (focusInfo.params.pluginPackageName) { - return queryDebuggerConfig; - } - - return { - set: setApiPaneDebuggerState, - get: getApiPaneDebuggerState, - }; - } - - return queryDebuggerConfig; + return pluginActionEditorDebuggerConfig; case FocusEntity.JS_OBJECT: return { set: setJsPaneDebuggerState, diff --git a/app/client/src/ee/reducers/uiReducers/apiPaneReducer.tsx b/app/client/src/ee/reducers/uiReducers/apiPaneReducer.tsx deleted file mode 100644 index dd2ecbe891d..00000000000 --- a/app/client/src/ee/reducers/uiReducers/apiPaneReducer.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from "ce/reducers/uiReducers/apiPaneReducer"; -import { default as CE_apiPaneReducer } from "ce/reducers/uiReducers/apiPaneReducer"; -export default CE_apiPaneReducer; diff --git a/app/client/src/navigation/FocusElements.ts b/app/client/src/navigation/FocusElements.ts index 94b5c071d2d..9a44d305963 100644 --- a/app/client/src/navigation/FocusElements.ts +++ b/app/client/src/navigation/FocusElements.ts @@ -2,7 +2,7 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import type { AppState } from "ee/reducers"; export enum FocusElement { - ApiPaneConfigTabs = "ApiPaneConfigTabs", + PluginActionConfigTabs = "PluginActionConfigTabs", CodeEditorHistory = "CodeEditorHistory", EntityCollapsibleState = "EntityCollapsibleState", EntityExplorerWidth = "EntityExplorerWidth", @@ -10,8 +10,6 @@ export enum FocusElement { DatasourceViewMode = "DatasourceViewMode", SelectedDatasource = "SelectedDatasource", DebuggerContext = "DebuggerContext", - ApiRightPaneTabs = "ApiRightPaneTabs", - QueryPaneConfigTabs = "QueryPaneConfigTabs", JSPaneConfigTabs = "JSPaneConfigTabs", PropertySections = "PropertySections", PropertyField = "PropertyField", @@ -26,8 +24,7 @@ export enum FocusElement { SelectedJSObject = "SelectedJSObject", SelectedEntity = "SelectedEntity", IDETabs = "IDETabs", - QueryDebugger = "QueryDebugger", - ApiDebugger = "ApiDebugger", + PluginActionDebugger = "PluginActionDebugger", JSDebugger = "JSDebugger", } diff --git a/app/client/src/pages/Editor/APIEditor/Editor.tsx b/app/client/src/pages/Editor/APIEditor/Editor.tsx index f939edc0be2..eaccbf91722 100644 --- a/app/client/src/pages/Editor/APIEditor/Editor.tsx +++ b/app/client/src/pages/Editor/APIEditor/Editor.tsx @@ -21,7 +21,12 @@ import Spinner from "components/editorComponents/Spinner"; import type { CSSProperties } from "styled-components"; import styled from "styled-components"; import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper"; -import { changeApi } from "actions/apiPaneActions"; +import { + changeApi, + getActionIsDeleting, + getActionIsRunning, + isPluginActionCreating, +} from "PluginActionEditor"; import * as Sentry from "@sentry/react"; import EntityNotFoundPane from "pages/Editor/EntityNotFoundPane"; import type { ApplicationPayload } from "entities/Application"; @@ -237,7 +242,9 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => { const apiAction = getActionByBaseId(state, props?.match?.params?.baseApiId); const apiName = apiAction?.name ?? ""; const apiId = apiAction?.id ?? ""; - const { isCreating, isDeleting, isRunning } = state.ui.apiPane; + const isCreating = isPluginActionCreating(state); + const isDeleting = getActionIsDeleting(apiId)(state); + const isRunning = getActionIsRunning(apiId)(state); const pluginId = _.get(apiAction, "pluginId", ""); return { @@ -251,9 +258,9 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => { pluginId, paginationType: _.get(apiAction, "actionConfiguration.paginationType"), apiAction, - isRunning: isRunning[apiId], - isDeleting: isDeleting[apiId], - isCreating: isCreating, + isRunning, + isDeleting, + isCreating, applicationId: getCurrentApplicationId(state), }; }; diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx index a874d99c8a6..01552a631c8 100644 --- a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx +++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx @@ -19,7 +19,10 @@ import { TabBehaviour, } from "components/editorComponents/CodeEditor/EditorConfig"; import { Classes } from "@appsmith/ads-old"; -import { updateBodyContentType } from "actions/apiPaneActions"; +import { + getPostBodyFormat, + updatePostBodyContentType, +} from "PluginActionEditor"; import type { CodeEditorExpected } from "components/editorComponents/CodeEditor"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import { createMessage, API_PANE_NO_BODY } from "ee/constants/messages"; @@ -199,14 +202,14 @@ const selector = formValueSelector(API_EDITOR_FORM_NAME); // eslint-disable-next-line @typescript-eslint/no-explicit-any const mapDispatchToProps = (dispatch: any) => ({ updateBodyContentType: (contentType: string, apiId: string) => - dispatch(updateBodyContentType(contentType, apiId)), + dispatch(updatePostBodyContentType(contentType, apiId)), }); export default connect((state: AppState) => { const apiId = selector(state, "id"); - const extraFormData = state.ui.apiPane.extraformData[apiId] || {}; - // Defaults to NONE when extraformData is empty - const displayFormat = extraFormData["displayFormat"] || { + const postBodyFormat = getPostBodyFormat(state, apiId); + // Defaults to NONE when format is not set + const displayFormat = postBodyFormat || { label: POST_BODY_FORMAT_OPTIONS.NONE, value: POST_BODY_FORMAT_OPTIONS.NONE, }; diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts index 2fa0dbb5cfe..3d651884c91 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts @@ -2,7 +2,7 @@ import { call, delay, put } from "redux-saga/effects"; import type { EntityInfo, IApiPaneNavigationConfig } from "../types"; import { ActionPaneNavigation } from "./exports"; import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants"; -import { setApiPaneConfigSelectedTabIndex } from "actions/apiPaneActions"; +import { setPluginActionEditorSelectedTab } from "PluginActionEditor"; import { NAVIGATION_DELAY } from "../costants"; import { isNumber } from "lodash"; @@ -38,7 +38,7 @@ export default class ApiPaneNavigation extends ActionPaneNavigation { if (!this.entityInfo.propertyPath) return; if (isNumber(config.tabIndex)) { - yield put(setApiPaneConfigSelectedTabIndex(config.tabIndex)); + yield put(setPluginActionEditorSelectedTab(config.tabIndex)); yield delay(NAVIGATION_DELAY); } diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts index 68fc9ab0e9c..ccf2ed3a56f 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts @@ -8,7 +8,7 @@ import { getFormEvaluationState } from "selectors/formSelectors"; import type { FormEvaluationState } from "reducers/evaluationReducers/formEvaluationReducer"; import { isEmpty } from "lodash"; import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; -import { isActionSaving } from "ee/selectors/entitiesSelector"; +import { isActionSaving } from "PluginActionEditor"; export default class QueryPaneNavigation extends ActionPaneNavigation { constructor(entityInfo: EntityInfo) { diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx index 5c304abc7b0..c904609724f 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx @@ -39,6 +39,7 @@ import { useEditorType } from "ee/hooks"; import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks"; import AIDataSources from "./AIDataSources"; import Debugger from "../DataSourceEditor/Debugger"; +import { isPluginActionCreating } from "PluginActionEditor"; const NewIntegrationsContainer = styled.div` ${thinScrollbar}; @@ -381,7 +382,7 @@ const mapStateToProps = (state: AppState) => { return { dataSources: getDatasources(state), mockDatasources: getMockDatasources(state), - isCreating: state.ui.apiPane.isCreating, + isCreating: isPluginActionCreating(state), applicationId: getCurrentApplicationId(state), canCreateDatasource, showDebugger, diff --git a/app/client/src/pages/Editor/QueryEditor/Editor.tsx b/app/client/src/pages/Editor/QueryEditor/Editor.tsx index 8e6322c78a7..b769641eda3 100644 --- a/app/client/src/pages/Editor/QueryEditor/Editor.tsx +++ b/app/client/src/pages/Editor/QueryEditor/Editor.tsx @@ -41,6 +41,11 @@ import { merge } from "lodash"; import { getPathAndValueFromActionDiffObject } from "../../../utils/getPathAndValueFromActionDiffObject"; import { getCurrentEnvironmentDetails } from "ee/selectors/environmentSelectors"; import { QueryEditorContext } from "./QueryEditorContext"; +import { + getActionIsDeleting, + getActionIsRunning, + isPluginActionCreating, +} from "PluginActionEditor"; const EmptyStateContainer = styled.div` display: flex; @@ -272,6 +277,10 @@ const mapStateToProps = (state: AppState, props: OwnProps): ReduxStateProps => { pluginId = action.pluginId; } + const isCreating = isPluginActionCreating(state); + const isDeleting = getActionIsDeleting(actionId)(state); + const isRunning = getActionIsRunning(actionId)(state); + // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any let editorConfig: any; @@ -319,12 +328,12 @@ const mapStateToProps = (state: AppState, props: OwnProps): ReduxStateProps => { ? getDatasourceByPluginId(state, action?.pluginId) : getDBAndRemoteDatasources(state), responses: getActionResponses(state), - isRunning: state.ui.queryPane.isRunning[actionId], - isDeleting: state.ui.queryPane.isDeleting[actionId], + isCreating, + isRunning, + isDeleting, isSaas: !!baseApiId, formData, editorConfig, - isCreating: state.ui.apiPane.isCreating, uiComponent, applicationId: getCurrentApplicationId(state), actionObjectDiff, diff --git a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts index 0c220b23ec4..3a071918a80 100644 --- a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts +++ b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts @@ -44,8 +44,6 @@ import { getDatasource, getJSCollectionFromAllEntities, getPlugin, - isActionDirty, - isActionSaving, } from "ee/selectors/entitiesSelector"; import { getIsGitSyncModalOpen } from "selectors/gitSyncSelectors"; import { @@ -72,7 +70,7 @@ import { } from "sagas/ErrorSagas"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import type { Action } from "entities/Action"; -import { ActionExecutionContext, PluginType } from "entities/Action"; +import { ActionExecutionContext } from "entities/Action"; import LOG_TYPE from "entities/AppsmithConsole/logtype"; import { ACTION_EXECUTION_CANCELLED, @@ -99,7 +97,7 @@ import { getLayoutOnLoadActions, getLayoutOnLoadIssues, } from "selectors/editorSelectors"; -import * as log from "loglevel"; +import log from "loglevel"; import { EMPTY_RESPONSE } from "components/editorComponents/emptyResponse"; import type { AppState } from "ee/reducers"; import { DEFAULT_EXECUTE_ACTION_TIMEOUT_MS } from "ee/constants/ApiConstants"; @@ -147,10 +145,7 @@ import { handleStoreOperations } from "./StoreActionSaga"; import { fetchPageAction } from "actions/pageActions"; import type { Datasource } from "entities/Datasource"; import { softRefreshDatasourceStructure } from "actions/datasourceActions"; -import { - changeQuery, - setQueryPaneDebuggerState, -} from "actions/queryPaneActions"; +import { changeQuery } from "actions/queryPaneActions"; import { getCurrentEnvironmentDetails, getCurrentEnvironmentName, @@ -171,7 +166,11 @@ import { } from "ee/utils/actionExecutionUtils"; import type { JSAction, JSCollection } from "entities/JSCollection"; import { getAllowedActionAnalyticsKeys } from "constants/AppsmithActionConstants/formConfig/ActionAnalyticsConfig"; -import { setApiPaneDebuggerState } from "../../actions/apiPaneActions"; +import { + isActionDirty, + isActionSaving, + setPluginActionEditorDebuggerState, +} from "PluginActionEditor"; enum ActionResponseDataTypes { BINARY = "BINARY", @@ -801,7 +800,12 @@ export function* runActionSaga( // open response tab in debugger on exection of action. if (!reduxAction.payload.skipOpeningDebugger) { - yield call(openDebugger, plugin.type); + yield put( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, + }), + ); } let payload = EMPTY_RESPONSE; @@ -1193,7 +1197,12 @@ function* executePageLoadAction( // open response tab in debugger on exection of action on page load. // Only if current page is the page on which the action is executed. if (window.location.pathname.includes(pageAction.id)) - yield call(openDebugger, plugin.type); + yield put( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, + }), + ); if (isError) { AppsmithConsole.addErrors([ @@ -1577,23 +1586,6 @@ function triggerFileUploadInstrumentation( }); } -//Open debugger with response tab selected. -function* openDebugger(pluginType: PluginType) { - if (pluginType === PluginType.API) { - yield put( - setApiPaneDebuggerState({ - open: true, - selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, - }), - ); - } else { - setQueryPaneDebuggerState({ - open: true, - selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, - }); - } -} - // Function to clear the action responses for the actions which are not executeOnLoad. function* clearTriggerActionResponse() { const currentPageActions: ActionData[] = yield select(getCurrentActions); diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index 96550ff7c81..d2b1c06ce7b 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/app/client/src/sagas/ApiPaneSagas.ts @@ -29,7 +29,7 @@ import { import { DEFAULT_CREATE_API_CONFIG } from "constants/ApiEditorConstants/ApiEditorConstants"; import { DEFAULT_CREATE_GRAPHQL_CONFIG } from "constants/ApiEditorConstants/GraphQLEditorConstants"; import history from "utils/history"; -import { initialize, autofill, change, reset } from "redux-form"; +import { autofill, change, initialize, reset } from "redux-form"; import type { Property } from "api/ActionAPI"; import { getQueryParams } from "utils/URLUtils"; import { getPluginIdOfPackageName } from "sagas/selectors"; @@ -61,7 +61,7 @@ import { import { updateReplayEntity } from "actions/pageActions"; import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils"; import type { Plugin } from "api/PluginApi"; -import { getDisplayFormat } from "selectors/apiPaneSelectors"; +import { getPostBodyFormat } from "../PluginActionEditor"; import { apiEditorIdURL, datasourcesEditorIdURL } from "ee/RouteBuilder"; import { getCurrentBasePageId } from "selectors/editorSelectors"; import { validateResponse } from "./ErrorSagas"; @@ -83,6 +83,7 @@ import { checkAndGetPluginFormConfigsSaga } from "./PluginSagas"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; import type { ApplicationPayload } from "entities/Application"; import { klonaLiteWithTelemetry } from "utils/helpers"; +import { POST_BODY_FORM_DATA_KEY } from "../PluginActionEditor/constants"; function* syncApiParamsSaga( actionPayload: ReduxActionWithMeta, @@ -256,7 +257,7 @@ function* updateExtraFormDataSaga() { const { values } = formData; // when initializing, check if theres a display format present. - const extraFormData: GetFormData = yield select(getDisplayFormat, values.id); + const extraFormData: GetFormData = yield select(getPostBodyFormat, values.id); const headers: Array<{ key: string; value: string }> = get(values, "actionConfiguration.headers") || []; @@ -367,7 +368,7 @@ function* setApiBodyTabHeaderFormat(apiId: string, apiContentType?: string) { payload: { id: apiId, values: { - displayFormat, + [POST_BODY_FORM_DATA_KEY]: displayFormat, }, }, }); diff --git a/app/client/src/selectors/apiPaneSelectors.ts b/app/client/src/selectors/apiPaneSelectors.ts deleted file mode 100644 index 92d53733783..00000000000 --- a/app/client/src/selectors/apiPaneSelectors.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { AppState } from "ee/reducers"; -import { createSelector } from "reselect"; -import { combinedPreviewModeSelector } from "./editorSelectors"; - -type GetFormData = ( - state: AppState, - apiId: string, -) => { label: string; value: string }; - -export const getDisplayFormat: GetFormData = (state, apiId) => { - const displayFormat = state.ui.apiPane.extraformData[apiId]; - - return displayFormat; -}; - -export const getApiPaneConfigSelectedTabIndex = (state: AppState) => - state.ui.apiPane.selectedConfigTabIndex; - -export const getIsRunning = (state: AppState, apiId: string) => - state.ui.apiPane.isRunning[apiId]; - -export const getApiPaneDebuggerState = (state: AppState) => - state.ui.apiPane.debugger; - -export const showApiPaneDebugger = createSelector( - (state) => state.ui.apiPane.debugger.open, - combinedPreviewModeSelector, - (isOpen, isPreview) => isOpen && !isPreview, -); diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index 355a1197c3d..ffc0058a66e 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -27,8 +27,8 @@ import { } from "selectors/dataTreeSelectors"; import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; +import { getActionEditorSavingMap } from "PluginActionEditor"; import { - getApiPaneSavingMap, getCanvasWidgets, getJSCollections, } from "ee/selectors/entitiesSelector"; @@ -48,6 +48,7 @@ import { protectedModeSelector } from "./gitSyncSelectors"; import { getIsAnvilLayout } from "layoutSystems/anvil/integrations/selectors"; import { getCurrentApplication } from "ee/selectors/applicationSelectors"; import type { Page } from "entities/Page"; +import { objectKeys } from "@appsmith/utils"; const getIsDraggingOrResizing = (state: AppState) => state.ui.widgetDragResize.isResizing || state.ui.widgetDragResize.isDragging; @@ -76,7 +77,7 @@ export const getLoadingError = (state: AppState) => export const getIsPageSaving = createSelector( [ - getApiPaneSavingMap, + getActionEditorSavingMap, (state: AppState) => state.ui.jsPane.isSaving, (state: AppState) => state.ui.appTheming.isSaving, (state: AppState) => state.ui.applications.isSavingNavigationSetting, @@ -84,23 +85,23 @@ export const getIsPageSaving = createSelector( (state: AppState) => state.ui.editor.loadingStates.saving, ], ( - savingApis, + savingActions, savingJSObjects, isSavingAppTheme, isSavingNavigationSetting, isEditorSavingEntity, isEditorSaving, ) => { - const areApisSaving = Object.keys(savingApis).some( - (apiId) => savingApis[apiId], + const areActionsSaving = objectKeys(savingActions).some( + (actionId) => savingActions[actionId], ); - const areJsObjectsSaving = Object.keys(savingJSObjects).some( + const areJsObjectsSaving = objectKeys(savingJSObjects).some( (collectionId) => savingJSObjects[collectionId], ); return ( isEditorSavingEntity || - areApisSaving || + areActionsSaving || areJsObjectsSaving || isSavingAppTheme || isEditorSaving || diff --git a/app/client/src/utils/replayHelpers.tsx b/app/client/src/utils/replayHelpers.tsx index 121235ec143..07944c91308 100644 --- a/app/client/src/utils/replayHelpers.tsx +++ b/app/client/src/utils/replayHelpers.tsx @@ -16,7 +16,7 @@ import { ACTION_CONFIGURATION_CHANGED, } from "ee/constants/messages"; import { toast } from "@appsmith/ads"; -import { setApiPaneConfigSelectedTabIndex } from "../actions/apiPaneActions"; +import { setPluginActionEditorSelectedTab } from "PluginActionEditor"; import { API_EDITOR_TABS } from "../constants/ApiEditorConstants/CommonApiConstants"; import store from "../store"; @@ -177,7 +177,7 @@ export function switchTab(replayId: string): boolean { // @ts-ignore const index = Object.values(API_EDITOR_TABS).indexOf(replayId); - store.dispatch(setApiPaneConfigSelectedTabIndex(index)); + store.dispatch(setPluginActionEditorSelectedTab(index)); return true; } From 3da3aef54a3fe2706e2637414b5cc055f2d1f81e Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 2 Oct 2024 14:56:56 +0530 Subject: [PATCH 3/8] fix import causing build issue --- .../components/CommonEditorForm/hooks/useSelectedFormTab.ts | 2 +- .../PluginActionForm/hooks/useChangeActionCall.test.tsx | 3 ++- .../components/PluginActionForm/hooks/useChangeActionCall.ts | 3 ++- .../components/PluginActionResponse/PluginActionResponse.tsx | 4 ++-- app/client/src/PluginActionEditor/index.ts | 4 ---- app/client/src/PluginActionEditor/store/index.ts | 4 ++++ .../hooks/usePluginActionResponseTabs.tsx | 2 +- app/client/src/ce/navigation/FocusElements/AppIDE.ts | 2 +- app/client/src/ce/reducers/uiReducers/index.tsx | 4 ++-- .../src/components/editorComponents/ApiResponseView.tsx | 2 +- .../Debugger/hooks/useDebuggerTriggerClick.ts | 2 +- app/client/src/pages/Editor/APIEditor/Editor.tsx | 2 +- app/client/src/pages/Editor/APIEditor/PostBodyData.tsx | 2 +- .../Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts | 2 +- .../Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts | 2 +- .../pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx | 2 +- app/client/src/pages/Editor/QueryEditor/Editor.tsx | 2 +- app/client/src/sagas/ActionExecution/PluginActionSaga.ts | 2 +- app/client/src/sagas/ApiPaneSagas.ts | 2 +- app/client/src/selectors/editorSelectors.tsx | 2 +- app/client/src/utils/replayHelpers.tsx | 2 +- 21 files changed, 27 insertions(+), 25 deletions(-) create mode 100644 app/client/src/PluginActionEditor/store/index.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts index ae47f45220b..4f15f896848 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts @@ -4,7 +4,7 @@ import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants import { getPluginActionConfigSelectedTabIndex, setPluginActionEditorSelectedTab, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; export function useSelectedFormTab(): [string, (id: string) => void] { const dispatch = useDispatch(); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx index af4d95dbba7..04738e5a015 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx @@ -1,7 +1,8 @@ import { renderHook } from "@testing-library/react-hooks/dom"; import { useDispatch } from "react-redux"; import { PluginType } from "entities/Action"; -import { changeApi, usePluginActionContext } from "PluginActionEditor"; +import { usePluginActionContext } from "../../../PluginActionContext"; +import { changeApi } from "../../../store"; import { changeQuery } from "actions/queryPaneActions"; import usePrevious from "utils/hooks/usePrevious"; import { useChangeActionCall } from "./useChangeActionCall"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts index a7a76d88d72..9ade8320fd0 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts @@ -2,7 +2,8 @@ import { useEffect } from "react"; import { useDispatch } from "react-redux"; import { changeQuery } from "actions/queryPaneActions"; import { PluginType } from "entities/Action"; -import { changeApi, usePluginActionContext } from "PluginActionEditor"; +import { usePluginActionContext } from "PluginActionEditor"; +import { changeApi } from "PluginActionEditor/store"; import usePrevious from "utils/hooks/usePrevious"; export const useChangeActionCall = () => { diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 69979829732..19bf1e9dcaf 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -3,8 +3,8 @@ 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 { setPluginActionEditorDebuggerState } from "../../store/pluginActionEditorActions"; -import { getPluginActionDebuggerState } from "../../store/pluginActionEditorSelectors"; +import { setPluginActionEditorDebuggerState } from "../../store"; +import { getPluginActionDebuggerState } from "../../store"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { usePluginActionResponseTabs } from "./hooks"; diff --git a/app/client/src/PluginActionEditor/index.ts b/app/client/src/PluginActionEditor/index.ts index 3eb9a8ff7f1..f0f9b933f1a 100644 --- a/app/client/src/PluginActionEditor/index.ts +++ b/app/client/src/PluginActionEditor/index.ts @@ -13,7 +13,3 @@ export type { export { default as PluginActionNameEditor } from "./components/PluginActionNameEditor"; export type { PluginActionEditorState } from "./store/pluginEditorReducer"; -export { default as PluginActionEditorReducer } from "./store/pluginEditorReducer"; - -export * from "./store/pluginActionEditorActions"; -export * from "./store/pluginActionEditorSelectors"; diff --git a/app/client/src/PluginActionEditor/store/index.ts b/app/client/src/PluginActionEditor/store/index.ts new file mode 100644 index 00000000000..e1680cfdbf9 --- /dev/null +++ b/app/client/src/PluginActionEditor/store/index.ts @@ -0,0 +1,4 @@ +export { default as pluginActionReducer } from "./pluginEditorReducer"; + +export * from "./pluginActionEditorActions"; +export * from "./pluginActionEditorSelectors"; diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 49ac9952e0d..70453220510 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -20,7 +20,7 @@ import { ApiResponseHeaders } from "PluginActionEditor/components/PluginActionRe import { noop } from "lodash"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import { getErrorCount } from "selectors/debuggerSelectors"; -import { getPluginActionDebuggerState } from "PluginActionEditor"; +import { getPluginActionDebuggerState } from "PluginActionEditor/store"; function usePluginActionResponseTabs() { const { action, actionResponse, plugin } = usePluginActionContext(); diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts index 879daeec6bb..f5ecd94c708 100644 --- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts +++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts @@ -79,7 +79,7 @@ import { getPluginActionDebuggerState, setPluginActionEditorDebuggerState, setPluginActionEditorSelectedTab, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; export const AppIDEFocusElements: FocusElementsConfigList = { [FocusEntity.DATASOURCE_LIST]: [ diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index b56ff0f101d..dfab4fd9846 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -49,7 +49,7 @@ import activeFieldReducer from "reducers/uiReducers/activeFieldEditorReducer"; import selectedWorkspaceReducer from "ee/reducers/uiReducers/selectedWorkspaceReducer"; import ideReducer from "reducers/uiReducers/ideReducer"; import consolidatedPageLoadReducer from "reducers/uiReducers/consolidatedPageLoadReducer"; -import { PluginActionEditorReducer } from "PluginActionEditor"; +import { pluginActionReducer } from "PluginActionEditor/store"; export const uiReducerObject = { analytics: analyticsReducer, @@ -103,5 +103,5 @@ export const uiReducerObject = { activeField: activeFieldReducer, ide: ideReducer, consolidatedPageLoad: consolidatedPageLoadReducer, - pluginActionEditor: PluginActionEditorReducer, + pluginActionEditor: pluginActionReducer, }; diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index c6c0326a097..7a43765750b 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -22,7 +22,7 @@ import { EMPTY_RESPONSE } from "./emptyResponse"; import { getPluginActionDebuggerState, setPluginActionEditorDebuggerState, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "ee/entities/IDE/constants"; import useDebuggerTriggerClick from "./Debugger/hooks/useDebuggerTriggerClick"; diff --git a/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts b/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts index a967db0c719..e3a01d8e42f 100644 --- a/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts +++ b/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts @@ -9,7 +9,7 @@ import { getJsPaneDebuggerState } from "selectors/jsPaneSelectors"; import { getPluginActionDebuggerState, setPluginActionEditorDebuggerState, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; import { getCanvasDebuggerState } from "selectors/debuggerSelectors"; import { getIDEViewMode } from "selectors/ideSelectors"; import { useDispatch, useSelector } from "react-redux"; diff --git a/app/client/src/pages/Editor/APIEditor/Editor.tsx b/app/client/src/pages/Editor/APIEditor/Editor.tsx index eaccbf91722..dd0767787cb 100644 --- a/app/client/src/pages/Editor/APIEditor/Editor.tsx +++ b/app/client/src/pages/Editor/APIEditor/Editor.tsx @@ -26,7 +26,7 @@ import { getActionIsDeleting, getActionIsRunning, isPluginActionCreating, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; import * as Sentry from "@sentry/react"; import EntityNotFoundPane from "pages/Editor/EntityNotFoundPane"; import type { ApplicationPayload } from "entities/Application"; diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx index 01552a631c8..72009d651d6 100644 --- a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx +++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx @@ -22,7 +22,7 @@ import { Classes } from "@appsmith/ads-old"; import { getPostBodyFormat, updatePostBodyContentType, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; import type { CodeEditorExpected } from "components/editorComponents/CodeEditor"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import { createMessage, API_PANE_NO_BODY } from "ee/constants/messages"; diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts index 3d651884c91..7e8835a1dd3 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts @@ -2,7 +2,7 @@ import { call, delay, put } from "redux-saga/effects"; import type { EntityInfo, IApiPaneNavigationConfig } from "../types"; import { ActionPaneNavigation } from "./exports"; import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants"; -import { setPluginActionEditorSelectedTab } from "PluginActionEditor"; +import { setPluginActionEditorSelectedTab } from "PluginActionEditor/store"; import { NAVIGATION_DELAY } from "../costants"; import { isNumber } from "lodash"; diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts index ccf2ed3a56f..16faed0b7a3 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts @@ -8,7 +8,7 @@ import { getFormEvaluationState } from "selectors/formSelectors"; import type { FormEvaluationState } from "reducers/evaluationReducers/formEvaluationReducer"; import { isEmpty } from "lodash"; import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; -import { isActionSaving } from "PluginActionEditor"; +import { isActionSaving } from "PluginActionEditor/store"; export default class QueryPaneNavigation extends ActionPaneNavigation { constructor(entityInfo: EntityInfo) { diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx index c904609724f..8bbdc69257f 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx @@ -39,7 +39,7 @@ import { useEditorType } from "ee/hooks"; import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks"; import AIDataSources from "./AIDataSources"; import Debugger from "../DataSourceEditor/Debugger"; -import { isPluginActionCreating } from "PluginActionEditor"; +import { isPluginActionCreating } from "PluginActionEditor/store"; const NewIntegrationsContainer = styled.div` ${thinScrollbar}; diff --git a/app/client/src/pages/Editor/QueryEditor/Editor.tsx b/app/client/src/pages/Editor/QueryEditor/Editor.tsx index b769641eda3..5f56591969d 100644 --- a/app/client/src/pages/Editor/QueryEditor/Editor.tsx +++ b/app/client/src/pages/Editor/QueryEditor/Editor.tsx @@ -45,7 +45,7 @@ import { getActionIsDeleting, getActionIsRunning, isPluginActionCreating, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; const EmptyStateContainer = styled.div` display: flex; diff --git a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts index 3a071918a80..102bc553d77 100644 --- a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts +++ b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts @@ -170,7 +170,7 @@ import { isActionDirty, isActionSaving, setPluginActionEditorDebuggerState, -} from "PluginActionEditor"; +} from "PluginActionEditor/store"; enum ActionResponseDataTypes { BINARY = "BINARY", diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index d2b1c06ce7b..cf6f4cf7904 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/app/client/src/sagas/ApiPaneSagas.ts @@ -61,7 +61,7 @@ import { import { updateReplayEntity } from "actions/pageActions"; import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils"; import type { Plugin } from "api/PluginApi"; -import { getPostBodyFormat } from "../PluginActionEditor"; +import { getPostBodyFormat } from "../PluginActionEditor/store"; import { apiEditorIdURL, datasourcesEditorIdURL } from "ee/RouteBuilder"; import { getCurrentBasePageId } from "selectors/editorSelectors"; import { validateResponse } from "./ErrorSagas"; diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index ffc0058a66e..ee3560dd503 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -27,7 +27,7 @@ import { } from "selectors/dataTreeSelectors"; import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; -import { getActionEditorSavingMap } from "PluginActionEditor"; +import { getActionEditorSavingMap } from "PluginActionEditor/store"; import { getCanvasWidgets, getJSCollections, diff --git a/app/client/src/utils/replayHelpers.tsx b/app/client/src/utils/replayHelpers.tsx index 07944c91308..70f7aac9ad9 100644 --- a/app/client/src/utils/replayHelpers.tsx +++ b/app/client/src/utils/replayHelpers.tsx @@ -16,7 +16,7 @@ import { ACTION_CONFIGURATION_CHANGED, } from "ee/constants/messages"; import { toast } from "@appsmith/ads"; -import { setPluginActionEditorSelectedTab } from "PluginActionEditor"; +import { setPluginActionEditorSelectedTab } from "PluginActionEditor/store"; import { API_EDITOR_TABS } from "../constants/ApiEditorConstants/CommonApiConstants"; import store from "../store"; From ce4ba255c5adfa7ebac07f86389b43f19fd22f27 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 2 Oct 2024 15:50:16 +0530 Subject: [PATCH 4/8] remove query pane reducer --- .../hooks/useChangeActionCall.test.tsx | 8 +- .../hooks/useChangeActionCall.ts | 3 +- .../store/pluginActionEditorActions.ts | 21 +- app/client/src/actions/queryPaneActions.ts | 38 --- .../src/ce/navigation/FocusElements/AppIDE.ts | 2 +- app/client/src/ce/reducers/index.tsx | 2 - .../src/ce/reducers/uiReducers/index.tsx | 2 - .../reducers/uiReducers/queryPaneReducer.ts | 231 ------------------ .../src/ce/selectors/appIDESelectors.ts | 19 ++ .../editorComponents/Debugger/Schema.tsx | 6 +- .../ActionPane/QueryPaneNavigation.ts | 8 +- .../src/pages/Editor/QueryEditor/Editor.tsx | 2 +- .../Editor/QueryEditor/EditorJSONtoForm.tsx | 16 +- .../Editor/QueryEditor/QueryDebuggerTabs.tsx | 56 +++-- .../Editor/QueryEditor/QueryResponseTab.tsx | 16 +- .../src/pages/Editor/QueryEditor/index.tsx | 2 +- .../sagas/ActionExecution/PluginActionSaga.ts | 2 +- app/client/src/sagas/QueryPaneSagas.ts | 2 +- .../src/selectors/queryPaneSelectors.ts | 38 --- 19 files changed, 116 insertions(+), 358 deletions(-) delete mode 100644 app/client/src/actions/queryPaneActions.ts delete mode 100644 app/client/src/ce/reducers/uiReducers/queryPaneReducer.ts delete mode 100644 app/client/src/selectors/queryPaneSelectors.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx index 04738e5a015..a927b0ded73 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx @@ -2,8 +2,7 @@ import { renderHook } from "@testing-library/react-hooks/dom"; import { useDispatch } from "react-redux"; import { PluginType } from "entities/Action"; import { usePluginActionContext } from "../../../PluginActionContext"; -import { changeApi } from "../../../store"; -import { changeQuery } from "actions/queryPaneActions"; +import { changeApi, changeQuery } from "../../../store"; import usePrevious from "utils/hooks/usePrevious"; import { useChangeActionCall } from "./useChangeActionCall"; @@ -11,11 +10,8 @@ jest.mock("react-redux", () => ({ useDispatch: jest.fn(), })); -jest.mock("actions/apiPaneActions", () => ({ +jest.mock("../../../store", () => ({ changeApi: jest.fn(), -})); - -jest.mock("actions/queryPaneActions", () => ({ changeQuery: jest.fn(), })); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts index 9ade8320fd0..be76f258b79 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts @@ -1,9 +1,8 @@ import { useEffect } from "react"; import { useDispatch } from "react-redux"; -import { changeQuery } from "actions/queryPaneActions"; import { PluginType } from "entities/Action"; import { usePluginActionContext } from "PluginActionEditor"; -import { changeApi } from "PluginActionEditor/store"; +import { changeApi, changeQuery } from "PluginActionEditor/store"; import usePrevious from "utils/hooks/usePrevious"; export const useChangeActionCall = () => { diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts index d5cf2b763de..372c33af90a 100644 --- a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts +++ b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts @@ -3,6 +3,7 @@ import { type ReduxAction, ReduxActionTypes, } from "ee/constants/ReduxActionConstants"; +import type { Action } from "entities/Action"; export const setPluginActionEditorDebuggerState = ( payload: Partial, @@ -11,7 +12,7 @@ export const setPluginActionEditorDebuggerState = ( payload, }); -export const setPluginActionEditorSelectedTab = (payload: number) => ({ +export const setPluginActionEditorSelectedTab = (payload: number | string) => ({ type: ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB, payload, }); @@ -34,3 +35,21 @@ export const changeApi = ( 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, + }; +}; diff --git a/app/client/src/actions/queryPaneActions.ts b/app/client/src/actions/queryPaneActions.ts deleted file mode 100644 index 67a2b88f1c0..00000000000 --- a/app/client/src/actions/queryPaneActions.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { ReduxAction } from "ee/constants/ReduxActionConstants"; -import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; -import type { Action } from "entities/Action"; -import type { QueryPaneDebuggerState } from "ee/reducers/uiReducers/queryPaneReducer"; - -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, - }; -}; - -export const setQueryPaneConfigSelectedTabIndex: ( - payload: string, -) => ReduxAction<{ selectedTabIndex: string }> = (payload: string) => ({ - type: ReduxActionTypes.SET_QUERY_PANE_CONFIG_SELECTED_TAB, - payload: { selectedTabIndex: payload }, -}); - -export const setQueryPaneDebuggerState = ( - payload: Partial, -) => { - return { - type: ReduxActionTypes.SET_QUERY_PANE_DEBUGGER_STATE, - payload, - }; -}; diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts index f5ecd94c708..edf6f9ce518 100644 --- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts +++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts @@ -54,7 +54,7 @@ import { getPropertyPaneWidth, getSelectedPropertyPanel, } from "selectors/propertyPaneSelectors"; -import { getLastQueryTab } from "selectors/queryPaneSelectors"; +import { getLastQueryTab } from "ee/selectors/appIDESelectors"; import { getDebuggerContext } from "selectors/debuggerSelectors"; import { setDebuggerContext } from "actions/debuggerActions"; import { DefaultDebuggerContext } from "reducers/uiReducers/debuggerReducer"; diff --git a/app/client/src/ce/reducers/index.tsx b/app/client/src/ce/reducers/index.tsx index e8b06cdbe25..66d367063fe 100644 --- a/app/client/src/ce/reducers/index.tsx +++ b/app/client/src/ce/reducers/index.tsx @@ -13,7 +13,6 @@ import type { AppViewReduxState } from "reducers/uiReducers/appViewReducer"; import type { DatasourcePaneReduxState } from "reducers/uiReducers/datasourcePaneReducer"; import type { ApplicationsReduxState } from "ee/reducers/uiReducers/applicationsReducer"; import type { PageListReduxState } from "reducers/entityReducers/pageListReducer"; -import type { QueryPaneReduxState } from "ee/reducers/uiReducers/queryPaneReducer"; import type { PluginDataState } from "reducers/entityReducers/pluginsReducer"; import type { AuthState } from "reducers/uiReducers/authReducer"; import type { WorkspaceReduxState } from "ee/reducers/uiReducers/workspaceReducer"; @@ -110,7 +109,6 @@ export interface AppState { users: UsersReduxState; widgetDragResize: WidgetDragResizeState; imports: ImportReduxState; - queryPane: QueryPaneReduxState; datasourcePane: DatasourcePaneReduxState; help: HelpReduxState; apiName: ApiNameReduxState; diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index dfab4fd9846..35c9294b396 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -11,7 +11,6 @@ import buildingBlockReducer from "reducers/uiReducers/buildingBlockReducer"; import usersReducer from "reducers/uiReducers/usersReducer"; import { widgetDraggingReducer } from "reducers/uiReducers/dragResizeReducer"; import importReducer from "reducers/uiReducers/importReducer"; -import queryPaneReducer from "ee/reducers/uiReducers/queryPaneReducer"; import helpReducer from "reducers/uiReducers/helpReducer"; import apiNameReducer from "ee/reducers/uiReducers/apiNameReducer"; import explorerReducer from "ee/reducers/uiReducers/explorerReducer"; @@ -67,7 +66,6 @@ export const uiReducerObject = { users: usersReducer, widgetDragResize: widgetDraggingReducer, imports: importReducer, - queryPane: queryPaneReducer, datasourcePane: datasourcePaneReducer, datasourceName: datasourceNameReducer, help: helpReducer, diff --git a/app/client/src/ce/reducers/uiReducers/queryPaneReducer.ts b/app/client/src/ce/reducers/uiReducers/queryPaneReducer.ts deleted file mode 100644 index 83b6d37aab2..00000000000 --- a/app/client/src/ce/reducers/uiReducers/queryPaneReducer.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { createReducer } from "utils/ReducerUtils"; -import type { ReduxAction } from "ee/constants/ReduxActionConstants"; -import { - ReduxActionTypes, - ReduxActionErrorTypes, -} from "ee/constants/ReduxActionConstants"; -import { omit } from "lodash"; -import type { Action } from "entities/Action"; -import type { ActionResponse } from "api/ActionAPI"; -import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; -import { DEBUGGER_TAB_KEYS } from "../../../components/editorComponents/Debugger/helpers"; - -export const initialState: QueryPaneReduxState = { - isRunning: {}, - isSaving: {}, - isDeleting: {}, - runErrorMessage: {}, - debugger: { - open: false, - responseTabHeight: ActionExecutionResizerHeight, - }, - selectedConfigTabIndex: "0", -}; - -export interface QueryPaneDebuggerState { - open: boolean; - responseTabHeight: number; - selectedTab?: string; -} - -export interface QueryPaneReduxState { - isRunning: Record; - isSaving: Record; // RR - isDeleting: Record; - runErrorMessage: Record; - selectedConfigTabIndex: string; - debugger: QueryPaneDebuggerState; -} - -export const handlers = { - [ReduxActionTypes.CREATE_ACTION_INIT]: (state: QueryPaneReduxState) => { - return { - ...state, - isCreating: true, - }; - }, - [ReduxActionTypes.CREATE_ACTION_SUCCESS]: (state: QueryPaneReduxState) => { - return { - ...state, - isCreating: false, - }; - }, - [ReduxActionErrorTypes.CREATE_ACTION_ERROR]: (state: QueryPaneReduxState) => { - return { - ...state, - isCreating: false, - }; - }, - [ReduxActionTypes.QUERY_PANE_CHANGE]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - lastUsed: action.payload.id, - }), - [ReduxActionTypes.UPDATE_ACTION_INIT]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isSaving: { - ...state.isSaving, - [action.payload.id]: true, - }, - }), - [ReduxActionTypes.UPDATE_ACTION_SUCCESS]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ data: Action }>, - ) => ({ - ...state, - isSaving: { - ...state.isSaving, - [action.payload.data.id]: false, - }, - }), - [ReduxActionErrorTypes.UPDATE_ACTION_ERROR]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isSaving: { - ...state.isSaving, - [action.payload.id]: false, - }, - }), - [ReduxActionTypes.DELETE_ACTION_INIT]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isDeleting: { - ...state.isDeleting, - [action.payload.id]: true, - }, - }), - [ReduxActionTypes.DELETE_ACTION_SUCCESS]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isDeleting: { - ...state.isDeleting, - [action.payload.id]: false, - }, - }), - [ReduxActionErrorTypes.DELETE_ACTION_ERROR]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ id: string }>, - ) => ({ - ...state, - isDeleting: { - ...state.isDeleting, - [action.payload.id]: false, - }, - }), - [ReduxActionTypes.RUN_ACTION_REQUEST]: ( - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - state: any, - action: ReduxAction<{ id: string }>, - ): QueryPaneReduxState => { - return { - ...state, - isRunning: { - ...state.isRunning, - [action.payload.id]: true, - }, - debugger: { - ...state.debugger, - selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, - open: true, - }, - }; - }, - - [ReduxActionTypes.RUN_ACTION_CANCELLED]: ( - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - state: any, - action: ReduxAction<{ id: string }>, - ) => { - return { - ...state, - isRunning: { - ...state.isRunning, - [action.payload.id]: false, - }, - }; - }, - - [ReduxActionTypes.RUN_ACTION_SUCCESS]: ( - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - state: any, - action: ReduxAction<{ [id: string]: ActionResponse }>, - ) => { - const actionId = Object.keys(action.payload)[0]; - - return { - ...state, - isRunning: { - ...state.isRunning, - [actionId]: false, - }, - runErrorMessage: omit(state.runErrorMessage, [actionId]), - }; - }, - [ReduxActionErrorTypes.RUN_ACTION_ERROR]: ( - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - state: any, - action: ReduxAction<{ id: string; error: Error }>, - ) => { - const { error, id } = action.payload; - - return { - ...state, - isRunning: { - ...state.isRunning, - [id]: false, - }, - runErrorMessage: { - ...state.runError, - [id]: error.message, - }, - }; - }, - [ReduxActionTypes.SET_QUERY_PANE_CONFIG_SELECTED_TAB]: ( - state: QueryPaneReduxState, - action: ReduxAction<{ selectedTabIndex: number }>, - ) => { - const { selectedTabIndex } = action.payload; - - return { - ...state, - selectedConfigTabIndex: selectedTabIndex, - }; - }, - [ReduxActionTypes.SET_QUERY_PANE_DEBUGGER_STATE]: ( - state: QueryPaneReduxState, - action: ReduxAction>, - ) => { - return { - ...state, - debugger: { - ...state.debugger, - ...action.payload, - }, - }; - }, - [ReduxActionTypes.RESET_EDITOR_REQUEST]: (state: QueryPaneReduxState) => { - return { - ...state, - isSaving: {}, - }; - }, -}; - -const queryPaneReducer = createReducer(initialState, handlers); - -export default queryPaneReducer; diff --git a/app/client/src/ce/selectors/appIDESelectors.ts b/app/client/src/ce/selectors/appIDESelectors.ts index d7df0c96b1e..11c79b72050 100644 --- a/app/client/src/ce/selectors/appIDESelectors.ts +++ b/app/client/src/ce/selectors/appIDESelectors.ts @@ -7,6 +7,12 @@ import { } from "ee/selectors/entitiesSelector"; import { getJSTabs, getQueryTabs } from "selectors/ideSelectors"; import type { AppState } from "ee/reducers"; +import { + type FocusEntityInfo, + identifyEntityFromPath, +} from "navigation/FocusEntity"; +import { getCurrentPageId } from "selectors/editorSelectors"; +import { getQueryEntityItemUrl } from "ee/pages/Editor/IDE/EditorPane/Query/utils"; export type EditorSegmentList = Array<{ group: string | "NA"; @@ -68,3 +74,16 @@ export const selectQuerySegmentEditorTabs = (state: AppState) => { return tabs.map((tab) => keyedItems[tab]).filter(Boolean); }; +export const getLastQueryTab = ( + state: AppState, +): FocusEntityInfo | undefined => { + const tabs = selectQuerySegmentEditorTabs(state); + const pageId = getCurrentPageId(state); + + if (tabs.length) { + const url = getQueryEntityItemUrl(tabs[tabs.length - 1], pageId); + const urlWithoutQueryParams = url.split("?")[0]; + + return identifyEntityFromPath(urlWithoutQueryParams); + } +}; diff --git a/app/client/src/components/editorComponents/Debugger/Schema.tsx b/app/client/src/components/editorComponents/Debugger/Schema.tsx index 46e5b3cc366..ffd16c40e30 100644 --- a/app/client/src/components/editorComponents/Debugger/Schema.tsx +++ b/app/client/src/components/editorComponents/Debugger/Schema.tsx @@ -12,7 +12,7 @@ import DatasourceField from "pages/Editor/DatasourceInfo/DatasourceField"; import { find } from "lodash"; import type { AppState } from "ee/reducers"; import RenderInterimDataState from "pages/Editor/DatasourceInfo/RenderInterimDataState"; -import { getQueryPaneDebuggerState } from "selectors/queryPaneSelectors"; +import { getPluginActionDebuggerState } from "PluginActionEditor/store"; interface Props { datasourceId: string; @@ -24,7 +24,7 @@ const Schema = (props: Props) => { const datasourceStructure = useSelector((state) => getDatasourceStructureById(state, props.datasourceId), ); - const { responseTabHeight } = useSelector(getQueryPaneDebuggerState); + const { responseTabHeight } = useSelector(getPluginActionDebuggerState); const [selectedTable, setSelectedTable] = useState(); const selectedTableItems = find(datasourceStructure?.tables, [ @@ -53,7 +53,7 @@ const Schema = (props: Props) => { if (!selectedTable && datasourceStructure?.tables?.length && !isLoading) { setSelectedTable(datasourceStructure.tables[0].name); } - }, [selectedTable, props.datasourceId, isLoading]); + }, [selectedTable, props.datasourceId, isLoading, datasourceStructure]); if (!datasourceStructure) { return ( diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts index 16faed0b7a3..2d3ee6dc913 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/QueryPaneNavigation.ts @@ -2,13 +2,15 @@ import { call, delay, put, race, select, take } from "redux-saga/effects"; import type { EntityInfo, IQueryPaneNavigationConfig } from "../types"; import { ActionPaneNavigation } from "./exports"; import { NAVIGATION_DELAY } from "../costants"; -import { setQueryPaneConfigSelectedTabIndex } from "actions/queryPaneActions"; import { EDITOR_TABS } from "constants/QueryEditorConstants"; import { getFormEvaluationState } from "selectors/formSelectors"; import type { FormEvaluationState } from "reducers/evaluationReducers/formEvaluationReducer"; import { isEmpty } from "lodash"; import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; -import { isActionSaving } from "PluginActionEditor/store"; +import { + isActionSaving, + setPluginActionEditorSelectedTab, +} from "PluginActionEditor/store"; export default class QueryPaneNavigation extends ActionPaneNavigation { constructor(entityInfo: EntityInfo) { @@ -44,7 +46,7 @@ export default class QueryPaneNavigation extends ActionPaneNavigation { if (!this.entityInfo.propertyPath) return; if (config.tab) { - yield put(setQueryPaneConfigSelectedTabIndex(config.tab)); + yield put(setPluginActionEditorSelectedTab(config.tab)); } yield call(this.waitForFormUpdate); diff --git a/app/client/src/pages/Editor/QueryEditor/Editor.tsx b/app/client/src/pages/Editor/QueryEditor/Editor.tsx index 5f56591969d..840eefd4c4b 100644 --- a/app/client/src/pages/Editor/QueryEditor/Editor.tsx +++ b/app/client/src/pages/Editor/QueryEditor/Editor.tsx @@ -258,7 +258,7 @@ class QueryEditor extends React.Component { const mapStateToProps = (state: AppState, props: OwnProps): ReduxStateProps => { const { baseApiId, baseQueryId } = props.match.params; const baseActionId = baseQueryId || baseApiId || ""; - const { runErrorMessage } = state.ui.queryPane; + const { runErrorMessage } = state.ui.pluginActionEditor; const { plugins } = state.entities; const { editorConfigs } = plugins; diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index 370964cc6dc..65cf549dcbe 100644 --- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx +++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx @@ -23,8 +23,10 @@ import type { Plugin } from "api/PluginApi"; import type { UIComponentTypes } from "api/PluginApi"; import { EDITOR_TABS } from "constants/QueryEditorConstants"; import type { FormEvalOutput } from "reducers/evaluationReducers/formEvaluationReducer"; -import { getQueryPaneConfigSelectedTabIndex } from "selectors/queryPaneSelectors"; -import { setQueryPaneConfigSelectedTabIndex } from "actions/queryPaneActions"; +import { + getPluginActionDebuggerState, + setPluginActionEditorDebuggerState, +} from "PluginActionEditor/store"; import type { SourceEntity } from "entities/AppsmithConsole"; import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils"; import { DocsLink, openDoc } from "../../../constants/DocumentationLinks"; @@ -230,11 +232,15 @@ export function EditorJSONtoForm(props: Props) { id: currentActionConfig ? currentActionConfig.id : "", }; - const selectedConfigTab = useSelector(getQueryPaneConfigSelectedTabIndex); + const { selectedTab } = useSelector(getPluginActionDebuggerState); const setSelectedConfigTab = useCallback( (selectedIndex: string) => { - dispatch(setQueryPaneConfigSelectedTabIndex(selectedIndex)); + dispatch( + setPluginActionEditorDebuggerState({ + selectedTab: selectedIndex, + }), + ); }, [dispatch], ); @@ -264,7 +270,7 @@ export function EditorJSONtoForm(props: Props) { diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index 160ce631ac0..a616771a2e4 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -27,12 +27,14 @@ import { import { DatasourceComponentTypes } from "api/PluginApi"; import { fetchDatasourceStructure } from "actions/datasourceActions"; import { DatasourceStructureContext } from "entities/Datasource"; -import { getQueryPaneDebuggerState } from "selectors/queryPaneSelectors"; -import { setQueryPaneDebuggerState } from "actions/queryPaneActions"; +import { + getPluginActionDebuggerState, + setPluginActionEditorDebuggerState, +} from "PluginActionEditor/store"; import { actionResponseDisplayDataFormats } from "../utils"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "ee/entities/IDE/constants"; -import { IDEBottomView, ViewHideBehaviour } from "../../../IDE"; +import { IDEBottomView, ViewHideBehaviour } from "IDE"; const ResultsCount = styled.div` position: absolute; @@ -68,7 +70,7 @@ function QueryDebuggerTabs({ const dispatch = useDispatch(); const { open, responseTabHeight, selectedTab } = useSelector( - getQueryPaneDebuggerState, + getPluginActionDebuggerState, ); const { responseDisplayFormat } = @@ -107,7 +109,12 @@ function QueryDebuggerTabs({ ), ); } - }, []); + }, [ + currentActionConfig, + datasourceStructure, + dispatch, + pluginDatasourceForm, + ]); // These useEffects are used to open the response tab by default for page load queries // as for page load queries, query response is available and can be shown in response tab @@ -121,25 +128,30 @@ function QueryDebuggerTabs({ !showResponseOnFirstLoad ) { dispatch( - setQueryPaneDebuggerState({ + setPluginActionEditorDebuggerState({ open: true, selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, }), ); setShowResponseOnFirstLoad(true); } - }, [responseDisplayFormat, actionResponse, showResponseOnFirstLoad]); + }, [ + responseDisplayFormat, + actionResponse, + showResponseOnFirstLoad, + dispatch, + ]); useEffect(() => { if (showSchema && !selectedTab) { dispatch( - setQueryPaneDebuggerState({ + setPluginActionEditorDebuggerState({ open: true, selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB, }), ); } - }, [showSchema, currentActionConfig?.id, selectedTab]); + }, [showSchema, selectedTab, dispatch]); // When multiple page load queries exist, we want to response tab by default for all of them // Hence this useEffect will reset showResponseOnFirstLoad flag used to track whether to show response tab or not @@ -170,17 +182,27 @@ function QueryDebuggerTabs({ } } - const setQueryResponsePaneHeight = useCallback((height: number) => { - dispatch(setQueryPaneDebuggerState({ responseTabHeight: height })); - }, []); + const setQueryResponsePaneHeight = useCallback( + (height: number) => { + dispatch( + setPluginActionEditorDebuggerState({ responseTabHeight: height }), + ); + }, + [dispatch], + ); const onToggle = useCallback(() => { - dispatch(setQueryPaneDebuggerState({ open: !open })); - }, [open]); + dispatch(setPluginActionEditorDebuggerState({ open: !open })); + }, [dispatch, open]); - const setSelectedResponseTab = useCallback((tabKey: string) => { - dispatch(setQueryPaneDebuggerState({ open: true, selectedTab: tabKey })); - }, []); + const setSelectedResponseTab = useCallback( + (tabKey: string) => { + dispatch( + setPluginActionEditorDebuggerState({ open: true, selectedTab: tabKey }), + ); + }, + [dispatch], + ); const ideViewMode = useSelector(getIDEViewMode); diff --git a/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx b/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx index ba147dc5bb3..8dddc93a8fb 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx @@ -36,8 +36,10 @@ import { isString } from "lodash"; import ActionExecutionInProgressView from "components/editorComponents/ActionExecutionInProgressView"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import BindDataButton from "./BindDataButton"; -import { getQueryPaneDebuggerState } from "selectors/queryPaneSelectors"; -import { setQueryPaneConfigSelectedTabIndex } from "actions/queryPaneActions"; +import { + getPluginActionDebuggerState, + setPluginActionEditorDebuggerState, +} from "PluginActionEditor/store"; import { EDITOR_TABS } from "constants/QueryEditorConstants"; import { createMessage, @@ -97,7 +99,7 @@ const QueryResponseTab = (props: Props) => { const actionResponse = useSelector((state) => getActionData(state, currentActionConfig.id), ); - const { responseTabHeight } = useSelector(getQueryPaneDebuggerState); + const { responseTabHeight } = useSelector(getPluginActionDebuggerState); const { responseDataTypes, responseDisplayFormat } = actionResponseDisplayDataFormats(actionResponse); @@ -216,8 +218,12 @@ const QueryResponseTab = (props: Props) => { } const navigateToSettings = useCallback(() => { - dispatch(setQueryPaneConfigSelectedTabIndex(EDITOR_TABS.SETTINGS)); - }, []); + dispatch( + setPluginActionEditorDebuggerState({ + selectedTab: EDITOR_TABS.SETTINGS, + }), + ); + }, [dispatch]); const preparedStatementCalloutLinks: CalloutLinkProps[] = [ { diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx index 03457a6228e..2d458fb90c9 100644 --- a/app/client/src/pages/Editor/QueryEditor/index.tsx +++ b/app/client/src/pages/Editor/QueryEditor/index.tsx @@ -13,7 +13,7 @@ import { getIsEditorInitialized, getPagePermissions, } from "selectors/editorSelectors"; -import { changeQuery } from "actions/queryPaneActions"; +import { changeQuery } from "PluginActionEditor/store"; import { DatasourceCreateEntryPoints } from "constants/Datasource"; import { getActionByBaseId, diff --git a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts index 102bc553d77..7c9201a0616 100644 --- a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts +++ b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts @@ -145,7 +145,6 @@ import { handleStoreOperations } from "./StoreActionSaga"; import { fetchPageAction } from "actions/pageActions"; import type { Datasource } from "entities/Datasource"; import { softRefreshDatasourceStructure } from "actions/datasourceActions"; -import { changeQuery } from "actions/queryPaneActions"; import { getCurrentEnvironmentDetails, getCurrentEnvironmentName, @@ -167,6 +166,7 @@ import { import type { JSAction, JSCollection } from "entities/JSCollection"; import { getAllowedActionAnalyticsKeys } from "constants/AppsmithActionConstants/formConfig/ActionAnalyticsConfig"; import { + changeQuery, isActionDirty, isActionSaving, setPluginActionEditorDebuggerState, diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts index 6195973f9fd..39bea13dfc1 100644 --- a/app/client/src/sagas/QueryPaneSagas.ts +++ b/app/client/src/sagas/QueryPaneSagas.ts @@ -77,7 +77,7 @@ import type { FeatureFlags } from "ee/entities/FeatureFlag"; import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors"; import { isGACEnabled } from "ee/utils/planHelpers"; import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; -import type { ChangeQueryPayload } from "actions/queryPaneActions"; +import type { ChangeQueryPayload } from "PluginActionEditor/store"; import { getApplicationByIdFromWorkspaces, getCurrentApplicationIdForCreateNewApp, diff --git a/app/client/src/selectors/queryPaneSelectors.ts b/app/client/src/selectors/queryPaneSelectors.ts deleted file mode 100644 index b87485f2be7..00000000000 --- a/app/client/src/selectors/queryPaneSelectors.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { AppState } from "ee/reducers"; -import { getCurrentPageId } from "./editorSelectors"; -import type { FocusEntityInfo } from "../navigation/FocusEntity"; -import { identifyEntityFromPath } from "../navigation/FocusEntity"; -import { getQueryEntityItemUrl } from "ee/pages/Editor/IDE/EditorPane/Query/utils"; -import { selectQuerySegmentEditorTabs } from "ee/selectors/appIDESelectors"; - -export const getQueryPaneConfigSelectedTabIndex = (state: AppState) => - state.ui.queryPane.selectedConfigTabIndex; - -export const getQueryPaneDebuggerState = (state: AppState) => - state.ui.queryPane.debugger; - -export const getQueryRunErrorMessage = (state: AppState, id: string) => { - const { runErrorMessage } = state.ui.queryPane; - - return runErrorMessage[id]; -}; - -export const getQueryIsRunning = (state: AppState, id: string): boolean => { - const { isRunning } = state.ui.queryPane; - - return !!isRunning[id]; -}; - -export const getLastQueryTab = ( - state: AppState, -): FocusEntityInfo | undefined => { - const tabs = selectQuerySegmentEditorTabs(state); - const pageId = getCurrentPageId(state); - - if (tabs.length) { - const url = getQueryEntityItemUrl(tabs[tabs.length - 1], pageId); - const urlWithoutQueryParams = url.split("?")[0]; - - return identifyEntityFromPath(urlWithoutQueryParams); - } -}; From f9a81bae7c885fb2aaaec1bd9570e406cafb103a Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 2 Oct 2024 16:03:17 +0530 Subject: [PATCH 5/8] left out file --- app/client/src/ee/reducers/uiReducers/queryPaneReducer.ts | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 app/client/src/ee/reducers/uiReducers/queryPaneReducer.ts diff --git a/app/client/src/ee/reducers/uiReducers/queryPaneReducer.ts b/app/client/src/ee/reducers/uiReducers/queryPaneReducer.ts deleted file mode 100644 index c2e8eabefee..00000000000 --- a/app/client/src/ee/reducers/uiReducers/queryPaneReducer.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "ce/reducers/uiReducers/queryPaneReducer"; -import { default as CE_queryPaneReducer } from "ce/reducers/uiReducers/queryPaneReducer"; -export default CE_queryPaneReducer; From 95a7e8f0a650ac55bed4981ba7cd167a717a38ab Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 2 Oct 2024 16:21:04 +0530 Subject: [PATCH 6/8] fix tests --- .../hooks/useChangeActionCall.test.tsx | 2 +- .../PluginActionResponse/PluginActionResponse.tsx | 2 +- .../PluginActionEditor/store/pluginEditorReducer.ts | 2 +- .../hooks/usePluginActionResponseTabs.tsx | 2 +- .../pages/Applications/CreateNewAppsOption.test.tsx | 2 +- .../editorComponents/ApiResponseView.test.tsx | 2 +- .../components/editorComponents/ApiResponseView.tsx | 2 +- .../CodeEditor/EvaluatedValuePopup.tsx | 6 +++++- .../editorComponents/Debugger/DebugCTA.tsx | 2 +- .../editorComponents/Debugger/DebuggerTabs.tsx | 2 +- .../editorComponents/Debugger/constants.ts | 8 ++++++++ .../editorComponents/Debugger/helpers.tsx | 13 ++----------- .../Debugger/hooks/useDebuggerTriggerClick.ts | 2 +- .../editorComponents/EntityBottomTabs.tsx | 5 ++++- .../components/editorComponents/JSResponseView.tsx | 3 ++- .../src/pages/Editor/DataSourceEditor/Debugger.tsx | 10 +++++++++- app/client/src/pages/Editor/JSEditor/Form.tsx | 4 +++- .../Editor/QueryEditor/QueryDebuggerTabs.test.tsx | 2 +- .../pages/Editor/QueryEditor/QueryDebuggerTabs.tsx | 2 +- .../pages/Editor/QueryEditor/QueryResponseTab.tsx | 3 ++- .../src/sagas/ActionExecution/PluginActionSaga.ts | 2 +- app/client/src/sagas/ActionExecution/errorUtils.ts | 2 +- app/client/src/sagas/JSPaneSagas.ts | 2 +- 23 files changed, 50 insertions(+), 32 deletions(-) create mode 100644 app/client/src/components/editorComponents/Debugger/constants.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx index a927b0ded73..f68dfa38cd5 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx @@ -1,7 +1,7 @@ import { renderHook } from "@testing-library/react-hooks/dom"; import { useDispatch } from "react-redux"; import { PluginType } from "entities/Action"; -import { usePluginActionContext } from "../../../PluginActionContext"; +import { usePluginActionContext } from "PluginActionEditor"; import { changeApi, changeQuery } from "../../../store"; import usePrevious from "utils/hooks/usePrevious"; import { useChangeActionCall } from "./useChangeActionCall"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 19bf1e9dcaf..d2c5b0a2525 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -5,7 +5,7 @@ import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; import { useDispatch, useSelector } from "react-redux"; import { setPluginActionEditorDebuggerState } from "../../store"; import { getPluginActionDebuggerState } from "../../store"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { usePluginActionResponseTabs } from "./hooks"; diff --git a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts index 511520749cc..2b554b4be65 100644 --- a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts +++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts @@ -6,7 +6,7 @@ import { } from "ee/constants/ReduxActionConstants"; import type { Action } from "entities/Action"; import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import type { ActionResponse } from "api/ActionAPI"; import { omit } from "lodash"; import { objectKeys } from "@appsmith/utils"; diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 70453220510..4f312cea016 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -4,7 +4,7 @@ import type { BottomTab } from "components/editorComponents/EntityBottomTabs"; import { getIDEViewMode } from "selectors/ideSelectors"; import { useSelector } from "react-redux"; import { EditorViewMode } from "ee/entities/IDE/constants"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import { createMessage, DEBUGGER_ERRORS, diff --git a/app/client/src/ce/pages/Applications/CreateNewAppsOption.test.tsx b/app/client/src/ce/pages/Applications/CreateNewAppsOption.test.tsx index c21d7117905..180268afb6a 100644 --- a/app/client/src/ce/pages/Applications/CreateNewAppsOption.test.tsx +++ b/app/client/src/ce/pages/Applications/CreateNewAppsOption.test.tsx @@ -59,7 +59,7 @@ const defaultStoreState = { config: {}, }, }, - apiPane: { + pluginActionEditor: { isCreating: false, isRunning: {}, isSaving: {}, diff --git a/app/client/src/components/editorComponents/ApiResponseView.test.tsx b/app/client/src/components/editorComponents/ApiResponseView.test.tsx index cd747429b4f..b440e9a409c 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.test.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.test.tsx @@ -50,7 +50,7 @@ const storeState = { errorCount: 0, }, }, - apiPane: { + pluginActionEditor: { debugger: { open: true, responseTabHeight: 200, diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index 7a43765750b..e459b509c03 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -14,7 +14,7 @@ import ErrorLogs from "./Debugger/Errors"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import type { BottomTab } from "./EntityBottomTabs"; import EntityBottomTabs from "./EntityBottomTabs"; -import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "./Debugger/constants"; import { getErrorCount } from "selectors/debuggerSelectors"; import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; import type { Action } from "entities/Action"; diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx index 8e19d836f53..1f691141b9b 100644 --- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx @@ -29,7 +29,7 @@ import { getEntityNameAndPropertyPath } from "ee/workers/Evaluation/evaluationUt import { getPathNavigationUrl } from "selectors/navigationSelectors"; import { Button, Icon, Link, toast, Tooltip } from "@appsmith/ads"; import type { EvaluationError } from "utils/DynamicBindingUtils"; -import { DEBUGGER_TAB_KEYS } from "../Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "../Debugger/constants"; const modifiers: IPopoverSharedProps["modifiers"] = { offset: { @@ -92,6 +92,7 @@ const CurrentValueWrapper = styled.div<{ colorTheme: EditorTheme }>` display: flex; align-items: center; justify-content: space-between; + &:hover { .copyIconWrapper { display: flex; @@ -99,6 +100,7 @@ const CurrentValueWrapper = styled.div<{ colorTheme: EditorTheme }>` } /* for audit logs */ + .pushed-content .object-key-val, .variable-row { border-left: 1px solid var(--ads-v2-color-border) !important; @@ -173,6 +175,7 @@ const StyledIcon = styled(Icon)` &.open-collapse { transform: rotate(90deg); } + float: right; `; @@ -281,6 +284,7 @@ interface PreparedStatementValue { value: string; parameters: Record; } + export function PreparedStatementViewer(props: { evaluatedValue: PreparedStatementValue; }) { diff --git a/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx b/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx index 9aafa87a247..a6c6e4a23ab 100644 --- a/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx +++ b/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx @@ -7,7 +7,7 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { getTypographyByKey } from "@appsmith/ads-old"; import type { Message } from "entities/AppsmithConsole"; import ContextualMenu from "./ContextualMenu"; -import { DEBUGGER_TAB_KEYS } from "./helpers"; +import { DEBUGGER_TAB_KEYS } from "./constants"; import type { FieldEntityInformation } from "../CodeEditor/EditorConfig"; import { Button } from "@appsmith/ads"; diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx index 325b6e29d2d..b4a71622d2c 100644 --- a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx +++ b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx @@ -20,7 +20,7 @@ import { DEBUGGER_LOGS, INSPECT_ENTITY, } from "ee/constants/messages"; -import { DEBUGGER_TAB_KEYS } from "./helpers"; +import { DEBUGGER_TAB_KEYS } from "./constants"; import EntityBottomTabs from "../EntityBottomTabs"; import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; import { IDEBottomView, ViewHideBehaviour, ViewDisplayMode } from "IDE"; diff --git a/app/client/src/components/editorComponents/Debugger/constants.ts b/app/client/src/components/editorComponents/Debugger/constants.ts new file mode 100644 index 00000000000..48f26392969 --- /dev/null +++ b/app/client/src/components/editorComponents/Debugger/constants.ts @@ -0,0 +1,8 @@ +export enum DEBUGGER_TAB_KEYS { + SCHEMA_TAB = "schema", + RESPONSE_TAB = "response", + HEADER_TAB = "headers", + ERROR_TAB = "ERROR", + LOGS_TAB = "LOGS_TAB", + INSPECT_TAB = "INSPECT_TAB", +} diff --git a/app/client/src/components/editorComponents/Debugger/helpers.tsx b/app/client/src/components/editorComponents/Debugger/helpers.tsx index 287a30a901b..3dcc6bfb984 100644 --- a/app/client/src/components/editorComponents/Debugger/helpers.tsx +++ b/app/client/src/components/editorComponents/Debugger/helpers.tsx @@ -7,8 +7,8 @@ import { createMessage, OPEN_THE_DEBUGGER, PRESS } from "ee/constants/messages"; import type { DependencyMap } from "utils/DynamicBindingUtils"; import { isChildPropertyPath } from "utils/DynamicBindingUtils"; import { - matchBuilderPath, matchApiPath, + matchBuilderPath, matchQueryPath, } from "constants/routes"; import { getEntityNameAndPropertyPath } from "ee/workers/Evaluation/evaluationUtils"; @@ -22,8 +22,8 @@ const BlankStateWrapper = styled.div` justify-content: center; align-items: center; color: var(--ads-v2-color-fg); - ${getTypographyByKey("p1")} + ${getTypographyByKey("p1")} .debugger-shortcut { color: var(--ads-v2-color-fg); ${getTypographyByKey("h5")} @@ -51,15 +51,6 @@ export function BlankState(props: { ); } -export enum DEBUGGER_TAB_KEYS { - SCHEMA_TAB = "schema", - RESPONSE_TAB = "response", - HEADER_TAB = "headers", - ERROR_TAB = "ERROR", - LOGS_TAB = "LOGS_TAB", - INSPECT_TAB = "INSPECT_TAB", -} - export const SeverityIcon: Record = { [Severity.INFO]: "success", [Severity.ERROR]: "close-circle", diff --git a/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts b/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts index e3a01d8e42f..11e38440fc0 100644 --- a/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts +++ b/app/client/src/components/editorComponents/Debugger/hooks/useDebuggerTriggerClick.ts @@ -1,5 +1,5 @@ import { useLocation } from "react-router"; -import { DEBUGGER_TAB_KEYS } from "../helpers"; +import { DEBUGGER_TAB_KEYS } from "../constants"; import { setCanvasDebuggerState } from "actions/debuggerActions"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import type { FocusEntityInfo } from "navigation/FocusEntity"; diff --git a/app/client/src/components/editorComponents/EntityBottomTabs.tsx b/app/client/src/components/editorComponents/EntityBottomTabs.tsx index 9e2f05ba043..e649ba41d1a 100644 --- a/app/client/src/components/editorComponents/EntityBottomTabs.tsx +++ b/app/client/src/components/editorComponents/EntityBottomTabs.tsx @@ -1,6 +1,6 @@ import React from "react"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "./Debugger/constants"; import { Tab, TabPanel, Tabs, TabsList } from "@appsmith/ads"; import styled from "styled-components"; import { LIST_HEADER_HEIGHT, FOOTER_MARGIN } from "./Debugger/DebuggerLogs"; @@ -9,11 +9,14 @@ import type { RefObject } from "react"; const TabPanelWrapper = styled(TabPanel)` margin-top: 0; height: calc(100% - ${LIST_HEADER_HEIGHT}); + &.ads-v2-tabs__panel { overflow: auto; } + & .t--code-editor-wrapper.codeWrapper { height: calc(100% - ${FOOTER_MARGIN}); + & .CodeMirror-scroll { box-sizing: border-box; } diff --git a/app/client/src/components/editorComponents/JSResponseView.tsx b/app/client/src/components/editorComponents/JSResponseView.tsx index 91d8519abe0..1bd541d2f2c 100644 --- a/app/client/src/components/editorComponents/JSResponseView.tsx +++ b/app/client/src/components/editorComponents/JSResponseView.tsx @@ -23,7 +23,7 @@ import { Flex, Text } from "@appsmith/ads"; import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; import type { EvaluationError } from "utils/DynamicBindingUtils"; -import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "./Debugger/constants"; import type { BottomTab } from "./EntityBottomTabs"; import EntityBottomTabs from "./EntityBottomTabs"; import { getIsSavingEntity } from "selectors/editorSelectors"; @@ -56,6 +56,7 @@ const ResponseTabWrapper = styled.div` opacity: 0.8; pointer-events: none; } + .response-run { margin: 0 10px; } diff --git a/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx b/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx index 01d2634f678..f02daa78013 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx @@ -13,7 +13,7 @@ import { showDebugger, } from "actions/debuggerActions"; import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import Errors from "components/editorComponents/Debugger/Errors"; import DebuggerLogs from "components/editorComponents/Debugger/DebuggerLogs"; import EntityDeps from "components/editorComponents/Debugger/EntityDependecies"; @@ -37,30 +37,38 @@ export const ResizerContentContainer = styled.div` flex: 1; position: relative; display: flex; + &.db-form-resizer-content, &.saas-form-resizer-content, &.api-datasource-content-container { flex-direction: column; padding: 0 var(--ads-v2-spaces-7) 0 var(--ads-v2-spaces-7); + & .t--ds-form-header { border-bottom: 1px solid var(--ads-v2-color-border); } } + &.db-form-resizer-content.db-form-resizer-content-show-tabs, &.saas-form-resizer-content.saas-form-resizer-content-show-tabs { padding: 0; + & .t--ds-form-header { border-bottom: none; } } + &.saas-form-resizer-content.saas-form-resizer-content-show-tabs form { padding-bottom: 0; } + border-top: none; + .db-form-content-container { display: flex; flex-direction: column; width: 100%; + form { flex-grow: 1; } diff --git a/app/client/src/pages/Editor/JSEditor/Form.tsx b/app/client/src/pages/Editor/JSEditor/Form.tsx index a2cc86b4072..5121ac1164d 100644 --- a/app/client/src/pages/Editor/JSEditor/Form.tsx +++ b/app/client/src/pages/Editor/JSEditor/Form.tsx @@ -70,8 +70,9 @@ import { getHasManageActionPermission, } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer"; -import { DEBUGGER_TAB_KEYS } from "../../../components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import RunHistory from "ee/components/RunHistory"; + interface JSFormProps { jsCollectionData: JSCollectionData; contextMenu: React.ReactNode; @@ -99,6 +100,7 @@ const SecondaryWrapper = styled.div` flex-direction: column; flex: 1; overflow: hidden; + &&& { .ads-v2-tabs, &.js-editor-tab { diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index 6d31b9f64f0..23de0834cd0 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -42,7 +42,7 @@ const storeState = { errorCount: 0, }, }, - queryPane: { + pluginActionEditor: { debugger: { open: true, responseTabHeight: 200, diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index a616771a2e4..1b9a967074d 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -5,7 +5,7 @@ import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components"; import { getErrorCount } from "selectors/debuggerSelectors"; import { Text, TextType } from "@appsmith/ads-old"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import { DEBUGGER_ERRORS, DEBUGGER_LOGS, diff --git a/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx b/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx index 8dddc93a8fb..fa73e1ae1ef 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx @@ -20,7 +20,7 @@ import { type CalloutLinkProps, } from "@appsmith/ads"; import styled from "styled-components"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { setActionResponseDisplayFormat } from "actions/pluginActionActions"; import { getUpdateTimestamp } from "components/editorComponents/Debugger/ErrorLogs/ErrorLogItem"; @@ -66,6 +66,7 @@ const ResponseContentWrapper = styled.div<{ isError: boolean }>` ${HelpSection} { margin-bottom: 10px; } + position: relative; `; diff --git a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts index 7c9201a0616..5e2d426dc2b 100644 --- a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts +++ b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts @@ -138,7 +138,7 @@ import { setDefaultActionDisplayFormat } from "./PluginActionSagaUtils"; import { checkAndLogErrorsIfCyclicDependency } from "sagas/helper"; import { toast } from "@appsmith/ads"; import type { TRunDescription } from "workers/Evaluation/fns/actionFns"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import { FILE_SIZE_LIMIT_FOR_BLOBS } from "constants/WidgetConstants"; import type { ActionData } from "ee/reducers/entityReducers/actionsReducer"; import { handleStoreOperations } from "./StoreActionSaga"; diff --git a/app/client/src/sagas/ActionExecution/errorUtils.ts b/app/client/src/sagas/ActionExecution/errorUtils.ts index 7ee5ddeb9bc..822c6e5d022 100644 --- a/app/client/src/sagas/ActionExecution/errorUtils.ts +++ b/app/client/src/sagas/ActionExecution/errorUtils.ts @@ -9,7 +9,7 @@ import type { ActionTriggerKeys } from "ee/workers/Evaluation/fns"; import { getActionTriggerFunctionNames } from "ee/workers/Evaluation/fns"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { setDebuggerSelectedTab, showDebugger } from "actions/debuggerActions"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import store from "store"; import showToast from "sagas/ToastSagas"; import { call, put } from "redux-saga/effects"; diff --git a/app/client/src/sagas/JSPaneSagas.ts b/app/client/src/sagas/JSPaneSagas.ts index c36ba5073ad..5d7fcec2b86 100644 --- a/app/client/src/sagas/JSPaneSagas.ts +++ b/app/client/src/sagas/JSPaneSagas.ts @@ -86,7 +86,7 @@ import { UserCancelledActionExecutionError } from "sagas/ActionExecution/errorUt import type { EventLocation } from "ee/utils/analyticsUtilTypes"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { checkAndLogErrorsIfCyclicDependency } from "./helper"; -import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import { getJSActionPathNameToDisplay, isBrowserExecutionAllowed, From 58a915829198eda81fdefc9a46dfa994990a91be Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 2 Oct 2024 18:40:52 +0530 Subject: [PATCH 7/8] fix for config tabs --- .../hooks/useSelectedFormTab.ts | 23 ++++++++----------- .../store/pluginActionEditorActions.ts | 6 +++-- .../store/pluginActionEditorSelectors.ts | 12 +++++++--- .../store/pluginEditorReducer.ts | 4 ++-- .../src/ce/navigation/FocusElements/AppIDE.ts | 13 +++++++---- .../ActionPane/ApiPaneNavigation.ts | 23 ++++++++----------- .../pages/Editor/EntityNavigation/types.ts | 2 +- .../Editor/QueryEditor/EditorJSONtoForm.tsx | 12 ++++------ app/client/src/utils/replayHelpers.tsx | 7 +----- 9 files changed, 48 insertions(+), 54 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts index 4f15f896848..6e3aada35dd 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts +++ b/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]; } diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts index 372c33af90a..6b3a9d667f7 100644 --- a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts +++ b/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 = ( diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts index e2111027ae5..ecc5a6d415a 100644 --- a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts +++ b/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) => diff --git a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts index 2b554b4be65..b69e616dba4 100644 --- a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts +++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts @@ -25,7 +25,7 @@ export interface PluginActionEditorState { isDeleting: Record; isDirty: Record; runErrorMessage: Record; - selectedConfigTab?: number; + selectedConfigTab?: string; formData: Record>; 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; diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts index edf6f9ce518..a351dcb15b4 100644 --- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts +++ b/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, }, }, }, diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts index 7e8835a1dd3..cc3437b3848 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts @@ -11,7 +11,7 @@ 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() { @@ -19,13 +19,13 @@ export default class ApiPaneNavigation extends ActionPaneNavigation { 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; } } diff --git a/app/client/src/pages/Editor/EntityNavigation/types.ts b/app/client/src/pages/Editor/EntityNavigation/types.ts index 5d6a173e57d..13de1aa9803 100644 --- a/app/client/src/pages/Editor/EntityNavigation/types.ts +++ b/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 { diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index 65cf549dcbe..02650c405a6 100644 --- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx +++ b/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], ); diff --git a/app/client/src/utils/replayHelpers.tsx b/app/client/src/utils/replayHelpers.tsx index 70f7aac9ad9..8b871586af6 100644 --- a/app/client/src/utils/replayHelpers.tsx +++ b/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; } From da1a8eefaa0b312411634e2c48ffb2ea876bea7a Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Thu, 3 Oct 2024 15:28:45 +0530 Subject: [PATCH 8/8] fix for api pane debugger nav --- .../Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts index cc3437b3848..4671eaae08b 100644 --- a/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts +++ b/app/client/src/pages/Editor/EntityNavigation/ActionPane/ApiPaneNavigation.ts @@ -4,7 +4,6 @@ import { ActionPaneNavigation } from "./exports"; import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants"; import { setPluginActionEditorSelectedTab } from "PluginActionEditor/store"; import { NAVIGATION_DELAY } from "../costants"; -import { isNumber } from "lodash"; export default class ApiPaneNavigation extends ActionPaneNavigation { constructor(entityInfo: EntityInfo) { @@ -30,6 +29,7 @@ export default class ApiPaneNavigation extends ActionPaneNavigation { return config; } + *navigate() { const config: IApiPaneNavigationConfig = yield call(this.getConfig); @@ -37,7 +37,7 @@ export default class ApiPaneNavigation extends ActionPaneNavigation { if (!this.entityInfo.propertyPath) return; - if (isNumber(config.tab)) { + if (config.tab) { yield put(setPluginActionEditorSelectedTab(config.tab)); yield delay(NAVIGATION_DELAY); }