refs #14785-selection-of-table-content

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@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 028dfb0c0b7f994a35c2d8e7f0707f122718a784..0a443907f9adeb925e578046fda2ef8db5b95e67 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -18,6 +18,7 @@ export interface CollectionPanelFilesProps {
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
     onFileClick: (id: string) => void;
+    currentItemUuid?: string;
 }
 
 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 878f47ff769b026741c7203b78c77bdb9317e156..2e3e1a3444e50bfa59dfc37c5df8844246fb792b 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from '@material-ui/core';
 import { ColumnSelector } from "~/components/column-selector/column-selector";
 import { DataTable, DataColumns, DataTableFetchMode } from "~/components/data-table/data-table";
-import { DataColumn, SortDirection } from "~/components/data-table/data-column";
+import { DataColumn } from "~/components/data-table/data-column";
 import { SearchInput } from '~/components/search-input/search-input';
 import { ArvadosTheme } from "~/common/custom-theme";
 import { createTree } from '~/models/tree';
@@ -51,6 +51,7 @@ interface DataExplorerDataProps<T> {
     actions?: React.ReactNode;
     hideSearchInput?: boolean;
     paperKey?: string;
+    currentItemUuid: string;
 }
 
 interface DataExplorerActionProps<T> {
@@ -83,7 +84,7 @@ export const DataExplorer = withStyles(styles)(
                 rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
                 items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
                 dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
-                paperKey, fetchMode
+                paperKey, fetchMode, currentItemUuid
             } = this.props;
             return <Paper className={classes.root} {...paperProps} key={paperKey}>
                 {(!hideColumnSelector || !hideSearchInput) && <Toolbar className={classes.toolbar}>
@@ -109,7 +110,9 @@ export const DataExplorer = withStyles(styles)(
                     onSortToggle={onSortToggle}
                     extractKey={extractKey}
                     working={working}
-                    defaultView={dataTableDefaultView} />
+                    defaultView={dataTableDefaultView} 
+                    currentItemUuid={currentItemUuid} 
+                    currentRoute={paperKey} />
                 <Toolbar className={classes.footer}>
                     <Grid container justify="flex-end">
                         {fetchMode === DataTableFetchMode.PAGINATED ? <TablePagination

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 8298861b2473a34ab13a0b3c85099b9e1af4b4e4..a0d047ceaebc854dd810c4af73a005b053768fcf 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -28,6 +28,8 @@ export interface DataTableDataProps<T> {
     extractKey?: (item: T) => React.Key;
     working?: boolean;
     defaultView?: React.ReactNode;
+    currentItemUuid?: string;
+    currentRoute?: string;
 }
 
 type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell';
@@ -112,14 +114,15 @@ export const DataTable = withStyles(styles)(
             </TableCell>;
         }
 
-        renderBodyRow = (item: T, index: number) => {
-            const { onRowClick, onRowDoubleClick, extractKey, classes } = this.props;
+        renderBodyRow = (item: any, index: number) => {
+            const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid } = this.props;
             return <TableRow
                 hover
                 key={extractKey ? extractKey(item) : index}
                 onClick={event => onRowClick && onRowClick(event, item)}
                 onContextMenu={this.handleRowContextMenu(item)}
-                onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}>
+                onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}
+                selected={item === currentItemUuid}>
                 {this.mapVisibleColumns((column, index) => (
                     <TableCell key={column.key || index} className={classes.tableCell}>
                         {column.render(item)}

diff --git a/src/components/file-tree/file-tree.tsx b/src/components/file-tree/file-tree.tsx
index 4f581a6cf860c3ad5178d9f74d90390d41a7713a..ad7ac73ece0511bb7c5233b09cbc1437985659dd 100644 (file)
--- a/src/components/file-tree/file-tree.tsx
+++ b/src/components/file-tree/file-tree.tsx
@@ -13,6 +13,7 @@ export interface FileTreeProps {
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
     onFileClick: (id: string) => void;
+    currentItemUuid?: string;
 }
 
 export class FileTree extends React.Component<FileTreeProps> {
@@ -25,7 +26,8 @@ export class FileTree extends React.Component<FileTreeProps> {
             onContextMenu={this.handleContextMenu}
             toggleItemActive={this.handleToggleActive}
             toggleItemOpen={this.handleToggle}
-            toggleItemSelection={this.handleSelectionChange} />;
+            toggleItemSelection={this.handleSelectionChange} 
+            currentItemUuid={this.props.currentItemUuid} />;
     }
 
     handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 5b070b706a4f5583370866fcd7ce520d89ea86fd..826884aadce9c844d9825d433b9bcfd4e1863cf0 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -83,6 +83,7 @@ export interface TreeItem<T> {
 
 export interface TreeProps<T> {
     disableRipple?: boolean;
+    currentItemUuid?: string;
     items?: Array<TreeItem<T>>;
     level?: number;
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
@@ -99,7 +100,7 @@ export const Tree = withStyles(styles)(
     class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
         render(): ReactElement<any> {
             const level = this.props.level ? this.props.level : 0;
-            const { classes, render, toggleItemOpen, items, toggleItemActive, onContextMenu, disableRipple } = this.props;
+            const { classes, render, toggleItemOpen, items, toggleItemActive, onContextMenu, disableRipple, currentItemUuid } = this.props;
             const { list, listItem, loader, toggableIconContainer, renderContainer } = classes;
             const isCheckboxVisible = typeof this.props.showSelection === 'function'
                 ? this.props.showSelection
@@ -110,13 +111,14 @@ export const Tree = withStyles(styles)(
             return <List className={list}>
                 {items && items.map((it: TreeItem<T>, idx: number) =>
                     <div key={`item/${level}/${idx}`}>
-                        <ListItem button className={listItem} 
-                            style={{ 
+                        <ListItem button className={listItem}
+                            style={{
                                 paddingLeft: (level + 1) * levelIndentation,
                                 paddingRight: itemRightPadding,
                             }}
                             disableRipple={disableRipple}
                             onClick={event => toggleItemActive(event, it)}
+                            selected={isCheckboxVisible(it) && it.id === currentItemUuid}
                             onContextMenu={this.handleRowContextMenu(it)}>
                             {it.status === TreeItemStatus.PENDING ?
                                 <CircularProgress size={10} className={loader} /> : null}
@@ -126,7 +128,7 @@ export const Tree = withStyles(styles)(
                                     {this.getProperArrowAnimation(it.status, it.items!)}
                                 </ListItemIcon>
                             </i>
-                            { isCheckboxVisible(it) &&
+                            {isCheckboxVisible(it) &&
                                 <Checkbox
                                     checked={it.selected}
                                     className={classes.checkbox}

diff --git a/src/views-components/collection-panel-files/collection-panel-files.ts b/src/views-components/collection-panel-files/collection-panel-files.ts
index 7836e1f794d2436e7f49a5742b9a4071f3920fc1..e5983b6bfe903abfea5c17e509b6aa1ebad1bf2d 100644 (file)
--- a/src/views-components/collection-panel-files/collection-panel-files.ts
+++ b/src/views-components/collection-panel-files/collection-panel-files.ts
@@ -29,14 +29,15 @@ const memoizedMapStateToProps = () => {
     let prevState: CollectionPanelFilesState;
     let prevTree: Array<TreeItem<FileTreeData>>;
 
-    return (state: RootState): Pick<CollectionPanelFilesProps, "items"> => {
+    return (state: RootState): Pick<CollectionPanelFilesProps, "items" | "currentItemUuid"> => {
         if (prevState !== state.collectionPanelFiles) {
             prevState = state.collectionPanelFiles;
             prevTree = getNodeChildrenIds('')(state.collectionPanelFiles)
                 .map(collectionItemToTreeItem(state.collectionPanelFiles));
         }
         return {
-            items: prevTree
+            items: prevTree,
+            currentItemUuid: state.detailsPanel.resourceUuid
         };
     };
 };

diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 8c95355f6265990773ef20a58965dd1050063676..ed4bffd6ed83221e5958c4d56e4ed3d59ea132a9 100644 (file)
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -24,7 +24,8 @@ const mapStateToProps = (state: RootState, { id }: Props) => {
     const progress = state.progressIndicator.find(p => p.id === id);
     const working = progress && progress.working;
     const currentRoute = state.router.location ? state.router.location.pathname : '';
-    return { ...getDataExplorer(state.dataExplorer, id), working, paperKey: currentRoute };
+    const currentItemUuid = currentRoute === '/workflows' ? state.properties.workflowPanelDetailsUuid : state.detailsPanel.resourceUuid;
+    return { ...getDataExplorer(state.dataExplorer, id), working, paperKey: currentRoute, currentItemUuid };
 };
 
 const mapDispatchToProps = () => {