[ARVADOS-WORKBENCH2] updated: 1.1.4-89-g430515a

[Git user]

Summary of changes:
 src/components/data-explorer/data-explorer.tsx | 27 ++++++++++++++------------
 src/components/data-table/data-column.ts       |  2 +-
 src/components/data-table/data-table.tsx       | 13 +++++++++++--
 src/views/workbench/workbench.tsx              |  1 +
 4 files changed, 28 insertions(+), 15 deletions(-)

       via  430515acafe8731fdbeea5f9caae58991683ad94 (commit)
      from  fbd2012fa56f6de44dfc4008d70e5a21cfcaf459 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 430515acafe8731fdbeea5f9caae58991683ad94
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Mon Jun 18 12:08:28 2018 +0200

    Update layout to match new latest mockups
    
    Feature #13601
    
    Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 2c2c56e..9aeb28a 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { DataTable, DataTableProps, DataColumn, ColumnSelector } from "../../components/data-table";
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
+import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText, Paper, Toolbar } from '@material-ui/core';
 import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import Popover from '../popover/popover';
@@ -55,16 +55,26 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
                 name: "Actions",
                 selected: true,
                 configurable: false,
-                renderHeader: () => this.renderActionsHeader(),
+                renderHeader: () => null,
                 render: renderItemActions
             }
         ]
     };
 
     render() {
-        return <DataTable
-            columns={this.state.columns}
-            items={this.props.items} />;
+        return <Paper>
+            <Toolbar>
+                <Grid container justify="flex-end">
+                    <ColumnSelector
+                        columns={this.state.columns}
+                        onColumnToggle={this.toggleColumn} />
+                </Grid>
+            </Toolbar>
+            <DataTable
+                columns={this.state.columns}
+                items={this.props.items} />
+            <Toolbar />
+        </Paper>;
     }
 
     toggleColumn = (column: DataColumn<DataItem>) => {
@@ -74,13 +84,6 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
         this.setState({ columns });
     }
 
-    renderActionsHeader = () =>
-        <Grid container justify="flex-end">
-            <ColumnSelector
-                columns={this.state.columns}
-                onColumnToggle={this.toggleColumn} />
-        </Grid>
-
     renderName = (item: DataItem) =>
         <Grid
             container
diff --git a/src/components/data-table/data-column.ts b/src/components/data-table/data-column.ts
index f991f62..d3b1473 100644
--- a/src/components/data-table/data-column.ts
+++ b/src/components/data-table/data-column.ts
@@ -8,7 +8,7 @@ export interface DataColumn<T> {
     configurable?: boolean;
     key?: React.Key;
     render: (item: T) => React.ReactElement<void>;
-    renderHeader?: () => React.ReactElement<void>;
+    renderHeader?: () => React.ReactElement<void> | null;
 }
 
 export const isColumnConfigurable = <T>(column: DataColumn<T>) => {
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 0367dfa..e7ce03a 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -46,12 +46,17 @@ class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRul
                                 </TableRow>
                             )}
                     </TableBody>
-                </Table> : <Typography>No items</Typography>}
+                </Table> : <Typography 
+                    className={classes.noItemsInfo}
+                    variant="body2"
+                    gutterBottom>
+                    No items
+                </Typography>}
         </div>;
     }
 }
 
-type CssRules = "tableBody" | "tableContainer";
+type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {
@@ -59,6 +64,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
     tableBody: {
         background: theme.palette.background.paper
+    },
+    noItemsInfo: {
+        textAlign: "center",
+        padding: theme.spacing.unit
     }
 });
 
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 20e3648..90df260 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -172,6 +172,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                     </Drawer>}
                 <main className={classes.content}>
                     <div className={classes.toolbar} />
+                    <div className={classes.toolbar} />
                     <Switch>
                         <Route path="/project/:name" component={DataExplorer} />
                     </Switch>

-----------------------------------------------------------------------


hooks/post-receive
--