Merge branch 'master' into 14093-data-explorer-table-cell-width

refs #14093

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 1535fde2b67a8097df409db233d89d3ec1ec7903..52ffd2e774fdc5aea5744150121074da7214d69b 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -126,8 +126,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 8dbdf0cc7ad0a1f1d13d2d773a760bda3e289f7a..a5f95506a816da0decfd4754705ea4cb8c0cddc6 100644 (file)
--- 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 db7b484a09660241e9170c9b83e31ee8899a6f69..0b3819ac8072698058185a8c67c82264921eda96 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -22,7 +22,7 @@ export interface DataTableDataProps<T> {
     defaultView?: React.ReactNode;
 }
 
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo";
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -39,6 +39,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         textAlign: "center",
         padding: theme.spacing.unit
     },
+    tableCell: {
+        wordWrap: 'break-word'
+    }
 });
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -73,7 +76,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
@@ -101,7 +104,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}
@@ -109,7 +112,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 72644f93af2e9cea7c5a93e965cff53793f8f026..b9cc63c30475edc89797a07de66963806deea154 100644 (file)
--- 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 9f35ecd6c27e26d5159656eafb369993bda33ad9..73849562dad12f34c4153188f0d9e6cd5ce8180c 100644 (file)
--- a/src/views/favorite-panel/favorite-panel.tsx
+++ b/src/views/favorite-panel/favorite-panel.tsx
@@ -65,16 +65,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,
@@ -97,24 +95,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,
@@ -122,8 +117,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 aa361bc9cb47431acaed8dfc8967e513d43abbca..63aedaddeb4e17a62cfd318a12cdea66114c87e2 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -68,8 +68,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",
@@ -77,7 +76,6 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
         configurable: true,
         filters: [],
         render: uuid => <ProcessStatus uuid={uuid} />,
-        width: "75px"
     },
     {
         name: ProjectPanelColumnNames.TYPE,
@@ -100,24 +98,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,
@@ -125,8 +120,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 a3664542eba60dde0742a58e7ed53b24e7dda5ff..23927aed2997870a53ba3faccd030359112b25b1 100644 (file)
--- a/src/views/trash-panel/trash-panel.tsx
+++ b/src/views/trash-panel/trash-panel.tsx
@@ -84,8 +84,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,
@@ -109,8 +108,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
                 type: ResourceKind.PROJECT
             }
         ],
-        render: uuid => <ResourceType uuid={uuid} />,
-        width: "125px"
+        render: uuid => <ResourceType uuid={uuid}/>,
     },
     {
         name: TrashPanelColumnNames.FILE_SIZE,
@@ -118,8 +116,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,
@@ -127,8 +124,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,
@@ -136,8 +132,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: '',
@@ -145,8 +140,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}/>
     }
 ];