Extract data-table-default-view component

Feature #14160

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

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 002aee4af9f8907b1f04c6362d43414389e450ab..1535fde2b67a8097df409db233d89d3ec1ec7903 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -32,7 +32,7 @@ interface DataExplorerDataProps<T> {
     rowsPerPageOptions: number[];
     page: number;
     contextMenuColumn: boolean;
-    noItemsPlaceholder?: React.ReactNode;
+    dataTableDefaultView?: React.ReactNode;
 }
 
 interface DataExplorerActionProps<T> {
@@ -63,7 +63,7 @@ export const DataExplorer = withStyles(styles)(
                 columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
                 rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
                 items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
-                noItemsPlaceholder
+                dataTableDefaultView
             } = this.props;
             return <Paper>
                 <Toolbar className={classes.toolbar}>
@@ -87,7 +87,7 @@ export const DataExplorer = withStyles(styles)(
                     onFiltersChange={onFiltersChange}
                     onSortToggle={onSortToggle}
                     extractKey={extractKey}
-                    noItemsPlaceholder={noItemsPlaceholder}
+                    defaultView={dataTableDefaultView}
                 />
                 <Toolbar>
                     <Grid container justify="flex-end">

diff --git a/src/components/data-table-default-view/data-table-default-view.tsx b/src/components/data-table-default-view/data-table-default-view.tsx
new file mode 100644 (file)
index 0000000..9f674b9
--- /dev/null
+++ b/src/components/data-table-default-view/data-table-default-view.tsx
@@ -0,0 +1,27 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { DefaultViewDataProps, DefaultView } from '~/components/default-view/default-view';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { DetailsIcon } from '~/components/icon/icon';
+
+type CssRules = 'classRoot';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    classRoot: {
+        marginTop: theme.spacing.unit * 4,
+        marginBottom: theme.spacing.unit * 4,
+    },
+});
+type DataTableDefaultViewDataProps = Partial<Pick<DefaultViewDataProps, 'icon' | 'messages'>>;
+type DataTableDefaultViewProps = DataTableDefaultViewDataProps & WithStyles<CssRules>;
+
+export const DataTableDefaultView = withStyles(styles)(
+    ({ classes, ...props }: DataTableDefaultViewProps) => {
+        const icon = props.icon || DetailsIcon;
+        const messages = props.messages || ['No items found'];
+        return <DefaultView {...classes} {...{ icon, messages }} />;
+    });

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 2216160c15fc5948e2befeb3bbfd287d37419123..db7b484a09660241e9170c9b83e31ee8899a6f69 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -6,8 +6,7 @@ import * as React from 'react';
 import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
 import { DataColumn, SortDirection } from './data-column';
 import { DataTableFilters, DataTableFilterItem } from "../data-table-filters/data-table-filters";
-import { DefaultView } from '~/components/default-view/default-view';
-import { DetailsIcon } from '~/components/icon/icon';
+import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
 
 export type DataColumns<T, F extends DataTableFilterItem = DataTableFilterItem> = Array<DataColumn<T, F>>;
 
@@ -20,10 +19,10 @@ export interface DataTableDataProps<T> {
     onSortToggle: (column: DataColumn<T>) => void;
     onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
     extractKey?: (item: T) => React.Key;
-    noItemsPlaceholder?: React.ReactNode;
+    defaultView?: React.ReactNode;
 }
 
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | "noItemsPlaceholder";
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -40,10 +39,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         textAlign: "center",
         padding: theme.spacing.unit
     },
-    noItemsPlaceholder: {
-        marginTop: theme.spacing.unit * 4,
-        marginBottom: theme.spacing.unit * 4,
-    }
 });
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -70,11 +65,9 @@ export const DataTable = withStyles(styles)(
         }
 
         renderNoItemsPlaceholder = () => {
-            return this.props.noItemsPlaceholder
-                ? this.props.noItemsPlaceholder
-                : <div className={this.props.classes.noItemsPlaceholder}>
-                    <DefaultView icon={DetailsIcon} messages={['No items found']} />
-                </div>;
+            return this.props.defaultView
+                ? this.props.defaultView
+                : <DataTableDefaultView />;
         }
 
         renderHeadCell = (column: DataColumn<T>, index: number) => {

diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx
index 6ba05b06236340a1ef89806a9f4e452ee0538bce..9f35ecd6c27e26d5159656eafb369993bda33ad9 100644 (file)
--- a/src/views/favorite-panel/favorite-panel.tsx
+++ b/src/views/favorite-panel/favorite-panel.tsx
@@ -31,6 +31,7 @@ import { ContainerRequestState } from "~/models/container-request";
 import { FavoritesState } from '../../store/favorites/favorites-reducer';
 import { RootState } from '~/store/store';
 import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
+import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
 
 type CssRules = "toolbar" | "button";
 
@@ -175,7 +176,8 @@ export const FavoritePanel = withStyles(styles)(
                         onRowClick={this.props.onItemClick}
                         onRowDoubleClick={this.props.onItemDoubleClick}
                         onContextMenu={this.props.onContextMenu}
-                        contextMenuColumn={true} />
+                        contextMenuColumn={true}
+                        dataTableDefaultView={<DataTableDefaultView icon={FavoriteIcon}/>} />
                     : <PanelDefaultView
                         icon={FavoriteIcon}
                         messages={['Your favorites list is empty.']} />;

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 3e503956b9b821c6484555715c4507b556b850f8..aa361bc9cb47431acaed8dfc8967e513d43abbca 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -29,6 +29,7 @@ import { openCollectionCreateDialog } from '~/store/collections/collection-creat
 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
 import { filterResources } from '~/store/resources/resources';
 import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
+import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
 
 type CssRules = 'root' | "toolbar" | "button";
 
@@ -165,7 +166,8 @@ export const ProjectPanel = withStyles(styles)(
                             onRowClick={this.handleRowClick}
                             onRowDoubleClick={this.handleRowDoubleClick}
                             onContextMenu={this.handleContextMenu}
-                            contextMenuColumn={true} />
+                            contextMenuColumn={true}
+                            dataTableDefaultView={<DataTableDefaultView icon={ProjectIcon}/>} />
                         : <PanelDefaultView
                             icon={ProjectIcon}
                             messages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']} />

diff --git a/src/views/trash-panel/trash-panel.tsx b/src/views/trash-panel/trash-panel.tsx
index ad78360bbcf56c0226c9d3af5782b2575ddc6e9d..a3664542eba60dde0742a58e7ed53b24e7dda5ff 100644 (file)
--- a/src/views/trash-panel/trash-panel.tsx
+++ b/src/views/trash-panel/trash-panel.tsx
@@ -32,6 +32,7 @@ import { toggleTrashed } from "~/store/trash/trash-actions";
 import { ContextMenuKind } from "~/views-components/context-menu/context-menu";
 import { Dispatch } from "redux";
 import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
+import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
 
 type CssRules = "toolbar" | "button";
 
@@ -169,7 +170,8 @@ export const TrashPanel = withStyles(styles)(
                         onRowClick={this.handleRowClick}
                         onRowDoubleClick={this.handleRowDoubleClick}
                         onContextMenu={this.handleContextMenu}
-                        contextMenuColumn={false} />
+                        contextMenuColumn={false}
+                        dataTableDefaultView={<DataTableDefaultView icon={TrashIcon}/>} />
                     : <PanelDefaultView
                         icon={TrashIcon}
                         messages={['Your trash list is empty.']} />;