1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { DefaultIcon, IconType, ProjectsIcon } from '../../components/icon/icon';
7 import { EmptyResource } from '../../models/empty';
8 import { DetailsData } from "./details-data";
9 import Typography from "@material-ui/core/Typography";
10 import { StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core/styles";
11 import { ArvadosTheme } from "../../common/custom-theme";
12 import Icon from "@material-ui/core/Icon/Icon";
14 type CssRules = 'container' | 'icon';
16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
21 color: theme.palette.grey["500"],
26 export interface EmptyStateDataProps {
30 children?: React.ReactNode;
33 type EmptyStateProps = EmptyStateDataProps & WithStyles<CssRules>;
35 const EmptyState = withStyles(styles)(
36 ({ classes, details, message, children, icon: Icon }: EmptyStateProps) =>
37 <Typography className={classes.container} component="div">
38 <Icon className={classes.icon}/>
39 <Typography variant="body1" gutterBottom>{message}</Typography>
40 {details && <Typography gutterBottom>{details}</Typography>}
41 {children && <Typography gutterBottom>{children}</Typography>}
45 export class EmptyDetails extends DetailsData<EmptyResource> {
46 getIcon(className?: string) {
47 return <ProjectsIcon className={className}/>;
51 return <EmptyState icon={DefaultIcon} message='Select a file or folder to view its details.'/>;