From: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
Date: Wed, 16 Sep 2020 21:59:49 +0000 (+0200)
Subject: 16243: Added reducer changes in order to make file download valid
X-Git-Tag: 2.1.0~9^2~2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/0c00f9d96076ad46e2ee499230f3f22a1603675d

16243: Added reducer changes in order to make file download valid

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
---

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 5a7566ff..29f20be2 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,7 +6,6 @@ import * as React from 'react';
 import { TreeItem, TreeItemStatus } from '~/components/tree/tree';
 import { FileTreeData } from '~/components/file-tree/file-tree-data';
 import { FileTree } from '~/components/file-tree/file-tree';
-import { CollectionFileType } from "~/models/collection-file";
 import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip, CircularProgress } from '@material-ui/core';
 import { CustomizeTableIcon } from '~/components/icon/icon';
 import { DownloadIcon } from '~/components/icon/icon';
@@ -130,13 +129,7 @@ export const CollectionPanelFilesComponent = ({ onItemMenuOpen, onSearchChange,
                         <FileTree
                             onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)}
                             {...treeProps}
-                            items={treeProps.items.filter((item) => {
-                                if (item.data.type === CollectionFileType.FILE) {
-                                    return item.data.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-                                }
-
-                                return true;
-                            })} /></div>}
+                            items={treeProps.items} /></div>}
             </>
         }
     </Card>);
diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index 64ffc396..3b4ab35a 100644
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -60,14 +60,14 @@ export const SearchInput = withStyles(styles)(
         render() {
             return <form onSubmit={this.handleSubmit}>
                 <FormControl>
-                    <InputLabel>Search</InputLabel>
+                    <InputLabel>Search files</InputLabel>
                     <Input
                         type="text"
                         value={this.state.value}
                         onChange={this.handleChange}
                         endAdornment={
                             <InputAdornment position="end">
-                                <Tooltip title='Search'>
+                                <Tooltip title='Search files'>
                                     <IconButton
                                         onClick={this.handleSubmit}>
                                         <SearchIcon />
diff --git a/src/models/tree.ts b/src/models/tree.ts
index c7713cbc..e9291388 100644
--- a/src/models/tree.ts
+++ b/src/models/tree.ts
@@ -74,6 +74,7 @@ export const setNodeValueWith = <T>(mapFn: (value: T) => T) => (id: string) => (
 export const mapTreeValues = <T, R>(mapFn: (value: T) => R) => (tree: Tree<T>): Tree<R> =>
     getNodeDescendantsIds('')(tree)
         .map(id => getNode(id)(tree))
+        .filter(node => !!node)
         .map(mapNodeValue(mapFn))
         .reduce((newTree, node) => setNode(node)(newTree), createTree<R>());
 
diff --git a/src/store/collection-panel/collection-panel-files/collection-panel-files-reducer.ts b/src/store/collection-panel/collection-panel-files/collection-panel-files-reducer.ts
index 01f41f0e..25323e27 100644
--- a/src/store/collection-panel/collection-panel-files/collection-panel-files-reducer.ts
+++ b/src/store/collection-panel/collection-panel-files/collection-panel-files-reducer.ts
@@ -7,12 +7,16 @@ import { CollectionPanelFilesAction, collectionPanelFilesAction } from "./collec
 import { createTree, mapTreeValues, getNode, setNode, getNodeAncestorsIds, getNodeDescendantsIds, setNodeValueWith, mapTree } from "~/models/tree";
 import { CollectionFileType } from "~/models/collection-file";
 
+let fetchedFiles: any = {};
+
 export const collectionPanelFilesReducer = (state: CollectionPanelFilesState = createTree(), action: CollectionPanelFilesAction) => {
     // Low-level tree handling setNode() func does in-place data modifications
     // for performance reasons, so we pass a copy of 'state' to avoid side effects.
     return collectionPanelFilesAction.match(action, {
-        SET_COLLECTION_FILES: files =>
-            mergeCollectionPanelFilesStates({ ...state }, mapTree(mapCollectionFileToCollectionPanelFile)(files)),
+        SET_COLLECTION_FILES: files => {
+            fetchedFiles = files;
+            return mergeCollectionPanelFilesStates({ ...state }, mapTree(mapCollectionFileToCollectionPanelFile)(files));
+        },
 
         TOGGLE_COLLECTION_FILE_COLLAPSE: data =>
             toggleCollapse(data.id)({ ...state }),
@@ -22,14 +26,50 @@ export const collectionPanelFilesReducer = (state: CollectionPanelFilesState = c
             .map(toggleAncestors(data.id))
             .map(toggleDescendants(data.id))[0],
 
-        ON_SEARCH_CHANGE: (data) =>
-            mapTreeValues((v: CollectionPanelDirectory | CollectionPanelFile) => {
+        ON_SEARCH_CHANGE: (searchValue) => {
+            // node.children = children.filter((id: string) => id.replace(parentId, '').toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
+            const ids: string[] = [];
+            const filteredFiles = Object.keys(fetchedFiles)
+                .filter((key: string) => {
+                    const node = fetchedFiles[key];
+
+                    if (node.value === undefined) {
+                        return false;
+                    }
+
+                    const { id, value: { type, name } } = node;
+
+                    if (type === CollectionFileType.DIRECTORY) {
+                        ids.push(id);
+                        return true;
+                    }
+
+                    const includeFile = name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+
+                    if (includeFile) {
+                        ids.push(id);
+                    }
+
+                    return includeFile;
+                })
+                .reduce((prev, next) => {
+                    const node = JSON.parse(JSON.stringify(fetchedFiles[next]));
+                    node.children = node.children.filter((key: string) => ids.indexOf(key) > -1);
+                    prev[next] = node;
+                    return prev;
+                }, {});
+
+            return mapTreeValues((v: CollectionPanelDirectory | CollectionPanelFile) => {
                 if (v.type === CollectionFileType.DIRECTORY) {
-                    return ({ ...v, collapsed: data.length === 0 });
+                    return ({ 
+                        ...v,
+                        collapsed: searchValue.length === 0,
+                    });
                 }
 
                 return ({ ...v });
-            })({ ...state }),
+            })({ ...filteredFiles });
+        },
 
         SELECT_ALL_COLLECTION_FILES: () =>
             mapTreeValues(v => ({ ...v, selected: true }))({ ...state }),