1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
17 } from '@material-ui/core';
18 import { connect, DispatchProp } from "react-redux";
19 import { RouteComponentProps } from 'react-router';
20 import { ArvadosTheme } from 'common/custom-theme';
21 import { RootState } from 'store/store';
22 import { WorkflowIcon, MoreVerticalIcon } from 'components/icon/icon';
23 import { WorkflowResource } from 'models/workflow';
24 import { ProcessOutputCollectionFiles } from 'views/process-panel/process-output-collection-files';
25 import { WorkflowDetailsAttributes, RegisteredWorkflowPanelDataProps, getRegisteredWorkflowPanelData } from 'views-components/details-panel/workflow-details';
26 import { getResource } from 'store/resources/resources';
27 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
28 import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
29 import { ProcessIOCard, ProcessIOCardType } from 'views/process-panel/process-io-card';
30 import { DefaultView } from "components/default-view/default-view";
32 type CssRules = 'root'
51 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
68 color: theme.customs.colors.greyL
71 marginRight: theme.spacing.unit / 2,
72 marginBottom: theme.spacing.unit / 2
85 flexDirection: 'column',
88 textTransform: 'none',
93 color: theme.palette.primary.main,
99 marginLeft: theme.spacing.unit,
103 paddingTop: theme.spacing.unit,
104 paddingBottom: theme.spacing.unit,
108 paddingTop: theme.spacing.unit * 0.5,
109 color: theme.customs.colors.green700,
112 alignSelf: 'flex-start',
113 paddingTop: theme.spacing.unit * 0.5
116 padding: theme.spacing.unit * 1.0,
117 paddingTop: theme.spacing.unit * 0.5,
119 paddingBottom: theme.spacing.unit * 1,
124 type RegisteredWorkflowPanelProps = RegisteredWorkflowPanelDataProps & DispatchProp & WithStyles<CssRules>
126 export const RegisteredWorkflowPanel = withStyles(styles)(connect(
127 (state: RootState, props: RouteComponentProps<{ id: string }>) => {
128 const item = getResource<WorkflowResource>(props.match.params.id)(state.resources);
130 return getRegisteredWorkflowPanelData(item, state.auth);
132 return { item, inputParams: [], outputParams: [], workflowCollection: "", gitprops: {} };
134 class extends React.Component<RegisteredWorkflowPanelProps> {
136 const { classes, item, inputParams, outputParams, workflowCollection } = this.props;
137 const panelsData: MPVPanelState[] = [
144 ? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
145 <MPVPanelContent xs="auto" data-cy='registered-workflow-info-panel'>
146 <Card className={classes.infoCard}>
148 className={classes.header}
150 content: classes.title,
151 avatar: classes.avatar,
153 avatar={<WorkflowIcon className={classes.iconHeader} />}
155 <Tooltip title={item.name} placement="bottom-start">
156 <Typography noWrap variant='h6'>
162 <Tooltip title={item.description || '(no-description)'} placement="bottom-start">
163 <Typography noWrap variant='body1' color='inherit'>
164 {item.description || '(no-description)'}
168 <Tooltip title="More options" disableFocusListener>
170 aria-label="More options"
171 onClick={event => this.handleContextMenu(event)}>
178 <CardContent className={classes.content}>
179 <WorkflowDetailsAttributes workflow={item} />
183 <MPVPanelContent forwardProps xs data-cy="process-inputs">
185 label={ProcessIOCardType.INPUT}
191 <MPVPanelContent forwardProps xs data-cy="process-outputs">
193 label={ProcessIOCardType.OUTPUT}
194 params={outputParams}
200 <Card className={classes.filesCard}>
201 <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={workflowCollection} />
209 style={{ minHeight: "100%" }}>
212 messages={["Workflow not found"]}
217 handleContextMenu = (event: React.MouseEvent<any>) => {
218 const { uuid, ownerUuid, name, description,
219 kind } = this.props.item;
220 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
229 // Avoid expanding/collapsing the panel
230 event.stopPropagation();
231 this.props.dispatch<any>(openContextMenu(event, resource));