services/workbench2/src/components/default-view/default-view.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from '../../common/custom-theme';
   9 import { Typography } from '@material-ui/core';
  10 import { IconType } from '../icon/icon';
  11 import classnames from "classnames";
  12
  13 type CssRules = 'root' | 'icon' | 'message';
  14
  15 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16     root: {
  17         textAlign: 'center'
  18     },
  19     icon: {
  20         color: theme.palette.grey["500"],
  21         fontSize: '4.5rem'
  22     },
  23     message: {
  24         color: theme.palette.grey["500"]
  25     }
  26 });
  27
  28 export interface DefaultViewDataProps {
  29     classRoot?: string;
  30     messages: string[];
  31     filtersApplied?: boolean;
  32     classMessage?: string;
  33     icon?: IconType;
  34     classIcon?: string;
  35 }
  36
  37 type DefaultViewProps = DefaultViewDataProps & WithStyles<CssRules>;
  38
  39 export const DefaultView = withStyles(styles)(
  40     ({ classes, classRoot, messages, classMessage, icon: Icon, classIcon }: DefaultViewProps) =>
  41         <Typography className={classnames([classes.root, classRoot])} component="div">
  42             {Icon && <Icon className={classnames([classes.icon, classIcon])} />}
  43             {messages.map((msg: string, index: number) => {
  44                 return <Typography key={index}
  45                     data-cy='default-view'
  46                     className={classnames([classes.message, classMessage])}>{msg}</Typography>;
  47             })}
  48         </Typography>
  49 );