refactor: CB-1094 remove VerticalTabs components

webapp/packages/core-blocks/src/Tabs/TabsContainer/TabsContainer.ts

@@ -28,13 +28,13 @@ implements ITabsContainer<TProps, TOptions> {
   private currentTabId: string | null;
 
   constructor() {
+    this.tabInfoMap = new Map();
+    this.currentTabId = null;
+
     makeObservable<TabsContainer<TProps, TOptions>, 'currentTabId'>(this, {
       tabInfoMap: observable.shallow,
       currentTabId: observable,
     });
-
-    this.tabInfoMap = new Map();
-    this.currentTabId = null;
   }
 
   has(tabId: string): boolean {

webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabHeader.tsx

@@ -1,37 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2021 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
-
-import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming';
-
-import type { ITab } from '../ITab';
-import { Tab } from '../Tab/Tab';
-import { TabIcon } from '../Tab/TabIcon';
-import { TabTitle } from '../Tab/TabTitle';
-import { verticalTabStyles } from './verticalTabStyles';
-
-interface IProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
-  tab: ITab;
-  style: ComponentStyle;
-}
-
-export const VerticalTabHeader = observer<IProps>(function VerticalTabHeader({ tab, style, ...props }) {
-  return styled(useStyles(verticalTabStyles, style))(
-    <Tab
-      tabId={tab.tabId}
-      onOpen={tab.onActivate}
-      onClose={tab.onClose}
-      {...props}
-    >
-      {tab.icon && <TabIcon icon={tab.icon} />}
-      <TabTitle>{tab.title}</TabTitle>
-    </Tab>
-  );
-});

webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx

@@ -1,31 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2021 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
-
-import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming';
-
-import type { ITab } from '../ITab';
-import { TabPanel } from '../TabPanel';
-import { verticalTabStyles } from './verticalTabStyles';
-
-interface IProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
-  tab: ITab;
-  style: ComponentStyle;
-}
-
-export const VerticalTabPanel = observer<IProps>(function VerticalTabPanel({ tab, style }) {
-  const Panel = tab.panel;
-
-  return styled(useStyles(verticalTabStyles, style))(
-    <TabPanel tabId={tab.tabId}>
-      <Panel />
-    </TabPanel>
-  );
-});

webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx

@@ -1,41 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2021 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
-
-import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming';
-
-import type { ITabContainer } from '../ITab';
-import { TabList } from '../TabList';
-import { TabsState } from '../TabsState';
-import { VerticalTabHeader } from './VerticalTabHeader';
-import { VerticalTabPanel } from './VerticalTabPanel';
-import { verticalTabStyles } from './verticalTabStyles';
-
-interface IProps extends Omit<React.DOMAttributes<HTMLDivElement>, 'style'> {
-  tabContainer: ITabContainer;
-  style: ComponentStyle;
-}
-
-export const VerticalTabs = observer<IProps>(function VerticalTabs({ tabContainer, style, ...props }) {
-  return styled(useStyles(verticalTabStyles, style))(
-    <TabsState currentTabId={tabContainer.currentTabId} orientation='vertical'>
-      <vertical-tabs as="div" {...props}>
-        <TabList aria-label="My tabs">
-          {tabContainer.tabs.map(tab => (
-            <VerticalTabHeader key={tab.tabId} tab={tab} style={style} />
-          ))}
-        </TabList>
-        {tabContainer.tabs.map(tab => (
-          <VerticalTabPanel key={tab.tabId} tab={tab} style={style} />
-        ))}
-      </vertical-tabs>
-    </TabsState>
-  );
-});

webapp/packages/core-blocks/src/index.ts

@@ -74,13 +74,11 @@ export * from './Tabs/Tab/TabTitle';
 export * from './Tabs/Tab/useTab';
 export * from './Tabs/Tab/verticalRotatedTabStyles';
 export * from './Tabs/Tab/UnderlineTabStyles';
+export * from './Tabs/Tab/verticalTabStyles';
 
 export * from './Tabs/TabsBox/TabsBox';
 export * from './Tabs/TabsBox/TabsBoxFromArray';
 
-export * from './Tabs/VerticalTabs/VerticalTabs';
-export * from './Tabs/VerticalTabs/verticalTabStyles';
-
 export * from './Tree/TreeNode/EventTreeNodeExpandFlag';
 export * from './Tree/TreeNode/EventTreeNodeSelectFlag';
 export * from './Tree/TreeNode/TreeNode';

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
 
 import type { ITab } from '@cloudbeaver/core-app';
-import { VerticalTabs } from '@cloudbeaver/core-blocks';
+import { Tab, TabIcon, TabList, TabPanel, TabsState, TabTitle, verticalTabStyles } from '@cloudbeaver/core-blocks';
 import { useController } from '@cloudbeaver/core-di';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
@@ -22,7 +22,7 @@ const styles = composes(
     TabList {
       composes: theme-background-surface theme-text-on-surface theme-border-color-background from global;
     }
-    VerticalTabs {
+    vertical-tabs {
       composes: theme-border-color-background from global;
     }
     Tab {
@@ -33,7 +33,7 @@ const styles = composes(
     Tab {
       color: inherit;
     }
-    VerticalTabs {
+    vertical-tabs {
       border-top: 1px solid;
       flex: 1;
     }
@@ -53,5 +53,30 @@ interface IProps {
 export const ObjectFolders = observer<IProps>(function ObjectFolders({ tab }) {
   const controller = useController(ObjectFoldersController, tab);
 
-  return styled(useStyles(styles))(<VerticalTabs tabContainer={controller.getTabContainer()} style={styles} />);
+  const tabContainer = controller.getTabContainer();
+
+  return styled(useStyles(verticalTabStyles, styles))(
+    <TabsState currentTabId={tabContainer.currentTabId} orientation='vertical'>
+      <vertical-tabs>
+        <TabList aria-label="Object folders">
+          {tabContainer.tabs.map(tab => (
+            <Tab
+              key={tab.tabId}
+              tabId={tab.tabId}
+              onOpen={tab.onActivate}
+              onClose={tab.onClose}
+            >
+              {tab.icon && <TabIcon icon={tab.icon} />}
+              <TabTitle>{tab.title}</TabTitle>
+            </Tab>
+          ))}
+        </TabList>
+        {tabContainer.tabs.map(tab => (
+          <TabPanel key={tab.tabId} tabId={tab.tabId}>
+            <tab.panel />
+          </TabPanel>
+        ))}
+      </vertical-tabs>
+    </TabsState>
+  );
 });