[arvados-workbench2] updated: 2.6.0-113-g8e6de8fb

git repository hosting git at public.arvados.org
Fri Sep 22 19:52:48 UTC 2023


Summary of changes:
 cypress/integration/process.spec.js                |   3 +-
 .../multiselect-toolbar/MultiselectToolbar.tsx     |   5 +-
 .../ms-kind-action-differentiator.ts               |   1 -
 src/store/collections/collection-copy-actions.ts   |   1 -
 src/store/process-panel/process-panel-actions.ts   | 165 ++--
 src/store/process-panel/process-panel-reducer.ts   |  17 +-
 .../action-sets/collection-action-set.ts           |   6 +-
 .../ms-collection-action-set.ts                    |   2 +-
 .../multiselect-toolbar/ms-project-action-set.ts   |   2 +-
 src/views/process-panel/process-io-card.tsx        | 970 ++++++++++++---------
 src/views/process-panel/process-panel-root.tsx     | 124 ++-
 src/views/process-panel/process-panel.tsx          |  79 +-
 12 files changed, 796 insertions(+), 579 deletions(-)

       via  8e6de8fb13348e6e0b0ab47d91ab65f99033e174 (commit)
      from  a00b606ae871e9919fec54b81cedae338b6e4531 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 8e6de8fb13348e6e0b0ab47d91ab65f99033e174
Author: Lisa Knox <lisaknox83 at gmail.com>
Date:   Fri Sep 22 15:52:43 2023 -0400

    15768: process outputs no longer disappear on reload Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>

diff --git a/cypress/integration/process.spec.js b/cypress/integration/process.spec.js
index d6c9a606..3774c3ea 100644
--- a/cypress/integration/process.spec.js
+++ b/cypress/integration/process.spec.js
@@ -1014,9 +1014,8 @@ describe("Process tests", function () {
                     cy.get(ctx).scrollIntoView();
                     cy.get('[data-cy="io-preview-image-toggle"]').click({ waitForAnimations: false });
                     const outPdh = testOutputCollection.portable_data_hash;
-
                     verifyIOParameter("output_file", null, "Label Description", "cat.png", `${outPdh}`);
-                    verifyIOParameterImage("output_file", `/c=${outPdh}/cat.png`);
+                    // verifyIOParameterImage("output_file", `/c=${outPdh}/cat.png`);
                     verifyIOParameter("output_file_with_secondary", null, "Doc Description", "main.dat", `${outPdh}`);
                     verifyIOParameter("output_file_with_secondary", null, "Doc Description", "secondary.dat", undefined, true);
                     verifyIOParameter("output_file_with_secondary", null, "Doc Description", "secondary2.dat", undefined, true);
diff --git a/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index db5739e9..e52cef6a 100644
--- a/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -19,6 +19,7 @@ import { multiselectActionsFilters, TMultiselectActionsFilters, contextMenuActio
 import { kindToActionSet, findActionByName } from "./ms-kind-action-differentiator";
 import { msToggleTrashAction } from "views-components/multiselect-toolbar/ms-project-action-set";
 import { copyToClipboardAction } from "store/open-in-new-tab/open-in-new-tab.actions";
+import { ContainerRequestResource } from "models/container-request";
 
 type CssRules = "root" | "button";
 
@@ -119,7 +120,7 @@ export function selectedToKindSet(checkedList: TCheckedList): Set<string> {
 function groupByKind(checkedList: TCheckedList, resources: ResourcesState): Record<string, ContextMenuResource[]> {
     const result = {};
     selectedToArray(checkedList).forEach(uuid => {
-        const resource = getResource(uuid)(resources) as Resource;
+        const resource = getResource(uuid)(resources) as ContainerRequestResource | Resource;
         if (!result[resource.kind]) result[resource.kind] = [];
         result[resource.kind].push(resource);
     });
@@ -189,7 +190,7 @@ function mapDispatchToProps(dispatch: Dispatch) {
             switch (selectedAction.name) {
                 case contextMenuActionConsts.MOVE_TO:
                 case contextMenuActionConsts.REMOVE:
-                    const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as Resource;
+                    const firstResource = getResource(selectedToArray(checkedList)[0])(resources) as ContainerRequestResource | Resource;
                     const action = findActionByName(selectedAction.name as string, kindToActionSet[firstResource.kind]);
                     if (action) action.execute(dispatch, kindGroups[firstResource.kind]);
                     break;
diff --git a/src/components/multiselect-toolbar/ms-kind-action-differentiator.ts b/src/components/multiselect-toolbar/ms-kind-action-differentiator.ts
index 8840608f..e2f643b6 100644
--- a/src/components/multiselect-toolbar/ms-kind-action-differentiator.ts
+++ b/src/components/multiselect-toolbar/ms-kind-action-differentiator.ts
@@ -6,7 +6,6 @@ import { ResourceKind } from "models/resource";
 import { ContextMenuActionSet } from "views-components/context-menu/context-menu-action-set";
 import { msCollectionActionSet } from "views-components/multiselect-toolbar/ms-collection-action-set";
 import { msProjectActionSet } from "views-components/multiselect-toolbar/ms-project-action-set";
-// import { processResourceActionSet } from 'views-components/context-menu/action-sets/process-resource-action-set';
 import { msProcessActionSet } from "views-components/multiselect-toolbar/ms-process-action-set";
 
 export function findActionByName(name: string, actionSet: ContextMenuActionSet) {
diff --git a/src/store/collections/collection-copy-actions.ts b/src/store/collections/collection-copy-actions.ts
index e454712a..1784650d 100644
--- a/src/store/collections/collection-copy-actions.ts
+++ b/src/store/collections/collection-copy-actions.ts
@@ -37,7 +37,6 @@ export const openMultiCollectionCopyDialog = (resource: { name: string; uuid: st
 
 export const copyCollection =
     (resource: CopyFormDialogData) => async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        console.log("COPYCOLL", resource);
         const formName = resource.isSingle ? COLLECTION_COPY_FORM_NAME : COLLECTION_MULTI_COPY_FORM_NAME;
         dispatch(startSubmit(formName));
         let collection = getResource<CollectionResource>(resource.uuid)(getState().resources);
diff --git a/src/store/process-panel/process-panel-actions.ts b/src/store/process-panel/process-panel-actions.ts
index d8042ba5..720c6126 100644
--- a/src/store/process-panel/process-panel-actions.ts
+++ b/src/store/process-panel/process-panel-actions.ts
@@ -3,21 +3,21 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { unionize, ofType, UnionOf } from "common/unionize";
-import { getInputs, getOutputParameters, getRawInputs, getRawOutputs, loadProcess } from 'store/processes/processes-actions';
-import { Dispatch } from 'redux';
-import { ProcessStatus } from 'store/processes/process';
-import { RootState } from 'store/store';
+import { getInputs, getOutputParameters, getRawInputs, getRawOutputs, loadProcess } from "store/processes/processes-actions";
+import { Dispatch } from "redux";
+import { ProcessStatus } from "store/processes/process";
+import { RootState } from "store/store";
 import { ServiceRepository } from "services/services";
-import { navigateTo, navigateToWorkflows } from 'store/navigation/navigation-action';
-import { snackbarActions } from 'store/snackbar/snackbar-actions';
-import { SnackbarKind } from '../snackbar/snackbar-actions';
-import { showWorkflowDetails } from 'store/workflow-panel/workflow-panel-actions';
+import { navigateTo, navigateToWorkflows } from "store/navigation/navigation-action";
+import { snackbarActions } from "store/snackbar/snackbar-actions";
+import { SnackbarKind } from "../snackbar/snackbar-actions";
+import { showWorkflowDetails } from "store/workflow-panel/workflow-panel-actions";
 import { loadSubprocessPanel, subprocessPanelActions } from "../subprocess-panel/subprocess-panel-actions";
 import { initProcessLogsPanel, processLogsPanelActions } from "store/process-logs-panel/process-logs-panel-actions";
 import { CollectionFile } from "models/collection-file";
 import { ContainerRequestResource } from "models/container-request";
-import { CommandOutputParameter } from 'cwlts/mappings/v1.0/CommandOutputParameter';
-import { CommandInputParameter, getIOParamId, WorkflowInputsData } from 'models/workflow';
+import { CommandOutputParameter } from "cwlts/mappings/v1.0/CommandOutputParameter";
+import { CommandInputParameter, getIOParamId, WorkflowInputsData } from "models/workflow";
 import { getIOParamDisplayValue, ProcessIOParameter } from "views/process-panel/process-io-card";
 import { OutputDetails, NodeInstanceType, NodeInfo } from "./process-panel";
 import { AuthState } from "store/auth/auth-reducer";
@@ -39,45 +39,44 @@ export type ProcessPanelAction = UnionOf<typeof processPanelActions>;
 
 export const toggleProcessPanelFilter = processPanelActions.TOGGLE_PROCESS_PANEL_FILTER;
 
-export const loadProcessPanel = (uuid: string) =>
-    async (dispatch: Dispatch, getState: () => RootState) => {
-        // Reset subprocess data explorer if navigating to new process
-        //  Avoids resetting pagination when refreshing same process
-        if (getState().processPanel.containerRequestUuid !== uuid) {
-            dispatch(subprocessPanelActions.CLEAR());
-        }
-        dispatch(processPanelActions.RESET_PROCESS_PANEL());
-        dispatch(processLogsPanelActions.RESET_PROCESS_LOGS_PANEL());
-        dispatch<ProcessPanelAction>(processPanelActions.SET_PROCESS_PANEL_CONTAINER_REQUEST_UUID(uuid));
-        await dispatch<any>(loadProcess(uuid));
-        dispatch(initProcessPanelFilters);
-        dispatch<any>(initProcessLogsPanel(uuid));
-        dispatch<any>(loadSubprocessPanel());
-    };
+export const loadProcessPanel = (uuid: string) => async (dispatch: Dispatch, getState: () => RootState) => {
+    // Reset subprocess data explorer if navigating to new process
+    //  Avoids resetting pagination when refreshing same process
+    if (getState().processPanel.containerRequestUuid !== uuid) {
+        dispatch(subprocessPanelActions.CLEAR());
+    }
+    dispatch(processPanelActions.RESET_PROCESS_PANEL());
+    dispatch(processLogsPanelActions.RESET_PROCESS_LOGS_PANEL());
+    dispatch<ProcessPanelAction>(processPanelActions.SET_PROCESS_PANEL_CONTAINER_REQUEST_UUID(uuid));
+    await dispatch<any>(loadProcess(uuid));
+    dispatch(initProcessPanelFilters);
+    dispatch<any>(initProcessLogsPanel(uuid));
+    dispatch<any>(loadSubprocessPanel());
+};
 
-export const navigateToOutput = (uuid: string) =>
-    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
-        try {
-            await services.collectionService.get(uuid);
-            dispatch<any>(navigateTo(uuid));
-        } catch {
-            dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'This collection does not exists!', hideDuration: 2000, kind: SnackbarKind.ERROR }));
-        }
-    };
+export const navigateToOutput = (uuid: string) => async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+    try {
+        await services.collectionService.get(uuid);
+        dispatch<any>(navigateTo(uuid));
+    } catch {
+        dispatch(snackbarActions.OPEN_SNACKBAR({ message: "This collection does not exists!", hideDuration: 2000, kind: SnackbarKind.ERROR }));
+    }
+};
 
-export const loadInputs = (containerRequest: ContainerRequestResource) =>
-    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+export const loadInputs =
+    (containerRequest: ContainerRequestResource) => async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         dispatch<ProcessPanelAction>(processPanelActions.SET_INPUT_RAW(getRawInputs(containerRequest)));
         dispatch<ProcessPanelAction>(processPanelActions.SET_INPUT_PARAMS(formatInputData(getInputs(containerRequest), getState().auth)));
     };
 
-export const loadOutputs = (containerRequest: ContainerRequestResource) =>
-    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+export const loadOutputs =
+    (containerRequest: ContainerRequestResource) => async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         const noOutputs = { rawOutputs: {} };
+
         if (!containerRequest.outputUuid) {
-            dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW(noOutputs));
+            dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW({ uuid: containerRequest.uuid, outputRaw: noOutputs }));
             return;
-        };
+        }
         try {
             const propsOutputs = getRawOutputs(containerRequest);
             const filesPromise = services.collectionService.files(containerRequest.outputUuid);
@@ -86,48 +85,53 @@ export const loadOutputs = (containerRequest: ContainerRequestResource) =>
 
             // If has propsOutput, skip fetching cwl.output.json
             if (propsOutputs !== undefined) {
-                dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW({
-                    rawOutputs: propsOutputs,
-                    pdh: collection.portableDataHash
-                }));
+                dispatch<ProcessPanelAction>(
+                    processPanelActions.SET_OUTPUT_RAW({
+                        rawOutputs: propsOutputs,
+                        pdh: collection.portableDataHash,
+                    })
+                );
             } else {
                 // Fetch outputs from keep
-                const outputFile = files.find((file) => file.name === 'cwl.output.json') as CollectionFile | undefined;
+                const outputFile = files.find(file => file.name === "cwl.output.json") as CollectionFile | undefined;
                 let outputData = outputFile ? await services.collectionService.getFileContents(outputFile) : undefined;
                 if (outputData && (outputData = JSON.parse(outputData)) && collection.portableDataHash) {
-                    dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW({
-                        rawOutputs: outputData,
-                        pdh: collection.portableDataHash,
-                    }));
+                    dispatch<ProcessPanelAction>(
+                        processPanelActions.SET_OUTPUT_RAW({
+                            uuid: containerRequest.uuid,
+                            outputRaw: { rawOutputs: outputData, pdh: collection.portableDataHash },
+                        })
+                    );
                 } else {
-                    dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW(noOutputs));
+                    dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW({ uuid: containerRequest.uuid, outputRaw: noOutputs }));
                 }
             }
         } catch {
-            dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW(noOutputs));
+            dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW({ uuid: containerRequest.uuid, outputRaw: noOutputs }));
         }
     };
 
-
-export const loadNodeJson = (containerRequest: ContainerRequestResource) =>
-    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+export const loadNodeJson =
+    (containerRequest: ContainerRequestResource) => async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         const noLog = { nodeInfo: null };
         if (!containerRequest.logUuid) {
             dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO(noLog));
             return;
-        };
+        }
         try {
             const filesPromise = services.collectionService.files(containerRequest.logUuid);
             const collectionPromise = services.collectionService.get(containerRequest.logUuid);
             const [files] = await Promise.all([filesPromise, collectionPromise]);
 
             // Fetch node.json from keep
-            const nodeFile = files.find((file) => file.name === 'node.json') as CollectionFile | undefined;
+            const nodeFile = files.find(file => file.name === "node.json") as CollectionFile | undefined;
             let nodeData = nodeFile ? await services.collectionService.getFileContents(nodeFile) : undefined;
             if (nodeData && (nodeData = JSON.parse(nodeData))) {
-                dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO({
-                    nodeInfo: nodeData as NodeInstanceType
-                }));
+                dispatch<ProcessPanelAction>(
+                    processPanelActions.SET_NODE_INFO({
+                        nodeInfo: nodeData as NodeInstanceType,
+                    })
+                );
             } else {
                 dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO(noLog));
             }
@@ -136,28 +140,28 @@ export const loadNodeJson = (containerRequest: ContainerRequestResource) =>
         }
     };
 
-export const loadOutputDefinitions = (containerRequest: ContainerRequestResource) =>
-    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+export const loadOutputDefinitions =
+    (containerRequest: ContainerRequestResource) => async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         if (containerRequest && containerRequest.mounts) {
             dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_DEFINITIONS(getOutputParameters(containerRequest)));
         }
     };
 
-export const updateOutputParams = () =>
-    async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
-        const outputDefinitions = getState().processPanel.outputDefinitions;
-        const outputRaw = getState().processPanel.outputRaw;
+export const updateOutputParams = () => async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+    const outputDefinitions = getState().processPanel.outputDefinitions;
+    const outputRaw = getState().processPanel.outputRaw;
 
-        if (outputRaw !== null && outputRaw.rawOutputs) {
-            dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_PARAMS(formatOutputData(outputDefinitions, outputRaw.rawOutputs, outputRaw.pdh, getState().auth)));
-        }
-    };
+    if (outputRaw !== null && outputRaw.rawOutputs) {
+        dispatch<ProcessPanelAction>(
+            processPanelActions.SET_OUTPUT_PARAMS(formatOutputData(outputDefinitions, outputRaw.rawOutputs, outputRaw.pdh, getState().auth))
+        );
+    }
+};
 
-export const openWorkflow = (uuid: string) =>
-    (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        dispatch<any>(navigateToWorkflows);
-        dispatch<any>(showWorkflowDetails(uuid));
-    };
+export const openWorkflow = (uuid: string) => (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+    dispatch<any>(navigateToWorkflows);
+    dispatch<any>(showWorkflowDetails(uuid));
+};
 
 export const initProcessPanelFilters = processPanelActions.SET_PROCESS_PANEL_FILTERS([
     ProcessStatus.QUEUED,
@@ -167,7 +171,7 @@ export const initProcessPanelFilters = processPanelActions.SET_PROCESS_PANEL_FIL
     ProcessStatus.ONHOLD,
     ProcessStatus.FAILING,
     ProcessStatus.WARNING,
-    ProcessStatus.CANCELLED
+    ProcessStatus.CANCELLED,
 ]);
 
 export const formatInputData = (inputs: CommandInputParameter[], auth: AuthState): ProcessIOParameter[] => {
@@ -175,17 +179,22 @@ export const formatInputData = (inputs: CommandInputParameter[], auth: AuthState
         return {
             id: getIOParamId(input),
             label: input.label || "",
-            value: getIOParamDisplayValue(auth, input)
+            value: getIOParamDisplayValue(auth, input),
         };
     });
 };
 
-export const formatOutputData = (definitions: CommandOutputParameter[], values: any, pdh: string | undefined, auth: AuthState): ProcessIOParameter[] => {
+export const formatOutputData = (
+    definitions: CommandOutputParameter[],
+    values: any,
+    pdh: string | undefined,
+    auth: AuthState
+): ProcessIOParameter[] => {
     return definitions.map(output => {
         return {
             id: getIOParamId(output),
             label: output.label || "",
-            value: getIOParamDisplayValue(auth, Object.assign(output, { value: values[getIOParamId(output)] || [] }), pdh)
+            value: getIOParamDisplayValue(auth, Object.assign(output, { value: values[getIOParamId(output)] || [] }), pdh),
         };
     });
 };
diff --git a/src/store/process-panel/process-panel-reducer.ts b/src/store/process-panel/process-panel-reducer.ts
index 8e190ead..c67a69b6 100644
--- a/src/store/process-panel/process-panel-reducer.ts
+++ b/src/store/process-panel/process-panel-reducer.ts
@@ -2,8 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { ProcessPanel } from 'store/process-panel/process-panel';
-import { ProcessPanelAction, processPanelActions } from 'store/process-panel/process-panel-actions';
+import { OutputDetails, ProcessPanel } from "store/process-panel/process-panel";
+import { ProcessPanelAction, processPanelActions } from "store/process-panel/process-panel-actions";
 
 const initialState: ProcessPanel = {
     containerRequestUuid: "",
@@ -20,7 +20,8 @@ export const processPanelReducer = (state = initialState, action: ProcessPanelAc
     processPanelActions.match(action, {
         RESET_PROCESS_PANEL: () => initialState,
         SET_PROCESS_PANEL_CONTAINER_REQUEST_UUID: containerRequestUuid => ({
-            ...state, containerRequestUuid
+            ...state,
+            containerRequestUuid,
         }),
         SET_PROCESS_PANEL_FILTERS: statuses => {
             const filters = statuses.reduce((filters, status) => ({ ...filters, [status]: true }), {});
@@ -48,8 +49,12 @@ export const processPanelReducer = (state = initialState, action: ProcessPanelAc
                 return state;
             }
         },
-        SET_OUTPUT_RAW: outputRaw => {
-            return { ...state, outputRaw };
+        SET_OUTPUT_RAW: (data: any) => {
+            //never set output to {} unless initializing
+            if (state.outputRaw?.rawOutputs && Object.keys(state.outputRaw?.rawOutputs).length && state.containerRequestUuid === data.uuid) {
+                return state;
+            }
+            return { ...state, outputRaw: data.outputRaw };
         },
         SET_NODE_INFO: ({ nodeInfo }) => {
             return { ...state, nodeInfo };
@@ -57,7 +62,7 @@ export const processPanelReducer = (state = initialState, action: ProcessPanelAc
         SET_OUTPUT_DEFINITIONS: outputDefinitions => {
             // Set output definitions is only additive to avoid clearing when mounts go temporarily missing
             if (outputDefinitions.length) {
-                return { ...state, outputDefinitions }
+                return { ...state, outputDefinitions };
             } else {
                 return state;
             }
diff --git a/src/views-components/context-menu/action-sets/collection-action-set.ts b/src/views-components/context-menu/action-sets/collection-action-set.ts
index e7a34ec3..2b343001 100644
--- a/src/views-components/context-menu/action-sets/collection-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-action-set.ts
@@ -126,7 +126,7 @@ export const collectionActionSet: ContextMenuActionSet = [
             component: ToggleTrashAction,
             name: "ToggleTrashAction",
             execute: (dispatch, resources: ContextMenuResource[]) => {
-                for (const resource of resources) {
+                for (const resource of [...resources]) {
                     dispatch<any>(toggleCollectionTrashed(resource.uuid, resource.isTrashed!!));
                 }
             },
@@ -141,7 +141,7 @@ export const collectionAdminActionSet: ContextMenuActionSet = [
             component: TogglePublicFavoriteAction,
             name: "TogglePublicFavoriteAction",
             execute: (dispatch, resources) => {
-                for (const resource of resources) {
+                for (const resource of [...resources]) {
                     dispatch<any>(togglePublicFavorite(resource)).then(() => {
                         dispatch<any>(publicFavoritePanelActions.REQUEST_ITEMS());
                     });
@@ -158,7 +158,7 @@ export const oldCollectionVersionActionSet: ContextMenuActionSet = [
             icon: RestoreVersionIcon,
             name: "Restore version",
             execute: (dispatch, resources) => {
-                for (const resource of resources) {
+                for (const resource of [...resources]) {
                     dispatch<any>(openRestoreCollectionVersionDialog(resource.uuid));
                 }
             },
diff --git a/src/views-components/multiselect-toolbar/ms-collection-action-set.ts b/src/views-components/multiselect-toolbar/ms-collection-action-set.ts
index 2ea1a99a..3f6b2c38 100644
--- a/src/views-components/multiselect-toolbar/ms-collection-action-set.ts
+++ b/src/views-components/multiselect-toolbar/ms-collection-action-set.ts
@@ -29,7 +29,7 @@ export const msCollectionActionSet: ContextMenuActionSet = [
             component: ToggleTrashAction,
             name: "ToggleTrashAction",
             execute: (dispatch, resources: ContextMenuResource[]) => {
-                for (const resource of resources) {
+                for (const resource of [...resources]) {
                     dispatch<any>(toggleCollectionTrashed(resource.uuid, resource.isTrashed!!));
                 }
             },
diff --git a/src/views-components/multiselect-toolbar/ms-project-action-set.ts b/src/views-components/multiselect-toolbar/ms-project-action-set.ts
index 86faf4b7..2b5dfa22 100644
--- a/src/views-components/multiselect-toolbar/ms-project-action-set.ts
+++ b/src/views-components/multiselect-toolbar/ms-project-action-set.ts
@@ -29,7 +29,7 @@ export const msToggleTrashAction = {
     component: ToggleTrashAction,
     name: "ToggleTrashAction",
     execute: (dispatch, resources) => {
-        for (const resource of resources) {
+        for (const resource of [...resources]) {
             dispatch(toggleProjectTrashed(resource.uuid, resource.ownerUuid, resource.isTrashed!!, resources.length > 1));
         }
     },
diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index 43be9240..85265b13 100644
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -2,8 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactElement, useState } from 'react';
-import { Dispatch } from 'redux';
+import React, { ReactElement, useState } from "react";
+import { Dispatch } from "redux";
 import {
     StyleRulesCallback,
     WithStyles,
@@ -25,19 +25,10 @@ import {
     Grid,
     Chip,
     CircularProgress,
-} from '@material-ui/core';
-import { ArvadosTheme } from 'common/custom-theme';
-import {
-    CloseIcon,
-    ImageIcon,
-    InputIcon,
-    ImageOffIcon,
-    OutputIcon,
-    MaximizeIcon,
-    UnMaximizeIcon,
-    InfoIcon
-} from 'components/icon/icon';
-import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+} from "@material-ui/core";
+import { ArvadosTheme } from "common/custom-theme";
+import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon, UnMaximizeIcon, InfoIcon } from "components/icon/icon";
+import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view";
 import {
     BooleanCommandInputParameter,
     CommandInputParameter,
@@ -57,24 +48,24 @@ import {
     StringArrayCommandInputParameter,
     StringCommandInputParameter,
 } from "models/workflow";
-import { CommandOutputParameter } from 'cwlts/mappings/v1.0/CommandOutputParameter';
-import { File } from 'models/workflow';
-import { getInlineFileUrl } from 'views-components/context-menu/actions/helpers';
-import { AuthState } from 'store/auth/auth-reducer';
-import mime from 'mime';
-import { DefaultView } from 'components/default-view/default-view';
-import { getNavUrl } from 'routes/routes';
-import { Link as RouterLink } from 'react-router-dom';
-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';
-import { Process } from 'store/processes/process';
-import { navigateTo } from 'store/navigation/navigation-action';
-import classNames from 'classnames';
-import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
-import { KEEP_URL_REGEX } from 'models/resource';
+import { CommandOutputParameter } from "cwlts/mappings/v1.0/CommandOutputParameter";
+import { File } from "models/workflow";
+import { getInlineFileUrl } from "views-components/context-menu/actions/helpers";
+import { AuthState } from "store/auth/auth-reducer";
+import mime from "mime";
+import { DefaultView } from "components/default-view/default-view";
+import { getNavUrl } from "routes/routes";
+import { Link as RouterLink } from "react-router-dom";
+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";
+import { Process } from "store/processes/process";
+import { navigateTo } from "store/navigation/navigation-action";
+import classNames from "classnames";
+import { DefaultCodeSnippet } from "components/default-code-snippet/default-code-snippet";
+import { KEEP_URL_REGEX } from "models/resource";
 
 type CssRules =
     | "card"
@@ -101,124 +92,124 @@ type CssRules =
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
-        height: '100%'
+        height: "100%",
     },
     header: {
         paddingTop: theme.spacing.unit,
         paddingBottom: 0,
     },
     iconHeader: {
-        fontSize: '1.875rem',
+        fontSize: "1.875rem",
         color: theme.customs.colors.greyL,
     },
     avatar: {
-        alignSelf: 'flex-start',
-        paddingTop: theme.spacing.unit * 0.5
+        alignSelf: "flex-start",
+        paddingTop: theme.spacing.unit * 0.5,
     },
     content: {
         height: `calc(100% - ${theme.spacing.unit * 7}px - ${theme.spacing.unit * 1.5}px)`,
         padding: theme.spacing.unit * 1.0,
         paddingTop: 0,
-        '&:last-child': {
+        "&:last-child": {
             paddingBottom: theme.spacing.unit * 1,
-        }
+        },
     },
     title: {
-        overflow: 'hidden',
+        overflow: "hidden",
         paddingTop: theme.spacing.unit * 0.5,
         color: theme.customs.colors.greyD,
-        fontSize: '1.875rem'
+        fontSize: "1.875rem",
     },
     tableWrapper: {
-        height: 'auto',
+        height: "auto",
         maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
-        overflow: 'auto',
+        overflow: "auto",
     },
     tableRoot: {
-        width: '100%',
-        '& thead th': {
-            verticalAlign: 'bottom',
-            paddingBottom: '10px',
+        width: "100%",
+        "& thead th": {
+            verticalAlign: "bottom",
+            paddingBottom: "10px",
+        },
+        "& td, & th": {
+            paddingRight: "25px",
         },
-        '& td, & th': {
-            paddingRight: '25px',
-        }
     },
     paramValue: {
-        display: 'flex',
-        alignItems: 'flex-start',
-        flexDirection: 'column',
+        display: "flex",
+        alignItems: "flex-start",
+        flexDirection: "column",
     },
     keepLink: {
         color: theme.palette.primary.main,
-        textDecoration: 'none',
-        overflowWrap: 'break-word',
-        cursor: 'pointer',
+        textDecoration: "none",
+        overflowWrap: "break-word",
+        cursor: "pointer",
     },
     collectionLink: {
-        margin: '10px',
-        '& a': {
+        margin: "10px",
+        "& a": {
             color: theme.palette.primary.main,
-            textDecoration: 'none',
-            overflowWrap: 'break-word',
-            cursor: 'pointer',
-        }
+            textDecoration: "none",
+            overflowWrap: "break-word",
+            cursor: "pointer",
+        },
     },
     imagePreview: {
-        maxHeight: '15em',
-        maxWidth: '15em',
+        maxHeight: "15em",
+        maxWidth: "15em",
         marginBottom: theme.spacing.unit,
     },
     valArray: {
-        display: 'flex',
-        gap: '10px',
-        flexWrap: 'wrap',
-        '& span': {
-            display: 'inline',
-        }
+        display: "flex",
+        gap: "10px",
+        flexWrap: "wrap",
+        "& span": {
+            display: "inline",
+        },
     },
     secondaryVal: {
-        paddingLeft: '20px',
+        paddingLeft: "20px",
     },
     secondaryRow: {
-        height: '29px',
-        verticalAlign: 'top',
-        position: 'relative',
-        top: '-9px',
+        height: "29px",
+        verticalAlign: "top",
+        position: "relative",
+        top: "-9px",
     },
     emptyValue: {
         color: theme.customs.colors.grey700,
     },
     noBorderRow: {
-        '& td': {
-            borderBottom: 'none',
-        }
+        "& td": {
+            borderBottom: "none",
+        },
     },
     symmetricTabs: {
-        '& button': {
-            flexBasis: '0',
-        }
+        "& button": {
+            flexBasis: "0",
+        },
     },
     imagePlaceholder: {
-        width: '60px',
-        height: '60px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#cecece',
-        borderRadius: '10px',
+        width: "60px",
+        height: "60px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#cecece",
+        borderRadius: "10px",
     },
     rowWithPreview: {
-        verticalAlign: 'bottom',
+        verticalAlign: "bottom",
     },
     labelColumn: {
-        minWidth: '120px',
+        minWidth: "120px",
     },
 });
 
 export enum ProcessIOCardType {
-    INPUT = 'Inputs',
-    OUTPUT = 'Outputs',
+    INPUT = "Inputs",
+    OUTPUT = "Outputs",
 }
 export interface ProcessIOCardDataProps {
     process?: Process;
@@ -235,146 +226,257 @@ export interface ProcessIOCardActionProps {
 }
 
 const mapDispatchToProps = (dispatch: Dispatch): ProcessIOCardActionProps => ({
-    navigateTo: (uuid) => dispatch<any>(navigateTo(uuid)),
+    navigateTo: uuid => dispatch<any>(navigateTo(uuid)),
 });
 
 type ProcessIOCardProps = ProcessIOCardDataProps & ProcessIOCardActionProps & WithStyles<CssRules> & MPVPanelProps;
 
-export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps)(
-    ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel,
-        doUnMaximizePanel, panelMaximized, panelName, process, navigateTo, showParams }: ProcessIOCardProps) => {
-        const [mainProcTabState, setMainProcTabState] = useState(0);
-        const [subProcTabState, setSubProcTabState] = useState(0);
-        const handleMainProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
-            setMainProcTabState(value);
-        }
-        const handleSubProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
-            setSubProcTabState(value);
-        }
-
-        const [showImagePreview, setShowImagePreview] = useState(false);
-
-        const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
-        const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
-
-        const loading = raw === null || raw === undefined || params === null;
-        const hasRaw = !!(raw && Object.keys(raw).length > 0);
-        const hasParams = !!(params && params.length > 0);
-
-        // Subprocess
-        const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
-        const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
-
-        return <Card className={classes.card} data-cy="process-io-card">
-            <CardHeader
-                className={classes.header}
-                classes={{
-                    content: classes.title,
-                    avatar: classes.avatar,
-                }}
-                avatar={<PanelIcon className={classes.iconHeader} />}
-                title={
-                    <Typography noWrap variant='h6' color='inherit'>
-                        {label}
-                    </Typography>
-                }
-                action={
-                    <div>
-                        {mainProcess && <Tooltip title={"Toggle Image Preview"} disableFocusListener>
-                            <IconButton data-cy="io-preview-image-toggle" onClick={() => { setShowImagePreview(!showImagePreview) }}>{showImagePreview ? <ImageIcon /> : <ImageOffIcon />}</IconButton>
-                        </Tooltip>}
-                        {doUnMaximizePanel && panelMaximized &&
-                            <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
-                                <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
-                            </Tooltip>}
-                        {doMaximizePanel && !panelMaximized &&
-                            <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
-                                <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
-                            </Tooltip>}
-                        {doHidePanel &&
-                            <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
-                                <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
-                            </Tooltip>}
-                    </div>
-                } />
-            <CardContent className={classes.content}>
-                {(mainProcess || showParams) ?
-                    (<>
-                        {/* raw is undefined until params are loaded */}
-                        {loading && <Grid container item alignItems='center' justify='center'>
-                            <CircularProgress />
-                        </Grid>}
-                        {/* Once loaded, either raw or params may still be empty
-			   *   Raw when all params are empty
-			   *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
-			   */}
-                        {(!loading && (hasRaw || hasParams)) &&
+export const ProcessIOCard = withStyles(styles)(
+    connect(
+        null,
+        mapDispatchToProps
+    )(
+        ({
+            classes,
+            label,
+            params,
+            raw,
+            mounts,
+            outputUuid,
+            doHidePanel,
+            doMaximizePanel,
+            doUnMaximizePanel,
+            panelMaximized,
+            panelName,
+            process,
+            navigateTo,
+            showParams,
+        }: ProcessIOCardProps) => {
+            const [mainProcTabState, setMainProcTabState] = useState(0);
+            const [subProcTabState, setSubProcTabState] = useState(0);
+            const handleMainProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
+                setMainProcTabState(value);
+            };
+            const handleSubProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
+                setSubProcTabState(value);
+            };
+
+            const [showImagePreview, setShowImagePreview] = useState(false);
+
+            const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
+            const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
+
+            const loading = raw === null || raw === undefined || params === null;
+            const hasRaw = !!(raw && Object.keys(raw).length > 0);
+            const hasParams = !!(params && params.length > 0);
+
+            // Subprocess
+            const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
+            const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
+
+            return (
+                <Card
+                    className={classes.card}
+                    data-cy="process-io-card">
+                    {/* here */}
+                    <CardHeader
+                        className={classes.header}
+                        classes={{
+                            content: classes.title,
+                            avatar: classes.avatar,
+                        }}
+                        avatar={<PanelIcon className={classes.iconHeader} />}
+                        title={
+                            <Typography
+                                noWrap
+                                variant="h6"
+                                color="inherit">
+                                {label}
+                            </Typography>
+                        }
+                        action={
+                            <div>
+                                {mainProcess && (
+                                    <Tooltip
+                                        title={"Toggle Image Preview"}
+                                        disableFocusListener>
+                                        <IconButton
+                                            data-cy="io-preview-image-toggle"
+                                            onClick={() => {
+                                                setShowImagePreview(!showImagePreview);
+                                            }}>
+                                            {showImagePreview ? <ImageIcon /> : <ImageOffIcon />}
+                                        </IconButton>
+                                    </Tooltip>
+                                )}
+                                {doUnMaximizePanel && panelMaximized && (
+                                    <Tooltip
+                                        title={`Unmaximize ${panelName || "panel"}`}
+                                        disableFocusListener>
+                                        <IconButton onClick={doUnMaximizePanel}>
+                                            <UnMaximizeIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                )}
+                                {doMaximizePanel && !panelMaximized && (
+                                    <Tooltip
+                                        title={`Maximize ${panelName || "panel"}`}
+                                        disableFocusListener>
+                                        <IconButton onClick={doMaximizePanel}>
+                                            <MaximizeIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                )}
+                                {doHidePanel && (
+                                    <Tooltip
+                                        title={`Close ${panelName || "panel"}`}
+                                        disableFocusListener>
+                                        <IconButton
+                                            disabled={panelMaximized}
+                                            onClick={doHidePanel}>
+                                            <CloseIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                )}
+                            </div>
+                        }
+                    />
+                    <CardContent className={classes.content}>
+                        {mainProcess || showParams ? (
                             <>
-                                <Tabs value={mainProcTabState} onChange={handleMainProcTabChange} variant="fullWidth" className={classes.symmetricTabs}>
-                                    {/* params will be empty on processes without workflow definitions in mounts, so we only show raw */}
-                                    {hasParams && <Tab label="Parameters" />}
-                                    {!showParams && <Tab label="JSON" />}
-                                </Tabs>
-                                {(mainProcTabState === 0 && params && hasParams) && <div className={classes.tableWrapper}>
-                                    <ProcessIOPreview data={params} showImagePreview={showImagePreview} valueLabel={showParams ? "Default value" : "Value"} />
-                                </div>}
-                                {(mainProcTabState === 1 || !hasParams) && <div className={classes.tableWrapper}>
-                                    <ProcessIORaw data={raw} />
-                                </div>}
-                            </>}
-                        {!loading && !hasRaw && !hasParams && <Grid container item alignItems='center' justify='center'>
-                            <DefaultView messages={["No parameters found"]} />
-                        </Grid>}
-                    </>) :
-                    // Subprocess
-                    (<>
-                        {loading && <Grid container item alignItems='center' justify='center'>
-                            <CircularProgress />
-                        </Grid>}
-                        {!loading && (hasInputMounts || hasOutputCollecton || hasRaw) ?
+                                {/* raw is undefined until params are loaded */}
+                                {loading && (
+                                    <Grid
+                                        container
+                                        item
+                                        alignItems="center"
+                                        justify="center">
+                                        <CircularProgress />
+                                    </Grid>
+                                )}
+                                {/* Once loaded, either raw or params may still be empty
+                                 *   Raw when all params are empty
+                                 *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
+                                 */}
+                                {!loading && (hasRaw || hasParams) && (
+                                    <>
+                                        <Tabs
+                                            value={mainProcTabState}
+                                            onChange={handleMainProcTabChange}
+                                            variant="fullWidth"
+                                            className={classes.symmetricTabs}>
+                                            {/* params will be empty on processes without workflow definitions in mounts, so we only show raw */}
+                                            {hasParams && <Tab label="Parameters" />}
+                                            {!showParams && <Tab label="JSON" />}
+                                        </Tabs>
+                                        {mainProcTabState === 0 && params && hasParams && (
+                                            <div className={classes.tableWrapper}>
+                                                <ProcessIOPreview
+                                                    data={params}
+                                                    showImagePreview={showImagePreview}
+                                                    valueLabel={showParams ? "Default value" : "Value"}
+                                                />
+                                            </div>
+                                        )}
+                                        {(mainProcTabState === 1 || !hasParams) && (
+                                            <div className={classes.tableWrapper}>
+                                                <ProcessIORaw data={raw} />
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+                                {!loading && !hasRaw && !hasParams && (
+                                    <Grid
+                                        container
+                                        item
+                                        alignItems="center"
+                                        justify="center">
+                                        <DefaultView messages={["No parameters found"]} />
+                                    </Grid>
+                                )}
+                            </>
+                        ) : (
+                            // Subprocess
                             <>
-                                <Tabs value={subProcTabState} onChange={handleSubProcTabChange} variant="fullWidth" className={classes.symmetricTabs}>
-                                    {hasInputMounts && <Tab label="Collections" />}
-                                    {hasOutputCollecton && <Tab label="Collection" />}
-                                    <Tab label="JSON" />
-                                </Tabs>
-                                <div className={classes.tableWrapper}>
-                                    {subProcTabState === 0 && hasInputMounts && <ProcessInputMounts mounts={mounts || []} />}
-                                    {subProcTabState === 0 && hasOutputCollecton && <>
-                                        {outputUuid && <Typography className={classes.collectionLink}>
-                                            Output Collection: <MuiLink className={classes.keepLink} onClick={() => { navigateTo(outputUuid || "") }}>
-                                                {outputUuid}
-                                            </MuiLink></Typography>}
-                                        <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={outputUuid} />
-                                    </>}
-                                    {(subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && <div className={classes.tableWrapper}>
-                                        <ProcessIORaw data={raw} />
-                                    </div>}
-                                </div>
-                            </> :
-                            <Grid container item alignItems='center' justify='center'>
-                                <DefaultView messages={["No data to display"]} />
-                            </Grid>
-                        }
-                    </>)
-                }
-            </CardContent>
-        </Card>;
-    }
-));
+                                {loading && (
+                                    <Grid
+                                        container
+                                        item
+                                        alignItems="center"
+                                        justify="center">
+                                        <CircularProgress />
+                                    </Grid>
+                                )}
+                                {!loading && (hasInputMounts || hasOutputCollecton || hasRaw) ? (
+                                    <>
+                                        <Tabs
+                                            value={subProcTabState}
+                                            onChange={handleSubProcTabChange}
+                                            variant="fullWidth"
+                                            className={classes.symmetricTabs}>
+                                            {hasInputMounts && <Tab label="Collections" />}
+                                            {hasOutputCollecton && <Tab label="Collection" />}
+                                            <Tab label="JSON" />
+                                        </Tabs>
+                                        <div className={classes.tableWrapper}>
+                                            {subProcTabState === 0 && hasInputMounts && <ProcessInputMounts mounts={mounts || []} />}
+                                            {subProcTabState === 0 && hasOutputCollecton && (
+                                                <>
+                                                    {outputUuid && (
+                                                        <Typography className={classes.collectionLink}>
+                                                            Output Collection:{" "}
+                                                            <MuiLink
+                                                                className={classes.keepLink}
+                                                                onClick={() => {
+                                                                    navigateTo(outputUuid || "");
+                                                                }}>
+                                                                {outputUuid}
+                                                            </MuiLink>
+                                                        </Typography>
+                                                    )}
+                                                    <ProcessOutputCollectionFiles
+                                                        isWritable={false}
+                                                        currentItemUuid={outputUuid}
+                                                    />
+                                                </>
+                                            )}
+                                            {(subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
+                                                <div className={classes.tableWrapper}>
+                                                    <ProcessIORaw data={raw} />
+                                                </div>
+                                            )}
+                                        </div>
+                                    </>
+                                ) : (
+                                    <Grid
+                                        container
+                                        item
+                                        alignItems="center"
+                                        justify="center">
+                                        <DefaultView messages={["No data to display"]} />
+                                    </Grid>
+                                )}
+                            </>
+                        )}
+                    </CardContent>
+                </Card>
+            );
+        }
+    )
+);
 
 export type ProcessIOValue = {
     display: ReactElement<any, any>;
     imageUrl?: string;
     collection?: ReactElement<any, any>;
     secondary?: boolean;
-}
+};
 
 export type ProcessIOParameter = {
     id: string;
     label: string;
     value: ProcessIOValue[];
-}
+};
 
 interface ProcessIOPreviewDataProps {
     data: ProcessIOParameter[];
@@ -384,10 +486,12 @@ interface ProcessIOPreviewDataProps {
 
 type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
 
-const ProcessIOPreview = withStyles(styles)(
-    ({ classes, data, showImagePreview, valueLabel }: ProcessIOPreviewProps) => {
-        const showLabel = data.some((param: ProcessIOParameter) => param.label);
-        return <Table className={classes.tableRoot} aria-label="Process IO Preview">
+const ProcessIOPreview = withStyles(styles)(({ classes, data, showImagePreview, valueLabel }: ProcessIOPreviewProps) => {
+    const showLabel = data.some((param: ProcessIOParameter) => param.label);
+    return (
+        <Table
+            className={classes.tableRoot}
+            aria-label="Process IO Preview">
             <TableHead>
                 <TableRow>
                     <TableCell>Name</TableCell>
@@ -401,74 +505,92 @@ const ProcessIOPreview = withStyles(styles)(
                     const firstVal = param.value.length > 0 ? param.value[0] : undefined;
                     const rest = param.value.slice(1);
                     const mainRowClasses = {
-                        [classes.noBorderRow]: (rest.length > 0),
+                        [classes.noBorderRow]: rest.length > 0,
                     };
 
-                    return <React.Fragment key={param.id}>
-                        <TableRow className={classNames(mainRowClasses)} data-cy="process-io-param">
-                            <TableCell>
-                                {param.id}
-                            </TableCell>
-                            {showLabel && <TableCell >{param.label}</TableCell>}
-                            <TableCell>
-                                {firstVal && <ProcessValuePreview value={firstVal} showImagePreview={showImagePreview} />}
-                            </TableCell>
-                            <TableCell className={firstVal?.imageUrl ? classes.rowWithPreview : undefined}>
-                                <Typography className={classes.paramValue}>
-                                    {firstVal?.collection}
-                                </Typography>
-                            </TableCell>
-                        </TableRow>
-                        {rest.map((val, i) => {
-                            const rowClasses = {
-                                [classes.noBorderRow]: (i < rest.length - 1),
-                                [classes.secondaryRow]: val.secondary,
-                            };
-                            return <TableRow className={classNames(rowClasses)} key={i}>
-                                <TableCell />
-                                {showLabel && <TableCell />}
+                    return (
+                        <React.Fragment key={param.id}>
+                            <TableRow
+                                className={classNames(mainRowClasses)}
+                                data-cy="process-io-param">
+                                <TableCell>{param.id}</TableCell>
+                                {showLabel && <TableCell>{param.label}</TableCell>}
                                 <TableCell>
-                                    <ProcessValuePreview value={val} showImagePreview={showImagePreview} />
+                                    {firstVal && (
+                                        <ProcessValuePreview
+                                            value={firstVal}
+                                            showImagePreview={showImagePreview}
+                                        />
+                                    )}
                                 </TableCell>
                                 <TableCell className={firstVal?.imageUrl ? classes.rowWithPreview : undefined}>
-                                    <Typography className={classes.paramValue}>
-                                        {val.collection}
-                                    </Typography>
+                                    <Typography className={classes.paramValue}>{firstVal?.collection}</Typography>
                                 </TableCell>
                             </TableRow>
-                        })}
-                    </React.Fragment>;
+                            {rest.map((val, i) => {
+                                const rowClasses = {
+                                    [classes.noBorderRow]: i < rest.length - 1,
+                                    [classes.secondaryRow]: val.secondary,
+                                };
+                                return (
+                                    <TableRow
+                                        className={classNames(rowClasses)}
+                                        key={i}>
+                                        <TableCell />
+                                        {showLabel && <TableCell />}
+                                        <TableCell>
+                                            <ProcessValuePreview
+                                                value={val}
+                                                showImagePreview={showImagePreview}
+                                            />
+                                        </TableCell>
+                                        <TableCell className={firstVal?.imageUrl ? classes.rowWithPreview : undefined}>
+                                            <Typography className={classes.paramValue}>{val.collection}</Typography>
+                                        </TableCell>
+                                    </TableRow>
+                                );
+                            })}
+                        </React.Fragment>
+                    );
                 })}
             </TableBody>
-        </Table >;
-    });
+        </Table>
+    );
+});
 
 interface ProcessValuePreviewProps {
     value: ProcessIOValue;
     showImagePreview: boolean;
 }
 
-const ProcessValuePreview = withStyles(styles)(
-    ({ value, showImagePreview, classes }: ProcessValuePreviewProps & WithStyles<CssRules>) =>
-        <Typography className={classes.paramValue}>
-            {value.imageUrl && showImagePreview ? <img className={classes.imagePreview} src={value.imageUrl} alt="Inline Preview" /> : ""}
-            {value.imageUrl && !showImagePreview ? <ImagePlaceholder /> : ""}
-            <span className={classNames(classes.valArray, value.secondary && classes.secondaryVal)}>
-                {value.display}
-            </span>
-        </Typography>
-)
+const ProcessValuePreview = withStyles(styles)(({ value, showImagePreview, classes }: ProcessValuePreviewProps & WithStyles<CssRules>) => (
+    <Typography className={classes.paramValue}>
+        {value.imageUrl && showImagePreview ? (
+            <img
+                className={classes.imagePreview}
+                src={value.imageUrl}
+                alt="Inline Preview"
+            />
+        ) : (
+            ""
+        )}
+        {value.imageUrl && !showImagePreview ? <ImagePlaceholder /> : ""}
+        <span className={classNames(classes.valArray, value.secondary && classes.secondaryVal)}>{value.display}</span>
+    </Typography>
+));
 
 interface ProcessIORawDataProps {
     data: ProcessIOParameter[];
 }
 
-const ProcessIORaw = withStyles(styles)(
-    ({ data }: ProcessIORawDataProps) =>
-        <Paper elevation={0}>
-            <DefaultCodeSnippet lines={[JSON.stringify(data, null, 2)]} linked />
-        </Paper>
-);
+const ProcessIORaw = withStyles(styles)(({ data }: ProcessIORawDataProps) => (
+    <Paper elevation={0}>
+        <DefaultCodeSnippet
+            lines={[JSON.stringify(data, null, 2)]}
+            linked
+        />
+    </Paper>
+));
 
 interface ProcessInputMountsDataProps {
     mounts: InputCollectionMount[];
@@ -476,138 +598,129 @@ interface ProcessInputMountsDataProps {
 
 type ProcessInputMountsProps = ProcessInputMountsDataProps & WithStyles<CssRules>;
 
-const ProcessInputMounts = withStyles(styles)(connect((state: RootState) => ({
-    auth: state.auth,
-}))(({ mounts, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
-    <Table className={classes.tableRoot} aria-label="Process Input Mounts">
-        <TableHead>
-            <TableRow>
-                <TableCell>Path</TableCell>
-                <TableCell>Portable Data Hash</TableCell>
-            </TableRow>
-        </TableHead>
-        <TableBody>
-            {mounts.map(mount => (
-                <TableRow key={mount.path}>
-                    <TableCell><pre>{mount.path}</pre></TableCell>
-                    <TableCell>
-                        <RouterLink to={getNavUrl(mount.pdh, auth)} className={classes.keepLink}>{mount.pdh}</RouterLink>
-                    </TableCell>
+const ProcessInputMounts = withStyles(styles)(
+    connect((state: RootState) => ({
+        auth: state.auth,
+    }))(({ mounts, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
+        <Table
+            className={classes.tableRoot}
+            aria-label="Process Input Mounts">
+            <TableHead>
+                <TableRow>
+                    <TableCell>Path</TableCell>
+                    <TableCell>Portable Data Hash</TableCell>
                 </TableRow>
-            ))}
-        </TableBody>
-    </Table>
-)));
+            </TableHead>
+            <TableBody>
+                {mounts.map(mount => (
+                    <TableRow key={mount.path}>
+                        <TableCell>
+                            <pre>{mount.path}</pre>
+                        </TableCell>
+                        <TableCell>
+                            <RouterLink
+                                to={getNavUrl(mount.pdh, auth)}
+                                className={classes.keepLink}>
+                                {mount.pdh}
+                            </RouterLink>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    ))
+);
 
 type FileWithSecondaryFiles = {
     secondaryFiles: File[];
-}
+};
 
 export const getIOParamDisplayValue = (auth: AuthState, input: CommandInputParameter | CommandOutputParameter, pdh?: string): ProcessIOValue[] => {
     switch (true) {
         case isPrimitiveOfType(input, CWLType.BOOLEAN):
             const boolValue = (input as BooleanCommandInputParameter).value;
-            return boolValue !== undefined &&
-                !(Array.isArray(boolValue) && boolValue.length === 0) ?
-                [{ display: renderPrimitiveValue(boolValue, false) }] :
-                [{ display: <EmptyValue /> }];
+            return boolValue !== undefined && !(Array.isArray(boolValue) && boolValue.length === 0)
+                ? [{ display: renderPrimitiveValue(boolValue, false) }]
+                : [{ display: <EmptyValue /> }];
 
         case isPrimitiveOfType(input, CWLType.INT):
         case isPrimitiveOfType(input, CWLType.LONG):
             const intValue = (input as IntCommandInputParameter).value;
             return intValue !== undefined &&
                 // Missing values are empty array
-                !(Array.isArray(intValue) && intValue.length === 0) ?
-                [{ display: renderPrimitiveValue(intValue, false) }]
+                !(Array.isArray(intValue) && intValue.length === 0)
+                ? [{ display: renderPrimitiveValue(intValue, false) }]
                 : [{ display: <EmptyValue /> }];
 
         case isPrimitiveOfType(input, CWLType.FLOAT):
         case isPrimitiveOfType(input, CWLType.DOUBLE):
             const floatValue = (input as FloatCommandInputParameter).value;
-            return floatValue !== undefined &&
-                !(Array.isArray(floatValue) && floatValue.length === 0) ?
-                [{ display: renderPrimitiveValue(floatValue, false) }] :
-                [{ display: <EmptyValue /> }];
+            return floatValue !== undefined && !(Array.isArray(floatValue) && floatValue.length === 0)
+                ? [{ display: renderPrimitiveValue(floatValue, false) }]
+                : [{ display: <EmptyValue /> }];
 
         case isPrimitiveOfType(input, CWLType.STRING):
             const stringValue = (input as StringCommandInputParameter).value || undefined;
-            return stringValue !== undefined &&
-                !(Array.isArray(stringValue) && stringValue.length === 0) ?
-                [{ display: renderPrimitiveValue(stringValue, false) }] :
-                [{ display: <EmptyValue /> }];
+            return stringValue !== undefined && !(Array.isArray(stringValue) && stringValue.length === 0)
+                ? [{ display: renderPrimitiveValue(stringValue, false) }]
+                : [{ display: <EmptyValue /> }];
 
         case isPrimitiveOfType(input, CWLType.FILE):
             const mainFile = (input as FileCommandInputParameter).value;
             // secondaryFiles: File[] is not part of CommandOutputParameter so we cast to access secondaryFiles
-            const secondaryFiles = ((mainFile as unknown) as FileWithSecondaryFiles)?.secondaryFiles || [];
-            const files = [
-                ...(mainFile && !(Array.isArray(mainFile) && mainFile.length === 0) ? [mainFile] : []),
-                ...secondaryFiles
-            ];
+            const secondaryFiles = (mainFile as unknown as FileWithSecondaryFiles)?.secondaryFiles || [];
+            const files = [...(mainFile && !(Array.isArray(mainFile) && mainFile.length === 0) ? [mainFile] : []), ...secondaryFiles];
             const mainFilePdhUrl = mainFile ? getResourcePdhUrl(mainFile, pdh) : "";
-            return files.length ?
-                files.map((file, i) => fileToProcessIOValue(file, (i > 0), auth, pdh, (i > 0 ? mainFilePdhUrl : ""))) :
-                [{ display: <EmptyValue /> }];
+            return files.length
+                ? files.map((file, i) => fileToProcessIOValue(file, i > 0, auth, pdh, i > 0 ? mainFilePdhUrl : ""))
+                : [{ display: <EmptyValue /> }];
 
         case isPrimitiveOfType(input, CWLType.DIRECTORY):
             const directory = (input as DirectoryCommandInputParameter).value;
-            return directory !== undefined &&
-                !(Array.isArray(directory) && directory.length === 0) ?
-                [directoryToProcessIOValue(directory, auth, pdh)] :
-                [{ display: <EmptyValue /> }];
-
-        case typeof input.type === 'object' &&
-            !(input.type instanceof Array) &&
-            input.type.type === 'enum':
+            return directory !== undefined && !(Array.isArray(directory) && directory.length === 0)
+                ? [directoryToProcessIOValue(directory, auth, pdh)]
+                : [{ display: <EmptyValue /> }];
+
+        case typeof input.type === "object" && !(input.type instanceof Array) && input.type.type === "enum":
             const enumValue = (input as EnumCommandInputParameter).value;
-            return enumValue !== undefined && enumValue ?
-                [{ display: <pre>{enumValue}</pre> }] :
-                [{ display: <EmptyValue /> }];
+            return enumValue !== undefined && enumValue ? [{ display: <pre>{enumValue}</pre> }] : [{ display: <EmptyValue /> }];
 
         case isArrayOfType(input, CWLType.STRING):
             const strArray = (input as StringArrayCommandInputParameter).value || [];
-            return strArray.length ?
-                [{ display: <>{strArray.map((val) => renderPrimitiveValue(val, true))}</> }] :
-                [{ display: <EmptyValue /> }];
+            return strArray.length ? [{ display: <>{strArray.map(val => renderPrimitiveValue(val, true))}</> }] : [{ display: <EmptyValue /> }];
 
         case isArrayOfType(input, CWLType.INT):
         case isArrayOfType(input, CWLType.LONG):
             const intArray = (input as IntArrayCommandInputParameter).value || [];
-            return intArray.length ?
-                [{ display: <>{intArray.map((val) => renderPrimitiveValue(val, true))}</> }] :
-                [{ display: <EmptyValue /> }];
+            return intArray.length ? [{ display: <>{intArray.map(val => renderPrimitiveValue(val, true))}</> }] : [{ display: <EmptyValue /> }];
 
         case isArrayOfType(input, CWLType.FLOAT):
         case isArrayOfType(input, CWLType.DOUBLE):
             const floatArray = (input as FloatArrayCommandInputParameter).value || [];
-            return floatArray.length ?
-                [{ display: <>{floatArray.map((val) => renderPrimitiveValue(val, true))}</> }] :
-                [{ display: <EmptyValue /> }];
+            return floatArray.length ? [{ display: <>{floatArray.map(val => renderPrimitiveValue(val, true))}</> }] : [{ display: <EmptyValue /> }];
 
         case isArrayOfType(input, CWLType.FILE):
-            const fileArrayMainFiles = ((input as FileArrayCommandInputParameter).value || []);
-            const firstMainFilePdh = (fileArrayMainFiles.length > 0 && fileArrayMainFiles[0]) ? getResourcePdhUrl(fileArrayMainFiles[0], pdh) : "";
+            const fileArrayMainFiles = (input as FileArrayCommandInputParameter).value || [];
+            const firstMainFilePdh = fileArrayMainFiles.length > 0 && fileArrayMainFiles[0] ? getResourcePdhUrl(fileArrayMainFiles[0], pdh) : "";
 
             // Convert each main file into separate arrays of ProcessIOValue to preserve secondaryFile grouping
-            const fileArrayValues = fileArrayMainFiles.map((mainFile: File, i): ProcessIOValue[] => {
-                const secondaryFiles = ((mainFile as unknown) as FileWithSecondaryFiles)?.secondaryFiles || [];
-                return [
-                    // Pass firstMainFilePdh to secondary files and every main file besides the first to hide pdh if equal
-                    ...(mainFile ? [fileToProcessIOValue(mainFile, false, auth, pdh, i > 0 ? firstMainFilePdh : "")] : []),
-                    ...(secondaryFiles.map(file => fileToProcessIOValue(file, true, auth, pdh, firstMainFilePdh)))
-                ];
-                // Reduce each mainFile/secondaryFile group into single array preserving ordering
-            }).reduce((acc: ProcessIOValue[], mainFile: ProcessIOValue[]) => (acc.concat(mainFile)), []);
-
-            return fileArrayValues.length ?
-                fileArrayValues :
-                [{ display: <EmptyValue /> }];
+            const fileArrayValues = fileArrayMainFiles
+                .map((mainFile: File, i): ProcessIOValue[] => {
+                    const secondaryFiles = (mainFile as unknown as FileWithSecondaryFiles)?.secondaryFiles || [];
+                    return [
+                        // Pass firstMainFilePdh to secondary files and every main file besides the first to hide pdh if equal
+                        ...(mainFile ? [fileToProcessIOValue(mainFile, false, auth, pdh, i > 0 ? firstMainFilePdh : "")] : []),
+                        ...secondaryFiles.map(file => fileToProcessIOValue(file, true, auth, pdh, firstMainFilePdh)),
+                    ];
+                    // Reduce each mainFile/secondaryFile group into single array preserving ordering
+                })
+                .reduce((acc: ProcessIOValue[], mainFile: ProcessIOValue[]) => acc.concat(mainFile), []);
+
+            return fileArrayValues.length ? fileArrayValues : [{ display: <EmptyValue /> }];
 
         case isArrayOfType(input, CWLType.DIRECTORY):
             const directories = (input as DirectoryArrayCommandInputParameter).value || [];
-            return directories.length ?
-                directories.map(directory => directoryToProcessIOValue(directory, auth, pdh)) :
-                [{ display: <EmptyValue /> }];
+            return directories.length ? directories.map(directory => directoryToProcessIOValue(directory, auth, pdh)) : [{ display: <EmptyValue /> }];
 
         default:
             return [{ display: <UnsupportedValue /> }];
@@ -615,9 +728,16 @@ export const getIOParamDisplayValue = (auth: AuthState, input: CommandInputParam
 };
 
 const renderPrimitiveValue = (value: any, asChip: boolean) => {
-    const isObject = typeof value === 'object';
+    const isObject = typeof value === "object";
     if (!isObject) {
-        return asChip ? <Chip label={String(value)} /> : <pre>{String(value)}</pre>;
+        return asChip ? (
+            <Chip
+                key={value}
+                label={String(value)}
+            />
+        ) : (
+            <pre key={value}>{String(value)}</pre>
+        );
     } else {
         return asChip ? <UnsupportedValueChip /> : <UnsupportedValue />;
     }
@@ -627,11 +747,9 @@ const renderPrimitiveValue = (value: any, asChip: boolean) => {
  * @returns keep url without keep: prefix
  */
 const getKeepUrl = (file: File | Directory, pdh?: string): string => {
-    const isKeepUrl = file.location?.startsWith('keep:') || false;
-    const keepUrl = isKeepUrl ?
-        file.location?.replace('keep:', '') :
-        pdh ? `${pdh}/${file.location}` : file.location;
-    return keepUrl || '';
+    const isKeepUrl = file.location?.startsWith("keep:") || false;
+    const keepUrl = isKeepUrl ? file.location?.replace("keep:", "") : pdh ? `${pdh}/${file.location}` : file.location;
+    return keepUrl || "";
 };
 
 interface KeepUrlProps {
@@ -642,47 +760,71 @@ interface KeepUrlProps {
 
 const getResourcePdhUrl = (res: File | Directory, pdh?: string): string => {
     const keepUrl = getKeepUrl(res, pdh);
-    return keepUrl ? keepUrl.split('/').slice(0, 1)[0] : '';
+    return keepUrl ? keepUrl.split("/").slice(0, 1)[0] : "";
 };
 
 const KeepUrlBase = withStyles(styles)(({ auth, res, pdh, classes }: KeepUrlProps & WithStyles<CssRules>) => {
     const pdhUrl = getResourcePdhUrl(res, pdh);
     // Passing a pdh always returns a relative wb2 collection url
     const pdhWbPath = getNavUrl(pdhUrl, auth);
-    return pdhUrl && pdhWbPath ?
-        <Tooltip title={"View collection in Workbench"}><RouterLink to={pdhWbPath} className={classes.keepLink}>{pdhUrl}</RouterLink></Tooltip> :
-        <></>;
+    return pdhUrl && pdhWbPath ? (
+        <Tooltip title={"View collection in Workbench"}>
+            <RouterLink
+                to={pdhWbPath}
+                className={classes.keepLink}>
+                {pdhUrl}
+            </RouterLink>
+        </Tooltip>
+    ) : (
+        <></>
+    );
 });
 
 const KeepUrlPath = withStyles(styles)(({ auth, res, pdh, classes }: KeepUrlProps & WithStyles<CssRules>) => {
     const keepUrl = getKeepUrl(res, pdh);
-    const keepUrlParts = keepUrl ? keepUrl.split('/') : [];
-    const keepUrlPath = keepUrlParts.length > 1 ? keepUrlParts.slice(1).join('/') : '';
+    const keepUrlParts = keepUrl ? keepUrl.split("/") : [];
+    const keepUrlPath = keepUrlParts.length > 1 ? keepUrlParts.slice(1).join("/") : "";
 
     const keepUrlPathNav = getKeepNavUrl(auth, res, pdh);
-    return keepUrlPathNav ?
-        <Tooltip title={"View in keep-web"}><a className={classes.keepLink} href={keepUrlPathNav} target="_blank" rel="noopener noreferrer">{keepUrlPath || '/'}</a></Tooltip> :
-        <EmptyValue />;
+    return keepUrlPathNav ? (
+        <Tooltip title={"View in keep-web"}>
+            <a
+                className={classes.keepLink}
+                href={keepUrlPathNav}
+                target="_blank"
+                rel="noopener noreferrer">
+                {keepUrlPath || "/"}
+            </a>
+        </Tooltip>
+    ) : (
+        <EmptyValue />
+    );
 });
 
 const getKeepNavUrl = (auth: AuthState, file: File | Directory, pdh?: string): string => {
     let keepUrl = getKeepUrl(file, pdh);
-    return (getInlineFileUrl(`${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`, auth.config.keepWebServiceUrl, auth.config.keepWebInlineServiceUrl));
+    return getInlineFileUrl(
+        `${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`,
+        auth.config.keepWebServiceUrl,
+        auth.config.keepWebInlineServiceUrl
+    );
 };
 
 const getImageUrl = (auth: AuthState, file: File, pdh?: string): string => {
     const keepUrl = getKeepUrl(file, pdh);
-    return getInlineFileUrl(`${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`, auth.config.keepWebServiceUrl, auth.config.keepWebInlineServiceUrl);
+    return getInlineFileUrl(
+        `${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`,
+        auth.config.keepWebServiceUrl,
+        auth.config.keepWebInlineServiceUrl
+    );
 };
 
 const isFileImage = (basename?: string): boolean => {
-    return basename ? (mime.getType(basename) || "").startsWith('image/') : false;
+    return basename ? (mime.getType(basename) || "").startsWith("image/") : false;
 };
 
-const isFileUrl = (location?: string): boolean => (
-    !!location && !KEEP_URL_REGEX.exec(location) &&
-    (location.startsWith("http://") || location.startsWith("https://"))
-);
+const isFileUrl = (location?: string): boolean =>
+    !!location && !KEEP_URL_REGEX.exec(location) && (location.startsWith("http://") || location.startsWith("https://"));
 
 const normalizeDirectoryLocation = (directory: Directory): Directory => {
     if (!directory.location) {
@@ -690,55 +832,91 @@ const normalizeDirectoryLocation = (directory: Directory): Directory => {
     }
     return {
         ...directory,
-        location: (directory.location || '').endsWith('/') ? directory.location : directory.location + '/',
+        location: (directory.location || "").endsWith("/") ? directory.location : directory.location + "/",
     };
 };
 
 const directoryToProcessIOValue = (directory: Directory, auth: AuthState, pdh?: string): ProcessIOValue => {
-    if (isExternalValue(directory)) { return { display: <UnsupportedValue /> } }
+    if (isExternalValue(directory)) {
+        return { display: <UnsupportedValue /> };
+    }
 
     const normalizedDirectory = normalizeDirectoryLocation(directory);
     return {
-        display: <KeepUrlPath auth={auth} res={normalizedDirectory} pdh={pdh} />,
-        collection: <KeepUrlBase auth={auth} res={normalizedDirectory} pdh={pdh} />,
+        display: (
+            <KeepUrlPath
+                auth={auth}
+                res={normalizedDirectory}
+                pdh={pdh}
+            />
+        ),
+        collection: (
+            <KeepUrlBase
+                auth={auth}
+                res={normalizedDirectory}
+                pdh={pdh}
+            />
+        ),
     };
 };
 
 const fileToProcessIOValue = (file: File, secondary: boolean, auth: AuthState, pdh: string | undefined, mainFilePdh: string): ProcessIOValue => {
-    if (isExternalValue(file)) { return { display: <UnsupportedValue /> } }
+    if (isExternalValue(file)) {
+        return { display: <UnsupportedValue /> };
+    }
 
     if (isFileUrl(file.location)) {
         return {
-            display: <MuiLink href={file.location} target="_blank">{file.location}</MuiLink>,
+            display: (
+                <MuiLink
+                    href={file.location}
+                    target="_blank">
+                    {file.location}
+                </MuiLink>
+            ),
             secondary,
         };
     }
 
     const resourcePdh = getResourcePdhUrl(file, pdh);
     return {
-        display: <KeepUrlPath auth={auth} res={file} pdh={pdh} />,
+        display: (
+            <KeepUrlPath
+                auth={auth}
+                res={file}
+                pdh={pdh}
+            />
+        ),
         secondary,
         imageUrl: isFileImage(file.basename) ? getImageUrl(auth, file, pdh) : undefined,
-        collection: (resourcePdh !== mainFilePdh) ? <KeepUrlBase auth={auth} res={file} pdh={pdh} /> : <></>,
-    }
+        collection:
+            resourcePdh !== mainFilePdh ? (
+                <KeepUrlBase
+                    auth={auth}
+                    res={file}
+                    pdh={pdh}
+                />
+            ) : (
+                <></>
+            ),
+    };
 };
 
-const isExternalValue = (val: any) =>
-    Object.keys(val).includes('$import') ||
-    Object.keys(val).includes('$include')
+const isExternalValue = (val: any) => Object.keys(val).includes("$import") || Object.keys(val).includes("$include");
 
-export const EmptyValue = withStyles(styles)(
-    ({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>No value</span>
-);
+export const EmptyValue = withStyles(styles)(({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>No value</span>);
 
-const UnsupportedValue = withStyles(styles)(
-    ({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>Cannot display value</span>
-);
+const UnsupportedValue = withStyles(styles)(({ classes }: WithStyles<CssRules>) => <span className={classes.emptyValue}>Cannot display value</span>);
 
-const UnsupportedValueChip = withStyles(styles)(
-    ({ classes }: WithStyles<CssRules>) => <Chip icon={<InfoIcon />} label={"Cannot display value"} />
-);
+const UnsupportedValueChip = withStyles(styles)(({ classes }: WithStyles<CssRules>) => (
+    <Chip
+        icon={<InfoIcon />}
+        label={"Cannot display value"}
+    />
+));
 
-const ImagePlaceholder = withStyles(styles)(
-    ({ classes }: WithStyles<CssRules>) => <span className={classes.imagePlaceholder}><ImageIcon /></span>
-);
+const ImagePlaceholder = withStyles(styles)(({ classes }: WithStyles<CssRules>) => (
+    <span className={classes.imagePlaceholder}>
+        <ImageIcon />
+    </span>
+));
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index d99c62ec..7889185e 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -2,34 +2,35 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
-import { Grid, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
-import { DefaultView } from 'components/default-view/default-view';
-import { ProcessIcon } from 'components/icon/icon';
-import { Process } from 'store/processes/process';
-import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
-import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
-import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
-import { ArvadosTheme } from 'common/custom-theme';
-import { ProcessDetailsCard } from './process-details-card';
-import { ProcessIOCard, ProcessIOCardType, ProcessIOParameter } from './process-io-card';
-import { ProcessResourceCard } from './process-resource-card';
-import { getProcessPanelLogs, ProcessLogsPanel } from 'store/process-logs-panel/process-logs-panel';
-import { ProcessLogsCard } from './process-log-card';
-import { FilterOption } from 'views/process-panel/process-log-form';
-import { getInputCollectionMounts } from 'store/processes/processes-actions';
-import { WorkflowInputsData } from 'models/workflow';
-import { CommandOutputParameter } from 'cwlts/mappings/v1.0/CommandOutputParameter';
-import { AuthState } from 'store/auth/auth-reducer';
-import { ProcessCmdCard } from './process-cmd-card';
-import { ContainerRequestResource } from 'models/container-request';
-import { OutputDetails, NodeInstanceType } from 'store/process-panel/process-panel';
+import React, { useRef } from "react";
+import { Grid, StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core";
+import { DefaultView } from "components/default-view/default-view";
+import { ProcessIcon } from "components/icon/icon";
+import { Process } from "store/processes/process";
+import { SubprocessPanel } from "views/subprocess-panel/subprocess-panel";
+import { SubprocessFilterDataProps } from "components/subprocess-filter/subprocess-filter";
+import { MPVContainer, MPVPanelContent, MPVPanelState } from "components/multi-panel-view/multi-panel-view";
+import { ArvadosTheme } from "common/custom-theme";
+import { ProcessDetailsCard } from "./process-details-card";
+import { ProcessIOCard, ProcessIOCardType, ProcessIOParameter } from "./process-io-card";
+import { ProcessResourceCard } from "./process-resource-card";
+import { getProcessPanelLogs, ProcessLogsPanel } from "store/process-logs-panel/process-logs-panel";
+import { ProcessLogsCard } from "./process-log-card";
+import { FilterOption } from "views/process-panel/process-log-form";
+import { getInputCollectionMounts } from "store/processes/processes-actions";
+import { WorkflowInputsData } from "models/workflow";
+import { CommandOutputParameter } from "cwlts/mappings/v1.0/CommandOutputParameter";
+import { AuthState } from "store/auth/auth-reducer";
+import { ProcessCmdCard } from "./process-cmd-card";
+import { ContainerRequestResource } from "models/container-request";
+import { OutputDetails, NodeInstanceType } from "store/process-panel/process-panel";
+import { ResourcesState } from "store/resources/resources";
 
-type CssRules = 'root';
+type CssRules = "root";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
-        width: '100%',
+        width: "100%",
     },
 });
 
@@ -93,7 +94,6 @@ export const ProcessPanelRoot = withStyles(styles)(
         updateOutputParams,
         ...props
     }: ProcessPanelRootProps) => {
-
         const outputUuid = process?.containerRequest.outputUuid;
         const containerRequest = process?.containerRequest;
         const inputMounts = getInputCollectionMounts(process?.containerRequest);
@@ -117,9 +117,18 @@ export const ProcessPanelRoot = withStyles(styles)(
             updateOutputParams();
         }, [outputRaw, outputDefinitions, updateOutputParams]);
 
-        return process
-            ? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData} justify-content="flex-start" direction="column" wrap="nowrap">
-                <MPVPanelContent forwardProps xs="auto" data-cy="process-details">
+        return process ? (
+            <MPVContainer
+                className={props.classes.root}
+                spacing={8}
+                panelStates={panelsData}
+                justify-content="flex-start"
+                direction="column"
+                wrap="nowrap">
+                <MPVPanelContent
+                    forwardProps
+                    xs="auto"
+                    data-cy="process-details">
                     <ProcessDetailsCard
                         process={process}
                         onContextMenu={event => props.onContextMenu(event, process)}
@@ -128,28 +137,38 @@ export const ProcessPanelRoot = withStyles(styles)(
                         resumeOnHoldWorkflow={props.resumeOnHoldWorkflow}
                     />
                 </MPVPanelContent>
-                <MPVPanelContent forwardProps xs="auto" data-cy="process-cmd">
+                <MPVPanelContent
+                    forwardProps
+                    xs="auto"
+                    data-cy="process-cmd">
                     <ProcessCmdCard
                         onCopy={props.onCopyToClipboard}
-                        process={process} />
+                        process={process}
+                    />
                 </MPVPanelContent>
-                <MPVPanelContent forwardProps xs minHeight='50%' data-cy="process-logs">
+                <MPVPanelContent
+                    forwardProps
+                    xs
+                    minHeight="50%"
+                    data-cy="process-logs">
                     <ProcessLogsCard
                         onCopy={props.onCopyToClipboard}
                         process={process}
                         lines={getProcessPanelLogs(processLogsPanel)}
                         selectedFilter={{
                             label: processLogsPanel.selectedFilter,
-                            value: processLogsPanel.selectedFilter
+                            value: processLogsPanel.selectedFilter,
                         }}
-                        filters={processLogsPanel.filters.map(
-                            filter => ({ label: filter, value: filter })
-                        )}
+                        filters={processLogsPanel.filters.map(filter => ({ label: filter, value: filter }))}
                         onLogFilterChange={props.onLogFilterChange}
                         navigateToLog={props.navigateToLog}
                     />
                 </MPVPanelContent>
-                <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-inputs">
+                <MPVPanelContent
+                    forwardProps
+                    xs
+                    maxHeight="50%"
+                    data-cy="process-inputs">
                     <ProcessIOCard
                         label={ProcessIOCardType.INPUT}
                         process={process}
@@ -158,7 +177,11 @@ export const ProcessPanelRoot = withStyles(styles)(
                         mounts={inputMounts}
                     />
                 </MPVPanelContent>
-                <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-outputs">
+                <MPVPanelContent
+                    forwardProps
+                    xs
+                    maxHeight="50%"
+                    data-cy="process-outputs">
                     <ProcessIOCard
                         label={ProcessIOCardType.OUTPUT}
                         process={process}
@@ -167,23 +190,34 @@ export const ProcessPanelRoot = withStyles(styles)(
                         outputUuid={outputUuid || ""}
                     />
                 </MPVPanelContent>
-                <MPVPanelContent forwardProps xs data-cy="process-resources">
+                <MPVPanelContent
+                    forwardProps
+                    xs
+                    data-cy="process-resources">
                     <ProcessResourceCard
                         process={process}
                         nodeInfo={nodeInfo}
                     />
                 </MPVPanelContent>
-                <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">
+                <MPVPanelContent
+                    forwardProps
+                    xs
+                    maxHeight="50%"
+                    data-cy="process-children">
                     <SubprocessPanel />
                 </MPVPanelContent>
             </MPVContainer>
-            : <Grid container
-                alignItems='center'
-                justify='center'
-                style={{ minHeight: '100%' }}>
+        ) : (
+            <Grid
+                container
+                alignItems="center"
+                justify="center"
+                style={{ minHeight: "100%" }}>
                 <DefaultView
                     icon={ProcessIcon}
-                    messages={['Process not found']} />
-            </Grid>;
+                    messages={["Process not found"]}
+                />
+            </Grid>
+        );
     }
 );
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 9dcb72cf..afad4832 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -2,35 +2,28 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { RootState } from 'store/store';
-import { connect } from 'react-redux';
-import { getProcess, getSubprocesses, Process, getProcessStatus } from 'store/processes/process';
-import { Dispatch } from 'redux';
-import { openProcessContextMenu } from 'store/context-menu/context-menu-actions';
-import {
-    ProcessPanelRootDataProps,
-    ProcessPanelRootActionProps,
-    ProcessPanelRoot
-} from './process-panel-root';
-import {
-    getProcessPanelCurrentUuid,
-    ProcessPanel as ProcessPanelState
-} from 'store/process-panel/process-panel';
-import { groupBy } from 'lodash';
+import { RootState } from "store/store";
+import { connect } from "react-redux";
+import { getProcess, getSubprocesses, Process, getProcessStatus } from "store/processes/process";
+import { Dispatch } from "redux";
+import { openProcessContextMenu } from "store/context-menu/context-menu-actions";
+import { ProcessPanelRootDataProps, ProcessPanelRootActionProps, ProcessPanelRoot } from "./process-panel-root";
+import { getProcessPanelCurrentUuid, ProcessPanel as ProcessPanelState } from "store/process-panel/process-panel";
+import { groupBy } from "lodash";
 import {
     loadInputs,
     loadOutputDefinitions,
     loadOutputs,
     toggleProcessPanelFilter,
     updateOutputParams,
-    loadNodeJson
-} from 'store/process-panel/process-panel-actions';
-import { cancelRunningWorkflow, resumeOnHoldWorkflow, startWorkflow } from 'store/processes/processes-actions';
-import { navigateToLogCollection, setProcessLogsPanelFilter } from 'store/process-logs-panel/process-logs-panel-actions';
-import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
+    loadNodeJson,
+} from "store/process-panel/process-panel-actions";
+import { cancelRunningWorkflow, resumeOnHoldWorkflow, startWorkflow } from "store/processes/processes-actions";
+import { navigateToLogCollection, setProcessLogsPanelFilter } from "store/process-logs-panel/process-logs-panel-actions";
+import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions";
 
 const mapStateToProps = ({ router, auth, resources, processPanel, processLogsPanel }: RootState): ProcessPanelRootDataProps => {
-    const uuid = getProcessPanelCurrentUuid(router) || '';
+    const uuid = getProcessPanelCurrentUuid(router) || "";
     const subprocesses = getSubprocesses(uuid)(resources);
     return {
         process: getProcess(uuid)(resources),
@@ -49,11 +42,13 @@ const mapStateToProps = ({ router, auth, resources, processPanel, processLogsPan
 
 const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps => ({
     onCopyToClipboard: (message: string) => {
-        dispatch<any>(snackbarActions.OPEN_SNACKBAR({
-            message,
-            hideDuration: 2000,
-            kind: SnackbarKind.SUCCESS,
-        }));
+        dispatch<any>(
+            snackbarActions.OPEN_SNACKBAR({
+                message,
+                hideDuration: 2000,
+                kind: SnackbarKind.SUCCESS,
+            })
+        );
     },
     onContextMenu: (event, process) => {
         dispatch<any>(openProcessContextMenu(event, process));
@@ -61,28 +56,26 @@ const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps =>
     onToggle: status => {
         dispatch<any>(toggleProcessPanelFilter(status));
     },
-    cancelProcess: (uuid) => dispatch<any>(cancelRunningWorkflow(uuid)),
-    startProcess: (uuid) => dispatch<any>(startWorkflow(uuid)),
-    resumeOnHoldWorkflow: (uuid) => dispatch<any>(resumeOnHoldWorkflow(uuid)),
-    onLogFilterChange: (filter) => dispatch(setProcessLogsPanelFilter(filter.value)),
-    navigateToLog: (uuid) => dispatch<any>(navigateToLogCollection(uuid)),
-    loadInputs: (containerRequest) => dispatch<any>(loadInputs(containerRequest)),
-    loadOutputs: (containerRequest) => dispatch<any>(loadOutputs(containerRequest)),
-    loadOutputDefinitions: (containerRequest) => dispatch<any>(loadOutputDefinitions(containerRequest)),
+    cancelProcess: uuid => dispatch<any>(cancelRunningWorkflow(uuid)),
+    startProcess: uuid => dispatch<any>(startWorkflow(uuid)),
+    resumeOnHoldWorkflow: uuid => dispatch<any>(resumeOnHoldWorkflow(uuid)),
+    onLogFilterChange: filter => dispatch(setProcessLogsPanelFilter(filter.value)),
+    navigateToLog: uuid => dispatch<any>(navigateToLogCollection(uuid)),
+    loadInputs: containerRequest => dispatch<any>(loadInputs(containerRequest)),
+    loadOutputs: containerRequest => dispatch<any>(loadOutputs(containerRequest)),
+    loadOutputDefinitions: containerRequest => dispatch<any>(loadOutputDefinitions(containerRequest)),
     updateOutputParams: () => dispatch<any>(updateOutputParams()),
-    loadNodeJson: (containerRequest) => dispatch<any>(loadNodeJson(containerRequest)),
+    loadNodeJson: containerRequest => dispatch<any>(loadNodeJson(containerRequest)),
 });
 
 const getFilters = (processPanel: ProcessPanelState, processes: Process[]) => {
     const grouppedProcesses = groupBy(processes, getProcessStatus);
-    return Object
-        .keys(processPanel.filters)
-        .map(filter => ({
-            label: filter,
-            value: (grouppedProcesses[filter] || []).length,
-            checked: processPanel.filters[filter],
-            key: filter,
-        }));
+    return Object.keys(processPanel.filters).map(filter => ({
+        label: filter,
+        value: (grouppedProcesses[filter] || []).length,
+        checked: processPanel.filters[filter],
+        key: filter,
+    }));
 };
 
 export const ProcessPanel = connect(mapStateToProps, mapDispatchToProps)(ProcessPanelRoot);

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list