Merge branch '21535-multi-wf-delete'

[arvados.git] / services / workbench2 / src / components / conditional-tabs / conditional-tabs.tsx

diff --git a/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx b/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx
index ff8d517c4e45ef1e50190e666d05a7eadd49e519..248c9c0551f99189029ff11b28dba1bb18777e8e 100644 (file)
--- a/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx
+++ b/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx
@@ -2,14 +2,18 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import { Tabs, Tab } from "@material-ui/core";
 import { TabsProps } from "@material-ui/core/Tabs";
 
+interface ComponentWithHidden {
+    hidden: boolean;
+};
+
 export type TabData = {
     show: boolean;
     label: string;
-    content: ReactNode;
+    content: ReactElement<ComponentWithHidden>;
 };
 
 type ConditionalTabsProps = {
@@ -19,7 +23,6 @@ type ConditionalTabsProps = {
 export const ConditionalTabs = (props: Omit<TabsProps, 'value' | 'onChange'> & ConditionalTabsProps) => {
     const [tabState, setTabState] = useState(0);
     const visibleTabs = props.tabs.filter(tab => tab.show);
-    const activeTab = visibleTabs[tabState];
     const visibleTabNames = visibleTabs.map(tab => tab.label).join();
 
     const handleTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
@@ -39,6 +42,9 @@ export const ConditionalTabs = (props: Omit<TabsProps, 'value' | 'onChange'> & C
             onChange={handleTabChange} >
             {visibleTabs.map(tab => <Tab key={tab.label} label={tab.label} />)}
         </Tabs>
-        {activeTab && activeTab.content}
+
+        {visibleTabs.map((tab, i) => (
+            React.cloneElement(tab.content, {key: i, hidden: i !== tabState})
+        ))}
     </>;
 };