16073: Add process io panel output collection tab

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/store/processes/processes-actions.ts b/src/store/processes/processes-actions.ts
index a3ab1b283ed9da11814d0b4c8b017fcc20290cfa..6203382c5f23a1f09ee16164705403ef8f29b0b9 100644 (file)
--- a/src/store/processes/processes-actions.ts
+++ b/src/store/processes/processes-actions.ts
@@ -115,7 +115,9 @@ export const getInputCollectionMounts = (data: any): InputCollectionMount[] => {
             ...data.mounts[key],
             path: key,
         }))
-        .filter(mount => mount.kind === 'collection')
+        .filter(mount => mount.kind === 'collection' &&
+                mount.portable_data_hash &&
+                mount.path)
         .map(mount => ({
             path: mount.path,
             pdh: mount.portable_data_hash,

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index caea890eb1504643804af4ecea90c4e4ba622915..119bbb571305df45ddd7d1d49193d501872e6845 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -58,6 +58,7 @@ import { Link as MuiLink } from '@material-ui/core';
 import { InputCollectionMount } from 'store/processes/processes-actions';
 import { connect } from 'react-redux';
 import { RootState } from 'store/store';
+import { ProcessOutputCollectionFiles } from './process-output-collection-files';
 
 type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader' | 'tableWrapper' | 'tableRoot' | 'paramValue' | 'keepLink' | 'imagePreview' | 'valArray' | 'emptyValue';
 
@@ -130,12 +131,13 @@ export interface ProcessIOCardDataProps {
     params: ProcessIOParameter[];
     raw?: any;
     mounts?: InputCollectionMount[];
+    outputUuid?: string;
 }
 
 type ProcessIOCardProps = ProcessIOCardDataProps & WithStyles<CssRules> & MPVPanelProps;
 
 export const ProcessIOCard = withStyles(styles)(
-    ({ classes, label, params, raw, mounts, doHidePanel, panelName }: ProcessIOCardProps) => {
+    ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, panelName }: ProcessIOCardProps) => {
         const [tabState, setTabState] = useState(0);
         const handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
             setTabState(value);
@@ -168,6 +170,7 @@ export const ProcessIOCard = withStyles(styles)(
                         <Tab label="Preview" />
                         <Tab label="Raw" />
                         {label === ProcessIOCardType.INPUT && <Tab label="Input Mounts" />}
+                        {label === ProcessIOCardType.OUTPUT && <Tab label="Output Collection" />}
                     </Tabs>
                     {tabState === 0 && <div className={classes.tableWrapper}>
                         {params.length ?
@@ -185,6 +188,7 @@ export const ProcessIOCard = withStyles(styles)(
                         </div>}
                     {tabState === 2 && <div className={classes.tableWrapper}>
                         {label === ProcessIOCardType.INPUT && <ProcessInputMounts mounts={mounts || []} />}
+                        {label === ProcessIOCardType.OUTPUT && <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={outputUuid} />}
                         </div>}
                 </div>
             </CardContent>

diff --git a/src/views/process-panel/process-output-collection-files.ts b/src/views/process-panel/process-output-collection-files.ts
new file mode 100644 (file)
index 0000000..d0b44cd
--- /dev/null
+++ b/src/views/process-panel/process-output-collection-files.ts
@@ -0,0 +1,58 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import {
+    CollectionPanelFiles as Component,
+    CollectionPanelFilesProps
+} from "components/collection-panel-files/collection-panel-files";
+import { Dispatch } from "redux";
+import { collectionPanelFilesAction } from "store/collection-panel/collection-panel-files/collection-panel-files-actions";
+import { ContextMenuKind } from "views-components/context-menu/context-menu";
+import { openContextMenu, openCollectionFilesContextMenu } from 'store/context-menu/context-menu-actions';
+import { openUploadCollectionFilesDialog } from 'store/collections/collection-upload-actions';
+import { ResourceKind } from "models/resource";
+import { openDetailsPanel } from 'store/details-panel/details-panel-action';
+
+const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onSearchChange' | 'onFileClick' | 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
+    onUploadDataClick: (targetLocation?: string) => {
+        dispatch<any>(openUploadCollectionFilesDialog(targetLocation));
+    },
+    onCollapseToggle: (id) => {
+        dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_COLLAPSE({ id }));
+    },
+    onSelectionToggle: (event, item) => {
+        dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_SELECTION({ id: item.id }));
+    },
+    onItemMenuOpen: (event, item, isWritable) => {
+        const isDirectory = item.data.type === 'directory';
+        dispatch<any>(openContextMenu(
+            event,
+            {
+                menuKind: isWritable
+                    ? isDirectory
+                        ? ContextMenuKind.COLLECTION_DIRECTORY_ITEM
+                        : ContextMenuKind.COLLECTION_FILE_ITEM
+                    : isDirectory
+                        ? ContextMenuKind.READONLY_COLLECTION_DIRECTORY_ITEM
+                        : ContextMenuKind.READONLY_COLLECTION_FILE_ITEM,
+                kind: ResourceKind.COLLECTION,
+                name: item.data.name,
+                uuid: item.id,
+                ownerUuid: ''
+            }
+        ));
+    },
+    onSearchChange: (searchValue: string) => {
+        dispatch(collectionPanelFilesAction.ON_SEARCH_CHANGE(searchValue));
+    },
+    onOptionsMenuOpen: (event, isWritable) => {
+        dispatch<any>(openCollectionFilesContextMenu(event, isWritable));
+    },
+    onFileClick: (id) => {
+        dispatch<any>(openDetailsPanel(id));
+    },
+});
+
+export const ProcessOutputCollectionFiles = connect(null, mapDispatchToProps)(Component);

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 4186f6996a398861f84e4336a16075a22b415c0b..22643e8588c279277295ecd537e29b0e31570ac4 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -139,6 +139,7 @@ export const ProcessPanelRoot = withStyles(styles)(
                     label={ProcessIOCardType.OUTPUT}
                     params={processedOutputs}
                     raw={outputDetails.rawOutputs}
+                    outputUuid={outputUuid || ""}
                  />
             </MPVPanelContent>
             <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">