From 3eaf143e04107bf25e15aaef4d1b4d5d7ef68f86 Mon Sep 17 00:00:00 2001
From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Tue, 26 Jun 2018 12:56:00 +0200
Subject: [PATCH] table-layout-fix

Feature #13679

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
---
 .../data-explorer/data-explorer.test.tsx      |  1 -
 .../data-explorer/data-explorer.tsx           | 29 +++++++++--------
 src/components/data-table/data-column.ts      |  1 +
 src/components/data-table/data-table.test.tsx | 18 -----------
 src/components/data-table/data-table.tsx      | 31 ++++++++-----------
 .../project-explorer/project-explorer.tsx     | 18 +++++++----
 6 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/src/components/data-explorer/data-explorer.test.tsx b/src/components/data-explorer/data-explorer.test.tsx
index 1ce56414..d2ca7f7b 100644
--- a/src/components/data-explorer/data-explorer.test.tsx
+++ b/src/components/data-explorer/data-explorer.test.tsx
@@ -88,7 +88,6 @@ describe("<DataExplorer />", () => {
             items={[]}
         />);
         expect(dataExplorer.find(SearchInput)).toHaveLength(0);
-        expect(dataExplorer.find(ColumnSelector)).toHaveLength(0);
         expect(dataExplorer.find(TablePagination)).toHaveLength(0);
     });
 
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 6a3103b1..9aacadf3 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -3,13 +3,13 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles, TablePagination, Table, IconButton } from '@material-ui/core';
+import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles, TablePagination, IconButton } from '@material-ui/core';
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import ContextMenu, { ContextMenuActionGroup, ContextMenuAction } from "../../components/context-menu/context-menu";
 import ColumnSelector from "../../components/column-selector/column-selector";
 import DataTable from "../../components/data-table/data-table";
 import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
-import { DataColumn, toggleSortDirection } from "../../components/data-table/data-column";
+import { DataColumn } from "../../components/data-table/data-column";
 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
 import SearchInput from '../search-input/search-input';
 
@@ -50,18 +50,16 @@ class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<
                 onActionClick={this.callAction}
                 onClose={this.closeContextMenu} />
             <Toolbar className={this.props.classes.toolbar}>
-                {this.props.items.length > 0 &&
-                    <Grid container justify="space-between" wrap="nowrap" alignItems="center">
-                        <div className={this.props.classes.searchBox}>
-                            <SearchInput
-                                value={this.props.searchValue}
-                                onSearch={this.props.onSearch} />
-                        </div>
-                        <ColumnSelector
-                            columns={this.props.columns}
-                            onColumnToggle={this.props.onColumnToggle} />
-                    </Grid>}
-
+                <Grid container justify="space-between" wrap="nowrap" alignItems="center">
+                    <div className={this.props.classes.searchBox}>
+                        {this.props.items.length > 0 && <SearchInput
+                            value={this.props.searchValue}
+                            onSearch={this.props.onSearch} />}
+                    </div>
+                    <ColumnSelector
+                        columns={this.props.columns}
+                        onColumnToggle={this.props.onColumnToggle} />
+                </Grid>
             </Toolbar>
             <DataTable
                 columns={[
@@ -130,7 +128,8 @@ class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<
         selected: true,
         key: "context-actions",
         renderHeader: () => null,
-        render: this.renderContextMenuTrigger
+        render: this.renderContextMenuTrigger,
+        width: "auto"
     };
 
 }
diff --git a/src/components/data-table/data-column.ts b/src/components/data-table/data-column.ts
index 1ef7d98f..bbfea7ac 100644
--- a/src/components/data-table/data-column.ts
+++ b/src/components/data-table/data-column.ts
@@ -13,6 +13,7 @@ export interface DataColumn<T> {
     filters?: DataTableFilterItem[];
     render: (item: T) => React.ReactElement<void>;
     renderHeader?: () => React.ReactElement<void> | null;
+    width?: string;
 }
 
 export type SortDirection = "asc" | "desc" | "none";
diff --git a/src/components/data-table/data-table.test.tsx b/src/components/data-table/data-table.test.tsx
index 439e6c27..726972e0 100644
--- a/src/components/data-table/data-table.test.tsx
+++ b/src/components/data-table/data-table.test.tsx
@@ -98,24 +98,6 @@ describe("<DataTable />", () => {
         expect(dataTable.find(TableBody).find(TableCell).key()).toBe("column-1-key");
     });
 
-    it("shows information that items array is empty", () => {
-        const columns: Array<DataColumn<string>> = [
-            {
-                name: "Column 1",
-                render: () => <span />,
-                selected: true
-            }
-        ];
-        const dataTable = mount(<DataTable
-            columns={columns}
-            items={[]}
-            onFiltersChange={jest.fn()}
-            onRowClick={jest.fn()}
-            onRowContextMenu={jest.fn()}
-            onSortToggle={jest.fn()} />);
-        expect(dataTable.find(Typography).text()).toBe("No items");
-    });
-
     it("renders items", () => {
         const columns: Array<DataColumn<string>> = [
             {
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e86113ef..bf0854b9 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -22,29 +22,23 @@ class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRul
     render() {
         const { items, classes } = this.props;
         return <div className={classes.tableContainer}>
-            {items.length > 0 ?
-                <Table>
-                    <TableHead>
-                        <TableRow>
-                            {this.mapVisibleColumns(this.renderHeadCell)}
-                        </TableRow>
-                    </TableHead>
-                    <TableBody className={classes.tableBody}>
-                        {items.map(this.renderBodyRow)}
-                    </TableBody>
-                </Table> : <Typography
-                    className={classes.noItemsInfo}
-                    variant="body2"
-                    gutterBottom>
-                    No items
-                </Typography>}
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        {this.mapVisibleColumns(this.renderHeadCell)}
+                    </TableRow>
+                </TableHead>
+                <TableBody className={classes.tableBody}>
+                    {items.map(this.renderBodyRow)}
+                </TableBody>
+            </Table>
         </div>;
     }
 
     renderHeadCell = (column: DataColumn<T>, index: number) => {
         const { name, key, renderHeader, filters, sortDirection } = column;
         const { onSortToggle, onFiltersChange } = this.props;
-        return <TableCell key={key || index}>
+        return <TableCell key={key || index} style={{minWidth: column.width}}>
             {renderHeader ?
                 renderHeader() :
                 filters
@@ -96,7 +90,8 @@ type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {
-        overflowX: 'auto'
+        overflowX: 'auto',
+        overflowY: 'hidden'
     },
     tableBody: {
         background: theme.palette.background.paper
diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
index 4931c09a..b54fd72b 100644
--- a/src/views-components/project-explorer/project-explorer.tsx
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -41,7 +41,8 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
             name: "Name",
             selected: true,
             sortDirection: "asc",
-            render: renderName
+            render: renderName,
+            width: "450px"
         }, {
             name: "Status",
             selected: true,
@@ -52,7 +53,8 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
                 name: "Complete",
                 selected: true
             }],
-            render: renderStatus
+            render: renderStatus,
+            width: "75px"
         }, {
             name: "Type",
             selected: true,
@@ -63,20 +65,24 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
                 name: "Group",
                 selected: true
             }],
-            render: item => renderType(item.type)
+            render: item => renderType(item.type),
+            width: "125px"
         }, {
             name: "Owner",
             selected: true,
-            render: item => renderOwner(item.owner)
+            render: item => renderOwner(item.owner),
+            width: "200px"
         }, {
             name: "File size",
             selected: true,
             sortDirection: "none",
-            render: item => renderFileSize(item.fileSize)
+            render: item => renderFileSize(item.fileSize),
+            width: "50px"
         }, {
             name: "Last modified",
             selected: true,
-            render: item => renderDate(item.lastModified)
+            render: item => renderDate(item.lastModified),
+            width: "150px"
         }]
     };
 
-- 
2.30.2