From a0a42fd73533f2f17844cd9343519c34043fda71 Mon Sep 17 00:00:00 2001
From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Wed, 5 Sep 2018 14:53:40 +0200
Subject: [PATCH] remove width attr from DataColumn, move styles to
 data-explorer

Feature #14093

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---
 src/components/data-explorer/data-explorer.tsx |  3 +--
 src/components/data-table/data-column.ts       |  1 -
 src/components/data-table/data-table.tsx       | 11 +++++++----
 .../data-explorer/renderers.tsx                |  6 +++---
 src/views/favorite-panel/favorite-panel.tsx    | 18 ++++++------------
 src/views/project-panel/project-panel.tsx      | 16 +++++-----------
 src/views/trash-panel/trash-panel.tsx          | 16 +++++-----------
 7 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index ea400b10..5faaabcb 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -150,8 +150,7 @@ export const DataExplorer = withStyles(styles)(
             sortDirection: SortDirection.NONE,
             filters: [],
             key: "context-actions",
-            render: this.renderContextMenuTrigger,
-            width: "auto"
+            render: this.renderContextMenuTrigger
         };
     }
 );
diff --git a/src/components/data-table/data-column.ts b/src/components/data-table/data-column.ts
index 8dbdf0cc..a5f95506 100644
--- a/src/components/data-table/data-column.ts
+++ b/src/components/data-table/data-column.ts
@@ -14,7 +14,6 @@ export interface DataColumn<T, F extends DataTableFilterItem = DataTableFilterIt
     filters: F[];
     render: (item: T) => React.ReactElement<any>;
     renderHeader?: () => React.ReactElement<any>;
-    width?: string;
 }
 
 export enum SortDirection {
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 5a6f9e5a..1d208d75 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -20,7 +20,7 @@ export interface DataTableDataProps<T> {
     extractKey?: (item: T) => React.Key;
 }
 
-type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
+type CssRules = "tableBody" | "tableContainer" | "noItemsInfo" | 'tableCell';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {
@@ -33,6 +33,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     noItemsInfo: {
         textAlign: "center",
         padding: theme.spacing.unit
+    },
+    tableCell: {
+        wordWrap: 'break-word'
     }
 });
 
@@ -60,7 +63,7 @@ export const DataTable = withStyles(styles)(
         renderHeadCell = (column: DataColumn<T>, index: number) => {
             const { name, key, renderHeader, filters, sortDirection } = column;
             const { onSortToggle, onFiltersChange } = this.props;
-            return <TableCell key={key || index} style={{ width: column.width, minWidth: column.width }}>
+            return <TableCell key={key || index}>
                 {renderHeader ?
                     renderHeader() :
                     filters.length > 0
@@ -88,7 +91,7 @@ export const DataTable = withStyles(styles)(
         }
 
         renderBodyRow = (item: T, index: number) => {
-            const { onRowClick, onRowDoubleClick, extractKey } = this.props;
+            const { onRowClick, onRowDoubleClick, extractKey, classes } = this.props;
             return <TableRow
                 hover
                 key={extractKey ? extractKey(item) : index}
@@ -96,7 +99,7 @@ export const DataTable = withStyles(styles)(
                 onContextMenu={this.handleRowContextMenu(item)}
                 onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item) }>
                 {this.mapVisibleColumns((column, index) => (
-                    <TableCell key={column.key || index}>
+                    <TableCell key={column.key || index} className={classes.tableCell}>
                         {column.render(item)}
                     </TableCell>
                 ))}
diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index 72644f93..b9cc63c3 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -23,7 +23,7 @@ export const renderName = (item: { name: string; uuid: string, kind: string }) =
             {renderIcon(item)}
         </Grid>
         <Grid item>
-            <Typography color="primary">
+            <Typography color="primary" style={{ width: '450px' }}>
                 {item.name}
             </Typography>
         </Grid>
@@ -54,7 +54,7 @@ export const renderIcon = (item: { kind: string }) => {
 };
 
 export const renderDate = (date?: string) => {
-    return <Typography noWrap>{formatDate(date)}</Typography>;
+    return <Typography noWrap style={{ minWidth: '100px' }}>{formatDate(date)}</Typography>;
 };
 
 export const ResourceLastModifiedDate = connect(
@@ -76,7 +76,7 @@ export const ResourceDeleteDate = connect(
     })((props: { date: string }) => renderDate(props.date));
 
 export const renderFileSize = (fileSize?: number) =>
-    <Typography noWrap>
+    <Typography noWrap style={{ minWidth: '45px' }}>
         {formatFileSize(fileSize)}
     </Typography>;
 
diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx
index 803d8002..81154618 100644
--- a/src/views/favorite-panel/favorite-panel.tsx
+++ b/src/views/favorite-panel/favorite-panel.tsx
@@ -61,16 +61,14 @@ export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.ASC,
         filters: [],
-        render: uuid => <ResourceName uuid={uuid} />,
-        width: "450px"
+        render: uuid => <ResourceName uuid={uuid} />
     },
     {
         name: "Status",
         selected: true,
         configurable: true,
         filters: [],
-        render: uuid => <ProcessStatus uuid={uuid} />,
-        width: "75px"
+        render: uuid => <ProcessStatus uuid={uuid} />
     },
     {
         name: FavoritePanelColumnNames.TYPE,
@@ -93,24 +91,21 @@ export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
                 type: ResourceKind.PROJECT
             }
         ],
-        render: uuid => <ResourceType uuid={uuid} />,
-        width: "125px"
+        render: uuid => <ResourceType uuid={uuid} />
     },
     {
         name: FavoritePanelColumnNames.OWNER,
         selected: true,
         configurable: true,
         filters: [],
-        render: uuid => <ResourceOwner uuid={uuid} />,
-        width: "200px"
+        render: uuid => <ResourceOwner uuid={uuid} />
     },
     {
         name: FavoritePanelColumnNames.FILE_SIZE,
         selected: true,
         configurable: true,
         filters: [],
-        render: uuid => <ResourceFileSize uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceFileSize uuid={uuid} />
     },
     {
         name: FavoritePanelColumnNames.LAST_MODIFIED,
@@ -118,8 +113,7 @@ export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceLastModifiedDate uuid={uuid} />,
-        width: "150px"
+        render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     }
 ];
 
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 2573f818..787dc670 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -65,8 +65,7 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.ASC,
         filters: [],
-        render: uuid => <ResourceName uuid={uuid} />,
-        width: "450px"
+        render: uuid => <ResourceName uuid={uuid} />
     },
     {
         name: "Status",
@@ -74,7 +73,6 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
         configurable: true,
         filters: [],
         render: uuid => <ProcessStatus uuid={uuid} />,
-        width: "75px"
     },
     {
         name: ProjectPanelColumnNames.TYPE,
@@ -97,24 +95,21 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
                 type: ResourceKind.PROJECT
             }
         ],
-        render: uuid => <ResourceType uuid={uuid} />,
-        width: "125px"
+        render: uuid => <ResourceType uuid={uuid} />
     },
     {
         name: ProjectPanelColumnNames.OWNER,
         selected: true,
         configurable: true,
         filters: [],
-        render: uuid => <ResourceOwner uuid={uuid} />,
-        width: "200px"
+        render: uuid => <ResourceOwner uuid={uuid} />
     },
     {
         name: ProjectPanelColumnNames.FILE_SIZE,
         selected: true,
         configurable: true,
         filters: [],
-        render: uuid => <ResourceFileSize uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceFileSize uuid={uuid} />
     },
     {
         name: ProjectPanelColumnNames.LAST_MODIFIED,
@@ -122,8 +117,7 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceLastModifiedDate uuid={uuid} />,
-        width: "150px"
+        render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     }
 ];
 
diff --git a/src/views/trash-panel/trash-panel.tsx b/src/views/trash-panel/trash-panel.tsx
index 08df05c2..7237ffc3 100644
--- a/src/views/trash-panel/trash-panel.tsx
+++ b/src/views/trash-panel/trash-panel.tsx
@@ -82,8 +82,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.ASC,
         filters: [],
-        render: uuid => <ResourceName uuid={uuid}/>,
-        width: "450px"
+        render: uuid => <ResourceName uuid={uuid}/>
     },
     {
         name: TrashPanelColumnNames.TYPE,
@@ -108,7 +107,6 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
             }
         ],
         render: uuid => <ResourceType uuid={uuid}/>,
-        width: "125px"
     },
     {
         name: TrashPanelColumnNames.FILE_SIZE,
@@ -116,8 +114,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceFileSize uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceFileSize uuid={uuid} />
     },
     {
         name: TrashPanelColumnNames.TRASHED_DATE,
@@ -125,8 +122,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceTrashDate uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceTrashDate uuid={uuid} />
     },
     {
         name: TrashPanelColumnNames.TO_BE_DELETED,
@@ -134,8 +130,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceDeleteDate uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceDeleteDate uuid={uuid} />
     },
     {
         name: '',
@@ -143,8 +138,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: false,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceRestore uuid={uuid}/>,
-        width: "50px"
+        render: uuid => <ResourceRestore uuid={uuid}/>
     }
 ];
 
-- 
2.30.2