fix(code/frontend): should show file tree if file not exists (#36106) (#37056)

x-pack/plugins/code/public/actions/file.ts

@@ -41,9 +41,14 @@ export interface RepoTreePayload {
   withParents: boolean | undefined;
 }
 
+export const fetchRootRepoTree = createAction<FetchRepoPayloadWithRevision>('FETCH ROOT REPO TREE');
+export const fetchRootRepoTreeSuccess = createAction<FileTree>('FETCH ROOT REPO TREE SUCCESS');
+export const fetchRootRepoTreeFailed = createAction<Error>('FETCH ROOT REPO TREE FAILED');
+
 export const fetchRepoTree = createAction<FetchRepoTreePayload>('FETCH REPO TREE');
 export const fetchRepoTreeSuccess = createAction<RepoTreePayload>('FETCH REPO TREE SUCCESS');
 export const fetchRepoTreeFailed = createAction<Error>('FETCH REPO TREE FAILED');
+
 export const resetRepoTree = createAction('CLEAR REPO TREE');
 export const closeTreePath = createAction<string>('CLOSE TREE PATH');
 export const openTreePath = createAction<string>('OPEN TREE PATH');

x-pack/plugins/code/public/reducers/file.ts

@@ -29,6 +29,8 @@ import {
   resetRepoTree,
   routeChange,
   setNotFound,
+  fetchRootRepoTreeSuccess,
+  fetchRootRepoTreeFailed,
 } from '../actions';
 
 export interface FileState {
@@ -133,6 +135,15 @@ export const file = handleActions(
           }
         }
       }),
+    [String(fetchRootRepoTreeSuccess)]: (state: FileState, action: Action<any>) =>
+      produce<FileState>(state, (draft: FileState) => {
+        draft.rootFileTreeLoading = false;
+        draft.tree = mergeNode(draft.tree, action.payload!);
+      }),
+    [String(fetchRootRepoTreeFailed)]: (state: FileState, action: Action<any>) =>
+      produce<FileState>(state, (draft: FileState) => {
+        draft.rootFileTreeLoading = false;
+      }),
     [String(resetRepoTree)]: (state: FileState) =>
       produce<FileState>(state, (draft: FileState) => {
         draft.tree = initialState.tree;

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

@@ -29,6 +29,7 @@ import {
   fetchRepos,
   turnOnDefaultRepoScope,
   openTreePath,
+  fetchRootRepoTree,
 } from '../actions';
 import { loadRepo, loadRepoFailed, loadRepoSuccess } from '../actions/status';
 import { PathTypes } from '../common/types';
@@ -188,6 +189,7 @@ function* handleMainRouteChange(action: Action<Match>) {
   if (currentTree.repoUri !== repoUri) {
     yield put(resetRepoTree());
     yield put(fetchRepoCommits({ uri: repoUri, revision }));
+    yield put(fetchRootRepoTree({ uri: repoUri, revision }));
   }
   const tree = yield select(getTree);
   const isDir = pathType === PathTypes.tree;

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

@@ -39,6 +39,9 @@ import {
   gotoRepo,
   Match,
   setNotFound,
+  fetchRootRepoTree,
+  fetchRootRepoTreeSuccess,
+  fetchRootRepoTreeFailed,
 } from '../actions';
 import { RootState } from '../reducers';
 import { treeCommitsSelector, createTreeSelector } from '../selectors';
@@ -111,6 +114,20 @@ export function* watchFetchRepoTree() {
   yield takeEvery(String(fetchRepoTree), handleFetchRepoTree);
 }
 
+function* handleFetchRootRepoTree(action: Action<FetchRepoPayloadWithRevision>) {
+  try {
+    const { uri, revision } = action.payload!;
+    const tree = yield call(requestRepoTree, { uri, revision, path: '', isDir: true });
+    yield put(fetchRootRepoTreeSuccess(tree));
+  } catch (err) {
+    yield put(fetchRootRepoTreeFailed(err));
+  }
+}
+
+export function* watchFetchRootRepoTree() {
+  yield takeEvery(String(fetchRootRepoTree), handleFetchRootRepoTree);
+}
+
 function* handleFetchBranches(action: Action<FetchRepoPayload>) {
   try {
     const results = yield call(requestBranches, action.payload!);

x-pack/plugins/code/public/sagas/index.ts

@@ -14,7 +14,12 @@ import {
   watchLspMethods,
   watchMainRouteChange,
 } from './editor';
-import { watchFetchBranchesAndCommits, watchFetchRepoTree, watchRepoRouteChange } from './file';
+import {
+  watchFetchBranchesAndCommits,
+  watchFetchRepoTree,
+  watchRepoRouteChange,
+  watchFetchRootRepoTree,
+} from './file';
 import { watchInstallLanguageServer, watchLoadLanguageServers } from './language_server';
 import { watchLoadConfigs, watchSwitchProjectLanguageServer } from './project_config';
 import {
@@ -52,6 +57,7 @@ export function* rootSaga() {
   yield fork(watchIndexRepo);
   yield fork(watchImportRepo);
   yield fork(watchFetchRepoTree);
+  yield fork(watchFetchRootRepoTree);
   yield fork(watchFetchBranchesAndCommits);
   yield fork(watchDocumentSearch);
   yield fork(watchRepositorySearch);

x-pack/test/functional/apps/code/explore_repository.ts

@@ -82,6 +82,27 @@ export default function exploreRepositoryFunctonalTests({
         await testSubjects.click(repositoryListSelector);
       });
 
+      it('open a file that does not exists should load tree', async () => {
+        // open a file that does not exists
+        const url = `${PageObjects.common.getHostPort()}/app/code#/github.com/elastic/TypeScript-Node-Starter/tree/master/I_DO_NOT_EXIST`;
+        await browser.get(url);
+        await retry.try(async () => {
+          const currentUrl: string = await browser.getCurrentUrl();
+          expect(
+            currentUrl.indexOf(
+              'github.com/elastic/TypeScript-Node-Starter/tree/master/I_DO_NOT_EXIST'
+            )
+          ).to.greaterThan(0);
+        });
+        await retry.try(async () => {
+          expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).ok();
+          expect(await testSubjects.exists('codeFileTreeNode-Directory-src-doc')).ok();
+          expect(await testSubjects.exists('codeFileTreeNode-Directory-test')).ok();
+          expect(await testSubjects.exists('codeFileTreeNode-Directory-views')).ok();
+          expect(await testSubjects.exists('codeFileTreeNode-File-package.json')).ok();
+        });
+      });
+
       it('tree should be loaded', async () => {
         await retry.tryForTime(5000, async () => {
           expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).ok();