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, parseWorkflowDefinition, getWorkflowInputs } from '~/models/workflow';
  11 import { WorkflowInput } from '~/components/workflow-inputs-form/workflow-input';
  12 import { RunProcessInputsForm } from '../run-process-panel/run-process-inputs-form';
  13
  14 export type CssRules = 'root' | 'tab';
  15
  16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     root: {
  18         height: '100%',
  19     },
  20     tab: {
  21         minWidth: '50%'
  22     }
  23 });
  24
  25 interface WorkflowDetailsCardDataProps {
  26     workflow?: WorkflowResource;
  27 }
  28
  29 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  30
  31 export const WorkflowDetailsCard = withStyles(styles)(
  32     class extends React.Component<WorkflowDetailsCardProps> {
  33         state = {
  34             value: 0,
  35         };
  36
  37         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  38             this.setState({ value });
  39         }
  40
  41         render() {
  42             const { classes, workflow } = this.props;
  43             const { value } = this.state;
  44             return <Paper className={classes.root}>
  45                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  46                     <Tab className={classes.tab} label="Description" />
  47                     <Tab className={classes.tab} label="Inputs" />
  48                 </Tabs>
  49                 {value === 0 && <CardContent>
  50                     {workflow
  51                         ? workflow.description
  52                         : <DataTableDefaultView
  53                             icon={WorkflowIcon}
  54                             messages={['Please select a workflow to see its description.']} />}
  55                 </CardContent>}
  56                 {value === 1 && <CardContent>
  57                     {workflow && this.inputs
  58                         ? <RunProcessInputsForm inputs={this.inputs} />
  59                         : <DataTableDefaultView
  60                             icon={WorkflowIcon}
  61                             messages={['Please select a workflow to see its description.']} />}
  62                 </CardContent>}
  63             </Paper>;
  64         }
  65
  66         get inputs() {
  67             if (this.props.workflow) {
  68                 const definition = parseWorkflowDefinition(this.props.workflow);
  69                 if (definition) {
  70                     return getWorkflowInputs(definition);
  71                 }
  72             }
  73             return;
  74         }
  75     });