13858-process-view-information-card

[arvados.git] / src / components / data-explorer / data-explorer.tsx

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 4bd4a2374bd6fb70c25abb0c7203c4a69fe9f610..af14db9c9e08818f3a9dc945718d1296f707d5e8 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -7,12 +7,12 @@ import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, Table
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import { ColumnSelector } from "../column-selector/column-selector";
 import { DataTable, DataColumns } from "../data-table/data-table";
-import { DataColumn } from "../data-table/data-column";
+import { DataColumn, SortDirection } from "../data-table/data-column";
 import { DataTableFilterItem } from '../data-table-filters/data-table-filters';
 import { SearchInput } from '../search-input/search-input';
-import { ArvadosTheme } from "../../common/custom-theme";
+import { ArvadosTheme } from "~/common/custom-theme";
 import { DefaultView } from '../default-view/default-view';
-import { ProjectIcon } from '../icon/icon';
+import { IconType } from '../icon/icon';
 
 type CssRules = 'searchBox' | "toolbar" | 'defaultRoot' | 'defaultMessage' | 'defaultIcon';
 
@@ -25,9 +25,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     defaultRoot: {
         position: 'absolute',
-        width: '100%',
+        width: '80%',
+        left: '50%',
         top: '50%',
-        transform: 'translate(0%, -50%)'
+        transform: 'translate(-50%, -50%)'
     },
     defaultMessage: {
         fontSize: '1.75rem',
@@ -45,9 +46,12 @@ interface DataExplorerDataProps<T> {
     rowsPerPage: number;
     rowsPerPageOptions: number[];
     page: number;
+    defaultIcon: IconType;
+    defaultMessages: string[];
 }
 
 interface DataExplorerActionProps<T> {
+    onSetColumns: (columns: DataColumns<T>) => void;
     onSearch: (value: string) => void;
     onRowClick: (item: T) => void;
     onRowDoubleClick: (item: T) => void;
@@ -64,11 +68,16 @@ type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T
 
 export const DataExplorer = withStyles(styles)(
     class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
+        componentDidMount() {
+            if (this.props.onSetColumns) {
+                this.props.onSetColumns(this.props.columns);
+            }
+        }
         render() {
-            const { 
-                columns, onContextMenu, onFiltersChange, onSortToggle, extractKey, 
-                rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch, 
-                items, itemsAvailable, onRowClick, onRowDoubleClick, classes 
+            const {
+                columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
+                rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
+                items, itemsAvailable, onRowClick, onRowDoubleClick, defaultIcon, defaultMessages, classes
             } = this.props;
             return <div>
                 { items.length > 0 ? (
@@ -108,11 +117,11 @@ export const DataExplorer = withStyles(styles)(
                         </Toolbar>
                     </Paper>
                 ) : (
-                    <DefaultView 
+                    <DefaultView
                         classRoot={classes.defaultRoot}
-                        icon={ProjectIcon}
+                        icon={defaultIcon}
                         classIcon={classes.defaultIcon}
-                        messages={['Your project is empty. Please create a project', 'or create a collection and upload a data.']}
+                        messages={defaultMessages}
                         classMessage={classes.defaultMessage} />
                 )}
             </div>;
@@ -137,6 +146,8 @@ export const DataExplorer = withStyles(styles)(
             name: "Actions",
             selected: true,
             configurable: false,
+            sortDirection: SortDirection.NONE,
+            filters: [],
             key: "context-actions",
             render: this.renderContextMenuTrigger,
             width: "auto"