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