From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Tue, 12 Feb 2019 12:13:44 +0000 (+0100)
Subject: refs #14785-selection-of-table-content
X-Git-Tag: 1.4.0~50
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/70222e9fc05c3ad515ac290e5cbd6302b4f2efc8

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 028dfb0c..0a443907 100644
--- 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 878f47ff..2e3e1a34 100644
--- 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 8298861b..a0d047ce 100644
--- 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 4f581a6c..ad7ac73e 100644
--- 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 5b070b70..826884aa 100644
--- 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 7836e1f7..e5983b6b 100644
--- 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 8c95355f..ed4bffd6 100644
--- 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 = () => {