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