fix(vscode): Remove isHidden warning from KaotoEditor component

KaotoIO · Jun 28, 2024 · 4dc369a · 4dc369a
1 parent f4bf6d0
commit 4dc369a
Showing 1 changed file with 96 additions and 74 deletions.
diff --git a/packages/ui/src/multiplying-architecture/KaotoEditor.tsx b/packages/ui/src/multiplying-architecture/KaotoEditor.tsx
@@ -1,8 +1,8 @@
 import { Icon, Tab, TabTitleIcon, TabTitleText, Tabs, TabsProps } from '@patternfly/react-core';
 import { CodeIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { useContext, useState } from 'react';
-import camelIcon from '../assets/logo-kaoto.svg';
+import { useContext, useMemo, useRef, useState } from 'react';
 import bean from '../assets/eip/bean.png';
+import camelIcon from '../assets/logo-kaoto.svg';
 import { SourceSchemaType } from '../models/camel/source-schema-type';
 import { BeansPage } from '../pages/Beans/BeansPage';
 import { MetadataPage } from '../pages/Metadata/MetadataPage';
@@ -33,90 +33,112 @@ export const KaotoEditor = () => {
   };
   const entitiesContext = useContext(EntitiesContext);
   const resource = entitiesContext?.camelResource;
+  const inset = useRef<TabsProps['inset']>({ default: 'insetSm' });
+
+  const availableTabs = useMemo(() => {
+    if (!resource) {
+      return {
+        design: false,
+        beans: false,
+        metadata: false,
+        errorHandler: false,
+      };
+    }
 
-  if (!resource) {
-    return null;
-  }
+    return {
+      design: SCHEMA_TABS[resource.getType()].indexOf(TabList.Design) >= 0,
+      beans: SCHEMA_TABS[resource.getType()].indexOf(TabList.Beans) >= 0,
+      metadata: SCHEMA_TABS[resource.getType()].indexOf(TabList.Metadata) >= 0,
+      errorHandler: SCHEMA_TABS[resource.getType()].indexOf(TabList.ErrorHandler) >= 0,
+    };
+  }, [resource]);
 
   return (
     <div className="shell" data-envelope-context="vscode">
       <Tabs
-        inset={{ default: 'insetSm' }}
+        inset={inset.current}
         isBox
         unmountOnExit
         activeKey={activeTabKey}
         onSelect={handleTabClick as TabsProps['onSelect']}
         aria-label="Tabs in the Kaoto editor"
         role="region"
       >
-        <Tab
-          isHidden={SCHEMA_TABS[resource.getType()].indexOf(TabList.Design) === -1}
-          eventKey={TabList.Design}
-          className="shell__tab-content_design-canvas"
-          title={
-            <>
-              <TabTitleIcon>
-                <Icon>
-                  <img src={camelIcon} alt="Camel icon" />
-                </Icon>
-              </TabTitleIcon>
-              <TabTitleText>Design</TabTitleText>
-            </>
-          }
-          aria-label="Design canvas"
-        >
-          <DesignTab />
-        </Tab>
-        <Tab
-          eventKey={TabList.Beans}
-          isHidden={SCHEMA_TABS[resource.getType()].indexOf(TabList.Beans) === -1}
-          className="shell__tab-content"
-          title={
-            <>
-              <TabTitleIcon>
-                <Icon>
-                  <img src={bean} />
-                </Icon>
-              </TabTitleIcon>
-              <TabTitleText>Beans</TabTitleText>
-            </>
-          }
-          aria-label="Beans editor"
-        >
-          <BeansPage />
-        </Tab>
-        <Tab
-          eventKey={TabList.Metadata}
-          isHidden={SCHEMA_TABS[resource.getType()].indexOf(TabList.Metadata) === -1}
-          className="shell__tab-content"
-          title={
-            <>
-              <TabTitleIcon>
-                <CodeIcon />
-              </TabTitleIcon>
-              <TabTitleText>Metadata</TabTitleText>
-            </>
-          }
-          aria-label="Metadata editor"
-        >
-          <MetadataPage />
-        </Tab>
-        <Tab
-          eventKey={TabList.ErrorHandler}
-          isHidden={SCHEMA_TABS[resource.getType()].indexOf(TabList.ErrorHandler) === -1}
-          className="shell__tab-content"
-          title={
-            <>
-              <TabTitleIcon>
-                <ExclamationCircleIcon />
-              </TabTitleIcon>
-              <TabTitleText>Error Handler</TabTitleText>
-            </>
-          }
-          aria-label="Error Handler editor"
-        >
-          <PipeErrorHandlerPage />
-        </Tab>
+        {availableTabs.design && (
+          <Tab
+            eventKey={TabList.Design}
+            className="shell__tab-content_design-canvas"
+            title={
+              <>
+                <TabTitleIcon>
+                  <Icon>
+                    <img src={camelIcon} alt="Camel icon" />
+                  </Icon>
+                </TabTitleIcon>
+                <TabTitleText>Design</TabTitleText>
+              </>
+            }
+            aria-label="Design canvas"
+          >
+            <DesignTab />
+          </Tab>
+        )}
+
+        {availableTabs.beans && (
+          <Tab
+            eventKey={TabList.Beans}
+            className="shell__tab-content"
+            title={
+              <>
+                <TabTitleIcon>
+                  <Icon>
+                    <img src={bean} />
+                  </Icon>
+                </TabTitleIcon>
+                <TabTitleText>Beans</TabTitleText>
+              </>
+            }
+            aria-label="Beans editor"
+          >
+            <BeansPage />
+          </Tab>
+        )}
+
+        {availableTabs.metadata && (
+          <Tab
+            eventKey={TabList.Metadata}
+            className="shell__tab-content"
+            title={
+              <>
+                <TabTitleIcon>
+                  <CodeIcon />
+                </TabTitleIcon>
+                <TabTitleText>Metadata</TabTitleText>
+              </>
+            }
+            aria-label="Metadata editor"
+          >
+            <MetadataPage />
+          </Tab>
+        )}
+
+        {availableTabs.errorHandler && (
+          <Tab
+            eventKey={TabList.ErrorHandler}
+            className="shell__tab-content"
+            title={
+              <>
+                <TabTitleIcon>
+                  <ExclamationCircleIcon />
+                </TabTitleIcon>
+                <TabTitleText>Error Handler</TabTitleText>
+              </>
+            }
+            aria-label="Error Handler editor"
+          >
+            <PipeErrorHandlerPage />
+          </Tab>
+        )}
       </Tabs>
     </div>
   );