1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs } 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';
12 export type CssRules = 'root' | 'tab';
14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
23 interface WorkflowDetailsCardDataProps {
24 workflow?: WorkflowResource;
27 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
29 export const WorkflowDetailsCard = withStyles(styles)(
30 class extends React.Component<WorkflowDetailsCardProps> {
35 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
36 this.setState({ value });
40 const { classes, workflow } = this.props;
41 const { value } = this.state;
42 return <div 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" />
47 {value === 0 && <CardContent>
53 messages={['Please select a workflow to see its description.']} />
56 {value === 1 && <CardContent>
62 messages={['Please select a workflow to see its inputs.']} />
69 if (this.props.workflow) {
70 const definition = parseWorkflowDefinition(this.props.workflow);
72 return getWorkflowInputs(definition);