From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 16 Dec 2021 13:17:31 +0000 (-0300)
Subject: 18219: Disables custom props forwarding on MPV components by default.
X-Git-Tag: 2.4.0~21^2~12
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/a6be5a3b336233c9fd28d640402929fe4e309b26

18219: Disables custom props forwarding on MPV components by default.

This is to avoid warning messages like:
Warning: React does not recognize the `panelIlluminated` prop on a DOM element.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---

diff --git a/src/components/multi-panel-view/multi-panel-view.test.tsx b/src/components/multi-panel-view/multi-panel-view.test.tsx
index 6cf13d78..d690e82f 100644
--- a/src/components/multi-panel-view/multi-panel-view.test.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.test.tsx
@@ -10,7 +10,7 @@ import { Button } from "@material-ui/core";
 
 configure({ adapter: new Adapter() });
 
-const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, children, ...rest}) =>
+const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, panelIlluminated, panelRef, children, ...rest}) =>
     <div {...rest}>{children}</div>;
 
 describe('<MPVContainer />', () => {
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index dbb37921..185c3b90 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -64,6 +64,7 @@ interface MPVPanelDataProps {
     panelMaximized?: boolean;
     panelIlluminated?: boolean;
     panelRef?: MutableRefObject<any>;
+    forwardProps?: boolean;
 }
 
 interface MPVPanelActionProps {
@@ -77,7 +78,7 @@ export type MPVPanelProps = MPVPanelDataProps & MPVPanelActionProps;
 type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps;
 
 // Grid item compatible component for layout and MPV props passing
-export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, panelIlluminated, panelRef, ...props}: MPVPanelContentProps) => {
+export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, panelIlluminated, panelRef, forwardProps, ...props}: MPVPanelContentProps) => {
     useEffect(() => {
         if (panelRef && panelRef.current) {
             panelRef.current.scrollIntoView({behavior: 'smooth'});
@@ -87,7 +88,9 @@ export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelM
     return <Grid item {...props}>
         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
         <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
-            {React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })}
+            { forwardProps
+                ? React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })
+                : props.children }
         </Paper>
     </Grid>;
 }