added cancel request logic for update layout, api and action (#1224)

app/client/src/api/ActionAPI.tsx

@@ -4,7 +4,7 @@ import {
   APIRequest,
   DEFAULT_EXECUTE_ACTION_TIMEOUT_MS,
 } from "constants/ApiConstants";
-import { AxiosPromise } from "axios";
+import axios, { AxiosPromise, CancelTokenSource } from "axios";
 import { RestAction } from "entities/Action";
 
 export interface CreateActionRequest<T> extends APIRequest {
@@ -109,6 +109,8 @@ export interface UpdateActionNameRequest {
 
 class ActionAPI extends API {
   static url = "v1/actions";
+  static apiUpdateCancelTokenSource: CancelTokenSource;
+  static queryUpdateCancelTokenSource: CancelTokenSource;
 
   static fetchAPI(id: string): AxiosPromise<GenericApiResponse<RestAction>> {
     return API.get(`${ActionAPI.url}/${id}`);
@@ -141,7 +143,13 @@ class ActionAPI extends API {
   static updateAPI(
     apiConfig: Partial<RestAction>,
   ): AxiosPromise<ActionCreateUpdateResponse> {
-    return API.put(`${ActionAPI.url}/${apiConfig.id}`, apiConfig);
+    if (ActionAPI.apiUpdateCancelTokenSource) {
+      ActionAPI.apiUpdateCancelTokenSource.cancel();
+    }
+    ActionAPI.apiUpdateCancelTokenSource = axios.CancelToken.source();
+    return API.put(`${ActionAPI.url}/${apiConfig.id}`, apiConfig, undefined, {
+      cancelToken: ActionAPI.apiUpdateCancelTokenSource.token,
+    });
   }
 
   static updateActionName(updateActionNameRequest: UpdateActionNameRequest) {
@@ -161,7 +169,13 @@ class ActionAPI extends API {
   static updateQuery(
     updateQuery: UpdateActionRequest<QueryConfig>,
   ): AxiosPromise<ActionCreateUpdateResponse> {
-    return API.post(ActionAPI.url, updateQuery);
+    if (ActionAPI.queryUpdateCancelTokenSource) {
+      ActionAPI.queryUpdateCancelTokenSource.cancel();
+    }
+    ActionAPI.queryUpdateCancelTokenSource = axios.CancelToken.source();
+    return API.post(ActionAPI.url, updateQuery, undefined, {
+      cancelToken: ActionAPI.queryUpdateCancelTokenSource.token,
+    });
   }
 
   static executeAction(

app/client/src/api/Api.tsx

@@ -51,15 +51,18 @@ axiosInstance.interceptors.response.use(
     return response.data;
   },
   function(error: any) {
+    if (axios.isCancel(error)) {
+      return;
+    }
     if (error.code === "ECONNABORTED") {
-      if (error.config.url.match(currentUserRegex)) {
+      if (error.config && error.config.url.match(currentUserRegex)) {
         history.replace({ pathname: SERVER_ERROR_URL });
       }
       return Promise.reject({
         message: "Please check your internet connection",
       });
     }
-    if (error.config.url.match(executeActionRegex)) {
+    if (error.config && error.config.url.match(executeActionRegex)) {
       return makeExecuteActionResponse(error.response);
     }
     if (error.response) {

app/client/src/api/PageApi.tsx

@@ -2,7 +2,7 @@ import Api from "./Api";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { ApiResponse } from "./ApiResponses";
 import { WidgetProps } from "widgets/BaseWidget";
-import { AxiosPromise } from "axios";
+import axios, { AxiosPromise, CancelTokenSource } from "axios";
 import { PageAction } from "constants/ActionConstants";
 
 export interface FetchPageRequest {
@@ -100,6 +100,7 @@ export interface UpdateWidgetNameResponse extends ApiResponse {
 class PageApi extends Api {
   static url = "v1/pages";
   static refactorLayoutURL = "v1/layouts/refactor";
+  static pageUpdateCancelTokenSource?: CancelTokenSource = undefined;
   static getLayoutUpdateURL = (pageId: string, layoutId: string) => {
     return `v1/layouts/${layoutId}/pages/${pageId}`;
   };
@@ -119,14 +120,20 @@ class PageApi extends Api {
 
   static savePage(
     savePageRequest: SavePageRequest,
-  ): AxiosPromise<SavePageResponse> {
+  ): AxiosPromise<SavePageResponse> | undefined {
+    if (PageApi.pageUpdateCancelTokenSource) {
+      PageApi.pageUpdateCancelTokenSource.cancel();
+    }
     const body = { dsl: savePageRequest.dsl };
+    PageApi.pageUpdateCancelTokenSource = axios.CancelToken.source();
     return Api.put(
       PageApi.getLayoutUpdateURL(
         savePageRequest.pageId,
         savePageRequest.layoutId,
       ),
       body,
+      undefined,
+      { cancelToken: PageApi.pageUpdateCancelTokenSource.token },
     );
   }
 

app/client/src/sagas/PageSagas.tsx

@@ -326,6 +326,7 @@ function* savePageSaga() {
       type: ReduxActionErrorTypes.SAVE_PAGE_ERROR,
       payload: {
         error,
+        show: false,
       },
     });
   }