Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
+import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton, CircularProgress } from '@material-ui/core';
import classnames from 'classnames';
import { DataColumn, SortDirection } from './data-column';
import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
currentRoute?: string;
}
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows';
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
tableBody: {
background: theme.palette.background.paper
},
+ loader: {
+ top: '50%',
+ left: '50%',
+ marginTop: '-15px',
+ marginLeft: '-15px',
+ position: 'absolute'
+ },
noItemsInfo: {
textAlign: "center",
padding: theme.spacing.unit
</TableRow>
</TableHead>
<TableBody className={classes.tableBody}>
- {items.map(this.renderBodyRow)}
+ {
+ this.props.working ?
+ <div>
+ <CircularProgress className={classes.loader} size={30} />
+ </div> :
+ items.map(this.renderBodyRow)
+ }
</TableBody>
</Table>
{items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}
onContextMenu?: (event: React.MouseEvent<HTMLElement>, item: any, isAdmin?: boolean) => void;
onRowDoubleClick: (item: any) => void;
extractKey?: (item: any) => React.Key;
+ working?: boolean;
}
-const mapStateToProps = (state: RootState, { id }: Props) => {
+const mapStateToProps = (state: RootState, { id, working: parentWorking }: Props) => {
const progress = state.progressIndicator.find(p => p.id === id);
- const working = progress && progress.working;
+ const working = (progress && progress.working) || parentWorking;
const currentRoute = state.router.location ? state.router.location.pathname : '';
const currentItemUuid = currentRoute === '/workflows' ? state.properties.workflowPanelDetailsUuid : state.detailsPanel.resourceUuid;
return { ...getDataExplorer(state.dataExplorer, id), working, paperKey: currentRoute, currentItemUuid };
resources: ResourcesState;
isAdmin: boolean;
userUuid: string;
+ dataExplorerItems: any;
}
type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
& WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
+let data: any[] = [];
+let href: string = '';
+
export const ProjectPanel = withStyles(styles)(
connect((state: RootState) => ({
currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
resources: state.resources,
userUuid: state.auth.user!.uuid,
+ dataExplorerItems: state.dataExplorer?.projectPanel.items,
}))(
class extends React.Component<ProjectPanelProps> {
render() {
- const { classes } = this.props;
+ const { classes, dataExplorerItems } = this.props;
+ let loading = false;
+
+ if (dataExplorerItems.length > 0 && data === dataExplorerItems && href !== window.location.href) {
+ loading = true
+ } else {
+ href = window.location.href;
+ data = dataExplorerItems;
+ }
+
return <div className={classes.root}>
<DataExplorer
+ working={loading}
id={PROJECT_PANEL_ID}
onRowClick={this.handleRowClick}
onRowDoubleClick={this.handleRowDoubleClick}