Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing...

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index de52d365030dfdc7a48a47bb2f6f52cd31fade51..9a31cbfde742314a65a687106cbb55dfe94888e0 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -3,7 +3,7 @@
 // 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';
@@ -35,7 +35,7 @@ export interface DataTableDataProps<T> {
     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: {
@@ -48,6 +48,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableBody: {
         background: theme.palette.background.paper
     },
+    loader: {
+        top: '50%',
+        left: '50%',
+        marginTop: '-15px',
+        marginLeft: '-15px',
+        position: 'absolute'
+    },
     noItemsInfo: {
         textAlign: "center",
         padding: theme.spacing.unit
@@ -90,7 +97,13 @@ export const DataTable = withStyles(styles)(
                             </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()}

diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index f6f938a55b2de32391c58c0beab4265e17f23bea..7d804a1c379f0a40670419c4804948b326134322 100644 (file)
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -18,11 +18,12 @@ interface Props {
     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 };

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index e08aea32217016ae6448f8cb55e87640e8d12860..892d2819a2f71c355f51aa424359dfd2bd7bb6aa 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -131,22 +131,37 @@ interface ProjectPanelDataProps {
     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 data-cy='project-panel' className={classes.root}>
                     <DataExplorer
+                        working={loading}
                         id={PROJECT_PANEL_ID}
                         onRowClick={this.handleRowClick}
                         onRowDoubleClick={this.handleRowDoubleClick}