[ARVADOS-WORKBENCH2] created: 1.1.4-140-g3eaf143
Git user
git at public.curoverse.com
Tue Jun 26 06:56:36 EDT 2018
at 3eaf143e04107bf25e15aaef4d1b4d5d7ef68f86 (commit)
commit 3eaf143e04107bf25e15aaef4d1b4d5d7ef68f86
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Tue Jun 26 12:56:00 2018 +0200
table-layout-fix
Feature #13679
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.test.tsx b/src/components/data-explorer/data-explorer.test.tsx
index 1ce5641..d2ca7f7 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 6a3103b..9aacadf 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 1ef7d98..bbfea7a 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 439e6c2..726972e 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 e86113e..bf0854b 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 4931c09..b54fd72 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"
}]
};
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list