+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { DefaultIcon, IconType, 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 }: 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>
+);
+
+export class EmptyDetails extends DetailsData<EmptyResource> {
+ getIcon(className?: string) {
+ return <ProjectsIcon className={className}/>;
+ }
+
+ getDetails() {
+ return <EmptyState icon={DefaultIcon} message='Select a file or folder to view its details.'/>;
+ }
+}