init process-view-info-card

Feature #13858

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
new file mode 100644 (file)
index 0000000..dff1437
--- /dev/null
+++ b/src/views/process-panel/process-panel.tsx
@@ -0,0 +1,95 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import {
+    StyleRulesCallback, WithStyles, withStyles, Card,
+    CardHeader, IconButton, CardContent, Grid
+} from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { ProcessResource } from '~/models/process';
+import { DispatchProp, connect } from 'react-redux';
+import { RouteComponentProps } from 'react-router';
+import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
+import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { RootState } from '~/store/store';
+
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    card: {
+        marginBottom: theme.spacing.unit * 2
+    },
+    iconHeader: {
+        fontSize: '1.875rem',
+        color: theme.customs.colors.green700
+    },
+    label: {
+        fontSize: '0.875rem'
+    },
+    value: {
+        textTransform: 'none',
+        fontSize: '0.875rem'
+    }
+});
+
+interface ProcessPanelDataProps {
+    item: ProcessResource;
+}
+
+interface ProcessPanelActionProps {
+    onItemRouteChange: (processId: string) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProcessResource) => void;
+}
+
+type ProcessPanelProps = ProcessPanelDataProps & ProcessPanelActionProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
+
+export const ProcessPanel = withStyles(styles)(
+    connect((state: RootState) => ({
+        item: state.collectionPanel.item,
+        tags: state.collectionPanel.tags
+    }))(
+        class extends React.Component<ProcessPanelProps> {
+            render() {
+                const { classes, onContextMenu, item } = this.props;
+
+                return <div>
+                    <Card className={classes.card}>
+                        <CardHeader
+                            avatar={<ProcessIcon className={classes.iconHeader} />}
+                            action={
+                                <IconButton
+                                    aria-label="More options"
+                                    onClick={event => onContextMenu(event, item)}>
+                                    <MoreOptionsIcon />
+                                </IconButton>
+                            }
+                            title="Pipeline template that generates a config file from a template"
+                            subheader="(no description)"
+                        />
+                        <CardContent>
+                            <Grid container direction="column">
+                                <Grid item xs={6}>
+                                    <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                                        label='Collection UUID' value="uuid" />
+                                    <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                                        label='Number of files' value='14' />
+                                    <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                                        label='Content size' value='54 MB' />
+                                    <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                                        label='Owner' value="ownerUuid" />
+                                </Grid>
+                            </Grid>
+                        </CardContent>
+                    </Card>
+                </div>;
+            }
+            componentWillReceiveProps({ match, item, onItemRouteChange }: ProcessPanelProps) {
+                if (!item || match.params.id !== item.uuid) {
+                    onItemRouteChange(match.params.id);
+                }
+            }
+        }
+    )
+);
\ No newline at end of file

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index c96de02e5270c6cb0091ddf86d7a2b21982f376e..7b9701ad4678fcd72b68678db2634ec3846520d9 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -31,6 +31,7 @@ import { detailsPanelActions, loadDetails } from "~/store/details-panel/details-
 import { contextMenuActions } from "~/store/context-menu/context-menu-actions";
 import { ProjectResource } from '~/models/project';
 import { ResourceKind } from '~/models/resource';
+import { ProcessPanel } from '~/views/process-panel/process-panel';
 import { ContextMenu, ContextMenuKind } from "~/views-components/context-menu/context-menu";
 import { FavoritePanel } from "../favorite-panel/favorite-panel";
 import { CurrentTokenDialog } from '~/views-components/current-token-dialog/current-token-dialog';
@@ -238,6 +239,7 @@ export const Workbench = withStyles(styles)(
                                     <Route path="/projects/:id" render={this.renderProjectPanel} />
                                     <Route path="/favorites" render={this.renderFavoritePanel} />
                                     <Route path="/collections/:id" render={this.renderCollectionPanel} />
+                                    <Route path="/process/:id" render={this.renderProcessPanel} />
                                 </Switch>
                             </div>
                             {user && <DetailsPanel />}
@@ -265,6 +267,20 @@ export const Workbench = withStyles(styles)(
                 );
             }
 
+            renderProcessPanel = (props: RouteComponentProps<{ id: string }>) => <ProcessPanel
+                onItemRouteChange={(processId) => {
+                    return <span>a</span>;
+                }}
+                onContextMenu={(event, item) => {
+                    this.openContextMenu(event, {
+                        uuid: item.uuid,
+                        name: item.name,
+                        description: item.description,
+                        kind: ContextMenuKind.COLLECTION
+                    });
+                }}
+                {...props} />
+
             renderCollectionPanel = (props: RouteComponentProps<{ id: string }>) => <CollectionPanel
                 onItemRouteChange={(collectionId) => {
                     this.props.dispatch<any>(loadCollection(collectionId));