[arvados-workbench2] updated: 2.6.0-84-g23575ae9

git repository hosting git at public.arvados.org
Wed Sep 6 13:32:16 UTC 2023


Summary of changes:
 .../collection-panel-files.tsx                     | 951 +++++++++++----------
 src/store/navigation/navigation-action.ts          | 138 ++-
 .../action-sets/collection-action-set.ts           |   6 +-
 3 files changed, 594 insertions(+), 501 deletions(-)

       via  23575ae95aab42c4c4d9c2b5ee0236fab004dccb (commit)
      from  37be20bf76bba0f6dc6fd40f0fcc3d012c6b7e49 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 23575ae95aab42c4c4d9c2b5ee0236fab004dccb
Author: Lisa Knox <lisaknox83 at gmail.com>
Date:   Wed Sep 6 09:32:10 2023 -0400

    15768: fixed navigateTo bug Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index fb36ebce..95dd4d4c 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -2,14 +2,14 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
-import classNames from 'classnames';
-import { connect } from 'react-redux';
+import React from "react";
+import classNames from "classnames";
+import { connect } from "react-redux";
 import { FixedSizeList } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
-import servicesProvider from 'common/service-provider';
-import { CustomizeTableIcon, DownloadIcon, MoreOptionsIcon } from 'components/icon/icon';
-import { SearchInput } from 'components/search-input/search-input';
+import servicesProvider from "common/service-provider";
+import { CustomizeTableIcon, DownloadIcon, MoreOptionsIcon } from "components/icon/icon";
+import { SearchInput } from "components/search-input/search-input";
 import {
     ListItemIcon,
     StyleRulesCallback,
@@ -21,24 +21,18 @@ import {
     Checkbox,
     CircularProgress,
     Button,
-} from '@material-ui/core';
-import { FileTreeData } from '../file-tree/file-tree-data';
-import { TreeItem, TreeItemStatus } from '../tree/tree';
-import { RootState } from 'store/store';
-import { WebDAV, WebDAVRequestConfig } from 'common/webdav';
-import { AuthState } from 'store/auth/auth-reducer';
-import { extractFilesData } from 'services/collection-service/collection-service-files-response';
-import {
-    DefaultIcon,
-    DirectoryIcon,
-    FileIcon,
-    BackIcon,
-    SidePanelRightArrowIcon
-} from 'components/icon/icon';
-import { setCollectionFiles } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
-import { sortBy } from 'lodash';
-import { formatFileSize } from 'common/formatters';
-import { getInlineFileUrl, sanitizeToken } from 'views-components/context-menu/actions/helpers';
+} from "@material-ui/core";
+import { FileTreeData } from "../file-tree/file-tree-data";
+import { TreeItem, TreeItemStatus } from "../tree/tree";
+import { RootState } from "store/store";
+import { WebDAV, WebDAVRequestConfig } from "common/webdav";
+import { AuthState } from "store/auth/auth-reducer";
+import { extractFilesData } from "services/collection-service/collection-service-files-response";
+import { DefaultIcon, DirectoryIcon, FileIcon, BackIcon, SidePanelRightArrowIcon } from "components/icon/icon";
+import { setCollectionFiles } from "store/collection-panel/collection-panel-files/collection-panel-files-actions";
+import { sortBy } from "lodash";
+import { formatFileSize } from "common/formatters";
+import { getInlineFileUrl, sanitizeToken } from "views-components/context-menu/actions/helpers";
 
 export interface CollectionPanelFilesProps {
     isWritable: boolean;
@@ -55,7 +49,8 @@ export interface CollectionPanelFilesProps {
     collectionPanel: any;
 }
 
-type CssRules = "backButton"
+type CssRules =
+    | "backButton"
     | "backButtonHidden"
     | "pathPanelPathWrapper"
     | "uploadButton"
@@ -83,513 +78,613 @@ type CssRules = "backButton"
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     wrapper: {
-        display: 'flex',
-        minHeight: '600px',
-        color: 'rgba(0,0,0,0.87)',
-        fontSize: '0.875rem',
+        display: "flex",
+        minHeight: "600px",
+        color: "rgba(0,0,0,0.87)",
+        fontSize: "0.875rem",
         fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
         fontWeight: 400,
-        lineHeight: '1.5',
-        letterSpacing: '0.01071em'
+        lineHeight: "1.5",
+        letterSpacing: "0.01071em",
     },
     backButton: {
-        color: '#00bfa5',
-        cursor: 'pointer',
-        float: 'left',
+        color: "#00bfa5",
+        cursor: "pointer",
+        float: "left",
     },
     backButtonHidden: {
-        display: 'none',
+        display: "none",
     },
     dataWrapper: {
-        minHeight: '500px'
+        minHeight: "500px",
     },
     row: {
-        display: 'flex',
-        marginTop: '0.5rem',
-        marginBottom: '0.5rem',
-        cursor: 'pointer',
+        display: "flex",
+        marginTop: "0.5rem",
+        marginBottom: "0.5rem",
+        cursor: "pointer",
         "&:hover": {
-            backgroundColor: 'rgba(0, 0, 0, 0.08)',
-        }
+            backgroundColor: "rgba(0, 0, 0, 0.08)",
+        },
     },
     rowEmpty: {
-        top: '40%',
-        width: '100%',
-        textAlign: 'center',
-        position: 'absolute'
+        top: "40%",
+        width: "100%",
+        textAlign: "center",
+        position: "absolute",
     },
     loader: {
-        top: '50%',
-        left: '50%',
-        marginTop: '-15px',
-        marginLeft: '-15px',
-        position: 'absolute'
+        top: "50%",
+        left: "50%",
+        marginTop: "-15px",
+        marginLeft: "-15px",
+        position: "absolute",
     },
     rowName: {
-        display: 'inline-flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
+        display: "inline-flex",
+        flexDirection: "column",
+        justifyContent: "center",
     },
     searchWrapper: {
-        display: 'inline-block',
-        marginBottom: '1rem',
-        marginLeft: '1rem',
+        display: "inline-block",
+        marginBottom: "1rem",
+        marginLeft: "1rem",
     },
     searchWrapperHidden: {
-        width: '0px'
+        width: "0px",
     },
     rowSelection: {
-        padding: '0px',
+        padding: "0px",
     },
     rowActive: {
         color: `${theme.palette.primary.main} !important`,
     },
     listItemIcon: {
-        display: 'inline-flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
+        display: "inline-flex",
+        flexDirection: "column",
+        justifyContent: "center",
     },
     pathPanelMenu: {
-        float: 'right',
-        marginTop: '-15px',
+        float: "right",
+        marginTop: "-15px",
     },
     pathPanel: {
-        padding: '0.5rem',
-        marginBottom: '0.5rem',
-        backgroundColor: '#fff',
-        boxShadow: '0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%)',
+        padding: "0.5rem",
+        marginBottom: "0.5rem",
+        backgroundColor: "#fff",
+        boxShadow: "0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%)",
     },
     pathPanelPathWrapper: {
-        display: 'inline-block',
+        display: "inline-block",
     },
     leftPanel: {
         flex: 0,
-        padding: '0 1rem 1rem',
-        marginRight: '1rem',
-        whiteSpace: 'nowrap',
-        position: 'relative',
-        backgroundColor: '#fff',
-        boxShadow: '0px 3px 3px 0px rgb(0 0 0 / 20%), 0px 3px 1px 0px rgb(0 0 0 / 14%), 0px 3px 1px -1px rgb(0 0 0 / 12%)',
+        padding: "0 1rem 1rem",
+        marginRight: "1rem",
+        whiteSpace: "nowrap",
+        position: "relative",
+        backgroundColor: "#fff",
+        boxShadow: "0px 3px 3px 0px rgb(0 0 0 / 20%), 0px 3px 1px 0px rgb(0 0 0 / 14%), 0px 3px 1px -1px rgb(0 0 0 / 12%)",
     },
     leftPanelVisible: {
         opacity: 1,
-        flex: '50%',
-        animation: `animateVisible 1000ms ${theme.transitions.easing.easeOut}`
+        flex: "50%",
+        animation: `animateVisible 1000ms ${theme.transitions.easing.easeOut}`,
     },
     leftPanelHidden: {
         opacity: 0,
-        flex: 'initial',
-        padding: '0',
-        marginRight: '0',
+        flex: "initial",
+        padding: "0",
+        marginRight: "0",
     },
     "@keyframes animateVisible": {
         "0%": {
             opacity: 0,
-            flex: 'initial',
+            flex: "initial",
         },
         "100%": {
             opacity: 1,
-            flex: '50%',
-        }
+            flex: "50%",
+        },
     },
     rightPanel: {
-        flex: '50%',
-        padding: '1rem',
-        paddingTop: '0.5rem',
-        marginTop: '-0.5rem',
-        position: 'relative',
-        backgroundColor: '#fff',
-        boxShadow: '0px 3px 3px 0px rgb(0 0 0 / 20%), 0px 3px 1px 0px rgb(0 0 0 / 14%), 0px 3px 1px -1px rgb(0 0 0 / 12%)',
+        flex: "50%",
+        padding: "1rem",
+        paddingTop: "0.5rem",
+        marginTop: "-0.5rem",
+        position: "relative",
+        backgroundColor: "#fff",
+        boxShadow: "0px 3px 3px 0px rgb(0 0 0 / 20%), 0px 3px 1px 0px rgb(0 0 0 / 14%), 0px 3px 1px -1px rgb(0 0 0 / 12%)",
     },
     pathPanelItem: {
-        cursor: 'pointer',
+        cursor: "pointer",
     },
     uploadIcon: {
-        transform: 'rotate(180deg)'
+        transform: "rotate(180deg)",
     },
     uploadButton: {
-        float: 'right',
+        float: "right",
     },
     moreOptionsButton: {
         width: theme.spacing.unit * 3,
         height: theme.spacing.unit * 3,
         marginRight: theme.spacing.unit,
-        marginTop: 'auto',
-        marginBottom: 'auto',
-        justifyContent: 'center',
+        marginTop: "auto",
+        marginBottom: "auto",
+        justifyContent: "center",
     },
     moreOptions: {
-        position: 'absolute'
+        position: "absolute",
     },
 });
 
 const pathPromise = {};
 
-export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState) => ({
-    auth: state.auth,
-    collectionPanel: state.collectionPanel,
-    collectionPanelFiles: state.collectionPanelFiles,
-}))((props: CollectionPanelFilesProps & WithStyles<CssRules> & { auth: AuthState }) => {
-    const { classes, onItemMenuOpen, onUploadDataClick, isWritable, dispatch, collectionPanelFiles, collectionPanel } = props;
-    const { apiToken, config } = props.auth;
-
-    const webdavClient = new WebDAV({
-        baseURL: config.keepWebServiceUrl,
-        headers: {
-            Authorization: `Bearer ${apiToken}`
-        },
-    });
-
-    const webDAVRequestConfig: WebDAVRequestConfig = {
-        headers: {
-            Depth: '1',
-        },
-    };
-
-    const parentRef = React.useRef(null);
-    const [path, setPath] = React.useState<string[]>([]);
-    const [pathData, setPathData] = React.useState({});
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [leftSearch, setLeftSearch] = React.useState('');
-    const [rightSearch, setRightSearch] = React.useState('');
-
-    const leftKey = (path.length > 1 ? path.slice(0, path.length - 1) : path).join('/');
-    const rightKey = path.join('/');
-
-    const leftData = pathData[leftKey] || [];
-    const rightData = pathData[rightKey];
-
-    React.useEffect(() => {
-        if (props.currentItemUuid) {
-            setPathData({});
-            setPath([props.currentItemUuid]);
-        }
-    }, [props.currentItemUuid]);
-
-    const fetchData = (keys, ignoreCache = false) => {
-        const keyArray = Array.isArray(keys) ? keys : [keys];
-
-        Promise.all(keyArray.filter(key => !!key)
-            .map((key) => {
-                const dataExists = !!pathData[key];
-                const runningRequest = pathPromise[key];
-
-                if (ignoreCache || (!dataExists && !runningRequest)) {
-                    if (!isLoading) {
-                        setIsLoading(true);
-                    }
+export const CollectionPanelFiles = withStyles(styles)(
+    connect((state: RootState) => ({
+        auth: state.auth,
+        collectionPanel: state.collectionPanel,
+        collectionPanelFiles: state.collectionPanelFiles,
+    }))((props: CollectionPanelFilesProps & WithStyles<CssRules> & { auth: AuthState }) => {
+        const { classes, onItemMenuOpen, onUploadDataClick, isWritable, dispatch, collectionPanelFiles, collectionPanel } = props;
+        const { apiToken, config } = props.auth;
+
+        const webdavClient = new WebDAV({
+            baseURL: config.keepWebServiceUrl,
+            headers: {
+                Authorization: `Bearer ${apiToken}`,
+            },
+        });
 
-                    pathPromise[key] = true;
+        const webDAVRequestConfig: WebDAVRequestConfig = {
+            headers: {
+                Depth: "1",
+            },
+        };
 
-                    return webdavClient.propfind(`c=${key}`, webDAVRequestConfig);
-                }
+        const parentRef = React.useRef(null);
+        const [path, setPath] = React.useState<string[]>([]);
+        const [pathData, setPathData] = React.useState({});
+        const [isLoading, setIsLoading] = React.useState(false);
+        const [leftSearch, setLeftSearch] = React.useState("");
+        const [rightSearch, setRightSearch] = React.useState("");
 
-                return Promise.resolve(null);
-            })
-            .filter((promise) => !!promise)
-        )
-        .then((requests) => {
-            const newState = requests.map((request, index) => {
-                if (request && request.responseXML != null) {
-                    const key = keyArray[index];
-                    const result: any = extractFilesData(request.responseXML);
-                    const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
-                        if (n1.type === 'directory' && n2.type !== 'directory') {
-                            return -1;
-                        }
-                        if (n1.type !== 'directory' && n2.type === 'directory') {
-                            return 1;
-                        }
-                        return 0;
-                    });
+        const leftKey = (path.length > 1 ? path.slice(0, path.length - 1) : path).join("/");
+        const rightKey = path.join("/");
 
-                    return { [key]: sortedResult };
-                }
-                return {};
-            }).reduce((prev, next) => {
-                return { ...next, ...prev };
-            }, {});
-            setPathData((state) => ({ ...state, ...newState }));
-        })
-        .finally(() => {
-            setIsLoading(false);
-            keyArray.forEach(key => delete pathPromise[key]);
-        });
-    };
-
-    React.useEffect(() => {
-        if (rightKey) {
-            fetchData(rightKey);
-            setLeftSearch('');
-            setRightSearch('');
-        }
-    }, [rightKey]); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const currentPDH = (collectionPanel.item || {}).portableDataHash;
-    React.useEffect(() => {
-        if (currentPDH) {
-            fetchData([leftKey, rightKey], true);
-        }
-    }, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
-
-    React.useEffect(() => {
-        if (rightData) {
-            const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
-            setCollectionFiles(filtered, false)(dispatch);
-        }
-    }, [rightData, dispatch, rightSearch]);
-
-    const handleRightClick = React.useCallback(
-        (event) => {
-            event.preventDefault();
-            let elem = event.target;
-
-            while (elem && elem.dataset && !elem.dataset.item) {
-                elem = elem.parentNode;
-            }
+        const leftData = pathData[leftKey] || [];
+        const rightData = pathData[rightKey];
 
-            if (!elem || !elem.dataset) {
-                return;
+        React.useEffect(() => {
+            if (props.currentItemUuid) {
+                setPathData({});
+                setPath([props.currentItemUuid]);
             }
+        }, [props.currentItemUuid]);
 
-            const { id } = elem.dataset;
+        const fetchData = (keys, ignoreCache = false) => {
+            const keyArray = Array.isArray(keys) ? keys : [keys];
 
-            const item: any = {
-                id,
-                data: rightData.find((elem) => elem.id === id),
-            };
+            Promise.all(
+                keyArray
+                    .filter(key => !!key)
+                    .map(key => {
+                        const dataExists = !!pathData[key];
+                        const runningRequest = pathPromise[key];
 
-            if (id) {
-                onItemMenuOpen(event, item, isWritable);
-            }
-        },
-        [onItemMenuOpen, isWritable, rightData]);
+                        if (ignoreCache || (!dataExists && !runningRequest)) {
+                            if (!isLoading) {
+                                setIsLoading(true);
+                            }
 
-    React.useEffect(() => {
-        let node = null;
+                            pathPromise[key] = true;
+                            console.log(key);
 
-        if (parentRef?.current) {
-            node = parentRef.current;
-            (node as any).addEventListener('contextmenu', handleRightClick);
-        }
+                            return webdavClient.propfind(`c=${key}`, webDAVRequestConfig);
+                        }
 
-        return () => {
-            if (node) {
-                (node as any).removeEventListener('contextmenu', handleRightClick);
-            }
+                        return Promise.resolve(null);
+                    })
+                    .filter(promise => !!promise)
+            )
+                .then(requests => {
+                    const newState = requests
+                        .map((request, index) => {
+                            if (request && request.responseXML != null) {
+                                const key = keyArray[index];
+                                const result: any = extractFilesData(request.responseXML);
+                                const sortedResult = sortBy(result, n => n.name).sort((n1, n2) => {
+                                    if (n1.type === "directory" && n2.type !== "directory") {
+                                        return -1;
+                                    }
+                                    if (n1.type !== "directory" && n2.type === "directory") {
+                                        return 1;
+                                    }
+                                    return 0;
+                                });
+
+                                return { [key]: sortedResult };
+                            }
+                            return {};
+                        })
+                        .reduce((prev, next) => {
+                            return { ...next, ...prev };
+                        }, {});
+                    setPathData(state => ({ ...state, ...newState }));
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                    keyArray.forEach(key => delete pathPromise[key]);
+                });
         };
-    }, [parentRef, handleRightClick]);
 
-    const handleClick = React.useCallback(
-        (event: any) => {
-            let isCheckbox = false;
-            let isMoreButton = false;
-            let elem = event.target;
-
-            if (elem.type === 'checkbox') {
-                isCheckbox = true;
-            }
-            // The "More options" button click event could be triggered on its
-            // internal graphic element.
-            else if ((elem.dataset && elem.dataset.id === 'moreOptions') || (elem.parentNode && elem.parentNode.dataset && elem.parentNode.dataset.id === 'moreOptions')) {
-                isMoreButton = true;
+        React.useEffect(() => {
+            if (rightKey) {
+                fetchData(rightKey);
+                setLeftSearch("");
+                setRightSearch("");
             }
+        }, [rightKey]); // eslint-disable-line react-hooks/exhaustive-deps
 
-            while (elem && elem.dataset && !elem.dataset.item) {
-                elem = elem.parentNode;
+        const currentPDH = (collectionPanel.item || {}).portableDataHash;
+        React.useEffect(() => {
+            if (currentPDH) {
+                fetchData([leftKey, rightKey], true);
             }
+        }, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
 
-            if (elem && elem.dataset && !isCheckbox && !isMoreButton) {
-                const { parentPath, subfolderPath, breadcrumbPath, type } = elem.dataset;
-
-                if (breadcrumbPath) {
-                    const index = path.indexOf(breadcrumbPath);
-                    setPath((state) => ([...state.slice(0, index + 1)]));
-                }
-
-                if (parentPath && type === 'directory') {
-                    if (path.length > 1) {
-                        path.pop()
-                    }
+        React.useEffect(() => {
+            if (rightData) {
+                const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+                setCollectionFiles(filtered, false)(dispatch);
+            }
+        }, [rightData, dispatch, rightSearch]);
 
-                    setPath((state) => ([...state, parentPath]));
-                }
+        const handleRightClick = React.useCallback(
+            event => {
+                event.preventDefault();
+                let elem = event.target;
 
-                if (subfolderPath && type === 'directory') {
-                    setPath((state) => ([...state, subfolderPath]));
+                while (elem && elem.dataset && !elem.dataset.item) {
+                    elem = elem.parentNode;
                 }
 
-                if (elem.dataset.id && type === 'file') {
-                    const item = rightData.find(({id}) => id === elem.dataset.id) || leftData.find(({ id }) => id === elem.dataset.id);
-                    const enhancedItem = servicesProvider.getServices().collectionService.extendFileURL(item);
-                    const fileUrl = sanitizeToken(getInlineFileUrl(enhancedItem.url, config.keepWebServiceUrl, config.keepWebInlineServiceUrl), true);
-                    window.open(fileUrl, '_blank');
+                if (!elem || !elem.dataset) {
+                    return;
                 }
-            }
 
-            if (isCheckbox) {
-                const { id } = elem.dataset;
-                const item = collectionPanelFiles[id];
-                props.onSelectionToggle(event, item);
-            }
-            if (isMoreButton) {
                 const { id } = elem.dataset;
+
                 const item: any = {
                     id,
-                    data: rightData.find((elem) => elem.id === id),
+                    data: rightData.find(elem => elem.id === id),
                 };
-                onItemMenuOpen(event, item, isWritable);
-            }
-        },
-        [path, setPath, collectionPanelFiles] // eslint-disable-line react-hooks/exhaustive-deps
-    );
-
-    const getItemIcon = React.useCallback(
-        (type: string, activeClass: string | null) => {
-            let Icon = DefaultIcon;
-
-            switch (type) {
-                case 'directory':
-                    Icon = DirectoryIcon;
-                    break;
-                case 'file':
-                    Icon = FileIcon;
-                    break;
-            }
 
-            return (
-                <ListItemIcon className={classNames(classes.listItemIcon, activeClass)}>
-                    <Icon />
-                </ListItemIcon>
-            )
-        },
-        [classes]
-    );
+                if (id) {
+                    onItemMenuOpen(event, item, isWritable);
+                }
+            },
+            [onItemMenuOpen, isWritable, rightData]
+        );
 
-    const getActiveClass = React.useCallback(
-        (name) => {
-            return path[path.length - 1] === name ? classes.rowActive : null;
-        },
-        [path, classes]
-    );
+        React.useEffect(() => {
+            let node = null;
 
-    const onOptionsMenuOpen = React.useCallback(
-        (ev, isWritable) => {
-            props.onOptionsMenuOpen(ev, isWritable);
-        },
-        [props.onOptionsMenuOpen] // eslint-disable-line react-hooks/exhaustive-deps
-    );
-
-    return <div data-cy="collection-files-panel" onClick={handleClick} ref={parentRef}>
-        <div className={classes.pathPanel}>
-            <div className={classes.pathPanelPathWrapper}>
-            { path.map( (p: string, index: number) =>
-                <span key={`${index}-${p}`} data-item="true"
-                className={classes.pathPanelItem} data-breadcrumb-path={p}>
-                    <span className={classes.rowActive}>{index === 0 ? 'Home' : p}</span> <b>/</b> 
-                </span>)
+            if (parentRef?.current) {
+                node = parentRef.current;
+                (node as any).addEventListener("contextmenu", handleRightClick);
             }
-            </div>
-            <Tooltip className={classes.pathPanelMenu} title="More options" disableFocusListener>
-                <IconButton data-cy='collection-files-panel-options-btn'
-                    onClick={(ev) => {
-                        onOptionsMenuOpen(ev, isWritable);
-                    }}>
-                    <CustomizeTableIcon />
-                </IconButton>
-            </Tooltip>
-        </div>
-        <div className={classes.wrapper}>
-            <div className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)} data-cy="collection-files-left-panel">
-                <Tooltip title="Go back" className={path.length > 1 ? classes.backButton : classes.backButtonHidden}>
-                    <IconButton onClick={() => setPath((state) => ([...state.slice(0, state.length -1)]))}>
-                        <BackIcon />
-                    </IconButton>
-                </Tooltip>
-                <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
-                    <SearchInput selfClearProp={leftKey} label="Search" value={leftSearch} onSearch={setLeftSearch} />
+
+            return () => {
+                if (node) {
+                    (node as any).removeEventListener("contextmenu", handleRightClick);
+                }
+            };
+        }, [parentRef, handleRightClick]);
+
+        const handleClick = React.useCallback(
+            (event: any) => {
+                let isCheckbox = false;
+                let isMoreButton = false;
+                let elem = event.target;
+
+                if (elem.type === "checkbox") {
+                    isCheckbox = true;
+                }
+                // The "More options" button click event could be triggered on its
+                // internal graphic element.
+                else if (
+                    (elem.dataset && elem.dataset.id === "moreOptions") ||
+                    (elem.parentNode && elem.parentNode.dataset && elem.parentNode.dataset.id === "moreOptions")
+                ) {
+                    isMoreButton = true;
+                }
+
+                while (elem && elem.dataset && !elem.dataset.item) {
+                    elem = elem.parentNode;
+                }
+
+                if (elem && elem.dataset && !isCheckbox && !isMoreButton) {
+                    const { parentPath, subfolderPath, breadcrumbPath, type } = elem.dataset;
+
+                    if (breadcrumbPath) {
+                        const index = path.indexOf(breadcrumbPath);
+                        setPath(state => [...state.slice(0, index + 1)]);
+                    }
+
+                    if (parentPath && type === "directory") {
+                        if (path.length > 1) {
+                            path.pop();
+                        }
+
+                        setPath(state => [...state, parentPath]);
+                    }
+
+                    if (subfolderPath && type === "directory") {
+                        setPath(state => [...state, subfolderPath]);
+                    }
+
+                    if (elem.dataset.id && type === "file") {
+                        const item = rightData.find(({ id }) => id === elem.dataset.id) || leftData.find(({ id }) => id === elem.dataset.id);
+                        const enhancedItem = servicesProvider.getServices().collectionService.extendFileURL(item);
+                        const fileUrl = sanitizeToken(
+                            getInlineFileUrl(enhancedItem.url, config.keepWebServiceUrl, config.keepWebInlineServiceUrl),
+                            true
+                        );
+                        window.open(fileUrl, "_blank");
+                    }
+                }
+
+                if (isCheckbox) {
+                    const { id } = elem.dataset;
+                    const item = collectionPanelFiles[id];
+                    props.onSelectionToggle(event, item);
+                }
+                if (isMoreButton) {
+                    const { id } = elem.dataset;
+                    const item: any = {
+                        id,
+                        data: rightData.find(elem => elem.id === id),
+                    };
+                    onItemMenuOpen(event, item, isWritable);
+                }
+            },
+            [path, setPath, collectionPanelFiles] // eslint-disable-line react-hooks/exhaustive-deps
+        );
+
+        const getItemIcon = React.useCallback(
+            (type: string, activeClass: string | null) => {
+                let Icon = DefaultIcon;
+
+                switch (type) {
+                    case "directory":
+                        Icon = DirectoryIcon;
+                        break;
+                    case "file":
+                        Icon = FileIcon;
+                        break;
+                }
+
+                return (
+                    <ListItemIcon className={classNames(classes.listItemIcon, activeClass)}>
+                        <Icon />
+                    </ListItemIcon>
+                );
+            },
+            [classes]
+        );
+
+        const getActiveClass = React.useCallback(
+            name => {
+                return path[path.length - 1] === name ? classes.rowActive : null;
+            },
+            [path, classes]
+        );
+
+        const onOptionsMenuOpen = React.useCallback(
+            (ev, isWritable) => {
+                props.onOptionsMenuOpen(ev, isWritable);
+            },
+            [props.onOptionsMenuOpen] // eslint-disable-line react-hooks/exhaustive-deps
+        );
+
+        return (
+            <div
+                data-cy="collection-files-panel"
+                onClick={handleClick}
+                ref={parentRef}>
+                <div className={classes.pathPanel}>
+                    <div className={classes.pathPanelPathWrapper}>
+                        {path.map((p: string, index: number) => (
+                            <span
+                                key={`${index}-${p}`}
+                                data-item="true"
+                                className={classes.pathPanelItem}
+                                data-breadcrumb-path={p}>
+                                <span className={classes.rowActive}>{index === 0 ? "Home" : p}</span> <b>/</b> 
+                            </span>
+                        ))}
+                    </div>
+                    <Tooltip
+                        className={classes.pathPanelMenu}
+                        title="More options"
+                        disableFocusListener>
+                        <IconButton
+                            data-cy="collection-files-panel-options-btn"
+                            onClick={ev => {
+                                onOptionsMenuOpen(ev, isWritable);
+                            }}>
+                            <CustomizeTableIcon />
+                        </IconButton>
+                    </Tooltip>
                 </div>
-                <div className={classes.dataWrapper}>{ leftData
-                ? <AutoSizer defaultWidth={0}>{({ height, width }) => {
-                    const filtered = leftData.filter(({ name }) => name.indexOf(leftSearch) > -1);
-                    return !!filtered.length
-                    ? <FixedSizeList height={height} itemCount={filtered.length}
-                        itemSize={35} width={width}>{ ({ index, style }) => {
-                        const { id, type, name } = filtered[index];
-                        return <div data-id={id} style={style} data-item="true"
-                            data-type={type} data-parent-path={name}
-                            className={classNames(classes.row, getActiveClass(name))}
-                            key={id}>
-                                { getItemIcon(type, getActiveClass(name)) }
-                                <div className={classes.rowName}>
-                                    {name}
+                <div className={classes.wrapper}>
+                    <div
+                        className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)}
+                        data-cy="collection-files-left-panel">
+                        <Tooltip
+                            title="Go back"
+                            className={path.length > 1 ? classes.backButton : classes.backButtonHidden}>
+                            <IconButton onClick={() => setPath(state => [...state.slice(0, state.length - 1)])}>
+                                <BackIcon />
+                            </IconButton>
+                        </Tooltip>
+                        <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
+                            <SearchInput
+                                selfClearProp={leftKey}
+                                label="Search"
+                                value={leftSearch}
+                                onSearch={setLeftSearch}
+                            />
+                        </div>
+                        <div className={classes.dataWrapper}>
+                            {leftData ? (
+                                <AutoSizer defaultWidth={0}>
+                                    {({ height, width }) => {
+                                        const filtered = leftData.filter(({ name }) => name.indexOf(leftSearch) > -1);
+                                        return !!filtered.length ? (
+                                            <FixedSizeList
+                                                height={height}
+                                                itemCount={filtered.length}
+                                                itemSize={35}
+                                                width={width}>
+                                                {({ index, style }) => {
+                                                    const { id, type, name } = filtered[index];
+                                                    return (
+                                                        <div
+                                                            data-id={id}
+                                                            style={style}
+                                                            data-item="true"
+                                                            data-type={type}
+                                                            data-parent-path={name}
+                                                            className={classNames(classes.row, getActiveClass(name))}
+                                                            key={id}>
+                                                            {getItemIcon(type, getActiveClass(name))}
+                                                            <div className={classes.rowName}>{name}</div>
+                                                            {getActiveClass(name) ? (
+                                                                <SidePanelRightArrowIcon
+                                                                    style={{ display: "inline", marginTop: "5px", marginLeft: "5px" }}
+                                                                />
+                                                            ) : null}
+                                                        </div>
+                                                    );
+                                                }}
+                                            </FixedSizeList>
+                                        ) : (
+                                            <div className={classes.rowEmpty}>No directories available</div>
+                                        );
+                                    }}
+                                </AutoSizer>
+                            ) : (
+                                <div
+                                    data-cy="collection-loader"
+                                    className={classes.row}>
+                                    <CircularProgress
+                                        className={classes.loader}
+                                        size={30}
+                                    />
                                 </div>
-                                { getActiveClass(name)
-                                ? <SidePanelRightArrowIcon
-                                    style={{ display: 'inline', marginTop: '5px', marginLeft: '5px' }} />
-                                : null
-                                }
-                        </div>;
-                    }}</FixedSizeList>
-                    : <div className={classes.rowEmpty}>No directories available</div>
-                    }}
-                </AutoSizer>
-                : <div data-cy="collection-loader" className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
-                </div>
-            </div>
-            <div className={classes.rightPanel} data-cy="collection-files-right-panel">
-                <div className={classes.searchWrapper}>
-                    <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
-                </div>
-                { isWritable &&
-                <Button className={classes.uploadButton} data-cy='upload-button'
-                    onClick={() => {
-                        onUploadDataClick(rightKey === leftKey ? undefined : rightKey);
-                    }}
-                    variant='contained' color='primary' size='small'>
-                    <DownloadIcon className={classes.uploadIcon} />
-                    Upload data
-                </Button> }
-                <div className={classes.dataWrapper}>{ rightData && !isLoading
-                    ? <AutoSizer defaultHeight={500}>{({ height, width }) => {
-                        const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
-                        return !!filtered.length
-                        ? <FixedSizeList height={height} itemCount={filtered.length}
-                            itemSize={35} width={width}>{ ({ index, style }) => {
-                                const { id, type, name, size } = filtered[index];
-
-                                return <div style={style} data-id={id} data-item="true"
-                                    data-type={type} data-subfolder-path={name}
-                                    className={classes.row} key={id}>
-                                    <Checkbox color="primary"
-                                        className={classes.rowSelection}
-                                        checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
-                                    /> 
-                                    {getItemIcon(type, null)}
-                                    <div className={classes.rowName}>
-                                        {name}
-                                    </div>
-                                    <span className={classes.rowName} style={{
-                                        marginLeft: 'auto', marginRight: '1rem' }}>
-                                        { formatFileSize(size) }
-                                    </span>
-                                    <Tooltip title="More options" disableFocusListener>
-                                        <IconButton data-id='moreOptions'
-                                            data-cy='file-item-options-btn'
-                                            className={classes.moreOptionsButton}>
-                                            <MoreOptionsIcon
-                                                data-id='moreOptions'
-                                                className={classes.moreOptions} />
-                                        </IconButton>
-                                    </Tooltip>
+                            )}
+                        </div>
+                    </div>
+                    <div
+                        className={classes.rightPanel}
+                        data-cy="collection-files-right-panel">
+                        <div className={classes.searchWrapper}>
+                            <SearchInput
+                                selfClearProp={rightKey}
+                                label="Search"
+                                value={rightSearch}
+                                onSearch={setRightSearch}
+                            />
+                        </div>
+                        {isWritable && (
+                            <Button
+                                className={classes.uploadButton}
+                                data-cy="upload-button"
+                                onClick={() => {
+                                    onUploadDataClick(rightKey === leftKey ? undefined : rightKey);
+                                }}
+                                variant="contained"
+                                color="primary"
+                                size="small">
+                                <DownloadIcon className={classes.uploadIcon} />
+                                Upload data
+                            </Button>
+                        )}
+                        <div className={classes.dataWrapper}>
+                            {rightData && !isLoading ? (
+                                <AutoSizer defaultHeight={500}>
+                                    {({ height, width }) => {
+                                        const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+                                        return !!filtered.length ? (
+                                            <FixedSizeList
+                                                height={height}
+                                                itemCount={filtered.length}
+                                                itemSize={35}
+                                                width={width}>
+                                                {({ index, style }) => {
+                                                    const { id, type, name, size } = filtered[index];
+
+                                                    return (
+                                                        <div
+                                                            style={style}
+                                                            data-id={id}
+                                                            data-item="true"
+                                                            data-type={type}
+                                                            data-subfolder-path={name}
+                                                            className={classes.row}
+                                                            key={id}>
+                                                            <Checkbox
+                                                                color="primary"
+                                                                className={classes.rowSelection}
+                                                                checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
+                                                            />
+                                                             
+                                                            {getItemIcon(type, null)}
+                                                            <div className={classes.rowName}>{name}</div>
+                                                            <span
+                                                                className={classes.rowName}
+                                                                style={{
+                                                                    marginLeft: "auto",
+                                                                    marginRight: "1rem",
+                                                                }}>
+                                                                {formatFileSize(size)}
+                                                            </span>
+                                                            <Tooltip
+                                                                title="More options"
+                                                                disableFocusListener>
+                                                                <IconButton
+                                                                    data-id="moreOptions"
+                                                                    data-cy="file-item-options-btn"
+                                                                    className={classes.moreOptionsButton}>
+                                                                    <MoreOptionsIcon
+                                                                        data-id="moreOptions"
+                                                                        className={classes.moreOptions}
+                                                                    />
+                                                                </IconButton>
+                                                            </Tooltip>
+                                                        </div>
+                                                    );
+                                                }}
+                                            </FixedSizeList>
+                                        ) : (
+                                            <div className={classes.rowEmpty}>This collection is empty</div>
+                                        );
+                                    }}
+                                </AutoSizer>
+                            ) : (
+                                <div className={classes.row}>
+                                    <CircularProgress
+                                        className={classes.loader}
+                                        size={30}
+                                    />
                                 </div>
-                            } }</FixedSizeList>
-                        : <div className={classes.rowEmpty}>This collection is empty</div>
-                    }}</AutoSizer>
-                    : <div className={classes.row}>
-                        <CircularProgress className={classes.loader} size={30} />
-                    </div> }
+                            )}
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>}));
+        );
+    })
+);
diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index 55479188..b3bd3290 100644
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -2,86 +2,85 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { Dispatch, compose, AnyAction } from 'redux';
+import { Dispatch, compose, AnyAction } from "redux";
 import { push } from "react-router-redux";
-import { ResourceKind, extractUuidKind } from 'models/resource';
-import { SidePanelTreeCategory } from '../side-panel-tree/side-panel-tree-actions';
-import { Routes, getGroupUrl, getNavUrl, getUserProfileUrl } from 'routes/routes';
-import { RootState } from 'store/store';
-import { ServiceRepository } from 'services/services';
-import { pluginConfig } from 'plugins';
-import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
-import { USERS_PANEL_LABEL, MY_ACCOUNT_PANEL_LABEL } from 'store/breadcrumbs/breadcrumbs-actions';
+import { ResourceKind, extractUuidKind } from "models/resource";
+import { SidePanelTreeCategory } from "../side-panel-tree/side-panel-tree-actions";
+import { Routes, getGroupUrl, getNavUrl, getUserProfileUrl } from "routes/routes";
+import { RootState } from "store/store";
+import { ServiceRepository } from "services/services";
+import { pluginConfig } from "plugins";
+import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions";
+import { USERS_PANEL_LABEL, MY_ACCOUNT_PANEL_LABEL } from "store/breadcrumbs/breadcrumbs-actions";
 
 export const navigationNotAvailable = (id: string) =>
     snackbarActions.OPEN_SNACKBAR({
         message: `${id} not available`,
         hideDuration: 3000,
-        kind: SnackbarKind.ERROR
+        kind: SnackbarKind.ERROR,
     });
 
-export const navigateTo = (uuid: string) =>
-    async (dispatch: Dispatch, getState: () => RootState) => {
+export const navigateTo = (inputUuid: any) => async (dispatch: Dispatch, getState: () => RootState) => {
+    const uuid = typeof inputUuid === "string" ? inputUuid : inputUuid[0];
 
-        for (const navToFn of pluginConfig.navigateToHandlers) {
-            if (navToFn(dispatch, getState, uuid)) {
-                return;
-            }
-        }
-
-        const kind = extractUuidKind(uuid);
-        switch (kind) {
-            case ResourceKind.PROJECT:
-            case ResourceKind.USER:
-            case ResourceKind.COLLECTION:
-            case ResourceKind.CONTAINER_REQUEST:
-                dispatch<any>(pushOrGoto(getNavUrl(uuid, getState().auth)));
-                return;
-            case ResourceKind.VIRTUAL_MACHINE:
-                dispatch<any>(navigateToAdminVirtualMachines);
-                return;
-            case ResourceKind.WORKFLOW:
-                dispatch<any>(pushOrGoto(getNavUrl(uuid, getState().auth)));
-                // dispatch<any>(openDetailsPanel(uuid));
-                return;
+    for (const navToFn of pluginConfig.navigateToHandlers) {
+        if (navToFn(dispatch, getState, uuid)) {
+            return;
         }
+    }
 
-        switch (uuid) {
-            case SidePanelTreeCategory.PROJECTS:
-                const usr = getState().auth.user;
-                if (usr) {
-                    dispatch<any>(pushOrGoto(getNavUrl(usr.uuid, getState().auth)));
-                }
-                return;
-            case SidePanelTreeCategory.FAVORITES:
-                dispatch<any>(navigateToFavorites);
-                return;
-            case SidePanelTreeCategory.PUBLIC_FAVORITES:
-                dispatch(navigateToPublicFavorites);
-                return;
-            case SidePanelTreeCategory.SHARED_WITH_ME:
-                dispatch(navigateToSharedWithMe);
-                return;
-            case SidePanelTreeCategory.TRASH:
-                dispatch(navigateToTrash);
-                return;
-            case SidePanelTreeCategory.GROUPS:
-                dispatch(navigateToGroups);
-                return;
-            case SidePanelTreeCategory.ALL_PROCESSES:
-                dispatch(navigateToAllProcesses);
-                return;
-            case USERS_PANEL_LABEL:
-                dispatch(navigateToUsers);
-                return;
-            case MY_ACCOUNT_PANEL_LABEL:
-                dispatch(navigateToMyAccount);
-                return;
-        }
+    const kind = extractUuidKind(uuid);
+    switch (kind) {
+        case ResourceKind.PROJECT:
+        case ResourceKind.USER:
+        case ResourceKind.COLLECTION:
+        case ResourceKind.CONTAINER_REQUEST:
+            dispatch<any>(pushOrGoto(getNavUrl(uuid, getState().auth)));
+            return;
+        case ResourceKind.VIRTUAL_MACHINE:
+            dispatch<any>(navigateToAdminVirtualMachines);
+            return;
+        case ResourceKind.WORKFLOW:
+            dispatch<any>(pushOrGoto(getNavUrl(uuid, getState().auth)));
+            // dispatch<any>(openDetailsPanel(uuid));
+            return;
+    }
 
-        dispatch(navigationNotAvailable(uuid));
-    };
+    switch (uuid) {
+        case SidePanelTreeCategory.PROJECTS:
+            const usr = getState().auth.user;
+            if (usr) {
+                dispatch<any>(pushOrGoto(getNavUrl(usr.uuid, getState().auth)));
+            }
+            return;
+        case SidePanelTreeCategory.FAVORITES:
+            dispatch<any>(navigateToFavorites);
+            return;
+        case SidePanelTreeCategory.PUBLIC_FAVORITES:
+            dispatch(navigateToPublicFavorites);
+            return;
+        case SidePanelTreeCategory.SHARED_WITH_ME:
+            dispatch(navigateToSharedWithMe);
+            return;
+        case SidePanelTreeCategory.TRASH:
+            dispatch(navigateToTrash);
+            return;
+        case SidePanelTreeCategory.GROUPS:
+            dispatch(navigateToGroups);
+            return;
+        case SidePanelTreeCategory.ALL_PROCESSES:
+            dispatch(navigateToAllProcesses);
+            return;
+        case USERS_PANEL_LABEL:
+            dispatch(navigateToUsers);
+            return;
+        case MY_ACCOUNT_PANEL_LABEL:
+            dispatch(navigateToMyAccount);
+            return;
+    }
 
+    dispatch(navigationNotAvailable(uuid));
+};
 
 export const navigateToNotFound = push(Routes.NO_MATCH);
 
@@ -98,7 +97,7 @@ export const navigateToWorkflows = push(Routes.WORKFLOWS);
 export const pushOrGoto = (url: string): AnyAction => {
     if (url === "") {
         return { type: "noop" };
-    } else if (url[0] === '/') {
+    } else if (url[0] === "/") {
         return push(url);
     } else {
         window.location.href = url;
@@ -106,7 +105,6 @@ export const pushOrGoto = (url: string): AnyAction => {
     }
 };
 
-
 export const navigateToRootProject = (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
     navigateTo(SidePanelTreeCategory.PROJECTS)(dispatch, getState);
 };
@@ -117,7 +115,7 @@ export const navigateToRunProcess = push(Routes.RUN_PROCESS);
 
 export const navigateToSearchResults = (searchValue: string) => {
     if (searchValue !== "") {
-        return push({ pathname: Routes.SEARCH_RESULTS, search: '?q=' + encodeURIComponent(searchValue) });
+        return push({ pathname: Routes.SEARCH_RESULTS, search: "?q=" + encodeURIComponent(searchValue) });
     } else {
         return push({ pathname: Routes.SEARCH_RESULTS });
     }
diff --git a/src/views-components/context-menu/action-sets/collection-action-set.ts b/src/views-components/context-menu/action-sets/collection-action-set.ts
index c93d5859..f960571e 100644
--- a/src/views-components/context-menu/action-sets/collection-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-action-set.ts
@@ -51,8 +51,8 @@ const commonActionSet: ContextMenuActionSet = [
         {
             icon: OpenIcon,
             name: "Open in new tab",
-            execute: (dispatch, resource) => {
-                dispatch<any>(openInNewTabAction(resource));
+            execute: (dispatch, resources) => {
+                dispatch<any>(openInNewTabAction(resources[0]));
             },
         },
         {
@@ -66,7 +66,7 @@ const commonActionSet: ContextMenuActionSet = [
             icon: CopyIcon,
             name: "Make a copy",
             execute: (dispatch, resources) => {
-                resources.forEach(resource => dispatch<any>(openCollectionCopyDialog(resource)));
+                resources.forEach(resource => dispatch<any>(openCollectionCopyDialog(resource))); //here
             },
         },
         {

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list