From be414d2f98cac5fb96cf16e78943e1ecb8945e0f Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Thu, 14 Jun 2018 16:37:44 +0200
Subject: [PATCH] Remove columns configurator usage to project-explorer, use
 provided keys when mapping over columns

Feature #13601

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 src/components/data-explorer/column.ts        |  1 +
 .../data-explorer/data-explorer.tsx           | 69 +++++++++----------
 .../project-explorer/project-explorer.tsx     | 11 ++-
 3 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/components/data-explorer/column.ts b/src/components/data-explorer/column.ts
index 6681f63b4c..53ac7b001f 100644
--- a/src/components/data-explorer/column.ts
+++ b/src/components/data-explorer/column.ts
@@ -6,6 +6,7 @@ export interface Column<T> {
     header: string;
     selected: boolean;
     configurable?: boolean;
+    key?: React.Key;
     render: (item: T) => React.ReactElement<void>;
     renderHeader?: () => React.ReactElement<void>;
 }
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 05c157f208..229a0905ed 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -18,47 +18,42 @@ class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<
     render() {
         const { items, columns, classes, onItemClick, onColumnToggle } = this.props;
         return (
-            <div>
-                <Grid container justify="flex-end">
-                    <ColumnsConfigurator {...{ columns, onColumnToggle }} />
-                </Grid>
-                <div className={classes.tableContainer}>
-                    {
-                        items.length > 0 ? (
-                            <Table>
-                                <TableHead>
-                                    <TableRow>
-                                        {
-                                            columns.filter(column => column.selected).map(({ header, renderHeader }, index) => (
-                                                <TableCell key={index}>
-                                                    {renderHeader ? renderHeader() : header}
-                                                </TableCell>
-                                            ))
-                                        }
-                                    </TableRow>
-                                </TableHead>
-                                <TableBody className={classes.tableBody}>
+            <div className={classes.tableContainer}>
+                {
+                    items.length > 0 ? (
+                        <Table>
+                            <TableHead>
+                                <TableRow>
                                     {
-                                        items.map((item, index) => (
-                                            <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
-                                                {
-                                                    columns.filter(column => column.selected).map((column, index) => (
-                                                        <TableCell key={index}>
-                                                            {column.render(item)}
-                                                        </TableCell>
-                                                    ))
-                                                }
-                                            </TableRow>
+                                        columns.filter(column => column.selected).map(({ header, renderHeader, key }, index) => (
+                                            <TableCell key={key || index}>
+                                                {renderHeader ? renderHeader() : header}
+                                            </TableCell>
                                         ))
                                     }
-                                </TableBody>
-                            </Table>
-                        ) : (
-                                <Typography>No items</Typography>
-                            )
-                    }
+                                </TableRow>
+                            </TableHead>
+                            <TableBody className={classes.tableBody}>
+                                {
+                                    items.map((item, index) => (
+                                        <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
+                                            {
+                                                columns.filter(column => column.selected).map((column, index) => (
+                                                    <TableCell key={index}>
+                                                        {column.render(item)}
+                                                    </TableCell>
+                                                ))
+                                            }
+                                        </TableRow>
+                                    ))
+                                }
+                            </TableBody>
+                        </Table>
+                    ) : (
+                            <Typography>No items</Typography>
+                        )
+                }
 
-                </div>
             </div>
         );
     }
diff --git a/src/components/project-explorer/project-explorer.tsx b/src/components/project-explorer/project-explorer.tsx
index 18910bf2e2..7b8565b546 100644
--- a/src/components/project-explorer/project-explorer.tsx
+++ b/src/components/project-explorer/project-explorer.tsx
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import DataExplorer, { DataExplorerProps } from "../../components/data-explorer/data-explorer";
+import ColumnsConfigurator from "../../components/data-explorer/columns-configurator/columns-configurator";
 import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
 import { Column } from '../../components/data-explorer/column';
 import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
@@ -89,9 +90,17 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
             },
             {
                 header: "Actions",
+                key: "Actions",
                 selected: true,
                 configurable: false,
-                renderHeader: () => <span/>,
+                renderHeader: () => (
+                    <Grid container justify="flex-end">
+                        <ColumnsConfigurator
+                            columns={this.state.columns}
+                            onColumnToggle={this.toggleColumn}
+                        />
+                    </Grid>
+                ),
                 render: item => (
                     <Grid container justify="flex-end">
                         <Popover triggerComponent={ItemActionsTrigger}>
-- 
2.30.2