From 339a5d00ebec893f83f46a2f1545b68124e4b69b Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Mon, 13 Dec 2021 12:26:33 +0300
Subject: [PATCH] feat: CB-1365 save tabs state

---
 webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx    | 5 ++++-
 .../src/ObjectPropertiesPage/ObjectFolders.tsx              | 6 ++++--
 .../packages/plugin-object-viewer/src/ObjectViewerPanel.tsx | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx b/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx
index 3b323eb566..6cc3bb1d91 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabsBox/TabsBox.tsx
@@ -10,6 +10,7 @@ import { PropsWithChildren, ReactNode, forwardRef } from 'react';
 import styled from 'reshadow';
 
 import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming';
+import type { MetadataMap } from '@cloudbeaver/core-utils';
 
 import { TabsState } from '../TabsState';
 
@@ -17,6 +18,7 @@ type TabsBoxProps = PropsWithChildren<{
   currentTabId: string;
   tabs?: ReactNode;
   tabIndex?: number;
+  localState?: MetadataMap<string, any>;
   className?: string;
   style?: ComponentStyle;
 }>;
@@ -25,12 +27,13 @@ export const TabsBox = forwardRef<HTMLDivElement, TabsBoxProps>(function TabsBox
   currentTabId,
   tabs,
   tabIndex,
+  localState,
   children,
   className,
   style,
 }, ref) {
   return styled(useStyles(style))(
-    <TabsState currentTabId={currentTabId}>
+    <TabsState currentTabId={currentTabId} localState={localState}>
       <tabs-box ref={ref} as="div" className={className} tabIndex={tabIndex}>
         {tabs && <tabs>{tabs}</tabs>}
         <tab-panels>
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx
index 36f1f58a50..c9b17340f1 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx
@@ -11,10 +11,11 @@ import { useEffect } from 'react';
 import styled, { css } from 'reshadow';
 
 import { ITab, NavNodeManagerService, NavNodeViewService, NavTreeResource } from '@cloudbeaver/core-app';
-import { ITabData, Loader, TabList, TabPanel, TabsState, TextPlaceholder, useMapResource, verticalTabStyles } from '@cloudbeaver/core-blocks';
+import { ITabData, Loader, TabList, TabPanel, TabsState, TextPlaceholder, useMapResource, useTabLocalState, verticalTabStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
+import { MetadataMap } from '@cloudbeaver/core-utils';
 
 import type { IObjectViewerTabState } from '../IObjectViewerTabState';
 import { FolderPanelRenderer } from './FolderPanelRenderer';
@@ -73,6 +74,7 @@ export const ObjectFolders = observer<IProps>(function ObjectFolders({ tab }) {
   const navNodeManagerService = useService(NavNodeManagerService);
   const navNodeViewService = useService(NavNodeViewService);
   const style = useStyles(verticalTabStyles, styles);
+  const innerTabState = useTabLocalState(() => new MetadataMap<string, any>());
 
   const nodeId = tab.handlerState.objectId;
   const parentId = tab.handlerState.parentId;
@@ -111,7 +113,7 @@ export const ObjectFolders = observer<IProps>(function ObjectFolders({ tab }) {
     <Loader state={children} style={style}>{() => styled(style)(
       <>
         {folders.length > 0 ? (
-          <TabsState currentTabId={folderId} orientation='vertical' lazy onChange={openFolder}>
+          <TabsState currentTabId={folderId} orientation='vertical' localState={innerTabState} lazy onChange={openFolder}>
             <vertical-tabs>
               <TabList aria-label="Object folders">
                 {folders.map(folderId => (
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel.tsx b/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel.tsx
index ae6281aef0..34669d83f1 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel.tsx
@@ -12,11 +12,12 @@ import { useCallback } from 'react';
 import styled, { css } from 'reshadow';
 
 import { TabHandlerPanelComponent, NavTreeResource, NavNodeInfoResource } from '@cloudbeaver/core-app';
-import { Loader, TabsBox, TabPanel, TextPlaceholder, Button, useMapResource, useObservableRef } from '@cloudbeaver/core-blocks';
+import { Loader, TabsBox, TabPanel, TextPlaceholder, Button, useMapResource, useObservableRef, useTabLocalState } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource, ConnectionsManagerService } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
+import { MetadataMap } from '@cloudbeaver/core-utils';
 
 import type { IObjectViewerTabState } from './IObjectViewerTabState';
 import { DBObjectPagePanel } from './ObjectPage/DBObjectPagePanel';
@@ -50,6 +51,7 @@ export const ObjectViewerPanel: TabHandlerPanelComponent<IObjectViewerTabState>
   const dbObjectPagesService = useService(DBObjectPageService);
   const connectionsManagerService = useService(ConnectionsManagerService);
   const navNodeInfoResource = useService(NavNodeInfoResource);
+  const innerTabState = useTabLocalState(() => new MetadataMap<string, any>());
 
   const objectId = tab.handlerState.objectId;
   const connectionId = tab.handlerState.connectionId || null;
@@ -139,6 +141,7 @@ export const ObjectViewerPanel: TabHandlerPanelComponent<IObjectViewerTabState>
                   onSelect={dbObjectPagesService.selectPage}
                 />
               ))}
+              localState={innerTabState}
               style={styles}
             >
               {pages.map(page => (