app crashes when moving from google to rest api (#4282)

* app crashes when moving from google to rest api

* wrong url for test

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 },
   };
 };
 

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<Props> {
     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<Props> {
     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<Props> {
             )}
 
             {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(

app/client/src/pages/Editor/DataSourceEditor/index.tsx

@@ -216,7 +216,7 @@ class DatasourceEditorRouter extends React.Component<Props> {
         />
       );
     }
-    if (pluginDatasourceForm === "SaaSDatasourceForm") {
+    if (pluginDatasourceForm === "DatasourceSaaSForm") {
       history.push(
         SAAS_EDITOR_DATASOURCE_ID_URL(
           applicationId,

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");

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";

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();
 }