fix(code/frontend): should reset file tree if revison changes (#39988)

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

@@ -39,6 +39,7 @@ export interface RepoTreePayload {
   tree: FileTree;
   path: string;
   withParents: boolean | undefined;
+  revision: string;
 }
 
 export interface TreeCommitPayload {
@@ -48,7 +49,9 @@ export interface TreeCommitPayload {
 }
 
 export const fetchRootRepoTree = createAction<FetchRepoPayloadWithRevision>('FETCH ROOT REPO TREE');
-export const fetchRootRepoTreeSuccess = createAction<FileTree>('FETCH ROOT REPO TREE SUCCESS');
+export const fetchRootRepoTreeSuccess = createAction<{ tree: FileTree; revision: string }>(
+  'FETCH ROOT REPO TREE SUCCESS'
+);
 export const fetchRootRepoTreeFailed = createAction<Error>('FETCH ROOT REPO TREE FAILED');
 
 export const fetchRepoTree = createAction<FetchRepoTreePayload>('FETCH REPO TREE');

x-pack/legacy/plugins/code/public/components/file_tree/file_tree.test.tsx

@@ -44,6 +44,7 @@ test('render correctly', () => {
         location={location}
         closeTreePath={mockFunction}
         openTreePath={mockFunction}
+        isNotFound={false}
       />
     )
     .toJSON();

x-pack/legacy/plugins/code/public/components/file_tree/file_tree.tsx

@@ -21,6 +21,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   closeTreePath: (paths: string) => void;
   openTreePath: (paths: string) => void;
   openedPaths: string[];
+  isNotFound: boolean;
 }
 
 export class CodeFileTree extends React.Component<Props> {
@@ -238,13 +239,15 @@ export class CodeFileTree extends React.Component<Props> {
   }
 
   private isPathOpen(path: string) {
+    if (this.props.isNotFound) return false;
     return this.props.openedPaths.includes(path);
   }
 }
 
 const mapStateToProps = (state: RootState) => ({
   node: state.fileTree.tree,
   openedPaths: state.fileTree.openedPaths,
+  isNotFound: state.file.isNotFound,
 });
 
 const mapDispatchToProps = {

x-pack/legacy/plugins/code/public/reducers/file_tree.ts

@@ -63,6 +63,7 @@ export interface FileTreeState {
   fileTreeLoadingPaths: string[];
   // store not found directory as an array to calculate `notFound` flag by finding whether path is in this array
   notFoundDirs: string[];
+  revision: string;
 }
 
 const initialState: FileTreeState = {
@@ -74,6 +75,7 @@ const initialState: FileTreeState = {
   openedPaths: [],
   fileTreeLoadingPaths: [''],
   notFoundDirs: [],
+  revision: '',
 };
 
 type FileTreePayload = FetchRepoTreePayload & RepoTreePayload & FileTree & string;
@@ -86,6 +88,7 @@ export const fileTree = handleActions<FileTreeState, FileTreePayload>(
       }),
     [String(fetchRepoTreeSuccess)]: (state, action: Action<RepoTreePayload>) =>
       produce<FileTreeState>(state, draft => {
+        draft.revision = action.payload!.revision;
         draft.notFoundDirs = draft.notFoundDirs.filter(dir => dir !== action.payload!.path);
         draft.fileTreeLoadingPaths = draft.fileTreeLoadingPaths.filter(
           p => p !== action.payload!.path && p !== ''
@@ -108,10 +111,14 @@ export const fileTree = handleActions<FileTreeState, FileTreePayload>(
           }
         }
       }),
-    [String(fetchRootRepoTreeSuccess)]: (state, action: Action<FileTree>) =>
+    [String(fetchRootRepoTreeSuccess)]: (
+      state,
+      action: Action<{ revision: string; tree: FileTree }>
+    ) =>
       produce<FileTreeState>(state, draft => {
         draft.fileTreeLoadingPaths = draft.fileTreeLoadingPaths.filter(p => p !== '/' && p !== '');
-        draft.tree = mergeNode(draft.tree, action.payload!);
+        draft.tree = mergeNode(draft.tree, action.payload!.tree);
+        draft.revision = action.payload!.revision;
       }),
     [String(fetchRootRepoTreeFailed)]: state =>
       produce<FileTreeState>(state, draft => {

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

@@ -44,6 +44,7 @@ import {
   repoScopeSelector,
   urlQueryStringSelector,
   createTreeSelector,
+  getTreeRevision,
 } from '../selectors';
 import { history } from '../utils/url';
 import { mainRoutePattern } from './patterns';
@@ -189,8 +190,9 @@ function* handleMainRouteChange(action: Action<Match>) {
   }
   const lastRequestPath = yield select(lastRequestPathSelector);
   const currentTree: FileTree = yield select(getTree);
+  const currentTreeRevision: string = yield select(getTreeRevision);
   // repo changed
-  if (currentTree.repoUri !== repoUri) {
+  if (currentTree.repoUri !== repoUri || revision !== currentTreeRevision) {
     yield put(resetRepoTree());
     yield put(fetchRepoCommits({ uri: repoUri, revision }));
     yield put(fetchRootRepoTree({ uri: repoUri, revision }));

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

@@ -61,6 +61,7 @@ function* handleFetchRepoTree(action: Action<FetchRepoTreePayload>) {
     tree.repoUri = action.payload!.uri;
     yield put(
       fetchRepoTreeSuccess({
+        revision: action.payload!.revision,
         tree,
         path: action.payload!.path,
         withParents: action.payload!.parents,
@@ -106,7 +107,7 @@ 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));
+    yield put(fetchRootRepoTreeSuccess({ tree, revision }));
   } catch (err) {
     yield put(fetchRootRepoTreeFailed(err));
   }

x-pack/legacy/plugins/code/public/selectors/index.ts

@@ -7,6 +7,7 @@ import { FileTree, RepositoryUri } from '../../model';
 import { RootState } from '../reducers';
 
 export const getTree = (state: RootState) => state.fileTree.tree;
+export const getTreeRevision = (state: RootState) => state.fileTree.revision;
 
 export const lastRequestPathSelector: (state: RootState) => string = (state: RootState) =>
   state.symbol.lastRequestPath || '';

x-pack/legacy/plugins/code/public/style/_layout.scss

@@ -72,7 +72,9 @@
 
 .codeContainer__select {
   margin-right: $euiSizeS;
-  min-width: 12rem;
+  width: 12rem;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .codeContainer__tabs {