From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 14 Oct 2021 19:16:18 +0000 (-0300)
Subject: 18128: Adds ability to set up initial per-panel visibility.
X-Git-Tag: 2.4.0~25^2~14
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/a65b85dae6c3ec24c686c7ee2cdbdbf0734138bf

18128: Adds ability to set up initial per-panel visibility.

If panelStates isn't defined, the default keeps being "show all panels".
If panelStates is defined, but some panel state isn't included, the default
is to set its initial visibility to false. If it is indeed included but
the optional visibility setting isn't defined, by default the panel will
be shown to avoid having to explicitly set visible:true to all panels.

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.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 5c16096b..fd192d13 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -63,20 +63,26 @@ export const MPVPanelContent = ({doHidePanel, panelName, ...props}: MPVPanelCont
         {React.cloneElement(props.children, { doHidePanel, panelName })}
     </Grid>;
 
-export interface MPVContainerDataProps {
-    panelNames?: string[];
+export interface MPVPanelState {
+    name: string;
+    visible?: boolean;
+}
+interface MPVContainerDataProps {
+    panelStates?: MPVPanelState[];
 }
-
 type MPVContainerProps = MPVContainerDataProps & GridProps;
 
 // Grid container compatible component that also handles panel toggling.
-const MPVContainerComponent = ({children, panelNames, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
+const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
     if (children === undefined || children === null || children === {}) {
         children = [];
     } else if (!isArray(children)) {
         children = [children];
     }
-    const visibility = (children as ReactNodeArray).map(() => true);
+    const visibility = (children as ReactNodeArray).map((_, idx) =>
+        !!!panelStates || // if panelStates wasn't passed, default to all visible panels
+            (panelStates[idx] &&
+                (panelStates[idx].visible || panelStates[idx].visible === undefined)));
     const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
 
     let panels: JSX.Element[] = [];
@@ -94,9 +100,9 @@ const MPVContainerComponent = ({children, panelNames, classes, ...props}: MPVCon
             const toggleIcon = panelVisibility[idx]
                 ? <VisibleIcon className={classNames(classes.buttonIcon)} />
                 : <InvisibleIcon className={classNames(classes.buttonIcon)}/>
-            const panelName = panelNames === undefined
+            const panelName = panelStates === undefined
                 ? `Panel ${idx+1}`
-                : panelNames[idx] || `Panel ${idx+1}`;
+                : (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
             const toggleVariant = panelVisibility[idx]
                 ? "raised"
                 : "flat";
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 045e5cfa..e2854bdd 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -10,7 +10,7 @@ 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 } from 'components/multi-panel-view/multi-panel-view';
+import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
 
 export interface ProcessPanelRootDataProps {
     process?: Process;
@@ -29,9 +29,14 @@ export interface ProcessPanelRootActionProps {
 
 export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
 
+const panelsData: MPVPanelState[] = [
+    {name: "Info"},
+    {name: "Subprocesses"},
+];
+
 export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
     process
-        ? <MPVContainer spacing={8} panelNames={["Info", "Subprocesses"]} alignItems="stretch">
+        ? <MPVContainer spacing={8} panelStates={panelsData} alignItems="stretch">
             <MPVPanelContent sm={12} md={12}>
                 <ProcessInformationCard
                     process={process}