X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/486b1bf637827063cdedef283907da2dcc63ad22..2ffe3ac11c9bad93b8b226167aef687a274028fd:/src/components/data-explorer/data-explorer.tsx diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx index d3d26708..b3a93bbb 100644 --- a/src/components/data-explorer/data-explorer.tsx +++ b/src/components/data-explorer/data-explorer.tsx @@ -2,52 +2,71 @@ // // SPDX-License-Identifier: AGPL-3.0 -import React from 'react'; -import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from '@material-ui/core'; +import 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 } from "components/data-table/data-column"; -import { SearchInput } from 'components/search-input/search-input'; +import { SearchInput } from "components/search-input/search-input"; import { ArvadosTheme } from "common/custom-theme"; -import { createTree } from 'models/tree'; -import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree'; -import { CloseIcon, MaximizeIcon, MoreOptionsIcon } from 'components/icon/icon'; -import { PaperProps } from '@material-ui/core/Paper'; -import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view'; +import { MultiselectToolbar } from "components/multiselect-toolbar/MultiselectToolbar"; +import { TCheckedList } from "components/data-table/data-table"; +import { createTree } from "models/tree"; +import { DataTableFilters } from "components/data-table-filters/data-table-filters-tree"; +import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreVerticalIcon } from "components/icon/icon"; +import { PaperProps } from "@material-ui/core/Paper"; +import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view"; -type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title' | 'dataTable' | 'container'; +type CssRules = "titleWrapper" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container"; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + titleWrapper: { + display: "flex", + justifyContent: "space-between", + }, searchBox: { - paddingBottom: theme.spacing.unit * 2 + paddingBottom: 0, }, toolbar: { - paddingTop: theme.spacing.unit, - paddingRight: theme.spacing.unit * 2, - }, - toolbarUnderTitle: { - paddingTop: 0 + paddingTop: 0, + paddingRight: theme.spacing.unit, + paddingLeft: "10px", }, footer: { - overflow: 'auto' + overflow: "auto", }, root: { - height: '100%', + height: "100%", }, moreOptionsButton: { - padding: 0 + padding: 0, }, title: { - paddingLeft: theme.spacing.unit * 3, - paddingTop: theme.spacing.unit * 3, - fontSize: '18px' + display: "inline-block", + paddingLeft: theme.spacing.unit * 2, + paddingTop: theme.spacing.unit * 2, + fontSize: "18px", + paddingRight: "10px", + }, + subProcessTitle: { + display: "inline-block", + paddingLeft: theme.spacing.unit * 2, + paddingTop: theme.spacing.unit * 2, + fontSize: "18px", + flexGrow: 0, + paddingRight: "10px", }, dataTable: { - height: '100%', - overflow: 'auto', + height: "100%", + overflow: "auto", }, container: { - height: '100%', + height: "100%", + }, + headerMenu: { + marginLeft: "auto", + flexBasis: "initial", + flexGrow: 0, }, }); @@ -55,146 +74,337 @@ interface DataExplorerDataProps { fetchMode: DataTableFetchMode; items: T[]; itemsAvailable: number; - columns: DataColumns; + columns: DataColumns; searchLabel?: string; searchValue: string; rowsPerPage: number; rowsPerPageOptions: number[]; page: number; contextMenuColumn: boolean; - dataTableDefaultView?: React.ReactNode; + defaultViewIcon?: IconType; + defaultViewMessages?: string[]; working?: boolean; + currentRefresh?: string; + currentRoute?: string; hideColumnSelector?: boolean; paperProps?: PaperProps; actions?: React.ReactNode; hideSearchInput?: boolean; title?: React.ReactNode; + progressBar?: React.ReactNode; paperKey?: string; currentItemUuid: string; + elementPath?: string; + isMSToolbarVisible: boolean; + checkedList: TCheckedList; } interface DataExplorerActionProps { - onSetColumns: (columns: DataColumns) => void; + onSetColumns: (columns: DataColumns) => void; onSearch: (value: string) => void; onRowClick: (item: T) => void; onRowDoubleClick: (item: T) => void; - onColumnToggle: (column: DataColumn) => void; + onColumnToggle: (column: DataColumn) => void; onContextMenu: (event: React.MouseEvent, item: T) => void; - onSortToggle: (column: DataColumn) => void; - onFiltersChange: (filters: DataTableFilters, column: DataColumn) => void; + onSortToggle: (column: DataColumn) => void; + onFiltersChange: (filters: DataTableFilters, column: DataColumn) => void; onChangePage: (page: number) => void; onChangeRowsPerPage: (rowsPerPage: number) => void; onLoadMore: (page: number) => void; extractKey?: (item: T) => React.Key; + toggleMSToolbar: (isVisible: boolean) => void; + setCheckedListOnStore: (checkedList: TCheckedList) => void; } -type DataExplorerProps = DataExplorerDataProps & - DataExplorerActionProps & WithStyles & MPVPanelProps; +type DataExplorerProps = DataExplorerDataProps & DataExplorerActionProps & WithStyles & MPVPanelProps; export const DataExplorer = withStyles(styles)( class DataExplorerGeneric extends React.Component> { + state = { + showLoading: false, + prevRefresh: "", + prevRoute: "", + }; + + multiSelectToolbarInTitle = !this.props.title && !this.props.progressBar; + + componentDidUpdate(prevProps: DataExplorerProps) { + const currentRefresh = this.props.currentRefresh || ""; + const currentRoute = this.props.currentRoute || ""; + + if (currentRoute !== this.state.prevRoute) { + // Component already mounted, but the user comes from a route change, + // like browsing through a project hierarchy. + this.setState({ + showLoading: this.props.working, + prevRoute: currentRoute, + }); + } + + if (currentRefresh !== this.state.prevRefresh) { + // Component already mounted, but the user just clicked the + // refresh button. + this.setState({ + showLoading: this.props.working, + prevRefresh: currentRefresh, + }); + } + if (this.state.showLoading && !this.props.working) { + this.setState({ + showLoading: false, + }); + } + } + componentDidMount() { if (this.props.onSetColumns) { this.props.onSetColumns(this.props.columns); } + // Component just mounted, so we need to show the loading indicator. + this.setState({ + showLoading: this.props.working, + prevRefresh: this.props.currentRefresh || "", + prevRoute: this.props.currentRoute || "", + }); } + render() { const { - columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey, - rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch, - items, itemsAvailable, onRowClick, onRowDoubleClick, classes, - dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput, - paperKey, fetchMode, currentItemUuid, title, - doHidePanel, doMaximizePanel, panelName, panelMaximized + columns, + onContextMenu, + onFiltersChange, + onSortToggle, + extractKey, + rowsPerPage, + rowsPerPageOptions, + onColumnToggle, + searchLabel, + searchValue, + onSearch, + items, + itemsAvailable, + onRowClick, + onRowDoubleClick, + classes, + defaultViewIcon, + defaultViewMessages, + hideColumnSelector, + actions, + paperProps, + hideSearchInput, + paperKey, + fetchMode, + currentItemUuid, + currentRoute, + title, + progressBar, + doHidePanel, + doMaximizePanel, + doUnMaximizePanel, + panelName, + panelMaximized, + elementPath, + toggleMSToolbar, + setCheckedListOnStore, + checkedList, } = this.props; - return - - {title && {title}} - {(!hideColumnSelector || !hideSearchInput) && - -
- {!hideSearchInput && } + return ( + + +
+ {title && ( + + {title} + + )} + {!!progressBar && progressBar} + {this.multiSelectToolbarInTitle && } + {(!hideColumnSelector || !hideSearchInput || !!actions) && ( + + + + {!hideSearchInput && ( +
+ {!hideSearchInput && ( + + )} +
+ )} + {actions} + {!hideColumnSelector && ( + + )} + + {doUnMaximizePanel && panelMaximized && ( + + + + + + )} + {doMaximizePanel && !panelMaximized && ( + + + + + + )} + {doHidePanel && ( + + + + + + )} + + + )}
- {actions} - {!hideColumnSelector && } - - { doMaximizePanel && !panelMaximized && - - - } - { doHidePanel && - - - } - } - onRowClick(item)} - onContextMenu={onContextMenu} - onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)} - onFiltersChange={onFiltersChange} - onSortToggle={onSortToggle} - extractKey={extractKey} - working={working} - defaultView={dataTableDefaultView} - currentItemUuid={currentItemUuid} - currentRoute={paperKey} /> - - - {fetchMode === DataTableFetchMode.PAGINATED ? 0) ? {} : {disabled: true}} - component="div" /> : } + {!this.multiSelectToolbarInTitle && } + + onRowClick(item)} + onContextMenu={onContextMenu} + onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)} + onFiltersChange={onFiltersChange} + onSortToggle={onSortToggle} + extractKey={extractKey} + working={this.state.showLoading} + defaultViewIcon={defaultViewIcon} + defaultViewMessages={defaultViewMessages} + currentItemUuid={currentItemUuid} + currentRoute={paperKey} + toggleMSToolbar={toggleMSToolbar} + setCheckedListOnStore={setCheckedListOnStore} + checkedList={checkedList} + /> + + + + {elementPath && ( + + {elementPath} + + )} + + {fetchMode === DataTableFetchMode.PAGINATED ? ( + 0 ? {} : { disabled: true }} + component="div" + /> + ) : ( + + )} + + + - - - ; + + ); } changePage = (event: React.MouseEvent, page: number) => { this.props.onChangePage(page); - } + }; - changeRowsPerPage: React.ChangeEventHandler = (event) => { + changeRowsPerPage: React.ChangeEventHandler = event => { this.props.onChangeRowsPerPage(parseInt(event.target.value, 10)); - } + }; loadMore = () => { this.props.onLoadMore(this.props.page + 1); - } + }; - renderContextMenuTrigger = (item: T) => - - - this.props.onContextMenu(event, item)}> - + renderContextMenuTrigger = (item: T) => ( + + + this.props.onContextMenu(event, item)} + > + + ); - contextMenuColumn: DataColumn = { + contextMenuColumn: DataColumn = { name: "Actions", selected: true, configurable: false, filters: createTree(), key: "context-actions", - render: this.renderContextMenuTrigger + render: this.renderContextMenuTrigger, }; } );