From: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
Date: Fri, 17 Dec 2021 23:09:37 +0000 (+0100)
Subject: Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing... 
X-Git-Tag: 2.4.0~17^2~4
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/394ebdfd13fe40a7096f484c46a353d2537f4c9a?hp=58db72fee358d5987139a1b8526c0ca873e07dbf

Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing-the-project-content-when-switching

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 de52d365..9a31cbfd 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: {
@@ -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/context-menu/action-sets/collection-files-action-set.ts b/src/views-components/context-menu/action-sets/collection-files-action-set.ts
index 59a5f368..7e08eef0 100644
--- a/src/views-components/context-menu/action-sets/collection-files-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-files-action-set.ts
@@ -4,7 +4,7 @@
 
 import { ContextMenuActionSet } from "views-components/context-menu/context-menu-action-set";
 import { collectionPanelFilesAction, openMultipleFilesRemoveDialog } from "store/collection-panel/collection-panel-files/collection-panel-files-actions";
-import { openCollectionPartialCopyDialog, openCollectionPartialCopyToSelectedCollectionDialog } from 'store/collections/collection-partial-copy-actions';
+import { openCollectionPartialCopyDialog } from 'store/collections/collection-partial-copy-actions';
 
 // These action sets are used on the multi-select actions button.
 export const readOnlyCollectionFilesActionSet: ContextMenuActionSet = [[
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 4a3f60a6..ab11593d 100644
--- 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}