fix(vscode): Remove isHidden warning from KaotoEditor component

igarashitm · Jul 1, 2024 · 06cbd2c · 06cbd2c
1 parent f4bf6d0
commit 06cbd2c
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>
  );