Add inputs table to workflow panel

Feature #13863

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views/workflow-panel/workflow-description-card.tsx b/src/views/workflow-panel/workflow-description-card.tsx
index 146236269a19681f2320c129b6e3c596d9052d90..a98356403bfd50ffd346c7b01c2d68c0dfd6de26 100644 (file)
--- a/src/views/workflow-panel/workflow-description-card.tsx
+++ b/src/views/workflow-panel/workflow-description-card.tsx
@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs, Typography, List, ListItem, Table, TableHead, TableCell, TableBody, TableRow } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { WorkflowIcon } from '~/components/icon/icon';
 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
-import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs } from '~/models/workflow';
+import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow';
 
 export type CssRules = 'root' | 'tab';
 
@@ -48,19 +48,18 @@ export const WorkflowDetailsCard = withStyles(styles)(
                     {workflow ? (
                         workflow.description
                     ) : (
-                        <DataTableDefaultView
-                            icon={WorkflowIcon}
-                            messages={['Please select a workflow to see its description.']} />
-                    )}
+                            <DataTableDefaultView
+                                icon={WorkflowIcon}
+                                messages={['Please select a workflow to see its description.']} />
+                        )}
                 </CardContent>}
                 {value === 1 && <CardContent>
-                    {workflow ? (
-                        workflow.name
-                    ) : (
-                        <DataTableDefaultView
+                    {workflow
+                        ? this.renderInputsTable()
+                        : <DataTableDefaultView
                             icon={WorkflowIcon}
                             messages={['Please select a workflow to see its inputs.']} />
-                    )}
+                    }
                 </CardContent>}
             </div>;
         }
@@ -74,4 +73,24 @@ export const WorkflowDetailsCard = withStyles(styles)(
             }
             return;
         }
+
+        renderInputsTable() {
+            return <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Label</TableCell>
+                        <TableCell>Type</TableCell>
+                        <TableCell>Description</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {this.inputs && this.inputs.map(input =>
+                        <TableRow key={input.id}>
+                            <TableCell>{getInputLabel(input)}</TableCell>
+                            <TableCell>{stringifyInputType(input)}</TableCell>
+                            <TableCell>{input.doc}</TableCell>
+                        </TableRow>)}
+                </TableBody>
+            </Table>;
+        }
     });
\ No newline at end of file

diff --git a/src/views/workflow-panel/workflow-panel-view.tsx b/src/views/workflow-panel/workflow-panel-view.tsx
index 3202f0967597709e7a2f35620e7c85e72c7853f0..c49ec88dc7ac11996df4e20efae1f8420444c0f7 100644 (file)
--- a/src/views/workflow-panel/workflow-panel-view.tsx
+++ b/src/views/workflow-panel/workflow-panel-view.tsx
@@ -122,7 +122,7 @@ export const WorkflowPanelView = (props: WorkflowPanelProps) => {
         </Grid>
         <Grid item xs={6}>
             <Paper>
-                <WorkflowDetailsCard />
+                <WorkflowDetailsCard workflow={props.workflow} />
             </Paper>
         </Grid>
     </Grid>;