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 5c16096ba28591b58422be7768f094be490e3b08..fd192d1362fb4b17d98e2522ae9e243cf8b99737 100644 (file)
--- 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 045e5cfa4a3fdd06bc3133e89582a0d5ecfbc00b..e2854bddbc1784dd3693bc56652807a139237633 100644 (file)
--- 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}