Extend column with headerRender and configurable properties, apply these properties

Feature #13601

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/data-explorer/column.ts b/src/components/data-explorer/column.ts
index bbbc6ef9303139748537d35c2e140c784122c036..6681f63b4c1a3571cbe9136db0c3bfbbbeb9fc51 100644 (file)
--- a/src/components/data-explorer/column.ts
+++ b/src/components/data-explorer/column.ts
@@ -5,5 +5,11 @@
 export interface Column<T> {
     header: string;
     selected: boolean;
+    configurable?: boolean;
     render: (item: T) => React.ReactElement<void>;
-}
\ No newline at end of file
+    renderHeader?: () => React.ReactElement<void>;
+}
+
+export const isColumnConfigurable = <T>(column: Column<T>) => {
+    return column.configurable === undefined || column.configurable === true;
+};
\ No newline at end of file

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index a46d2243e5c6534a8027b7a4cdd4ec60063b9aaf..c729ca8d52753c1cb52513e5a9c2bebcac7b4c59 100644 (file)
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem, Typography, ListSubheader } from '@material-ui/core';
 import MenuIcon from "@material-ui/icons/Menu";
-import { Column } from '../column';
+import { Column, isColumnConfigurable } from '../column';
 import { PopoverOrigin } from '@material-ui/core/Popover';
 import Popover from "../../popover/popover";
 import { IconButtonProps } from '@material-ui/core/IconButton';
@@ -20,17 +20,15 @@ const ColumnsConfigurator: React.SFC<ColumnsConfiguratorProps & WithStyles<CssRu
         <Popover triggerComponent={ColumnsConfiguratorTrigger}>
             <Paper>
                 <List dense>
-                    <ListSubheader>
-                        Configure table columns
-                            </ListSubheader>
                     {
-                        columns.map((column, index) => (
-                            <ListItem key={index} button onClick={() => onColumnToggle(column)}>
-                                <Checkbox disableRipple color="primary" checked={column.selected} className={classes.checkbox} />
-                                <ListItemText>{column.header}</ListItemText>
-                            </ListItem>
-
-                        ))
+                        columns
+                            .filter(isColumnConfigurable)
+                            .map((column, index) => (
+                                <ListItem key={index} button onClick={() => onColumnToggle(column)}>
+                                    <Checkbox disableRipple color="primary" checked={column.selected} className={classes.checkbox} />
+                                    <ListItemText>{column.header}</ListItemText>
+                                </ListItem>
+                            ))
                     }
                 </List>
             </Paper>

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index f24d344ce2b19285ca1c156b159d0039c29c8bb9..05c157f20869c930bd3b742c528b02d30835c5f7 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -29,8 +29,10 @@ class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<
                                 <TableHead>
                                     <TableRow>
                                         {
-                                            columns.filter(column => column.selected).map((column, index) => (
-                                                <TableCell key={index}>{column.header}</TableCell>
+                                            columns.filter(column => column.selected).map(({ header, renderHeader }, index) => (
+                                                <TableCell key={index}>
+                                                    {renderHeader ? renderHeader() : header}
+                                                </TableCell>
                                             ))
                                         }
                                     </TableRow>

diff --git a/src/components/project-explorer/project-explorer.tsx b/src/components/project-explorer/project-explorer.tsx
index 73d232b335df175765954bd0b378202e3b180ac3..18910bf2e2113b63a316635969c9088d95f2091b 100644 (file)
--- a/src/components/project-explorer/project-explorer.tsx
+++ b/src/components/project-explorer/project-explorer.tsx
@@ -90,41 +90,45 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
             {
                 header: "Actions",
                 selected: true,
+                configurable: false,
+                renderHeader: () => <span/>,
                 render: item => (
-                    <Popover triggerComponent={ItemActionsTrigger}>
-                        <List dense>
-                            {[
+                    <Grid container justify="flex-end">
+                        <Popover triggerComponent={ItemActionsTrigger}>
+                            <List dense>
+                                {[
+                                    {
+                                        icon: "fas fa-users",
+                                        label: "Share"
+                                    },
+                                    {
+                                        icon: "fas fa-sign-out-alt",
+                                        label: "Move to"
+                                    },
+                                    {
+                                        icon: "fas fa-star",
+                                        label: "Add to favourite"
+                                    },
+                                    {
+                                        icon: "fas fa-edit",
+                                        label: "Rename"
+                                    },
+                                    {
+                                        icon: "fas fa-copy",
+                                        label: "Make a copy"
+                                    },
+                                    {
+                                        icon: "fas fa-download",
+                                        label: "Download"
+                                    }].map(renderAction)
+                                }
+                                < Divider />
                                 {
-                                    icon: "fas fa-users",
-                                    label: "Share"
-                                },
-                                {
-                                    icon: "fas fa-sign-out-alt",
-                                    label: "Move to"
-                                },
-                                {
-                                    icon: "fas fa-star",
-                                    label: "Add to favourite"
-                                },
-                                {
-                                    icon: "fas fa-edit",
-                                    label: "Rename"
-                                },
-                                {
-                                    icon: "fas fa-copy",
-                                    label: "Make a copy"
-                                },
-                                {
-                                    icon: "fas fa-download",
-                                    label: "Download"
-                                }].map(renderAction)
-                            }
-                            < Divider />
-                            {
-                                renderAction({ icon: "fas fa-trash-alt", label: "Remove" })
-                            }
-                        </List>
-                    </Popover>
+                                    renderAction({ icon: "fas fa-trash-alt", label: "Remove" })
+                                }
+                            </List>
+                        </Popover>
+                    </Grid>
                 )
             }
         ]