From: Stephen Smith <stephen@curii.com>
Date: Tue, 14 May 2024 15:17:25 +0000 (-0400)
Subject: 21225: Fix capped maxWidth preventing full width with negative margins on MPV
X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/10e1abd9cfb8f5cc11659c7961b9d83cf5b9a8b8?ds=sidebyside

21225: Fix capped maxWidth preventing full width with negative margins on MPV

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

diff --git a/services/workbench2/src/components/multi-panel-view/multi-panel-view.tsx b/services/workbench2/src/components/multi-panel-view/multi-panel-view.tsx
index 72903d7ef5..69e2b7015e 100644
--- a/services/workbench2/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/services/workbench2/src/components/multi-panel-view/multi-panel-view.tsx
@@ -38,6 +38,7 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
     content: {
         overflow: 'auto',
+        maxWidth: 'initial',
     },
     tabsWrapper: {
         width: '100%',
diff --git a/services/workbench2/src/views/collection-panel/collection-panel.tsx b/services/workbench2/src/views/collection-panel/collection-panel.tsx
index 2de273c447..5f15ba8fcd 100644
--- a/services/workbench2/src/views/collection-panel/collection-panel.tsx
+++ b/services/workbench2/src/views/collection-panel/collection-panel.tsx
@@ -39,7 +39,7 @@ import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-p
 import { resourceIsFrozen } from 'common/frozen-resources';
 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
 
-type CssRules = 'root'
+type CssRules =
     | 'button'
     | 'infoCard'
     | 'propertiesCard'
@@ -59,9 +59,6 @@ type CssRules = 'root'
     | 'content';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-        width: '100%',
-    },
     button: {
         cursor: 'pointer'
     },
@@ -171,7 +168,7 @@ export const CollectionPanel = withStyles(styles)(connect(
                     { name: "Files" },
                 ];
                 return item
-                    ? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
+                    ? <MPVContainer spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
                         <MPVPanelContent xs="auto" data-cy='collection-info-panel'>
                             <Card className={classes.infoCard}>
                                 <CardHeader
diff --git a/services/workbench2/src/views/process-panel/process-panel-root.tsx b/services/workbench2/src/views/process-panel/process-panel-root.tsx
index c8e93aa3ae..b03490ae72 100644
--- a/services/workbench2/src/views/process-panel/process-panel-root.tsx
+++ b/services/workbench2/src/views/process-panel/process-panel-root.tsx
@@ -25,14 +25,6 @@ import { ContainerRequestResource } from "models/container-request";
 import { OutputDetails, NodeInstanceType } from "store/process-panel/process-panel";
 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
 
-type CssRules = "root";
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-        width: "100%",
-    },
-});
-
 export interface ProcessPanelRootDataProps {
     process?: Process;
     subprocesses: Array<Process>;
@@ -65,7 +57,7 @@ export interface ProcessPanelRootActionProps {
     pollProcessLogs: (processUuid: string) => Promise<void>;
 }
 
-export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
+export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
 
 const panelsData: MPVPanelState[] = [
     { name: "Details" },
@@ -77,149 +69,146 @@ const panelsData: MPVPanelState[] = [
     { name: "Resources" },
 ];
 
-export const ProcessPanelRoot = withStyles(styles)(
-    ({
-        process,
-        auth,
-        processLogsPanel,
-        inputRaw,
-        inputParams,
-        outputData,
-        outputDefinitions,
-        outputParams,
-        nodeInfo,
-        usageReport,
-        loadInputs,
-        loadOutputs,
-        loadNodeJson,
-        loadOutputDefinitions,
-        updateOutputParams,
-        ...props
-    }: ProcessPanelRootProps) => {
-        const outputUuid = process?.containerRequest.outputUuid;
-        const containerRequest = process?.containerRequest;
-        const inputMounts = getInputCollectionMounts(process?.containerRequest);
+export const ProcessPanelRoot = ({
+    process,
+    auth,
+    processLogsPanel,
+    inputRaw,
+    inputParams,
+    outputData,
+    outputDefinitions,
+    outputParams,
+    nodeInfo,
+    usageReport,
+    loadInputs,
+    loadOutputs,
+    loadNodeJson,
+    loadOutputDefinitions,
+    updateOutputParams,
+    ...props
+}: ProcessPanelRootProps) => {
+    const outputUuid = process?.containerRequest.outputUuid;
+    const containerRequest = process?.containerRequest;
+    const inputMounts = getInputCollectionMounts(process?.containerRequest);
 
-        React.useEffect(() => {
-            if (containerRequest) {
-                // Load inputs from mounts or props
-                loadInputs(containerRequest);
-                // Fetch raw output (loads from props or keep)
-                loadOutputs(containerRequest);
-                // Loads output definitions from mounts into store
-                loadOutputDefinitions(containerRequest);
-                // load the assigned instance type from node.json in
-                // the log collection
-                loadNodeJson(containerRequest);
-            }
-        }, [containerRequest, loadInputs, loadOutputs, loadOutputDefinitions, loadNodeJson]);
+    React.useEffect(() => {
+        if (containerRequest) {
+            // Load inputs from mounts or props
+            loadInputs(containerRequest);
+            // Fetch raw output (loads from props or keep)
+            loadOutputs(containerRequest);
+            // Loads output definitions from mounts into store
+            loadOutputDefinitions(containerRequest);
+            // load the assigned instance type from node.json in
+            // the log collection
+            loadNodeJson(containerRequest);
+        }
+    }, [containerRequest, loadInputs, loadOutputs, loadOutputDefinitions, loadNodeJson]);
 
-        const maxHeight = "100%";
+    const maxHeight = "100%";
 
-        // Trigger processing output params when raw or definitions change
-        React.useEffect(() => {
-            updateOutputParams();
-        }, [outputData, outputDefinitions, updateOutputParams]);
+    // Trigger processing output params when raw or definitions change
+    React.useEffect(() => {
+        updateOutputParams();
+    }, [outputData, 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">
-                    <ProcessDetailsCard
-                        process={process}
-                        onContextMenu={event => props.onContextMenu(event, process)}
-                        cancelProcess={props.cancelProcess}
-                        startProcess={props.startProcess}
-                        resumeOnHoldWorkflow={props.resumeOnHoldWorkflow}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    minHeight={maxHeight}
-                    maxHeight={maxHeight}
-                    data-cy="process-logs">
-                    <ProcessLogsCard
-                        onCopy={props.onCopyToClipboard}
-                        process={process}
-                        lines={getProcessPanelLogs(processLogsPanel)}
-                        selectedFilter={{
-                            label: processLogsPanel.selectedFilter,
-                            value: processLogsPanel.selectedFilter,
-                        }}
-                        filters={processLogsPanel.filters.map(filter => ({ label: filter, value: filter }))}
-                        onLogFilterChange={props.onLogFilterChange}
-                        navigateToLog={props.navigateToLog}
-                        pollProcessLogs={props.pollProcessLogs}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    maxHeight={maxHeight}
-                    data-cy="process-children">
-                    <SubprocessPanel process={process} />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    maxHeight={maxHeight}
-                    data-cy="process-outputs">
-                    <ProcessIOCard
-                        label={ProcessIOCardType.OUTPUT}
-                        process={process}
-                        params={outputParams}
-                        raw={outputData?.raw}
-                        outputUuid={outputUuid || ""}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    maxHeight={maxHeight}
-                    data-cy="process-inputs">
-                    <ProcessIOCard
-                        label={ProcessIOCardType.INPUT}
-                        process={process}
-                        params={inputParams}
-                        raw={inputRaw}
-                        mounts={inputMounts}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs="auto"
-                    maxHeight={"50%"}
-                    data-cy="process-cmd">
-                    <ProcessCmdCard
-                        onCopy={props.onCopyToClipboard}
-                        process={process}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    data-cy="process-resources">
-                    <ProcessResourceCard
-                        process={process}
-                        nodeInfo={nodeInfo}
-                        usageReport={usageReport}
-                    />
-                </MPVPanelContent>
-            </MPVContainer>
-        ) : (
-            <NotFoundView
-                icon={ProcessIcon}
-                messages={["Process not found"]}
-            />
-        );
-    }
-);
+    return process ? (
+        <MPVContainer
+            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)}
+                    cancelProcess={props.cancelProcess}
+                    startProcess={props.startProcess}
+                    resumeOnHoldWorkflow={props.resumeOnHoldWorkflow}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                minHeight={maxHeight}
+                maxHeight={maxHeight}
+                data-cy="process-logs">
+                <ProcessLogsCard
+                    onCopy={props.onCopyToClipboard}
+                    process={process}
+                    lines={getProcessPanelLogs(processLogsPanel)}
+                    selectedFilter={{
+                        label: processLogsPanel.selectedFilter,
+                        value: processLogsPanel.selectedFilter,
+                    }}
+                    filters={processLogsPanel.filters.map(filter => ({ label: filter, value: filter }))}
+                    onLogFilterChange={props.onLogFilterChange}
+                    navigateToLog={props.navigateToLog}
+                    pollProcessLogs={props.pollProcessLogs}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                maxHeight={maxHeight}
+                data-cy="process-children">
+                <SubprocessPanel process={process} />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                maxHeight={maxHeight}
+                data-cy="process-outputs">
+                <ProcessIOCard
+                    label={ProcessIOCardType.OUTPUT}
+                    process={process}
+                    params={outputParams}
+                    raw={outputData?.raw}
+                    outputUuid={outputUuid || ""}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                maxHeight={maxHeight}
+                data-cy="process-inputs">
+                <ProcessIOCard
+                    label={ProcessIOCardType.INPUT}
+                    process={process}
+                    params={inputParams}
+                    raw={inputRaw}
+                    mounts={inputMounts}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs="auto"
+                maxHeight={"50%"}
+                data-cy="process-cmd">
+                <ProcessCmdCard
+                    onCopy={props.onCopyToClipboard}
+                    process={process}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                data-cy="process-resources">
+                <ProcessResourceCard
+                    process={process}
+                    nodeInfo={nodeInfo}
+                    usageReport={usageReport}
+                />
+            </MPVPanelContent>
+        </MPVContainer>
+    ) : (
+        <NotFoundView
+            icon={ProcessIcon}
+            messages={["Process not found"]}
+        />
+    );
+};
diff --git a/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx b/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
index aa4c1b29d4..d85bef8dac 100644
--- a/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
+++ b/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
@@ -29,7 +29,7 @@ import { ProcessIOCard, ProcessIOCardType } from 'views/process-panel/process-io
 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
 import { WorkflowProcessesPanel } from './workflow-processes-panel';
 
-type CssRules = 'root'
+type CssRules =
     | 'button'
     | 'infoCard'
     | 'propertiesCard'
@@ -49,9 +49,6 @@ type CssRules = 'root'
     | 'content';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-        width: '100%',
-    },
     button: {
         cursor: 'pointer'
     },
@@ -142,7 +139,7 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                     { name: "Definition" },
                 ];
                 return item
-                    ? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
+                    ? <MPVContainer spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
                         <MPVPanelContent xs="auto" data-cy='registered-workflow-info-panel'>
                             <Card className={classes.infoCard}>
                                 <CardHeader