diff --git a/app/client/src/actions/apiPaneActions.ts b/app/client/src/actions/apiPaneActions.ts index 1f4110ef2a..ccb0096922 100644 --- a/app/client/src/actions/apiPaneActions.ts +++ b/app/client/src/actions/apiPaneActions.ts @@ -4,11 +4,12 @@ import { ApiContentTypes } from "constants/ApiEditorConstants"; export const changeApi = ( id: string, + isSaas: boolean, newApi?: boolean, -): ReduxAction<{ id: string; newApi?: boolean }> => { +): ReduxAction<{ id: string; isSaas: boolean; newApi?: boolean }> => { return { type: ReduxActionTypes.API_PANE_CHANGE_API, - payload: { id, newApi }, + payload: { id, isSaas, newApi }, }; }; diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx index 035e01a97d..813bf0cf52 100644 --- a/app/client/src/pages/Editor/APIEditor/index.tsx +++ b/app/client/src/pages/Editor/APIEditor/index.tsx @@ -36,6 +36,7 @@ import EntityNotFoundPane from "pages/Editor/EntityNotFoundPane"; import { ApplicationPayload } from "constants/ReduxActionConstants"; import { getPluginSettingConfigs } from "selectors/entitiesSelector"; import { SAAS_EDITOR_API_ID_URL } from "../SaaSEditor/constants"; +import history from "utils/history"; const LoadingContainer = styled(CenteredWrapper)` height: 50%; @@ -61,7 +62,7 @@ interface ReduxActionProps { submitForm: (name: string) => void; runAction: (id: string, paginationField?: PaginationField) => void; deleteAction: (id: string, name: string) => void; - changeAPIPage: (apiId: string) => void; + changeAPIPage: (apiId: string, isSaas: boolean) => void; } function getPageName(pages: any, pageId: string) { @@ -78,7 +79,8 @@ class ApiEditor extends React.Component { PerformanceTracker.stopTracking(PerformanceTransactionName.OPEN_ACTION, { actionType: "API", }); - this.props.changeAPIPage(this.props.match.params.apiId); + const type = this.getFormName(); + this.props.changeAPIPage(this.props.match.params.apiId, type === "SAAS"); } handleDeleteClick = () => { const pageName = getPageName( @@ -93,12 +95,24 @@ class ApiEditor extends React.Component { this.props.deleteAction(this.props.match.params.apiId, this.props.apiName); }; + getFormName = () => { + const plugins = this.props.plugins; + const pluginId = this.props.pluginId; + const plugin = + plugins && + plugins.find((plug) => { + if (plug.id === pluginId) return plug; + }); + return plugin && plugin.type; + }; + componentDidUpdate(prevProps: Props) { if (prevProps.isRunning && !this.props.isRunning) { PerformanceTracker.stopTracking(PerformanceTransactionName.RUN_API_CLICK); } if (prevProps.match.params.apiId !== this.props.match.params.apiId) { - this.props.changeAPIPage(this.props.match.params.apiId); + const type = this.getFormName(); + this.props.changeAPIPage(this.props.match.params.apiId, type === "SAAS"); } } @@ -223,7 +237,7 @@ class ApiEditor extends React.Component { )} {formUiComponent === "SaaSEditorForm" && - this.props.history.push( + history.push( SAAS_EDITOR_API_ID_URL( this.props.match.params.applicationId, this.props.match.params.pageId, @@ -270,7 +284,8 @@ const mapDispatchToProps = (dispatch: any): ReduxActionProps => ({ dispatch(runActionInit(id, paginationField)), deleteAction: (id: string, name: string) => dispatch(deleteAction({ id, name })), - changeAPIPage: (actionId: string) => dispatch(changeApi(actionId)), + changeAPIPage: (actionId: string, isSaas: boolean) => + dispatch(changeApi(actionId, isSaas)), }); export default Sentry.withProfiler( diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx index 1f858b7243..272c1313cd 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx @@ -216,7 +216,7 @@ class DatasourceEditorRouter extends React.Component { /> ); } - if (pluginDatasourceForm === "SaaSDatasourceForm") { + if (pluginDatasourceForm === "DatasourceSaaSForm") { history.push( SAAS_EDITOR_DATASOURCE_ID_URL( applicationId, diff --git a/app/client/src/pages/Editor/Explorer/helpers.test.ts b/app/client/src/pages/Editor/Explorer/helpers.test.ts index 298d8961cb..0f68f220a5 100644 --- a/app/client/src/pages/Editor/Explorer/helpers.test.ts +++ b/app/client/src/pages/Editor/Explorer/helpers.test.ts @@ -24,7 +24,7 @@ describe("getActionIdFromUrl", () => { window.history.pushState( {}, "Query", - "/applications/appId/pages/pageId/edit/saas/google-sheets-plugin/api/saasActionId", + "/applications/appId/pages/pageId/edit/saas/api/saasActionId", ); const response = getActionIdFromURL(); expect(response).toBe("saasActionId"); diff --git a/app/client/src/pages/Editor/SaaSEditor/constants.ts b/app/client/src/pages/Editor/SaaSEditor/constants.ts index 3d37082a49..ca97004623 100644 --- a/app/client/src/pages/Editor/SaaSEditor/constants.ts +++ b/app/client/src/pages/Editor/SaaSEditor/constants.ts @@ -40,7 +40,7 @@ export const SAAS_EDITOR_API_ID_URL = ( applicationId, pageId, pluginPackageName, - )}/api/${apiId}${queryParams}`; + )}api/${apiId}${queryParams}`; }; export const APPSMITH_TOKEN_STORAGE_KEY = "APPSMITH_AUTH_TOKEN"; diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index e32f657bf6..13c188c371 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/app/client/src/sagas/ApiPaneSagas.ts @@ -12,7 +12,7 @@ import { ReduxFormActionTypes, } from "constants/ReduxActionConstants"; import { getFormData } from "selectors/formSelectors"; -import { API_EDITOR_FORM_NAME } from "constants/forms"; +import { API_EDITOR_FORM_NAME, SAAS_EDITOR_FORM } from "constants/forms"; import { DEFAULT_API_ACTION_CONFIG, POST_BODY_FORMAT_OPTIONS, @@ -214,7 +214,9 @@ function* initializeExtraFormDataSaga() { } } -function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) { +function* changeApiSaga( + actionPayload: ReduxAction<{ id: string; isSaas: boolean }>, +) { // // Typescript says Element does not have blur function but it does; // document.activeElement && // "blur" in document.activeElement && @@ -222,31 +224,35 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) { // // @ts-ignore: No types available // document.activeElement.blur(); PerformanceTracker.startTracking(PerformanceTransactionName.CHANGE_API_SAGA); - const { id } = actionPayload.payload; + const { id, isSaas } = actionPayload.payload; const action = yield select(getAction, id); if (!action) return; + if (isSaas) { + yield put(initialize(SAAS_EDITOR_FORM, action)); + } else { + yield put(initialize(API_EDITOR_FORM_NAME, action)); - yield put(initialize(API_EDITOR_FORM_NAME, action)); + yield call(initializeExtraFormDataSaga); - yield call(initializeExtraFormDataSaga); - - if ( - action.actionConfiguration && - action.actionConfiguration.queryParameters?.length - ) { - // Sync the api params my mocking a change action - yield call( - syncApiParamsSaga, - { - type: ReduxFormActionTypes.ARRAY_REMOVE, - payload: action.actionConfiguration.queryParameters, - meta: { - field: "actionConfiguration.queryParameters", + if ( + action.actionConfiguration && + action.actionConfiguration.queryParameters?.length + ) { + // Sync the api params my mocking a change action + yield call( + syncApiParamsSaga, + { + type: ReduxFormActionTypes.ARRAY_REMOVE, + payload: action.actionConfiguration.queryParameters, + meta: { + field: "actionConfiguration.queryParameters", + }, }, - }, - id, - ); + id, + ); + } } + PerformanceTracker.stopTracking(); }