expand folders during recursion

Author: aswallace

packages/core/components/DirectoryTree/index.tsx

@@ -40,8 +40,6 @@ export default function DirectoryTree(props: FileListProps) {
     const fileService = useSelector(interaction.selectors.getFileService);
     const globalFilters = useSelector(selection.selectors.getFileFilters);
     const sortColumn = useSelector(selection.selectors.getSortColumn);
-    // Check loading in full app state instead of individual node state
-    const isLoadingFullTree = useSelector(selection.selectors.getIsLoadingFullTree);
     const fileSet = React.useMemo(() => {
         return new FileSet({
             fileService: fileService,
@@ -76,7 +74,7 @@ export default function DirectoryTree(props: FileListProps) {
 
     return (
         <div className={classNames(props.className, styles.container)}>
-            <RootLoadingIndicator visible={isLoading || isLoadingFullTree} />
+            <RootLoadingIndicator visible={isLoading} />
             <ul
                 className={styles.scrollContainer}
                 role="tree"

packages/core/state/selection/actions.ts

@@ -550,25 +550,6 @@ export function expandAllFileFolders(): ExpandAllFileFoldersAction {
     };
 }
 
-/**
- * SET_IS_LOADING_FULL_TREE
- * Intention to set the loading state for all directories in the tree.
- * Differentiated from isLoading in directory hierarchy node sub-states
- */
-export const SET_IS_LOADING_FULL_TREE = makeConstant(STATE_BRANCH_NAME, "set-is-loading-full-tree");
-
-export interface SetIsLoadingFullTreeAction {
-    payload: boolean;
-    type: string;
-}
-
-export function setIsLoadingFullTree(isLoadingFullTree: boolean): SetIsLoadingFullTreeAction {
-    return {
-        payload: isLoadingFullTree,
-        type: SET_IS_LOADING_FULL_TREE,
-    };
-}
-
 /**
  * SET_OPEN_FILE_FOLDERS
  * Intention to set which file folders are open as opposed to collapsed

packages/core/state/selection/logics.ts

@@ -48,9 +48,7 @@ import {
     AddDataSourceReloadError,
     setFileView,
     setColumns,
-    COLLAPSE_ALL_FILE_FOLDERS,
     EXPAND_ALL_FILE_FOLDERS,
-    setIsLoadingFullTree,
 } from "./actions";
 import { interaction, metadata, ReduxLogicDeps, selection } from "../";
 import * as selectionSelectors from "./selectors";
@@ -349,19 +347,23 @@ const toggleFileFolderCollapse = createLogic({
  * actions into SET_OPEN_FILE_FOLDERS actions by either setting to none or recursively
  * unpacking the directory structure
  */
-const toggleAllFileFolders = createLogic({
+const expandAllFileFolders = createLogic({
     async process(deps: ReduxLogicDeps, dispatch, done) {
-        const { action, getState } = deps;
+        const { getState } = deps;
         const hierarchy = selection.selectors.getAnnotationHierarchy(getState());
         const annotationService = interaction.selectors.getAnnotationService(getState());
         const selectedFileFilters = selection.selectors.getFileFilters(getState());
-        const fileFoldersToOpen: FileFolder[] = [];
-        dispatch(setIsLoadingFullTree(true) as AnyAction);
+        // Track internally rather than relying on selector (may be out of sync)
+        const openedSoFar: FileFolder[] = [];
         // Recursive helper
         async function unpackAllFileFolders(values: string[], pathSoFar: string[]) {
+            const fileFoldersToOpen: FileFolder[] = values.map(
+                (value) => new FileFolder([...pathSoFar, value] as AnnotationValue[])
+            );
+            // Needs to be set wholesale so must include already opened folderes
+            openedSoFar.push(...fileFoldersToOpen);
+            dispatch(setOpenFileFolders(openedSoFar));
             for (const value of values) {
-                fileFoldersToOpen.push(new FileFolder([...pathSoFar, value] as AnnotationValue[]));
-
                 // At end of folder hierarchy
                 if (!!hierarchy.length && pathSoFar.length === hierarchy.length - 1) continue;
 
@@ -377,18 +379,15 @@ const toggleAllFileFolders = createLogic({
             }
         }
 
-        if (action.type === EXPAND_ALL_FILE_FOLDERS) {
-            const rootHierarchyValues = await annotationService.fetchRootHierarchyValues(
-                hierarchy,
-                selectedFileFilters
-            );
-            await unpackAllFileFolders(rootHierarchyValues, []);
-        }
-        dispatch(setOpenFileFolders(fileFoldersToOpen));
-        dispatch(setIsLoadingFullTree(false) as AnyAction);
+        const rootHierarchyValues = await annotationService.fetchRootHierarchyValues(
+            hierarchy,
+            selectedFileFilters
+        );
+        await unpackAllFileFolders(rootHierarchyValues, []);
+        dispatch(interaction.actions.refresh() as AnyAction); // synchronize UI with state
         done();
     },
-    type: [COLLAPSE_ALL_FILE_FOLDERS, EXPAND_ALL_FILE_FOLDERS],
+    type: [EXPAND_ALL_FILE_FOLDERS],
 });
 
 /**
@@ -805,7 +804,7 @@ export default [
     modifyAnnotationHierarchy,
     modifyFileFilters,
     toggleFileFolderCollapse,
-    toggleAllFileFolders,
+    expandAllFileFolders,
     decodeFileExplorerURLLogics,
     selectNearbyFile,
     setAvailableAnnotationsLogic,

packages/core/state/selection/reducer.ts

@@ -33,7 +33,7 @@ import {
     Column,
     SetColumns,
     SET_COLUMNS,
-    SET_IS_LOADING_FULL_TREE,
+    COLLAPSE_ALL_FILE_FOLDERS,
 } from "./actions";
 import interaction from "../interaction";
 import { FileView, Source } from "../../entity/FileExplorerURL";
@@ -52,7 +52,6 @@ export interface SelectionStateBranch {
     fileSelection: FileSelection;
     fileView: FileView;
     filters: FileFilter[];
-    isLoadingFullTree: boolean;
     openFileFolders: FileFolder[];
     recentAnnotations: string[];
     requiresDataSourceReload?: boolean;
@@ -73,7 +72,6 @@ export const initialState = {
     fileSelection: new FileSelection(),
     fileView: FileView.LIST,
     filters: [],
-    isLoadingFullTree: false,
     openFileFolders: [],
     queries: [],
     recentAnnotations: [],
@@ -197,9 +195,9 @@ export default makeReducer<SelectionStateBranch>(
             availableAnnotationsForHierarchy: action.payload,
             availableAnnotationsForHierarchyLoading: false,
         }),
-        [SET_IS_LOADING_FULL_TREE]: (state, action) => ({
+        [COLLAPSE_ALL_FILE_FOLDERS]: (state) => ({
             ...state,
-            isLoadingFullTree: action.payload,
+            openFileFolders: [],
         }),
         [SET_OPEN_FILE_FOLDERS]: (state, action) => ({
             ...state,

packages/core/state/selection/selectors.ts

@@ -18,7 +18,6 @@ export const getColumns = (state: State) => state.selection.columns;
 export const getFileFilters = (state: State) => state.selection.filters;
 export const getFileSelection = (state: State) => state.selection.fileSelection;
 export const getFileView = (state: State) => state.selection.fileView;
-export const getIsLoadingFullTree = (state: State) => state.selection.isLoadingFullTree;
 export const getOpenFileFolders = (state: State) => state.selection.openFileFolders;
 export const getRecentAnnotations = (state: State) => state.selection.recentAnnotations;
 export const getRequiresDataSourceReload = (state: State) =>

packages/core/state/selection/test/logics.test.ts

@@ -25,7 +25,6 @@ import {
     SET_SORT_COLUMN,
     changeDataSources,
     changeSourceMetadata,
-    collapseAllFileFolders,
     expandAllFileFolders,
 } from "../actions";
 import { initialState, interaction } from "../../";
@@ -944,33 +943,6 @@ describe("Selection logics", () => {
             sinon.restore();
         });
 
-        it("dispatches empty array for collapse all folders actions", async () => {
-            // Arrange
-            const { store, logicMiddleware, actions } = configureMockStore({
-                logics: selectionLogics,
-                state: initialState,
-            });
-            // not evergreen
-            expect(
-                actions.includesMatch({
-                    type: SET_OPEN_FILE_FOLDERS,
-                    payload: [],
-                })
-            ).to.be.false;
-
-            // Act
-            store.dispatch(collapseAllFileFolders());
-            await logicMiddleware.whenComplete();
-
-            // Assert
-            expect(
-                actions.includesMatch({
-                    type: SET_OPEN_FILE_FOLDERS,
-                    payload: [],
-                })
-            ).to.be.true;
-        });
-
         it("dispatches all array combinations for expand all folders actions", async () => {
             // Arrange
             const state = mergeState(initialState, {