From 08f35d9b26a06b70da6e54533782276617c5bed1 Mon Sep 17 00:00:00 2001
From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Thu, 9 Aug 2018 18:40:25 +0200
Subject: [PATCH] add default view component and use inside project and details
 panel

Feature #13894

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---
 .../data-explorer/data-explorer.tsx           | 109 +++++++++++-------
 src/components/default-view/default-view.tsx  |  46 ++++++++
 .../details-attribute/details-attribute.tsx   |  21 ++--
 .../details-panel/empty-details.tsx           |  40 +------
 src/views/project-panel/project-panel.tsx     |  10 +-
 5 files changed, 138 insertions(+), 88 deletions(-)
 create mode 100644 src/components/default-view/default-view.tsx

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 46d5fb50f3..4bd4a2374b 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -11,8 +11,10 @@ import { DataColumn } 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 { DefaultView } from '../default-view/default-view';
+import { ProjectIcon } from '../icon/icon';
 
-type CssRules = "searchBox" | "toolbar";
+type CssRules = 'searchBox' | "toolbar" | 'defaultRoot' | 'defaultMessage' | 'defaultIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     searchBox: {
@@ -20,6 +22,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     toolbar: {
         paddingTop: theme.spacing.unit * 2
+    },
+    defaultRoot: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+        transform: 'translate(0%, -50%)'
+    },
+    defaultMessage: {
+        fontSize: '1.75rem',
+    },
+    defaultIcon: {
+        fontSize: '6rem'
     }
 });
 
@@ -31,6 +45,9 @@ interface DataExplorerDataProps<T> {
     rowsPerPage: number;
     rowsPerPageOptions: number[];
     page: number;
+}
+
+interface DataExplorerActionProps<T> {
     onSearch: (value: string) => void;
     onRowClick: (item: T) => void;
     onRowDoubleClick: (item: T) => void;
@@ -43,48 +60,62 @@ interface DataExplorerDataProps<T> {
     extractKey?: (item: T) => React.Key;
 }
 
-type DataExplorerProps<T> = DataExplorerDataProps<T> & WithStyles<CssRules>;
+type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules>;
 
 export const DataExplorer = withStyles(styles)(
     class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
         render() {
-            return <Paper>
-                <Toolbar className={this.props.classes.toolbar}>
-                    <Grid container justify="space-between" wrap="nowrap" alignItems="center">
-                        <div className={this.props.classes.searchBox}>
-                            <SearchInput
-                                value={this.props.searchValue}
-                                onSearch={this.props.onSearch}/>
-                        </div>
-                        <ColumnSelector
-                            columns={this.props.columns}
-                            onColumnToggle={this.props.onColumnToggle}/>
-                    </Grid>
-                </Toolbar>
-                <DataTable
-                    columns={[...this.props.columns, this.contextMenuColumn]}
-                    items={this.props.items}
-                    onRowClick={(_, item: T) => this.props.onRowClick(item)}
-                    onContextMenu={this.props.onContextMenu}
-                    onRowDoubleClick={(_, item: T) => this.props.onRowDoubleClick(item)}
-                    onFiltersChange={this.props.onFiltersChange}
-                    onSortToggle={this.props.onSortToggle}
-                    extractKey={this.props.extractKey}/>
-                <Toolbar>
-                    {this.props.items.length > 0 &&
-                    <Grid container justify="flex-end">
-                        <TablePagination
-                            count={this.props.itemsAvailable}
-                            rowsPerPage={this.props.rowsPerPage}
-                            rowsPerPageOptions={this.props.rowsPerPageOptions}
-                            page={this.props.page}
-                            onChangePage={this.changePage}
-                            onChangeRowsPerPage={this.changeRowsPerPage}
-                            component="div"
-                        />
-                    </Grid>}
-                </Toolbar>
-            </Paper>;
+            const { 
+                columns, onContextMenu, onFiltersChange, onSortToggle, extractKey, 
+                rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch, 
+                items, itemsAvailable, onRowClick, onRowDoubleClick, classes 
+            } = this.props;
+            return <div>
+                { items.length > 0 ? (
+                    <Paper>
+                        <Toolbar className={classes.toolbar}>
+                            <Grid container justify="space-between" wrap="nowrap" alignItems="center">
+                                <div className={classes.searchBox}>
+                                    <SearchInput
+                                        value={searchValue}
+                                        onSearch={onSearch}/>
+                                </div>
+                                <ColumnSelector
+                                    columns={columns}
+                                    onColumnToggle={onColumnToggle}/>
+                            </Grid>
+                        </Toolbar>
+                        <DataTable
+                            columns={[...columns, this.contextMenuColumn]}
+                            items={items}
+                            onRowClick={(_, item: T) => onRowClick(item)}
+                            onContextMenu={onContextMenu}
+                            onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)}
+                            onFiltersChange={onFiltersChange}
+                            onSortToggle={onSortToggle}
+                            extractKey={extractKey}/>
+                        <Toolbar>
+                            <Grid container justify="flex-end">
+                                <TablePagination
+                                    count={itemsAvailable}
+                                    rowsPerPage={rowsPerPage}
+                                    rowsPerPageOptions={rowsPerPageOptions}
+                                    page={this.props.page}
+                                    onChangePage={this.changePage}
+                                    onChangeRowsPerPage={this.changeRowsPerPage}
+                                    component="div" />
+                            </Grid>
+                        </Toolbar>
+                    </Paper>
+                ) : (
+                    <DefaultView 
+                        classRoot={classes.defaultRoot}
+                        icon={ProjectIcon}
+                        classIcon={classes.defaultIcon}
+                        messages={['Your project is empty. Please create a project', 'or create a collection and upload a data.']}
+                        classMessage={classes.defaultMessage} />
+                )}
+            </div>;
         }
 
         changePage = (event: React.MouseEvent<HTMLButtonElement>, page: number) => {
diff --git a/src/components/default-view/default-view.tsx b/src/components/default-view/default-view.tsx
new file mode 100644
index 0000000000..3bc3e5290d
--- /dev/null
+++ b/src/components/default-view/default-view.tsx
@@ -0,0 +1,46 @@
+// 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 { ArvadosTheme } from '../../common/custom-theme';
+import { Typography } from '@material-ui/core';
+import { IconType } from '../icon/icon';
+import * as classnames from "classnames";
+
+type CssRules = 'root' | 'icon' | 'message';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        textAlign: 'center'
+    },
+    icon: {
+        color: theme.palette.grey["500"],
+        fontSize: '4.5rem'
+    },
+    message: {
+        color: theme.palette.grey["500"]
+    }
+});
+
+export interface DefaultViewDataProps {
+    classRoot?: string;
+    messages: string[];
+    classMessage?: string;
+    icon: IconType;
+    classIcon?: string;
+}
+
+type DefaultViewProps = DefaultViewDataProps & WithStyles<CssRules>;
+
+export const DefaultView = withStyles(styles)(
+    ({ classes, classRoot, messages, classMessage, icon: Icon, classIcon }: DefaultViewProps) =>
+        <Typography className={classnames([classes.root, classRoot])} component="div">
+            <Icon className={classnames([classes.icon, classIcon])} />
+            {messages.map((msg: string, index: number) => {
+                return <Typography key={index} variant="body1" 
+                    className={classnames([classes.message, classMessage])}>{msg}</Typography>;
+            })}
+        </Typography>
+);
\ No newline at end of file
diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index f9a5b05abf..9e58a3e4a0 100644
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -45,14 +45,15 @@ interface DetailsAttributeDataProps {
 
 type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules>;
 
-export const DetailsAttribute = withStyles(styles)(({ label, link, value, children, classes, classLabel, classValue }: DetailsAttributeProps) =>
-    <Typography component="div" className={classes.attribute}>
-        <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
-        { link
-            ? <a href={link} className={classes.link} target='_blank'>{value}</a>
-            : <Typography component="span" className={classnames([classes.value, classValue])}>
-                {value}
-                {children}
-            </Typography> }
-    </Typography>
+export const DetailsAttribute = withStyles(styles)(
+    ({ label, link, value, children, classes, classLabel, classValue }: DetailsAttributeProps) =>
+        <Typography component="div" className={classes.attribute}>
+            <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
+            { link
+                ? <a href={link} className={classes.link} target='_blank'>{value}</a>
+                : <Typography component="span" className={classnames([classes.value, classValue])}>
+                    {value}
+                    {children}
+                </Typography> }
+        </Typography>
 );
diff --git a/src/views-components/details-panel/empty-details.tsx b/src/views-components/details-panel/empty-details.tsx
index 51112ce571..47cb4030ed 100644
--- a/src/views-components/details-panel/empty-details.tsx
+++ b/src/views-components/details-panel/empty-details.tsx
@@ -3,44 +3,10 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { DefaultIcon, IconType, ProjectsIcon } from '../../components/icon/icon';
+import { DefaultIcon, ProjectsIcon } from '../../components/icon/icon';
 import { EmptyResource } from '../../models/empty';
 import { DetailsData } from "./details-data";
-import Typography from "@material-ui/core/Typography";
-import { StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core/styles";
-import { ArvadosTheme } from "../../common/custom-theme";
-import Icon from "@material-ui/core/Icon/Icon";
-
-type CssRules = 'container' | 'icon';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    container: {
-        textAlign: 'center'
-    },
-    icon: {
-        color: theme.palette.grey["500"],
-        fontSize: '72px'
-    }
-});
-
-export interface EmptyStateDataProps {
-    message: string;
-    icon: IconType;
-    details?: string;
-    children?: React.ReactNode;
-}
-
-type EmptyStateProps = EmptyStateDataProps & WithStyles<CssRules>;
-
-const EmptyState = withStyles(styles)(
-    ({ classes, details, message, children, icon: Icon }: EmptyStateProps) =>
-        <Typography className={classes.container} component="div">
-            <Icon className={classes.icon}/>
-            <Typography variant="body1" gutterBottom>{message}</Typography>
-            {details && <Typography gutterBottom>{details}</Typography>}
-            {children && <Typography gutterBottom>{children}</Typography>}
-        </Typography>
-);
+import { DefaultView } from '../../components/default-view/default-view';
 
 export class EmptyDetails extends DetailsData<EmptyResource> {
     getIcon(className?: string) {
@@ -48,6 +14,6 @@ export class EmptyDetails extends DetailsData<EmptyResource> {
     }
 
     getDetails() {
-       return <EmptyState icon={DefaultIcon} message='Select a file or folder to view its details.'/>;
+        return <DefaultView icon={DefaultIcon} messages={['Select a file or folder to view its details.']} />;
     }
 }
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 0cd75ca3f8..991335dd7d 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -18,10 +18,16 @@ import { resourceLabel } from '../../common/labels';
 import { ArvadosTheme } from '../../common/custom-theme';
 import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers';
 import { restoreBranch } from '../../store/navigation/navigation-action';
+import { relative } from 'path';
 
-type CssRules = "toolbar" | "button";
+type CssRules = 'root' | "toolbar" | "button";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        position: 'relative',
+        width: '100%',
+        height: '100%'
+    },
     toolbar: {
         paddingBottom: theme.spacing.unit * 3,
         textAlign: "right"
@@ -148,7 +154,7 @@ export const ProjectPanel = withStyles(styles)(
         class extends React.Component<ProjectPanelProps> {
             render() {
                 const { classes } = this.props;
-                return <div>
+                return <div className={classes.root}>
                     <div className={classes.toolbar}>
                         <Button color="primary" onClick={this.handleNewCollectionClick} variant="raised" className={classes.button}>
                             Create a collection
-- 
2.39.5