From df0c0d462a52003cd722d25520cd7a4ad6583c57 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Daniel=20Kuty=C5=82a?= <daniel.kutyla@contractors.roche.com>
Date: Fri, 22 Oct 2021 14:33:34 +0200
Subject: [PATCH] 17585: Project change should trigger loader
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
---
 src/components/data-table/data-table.tsx      | 19 ++++++++++++++++---
 .../data-explorer/data-explorer.tsx           |  5 +++--
 src/views/project-panel/project-panel.tsx     | 17 ++++++++++++++++-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 0c84f642..79a94599 100644
--- 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: {
@@ -50,6 +50,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
@@ -92,7 +99,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 f6f938a5..7d804a1c 100644
--- 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 67264511..80663330 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -133,22 +133,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 className={classes.root}>
                     <DataExplorer
+                        working={loading}
                         id={PROJECT_PANEL_ID}
                         onRowClick={this.handleRowClick}
                         onRowDoubleClick={this.handleRowDoubleClick}
-- 
2.30.2