Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing...

[arvados-workbench2.git] / src / views-components / details-panel / empty-details.tsx

diff --git a/src/views-components/details-panel/empty-details.tsx b/src/views-components/details-panel/empty-details.tsx
index f1ef274010f6f8b1cdf49e1330b63a928b4fa8ff..d5430f2419d5792536c5e8ea992d2824c1a02c03 100644 (file)
--- a/src/views-components/details-panel/empty-details.tsx
+++ b/src/views-components/details-panel/empty-details.tsx
@@ -2,45 +2,11 @@
 //
 // 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 React from 'react';
+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 }: 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.']} />;
     }
 }