18207: Added common icon and removed code duplication

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 de694e08b5a6653e74dba8d7655f29114f8abe41..3646fc8fa2a1aef00e6903c28ee8088651e9bcf2 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -10,6 +10,7 @@ import { DataTableDefaultView } from '../data-table-default-view/data-table-defa
 import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
 import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
 import { countNodes } from 'models/tree';
+import { ProjectIcon } from 'components/icon/icon';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
@@ -49,10 +50,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         background: theme.palette.background.paper
     },
     loader: {
-        top: '50%',
         left: '50%',
-        marginTop: '-15px',
-        marginLeft: '-15px',
+        marginLeft: '-84px',
         position: 'absolute'
     },
     noItemsInfo: {
@@ -98,9 +97,12 @@ export const DataTable = withStyles(styles)(
                         </TableHead>
                         <TableBody className={classes.tableBody}>
                             {
-                                this.props.working ? 
-                                    null :
-                                    items.map(this.renderBodyRow)
+                                this.props.working ?
+                                <div className={classes.loader}>
+                                    <DataTableDefaultView
+                                        icon={ProjectIcon}
+                                        messages={['Loading data, please wait.']} />
+                                </div> : items.map(this.renderBodyRow)
                             }
                         </TableBody>
                     </Table>

diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 7d804a1c379f0a40670419c4804948b326134322..900ab94e0cd00ee02e5566934ea95097feafaa73 100644 (file)
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -21,12 +21,27 @@ interface Props {
     working?: boolean;
 }
 
-const mapStateToProps = (state: RootState, { id, working: parentWorking }: Props) => {
+let data: any[] = [];
+let href: string = '';
+
+const mapStateToProps = (state: RootState, { id }: Props) => {
     const progress = state.progressIndicator.find(p => p.id === id);
-    const working = (progress && progress.working) || parentWorking;
+    const dataExplorerState = getDataExplorer(state.dataExplorer, id);
     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 };
+
+    let loading = false;
+
+    if (dataExplorerState.items.length > 0 && data === dataExplorerState.items && href !== window.location.href) {
+        loading = true
+    } else {
+        href = window.location.href;
+        data = dataExplorerState.items;
+    }
+
+    const working = (progress && progress.working) || loading;
+
+    return { ...dataExplorerState, working, paperKey: currentRoute, currentItemUuid };
 };
 
 const mapDispatchToProps = () => {

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 892d2819a2f71c355f51aa424359dfd2bd7bb6aa..178a96aaff674b5ba8ac90d7dab69309744a1f77 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -137,31 +137,19 @@ interface ProjectPanelDataProps {
 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,
+        userUuid: state.auth.user!.uuid
     }))(
         class extends React.Component<ProjectPanelProps> {
             render() {
-                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;
-                }
+                const { classes } = this.props;
 
                 return <div data-cy='project-panel' className={classes.root}>
                     <DataExplorer
-                        working={loading}
                         id={PROJECT_PANEL_ID}
                         onRowClick={this.handleRowClick}
                         onRowDoubleClick={this.handleRowDoubleClick}