Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
onFileClick: (id: string) => void;
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';
}
type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
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 { 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';
import { SearchInput } from '~/components/search-input/search-input';
import { ArvadosTheme } from "~/common/custom-theme";
import { createTree } from '~/models/tree';
actions?: React.ReactNode;
hideSearchInput?: boolean;
paperKey?: string;
actions?: React.ReactNode;
hideSearchInput?: boolean;
paperKey?: string;
+ currentItemUuid: string;
}
interface DataExplorerActionProps<T> {
}
interface DataExplorerActionProps<T> {
rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
+ paperKey, fetchMode, currentItemUuid
} = this.props;
return <Paper className={classes.root} {...paperProps} key={paperKey}>
{(!hideColumnSelector || !hideSearchInput) && <Toolbar className={classes.toolbar}>
} = this.props;
return <Paper className={classes.root} {...paperProps} key={paperKey}>
{(!hideColumnSelector || !hideSearchInput) && <Toolbar className={classes.toolbar}>
onSortToggle={onSortToggle}
extractKey={extractKey}
working={working}
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
<Toolbar className={classes.footer}>
<Grid container justify="flex-end">
{fetchMode === DataTableFetchMode.PAGINATED ? <TablePagination
extractKey?: (item: T) => React.Key;
working?: boolean;
defaultView?: React.ReactNode;
extractKey?: (item: T) => React.Key;
working?: boolean;
defaultView?: React.ReactNode;
+ currentItemUuid?: string;
+ currentRoute?: string;
}
type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell';
}
type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | '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)}
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)}
{this.mapVisibleColumns((column, index) => (
<TableCell key={column.key || index} className={classes.tableCell}>
{column.render(item)}
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
onFileClick: (id: string) => void;
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> {
}
export class FileTree extends React.Component<FileTreeProps> {
onContextMenu={this.handleContextMenu}
toggleItemActive={this.handleToggleActive}
toggleItemOpen={this.handleToggle}
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>) => {
}
handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {
export interface TreeProps<T> {
disableRipple?: boolean;
export interface TreeProps<T> {
disableRipple?: boolean;
+ currentItemUuid?: string;
items?: Array<TreeItem<T>>;
level?: number;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
items?: Array<TreeItem<T>>;
level?: number;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const level = this.props.level ? this.props.level : 0;
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
const { list, listItem, loader, toggableIconContainer, renderContainer } = classes;
const isCheckboxVisible = typeof this.props.showSelection === 'function'
? this.props.showSelection
return <List className={list}>
{items && items.map((it: TreeItem<T>, idx: number) =>
<div key={`item/${level}/${idx}`}>
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)}
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}
onContextMenu={this.handleRowContextMenu(it)}>
{it.status === TreeItemStatus.PENDING ?
<CircularProgress size={10} className={loader} /> : null}
{this.getProperArrowAnimation(it.status, it.items!)}
</ListItemIcon>
</i>
{this.getProperArrowAnimation(it.status, it.items!)}
</ListItemIcon>
</i>
- { isCheckboxVisible(it) &&
+ {isCheckboxVisible(it) &&
<Checkbox
checked={it.selected}
className={classes.checkbox}
<Checkbox
checked={it.selected}
className={classes.checkbox}
let prevState: CollectionPanelFilesState;
let prevTree: Array<TreeItem<FileTreeData>>;
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 {
if (prevState !== state.collectionPanelFiles) {
prevState = state.collectionPanelFiles;
prevTree = getNodeChildrenIds('')(state.collectionPanelFiles)
.map(collectionItemToTreeItem(state.collectionPanelFiles));
}
return {
+ items: prevTree,
+ currentItemUuid: state.detailsPanel.resourceUuid
const progress = state.progressIndicator.find(p => p.id === id);
const working = progress && progress.working;
const currentRoute = state.router.location ? state.router.location.pathname : '';
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 = () => {
};
const mapDispatchToProps = () => {