15768: moved all current functionality to data-table.tsx Arvados-DCO-1.1-Signed-off...

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 0d53f33159ce80168c18e8dadb3e332825894f88..a2fc5e67d1b5856ce7cc64a6522ddb360843b121 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -13,6 +13,9 @@ import { countNodes, getTreeDirty } from 'models/tree';
 import { IconType, PendingIcon } from 'components/icon/icon';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+//lisa
+import { Checkbox } from '@material-ui/core';
+import { createTree } from 'models/tree';
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -37,7 +40,7 @@ export interface DataTableDataProps<I> {
     currentRoute?: string;
 }
 
-type CssRules = 'tableBody' | 'root' | 'content' | 'noItemsInfo' | 'tableCellSelect' | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
+type CssRules = 'tableBody' | 'root' | 'content' | 'noItemsInfo' | 'checkBoxCell' | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -59,7 +62,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         textAlign: 'center',
         padding: theme.spacing.unit,
     },
-    tableCellSelect: {
+    checkBoxCell: {
+        // border: '1px dotted green',
         padding: '0',
     },
     tableCell: {
@@ -86,12 +90,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
+const checkBoxColumn: DataColumn<any, any> = {
+    name: 'foo',
+    selected: true,
+    configurable: false,
+    filters: createTree(),
+    render: () => <></>,
+};
+
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
+        handleResourceSelect = (uuid) => {
+            console.log(uuid);
+        };
         render() {
             const { items, classes, working } = this.props;
+            this.props.columns.unshift(checkBoxColumn);
             return (
                 <div className={classes.root}>
                     <div className={classes.content}>
@@ -167,14 +183,17 @@ export const DataTable = withStyles(styles)(
                     onDoubleClick={(event) => onRowDoubleClick && onRowDoubleClick(event, item)}
                     selected={item === currentItemUuid}
                 >
-                    {this.mapVisibleColumns((column, index) => (
-                        <TableCell
-                            key={column.key || index}
-                            className={currentRoute === '/workflows' ? classes.tableCellWorkflows : index === 0 ? classes.tableCellSelect : classes.tableCell}
-                        >
-                            {column.render(item)}
-                        </TableCell>
-                    ))}
+                    {this.mapVisibleColumns((column, index) => {
+                        return index === 0 ? (
+                            <TableCell key={column.key || index} className={classes.checkBoxCell}>
+                                <Checkbox color='primary' onChange={() => this.handleResourceSelect(item)} />
+                            </TableCell>
+                        ) : (
+                            <TableCell key={column.key || index} className={currentRoute === '/workflows' ? classes.tableCellWorkflows : classes.tableCell}>
+                                {column.render(item)}
+                            </TableCell>
+                        );
+                    })}
                 </TableRow>
             );
         };

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index c8e14208e5e5fffa1d54c7da3b44eadfd112fdb2..b6623bb664394908ce3d82bf17d30c6891c2f909 100644 (file)
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -101,14 +101,6 @@ export const ResourceName = connect((state: RootState, props: { uuid: string })
     return resource;
 })((resource: GroupContentsResource & DispatchProp<any>) => renderName(resource.dispatch, resource));
 
-// const renderSelect = () => <Checkbox color='primary' />;
-const renderSelect = () => <input type='checkbox'></input>;
-
-export const ResourceSelect = connect((state: RootState, props: { uuid: string }) => {
-    const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
-    return resource;
-})((resource: GroupContentsResource & DispatchProp<any>) => renderSelect());
-
 const renderIcon = (item: GroupContentsResource) => {
     switch (item.kind) {
         case ResourceKind.PROJECT:

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index b4019e1e4704b4f10a21495b295656fd1fd6a648..4c94ab8d2dd05f87fd970f4c9b5a8369f4729cef 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -16,7 +16,6 @@ import { ContainerRequestState } from 'models/container-request';
 import { SortDirection } from 'components/data-table/data-column';
 import { ResourceKind, Resource } from 'models/resource';
 import {
-    ResourceSelect,
     ResourceName,
     ProcessStatus as ResourceStatus,
     ResourceType,
@@ -65,7 +64,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 export enum ProjectPanelColumnNames {
-    SELECT = '',
     NAME = 'Name',
     STATUS = 'Status',
     TYPE = 'Type',
@@ -92,13 +90,6 @@ export interface ProjectPanelFilter extends DataTableFilterItem {
 }
 
 export const projectPanelColumns: DataColumns<string, ProjectResource> = [
-    {
-        name: ProjectPanelColumnNames.SELECT,
-        selected: true,
-        configurable: false,
-        filters: createTree(),
-        render: (uuid) => <ResourceSelect uuid={uuid} />,
-    },
     {
         name: ProjectPanelColumnNames.NAME,
         selected: true,