1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
16 } from '@material-ui/core';
17 import { connect, DispatchProp } from "react-redux";
18 import { RouteComponentProps } from 'react-router';
19 import { ArvadosTheme } from 'common/custom-theme';
20 import { RootState } from 'store/store';
21 import { WorkflowIcon, MoreOptionsIcon } from 'components/icon/icon';
22 import { WorkflowResource } from 'models/workflow';
23 import { ProcessOutputCollectionFiles } from 'views/process-panel/process-output-collection-files';
24 import { WorkflowDetailsAttributes, RegisteredWorkflowPanelDataProps, getRegisteredWorkflowPanelData } from 'views-components/details-panel/workflow-details';
25 import { getResource } from 'store/resources/resources';
26 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
27 import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
28 import { ProcessIOCard, ProcessIOCardType } from 'views/process-panel/process-io-card';
30 type CssRules = 'root'
49 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
66 color: theme.customs.colors.greyL
69 marginRight: theme.spacing.unit / 2,
70 marginBottom: theme.spacing.unit / 2
83 flexDirection: 'column',
86 textTransform: 'none',
91 color: theme.palette.primary.main,
97 marginLeft: theme.spacing.unit,
101 paddingTop: theme.spacing.unit,
102 paddingBottom: theme.spacing.unit,
106 paddingTop: theme.spacing.unit * 0.5,
107 color: theme.customs.colors.green700,
110 alignSelf: 'flex-start',
111 paddingTop: theme.spacing.unit * 0.5
114 padding: theme.spacing.unit * 1.0,
115 paddingTop: theme.spacing.unit * 0.5,
117 paddingBottom: theme.spacing.unit * 1,
122 type RegisteredWorkflowPanelProps = RegisteredWorkflowPanelDataProps & DispatchProp & WithStyles<CssRules>
124 export const RegisteredWorkflowPanel = withStyles(styles)(connect(
125 (state: RootState, props: RouteComponentProps<{ id: string }>) => {
126 const item = getResource<WorkflowResource>(props.match.params.id)(state.resources);
128 return getRegisteredWorkflowPanelData(item, state.auth);
130 return { item, inputParams: [], outputParams: [], workflowCollection: "", gitprops: {} };
132 class extends React.Component<RegisteredWorkflowPanelProps> {
134 const { classes, item, inputParams, outputParams, workflowCollection } = this.props;
135 const panelsData: MPVPanelState[] = [
142 ? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
143 <MPVPanelContent xs="auto" data-cy='registered-workflow-info-panel'>
144 <Card className={classes.infoCard}>
146 className={classes.header}
148 content: classes.title,
149 avatar: classes.avatar,
151 avatar={<WorkflowIcon className={classes.iconHeader} />}
153 <Tooltip title={item.name} placement="bottom-start">
154 <Typography noWrap variant='h6'>
160 <Tooltip title={item.description || '(no-description)'} placement="bottom-start">
161 <Typography noWrap variant='body1' color='inherit'>
162 {item.description || '(no-description)'}
166 <Tooltip title="More options" disableFocusListener>
168 aria-label="More options"
169 onClick={event => this.handleContextMenu(event)}>
176 <CardContent className={classes.content}>
177 <WorkflowDetailsAttributes workflow={item} />
181 <MPVPanelContent forwardProps xs data-cy="process-inputs">
183 label={ProcessIOCardType.INPUT}
189 <MPVPanelContent forwardProps xs data-cy="process-outputs">
191 label={ProcessIOCardType.OUTPUT}
192 params={outputParams}
198 <Card className={classes.filesCard}>
199 <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={workflowCollection} />
206 handleContextMenu = (event: React.MouseEvent<any>) => {
207 const { uuid, ownerUuid, name, description,
208 kind } = this.props.item;
209 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
218 // Avoid expanding/collapsing the panel
219 event.stopPropagation();
220 this.props.dispatch<any>(openContextMenu(event, resource));