feature(code/frontend): cancel file blob and directory commits reques…

…t if outdated (#43348)

x-pack/legacy/plugins/code/public/sagas/editor.ts

@@ -215,12 +215,12 @@ function* handleMainRouteChange(action: Action<Match>) {
       } else {
         yield put(closePanel(false));
       }
-    }
-
-    yield call(handleFile, repoUri, file, revision);
-    const commits = yield select((state: RootState) => state.revision.treeCommits[file]);
-    if (commits === undefined) {
-      yield put(fetchTreeCommits({ revision, uri: repoUri, path: file }));
+      yield call(handleFile, repoUri, file, revision);
+    } else {
+      const commits = yield select((state: RootState) => state.revision.treeCommits[file]);
+      if (commits === undefined) {
+        yield put(fetchTreeCommits({ revision, uri: repoUri, path: file }));
+      }
     }
   }
   const lastRequestPath = yield select(lastRequestPathSelector);

x-pack/legacy/plugins/code/public/sagas/file.ts

@@ -7,7 +7,7 @@
 import { Action } from 'redux-actions';
 import { npStart } from 'ui/new_platform';
 import Url from 'url';
-import { call, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
+import { call, put, select, takeEvery, takeLatest, cancel } from 'redux-saga/effects';
 
 import {
   fetchDirectory,
@@ -45,6 +45,7 @@ import {
 import { treeCommitsSelector, currentPathSelector } from '../selectors';
 import { repoRoutePattern } from './patterns';
 import { FileTree } from '../../model';
+import { singletonRequestSaga } from '../utils/saga_utils';
 
 function* handleFetchRepoTree(action: Action<FetchRepoTreePayload>) {
   try {
@@ -154,21 +155,24 @@ function* handleFetchMoreCommits(action: Action<string>) {
   }
 }
 
-function* handleFetchTreeCommits(action: Action<FetchFilePayload>) {
+function* handleFetchTreeCommits(action: Action<FetchFilePayload>, signal: AbortSignal, task: any) {
   try {
     const path = action.payload!.path;
-    const commits = yield call(requestCommits, action.payload!, path);
+    const commits = yield call(requestCommits, action.payload!, path, undefined, undefined, signal);
     yield put(fetchTreeCommitsSuccess({ path, commits }));
   } catch (err) {
     yield put(fetchTreeCommitsFailed(err));
+  } finally {
+    yield cancel(task);
   }
 }
 
 function requestCommits(
   { uri, revision }: FetchRepoPayloadWithRevision,
   path?: string,
   loadMore?: boolean,
-  count?: number
+  count?: number,
+  signal?: AbortSignal
 ) {
   const pathStr = path ? `/${path}` : '';
   let query: any = {};
@@ -182,13 +186,15 @@ function requestCommits(
     `/api/code/repo/${uri}/history/${encodeURIComponent(revision)}${pathStr}`,
     {
       query,
+      signal,
     }
   );
 }
 
 export async function requestFile(
   payload: FetchFilePayload,
-  line?: string
+  line?: string,
+  signal?: AbortSignal
 ): Promise<FetchFileResponse> {
   const { uri, revision, path } = payload;
   const url = `/api/code/repo/${uri}/blob/${encodeURIComponent(revision)}/${path}`;
@@ -197,7 +203,8 @@ export async function requestFile(
     query.line = line;
   }
   const response: Response = await fetch(
-    npStart.core.http.basePath.prepend(Url.format({ pathname: url, query }))
+    npStart.core.http.basePath.prepend(Url.format({ pathname: url, query })),
+    { signal }
   );
 
   if (response.status >= 200 && response.status < 300) {
@@ -244,9 +251,9 @@ export async function requestFile(
   throw new Error('invalid file type');
 }
 
-function* handleFetchFile(action: Action<FetchFilePayload>) {
+function* handleFetchFile(action: Action<FetchFilePayload>, signal: AbortSignal, task: any) {
   try {
-    const results = yield call(requestFile, action.payload!);
+    const results = yield call(requestFile, action.payload!, undefined, signal);
     if (results.isNotFound) {
       yield put(setNotFound(true));
       yield put(fetchFileFailed(new Error('file not found')));
@@ -258,6 +265,8 @@ function* handleFetchFile(action: Action<FetchFilePayload>) {
     }
   } catch (err) {
     yield put(fetchFileFailed(err));
+  } finally {
+    yield cancel(task);
   }
 }
 
@@ -273,9 +282,9 @@ function* handleFetchDirs(action: Action<FetchRepoTreePayload>) {
 export function* watchFetchBranchesAndCommits() {
   yield takeEvery(String(fetchRepoBranches), handleFetchBranches);
   yield takeEvery(String(fetchRepoCommits), handleFetchCommits);
-  yield takeLatest(String(fetchFile), handleFetchFile);
+  yield takeLatest(String(fetchFile), singletonRequestSaga(handleFetchFile));
   yield takeEvery(String(fetchDirectory), handleFetchDirs);
-  yield takeLatest(String(fetchTreeCommits), handleFetchTreeCommits);
+  yield takeLatest(String(fetchTreeCommits), singletonRequestSaga(handleFetchTreeCommits));
   yield takeLatest(String(fetchMoreCommits), handleFetchMoreCommits);
 }
 

x-pack/legacy/plugins/code/public/utils/saga_utils.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { take, spawn } from 'redux-saga/effects';
+import { Action } from 'redux-actions';
+
+function* cancelRequest(action: Action<any>, abortController: AbortController) {
+  yield take(action.type);
+  abortController.abort();
+}
+
+export const singletonRequestSaga = (saga: any) =>
+  function*(action: Action<any>) {
+    const abortController = new AbortController();
+    const task = yield spawn(cancelRequest, action, abortController);
+    yield spawn(saga, action, abortController.signal, task);
+  };