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>

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index ea400b100edfac2b8d06a8ea7e9fb45b4fef3e61..5faaabcb79d958426e5156893a0de76f6f3e7059 100644 (file)
--- 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",
             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>;
     filters: F[];
     render: (item: T) => React.ReactElement<any>;
     renderHeader?: () => React.ReactElement<any>;

-    width?: string;

 }
 
 export enum SortDirection {
 }
 
 export enum SortDirection {

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 5a6f9e5a5b5337abce7b07d738206cbd84d56c78..1d208d7590536f93412fbb564fcb27cd62e939d9 100644 (file)
--- 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;
 }
 
     extractKey?: (item: T) => React.Key;
 }
 

-type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
+type CssRules = "tableBody" | "tableContainer" | "noItemsInfo" | 'tableCell';

 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {


@@ -33,6 +33,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     noItemsInfo: {
         textAlign: "center",
         padding: theme.spacing.unit
     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;
         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
                 {renderHeader ?
                     renderHeader() :
                     filters.length > 0


@@ -88,7 +91,7 @@ export const DataTable = withStyles(styles)(
         }
 
         renderBodyRow = (item: T, index: number) => {
         }
 
         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}
             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) => (
                 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>
                 ))}
                         {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>
             {renderIcon(item)}
         </Grid>
         <Grid item>

-            <Typography color="primary">
+            <Typography color="primary" style={{ width: '450px' }}>

                 {item.name}
             </Typography>
         </Grid>
                 {item.name}
             </Typography>
         </Grid>


@@ -54,7 +54,7 @@ export const renderIcon = (item: { kind: string }) => {
 };
 
 export const renderDate = (date?: 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(
 };
 
 export const ResourceLastModifiedDate = connect(


@@ -76,7 +76,7 @@ export const ResourceDeleteDate = connect(
     })((props: { date: string }) => renderDate(props.date));
 
 export const renderFileSize = (fileSize?: number) =>
     })((props: { date: string }) => renderDate(props.date));
 
 export const renderFileSize = (fileSize?: number) =>

-    <Typography noWrap>
+    <Typography noWrap style={{ minWidth: '45px' }}>

         {formatFileSize(fileSize)}
     </Typography>;
 
         {formatFileSize(fileSize)}
     </Typography>;
 

diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx
index 803d8002a365105c2691648e2a5f000cbd3be254..811546187563c805b1569f5c449da2f1a9a8d6ce 100644 (file)
--- 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: [],
         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: [],
     },
     {
         name: "Status",
         selected: true,
         configurable: true,
         filters: [],

-        render: uuid => <ProcessStatus uuid={uuid} />,
-        width: "75px"
+        render: uuid => <ProcessStatus uuid={uuid} />

     },
     {
         name: FavoritePanelColumnNames.TYPE,
     },
     {
         name: FavoritePanelColumnNames.TYPE,


@@ -93,24 +91,21 @@ export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
                 type: ResourceKind.PROJECT
             }
         ],
                 type: ResourceKind.PROJECT
             }
         ],

-        render: uuid => <ResourceType uuid={uuid} />,
-        width: "125px"
+        render: uuid => <ResourceType uuid={uuid} />

     },
     {
         name: FavoritePanelColumnNames.OWNER,
         selected: true,
         configurable: true,
         filters: [],
     },
     {
         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: [],
     },
     {
         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,
     },
     {
         name: FavoritePanelColumnNames.LAST_MODIFIED,


@@ -118,8 +113,7 @@ export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
         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 2573f81813a920256cc9a0801e2af8f2dd7eb611..787dc670d749c1967adb1d533f94ec99044940d8 100644 (file)
--- 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: [],
         configurable: true,
         sortDirection: SortDirection.ASC,
         filters: [],

-        render: uuid => <ResourceName uuid={uuid} />,
-        width: "450px"
+        render: uuid => <ResourceName uuid={uuid} />

     },
     {
         name: "Status",
     },
     {
         name: "Status",


@@ -74,7 +73,6 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
         configurable: true,
         filters: [],
         render: uuid => <ProcessStatus uuid={uuid} />,
         configurable: true,
         filters: [],
         render: uuid => <ProcessStatus uuid={uuid} />,

-        width: "75px"

     },
     {
         name: ProjectPanelColumnNames.TYPE,
     },
     {
         name: ProjectPanelColumnNames.TYPE,


@@ -97,24 +95,21 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
                 type: ResourceKind.PROJECT
             }
         ],
                 type: ResourceKind.PROJECT
             }
         ],

-        render: uuid => <ResourceType uuid={uuid} />,
-        width: "125px"
+        render: uuid => <ResourceType uuid={uuid} />

     },
     {
         name: ProjectPanelColumnNames.OWNER,
         selected: true,
         configurable: true,
         filters: [],
     },
     {
         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: [],
     },
     {
         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,
     },
     {
         name: ProjectPanelColumnNames.LAST_MODIFIED,


@@ -122,8 +117,7 @@ export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
         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 08df05c247b61b8be75874ba87c4adbaa7834d71..7237ffc329a5cfb14faa4ce7e1d785d721679a97 100644 (file)
--- 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: [],
         configurable: true,
         sortDirection: SortDirection.ASC,
         filters: [],

-        render: uuid => <ResourceName uuid={uuid}/>,
-        width: "450px"
+        render: uuid => <ResourceName uuid={uuid}/>

     },
     {
         name: TrashPanelColumnNames.TYPE,
     },
     {
         name: TrashPanelColumnNames.TYPE,


@@ -108,7 +107,6 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
             }
         ],
         render: uuid => <ResourceType uuid={uuid}/>,
             }
         ],
         render: uuid => <ResourceType uuid={uuid}/>,

-        width: "125px"

     },
     {
         name: TrashPanelColumnNames.FILE_SIZE,
     },
     {
         name: TrashPanelColumnNames.FILE_SIZE,


@@ -116,8 +114,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],

-        render: uuid => <ResourceFileSize uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceFileSize uuid={uuid} />

     },
     {
         name: TrashPanelColumnNames.TRASHED_DATE,
     },
     {
         name: TrashPanelColumnNames.TRASHED_DATE,


@@ -125,8 +122,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],

-        render: uuid => <ResourceTrashDate uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceTrashDate uuid={uuid} />

     },
     {
         name: TrashPanelColumnNames.TO_BE_DELETED,
     },
     {
         name: TrashPanelColumnNames.TO_BE_DELETED,


@@ -134,8 +130,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],
         configurable: true,
         sortDirection: SortDirection.NONE,
         filters: [],

-        render: uuid => <ResourceDeleteDate uuid={uuid} />,
-        width: "50px"
+        render: uuid => <ResourceDeleteDate uuid={uuid} />

     },
     {
         name: '',
     },
     {
         name: '',


@@ -143,8 +138,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: false,
         sortDirection: SortDirection.NONE,
         filters: [],
         configurable: false,
         sortDirection: SortDirection.NONE,
         filters: [],

-        render: uuid => <ResourceRestore uuid={uuid}/>,
-        width: "50px"
+        render: uuid => <ResourceRestore uuid={uuid}/>

     }
 ];
 
     }
 ];