src/views/workflow-panel/workflow-description-card.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs, Paper } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { WorkflowIcon } from '~/components/icon/icon';
   9 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
  10 import { WorkflowResource } from '~/models/workflow';
  11
  12 export type CssRules = 'root' | 'tab';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         height: '100%',
  17     },
  18     tab: {
  19         minWidth: '50%'
  20     }
  21 });
  22
  23 interface WorkflowDetailsCardDataProps {
  24     workflow?: WorkflowResource;
  25 }
  26
  27 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  28
  29 export const WorkflowDetailsCard = withStyles(styles)(
  30     class extends React.Component<WorkflowDetailsCardProps> {
  31         state = {
  32             value: 0,
  33         };
  34
  35         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  36             this.setState({ value });
  37         }
  38
  39         render() {
  40             const { classes } = this.props;
  41             const { value } = this.state;
  42             return <Paper className={classes.root}>
  43                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  44                     <Tab className={classes.tab} label="Description" />
  45                     <Tab className={classes.tab} label="Inputs" />
  46                 </Tabs>
  47                 {value === 0 && <CardContent>
  48                     Description
  49                     <DataTableDefaultView
  50                         icon={WorkflowIcon}
  51                         messages={['Please select a workflow to see its description.']} />
  52                 </CardContent>}
  53                 {value === 1 && <CardContent>
  54                     Inputs
  55                 </CardContent>}
  56             </Paper>;
  57         }
  58     });