From 3b0e31614cddf285748b402d79c760b6b2944d13 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:03:41 +0200
Subject: [PATCH 1/9] CB-4017 make boolean fields larger (#2021)

Co-authored-by: EvgeniaBzzz <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 .../ObjectPropertyInfoForm.tsx                |  4 +-
 .../ObjectPropertyInfoForm/RenderField.tsx    | 37 +++++--------------
 .../getPropertyControlType.ts                 | 28 ++++++++++++++
 webapp/packages/core-blocks/src/index.ts      |  1 +
 .../Options/ProviderPropertiesForm.tsx        |  6 +--
 5 files changed, 44 insertions(+), 32 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/getPropertyControlType.ts

diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx
index e800f7d690..facee09188 100644
--- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx
@@ -32,6 +32,7 @@ interface ObjectPropertyFormProps extends ILayoutSizeProps {
   hideEmptyPlaceholder?: boolean;
   canShowPassword?: boolean;
   isSaved?: (property: ObjectPropertyInfo) => boolean;
+  geLayoutSize?: (property: ObjectPropertyInfo) => ILayoutSizeProps;
   onFocus?: (name: string) => void;
 }
 
@@ -49,6 +50,7 @@ export const ObjectPropertyInfoForm = observer<ObjectPropertyFormProps>(function
   hideEmptyPlaceholder,
   canShowPassword,
   isSaved,
+  geLayoutSize,
   onFocus,
   ...rest
 }) {
@@ -77,7 +79,7 @@ export const ObjectPropertyInfoForm = observer<ObjectPropertyFormProps>(function
         return (
           <RenderField
             key={property.id}
-            className={s(sizeStyles, { ...layoutProps }, className)}
+            className={s(sizeStyles, { ...(geLayoutSize ? geLayoutSize(property) : layoutProps) }, className)}
             property={property}
             state={state}
             editable={editable}
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
index 7f1848ed7b..7c23b1b38e 100644
--- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
@@ -19,6 +19,7 @@ import { isControlPresented } from '../../FormControls/isControlPresented';
 import { Textarea } from '../../FormControls/Textarea';
 import { Link } from '../../Link';
 import { useTranslate } from '../../localization/useTranslate';
+import { type ControlType, getPropertyControlType } from './getPropertyControlType';
 
 const RESERVED_KEYWORDS = ['no', 'off', 'new-password'];
 
@@ -37,26 +38,6 @@ interface RenderFieldProps {
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
-type ControlType = 'checkbox' | 'combobox' | 'link' | 'input' | 'textarea' | 'file';
-
-function getControlTypeFor(property: ObjectPropertyInfo): ControlType {
-  const dataType = property.dataType?.toLowerCase();
-
-  if (dataType === 'boolean') {
-    return 'checkbox';
-  } else if (property.validValues && property.validValues.length > 0) {
-    return 'combobox';
-  } else if (property.features.includes('href')) {
-    return 'link';
-  } else if (dataType === 'string' && property.length === 'MULTILINE') {
-    return 'textarea';
-  } else if (property.features.includes('file')) {
-    return 'file';
-  }
-
-  return 'input';
-}
-
 function getValue(value: any, controlType: ControlType) {
   const checkbox = controlType === 'checkbox';
 
@@ -87,15 +68,15 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
 }) {
   const translate = useTranslate();
 
-  const controltype = getControlTypeFor(property);
+  const controlType = getPropertyControlType(property);
   const password = property.features.includes('password');
 
-  const value = getValue(property.value, controltype);
-  const defaultValue = getValue(property.defaultValue, controltype);
+  const value = getValue(property.value, controlType);
+  const defaultValue = getValue(property.defaultValue, controlType);
   const passwordSaved = showRememberTip && ((password && !!property.value) || saved);
   const description = passwordSaved ? translate('ui_processing_saved') : undefined;
 
-  if (controltype === 'file' && state) {
+  if (controlType === 'file' && state) {
     return (
       <InputFileTextContent
         tooltip={property.description}
@@ -112,7 +93,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
-  if (controltype === 'link') {
+  if (controlType === 'link') {
     return (
       <FormFieldDescription label={property.displayName} className={className}>
         <Link href={state?.[property.id!]} target="_blank" rel="noopener noreferrer">
@@ -133,7 +114,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
-  if (controltype === 'checkbox') {
+  if (controlType === 'checkbox') {
     if (state !== undefined) {
       return (
         <FieldCheckbox
@@ -164,7 +145,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
-  if (controltype === 'combobox') {
+  if (controlType === 'combobox') {
     if (state !== undefined) {
       return (
         <Combobox
@@ -201,7 +182,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
-  if (controltype === 'textarea') {
+  if (controlType === 'textarea') {
     if (state !== undefined) {
       return (
         <Textarea
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/getPropertyControlType.ts b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/getPropertyControlType.ts
new file mode 100644
index 0000000000..c4c847ecd1
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/getPropertyControlType.ts
@@ -0,0 +1,28 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 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 type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk';
+
+export type ControlType = 'checkbox' | 'combobox' | 'link' | 'input' | 'textarea' | 'file';
+
+export function getPropertyControlType(property: ObjectPropertyInfo): ControlType {
+  const dataType = property.dataType?.toLowerCase();
+
+  if (dataType === 'boolean') {
+    return 'checkbox';
+  } else if (property.validValues && property.validValues.length > 0) {
+    return 'combobox';
+  } else if (property.features.includes('href')) {
+    return 'link';
+  } else if (dataType === 'string' && property.length === 'MULTILINE') {
+    return 'textarea';
+  } else if (property.features.includes('file')) {
+    return 'file';
+  }
+
+  return 'input';
+}
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index c84e73ef53..a9d36511d4 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -44,6 +44,7 @@ export * from './Menu/useMouseContextMenu';
 
 export * from './ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm';
 export * from './ObjectPropertyInfo/useObjectPropertyCategories';
+export * from './ObjectPropertyInfo/ObjectPropertyInfoForm/getPropertyControlType';
 
 export * from './Overlay/Overlay';
 export * from './Overlay/OverlayActions';
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx
index 23a18d551c..ac92393a36 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx
@@ -11,6 +11,7 @@ import {
   Container,
   Expandable,
   EXPANDABLE_FORM_STYLES,
+  getPropertyControlType,
   Group,
   GroupTitle,
   ObjectPropertyInfoForm,
@@ -54,7 +55,7 @@ export const ProviderPropertiesForm = observer<Props>(function ProviderPropertie
                 state={config.providerProperties}
                 disabled={disabled}
                 readOnly={readonly}
-                medium
+                maximum
                 hideEmptyPlaceholder
               />
             </Container>
@@ -84,8 +85,7 @@ export const ProviderPropertiesForm = observer<Props>(function ProviderPropertie
                 category={category}
                 disabled={disabled}
                 readOnly={readonly}
-                small
-                noGrow
+                geLayoutSize={property => (getPropertyControlType(property) === 'checkbox' ? { maximum: true } : { small: true, noGrow: true })}
                 hideEmptyPlaceholder
               />
             </Container>

From 0d941b61c8960398d6774aa7265851d9ce08ac7a Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:04:02 +0200
Subject: [PATCH 2/9] CB-4052 await login properly (#2022)

* CB-4052 await login properly

* CB-4052 make message cleaner

---------

Co-authored-by: EvgeniaBzzz <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 webapp/packages/core-authentication/src/UserInfoResource.ts | 2 +-
 webapp/packages/plugin-administration/src/locales/en.ts     | 5 +----
 webapp/packages/plugin-administration/src/locales/it.ts     | 5 +----
 webapp/packages/plugin-administration/src/locales/ru.ts     | 5 +----
 webapp/packages/plugin-administration/src/locales/zh.ts     | 2 +-
 5 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/webapp/packages/core-authentication/src/UserInfoResource.ts b/webapp/packages/core-authentication/src/UserInfoResource.ts
index c7db9c9117..4f39ea584b 100644
--- a/webapp/packages/core-authentication/src/UserInfoResource.ts
+++ b/webapp/packages/core-authentication/src/UserInfoResource.ts
@@ -108,7 +108,7 @@ export class UserInfoResource extends CachedDataResource<UserInfo | null, void,
 
     if (authInfo.userTokens && authInfo.authStatus === AuthStatus.Success) {
       this.resetIncludes();
-      this.markOutdated();
+      this.setData(await this.loader());
       this.sessionDataResource.markOutdated();
     }
 
diff --git a/webapp/packages/plugin-administration/src/locales/en.ts b/webapp/packages/plugin-administration/src/locales/en.ts
index 69ea0ebf5d..efe0d11eb7 100644
--- a/webapp/packages/plugin-administration/src/locales/en.ts
+++ b/webapp/packages/plugin-administration/src/locales/en.ts
@@ -40,10 +40,7 @@ export default [
 
   ['administration_configuration_wizard_configuration_plugins', 'Configuration'],
   ['administration_configuration_wizard_configuration_custom_connections', 'Enable private connections'],
-  [
-    'administration_configuration_wizard_configuration_custom_connections_description',
-    'Allows users to create private connections. Otherwise, all new connections can be created from the administration part only',
-  ],
+  ['administration_configuration_wizard_configuration_custom_connections_description', 'Allows users to create private connections'],
   ['administration_configuration_wizard_configuration_navigation_tree_view', 'Navigator simple view'],
   [
     'administration_configuration_wizard_configuration_navigation_tree_view_description',
diff --git a/webapp/packages/plugin-administration/src/locales/it.ts b/webapp/packages/plugin-administration/src/locales/it.ts
index cd4788292d..f054baf291 100644
--- a/webapp/packages/plugin-administration/src/locales/it.ts
+++ b/webapp/packages/plugin-administration/src/locales/it.ts
@@ -42,10 +42,7 @@ export default [
 
   ['administration_configuration_wizard_configuration_plugins', 'Configurazione'],
   ['administration_configuration_wizard_configuration_custom_connections', 'Abilita connessioni custom'],
-  [
-    'administration_configuration_wizard_configuration_custom_connections_description',
-    "Permette agli utenti di creare connessioni custom. Altrimenti tutte le nuvoe connessioni saranno create solo dall'amministratore",
-  ],
+  ['administration_configuration_wizard_configuration_custom_connections_description', 'Permette agli utenti di creare connessioni custom'],
   ['administration_configuration_wizard_configuration_navigation_tree_view', 'Vista semplice del navigatore'],
   [
     'administration_configuration_wizard_configuration_navigation_tree_view_description',
diff --git a/webapp/packages/plugin-administration/src/locales/ru.ts b/webapp/packages/plugin-administration/src/locales/ru.ts
index a16fabced8..aaed836b51 100644
--- a/webapp/packages/plugin-administration/src/locales/ru.ts
+++ b/webapp/packages/plugin-administration/src/locales/ru.ts
@@ -19,10 +19,7 @@ export default [
 
   ['administration_configuration_wizard_configuration_plugins', 'Настройки'],
   ['administration_configuration_wizard_configuration_custom_connections', 'Разрешить пользовательские подключения'],
-  [
-    'administration_configuration_wizard_configuration_custom_connections_description',
-    'Позволяет пользователям создавать собственные подключения. Иначе, любые подключения могут быть добавлены только со страницы администрирования',
-  ],
+  ['administration_configuration_wizard_configuration_custom_connections_description', 'Позволяет пользователям создавать собственные подключения'],
   ['administration_configuration_wizard_configuration_navigation_tree_view', 'Упрощенная версия дерева навигации'],
   [
     'administration_configuration_wizard_configuration_navigation_tree_view_description',
diff --git a/webapp/packages/plugin-administration/src/locales/zh.ts b/webapp/packages/plugin-administration/src/locales/zh.ts
index ab06203e3c..1dc16e6cb9 100644
--- a/webapp/packages/plugin-administration/src/locales/zh.ts
+++ b/webapp/packages/plugin-administration/src/locales/zh.ts
@@ -33,7 +33,7 @@ export default [
 
   ['administration_configuration_wizard_configuration_plugins', '配置'],
   ['administration_configuration_wizard_configuration_custom_connections', '允许自定义连接'],
-  ['administration_configuration_wizard_configuration_custom_connections_description', '允许用户创建自定义连接。否则，只能从管理部分创建所有新连接'],
+  ['administration_configuration_wizard_configuration_custom_connections_description', '允许用户创建自定义连接'],
   ['administration_configuration_wizard_configuration_navigation_tree_view', '导航器简单视图'],
   ['administration_configuration_wizard_configuration_navigation_tree_view_description', '默认情况下，所有用户的新连接在导航树中将仅包含基本信息'],
 

From c4975475a161245fddd09c748ab77fbd25f05ea2 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Tue, 26 Sep 2023 17:27:00 +0200
Subject: [PATCH 3/9] CB-3898 add base CachedMapResource tests (#2013)

* CB-3898 add base CachedMapResource tests

* CB-3908 add tests for the handlers

* CB-3908 add error tests

* CB-3908 add initial tests for the CachedDataResource

* CB-3908 remove extra test

* CB-3908 add clear data test

* CB-3908 add CachedTreeResource tests

* CB-3908 review fixes

* CB-3908 transform mock data to getters
---
 webapp/packages/core-sdk/package.json         |   1 +
 .../src/Resource/CachedDataResource.test.ts   |  95 +++++++
 .../src/Resource/CachedMapResource.test.ts    | 254 ++++++++++++++++++
 .../src/Resource/CachedTreeResource.test.ts   | 138 ++++++++++
 4 files changed, 488 insertions(+)
 create mode 100644 webapp/packages/core-sdk/src/Resource/CachedDataResource.test.ts
 create mode 100644 webapp/packages/core-sdk/src/Resource/CachedMapResource.test.ts
 create mode 100644 webapp/packages/core-sdk/src/Resource/CachedTreeResource.test.ts

diff --git a/webapp/packages/core-sdk/package.json b/webapp/packages/core-sdk/package.json
index a9bcb942db..657f5471e2 100644
--- a/webapp/packages/core-sdk/package.json
+++ b/webapp/packages/core-sdk/package.json
@@ -17,6 +17,7 @@
     "gql:gen:dev": "graphql-codegen --watch",
     "lint": "eslint ./src/ --ext .ts,.tsx",
     "lint-fix": "eslint ./src/ --ext .ts,.tsx --fix",
+    "test": "core-cli-test",
     "validate-dependencies": "core-cli-validate-dependencies"
   },
   "dependencies": {
diff --git a/webapp/packages/core-sdk/src/Resource/CachedDataResource.test.ts b/webapp/packages/core-sdk/src/Resource/CachedDataResource.test.ts
new file mode 100644
index 0000000000..090cc5c880
--- /dev/null
+++ b/webapp/packages/core-sdk/src/Resource/CachedDataResource.test.ts
@@ -0,0 +1,95 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 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 { CachedDataResource } from './CachedDataResource';
+
+interface IEntityData {
+  id: string;
+  value: number;
+}
+
+const DEFAULT_STATE_GETTER: () => IEntityData[] = () => [];
+const DATA_MOCK_GETTER: () => IEntityData[] = () => [
+  {
+    id: '1',
+    value: 1,
+  },
+  {
+    id: '2',
+    value: 2,
+  },
+];
+
+async function fetchMock(): Promise<IEntityData[]> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(DATA_MOCK_GETTER());
+    }, 1);
+  });
+}
+
+class TestDataResource extends CachedDataResource<IEntityData[]> {
+  constructor() {
+    super(DEFAULT_STATE_GETTER);
+  }
+
+  protected async loader() {
+    const data = await fetchMock();
+    return data;
+  }
+}
+
+describe('CachedDataResource', () => {
+  let dataResource: TestDataResource;
+
+  beforeEach(() => {
+    dataResource = new TestDataResource();
+  });
+
+  test('should instantiate correctly', () => {
+    expect(dataResource).toBeInstanceOf(CachedDataResource);
+  });
+
+  test('should initialize with the default state', () => {
+    expect(dataResource.data).toEqual(DEFAULT_STATE_GETTER());
+  });
+
+  test('should load data', async () => {
+    await dataResource.load();
+    expect(dataResource.data).toEqual(DATA_MOCK_GETTER());
+  });
+
+  test('should be able to outdate the data', () => {
+    dataResource.markOutdated();
+    expect(dataResource.isOutdated()).toBe(true);
+  });
+
+  test('should run onDataOutdated handlers on data outdate', () => {
+    const handler = jest.fn();
+
+    dataResource.onDataOutdated.addHandler(handler);
+    dataResource.markOutdated();
+
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should run onDataUpdate handlers on data update', () => {
+    const handler = jest.fn();
+
+    dataResource.onDataUpdate.addHandler(handler);
+    dataResource.dataUpdate();
+
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should be able to clear the data', async () => {
+    await dataResource.load();
+    dataResource.clear();
+
+    expect(dataResource.data).toEqual([]);
+  });
+});
diff --git a/webapp/packages/core-sdk/src/Resource/CachedMapResource.test.ts b/webapp/packages/core-sdk/src/Resource/CachedMapResource.test.ts
new file mode 100644
index 0000000000..7981a80274
--- /dev/null
+++ b/webapp/packages/core-sdk/src/Resource/CachedMapResource.test.ts
@@ -0,0 +1,254 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 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 { toJS } from 'mobx';
+
+import { CachedMapResource } from './CachedMapResource';
+import type { ResourceKey } from './ResourceKey';
+import { resourceKeyList } from './ResourceKeyList';
+
+interface IEntityData {
+  id: string;
+  value: number;
+}
+
+const ERROR_ITEM_ID = 'error';
+
+const DATA_MOCK_GETTER: () => IEntityData[] = () => [
+  {
+    id: '1',
+    value: 1,
+  },
+  {
+    id: '2',
+    value: 2,
+  },
+  {
+    id: ERROR_ITEM_ID,
+    value: 3,
+  },
+];
+
+const TEST_ERROR_MESSAGE = 'Test error';
+const DEFAULT_STATE_GETTER = () => new Map();
+
+async function fetchMock(key: ResourceKey<string> | undefined): Promise<IEntityData[]> {
+  const data = DATA_MOCK_GETTER();
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (key) {
+        if (key === ERROR_ITEM_ID) {
+          reject(new Error(TEST_ERROR_MESSAGE));
+        }
+
+        const item = data.find(d => d.id === key);
+        if (item) {
+          resolve([item]);
+        }
+      } else {
+        resolve(data);
+      }
+    }, 1);
+  });
+}
+
+class TestMapResource extends CachedMapResource<string, IEntityData> {
+  constructor() {
+    super(DEFAULT_STATE_GETTER);
+  }
+
+  protected async loader(key: ResourceKey<string>) {
+    const data = await fetchMock(key);
+    this.replace(resourceKeyList(data.map(d => d.id)), data);
+    return this.data;
+  }
+
+  protected validateKey(key: string): boolean {
+    return typeof key === 'string';
+  }
+}
+
+describe('CachedMapResource', () => {
+  let mapResource: TestMapResource;
+
+  beforeEach(() => {
+    mapResource = new TestMapResource();
+  });
+
+  test('should instantiate correctly', () => {
+    expect(mapResource).toBeInstanceOf(CachedMapResource);
+  });
+
+  test('should initialize with the initial value', () => {
+    expect(toJS(mapResource.data)).toEqual(DEFAULT_STATE_GETTER());
+  });
+
+  test('should return all entries', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+    expect(mapResource.entries).toEqual([
+      ['key1', { id: 'key1', value: 1 }],
+      ['key2', { id: 'key2', value: 2 }],
+    ]);
+  });
+
+  test('should return all values', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+    expect(mapResource.values).toEqual([
+      { id: 'key1', value: 1 },
+      { id: 'key2', value: 2 },
+    ]);
+  });
+
+  test('should return all keys', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+    expect(mapResource.keys).toEqual(['key1', 'key2']);
+  });
+
+  test('should load data for a specific key', async () => {
+    await mapResource.load('1');
+    expect(mapResource.get('1')).toEqual({ id: '1', value: 1 });
+    expect(mapResource.get('2')).toBeUndefined(); // This key was not loaded
+  });
+
+  test('should NOT load data for a key that produces an error', async () => {
+    await expect(mapResource.load(ERROR_ITEM_ID)).rejects.toThrow(TEST_ERROR_MESSAGE);
+    expect(mapResource.get(ERROR_ITEM_ID)).toBeUndefined();
+  });
+
+  test('should mark loaded data as loaded', async () => {
+    await mapResource.load('1');
+    expect(mapResource.isLoaded('1')).toBe(true);
+  });
+
+  test('should set and get a value', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    expect(mapResource.get('key1')).toStrictEqual({ id: 'key1', value: 1 });
+  });
+
+  test('should delete a value', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.delete('key1');
+    expect(mapResource.get('key1')).toBeUndefined();
+  });
+
+  test('should check if a key exists', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    expect(mapResource.has('key1')).toBe(true);
+    expect(mapResource.has('key2')).toBe(false);
+  });
+
+  test('should replace multiple keys', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+    mapResource.set('key4', { id: 'key4', value: 4 });
+
+    mapResource.replace(resourceKeyList(['key1', 'key3']), [
+      { id: 'key1', value: 11 },
+      { id: 'key3', value: 33 },
+    ]);
+
+    expect(mapResource.get('key1')).toStrictEqual({ id: 'key1', value: 11 });
+    expect(mapResource.get('key2')).toBeUndefined();
+    expect(mapResource.get('key3')).toStrictEqual({ id: 'key3', value: 33 });
+    expect(mapResource.data.size).toBe(2);
+  });
+
+  test('should outdated certain keys', () => {
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+
+    mapResource.markOutdated('key1');
+
+    expect(mapResource.isOutdated('key1')).toBe(true);
+    expect(mapResource.isOutdated('key2')).toBe(false);
+  });
+
+  test('should run onDataOutdated handlers on data outdate', () => {
+    const handler = jest.fn();
+
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+
+    mapResource.onDataOutdated.addHandler(key => {
+      handler();
+      expect(key).toBe('key1');
+    });
+
+    mapResource.markOutdated('key1');
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should run onDataUpdate handlers on data update', () => {
+    const handler = jest.fn();
+
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+
+    mapResource.onDataUpdate.addHandler(key => {
+      handler();
+      expect(key).toBe('key2');
+    });
+
+    mapResource.dataUpdate('key2');
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should run onItemDelete handlers on data delete', () => {
+    const handler = jest.fn();
+
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+
+    mapResource.onItemDelete.addHandler(key => {
+      handler();
+      expect(key).toBe('key1');
+    });
+
+    mapResource.delete('key1');
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should run onItemUpdate handlers on item update', () => {
+    const handler = jest.fn();
+
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+
+    mapResource.onItemUpdate.addHandler(key => {
+      handler();
+      expect(key).toBe('key2');
+    });
+
+    mapResource.set('key2', { id: 'key2', value: 22 });
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should run onDataError handlers on data error', async () => {
+    const handler = jest.fn();
+
+    mapResource.set('key1', { id: 'key1', value: 1 });
+    mapResource.set('key2', { id: 'key2', value: 2 });
+
+    mapResource.onDataError.addHandler(data => {
+      handler();
+      expect(data.param).toBe(ERROR_ITEM_ID);
+      expect(data.exception.message).toBe(TEST_ERROR_MESSAGE);
+    });
+
+    await expect(mapResource.load(ERROR_ITEM_ID)).rejects.toThrow(TEST_ERROR_MESSAGE);
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('should be able to get an exception if the one occurred for the key', async () => {
+    await expect(mapResource.load(ERROR_ITEM_ID)).rejects.toThrow(TEST_ERROR_MESSAGE);
+    expect(mapResource.getException(ERROR_ITEM_ID)?.message).toBe(TEST_ERROR_MESSAGE);
+  });
+});
diff --git a/webapp/packages/core-sdk/src/Resource/CachedTreeResource.test.ts b/webapp/packages/core-sdk/src/Resource/CachedTreeResource.test.ts
new file mode 100644
index 0000000000..fa54970887
--- /dev/null
+++ b/webapp/packages/core-sdk/src/Resource/CachedTreeResource.test.ts
@@ -0,0 +1,138 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 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 { CachedTreeChildrenKey, CachedTreeResource, CachedTreeRootChildrenKey } from './CachedTreeResource';
+import type { ResourceKey } from './ResourceKey';
+import { resourceKeyList } from './ResourceKeyList';
+
+interface IMockDataEntity {
+  name: string;
+}
+
+class TestTreeResource extends CachedTreeResource<IMockDataEntity> {
+  constructor() {
+    super();
+  }
+
+  protected async loader(key: ResourceKey<string>) {
+    return this.data;
+  }
+
+  protected validateKey(key: string): boolean {
+    return typeof key === 'string';
+  }
+}
+
+describe('CachedMapResource', () => {
+  let treeResource: TestTreeResource;
+
+  beforeEach(() => {
+    treeResource = new TestTreeResource();
+  });
+
+  test('should instantiate correctly', () => {
+    expect(treeResource).toBeInstanceOf(CachedTreeResource);
+  });
+
+  test('should set data correctly', () => {
+    treeResource.set('root', { name: 'root' });
+    expect(treeResource.get('root')).toEqual({ name: 'root' });
+  });
+
+  test('.has should check if node exists correctly', () => {
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+
+    expect(treeResource.has('root/level2')).toBe(true);
+    expect(treeResource.has('root/level3')).toBe(false);
+  });
+
+  test('the node should be outdated after markOutdated is called on it', () => {
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+    treeResource.markOutdated('root');
+
+    expect(treeResource.isOutdated('root')).toBe(true);
+    expect(treeResource.isOutdated('root/level2')).toBe(false);
+  });
+
+  test('the nodes metadata should be outdated after markOutdated is called on it', () => {
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+    treeResource.markOutdated('root');
+
+    expect(treeResource.getMetadata('root').outdated).toBe(true);
+    expect(treeResource.getMetadata('root/level2').outdated).toBe(false);
+  });
+
+  test('should run onDataOutdated handlers on data outdate', () => {
+    const handler = jest.fn();
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+
+    treeResource.onDataOutdated.addHandler(key => {
+      handler();
+      expect(key).toBe('root');
+    });
+
+    treeResource.markOutdated('root');
+
+    expect(treeResource.isOutdated('root')).toBe(true);
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('CachedTreeChildrenKey alias should return key children of the node', () => {
+    const handler = jest.fn();
+
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+    treeResource.set('root/level2/level3', { name: 'level3' });
+
+    treeResource.onDataOutdated.addHandler(key => {
+      handler();
+      expect(key).toEqual(resourceKeyList(['root/level2']));
+    });
+
+    treeResource.markOutdated(CachedTreeChildrenKey('root'));
+
+    expect(handler).toHaveBeenCalled();
+  });
+
+  test('CachedTreeRootChildrenKey alias should return children for the root node', () => {
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+    treeResource.set('root/level2/level3', { name: 'level3' });
+
+    expect(treeResource.get(CachedTreeRootChildrenKey)).toEqual([{ name: 'root' }]);
+  });
+
+  test('should be able to delete the node', () => {
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+
+    treeResource.delete('root/level2');
+
+    expect(treeResource.has('root/level2')).toBe(false);
+    expect(treeResource.has('root')).toBe(true);
+  });
+
+  test('should run onItemDelete handlers on data delete', () => {
+    const handler = jest.fn();
+
+    treeResource.set('root', { name: 'root' });
+    treeResource.set('root/level2', { name: 'level2' });
+
+    treeResource.onItemDelete.addHandler(key => {
+      handler();
+      expect(key).toBe('root/level2');
+    });
+
+    treeResource.delete('root/level2');
+
+    expect(handler).toHaveBeenCalled();
+  });
+});

From 2e71cfdf87866ca2e2270a524920c45e4a848006 Mon Sep 17 00:00:00 2001
From: Serge Rider <serge@jkiss.org>
Date: Tue, 26 Sep 2023 19:41:17 +0200
Subject: [PATCH 4/9] dbeaver/pro#1925 Profile source model (#1996)

---
 .../src/io/cloudbeaver/WebDataSourceRegistryProxy.java        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/WebDataSourceRegistryProxy.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/WebDataSourceRegistryProxy.java
index ddeb6b94af..072304983a 100644
--- a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/WebDataSourceRegistryProxy.java
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/WebDataSourceRegistryProxy.java
@@ -208,8 +208,8 @@ public void removeSavedFilter(String filterName) {
 
     @Nullable
     @Override
-    public DBWNetworkProfile getNetworkProfile(String name) {
-        return dataSourceRegistry.getNetworkProfile(name);
+    public DBWNetworkProfile getNetworkProfile(String source, String name) {
+        return dataSourceRegistry.getNetworkProfile(source, name);
     }
 
     @NotNull

From a2d9fddc5e853f1fc925c3f1ac8414674857c9d4 Mon Sep 17 00:00:00 2001
From: Alexander Skoblikov <aleksandr.skoblikov@dbeaver.com>
Date: Wed, 27 Sep 2023 15:30:37 +0200
Subject: [PATCH 5/9] CB-3930 redesign resource management api (#1998)

* CB-3946 rm nio api

* CB-3946 read/write nio api

* CB-3946 nio tests
---
 .../io.cloudbeaver.model/META-INF/MANIFEST.MF |   2 +
 .../model/rm/fs/nio/RMByteArrayChannel.java   |  77 +++++
 .../model/rm/fs/nio/RMNIOFileSystem.java      | 149 +++++++++
 .../rm/fs/nio/RMNIOFileSystemProvider.java    | 293 ++++++++++++++++++
 .../rm/fs/nio/RMNIOProjectFileStore.java      |  50 +++
 .../rm/fs/nio/RMNIOResourceFileStore.java     |  50 +++
 .../model/rm/fs/nio/RMOutputStream.java       |  46 +++
 .../cloudbeaver/model/rm/fs/nio/RMPath.java   | 205 ++++++++++++
 .../rm/fs/nio/RMResourceBasicAttribute.java   |  48 +++
 .../model/rm/fs/nio/RMRootBasicAttribute.java |  38 +++
 .../rm/local/LocalResourceController.java     |   6 +
 .../server/jobs/SessionStateJob.java          |   2 +-
 .../io/cloudbeaver/model/rm/RMNIOTest.java    | 177 +++++++++++
 .../test/platform/CEServerTestSuite.java      |   4 +-
 14 files changed, 1145 insertions(+), 2 deletions(-)
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMByteArrayChannel.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystem.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystemProvider.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOProjectFileStore.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOResourceFileStore.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMOutputStream.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMPath.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMResourceBasicAttribute.java
 create mode 100644 server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMRootBasicAttribute.java
 create mode 100644 server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/model/rm/RMNIOTest.java

diff --git a/server/bundles/io.cloudbeaver.model/META-INF/MANIFEST.MF b/server/bundles/io.cloudbeaver.model/META-INF/MANIFEST.MF
index 2469bde4a7..3ed724a284 100644
--- a/server/bundles/io.cloudbeaver.model/META-INF/MANIFEST.MF
+++ b/server/bundles/io.cloudbeaver.model/META-INF/MANIFEST.MF
@@ -12,6 +12,7 @@ Require-Bundle:  org.jkiss.dbeaver.data.gis;visibility:=reexport,
  org.jkiss.dbeaver.model;visibility:=reexport,
  org.jkiss.dbeaver.model.sm;visibility:=reexport,
  org.jkiss.dbeaver.model.event;visibility:=reexport,
+ org.jkiss.dbeaver.model.nio;visibility:=reexport,
  org.jkiss.dbeaver.registry;visibility:=reexport,
  org.jkiss.dbeaver.net.ssh,
  org.jkiss.bundle.graphql.java;visibility:=reexport,
@@ -29,6 +30,7 @@ Export-Package: io.cloudbeaver,
  io.cloudbeaver.model.rm,
  io.cloudbeaver.model.rm.local,
  io.cloudbeaver.model.rm.lock,
+ io.cloudbeaver.model.rm.fs.nio,
  io.cloudbeaver.model.session,
  io.cloudbeaver.model.user,
  io.cloudbeaver.registry,
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMByteArrayChannel.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMByteArrayChannel.java
new file mode 100644
index 0000000000..d0f6913f7f
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMByteArrayChannel.java
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2018, 2020, Oracle and/or its affiliates. All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Oracle designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Oracle in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ * or visit www.oracle.com if you need additional information or have any
+ * questions.
+ */
+
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.dbeaver.DBException;
+import org.jkiss.dbeaver.model.nio.ByteArrayChannel;
+
+import java.io.IOException;
+import java.nio.file.OpenOption;
+import java.util.Set;
+
+// copy of jdk.nio.zipfs.ByteArrayChannel
+public class RMByteArrayChannel extends ByteArrayChannel {
+
+    private final RMPath rmPath;
+
+    public RMByteArrayChannel(byte[] buf, RMPath rmPath, Set<? extends OpenOption> options) {
+        super(buf, options);
+        this.rmPath = rmPath;
+    }
+
+    @Override
+    protected void createNewFile() throws IOException {
+        try {
+            rmPath.getFileSystem().getRmController().createResource(
+                rmPath.getRmProjectId(), rmPath.getResourcePath(), false
+            );
+        } catch (DBException e) {
+            throw new IOException("Failed to create new file: " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    protected void writeToFile() throws IOException {
+        try {
+            rmPath.getFileSystem().getRmController().setResourceContents(
+                rmPath.getRmProjectId(), rmPath.getResourcePath(), buf, true
+            );
+        } catch (DBException e) {
+            throw new IOException("Failed to write data to the file: " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    protected void deleteFile() throws IOException {
+        try {
+            rmPath.getFileSystem().getRmController().deleteResource(
+                rmPath.getRmProjectId(), rmPath.getResourcePath(), true
+            );
+        } catch (DBException e) {
+            throw new IOException("Failed to delete file: " + e.getMessage(), e);
+        }
+    }
+}
\ No newline at end of file
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystem.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystem.java
new file mode 100644
index 0000000000..0abc646d75
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystem.java
@@ -0,0 +1,149 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.code.NotNull;
+import org.jkiss.code.Nullable;
+import org.jkiss.dbeaver.DBException;
+import org.jkiss.dbeaver.Log;
+import org.jkiss.dbeaver.model.nio.NIOFileSystem;
+import org.jkiss.dbeaver.model.rm.RMController;
+import org.jkiss.dbeaver.model.rm.RMProject;
+import org.jkiss.dbeaver.model.rm.RMProjectPermission;
+import org.jkiss.utils.ArrayUtils;
+import org.jkiss.utils.CommonUtils;
+
+import java.io.FileNotFoundException;
+import java.io.IOException;
+import java.net.URI;
+import java.nio.file.FileStore;
+import java.nio.file.Path;
+import java.nio.file.spi.FileSystemProvider;
+import java.util.List;
+
+public class RMNIOFileSystem extends NIOFileSystem {
+    private static final Log log = Log.getLog(RMNIOFileSystem.class);
+    @Nullable
+    // null for root 'rm://' path
+    private final String rmProjectId;
+    @NotNull
+    private final RMController rmController;
+    @NotNull
+    private final RMNIOFileSystemProvider rmNioFileSystemProvider;
+    @Nullable
+    private RMProject rmProject;
+
+    public RMNIOFileSystem(
+        @Nullable String rmProjectId,
+        @NotNull RMController rmController,
+        @NotNull RMNIOFileSystemProvider rmNioFileSystemProvider
+    ) {
+        this.rmProjectId = rmProjectId;
+        this.rmController = rmController;
+        this.rmNioFileSystemProvider = rmNioFileSystemProvider;
+    }
+
+    @Override
+    public FileSystemProvider provider() {
+        return rmNioFileSystemProvider;
+    }
+
+    @Override
+    public void close() throws IOException {
+
+    }
+
+    @Override
+    public boolean isOpen() {
+        return true;
+    }
+
+    @Override
+    public boolean isReadOnly() {
+        try {
+            return getRmProject().hasProjectPermission(RMProjectPermission.RESOURCE_EDIT.getPermissionId());
+        } catch (IOException e) {
+            return true;
+        }
+    }
+
+    @Override
+    public Iterable<Path> getRootDirectories() {
+        return List.of(new RMPath(this));
+    }
+
+    @Override
+    public Iterable<FileStore> getFileStores() {
+        try {
+            return List.of(new RMNIOProjectFileStore(getRmProject()));
+        } catch (IOException e) {
+            log.error(e.getMessage(), e);
+        }
+        return List.of();
+    }
+
+    @NotNull
+    @Override
+    public Path getPath(@NotNull String first, @NotNull String... more) {
+        if (CommonUtils.isEmpty(first)) {
+            throw new IllegalArgumentException("Empty path");
+        }
+        StringBuilder uriBuilder = new StringBuilder();
+        uriBuilder.append(provider().getScheme()).append("://");
+        if (rmProjectId != null) {
+            uriBuilder.append(rmProjectId).append(getSeparator());
+
+        }
+        uriBuilder.append(first);
+        if (!ArrayUtils.isEmpty(more)) {
+            uriBuilder
+                .append(getSeparator())
+                .append(String.join(getSeparator(), more));
+        }
+        return provider().getPath(URI.create(uriBuilder.toString()));
+    }
+
+    @NotNull
+    public RMController getRmController() {
+        return rmController;
+    }
+
+    @Nullable
+    public String getRmProjectId() {
+        return rmProjectId;
+    }
+
+    @NotNull
+    public synchronized RMProject getRmProject() throws IOException {
+        if (rmProject != null) {
+            return rmProject;
+        }
+        if (rmProjectId == null) {
+            throw new IOException("Project id not specified");
+        }
+        try {
+            RMProject project = rmController.getProject(rmProjectId, false, false);
+            if (project == null) {
+                throw new FileNotFoundException("Project not exist: " + rmProjectId);
+            }
+            rmProject = project;
+            return rmProject;
+        } catch (DBException e) {
+            throw new IOException("Failed to get project:" + e.getMessage(), e);
+        }
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystemProvider.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystemProvider.java
new file mode 100644
index 0000000000..e87da418fa
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOFileSystemProvider.java
@@ -0,0 +1,293 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.code.NotNull;
+import org.jkiss.dbeaver.DBException;
+import org.jkiss.dbeaver.model.nio.NIOFileSystemProvider;
+import org.jkiss.dbeaver.model.nio.NIOUtils;
+import org.jkiss.dbeaver.model.rm.RMController;
+import org.jkiss.dbeaver.model.rm.RMResource;
+import org.jkiss.dbeaver.model.rm.RMUtils;
+import org.jkiss.utils.CommonUtils;
+
+import java.io.FileNotFoundException;
+import java.io.IOException;
+import java.io.OutputStream;
+import java.net.URI;
+import java.nio.file.*;
+import java.nio.file.attribute.BasicFileAttributes;
+import java.nio.file.attribute.FileAttribute;
+import java.nio.file.attribute.FileAttributeView;
+import java.util.Arrays;
+import java.util.Iterator;
+import java.util.Map;
+import java.util.Set;
+
+public class RMNIOFileSystemProvider extends NIOFileSystemProvider {
+
+    @NotNull
+    private final RMController rmController;
+
+    public RMNIOFileSystemProvider(@NotNull RMController rmController) {
+        this.rmController = rmController;
+    }
+
+    @Override
+    public String getScheme() {
+        return "rm";
+    }
+
+    @Override
+    public FileSystem newFileSystem(URI uri, Map<String, ?> env) throws IOException {
+        throw new FileAlreadyExistsException("RM file system already exist");
+    }
+
+    @Override
+    public FileSystem getFileSystem(URI uri) {
+        validateUri(uri);
+        String projectId = uri.getAuthority();
+        if (CommonUtils.isEmpty(projectId)) {
+            projectId = null;
+        }
+        try {
+            return new RMNIOFileSystem(projectId, rmController, this);
+        } catch (Exception e) {
+            throw new FileSystemNotFoundException("RM file system not found: " + e.getMessage());
+        }
+    }
+
+    @Override
+    public Path getPath(URI uri) {
+        validateUri(uri);
+        String projectId = uri.getAuthority();
+        if (CommonUtils.isEmpty(projectId)) {
+            projectId = null;
+        }
+        RMNIOFileSystem rmNioFileSystem = new RMNIOFileSystem(projectId, rmController, this);
+        String resourcePath = uri.getPath();
+        if (CommonUtils.isNotEmpty(resourcePath) && projectId == null) {
+            throw new IllegalArgumentException("Project is not specified in URI");
+        }
+        if (CommonUtils.isEmpty(resourcePath)) {
+            return new RMPath(rmNioFileSystem);
+        } else {
+            return new RMPath(rmNioFileSystem, resourcePath);
+        }
+    }
+
+    @Override
+    public RMByteArrayChannel newByteChannel(Path path, Set<? extends OpenOption> options, FileAttribute<?>... attrs) throws IOException {
+        RMPath rmPath = (RMPath) path;
+        if (rmPath.isProjectPath()) {
+            throw new IllegalArgumentException("Cannot open channel for the project");
+        }
+
+        try {
+            if (Files.exists(path)) {
+                byte[] data = rmController.getResourceContents(rmPath.getRmProjectId(), rmPath.getResourcePath());
+                return new RMByteArrayChannel(data, rmPath, options);
+            } else {
+                return new RMByteArrayChannel(new byte[0], rmPath, options);
+            }
+        } catch (DBException e) {
+            throw new IOException("Failed to read resource: " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    public OutputStream newOutputStream(Path path, OpenOption... options) throws IOException {
+        return new RMOutputStream((RMPath) path);
+    }
+
+    @Override
+    public DirectoryStream<Path> newDirectoryStream(Path dir, DirectoryStream.Filter<? super Path> filter) throws IOException {
+        RMPath rmDir = (RMPath) dir;
+        String rmDirPath = rmDir.getResourcePath();
+        String separator = rmDir.getFileSystem().getSeparator();
+
+        return new DirectoryStream<>() {
+            @Override
+            public Iterator<Path> iterator() {
+                var rmController = rmDir.getFileSystem().getRmController();
+                try {
+                    if (rmDir.isRmRootPath()) {
+                        return Arrays.stream(rmController.listAccessibleProjects())
+                            .map(rmProject -> (Path) new RMPath(
+                                    new RMNIOFileSystem(
+                                        rmProject.getId(),
+                                        rmController,
+                                        RMNIOFileSystemProvider.this
+                                    )
+                                )
+                            ).iterator();
+                    } else {
+                        var resources = rmController.listResources(
+                            rmDir.getRmProjectId(),
+                            rmDirPath,
+                            null,
+                            false,
+                            false,
+                            false
+                        );
+                        return Arrays.stream(resources)
+                            .map(rmResource -> (Path) new RMPath(rmDir.getFileSystem(),
+                                NIOUtils.resolve(separator, rmDirPath, rmResource.getName())
+                            ))
+                            .iterator();
+                    }
+                } catch (DBException e) {
+                    throw new RuntimeException("Failed to read resources from rm path: " + e.getMessage(), e);
+                }
+            }
+
+            @Override
+            public void close() throws IOException {
+
+            }
+        };
+    }
+
+    @Override
+    public void createDirectory(Path dir, FileAttribute<?>... attrs) throws IOException {
+        RMPath rmDir = (RMPath) dir;
+        try {
+            if (rmDir.isProjectPath()) {
+                rmController.createProject(RMUtils.getProjectName(rmDir.getRmProjectId()), null);
+            } else {
+                rmController.createResource(rmDir.getRmProjectId(), rmDir.getResourcePath(), true);
+            }
+        } catch (DBException e) {
+            throw new IOException("Failed to create directory: " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    public void delete(Path path) throws IOException {
+        RMPath rmPath = (RMPath) path;
+        if (rmPath.isRmRootPath()) {
+            throw new IOException("Can not delete root rm directory");
+        }
+        try {
+            String rmProjectId = rmPath.getRmProjectId();
+            var rmController = rmPath.getFileSystem().getRmController();
+            if (rmPath.isProjectPath()) {
+                rmController.deleteProject(rmProjectId);
+            } else {
+                rmController.deleteResource(rmProjectId, rmPath.getResourcePath(), true);
+            }
+        } catch (DBException e) {
+            throw new IOException("Failed to delete rm resource:  " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    public void copy(Path source, Path target, CopyOption... options) throws IOException {
+        throw new UnsupportedOperationException();
+    }
+
+    @Override
+    public void move(Path source, Path target, CopyOption... options) throws IOException {
+        RMPath rmSource = (RMPath) source;
+        RMPath rmTarget = (RMPath) target;
+        try {
+            rmController.moveResource(rmSource.getRmProjectId(), rmSource.getResourcePath(), rmTarget.getResourcePath());
+        } catch (DBException e) {
+            throw new IOException("Failed to move rm resource:  " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    public boolean isSameFile(Path path, Path path2) throws IOException {
+        return path.toString().equals(path2.toString());
+    }
+
+    @Override
+    public boolean isHidden(Path path) throws IOException {
+        //rm does not support hidden files
+        return false;
+    }
+
+    @Override
+    public FileStore getFileStore(Path path) throws IOException {
+        RMPath rmPath = (RMPath) path;
+        if (rmPath.isProjectPath()) {
+            return new RMNIOProjectFileStore(rmPath.getFileSystem().getRmProject());
+        } else {
+            try {
+                RMResource rmResource = rmController.getResource(rmPath.getRmProjectId(), rmPath.getResourcePath());
+                if (rmResource == null) {
+                    throw new FileNotFoundException();
+                }
+                return new RMNIOResourceFileStore(rmResource);
+            } catch (DBException e) {
+                throw new IOException("Failed to ");
+            }
+        }
+    }
+
+    @Override
+    public void checkAccess(Path path, AccessMode... modes) throws IOException {
+        RMPath rmPath = (RMPath) path;
+        try {
+            if (rmPath.isProjectPath()) {
+                if (rmController.getProject(rmPath.getRmProjectId(), false, false) == null) {
+                    // we should throw error, otherwise Files.exists return true
+                    throw new FileNotFoundException("Project not found: " + rmPath.getRmProjectId());
+                }
+            } else if (rmController.getResource(rmPath.getRmProjectId(), rmPath.getResourcePath()) == null) {
+                // some here
+                throw new FileNotFoundException("Resource not found: " + rmPath.getResourcePath());
+            }
+        } catch (Exception e) {
+            throw new IOException("Failed to check path access: " + e.getMessage(), e);
+        }
+    }
+
+    @Override
+    public <V extends FileAttributeView> V getFileAttributeView(Path path, Class<V> type, LinkOption... options) {
+        return null;
+    }
+
+    @Override
+    public <A extends BasicFileAttributes> A readAttributes(Path path, Class<A> type, LinkOption... options) throws IOException {
+        if (type == BasicFileAttributes.class) {
+            RMPath rmPath = (RMPath) path;
+            try {
+                if (rmPath.isRmRootPath()) {
+                    return type.cast(new RMRootBasicAttribute());
+                }
+                if (rmPath.isProjectPath()) {
+                    boolean projectNotExist = rmController.getProject(rmPath.getRmProjectId(), false, false) == null;
+                    if (projectNotExist) {
+                        throw new FileNotFoundException();
+                    }
+                    return type.cast(new RMRootBasicAttribute());
+                } else {
+                    RMResource rmResource = rmController.getResource(rmPath.getRmProjectId(), rmPath.getResourcePath());
+                    if (rmResource == null) {
+                        throw new FileNotFoundException();
+                    }
+                    return type.cast(new RMResourceBasicAttribute(rmResource));
+                }
+            } catch (DBException e) {
+                throw new IOException("Failed to read resource attribute: " + e.getMessage(), e);
+            }
+        }
+        return null;
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOProjectFileStore.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOProjectFileStore.java
new file mode 100644
index 0000000000..da1bd715f8
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOProjectFileStore.java
@@ -0,0 +1,50 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.dbeaver.model.nio.NIOFileStore;
+import org.jkiss.dbeaver.model.rm.RMProject;
+
+import java.io.IOException;
+
+public class RMNIOProjectFileStore extends NIOFileStore {
+    private final RMProject rmProject;
+
+    public RMNIOProjectFileStore(RMProject rmProject) {
+        this.rmProject = rmProject;
+    }
+
+    @Override
+    public String name() {
+        return rmProject.getName();
+    }
+
+    @Override
+    public String type() {
+        return "rmfs";
+    }
+
+    @Override
+    public boolean isReadOnly() {
+        return false;
+    }
+
+    @Override
+    public long getTotalSpace() throws IOException {
+        return 0;
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOResourceFileStore.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOResourceFileStore.java
new file mode 100644
index 0000000000..a4bc1d4c5c
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMNIOResourceFileStore.java
@@ -0,0 +1,50 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.dbeaver.model.nio.NIOFileStore;
+import org.jkiss.dbeaver.model.rm.RMResource;
+
+import java.io.IOException;
+
+public class RMNIOResourceFileStore extends NIOFileStore {
+    private final RMResource rmResource;
+
+    public RMNIOResourceFileStore(RMResource rmResource) {
+        this.rmResource = rmResource;
+    }
+
+    @Override
+    public String name() {
+        return rmResource.getName();
+    }
+
+    @Override
+    public String type() {
+        return "rmfs";
+    }
+
+    @Override
+    public boolean isReadOnly() {
+        return false;
+    }
+
+    @Override
+    public long getTotalSpace() throws IOException {
+        return rmResource.getLength();
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMOutputStream.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMOutputStream.java
new file mode 100644
index 0000000000..09fee299e9
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMOutputStream.java
@@ -0,0 +1,46 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.dbeaver.DBException;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.util.Arrays;
+
+public class RMOutputStream extends ByteArrayOutputStream {
+    private final RMPath rmPath;
+
+    public RMOutputStream(RMPath rmPath) {
+        this.rmPath = rmPath;
+    }
+
+    @Override
+    public void close() throws IOException {
+        try {
+            rmPath.getFileSystem().getRmController().setResourceContents(
+                rmPath.getRmProjectId(),
+                rmPath.getResourcePath(),
+                Arrays.copyOfRange(buf, 0, count),
+                true
+            );
+        } catch (DBException e) {
+            throw new IOException("Failed to write data to the resource: " + e.getMessage(), e);
+        }
+        super.close();
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMPath.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMPath.java
new file mode 100644
index 0000000000..a1e9a49c37
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMPath.java
@@ -0,0 +1,205 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.code.NotNull;
+import org.jkiss.code.Nullable;
+import org.jkiss.dbeaver.DBException;
+import org.jkiss.dbeaver.model.nio.NIOPath;
+import org.jkiss.utils.CommonUtils;
+
+import java.io.IOException;
+import java.net.URI;
+import java.nio.file.LinkOption;
+import java.nio.file.Path;
+import java.util.Arrays;
+
+public class RMPath extends NIOPath {
+    @NotNull
+    private final RMNIOFileSystem rmNioFileSystem;
+    @Nullable
+    private final String rmProjectId;
+
+    public RMPath(
+        @NotNull RMNIOFileSystem rmNioFileSystem
+    ) {
+        super(null, rmNioFileSystem);
+        this.rmNioFileSystem = rmNioFileSystem;
+        this.rmProjectId = rmNioFileSystem.getRmProjectId();
+    }
+
+    public RMPath(
+        @NotNull RMNIOFileSystem rmNioFileSystem,
+        @NotNull String path
+    ) {
+        super(path, rmNioFileSystem);
+        this.rmNioFileSystem = rmNioFileSystem;
+        this.rmProjectId = rmNioFileSystem.getRmProjectId();
+    }
+
+    @Override
+    public RMNIOFileSystem getFileSystem() {
+        return rmNioFileSystem;
+    }
+
+    @Override
+    public Path getRoot() {
+        if (isProjectPath()) {
+            return null;
+        }
+        return new RMPath(rmNioFileSystem);
+    }
+
+    @Override
+    public Path getFileName() {
+        return this;
+    }
+
+    @Override
+    public Path getParent() {
+        // project is root and have no parent
+        if (isProjectPath()) {
+            return null;
+        }
+
+        String[] parts = pathParts();
+        if (parts.length == 1) {
+            return new RMPath(rmNioFileSystem); // project is parent
+        }
+        //return parent folder
+        String[] parentParts = Arrays.copyOfRange(parts, 0, parts.length - 1);
+        return new RMPath(rmNioFileSystem, String.join(getFileSystem().getSeparator(), parentParts));
+    }
+
+    @Override
+    public int getNameCount() {
+        return pathParts().length;
+    }
+
+    @Override
+    public boolean startsWith(@NotNull Path other) {
+        if (!(other instanceof RMPath)) {
+            return false;
+        }
+        return toString().startsWith(other.toString());
+    }
+
+    @Override
+    public Path normalize() {
+        return this;
+    }
+
+    @Override
+    public Path resolve(Path other) {
+        RMPath rmOther = (RMPath) other;
+        if (!rmOther.rmProjectId.equals(rmProjectId)) {
+            throw new IllegalArgumentException("Cannot resolve path from other project");
+        }
+        return resolve(rmOther.getResourcePath());
+    }
+
+    @Override
+    public Path resolve(String other) {
+        if (CommonUtils.isEmpty(other)) {
+            return this;
+        }
+        return new RMPath(
+            rmNioFileSystem,
+            resolveString(other)
+        );
+    }
+
+    @Override
+    public URI toUri() {
+        var fileSystem = getFileSystem();
+        var uriBuilder = new StringBuilder(fileSystem.provider().getScheme())
+            .append("://")
+            .append(rmProjectId);
+
+        String rmResourcePath = getResourcePath();
+        if (rmResourcePath != null) {
+            uriBuilder.append(fileSystem.getSeparator())
+                .append(rmResourcePath);
+        }
+
+        return URI.create(uriBuilder.toString());
+    }
+
+    @Override
+    public Path toAbsolutePath() {
+        if (isAbsolute()) {
+            return this;
+        }
+        return new RMPath(rmNioFileSystem, "/" + path);
+    }
+
+    @Override
+    public Path toRealPath(@NotNull LinkOption... options) throws IOException {
+        return toAbsolutePath();
+    }
+
+    @Override
+    public Path relativize(@NotNull Path other) {
+        var relativeUri = toUri().resolve(other.toUri());
+        return new RMPath(rmNioFileSystem, relativeUri.getPath());
+    }
+
+    @Override
+    public Path getName(int index) {
+        String[] parts = pathParts();
+        if (index < 0 || index > parts.length) {
+            throw new IllegalArgumentException("Invalid index value: " + index);
+        }
+        return new RMPath(rmNioFileSystem, parts[index]);
+    }
+
+    @Override
+    public Path subpath(int beginIndex, int endIndex) {
+        String[] parts = pathParts();
+        if (beginIndex < 0 || beginIndex > parts.length) {
+            throw new IllegalArgumentException("Invalid begin index value: " + beginIndex);
+        }
+
+        if (endIndex < 0 || endIndex > parts.length || endIndex < beginIndex) {
+            throw new IllegalArgumentException("Invalid end index value: " + endIndex);
+        }
+
+        String[] subParts = Arrays.copyOfRange(parts, beginIndex, endIndex);
+
+        return new RMPath(rmNioFileSystem, String.join(getFileSystem().getSeparator(), subParts));
+    }
+
+    @Nullable
+    public String getResourcePath() {
+        return path;
+    }
+
+    public boolean isRmRootPath() {
+        return rmProjectId == null && CommonUtils.isEmpty(path);
+    }
+    public boolean isProjectPath() {
+        return rmProjectId != null && CommonUtils.isEmpty(path);
+    }
+
+    @NotNull
+    public String getRmProjectId() throws DBException {
+        if (rmProjectId == null) {
+            throw new DBException("Project id not specified");
+        }
+        return rmProjectId;
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMResourceBasicAttribute.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMResourceBasicAttribute.java
new file mode 100644
index 0000000000..2387e3e07e
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMResourceBasicAttribute.java
@@ -0,0 +1,48 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.code.NotNull;
+import org.jkiss.dbeaver.model.nio.NIOFileBasicAttribute;
+import org.jkiss.dbeaver.model.rm.RMResource;
+
+import java.nio.file.attribute.FileTime;
+
+public class RMResourceBasicAttribute extends NIOFileBasicAttribute {
+
+    @NotNull
+    private final RMResource rmResource;
+
+    public RMResourceBasicAttribute(@NotNull RMResource rmResource) {
+        this.rmResource = rmResource;
+    }
+
+    @Override
+    public FileTime lastModifiedTime() {
+        return FileTime.fromMillis(rmResource.getLastModified());
+    }
+
+    @Override
+    public boolean isDirectory() {
+        return rmResource.isFolder();
+    }
+
+    @Override
+    public long size() {
+        return rmResource.getLength();
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMRootBasicAttribute.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMRootBasicAttribute.java
new file mode 100644
index 0000000000..5ce279ae3f
--- /dev/null
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/fs/nio/RMRootBasicAttribute.java
@@ -0,0 +1,38 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm.fs.nio;
+
+import org.jkiss.dbeaver.model.nio.NIOFileBasicAttribute;
+
+import java.nio.file.attribute.FileTime;
+
+public class RMRootBasicAttribute extends NIOFileBasicAttribute {
+    @Override
+    public FileTime lastModifiedTime() {
+        throw new UnsupportedOperationException();
+    }
+
+    @Override
+    public boolean isDirectory() {
+        return true;
+    }
+
+    @Override
+    public long size() {
+        return 0;
+    }
+}
diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/local/LocalResourceController.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/local/LocalResourceController.java
index dacdc3ea4d..34d11920e8 100644
--- a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/local/LocalResourceController.java
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/rm/local/LocalResourceController.java
@@ -730,6 +730,12 @@ public RMResource[] getResourcePath(@NotNull String projectId, @NotNull String r
         return makeResourcePath(projectId, getTargetPath(projectId, resourcePath), false).toArray(RMResource[]::new);
     }
 
+    @Nullable
+    @Override
+    public RMResource getResource(@NotNull String projectId, @NotNull String resourcePath) throws DBException {
+        return makeResourceFromPath(projectId, getTargetPath(projectId, resourcePath), null, false, false, false);
+    }
+
     @NotNull
     @Override
     public byte[] getResourceContents(@NotNull String projectId, @NotNull String resourcePath) throws DBException {
diff --git a/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/server/jobs/SessionStateJob.java b/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/server/jobs/SessionStateJob.java
index fd3c72e29d..a7451a897b 100644
--- a/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/server/jobs/SessionStateJob.java
+++ b/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/server/jobs/SessionStateJob.java
@@ -23,7 +23,7 @@
 
 public class SessionStateJob extends PeriodicSystemJob {
     private static final Log log = Log.getLog(SessionStateJob.class);
-    private static final int PERIOD_MS = 30_000; // once per 60 seconds
+    private static final int PERIOD_MS = 30_000; // once per 30 seconds
 
     public SessionStateJob(@NotNull CBPlatform platform) {
         super("Session state sender", platform, PERIOD_MS);
diff --git a/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/model/rm/RMNIOTest.java b/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/model/rm/RMNIOTest.java
new file mode 100644
index 0000000000..7aeb0c9f6d
--- /dev/null
+++ b/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/model/rm/RMNIOTest.java
@@ -0,0 +1,177 @@
+/*
+ * DBeaver - Universal Database Manager
+ * Copyright (C) 2010-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.cloudbeaver.model.rm;
+
+import io.cloudbeaver.model.rm.fs.nio.RMNIOFileSystem;
+import io.cloudbeaver.model.rm.fs.nio.RMNIOFileSystemProvider;
+import io.cloudbeaver.model.rm.fs.nio.RMPath;
+import io.cloudbeaver.model.session.WebSession;
+import io.cloudbeaver.server.CBConstants;
+import io.cloudbeaver.test.platform.CEServerTestSuite;
+import io.cloudbeaver.utils.WebTestUtils;
+import org.jkiss.dbeaver.DBException;
+import org.jkiss.dbeaver.model.auth.SMAuthStatus;
+import org.jkiss.dbeaver.model.data.json.JSONUtils;
+import org.jkiss.dbeaver.model.rm.RMController;
+import org.jkiss.dbeaver.model.rm.RMProject;
+import org.jkiss.utils.SecurityUtils;
+import org.junit.AfterClass;
+import org.junit.Assert;
+import org.junit.BeforeClass;
+import org.junit.Test;
+
+import java.io.IOException;
+import java.net.CookieManager;
+import java.net.URI;
+import java.net.http.HttpClient;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.util.Map;
+import java.util.Set;
+import java.util.stream.Collectors;
+
+public class RMNIOTest {
+
+    private static WebSession webSession;
+    private static RMProject testProject;
+    private static RMNIOFileSystemProvider rmFsProvider;
+
+    @BeforeClass
+    public static void init() throws Exception {
+        var cookieManager = new CookieManager();
+        var client = HttpClient.newBuilder()
+            .cookieHandler(cookieManager)
+            .version(HttpClient.Version.HTTP_2)
+            .build();
+        Map<String, Object> authInfo = WebTestUtils.authenticateUser(
+            client, CEServerTestSuite.getScriptsPath(), CEServerTestSuite.GQL_API_URL);
+        Assert.assertEquals(SMAuthStatus.SUCCESS.name(), JSONUtils.getString(authInfo, "authStatus"));
+
+        String sessionId = cookieManager.getCookieStore().getCookies()
+            .stream()
+            .filter(cookie -> cookie.getName().equals(CBConstants.CB_SESSION_COOKIE_NAME))
+            .findFirst()
+            .get()
+            .getValue();
+        webSession = (WebSession) CEServerTestSuite.getTestApp().getSessionManager().getSession(sessionId);
+        Assert.assertNotNull(webSession);
+        var projectName = "NIO_Test" + SecurityUtils.generateUniqueId();
+        testProject = webSession.getRmController().createProject(projectName, null);
+        rmFsProvider = new RMNIOFileSystemProvider(webSession.getRmController());
+    }
+
+    @AfterClass
+    public static void destroy() throws Exception {
+        if (webSession != null && testProject != null) {
+            webSession.getUserContext().getRmController().deleteProject(testProject.getId());
+        }
+    }
+
+    @Test
+    public void projectPathTest() throws DBException {
+        var projectUri = getProjectUri();
+        RMPath path = (RMPath) rmFsProvider.getPath(projectUri);
+        Assert.assertEquals(path.getRmProjectId(), testProject.getId());
+        Assert.assertTrue(path.isProjectPath());
+        Assert.assertTrue(path.isAbsolute());
+        Assert.assertNull(path.getParent());
+        Assert.assertNull(path.getRoot());
+        Assert.assertTrue(Files.isDirectory(path));
+        Assert.assertTrue(Files.exists(path));
+    }
+
+    @Test
+    public void testNotExistProject() {
+        RMPath notExistPath = new RMPath(new RMNIOFileSystem("s_not_exist", webSession.getRmController(), rmFsProvider));
+        Assert.assertFalse(Files.exists(notExistPath));
+    }
+
+    @Test
+    public void testNioProjectOperations() throws IOException, DBException {
+        var randomName = SecurityUtils.generateUniqueId();
+        String randomProject = "s_random_project_" + randomName;
+
+        RMPath newProjectPath = new RMPath(new RMNIOFileSystem(randomProject, webSession.getRmController(), rmFsProvider));
+        Assert.assertFalse(Files.exists(newProjectPath));
+
+        //create project via nio
+        Files.createDirectory(newProjectPath);
+        Assert.assertTrue(Files.exists(newProjectPath));
+        Assert.assertNotNull(webSession.getRmController().getProject(randomProject, false, false));
+
+        //delete project via nio
+        Files.delete(newProjectPath);
+        Assert.assertFalse(Files.exists(newProjectPath));
+        Assert.assertNull(webSession.getRmController().getProject(randomProject, false, false));
+    }
+
+    @Test
+    public void testResolve() {
+        RMPath rootPath = (RMPath) rmFsProvider.getPath(getProjectUri());
+        String scriptName = "child.sql";
+        Path scriptPath = rootPath.resolve(scriptName);
+        Assert.assertEquals(getProjectUri() + "/" + "child.sql", scriptPath.toString());
+    }
+
+    @Test
+    public void testListFiles() throws DBException, IOException {
+        RMPath rootPath = (RMPath) rmFsProvider.getPath(getProjectUri());
+        RMController rm = webSession.getRmController();
+        String file1 = "folder" + SecurityUtils.generateUniqueId();
+        String file2 = "script" + SecurityUtils.generateUniqueId() + ".sql";
+        rm.createResource(testProject.getId(), file1, true);
+        rm.createResource(testProject.getId(), file2, false);
+        Set<String> filesFromNio =
+            Files.list(rootPath)
+                .map(path -> ((RMPath) path).getResourcePath())
+                .collect(Collectors.toSet());
+        Assert.assertTrue(filesFromNio.contains(file1));
+        Assert.assertTrue(filesFromNio.contains(file2));
+    }
+
+    @Test
+    public void testWriteResource() throws IOException, DBException {
+        RMPath rootPath = (RMPath) rmFsProvider.getPath(getProjectUri());
+        RMController rm = webSession.getRmController();
+        String script = "test_script_" + SecurityUtils.generateUniqueId() + ".sql";
+        RMPath scriptPath = (RMPath) rootPath.resolve(script);
+
+        //create file
+        Files.createFile(scriptPath);
+        Assert.assertTrue(Files.exists(scriptPath));
+        Assert.assertNotNull(rm.getResource(testProject.getId(), script));
+
+        //set content rm://s_test_project/test_script.sql
+
+        String sql = "select " + SecurityUtils.getRandom().nextInt(1000);
+        Files.writeString(scriptPath, sql);
+        String dataFromNio = Files.readString(scriptPath);
+        String dataFromRM = new String(rm.getResourceContents(testProject.getId(), script));
+        Assert.assertEquals(sql, dataFromNio);
+        Assert.assertEquals(sql, dataFromRM);
+
+        //delete
+        Files.delete(scriptPath);
+        Assert.assertFalse(Files.exists(scriptPath));
+        Assert.assertNull(rm.getResource(testProject.getId(), script));
+    }
+
+
+    private URI getProjectUri() {
+        return URI.create("rm://" + testProject.getId());
+    }
+}
diff --git a/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/test/platform/CEServerTestSuite.java b/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/test/platform/CEServerTestSuite.java
index cea79cfe56..9bd50a7fd8 100644
--- a/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/test/platform/CEServerTestSuite.java
+++ b/server/test/io.cloudbeaver.test.platform/src/io/cloudbeaver/test/platform/CEServerTestSuite.java
@@ -17,6 +17,7 @@
 
 package io.cloudbeaver.test.platform;
 
+import io.cloudbeaver.model.rm.RMNIOTest;
 import io.cloudbeaver.model.rm.lock.RMLockTest;
 import io.cloudbeaver.server.CBApplication;
 import io.cloudbeaver.server.CBApplicationCE;
@@ -36,7 +37,8 @@
         ConnectionsTest.class,
         AuthenticationTest.class,
         ResourceManagerTest.class,
-        RMLockTest.class
+        RMLockTest.class,
+        RMNIOTest.class
     }
 )
 public class CEServerTestSuite {

From 571d6b7c0a6af1a250f4b6ed01b23b038530a437 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Thu, 28 Sep 2023 01:02:49 +0200
Subject: [PATCH 6/9] CB-3864 migrate tree to css modules (#2003)

* CB-3864 migrate tree to css modules

* CB-3864 migrate extra components

* CB-3864 review fixes

* CB-3864 move editing and dragging props from base nav components

* CB-3864 add styles to renderer

* CB-3864 fix aws styles

* CB-3864 remove padding in projects renderer

* CB-3864 fix node hover effect

* CB-3864 remove custom tags

* CB-3864 remove config changes

* CB-3864 review fixes

* CB-3864 move NavigationNodeControl styles closer to the component

* CB-3864 chore: code cleanup

---------

Co-authored-by: Alexey <wrouds@gmail.com>
Co-authored-by: EvgeniaBzzz <139753579+EvgeniaBzzz@users.noreply.github.com>
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
---
 .../core-blocks/src/ActionIconButton.m.css    |  10 +
 .../ConnectionMark.m.css                      |  16 ++
 .../ConnectionMark.tsx                        |  30 +--
 .../packages/core-blocks/src/IconButton.m.css |   2 +-
 .../src/Tree/TreeNode/TreeNode.m.css          |   5 +
 .../src/Tree/TreeNode/TreeNode.tsx            |  15 +-
 .../src/Tree/TreeNode/TreeNodeControl.m.css   |  24 +++
 .../src/Tree/TreeNode/TreeNodeControl.tsx     |   9 +-
 .../src/Tree/TreeNode/TreeNodeExpand.m.css    |  23 +++
 .../src/Tree/TreeNode/TreeNodeExpand.tsx      |  25 ++-
 .../src/Tree/TreeNode/TreeNodeIcon.m.css      |  12 ++
 .../src/Tree/TreeNode/TreeNodeIcon.tsx        |  29 ++-
 .../src/Tree/TreeNode/TreeNodeName.m.css      |   8 +
 .../src/Tree/TreeNode/TreeNodeName.tsx        |  13 +-
 .../src/Tree/TreeNode/TreeNodeNested.m.css    |  10 +
 .../src/Tree/TreeNode/TreeNodeNested.tsx      |  23 ++-
 .../Tree/TreeNode/TreeNodeNestedMessage.m.css |   4 +
 .../Tree/TreeNode/TreeNodeNestedMessage.tsx   |  13 +-
 .../src/Tree/TreeNode/TreeNodeSelect.m.css    |   4 +
 .../src/Tree/TreeNode/TreeNodeSelect.tsx      |  22 +-
 .../src/Tree/TreeNode/TreeNodeStyles.ts       | 188 ------------------
 webapp/packages/core-blocks/src/index.ts      |   4 +-
 .../core-cli/configs/webpack.config.js        |   1 +
 .../ErrorDetailsDialog/ErrorDetailsDialog.tsx |  10 +-
 .../FiltersTableItem.tsx                      |  11 +-
 .../NavigationNodeProjectControl.m.css        |  35 ++++
 .../NavigationNodeProjectControl.tsx          |  58 +-----
 ...vigationTreeProjectsRendererRenderer.m.css |  12 ++
 ...navigationTreeProjectsRendererRenderer.tsx |  73 +++----
 .../src/Tree/ResourceManagerTree.m.css        |  29 +++
 .../src/Tree/ResourceManagerTree.tsx          |  58 ++----
 ...avigationTreeConnectionGroupRenderer.m.css |   8 +
 .../navigationTreeConnectionGroupRenderer.tsx |  30 +--
 .../ConnectionNavNodeControl.tsx              |  31 +--
 .../navTreeConnectionRenderer.tsx             |   7 +-
 .../ElementsTree/ElementsTree.m.css           |  51 +++++
 .../ElementsTree/ElementsTree.tsx             |  96 ++-------
 .../ElementsTreeContentLoader.tsx             |   7 +-
 .../ElementsTreeFilter.m.css                  |   5 +
 .../ElementsTreeTools/ElementsTreeFilter.tsx  |  20 +-
 .../ElementsTreeTools/ElementsTreeTools.tsx   |  18 +-
 .../ElementsTree/NavigationNodeComponent.ts   |   1 +
 .../NavigationTreeNode/NavigationNode.m.css   |   9 +
 .../NavigationTreeNode/NavigationNode.tsx     |  30 +--
 .../NAVIGATION_NODE_CONTROL_STYLES.ts         |  39 ----
 .../NavigationNodeControl.m.css               |  41 ++++
 .../NavigationNode/NavigationNodeControl.tsx  |  25 +--
 .../NavigationNode/NavigationNodeEditor.m.css |   9 +
 .../NavigationNode/NavigationNodeEditor.tsx   |  21 +-
 .../NavigationNode/NavigationNodeExpand.tsx   |   5 +-
 .../NavigationNode/NavigationNodeNested.m.css |   3 +
 .../NavigationNode/NavigationNodeNested.tsx   |  13 +-
 .../NavigationNodeControlRenderer.m.css       |   8 +
 .../NavigationNodeControlRenderer.tsx         |  31 ++-
 .../NavigationNodeDragged.tsx                 |   9 +-
 .../NavigationNodeElement.tsx                 |  14 +-
 .../TreeNodeMenu/TreeNodeMenu.m.css           |  21 ++
 .../TreeNodeMenu/TreeNodeMenu.tsx             |  20 +-
 .../NavigationTree/ElementsTreeTools.m.css    |   8 +
 .../src/NavigationTree/NavigationTree.m.css   |  29 +++
 .../src/NavigationTree/NavigationTree.tsx     | 113 ++++-------
 .../NavigationTree/NavigationTreePanel.m.css  |   6 +
 .../NavigationTree/NavigationTreePanel.tsx    |  20 +-
 .../NavigationNodeProjectControl.m.css        |  35 ++++
 .../NavigationNodeProjectControl.tsx          |  57 +-----
 ...vigationTreeProjectsRendererRenderer.m.css |  12 ++
 ...navigationTreeProjectsRendererRenderer.tsx |  70 +++----
 .../plugin-navigation-tree/src/index.ts       |   4 +
 68 files changed, 841 insertions(+), 861 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/ActionIconButton.m.css
 create mode 100644 webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.m.css
 create mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.m.css
 delete mode 100644 webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts
 create mode 100644 webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/NavigationTreeConnectionGroupRenderer.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.m.css
 delete mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NAVIGATION_NODE_CONTROL_STYLES.ts
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTreeTools.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.m.css
 create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css

diff --git a/webapp/packages/core-blocks/src/ActionIconButton.m.css b/webapp/packages/core-blocks/src/ActionIconButton.m.css
new file mode 100644
index 0000000000..62d354bcc9
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ActionIconButton.m.css
@@ -0,0 +1,10 @@
+.actionIconButton {
+  composes: theme-form-element-radius theme-ripple from global;
+
+  padding: 4px !important;
+  margin: 2px !important;
+  width: 24px !important;
+  height: 24px !important;
+  overflow: hidden;
+  flex-shrink: 0;
+}
diff --git a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.m.css b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.m.css
new file mode 100644
index 0000000000..8f1533dd3a
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.m.css
@@ -0,0 +1,16 @@
+.status {
+  composes: theme-background-positive from global;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  bottom: 0;
+  right: 0;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+
+  &.connected {
+    opacity: 1;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
index 1f9ebb35a8..22d0a349ee 100644
--- a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
+++ b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
@@ -5,32 +5,18 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css, use } from 'reshadow';
+import { observer } from 'mobx-react-lite';
 
-const styles = css`
-  status {
-    composes: theme-background-positive from global;
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    bottom: 0;
-    right: 0;
-    box-sizing: border-box;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-
-    &[|connected] {
-      opacity: 1;
-    }
-  }
-`;
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './ConnectionMark.m.css';
 
 interface Props {
   connected: boolean;
   className?: string;
 }
 
-export const ConnectionMark: React.FC<Props> = function ConnectionMark({ connected, className }) {
-  return styled(styles)(<status {...use({ connected })} className={className} />);
-};
+export const ConnectionMark: React.FC<Props> = observer(function ConnectionMark({ connected, className }) {
+  const styles = useS(style);
+  return <div className={s(styles, { status: true, connected }, className)} />;
+});
diff --git a/webapp/packages/core-blocks/src/IconButton.m.css b/webapp/packages/core-blocks/src/IconButton.m.css
index 61fd320c09..aab16ad798 100644
--- a/webapp/packages/core-blocks/src/IconButton.m.css
+++ b/webapp/packages/core-blocks/src/IconButton.m.css
@@ -14,4 +14,4 @@
     width: 100%;
     height: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.m.css
new file mode 100644
index 0000000000..8949559b9a
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.m.css
@@ -0,0 +1,5 @@
+.node {
+  box-sizing: border-box;
+  width: inherit;
+  min-width: 100%;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
index 256c38d27f..cc16d0f789 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
@@ -8,14 +8,14 @@
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { forwardRef } from 'react';
-import styled, { use } from 'reshadow';
 
-import { getComputed } from '../../getComputed';
+import { s } from '../../s';
 import { useObjectRef } from '../../useObjectRef';
 import { useObservableRef } from '../../useObservableRef';
+import { useS } from '../../useS';
 import type { ITreeNodeState } from './ITreeNodeState';
+import style from './TreeNode.m.css';
 import { ITreeNodeContext, TreeNodeContext } from './TreeNodeContext';
-import { TREE_NODE_STYLES } from './TreeNodeStyles';
 
 interface Props extends ITreeNodeState {
   className?: string;
@@ -48,6 +48,7 @@ export const TreeNode = observer<Props, HTMLDivElement | null>(
     },
     ref,
   ) {
+    const styles = useS(style);
     const handlersRef = useObjectRef(handlers);
 
     async function processAction(action: () => Promise<void>) {
@@ -113,12 +114,10 @@ export const TreeNode = observer<Props, HTMLDivElement | null>(
       },
     );
 
-    const elementExpanded = getComputed(() => nodeContext.externalExpanded ?? nodeContext.expanded);
-
-    return styled(TREE_NODE_STYLES)(
-      <node {...use({ expanded: elementExpanded })} ref={ref} className={className}>
+    return (
+      <div ref={ref} className={s(styles, { node: true }, className)}>
         <TreeNodeContext.Provider value={nodeContext}>{children}</TreeNodeContext.Provider>
-      </node>,
+      </div>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.m.css
new file mode 100644
index 0000000000..9147a3540b
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.m.css
@@ -0,0 +1,24 @@
+.treeNodeControl {
+  composes: theme-ripple theme-ripple-selectable from global;
+  box-sizing: border-box;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  padding: 2px 0 2px 0;
+  user-select: none;
+  white-space: nowrap;
+  position: initial !important;
+  outline: none;
+
+  &::before {
+    left: 0 !important;
+    top: auto !important;
+    height: inherit !important;
+    width: 100% !important;
+  }
+
+  & > * {
+    margin-right: 0;
+    margin-left: 4px;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
index cfd07665b3..f0a6f97052 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
@@ -10,11 +10,14 @@ import React, { forwardRef, useContext } from 'react';
 
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 
+import { s } from '../../s';
+import { useS } from '../../useS';
 import { EventTreeNodeClickFlag } from './EventTreeNodeClickFlag';
 import { EventTreeNodeExpandFlag } from './EventTreeNodeExpandFlag';
 import { EventTreeNodeSelectFlag } from './EventTreeNodeSelectFlag';
 import type { ITreeNodeState } from './ITreeNodeState';
 import { TreeNodeContext } from './TreeNodeContext';
+import style from './TreeNodeControl.m.css';
 
 const KEY = {
   ENTER: 'Enter',
@@ -25,15 +28,15 @@ interface Props extends ITreeNodeState {
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
-  big?: boolean;
   children?: React.ReactNode;
 }
 
 export const TreeNodeControl = observer<Props & React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>(
   forwardRef(function TreeNodeControl(
-    { title, group, disabled, loading, selected, expanded, externalExpanded, leaf, onClick, onMouseDown, className, children, big, ...rest },
+    { title, group, disabled, loading, selected, expanded, externalExpanded, leaf, onClick, onMouseDown, className, children, ...rest },
     ref,
   ) {
+    const styles = useS(style);
     const context = useContext(TreeNodeContext);
 
     if (!context) {
@@ -112,7 +115,7 @@ export const TreeNodeControl = observer<Props & React.HTMLAttributes<HTMLDivElem
         tabIndex={0}
         title={title}
         aria-selected={context.selected}
-        className={className}
+        className={s(styles, { treeNodeControl: true }, className)}
         onClick={handleClick}
         onMouseDown={handleMouseDown}
         onKeyDown={handleEnter}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.m.css
new file mode 100644
index 0000000000..c7df095e88
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.m.css
@@ -0,0 +1,23 @@
+.treeNodeExpand {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  opacity: 0.5;
+  width: 16px;
+  height: 16px;
+  transform: rotate(-90deg);
+  &.small {
+    display: block;
+  }
+
+  &.expanded {
+    transform: rotate(0deg);
+  }
+}
+
+.icon {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx
index 6c2edc76dc..24e0c263ff 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx
@@ -7,24 +7,18 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled, { css } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { getComputed } from '../../getComputed';
 import { Icon } from '../../Icon';
 import { Loader } from '../../Loader/Loader';
+import { s } from '../../s';
+import { useS } from '../../useS';
 import { useStateDelay } from '../../useStateDelay';
 import { EventTreeNodeExpandFlag } from './EventTreeNodeExpandFlag';
 import { TreeNodeContext } from './TreeNodeContext';
-
-const styles = css`
-  Icon {
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-  }
-`;
+import style from './TreeNodeExpand.m.css';
 
 interface Props {
   leaf?: boolean;
@@ -35,6 +29,7 @@ interface Props {
 }
 
 export const TreeNodeExpand = observer<Props>(function TreeNodeExpand({ leaf, big, filterActive, disabled, className }) {
+  const styles = useS(style);
   const context = useContext(TreeNodeContext);
 
   if (!context) {
@@ -90,10 +85,14 @@ export const TreeNodeExpand = observer<Props>(function TreeNodeExpand({ leaf, bi
     }
   }
 
-  return styled(styles)(
-    <arrow className={className} onClick={handleExpand} onDoubleClick={handleDbClick}>
+  return (
+    <div
+      className={s(styles, { treeNodeExpand: true, expanded: context.expanded, big }, className)}
+      onClick={handleExpand}
+      onDoubleClick={handleDbClick}
+    >
       {loading && <Loader small fullSize />}
-      {expandable && <Icon name={iconName} viewBox={viewBox} />}
-    </arrow>,
+      {expandable && <Icon name={iconName} className={s(styles, { icon: true })} viewBox={viewBox} />}
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.m.css
new file mode 100644
index 0000000000..20eb274d11
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.m.css
@@ -0,0 +1,12 @@
+.treeNodeIcon {
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.staticImage {
+  position: relative;
+  height: 100%;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.tsx
index a7841dc780..ea596bd1c5 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.tsx
@@ -5,30 +5,25 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
+import { observer } from 'mobx-react-lite';
 
+import { s } from '../../s';
 import { StaticImage } from '../../StaticImage';
-import { useStyles } from '../../useStyles';
-
-const styles = css`
-  StaticImage {
-    height: 100%;
-  }
-`;
+import { useS } from '../../useS';
+import style from './TreeNodeIcon.m.css';
 
 interface Props {
   icon?: string;
-  style?: ComponentStyle;
   className?: string;
 }
 
-export const TreeNodeIcon: React.FC<React.PropsWithChildren<Props>> = function TreeNodeIcon({ icon, style, className, children }) {
-  return styled(useStyles(styles, style))(
-    <icon className={className}>
-      {icon && <StaticImage icon={icon} />}
+export const TreeNodeIcon: React.FC<React.PropsWithChildren<Props>> = observer(function TreeNodeIcon({ icon, className, children }) {
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { treeNodeIcon: true }, className)}>
+      {icon && <StaticImage className={s(styles, { staticImage: true })} icon={icon} />}
       {children}
-    </icon>,
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.m.css
new file mode 100644
index 0000000000..cb76e298e2
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.m.css
@@ -0,0 +1,8 @@
+.treeNodeName {
+  position: relative;
+  box-sizing: border-box;
+  padding-right: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.tsx
index 891ef816e0..597bfe10f5 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.tsx
@@ -5,15 +5,22 @@
  * 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 { s } from '../../s';
+import { useS } from '../../useS';
+import style from './TreeNodeName.m.css';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-export const TreeNodeName: React.FC<Props> = function TreeNodeName({ className, children, ...rest }) {
+export const TreeNodeName: React.FC<Props> = observer(function TreeNodeName({ className, children, ...rest }) {
+  const styles = useS(style);
+
   return (
-    <div className={className} {...rest}>
+    <div className={s(styles, { treeNodeName: true }, className)} {...rest}>
       {children}
     </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.m.css
new file mode 100644
index 0000000000..cbb45c7cba
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.m.css
@@ -0,0 +1,10 @@
+.treeNodeNested {
+  box-sizing: border-box;
+  padding-left: 8px;
+  display: none;
+
+  &.root {
+    padding: 0;
+    display: block;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.tsx
index 8c15519db5..b8281fbe8c 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.tsx
@@ -5,18 +5,27 @@
  * 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 { forwardRef } from 'react';
 
+import { s } from '../../s';
+import { useS } from '../../useS';
+import style from './TreeNodeNested.m.css';
+
 interface Props extends React.PropsWithChildren {
   expanded?: boolean;
   root?: boolean;
   className?: string;
 }
 
-export const TreeNodeNested = forwardRef<HTMLDivElement, Props>(function TreeNodeNested({ className, children }, ref) {
-  return (
-    <div ref={ref} className={className}>
-      {children}
-    </div>
-  );
-});
+export const TreeNodeNested = observer(
+  forwardRef<HTMLDivElement, Props>(function TreeNodeNested({ root, className, children }, ref) {
+    const styles = useS(style);
+
+    return (
+      <div ref={ref} className={s(styles, { treeNodeNested: true, root }, className)}>
+        {children}
+      </div>
+    );
+  }),
+);
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.m.css
new file mode 100644
index 0000000000..d1e5ec397d
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.m.css
@@ -0,0 +1,4 @@
+.treeNodeNestedMessage {
+  composes: theme-typography--caption from global;
+  padding: 4px 12px;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.tsx
index 63bfe78446..bc7a8bb4b7 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.tsx
@@ -5,12 +5,17 @@
  * 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 { s } from '../../s';
+import { useS } from '../../useS';
+import style from './TreeNodeNestedMessage.m.css';
 
 interface Props {
-  big?: boolean;
   className?: string;
 }
 
-export const TreeNodeNestedMessage: React.FC<React.PropsWithChildren<Props>> = function TreeNodeNestedMessage({ className, children }) {
-  return <div className={className}>{children}</div>;
-};
+export const TreeNodeNestedMessage: React.FC<React.PropsWithChildren<Props>> = observer(function TreeNodeNestedMessage({ className, children }) {
+  const styles = useS(style);
+  return <div className={s(styles, { treeNodeNestedMessage: true }, className)}>{children}</div>;
+});
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.m.css
new file mode 100644
index 0000000000..88cba18609
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.m.css
@@ -0,0 +1,4 @@
+.loader {
+  width: 40px;
+  height: 40px;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx
index 93f0b39737..e84b5ad014 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeSelect.tsx
@@ -7,21 +7,16 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled, { css } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { Checkbox } from '../../FormControls/Checkboxes/Checkbox';
 import { Loader } from '../../Loader/Loader';
+import { s } from '../../s';
+import { useS } from '../../useS';
 import { EventTreeNodeSelectFlag } from './EventTreeNodeSelectFlag';
 import { TreeNodeContext } from './TreeNodeContext';
-
-const styles = css`
-  Loader {
-    width: 40px;
-    height: 40px;
-  }
-`;
+import style from './TreeNodeSelect.m.css';
 
 interface Props {
   group?: boolean;
@@ -42,6 +37,7 @@ export const TreeNodeSelect = observer<Props>(function TreeNodeSelect({
   loadIndicator,
   className,
 }) {
+  const styles = useS(style);
   const context = useContext(TreeNodeContext);
 
   if (!context) {
@@ -67,9 +63,13 @@ export const TreeNodeSelect = observer<Props>(function TreeNodeSelect({
     EventContext.set(event, EventTreeNodeSelectFlag);
   }
 
-  return styled(styles)(
+  return (
     <div className={className} onClick={handleClick} onDoubleClick={handleDbClick}>
-      {loading ? <Loader small /> : <Checkbox checked={selected} indeterminate={indeterminate} disabled={disabled} onChange={handleSelect} />}
-    </div>,
+      {loading ? (
+        <Loader className={s(styles, { loader: true })} small />
+      ) : (
+        <Checkbox checked={selected} indeterminate={indeterminate} disabled={disabled} onChange={handleSelect} />
+      )}
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts
deleted file mode 100644
index 3dc933e13c..0000000000
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 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 { css } from 'reshadow';
-
-export const TREE_NODE_STYLES = css`
-  TreeNodeControl {
-    composes: theme-ripple theme-ripple-selectable from global;
-  }
-  TreeNodeNestedMessage {
-    composes: theme-text-text-hint-on-light from global;
-  }
-  node {
-    box-sizing: border-box;
-    width: inherit;
-    min-width: 100%;
-
-    &[use|expanded] {
-      & > TreeNodeNested {
-        display: block;
-      }
-
-      & > TreeNodeControl > TreeNodeExpand {
-        transform: rotate(0deg);
-      }
-    }
-
-    & TreeNodeControl {
-      box-sizing: border-box;
-      height: 22px;
-      display: flex;
-      align-items: center;
-      padding: 2px 0 2px 0;
-      user-select: none;
-      white-space: nowrap;
-      position: initial;
-      outline: none;
-
-      &::before {
-        left: 0;
-        top: auto;
-        height: inherit;
-        width: 100%;
-      }
-
-      &[|dragging] {
-        opacity: 0.6;
-      }
-
-      &[|editing]::before {
-        display: none;
-      }
-
-      & > * {
-        margin-right: 0;
-        margin-left: 4px;
-      }
-
-      & TreeNodeName {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  TreeNodeExpand {
-    display: flex;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    opacity: 0.5;
-    width: 16px;
-    height: 16px;
-    transform: rotate(-90deg);
-    & [|size='small'] {
-      display: block;
-    }
-
-    & [|size='big'] {
-      display: none;
-    }
-  }
-
-  NavigationNode[dragging] {
-    opacity: 0.5 !important;
-  }
-
-  TreeNodeIcon {
-    box-sizing: border-box;
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-  }
-
-  TreeNodeName {
-    box-sizing: border-box;
-    padding-right: 0;
-    display: flex;
-    align-items: center;
-    margin-right: 4px;
-  }
-
-  TreeNodeFilter {
-    position: relative;
-    min-width: 24px;
-    min-height: 24px;
-    display: flex;
-    align-items: center;
-  }
-
-  TreeNodeIcon,
-  TreeNodeExpand,
-  TreeNodeName {
-    position: relative;
-  }
-
-  TreeNodeNested {
-    box-sizing: border-box;
-    padding-left: 8px;
-    display: none;
-
-    &[root] {
-      padding: 0;
-      display: block;
-    }
-
-    &[expanded] {
-      display: block;
-    }
-  }
-
-  TreeNodeNestedMessage {
-    composes: theme-typography--caption from global;
-    padding: 4px 12px;
-
-    &[big] {
-      padding: 4px 24px;
-    }
-  }
-
-  tree-box[|big] {
-    & TreeNodeNestedMessage {
-      padding: 4px 24px;
-    }
-  }
-
-  node TreeNodeControl[big] {
-    height: 46px;
-    padding: 0px 16px;
-
-    & TreeNodeName {
-      margin: 0;
-      padding-right: 8px;
-      padding-left: 8px;
-    }
-    & TreeNodeIcon {
-      width: 24px;
-      height: 24px;
-    }
-    & TreeNodeExpand {
-      width: 16px;
-      height: 16px;
-    }
-
-    & TreeNodeExpand [|size='small'] {
-      display: none;
-    }
-
-    & TreeNodeExpand [|size='big'] {
-      display: block;
-    }
-
-    & > * {
-      margin-right: 8px;
-      margin-left: 8px;
-    }
-
-    & TreeNodeSelect {
-      margin: 0;
-    }
-  }
-
-  node TreeNodeControl[big] + TreeNodeNested {
-    padding-left: 24px;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index a9d36511d4..d0fcbea067 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -25,6 +25,7 @@ export * from './ConnectionImageWithMask/ConnectionImageWithMask';
 export { default as ConnectionImageWithMaskSvgStyles } from './ConnectionImageWithMask/ConnectionImageWithMaskSvg.m.css';
 
 export * from './Menu/ACTION_ICON_BUTTON_STYLES';
+export { default as ActionIconButtonStyles } from './ActionIconButton.m.css';
 export * from './Menu/Menu';
 export { default as MenuStyles } from './Menu/Menu.m.css';
 export * from './Menu/MenuBarSmallItem';
@@ -106,12 +107,13 @@ export * from './Tree/TreeNode/TreeNodeName';
 export * from './Tree/TreeNode/TreeNodeNested';
 export * from './Tree/TreeNode/TreeNodeNestedMessage';
 export * from './Tree/TreeNode/TreeNodeSelect';
-export * from './Tree/TreeNode/TreeNodeStyles';
 export * from './Button';
 export * from './ToolsPanel/ToolsAction';
 export * from './ToolsPanel/ToolsPanel';
 export { default as ToolsPanelStyles } from './ToolsPanel/ToolsPanel.m.css';
 export { default as ToolsActionStyles } from './ToolsPanel/ToolsAction.m.css';
+export { default as TreeNodeNestedMessageStyles } from './Tree/TreeNode/TreeNodeNestedMessage.m.css';
+export { default as TreeNodeStyles } from './Tree/TreeNode/TreeNode.m.css';
 export * from './FormControls/Checkboxes/Checkbox';
 export * from './FormControls/Checkboxes/FieldCheckbox';
 export * from './FormControls/Checkboxes/CheckboxMarkup';
diff --git a/webapp/packages/core-cli/configs/webpack.config.js b/webapp/packages/core-cli/configs/webpack.config.js
index d43cd1c56a..8976486b15 100644
--- a/webapp/packages/core-cli/configs/webpack.config.js
+++ b/webapp/packages/core-cli/configs/webpack.config.js
@@ -242,6 +242,7 @@ module.exports = (env, argv) => {
     plugins: [
       new ForkTsCheckerWebpackPlugin({
         typescript: {
+          typescriptPath: require.resolve('typescript'),
           configFile: resolve('tsconfig.json'),
           configOverwrite: {
             include: ['**/src/**/*.ts', '**/src/**/*.tsx'],
diff --git a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
index e1ac728334..35bd0e3044 100644
--- a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
+++ b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
@@ -19,13 +19,13 @@ function DisplayErrorInfo({ error }: { error: IErrorInfo }) {
 
   return (
     <>
-      <property className={s(styles, { property: true })}>
-        {error.isHtml ? <Iframe srcDoc={error.message} /> : <message className={s(styles, { message: true })}>{error.message}</message>}
-      </property>
+      <div className={s(styles, { property: true })}>
+        {error.isHtml ? <Iframe srcDoc={error.message} /> : <div className={s(styles, { message: true })}>{error.message}</div>}
+      </div>
       {error.stackTrace && (
-        <property className={s(styles, { property: true })}>
+        <div className={s(styles, { property: true })}>
           <Textarea className={s(styles, { textarea: true })} value={error.stackTrace} readOnly embedded />
-        </property>
+        </div>
       )}
     </>
   );
diff --git a/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx b/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx
index 04cabb7518..c316e6b100 100644
--- a/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx
+++ b/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx
@@ -6,9 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { ACTION_ICON_BUTTON_STYLES, IconButton, s, TableColumnValue, TableItem, useS } from '@cloudbeaver/core-blocks';
+import { ActionIconButtonStyles, IconButton, s, TableColumnValue, TableItem, useS } from '@cloudbeaver/core-blocks';
 
 import styles from './FiltersTableItem.m.css';
 
@@ -21,14 +20,14 @@ interface Props {
 }
 
 export const FiltersTableItem = observer<Props>(function FiltersTableItem({ id, name, disabled, className, onDelete }) {
-  const style = useS(styles);
+  const style = useS(ActionIconButtonStyles, styles);
 
-  return styled(ACTION_ICON_BUTTON_STYLES)(
+  return (
     <TableItem className={s(style, { tableItem: true }, className)} item={id} title={name} disabled={disabled} selectDisabled={disabled}>
       <TableColumnValue>{name}</TableColumnValue>
       <TableColumnValue className={s(style, { deleteColumnCell: true })} flex>
-        <IconButton name="cross-bold" onClick={() => onDelete(id)} />
+        <IconButton className={s(ActionIconButtonStyles, { actionIconButton: true })} name="cross-bold" onClick={() => onDelete(id)} />
       </TableColumnValue>
-    </TableItem>,
+    </TableItem>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.m.css b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.m.css
new file mode 100644
index 0000000000..ca25ed8676
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.m.css
@@ -0,0 +1,35 @@
+.treeNodeControl {
+  transition: opacity 0.3s ease;
+  opacity: 1;
+
+  &.outdated {
+    opacity: 0.5;
+  }
+}
+
+.treeNodeControl:hover > .portal,
+.treeNodeControl[aria-selected='true'] > .portal,
+.portal:focus-within {
+  visibility: visible;
+}
+
+.treeNodeName {
+  composes: theme-text-text-hint-on-light theme-typography--caption from global;
+  height: 100%;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.portal {
+  position: relative;
+  box-sizing: border-box;
+  margin-left: auto !important;
+  margin-right: 8px !important;
+  visibility: hidden;
+}
+
+.nameBox {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx
index c55550bf4f..3857ed177b 100644
--- a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
 import React, { forwardRef, useContext } from 'react';
 import styled, { css, use } from 'reshadow';
 
-import { getComputed, TREE_NODE_STYLES, TreeNodeContext, TreeNodeControl, TreeNodeName, useMouseContextMenu } from '@cloudbeaver/core-blocks';
+import { getComputed, s, TreeNodeContext, TreeNodeControl, TreeNodeName, useMouseContextMenu, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
@@ -23,47 +23,15 @@ import {
   NavTreeControlProps,
   TreeNodeMenuLoader,
 } from '@cloudbeaver/plugin-navigation-tree';
+import { ResourceManagerService } from '@cloudbeaver/plugin-resource-manager';
 
 import { getRmProjectNodeId } from '../../NavNodes/getRmProjectNodeId';
 import { DATA_CONTEXT_RESOURCE_MANAGER_TREE_RESOURCE_TYPE_ID } from '../DATA_CONTEXT_RESOURCE_MANAGER_TREE_RESOURCE_TYPE_ID';
-import { ResourceManagerService } from '@cloudbeaver/plugin-resource-manager';
-
-const styles = css`
-  TreeNodeControl {
-    transition: opacity 0.3s ease;
-    opacity: 1;
-
-    &[|outdated] {
-      opacity: 0.5;
-    }
-  }
-  TreeNodeControl:hover > portal,
-  TreeNodeControl:global([aria-selected='true']) > portal,
-  portal:focus-within {
-    visibility: visible;
-  }
-  TreeNodeName {
-    composes: theme-text-text-hint-on-light theme-typography--caption from global;
-    height: 100%;
-    max-width: 250px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  portal {
-    position: relative;
-    box-sizing: border-box;
-    margin-left: auto !important;
-    margin-right: 8px !important;
-    visibility: hidden;
-  }
-  name-box {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
+import style from './NavigationNodeProjectControl.m.css';
 
 export const NavigationNodeProjectControl: NavTreeControlComponent = observer<NavTreeControlProps, HTMLDivElement>(
   forwardRef(function NavigationNodeProjectControl({ node, dndElement, dndPlaceholder, className }, ref) {
+    const styles = useS(style);
     const mouseContextMenu = useMouseContextMenu();
     const viewContext = useContext(CaptureViewContext);
     const elementsTreeContext = useContext(ElementsTreeContext);
@@ -125,26 +93,22 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer<Na
       return null;
     }
 
-    return styled(
-      TREE_NODE_STYLES,
-      styles,
-    )(
+    return (
       <TreeNodeControl
         ref={ref}
         onClick={handleClick}
         onContextMenu={handleContextMenuOpen}
-        {...use({ outdated, dragging: dndElement })}
-        className={className}
+        className={s(styles, { treeNodeControl: true, outdated,  }, className)}
       >
-        <TreeNodeName title={name}>
-          <name-box>{name}</name-box>
+        <TreeNodeName title={name} className={s(styles, { treeNodeName: true })}>
+          <div className={s(styles, { nameBox: true })}>{name}</div>
         </TreeNodeName>
         {!dndPlaceholder && (
-          <portal onClick={handlePortalClick}>
+          <div onClick={handlePortalClick} className={s(styles, { portal: true })}>
             <TreeNodeMenuLoader mouseContextMenu={mouseContextMenu} node={node} selected={selected} />
-          </portal>
+          </div>
         )}
-      </TreeNodeControl>,
+      </TreeNodeControl>
     );
   }),
 );
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css
new file mode 100644
index 0000000000..ca67e04bd2
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css
@@ -0,0 +1,12 @@
+.projectNode {
+  margin-top: 8px;
+
+  &.project:only-child,
+  &.hideProjects {
+    margin-top: 0px;
+  }
+
+  & > .navigationNodeNested {
+    padding-left: 0 !important;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx
index 5143101c87..a6158666ee 100644
--- a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled, { css, use } from 'reshadow';
 
-import { getComputed, Translate, TREE_NODE_STYLES, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
+import { getComputed, s, SContext, StyleRegistry, Translate, TreeNodeNestedMessage, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import type { NavNodeInfoResource, ProjectsNavNodeService } from '@cloudbeaver/core-navigation-tree';
 import { ProjectsService } from '@cloudbeaver/core-projects';
@@ -19,32 +18,33 @@ import {
   ElementsTreeContext,
   type IElementsTreeCustomRenderer,
   isDraggingInsideProject,
+  NavigationNodeControlRendererStyles,
+  NavigationNodeNestedStyles,
   type NavigationNodeRendererComponent,
   NavigationNodeRendererLoader,
   useNode,
 } from '@cloudbeaver/plugin-navigation-tree';
-
-import { NavigationNodeProjectControl } from './NavigationNodeProjectControl';
 import type { ResourceManagerService } from '@cloudbeaver/plugin-resource-manager';
 
-const nestedStyles = css`
-  TreeNode {
-    margin-top: 8px;
-
-    &[|project]:only-child,
-    &[|hideProjects] {
-      margin-top: 0px;
-
-      & Control {
-        display: none;
-      }
-    }
-
-    & NavigationNodeNested {
-      padding-left: 0 !important;
-    }
-  }
-`;
+import { NavigationNodeProjectControl } from './NavigationNodeProjectControl';
+import style from './NavigationTreeProjectsRendererRenderer.m.css';
+
+const registry: StyleRegistry = [
+  [
+    NavigationNodeNestedStyles,
+    {
+      mode: 'append',
+      styles: [style],
+    },
+  ],
+  [
+    NavigationNodeControlRendererStyles,
+    {
+      mode: 'append',
+      styles: [style],
+    },
+  ],
+];
 
 export function navigationTreeProjectsRendererRenderer(
   navNodeInfoResource: NavNodeInfoResource,
@@ -88,6 +88,7 @@ const ProjectRenderer: NavigationNodeRendererComponent = observer(function Manag
   className,
   expanded,
 }) {
+  const styles = useS(style);
   const projectsService = useService(ProjectsService);
   const elementsTreeContext = useContext(ElementsTreeContext);
 
@@ -105,26 +106,26 @@ const ProjectRenderer: NavigationNodeRendererComponent = observer(function Manag
   const singleProject = projectsService.activeProjects.length === 1;
 
   if (!node) {
-    return styled(TREE_NODE_STYLES)(
+    return (
       <TreeNodeNestedMessage>
         <Translate token="app_navigationTree_node_not_found" />
-      </TreeNodeNestedMessage>,
+      </TreeNodeNestedMessage>
     );
   }
 
   const project = node.nodeType === NAV_NODE_TYPE_RM_PROJECT && singleProject && !isDragging;
 
-  return styled(nestedStyles)(
-    <NavigationNodeRendererLoader
-      node={node}
-      path={path}
-      expanded={expanded}
-      dragging={dragging}
-      className={className}
-      control={NavigationNodeProjectControl}
-      style={nestedStyles}
-      component={component}
-      {...use({ hideProjects, project })}
-    />,
+  return (
+    <SContext registry={registry}>
+      <NavigationNodeRendererLoader
+        node={node}
+        path={path}
+        expanded={expanded}
+        dragging={dragging}
+        className={s(styles, { projectNode: true, hideProjects, project }, className)}
+        control={NavigationNodeProjectControl}
+        component={component}
+      />
+    </SContext>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.m.css b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.m.css
new file mode 100644
index 0000000000..66a243a47c
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.m.css
@@ -0,0 +1,29 @@
+.captureView {
+  outline: none;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+}
+.elementsTreeLoader {
+  min-width: 100%;
+  width: max-content;
+}
+.loader {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  min-width: 240px;
+}
+.center {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+.message {
+  padding: 24px;
+  box-sizing: border-box;
+  max-width: 240px;
+  text-align: center;
+  margin: auto;
+}
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.tsx b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.tsx
index a9f86adb9f..1978246aea 100644
--- a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.tsx
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ResourceManagerTree.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import styled, { css } from 'reshadow';
 
-import { getComputed, useResource, useUserData } from '@cloudbeaver/core-blocks';
+import { getComputed, s, useResource, useS, useUserData } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { NavNodeInfoResource, NavTreeResource, ProjectsNavNodeService } from '@cloudbeaver/core-navigation-tree';
 import { ProjectInfoResource, ProjectsService } from '@cloudbeaver/core-projects';
@@ -25,6 +24,7 @@ import {
   NavigationTreeService,
   validateElementsTreeSettings,
 } from '@cloudbeaver/plugin-navigation-tree';
+import { ResourceManagerService } from '@cloudbeaver/plugin-resource-manager';
 
 import { navigationTreeProjectFilter } from './ProjectsRenderer/navigationTreeProjectFilter';
 import { navigationTreeProjectSearchCompare } from './ProjectsRenderer/navigationTreeProjectSearchCompare';
@@ -33,47 +33,16 @@ import { navigationTreeProjectsRendererRenderer } from './ProjectsRenderer/navig
 import { navigationTreeResourceTypeFilter } from './ProjectsRenderer/navigationTreeResourceTypeFilter';
 import { ProjectsSettingsPlaceholderElement } from './ProjectsRenderer/ProjectsSettingsForm';
 import { navigationTreeResourceExpandStateGetter } from './ResourceFolderRenderer/navigationTreeResourceExpandStateGetter';
+import style from './ResourceManagerTree.m.css';
 import { ResourceManagerTreeCaptureViewContext } from './ResourceManagerTreeCaptureViewContext';
 import { transformResourceNodeInfo } from './ResourceRenderer/transformResourceNodeInfo';
-import { ResourceManagerService } from '@cloudbeaver/plugin-resource-manager';
-
-const styles = css`
-  CaptureView {
-    outline: none;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: auto;
-  }
-  ElementsTreeLoader {
-    min-width: 100%;
-    width: max-content;
-  }
-  Loader {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    min-width: 240px;
-  }
-  center {
-    height: 100%;
-    width: 100%;
-    display: flex;
-  }
-  message {
-    padding: 24px;
-    box-sizing: border-box;
-    max-width: 240px;
-    text-align: center;
-    margin: auto;
-  }
-`;
 
 interface Props extends React.PropsWithChildren {
   resourceTypeId?: string;
 }
 
 export const ResourceManagerTree: React.FC<Props> = observer(function ResourceManagerTree({ resourceTypeId, children }) {
+  const styles = useS(style);
   const root = RESOURCES_NODE_PATH;
 
   const projectsNavNodeService = useService(ProjectsNavNodeService);
@@ -131,8 +100,8 @@ export const ResourceManagerTree: React.FC<Props> = observer(function ResourceMa
 
   const settingsElements = useMemo(() => [ProjectsSettingsPlaceholderElement], []);
 
-  return styled(styles)(
-    <CaptureView view={navTreeService}>
+  return (
+    <CaptureView view={navTreeService} className={s(styles, { captureView: true })}>
       <ResourceManagerTreeCaptureViewContext resourceTypeId={resourceTypeId} />
       <ElementsTreeLoader
         root={root}
@@ -145,15 +114,14 @@ export const ResourceManagerTree: React.FC<Props> = observer(function ResourceMa
         expandStateGetters={[projectsExpandStateGetter, resourceExpandStateGetter]}
         navNodeFilterCompare={navigationTreeProjectSearchCompare}
         settingsElements={settingsElements}
-        emptyPlaceholder={() =>
-          styled(styles)(
-            <center>
-              <message>{children}</message>
-            </center>,
-          )
-        }
+        className={s(styles, { elementsTreeLoader: true })}
+        emptyPlaceholder={() => (
+          <div className={s(styles, { center: true })}>
+            <div className={s(styles, { message: true })}>{children}</div>
+          </div>
+        )}
         onOpen={node => navTreeService.navToNode(node.id, node.parentId)}
       />
-    </CaptureView>,
+    </CaptureView>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/NavigationTreeConnectionGroupRenderer.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/NavigationTreeConnectionGroupRenderer.m.css
new file mode 100644
index 0000000000..88cfa82836
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/NavigationTreeConnectionGroupRenderer.m.css
@@ -0,0 +1,8 @@
+.connectionGroup {
+  composes: theme-text-text-hint-on-light theme-typography--caption from global;
+  padding: 4px 12px;
+
+  &:not(:first-child) {
+    margin-top: 8px;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/navigationTreeConnectionGroupRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/navigationTreeConnectionGroupRenderer.tsx
index f0a41a16b4..4d74650592 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/navigationTreeConnectionGroupRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionGroup/navigationTreeConnectionGroupRenderer.tsx
@@ -5,12 +5,11 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
-
-import { Translate } from '@cloudbeaver/core-blocks';
+import { s, Translate, useS } from '@cloudbeaver/core-blocks';
 
 import type { NavigationNodeRendererComponent } from '../ElementsTree/NavigationNodeComponent';
 import { NAVIGATION_TREE_CONNECTION_GROUPS } from './navigationTreeConnectionGroupFilter';
+import style from './NavigationTreeConnectionGroupRenderer.m.css';
 
 export function navigationTreeConnectionGroupRenderer(nodeId: string): NavigationNodeRendererComponent | undefined {
   if (nodeId !== NAVIGATION_TREE_CONNECTION_GROUPS.manageable && nodeId !== NAVIGATION_TREE_CONNECTION_GROUPS.unmanageable) {
@@ -24,28 +23,19 @@ export function navigationTreeConnectionGroupRenderer(nodeId: string): Navigatio
   return UnManageableGroup;
 }
 
-const styles = css`
-  connection-group {
-    composes: theme-text-text-hint-on-light theme-typography--caption from global;
-    padding: 4px 12px;
-
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-`;
-
 const ManageableGroup: NavigationNodeRendererComponent = function ManageableGroup() {
-  return styled(styles)(
-    <connection-group>
+  const styles = useS(style);
+  return (
+    <div className={s(styles, { connectionGroup: true })}>
       <Translate token="app_navigationTree_connection_group_user" />
-    </connection-group>,
+    </div>
   );
 };
 const UnManageableGroup: NavigationNodeRendererComponent = function UnManageableGroup() {
-  return styled(styles)(
-    <connection-group>
+  const styles = useS(style);
+  return (
+    <div className={s(styles, { connectionGroup: true })}>
       <Translate token="app_navigationTree_connection_group_shared" />
-    </connection-group>,
+    </div>
   );
 };
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx
index 62690fb1fb..69f4298d75 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx
@@ -7,30 +7,31 @@
  */
 import { observer } from 'mobx-react-lite';
 import React, { forwardRef, useContext } from 'react';
-import styled, { use } from 'reshadow';
 
 import {
   ConnectionImageWithMask,
   getComputed,
   Loader,
-  TREE_NODE_STYLES,
+  s,
   TreeNodeContext,
   TreeNodeControl,
   TreeNodeIcon,
   TreeNodeName,
   useMouseContextMenu,
+  useS,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { EObjectFeature, NavNodeInfoResource, NavTreeResource } from '@cloudbeaver/core-navigation-tree';
 
 import type { NavTreeControlComponent, NavTreeControlProps } from '../ElementsTree/NavigationNodeComponent';
-import { NAVIGATION_NODE_CONTROL_STYLES } from '../ElementsTree/NavigationTreeNode/NavigationNode/NAVIGATION_NODE_CONTROL_STYLES';
+import style from '../ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.m.css';
 import { NavigationNodeExpand } from '../ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeExpand';
 import { TreeNodeMenuLoader } from '../ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader';
 
 export const ConnectionNavNodeControl: NavTreeControlComponent = observer<NavTreeControlProps, HTMLDivElement>(
   forwardRef(function ConnectionNavNodeControl({ node, nodeInfo, dndElement, dndPlaceholder, className, onClick }, ref) {
+    const styles = useS(style);
     const mouseContextMenu = useMouseContextMenu();
     const treeNodeContext = useContext(TreeNodeContext);
     const navNodeInfoResource = useService(NavNodeInfoResource);
@@ -58,26 +59,28 @@ export const ConnectionNavNodeControl: NavTreeControlComponent = observer<NavTre
       treeNodeContext.select();
     }
 
-    return styled(
-      TREE_NODE_STYLES,
-      NAVIGATION_NODE_CONTROL_STYLES,
-    )(
-      <TreeNodeControl ref={ref} className={className} onClick={onClick} onContextMenu={handleContextMenuOpen} {...use({ dragging: dndElement })}>
+    return (
+      <TreeNodeControl
+        ref={ref}
+        className={s(styles, { treeNodeControl: true, dragging: !!dndElement }, className)}
+        onClick={onClick}
+        onContextMenu={handleContextMenuOpen}
+      >
         <NavigationNodeExpand nodeId={node.id} />
-        <TreeNodeIcon {...use({ connected })}>
+        <TreeNodeIcon>
           <ConnectionImageWithMask icon={icon} connected={connected} maskId="tree-node-icon" />
         </TreeNodeIcon>
-        <TreeNodeName title={title}>
+        <TreeNodeName title={title} className={s(styles, { treeNodeName: true })}>
           <Loader suspense inline fullSize>
-            <name-box>{name}</name-box>
+            <div className={s(styles, { nameBox: true })}>{name}</div>
           </Loader>
         </TreeNodeName>
         {!dndPlaceholder && (
-          <portal onClick={handlePortalClick}>
+          <div className={s(styles, { portal: true })} onClick={handlePortalClick}>
             <TreeNodeMenuLoader mouseContextMenu={mouseContextMenu} node={node} selected={selected} />
-          </portal>
+          </div>
         )}
-      </TreeNodeControl>,
+      </TreeNodeControl>
     );
   }),
 );
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/navTreeConnectionRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/navTreeConnectionRenderer.tsx
index a54e9eb53f..f4bed42b30 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/navTreeConnectionRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/navTreeConnectionRenderer.tsx
@@ -6,9 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { Translate, TREE_NODE_STYLES, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
+import { Translate, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
 import { NAV_NODE_TYPE_CONNECTION } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
@@ -42,10 +41,10 @@ const ConnectionRenderer: NavigationNodeRendererComponent = observer(function Ma
   const node = navNodeInfoResource.get(nodeId);
 
   if (!node) {
-    return styled(TREE_NODE_STYLES)(
+    return (
       <TreeNodeNestedMessage>
         <Translate token="app_navigationTree_node_not_found" />
-      </TreeNodeNestedMessage>,
+      </TreeNodeNestedMessage>
     );
   }
 
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css
index e6aa563260..f45f074db7 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css
@@ -1,3 +1,54 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.tree {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  & .treeElements {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
+
+.treeBox {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  width: 250px;
+  min-width: 100%;
+  max-width: 100%;
+}
+
 .folderExplorerPath {
   padding: 0 4px 8px 4px;
 }
+
+.dropOutside {
+  composes: theme-border-color-background from global;
+  border: dashed 2px;
+  border-radius: var(--theme-group-element-radius);
+  margin: 12px;
+  box-sizing: border-box;
+  position: relative;
+
+  &.bottom {
+    order: 2;
+  }
+
+  &:not(.showDropOutside) {
+    display: none;
+  }
+  &.active {
+    border-color: var(--theme-positive) !important;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
index 5dc3a73a93..ce6db591ae 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
@@ -7,8 +7,6 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo, useState } from 'react';
-import styled, { css, use } from 'reshadow';
-import elementsTreeStyles from './ElementsTree.m.css';
 
 import {
   EventTreeNodeClickFlag,
@@ -19,18 +17,16 @@ import {
   PlaceholderElement,
   s,
   Translate,
-  TREE_NODE_STYLES,
   TreeNodeNested,
   TreeNodeNestedMessage,
   useS,
-  useStyles,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { EObjectFeature, type NavNode, NavNodeInfoResource, NavTreeResource, ROOT_NODE_PATH } from '@cloudbeaver/core-navigation-tree';
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { useNavTreeDropBox } from '../useNavTreeDropBox';
+import style from './ElementsTree.m.css';
 import { ElementsTreeContentLoader } from './ElementsTreeContentLoader';
 import { ElementsTreeContext, IElementsTreeContext } from './ElementsTreeContext';
 import { elementsTreeNameFilter } from './elementsTreeNameFilter';
@@ -46,66 +42,11 @@ import { useDropOutside } from './useDropOutside';
 import { IElementsTreeOptions, useElementsTree } from './useElementsTree';
 import { useElementsTreeFolderExplorer } from './useElementsTreeFolderExplorer';
 
-const oldStyles = css`
-  box {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-  }
-
-  tree {
-    position: relative;
-    box-sizing: border-box;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-
-    & tree-elements {
-      position: relative;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-  }
-
-  tree-box {
-    flex: 1;
-    overflow: auto;
-    display: flex;
-    width: 250px;
-    min-width: 100%;
-    max-width: 100%;
-  }
-
-  drop-outside {
-    composes: theme-border-color-background from global;
-    border: dashed 2px;
-    border-radius: var(--theme-group-element-radius);
-    margin: 12px;
-    box-sizing: border-box;
-    position: relative;
-
-    &[|bottom] {
-      order: 2;
-    }
-
-    &:not([|showDropOutside]) {
-      display: none;
-    }
-    &[|active] {
-      border-color: var(--theme-positive) !important;
-    }
-  }
-`;
-
 export interface ElementsTreeProps extends IElementsTreeOptions, React.PropsWithChildren {
   root?: string;
   selectionTree?: boolean;
   control?: NavTreeControlComponent;
   emptyPlaceholder?: React.FC;
-  big?: boolean;
-  style?: ComponentStyle;
   className?: string;
   settingsElements?: PlaceholderElement<IElementsTreeSettingsProps>[];
   navNodeFilterCompare?: NavNodeFilterCompareFn;
@@ -127,8 +68,6 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
   renderers = [],
   expandStateGetters,
   settingsElements,
-  big,
-  style,
   className,
   getChildren,
   loadChildren,
@@ -142,7 +81,7 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
   onSelect,
   onFilter,
 }) {
-  const styles = useS(elementsTreeStyles);
+  const styles = useS(style);
   const navTreeResource = useService(NavTreeResource);
   const navNodeInfoResource = useService(NavNodeInfoResource);
   const [treeRootRef, setTreeRootRef] = useState<HTMLDivElement | null>(null);
@@ -217,22 +156,23 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
     tree.resetSelection();
   }
 
-  return styled(useStyles(TREE_NODE_STYLES, oldStyles, style))(
+  return (
     <>
-      <ElementsTreeTools tree={tree} settingsElements={settingsElements} style={style} />
-      <tree-box ref={setTreeRootRef} {...use({ big })}>
+      <ElementsTreeTools tree={tree} settingsElements={settingsElements} />
+      <div ref={setTreeRootRef} className={s(styles, { treeBox: true })}>
         <ElementsTreeContext.Provider value={context}>
-          <box className={className}>
+          <div className={s(styles, { box: true }, className)}>
             <FolderExplorer state={folderExplorer}>
-              <tree ref={dropOutside.mouse.reference} onClick={handleClick}>
+              <div ref={dropOutside.mouse.reference} className={s(styles, { tree: true })} onClick={handleClick}>
                 {settings?.showFolderExplorerPath && (
                   <FolderExplorerPath className={s(styles, { folderExplorerPath: true })} getName={getName} canSkip={canSkip} />
                 )}
-                <drop-outside
+                <div
                   ref={dndBox.setRef}
-                  {...use({
+                  className={s(styles, {
+                    dropOutside: true,
                     showDropOutside: dropOutside.showDropOutside,
-                    active: dropOutside.zoneActive,
+                    active: !!dropOutside.zoneActive,
                     bottom: dropOutside.bottom,
                   })}
                 >
@@ -241,9 +181,9 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
                       <Translate token="app_navigationTree_drop_here" />
                     </TreeNodeNestedMessage>
                   </TreeNodeNested>
-                </drop-outside>
+                </div>
                 <ElementsTreeContentLoader context={context} emptyPlaceholder={emptyPlaceholder} childrenState={tree}>
-                  <tree-elements>
+                  <div className={s(styles, { treeElements: true })}>
                     <NavigationNodeNested
                       ref={dropOutside.nestedRef}
                       nodeId={root}
@@ -251,13 +191,13 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
                       path={folderExplorer.state.path}
                       root
                     />
-                  </tree-elements>
+                  </div>
                 </ElementsTreeContentLoader>
-              </tree>
+              </div>
             </FolderExplorer>
-          </box>
+          </div>
         </ElementsTreeContext.Provider>
-      </tree-box>
-    </>,
+      </div>
+    </>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx
index 44bc19b279..988231a0c0 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeContentLoader.tsx
@@ -6,9 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { getComputed, Loader, Translate, TREE_NODE_STYLES, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
+import { getComputed, Loader, Translate, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
 import type { ILoadableState } from '@cloudbeaver/core-utils';
 
 import type { IElementsTreeContext } from './ElementsTreeContext';
@@ -33,10 +32,10 @@ export const ElementsTreeContentLoader = observer<React.PropsWithChildren<Props>
     if (loading) {
       return <Loader />;
     } else if (context.tree.filtering) {
-      return styled(TREE_NODE_STYLES)(
+      return (
         <TreeNodeNestedMessage>
           <Translate token="app_navigationTree_node_no_results" filter={context.tree.filter} />
-        </TreeNodeNestedMessage>,
+        </TreeNodeNestedMessage>
       );
     } else if (context.folderExplorer.root === context.folderExplorer.state.folder) {
       return <>{Placeholder && <Placeholder />}</>;
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.m.css
new file mode 100644
index 0000000000..7475b27d9a
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.m.css
@@ -0,0 +1,5 @@
+.filterBox {
+  composes: theme-background-surface from global;
+  padding: 8px 12px;
+  flex: 0 0 auto;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.tsx
index e1063fb1ea..8cc79d7310 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.tsx
@@ -6,20 +6,12 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Filter, useFocus, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Filter, s, useFocus, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import type { IElementsTree } from '../useElementsTree';
-
-const filterStyle = css`
-  filter-box {
-    composes: theme-background-surface from global;
-    padding: 8px 12px;
-    flex: 0 0 auto;
-  }
-`;
+import styles from './ElementsTreeFilter.m.css';
 
 interface Props {
   tree: IElementsTree;
@@ -30,15 +22,15 @@ interface Props {
 export const ElementsTreeFilter = observer<Props>(function ElementsTreeFilter({ tree, style, className }) {
   const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const translate = useTranslate();
-  const styles = useStyles(filterStyle, style);
+  const computedStyles = useS(styles, style);
 
   if (!tree.settings?.filter) {
     return null;
   }
 
-  return styled(styles)(
-    <filter-box ref={focusedRef} className={className} as="div">
+  return (
+    <div ref={focusedRef} className={s(computedStyles, { filterBox: true }, className)}>
       <Filter placeholder={translate('app_navigationTree_search')} value={tree.filter} max onFilter={value => tree.setFilter(value as string)} />
-    </filter-box>,
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
index 4df5859e9b..aa5350864b 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import styled from 'reshadow';
 
 import {
-  ACTION_ICON_BUTTON_STYLES,
+  ActionIconButtonStyles,
   Fill,
   IconButton,
   IconButtonStyles,
@@ -55,8 +55,8 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
   const root = tree.root;
   const translate = useTranslate();
   const [opened, setOpen] = useState(false);
-  const deprecatedStyles = useStyles(ACTION_ICON_BUTTON_STYLES, style);
-  const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles);
+  const deprecatedStyles = useStyles(style);
+  const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles, ActionIconButtonStyles);
 
   useCaptureViewContext(context => {
     context?.set(DATA_CONTEXT_NAV_TREE_ROOT, tree.baseRoot);
@@ -67,13 +67,13 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
 
   return styled(deprecatedStyles)(
     <SContext registry={registry}>
-      <tools className={s(styles, { tools: true })}>
-        <actions className={s(styles, { actions: true })}>
+      <div className={s(styles, { tools: true })}>
+        <div className={s(styles, { actions: true })}>
           {tree.settings?.configurable && (
             <IconButton
               name="/icons/settings_cog_sm.svg"
               title={translate('ui_settings')}
-              className={s(styles, { primary: true, opened })}
+              className={s(styles, { primary: true, actionIconButton: true, opened })}
               img
               onClick={() => setOpen(!opened)}
             />
@@ -84,15 +84,15 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
             name="/icons/refresh_sm.svg#root"
             title={translate('app_navigationTree_refresh')}
             disabled={loading}
-            className={s(styles, { primary: true, loading })}
+            className={s(styles, { primary: true, actionIconButton: true, loading })}
             img
             onClick={() => tree.refresh(root)}
           />
-        </actions>
+        </div>
         {tree.settings && opened && <NavigationTreeSettings tree={tree} elements={settingsElements} style={style} />}
         <ElementsTreeFilter tree={tree} style={style} />
         {children}
-      </tools>
+      </div>
     </SContext>,
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts
index 4762529570..be72611a5e 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts
@@ -17,6 +17,7 @@ export type NavTreeNodeComponent = React.FC<{
   path: string[];
   dragging?: boolean;
   expanded?: boolean;
+  big?: boolean;
   className?: string;
 }>;
 
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.m.css
new file mode 100644
index 0000000000..7e88c8bf76
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.m.css
@@ -0,0 +1,9 @@
+.treeNode {
+  &.hovered ::before {
+    opacity: 0.16;
+  }
+
+  &.expanded > .navNodeNested {
+    display: block;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
index 3f9b72ba0e..c30500238a 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useDeferredValue, useEffect } from 'react';
-import styled, { css, use } from 'reshadow';
 
-import { getComputed, TreeNode, useMergeRefs, useStyles } from '@cloudbeaver/core-blocks';
+import { getComputed, s, TreeNode, useMergeRefs, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { DATA_CONTEXT_NAV_NODE, DATA_CONTEXT_NAV_NODES, NavNodeManagerService } from '@cloudbeaver/core-navigation-tree';
 import { useDNDData } from '@cloudbeaver/core-ui';
@@ -17,17 +16,12 @@ import { useDataContext } from '@cloudbeaver/core-view';
 
 import { useNavTreeDropBox } from '../../useNavTreeDropBox';
 import type { NavigationNodeComponent } from '../NavigationNodeComponent';
+import style from './NavigationNode.m.css';
 import { DATA_ATTRIBUTE_NODE_EDITING } from './NavigationNode/DATA_ATTRIBUTE_NODE_EDITING';
 import { NavigationNodeNested } from './NavigationNode/NavigationNodeNested';
 import { NavigationNodeControlRenderer } from './NavigationNodeControlRenderer';
 import { useNavigationNode } from './useNavigationNode';
 
-const styles = css`
-  TreeNode[|hovered] ::before {
-    opacity: 0.16;
-  }
-`;
-
 export const NavigationNode: NavigationNodeComponent = observer(function NavigationNode({
   node,
   component,
@@ -35,8 +29,8 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
   control: externalControl,
   expanded: externalExpanded,
   className,
-  style,
 }) {
+  const styles = useS(style);
   const navNodeManagerService = useService(NavNodeManagerService);
   const navNode = useNavigationNode(node, path);
   const context = useDataContext();
@@ -87,7 +81,7 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
     [],
   );
 
-  return styled(useStyles(style, styles))(
+  return (
     <TreeNode
       ref={dndBox.setRef}
       group={navNode.group}
@@ -99,23 +93,15 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
       showInFilter={navNode.showInFilter}
       externalExpanded={externalExpanded}
       leaf={navNode.leaf}
-      className={className}
+      className={s(styles, { treeNode: true, hovered: hasNodes, expanded: externalExpanded ?? navNode.expanded }, className)}
       onExpand={navNode.expand}
       onClick={navNode.click}
       onOpen={navNode.open}
       onSelect={navNode.select}
-      {...use({ hovered: hasNodes })}
     >
       {/* <DNDPreview data={dndData} src="/icons/empty.svg" /> */}
-      <NavigationNodeControlRenderer
-        ref={controlRef}
-        navNode={navNode}
-        dragging={dndData.state.isDragging}
-        control={externalControl}
-        style={style}
-        node={node}
-      />
-      {expanded && <NavigationNodeNested nodeId={node.id} path={path} component={component} />}
-    </TreeNode>,
+      <NavigationNodeControlRenderer ref={controlRef} navNode={navNode} dragging={dndData.state.isDragging} control={externalControl} node={node} />
+      {expanded && <NavigationNodeNested nodeId={node.id} path={path} component={component} className={s(styles, { navNodeNested: true })} />}
+    </TreeNode>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NAVIGATION_NODE_CONTROL_STYLES.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NAVIGATION_NODE_CONTROL_STYLES.ts
deleted file mode 100644
index 8757b6f40b..0000000000
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NAVIGATION_NODE_CONTROL_STYLES.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 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 { css } from 'reshadow';
-
-export const NAVIGATION_NODE_CONTROL_STYLES = css`
-  TreeNodeControl:hover > portal,
-  TreeNodeControl:global([aria-selected='true']) > portal,
-  portal:focus-within {
-    visibility: visible;
-  }
-  TreeNodeName {
-    height: 100%;
-    max-width: 320px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &[|editing] {
-      padding: 0;
-      overflow: visible;
-      margin-left: 2px;
-    }
-  }
-  portal {
-    position: relative;
-    box-sizing: border-box;
-    margin-left: auto !important;
-    margin-right: 8px !important;
-    visibility: hidden;
-  }
-  name-box {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.m.css
new file mode 100644
index 0000000000..b797938948
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.m.css
@@ -0,0 +1,41 @@
+.treeNodeControl.dragging {
+  opacity: 0.6;
+}
+
+.treeNodeControl.editing {
+  &::before {
+    display: none;
+  }
+
+  & .treeNodeName {
+    padding: 0;
+    overflow: visible;
+    margin-left: 2px;
+  }
+}
+
+.treeNodeControl:hover > .portal,
+.treeNodeControl[aria-selected='true'] > .portal,
+.portal:focus-within {
+  visibility: visible;
+}
+
+.treeNodeName {
+  height: 100%;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.portal {
+  position: relative;
+  box-sizing: border-box;
+  margin-left: auto !important;
+  margin-right: 8px !important;
+  visibility: hidden;
+}
+
+.nameBox {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx
index e6d4584348..1c6bf07691 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx
@@ -8,12 +8,11 @@
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { forwardRef, useContext } from 'react';
-import styled, { use } from 'reshadow';
 
 import {
   getComputed,
   Loader,
-  TREE_NODE_STYLES,
+  s,
   TreeNodeContext,
   TreeNodeControl,
   TreeNodeIcon,
@@ -21,6 +20,7 @@ import {
   useMouseContextMenu,
   useObjectRef,
   useObservableRef,
+  useS,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
@@ -29,7 +29,7 @@ import { getNodePlainName, type INodeActions, NavNodeInfoResource, NavTreeResour
 import type { NavTreeControlComponent, NavTreeControlProps } from '../../NavigationNodeComponent';
 import { TreeNodeMenuLoader } from '../TreeNodeMenu/TreeNodeMenuLoader';
 import { DATA_ATTRIBUTE_NODE_EDITING } from './DATA_ATTRIBUTE_NODE_EDITING';
-import { NAVIGATION_NODE_CONTROL_STYLES } from './NAVIGATION_NODE_CONTROL_STYLES';
+import style from './NavigationNodeControl.m.css';
 import { NavigationNodeExpand } from './NavigationNodeExpand';
 import { NavigationNodeEditorLoader } from './NavigationNodeLoaders';
 
@@ -49,6 +49,7 @@ interface IEditingState {
 
 export const NavigationNodeControl: NavTreeControlComponent = observer<NavTreeControlProps, HTMLDivElement>(
   forwardRef(function NavigationNodeControl({ node, nodeInfo, dndElement, dndPlaceholder, className, onClick }, ref) {
+    const styles = useS(style);
     const mouseContextMenu = useMouseContextMenu();
     const treeNodeContext = useContext(TreeNodeContext);
     const navNodeInfoResource = useService(NavNodeInfoResource);
@@ -129,35 +130,31 @@ export const NavigationNodeControl: NavTreeControlComponent = observer<NavTreeCo
 
     const attributes = { [DATA_ATTRIBUTE_NODE_EDITING]: editing };
 
-    return styled(
-      TREE_NODE_STYLES,
-      NAVIGATION_NODE_CONTROL_STYLES,
-    )(
+    return (
       <TreeNodeControl
         ref={ref}
         {...attributes}
-        className={className}
+        className={s(styles, { treeNodeControl: true, dragging: !!dndElement, editing }, className)}
         onClick={onClick}
         onContextMenu={handleContextMenuOpen}
-        {...use({ editing, dragging: dndElement })}
       >
         <NavigationNodeExpand nodeId={node.id} />
         <TreeNodeIcon icon={icon} />
-        <TreeNodeName title={title} {...use({ editing })}>
+        <TreeNodeName title={title} className={s(styles, { treeNodeName: true })}>
           <Loader suspense inline fullSize>
             {editing ? (
               <NavigationNodeEditorLoader name={getNodePlainName(node)} disabled={saving} onSave={editingState.save} onClose={editingState.cancel} />
             ) : (
-              <name-box>{name}</name-box>
+              <div className={s(styles, { nameBox: true })}>{name}</div>
             )}
           </Loader>
         </TreeNodeName>
         {!editing && !dndPlaceholder && (
-          <portal onClick={handlePortalClick}>
+          <div className={s(styles, { portal: true })} onClick={handlePortalClick}>
             <TreeNodeMenuLoader mouseContextMenu={mouseContextMenu} node={node} actions={nodeActions} selected={selected} />
-          </portal>
+          </div>
         )}
-      </TreeNodeControl>,
+      </TreeNodeControl>
     );
   }),
 );
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.m.css
new file mode 100644
index 0000000000..25c4e1f70d
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.m.css
@@ -0,0 +1,9 @@
+.inlineEditor {
+  height: 22px !important;
+
+  & input,
+  & input[disabled],
+  & input[readonly] {
+    padding: 1px !important;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.tsx
index 2ab08a154a..7973eee3cb 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeEditor.tsx
@@ -7,22 +7,12 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import styled, { css } from 'reshadow';
 
+import { s, useS } from '@cloudbeaver/core-blocks';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { InlineEditor } from '@cloudbeaver/core-ui';
 
-const styles = css`
-  InlineEditor {
-    height: 22px;
-
-    & input,
-    & input[disabled],
-    & input[readonly] {
-      padding: 1px;
-    }
-  }
-`;
+import style from './NavigationNodeEditor.m.css';
 
 interface Props {
   name: string;
@@ -32,6 +22,7 @@ interface Props {
 }
 
 export const NavigationNodeEditor = observer<Props>(function NavigationNodeEditor({ name: initialName, disabled, onSave, onClose }) {
+  const styles = useS(style);
   const [name, setName] = useState(initialName);
   const isNameChanged = initialName !== name;
   const isDisabledSave = disabled || !isNameChanged;
@@ -44,13 +35,13 @@ export const NavigationNodeEditor = observer<Props>(function NavigationNodeEdito
     EventContext.set(event, EventStopPropagationFlag);
   }
 
-  return styled(styles)(
+  return (
     <InlineEditor
       value={name}
       disabled={disabled}
       disableSave={isDisabledSave}
       controlsPosition="inside"
-      style={styles}
+      className={s(styles, { inlineEditor: true })}
       simple
       autofocus
       onChange={setName}
@@ -59,6 +50,6 @@ export const NavigationNodeEditor = observer<Props>(function NavigationNodeEdito
       onReject={onClose}
       onBlur={onClose}
       onClick={stopPropagation}
-    />,
+    />
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeExpand.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeExpand.tsx
index 2a4581c8c0..a0e7a5be35 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeExpand.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeExpand.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext, useDeferredValue } from 'react';
-import styled from 'reshadow';
 
-import { getComputed, TREE_NODE_STYLES, TreeNodeExpand } from '@cloudbeaver/core-blocks';
+import { getComputed, TreeNodeExpand } from '@cloudbeaver/core-blocks';
 
 import { ElementsTreeContext } from '../../ElementsTreeContext';
 
@@ -27,5 +26,5 @@ export const NavigationNodeExpand = observer<Props>(function NavigationNodeExpan
     return null;
   }
 
-  return styled(TREE_NODE_STYLES)(<TreeNodeExpand filterActive={filterActive} />);
+  return <TreeNodeExpand filterActive={filterActive} />;
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.m.css
new file mode 100644
index 0000000000..8a14ad8e13
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.m.css
@@ -0,0 +1,3 @@
+.navigationNodeNested {
+  box-sizing: border-box;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
index 3f5766e145..7c2e22730b 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
@@ -7,13 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useContext, useDeferredValue, useMemo } from 'react';
-import styled from 'reshadow';
 
-import { getComputed, TREE_NODE_STYLES, TreeNodeNested, TreeNodeNestedMessage, useTranslate } from '@cloudbeaver/core-blocks';
+import { getComputed, s, TreeNodeNested, TreeNodeNestedMessage, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { isArraysEqual } from '@cloudbeaver/core-utils';
 
 import { ElementsTreeContext } from '../../ElementsTreeContext';
 import type { NavTreeNodeComponent } from '../../NavigationNodeComponent';
+import style from './NavigationNodeNested.m.css';
 
 interface Props {
   nodeId?: string;
@@ -25,6 +25,7 @@ interface Props {
 
 export const NavigationNodeNested = observer(
   forwardRef<HTMLDivElement, Props>(function NavigationNodeNested({ nodeId, component, path, root, className }, ref) {
+    const styles = useS(style);
     const treeContext = useContext(ElementsTreeContext);
     const translate = useTranslate();
 
@@ -50,11 +51,11 @@ export const NavigationNodeNested = observer(
     empty = useDeferredValue(empty);
 
     if (nodeId !== undefined && rootFolder) {
-      return styled(TREE_NODE_STYLES)(<NavigationNode nodeId={nodeId} path={path} expanded />);
+      return <NavigationNode nodeId={nodeId} path={path} expanded />;
     }
 
-    return styled(TREE_NODE_STYLES)(
-      <TreeNodeNested ref={ref} root={root} className={className}>
+    return (
+      <TreeNodeNested ref={ref} root={root} className={s(styles, { navigationNodeNested: true }, className)}>
         {children.map(child => (
           <NavigationNode key={child} nodeId={child} path={nextPath} />
         ))}
@@ -63,7 +64,7 @@ export const NavigationNodeNested = observer(
             {translate(nodeId === undefined ? 'app_navigationTree_connection_group_user' : 'app_navigationTree_node_empty')}
           </TreeNodeNestedMessage>
         )}
-      </TreeNodeNested>,
+      </TreeNodeNested>
     );
   }),
 );
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.m.css
new file mode 100644
index 0000000000..d961153eff
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.m.css
@@ -0,0 +1,8 @@
+.control {
+  transition: opacity 0.3s ease;
+  opacity: 1;
+
+  &.outdated {
+    opacity: 0.5;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
index 33eb27ac2a..425e77bcfa 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
@@ -7,16 +7,15 @@
  */
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useCallback, useContext, useDeferredValue, useEffect, useRef, useState } from 'react';
-import styled, { css, use } from 'reshadow';
 
-import { getComputed, TreeNodeContext, useMergeRefs, useObjectRef } from '@cloudbeaver/core-blocks';
+import { getComputed, s, TreeNodeContext, useMergeRefs, useObjectRef, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { type NavNode, NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { ElementsTreeContext } from '../ElementsTreeContext';
 import type { NavTreeControlComponent } from '../NavigationNodeComponent';
 import { NavigationNodeControlLoader } from './NavigationNode/NavigationNodeLoaders';
+import style from './NavigationNodeControlRenderer.m.css';
 import type { INavigationNode } from './useNavigationNode';
 
 interface Props {
@@ -24,22 +23,11 @@ interface Props {
   navNode: INavigationNode;
   dragging?: boolean;
   control?: NavTreeControlComponent | undefined;
-  style?: ComponentStyle;
 }
 
-const styles = css`
-  Control {
-    transition: opacity 0.3s ease;
-    opacity: 1;
-
-    &[|outdated] {
-      opacity: 0.5;
-    }
-  }
-`;
-
 export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
-  forwardRef(function NavigationNodeControlRenderer({ node, navNode, dragging, control: externalControl, style }, ref) {
+  forwardRef(function NavigationNodeControlRenderer({ node, navNode, dragging, control: externalControl }, ref) {
+    const styles = useS(style);
     const elementRef = useRef<HTMLDivElement | null>(null);
     const [size, setSize] = useState(24);
     const contextRef = useObjectRef({
@@ -108,8 +96,15 @@ export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
       treeNodeContext.select(event.ctrlKey || event.metaKey);
     }
 
-    return styled(styles)(
-      <Control ref={mergedRef} {...use({ outdated })} nodeInfo={nodeInfo} dndElement={dragging} style={style} node={node} onClick={onClickHandler} />,
+    return (
+      <Control
+        ref={mergedRef}
+        className={s(styles, { control: true, outdated })}
+        nodeInfo={nodeInfo}
+        dndElement={dragging}
+        node={node}
+        onClick={onClickHandler}
+      />
     );
   }),
 );
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx
index d1239079eb..7fcb597a9d 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeDragged.tsx
@@ -7,16 +7,15 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
-import { getComputed, TreeNode, useObjectRef, useStyles } from '@cloudbeaver/core-blocks';
+import { getComputed, TreeNode, useObjectRef } from '@cloudbeaver/core-blocks';
 
 import { ElementsTreeContext } from '../ElementsTreeContext';
 import type { NavigationNodeComponent } from '../NavigationNodeComponent';
 import { transformNodeInfo } from '../transformNodeInfo';
 import { NavigationNodeControlLoader } from './NavigationNode/NavigationNodeLoaders';
 
-export const NavigationNodeDragged: NavigationNodeComponent = observer(function NavigationNode({ node, className, control: externalControl, style }) {
+export const NavigationNodeDragged: NavigationNodeComponent = observer(function NavigationNodeDragged({ node, className, control: externalControl }) {
   const contextRef = useObjectRef({
     context: useContext(ElementsTreeContext),
   });
@@ -25,10 +24,10 @@ export const NavigationNodeDragged: NavigationNodeComponent = observer(function
   const Control = control || externalControl || NavigationNodeControlLoader;
   const nodeInfo = transformNodeInfo(node, contextRef.context?.tree.nodeInfoTransformers ?? []);
 
-  return styled(useStyles(style))(
+  return (
     <TreeNode externalExpanded={false} className={className} leaf>
       {/* <DNDPreview data={dndData} src="/icons/empty.svg" /> */}
       <Control nodeInfo={nodeInfo} node={node} dndPlaceholder />
-    </TreeNode>,
+    </TreeNode>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx
index 1b4e1d0fd4..950237b08e 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeElement.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
-import { Translate, TREE_NODE_STYLES, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
+import { Translate, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
 
@@ -19,7 +18,6 @@ import { NavigationNodeRendererLoader } from './NavigationNodeRendererLoader';
 
 export const NavigationNodeElement: NavTreeNodeComponent = observer(function NavigationNodeElement({ nodeId, path, expanded, dragging, className }) {
   const context = useContext(ElementsTreeContext);
-  const navNodeInfoResource = useService(NavNodeInfoResource);
 
   if (context?.tree.renderers) {
     for (const renderer of context.tree.renderers) {
@@ -40,17 +38,21 @@ export const NavigationNodeElement: NavTreeNodeComponent = observer(function Nav
     }
   }
 
+  return <NavigationNodeRenderer nodeId={nodeId} path={path} expanded={expanded} dragging={dragging} className={className} />;
+});
+
+const NavigationNodeRenderer: NavTreeNodeComponent = observer(function NavigationNodeRenderer({ nodeId, path, expanded, dragging, className }) {
+  const navNodeInfoResource = useService(NavNodeInfoResource);
   const node = navNodeInfoResource.get(nodeId);
 
   if (!node) {
-    return styled(TREE_NODE_STYLES)(
+    return (
       <TreeNodeNestedMessage>
         <Translate token="app_navigationTree_node_not_found" />
-      </TreeNodeNestedMessage>,
+      </TreeNodeNestedMessage>
     );
   }
 
-  // TODO: after node update reference can be lost and NavigationNode skip update
   return (
     <NavigationNodeRendererLoader
       node={node}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.m.css
new file mode 100644
index 0000000000..e1af2b641b
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.m.css
@@ -0,0 +1,21 @@
+.contextMenu {
+  padding: 0;
+  height: 16px;
+
+  &:before {
+    display: none;
+  }
+
+  &.selected svg,
+  &:hover svg,
+  &:focus svg {
+    fill: #338fcc;
+  }
+}
+
+.icon {
+  cursor: pointer;
+  width: 16px;
+  height: 10px;
+  fill: #dedede;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.tsx
index 682b4a13dd..3be4137c1d 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.tsx
@@ -6,9 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { use } from 'reshadow';
 
-import { getComputed, Icon, IMouseContextMenu } from '@cloudbeaver/core-blocks';
+import { getComputed, Icon, IMouseContextMenu, s, useS } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { DATA_CONTEXT_NAV_NODE, type INodeActions, type NavNode } from '@cloudbeaver/core-navigation-tree';
@@ -18,7 +17,7 @@ import { DATA_CONTEXT_CONNECTION } from '@cloudbeaver/plugin-connections';
 
 import { MENU_NAV_TREE } from '../../MENU_NAV_TREE';
 import { DATA_CONTEXT_NAV_NODE_ACTIONS } from './DATA_CONTEXT_NAV_NODE_ACTIONS';
-import { treeNodeMenuStyles } from './treeNodeMenuStyles';
+import style from './TreeNodeMenu.m.css';
 
 interface Props {
   node: NavNode;
@@ -29,6 +28,7 @@ interface Props {
 }
 
 export const TreeNodeMenu = observer<Props>(function TreeNodeMenu({ node, actions, selected, mouseContextMenu, onClose }) {
+  const styles = useS(style);
   const connectionsInfoResource = useService(ConnectionInfoResource);
   const menu = useMenu({ menu: MENU_NAV_TREE });
   menu.context.set(DATA_CONTEXT_NAV_NODE, node);
@@ -46,9 +46,15 @@ export const TreeNodeMenu = observer<Props>(function TreeNodeMenu({ node, action
     }
   }
 
-  return styled(treeNodeMenuStyles)(
-    <ContextMenu menu={menu} mouseContextMenu={mouseContextMenu} onVisibleSwitch={handleVisibleSwitch} {...use({ selected })} modal>
-      <Icon name="snack" viewBox="0 0 16 10" />
-    </ContextMenu>,
+  return (
+    <ContextMenu
+      menu={menu}
+      className={s(styles, { contextMenu: true, selected })}
+      mouseContextMenu={mouseContextMenu}
+      modal
+      onVisibleSwitch={handleVisibleSwitch}
+    >
+      <Icon className={s(styles, { icon: true })} name="snack" viewBox="0 0 16 10" />
+    </ContextMenu>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTreeTools.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTreeTools.m.css
new file mode 100644
index 0000000000..7c85cee449
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTreeTools.m.css
@@ -0,0 +1,8 @@
+.tools {
+  composes: theme-border-color-background from global;
+}
+
+.tools > *:last-child:not(:first-child) {
+  border-bottom: solid 1px;
+  border-color: inherit;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.m.css
new file mode 100644
index 0000000000..320bb982f0
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.m.css
@@ -0,0 +1,29 @@
+.captureView {
+  outline: none;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.elementsTree {
+  min-width: 100%;
+  width: max-content;
+}
+
+.center {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  & .message {
+    margin: auto;
+    text-align: center;
+  }
+}
+
+.message {
+  box-sizing: border-box;
+  max-width: 240px;
+  padding: 24px;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx
index c80ad35ea6..eca4a59f0d 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx
@@ -7,14 +7,14 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Translate, useUserData } from '@cloudbeaver/core-blocks';
+import { s, SContext, StyleRegistry, Translate, useS, useUserData } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { NavNodeInfoResource, NavTreeResource, ProjectsNavNodeService, ROOT_NODE_PATH } from '@cloudbeaver/core-navigation-tree';
 import { ProjectsService } from '@cloudbeaver/core-projects';
 import { CaptureView } from '@cloudbeaver/core-view';
 
+import { ElementsTreeToolsStyles } from '../index';
 import { NavNodeViewService } from '../NodesManager/NavNodeView/NavNodeViewService';
 import { navigationTreeConnectionGroupFilter } from './ConnectionGroup/navigationTreeConnectionGroupFilter';
 import { navigationTreeConnectionGroupRenderer } from './ConnectionGroup/navigationTreeConnectionGroupRenderer';
@@ -26,7 +26,9 @@ import {
 } from './ElementsTree/ElementsTreeTools/NavigationTreeSettings/createElementsTreeSettings';
 import { transformFilteredNodeInfo } from './ElementsTree/transformFilteredNodeInfo';
 import type { IElementsTreeSettings } from './ElementsTree/useElementsTree';
+import elementsTreeToolsStyles from './ElementsTreeTools.m.css';
 import { getNavigationTreeUserSettingsId } from './getNavigationTreeUserSettingsId';
+import style from './NavigationTree.m.css';
 import { navigationTreeDuplicateFilter } from './navigationTreeDuplicateIdFilter';
 import { NavigationTreeService } from './NavigationTreeService';
 import { navigationTreeProjectFilter } from './ProjectsRenderer/navigationTreeProjectFilter';
@@ -36,49 +38,18 @@ import { navigationTreeProjectsRendererRenderer } from './ProjectsRenderer/navig
 import { ProjectsSettingsPlaceholderElement } from './ProjectsRenderer/ProjectsSettingsForm';
 import { useNavigationTree } from './useNavigationTree';
 
-const navigationTreeStyles = css`
-  CaptureView {
-    outline: none;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  ElementsTree {
-    min-width: 100%;
-    width: max-content;
-  }
-
-  center {
-    display: flex;
-    height: 100%;
-    width: 100%;
-
-    & message {
-      margin: auto;
-      text-align: center;
-    }
-  }
-
-  message {
-    box-sizing: border-box;
-    max-width: 240px;
-    padding: 24px;
-  }
-`;
-
-const elementsTreeStyles = css`
-  tools {
-    composes: theme-border-color-background from global;
-  }
-  tools > *:last-child:not(:first-child) {
-    border-bottom: solid 1px;
-    border-color: inherit;
-  }
-`;
+const registry: StyleRegistry = [
+  [
+    ElementsTreeToolsStyles,
+    {
+      mode: 'append',
+      styles: [elementsTreeToolsStyles],
+    },
+  ],
+];
 
 export const NavigationTree = observer(function NavigationTree() {
+  const styles = useS(style);
   const projectsNavNodeService = useService(ProjectsNavNodeService);
   const projectsService = useService(ProjectsService);
   const navTreeService = useService(NavigationTreeService);
@@ -113,34 +84,34 @@ export const NavigationTree = observer(function NavigationTree() {
 
   const settingsElements = useMemo(() => [ProjectsSettingsPlaceholderElement], []);
 
-  return styled(navigationTreeStyles)(
-    <CaptureView view={navTreeService}>
-      <ElementsTree
-        root={root}
-        localState={navTreeService.treeState}
-        filters={[duplicateFilter, connectionGroupFilter, projectFilter]}
-        renderers={[projectsRendererRenderer, navigationTreeConnectionGroupRenderer, connectionRenderer]}
-        navNodeFilterCompare={navigationTreeProjectSearchCompare}
-        nodeInfoTransformers={[transformFilteredNode]}
-        expandStateGetters={[projectsExpandStateGetter]}
-        settingsElements={settingsElements}
-        emptyPlaceholder={() =>
-          styled(navigationTreeStyles)(
-            <center>
-              <message>
+  return (
+    <SContext registry={registry}>
+      <CaptureView view={navTreeService} className={s(styles, { captureView: true })}>
+        <ElementsTree
+          root={root}
+          localState={navTreeService.treeState}
+          filters={[duplicateFilter, connectionGroupFilter, projectFilter]}
+          renderers={[projectsRendererRenderer, navigationTreeConnectionGroupRenderer, connectionRenderer]}
+          navNodeFilterCompare={navigationTreeProjectSearchCompare}
+          nodeInfoTransformers={[transformFilteredNode]}
+          expandStateGetters={[projectsExpandStateGetter]}
+          settingsElements={settingsElements}
+          className={s(styles, { elementsTree: true })}
+          emptyPlaceholder={() => (
+            <div className={s(styles, { center: true })}>
+              <div className={s(styles, { message: true })}>
                 <Translate token="app_navigationTree_empty_placeholder" />
-              </message>
-            </center>,
-          )
-        }
-        customSelect={handleSelect}
-        customSelectReset={handleSelectReset}
-        settings={settings}
-        style={elementsTreeStyles}
-        getChildren={navTreeService.getChildren}
-        loadChildren={navTreeService.loadNestedNodes}
-        onOpen={handleOpen}
-      />
-    </CaptureView>,
+              </div>
+            </div>
+          )}
+          customSelect={handleSelect}
+          customSelectReset={handleSelectReset}
+          settings={settings}
+          getChildren={navTreeService.getChildren}
+          loadChildren={navTreeService.loadNestedNodes}
+          onOpen={handleOpen}
+        />
+      </CaptureView>
+    </SContext>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.m.css
new file mode 100644
index 0000000000..2a2885034c
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.m.css
@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.tsx
index 0e3efecb3e..f88bb868ab 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTreePanel.tsx
@@ -6,25 +6,19 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
+import { s, useS } from '@cloudbeaver/core-blocks';
 import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
 
 import { NavigationTreeLoader } from './NavigationTreeLoader';
-
-const styles = css`
-  container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: auto;
-  }
-`;
+import style from './NavigationTreePanel.m.css';
 
 export const NavigationTreePanel: TabContainerPanelComponent = observer(function NavigationTreePanel() {
-  return styled(styles)(
-    <container>
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { container: true })}>
       <NavigationTreeLoader />
-    </container>,
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.m.css
new file mode 100644
index 0000000000..ca25ed8676
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.m.css
@@ -0,0 +1,35 @@
+.treeNodeControl {
+  transition: opacity 0.3s ease;
+  opacity: 1;
+
+  &.outdated {
+    opacity: 0.5;
+  }
+}
+
+.treeNodeControl:hover > .portal,
+.treeNodeControl[aria-selected='true'] > .portal,
+.portal:focus-within {
+  visibility: visible;
+}
+
+.treeNodeName {
+  composes: theme-text-text-hint-on-light theme-typography--caption from global;
+  height: 100%;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.portal {
+  position: relative;
+  box-sizing: border-box;
+  margin-left: auto !important;
+  margin-right: 8px !important;
+  visibility: hidden;
+}
+
+.nameBox {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx
index 69449aea5d..3629ecf07f 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import React, { forwardRef, useContext } from 'react';
-import styled, { css, use } from 'reshadow';
 
-import { getComputed, TREE_NODE_STYLES, TreeNodeContext, TreeNodeControl, TreeNodeName, useMouseContextMenu } from '@cloudbeaver/core-blocks';
+import { getComputed, s, TreeNodeContext, TreeNodeControl, TreeNodeName, useMouseContextMenu, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
@@ -18,43 +17,11 @@ import { ElementsTreeContext } from '../ElementsTree/ElementsTreeContext';
 import type { NavTreeControlComponent, NavTreeControlProps } from '../ElementsTree/NavigationNodeComponent';
 import { isDraggingInsideProject } from '../ElementsTree/NavigationTreeNode/isDraggingInsideProject';
 import { TreeNodeMenuLoader } from '../ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenuLoader';
-
-const styles = css`
-  TreeNodeControl {
-    transition: opacity 0.3s ease;
-    opacity: 1;
-
-    &[|outdated] {
-      opacity: 0.5;
-    }
-  }
-  TreeNodeControl:hover > portal,
-  TreeNodeControl:global([aria-selected='true']) > portal,
-  portal:focus-within {
-    visibility: visible;
-  }
-  TreeNodeName {
-    composes: theme-text-text-hint-on-light theme-typography--caption from global;
-    height: 100%;
-    max-width: 250px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  portal {
-    position: relative;
-    box-sizing: border-box;
-    margin-left: auto !important;
-    margin-right: 8px !important;
-    visibility: hidden;
-  }
-  name-box {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
+import style from './NavigationNodeProjectControl.m.css';
 
 export const NavigationNodeProjectControl: NavTreeControlComponent = observer<NavTreeControlProps, HTMLDivElement>(
   forwardRef(function NavigationNodeProjectControl({ node, dndElement, dndPlaceholder, className }, ref) {
+    const styles = useS(style);
     const mouseContextMenu = useMouseContextMenu();
     const treeNodeContext = useContext(TreeNodeContext);
     const elementsTreeContext = useContext(ElementsTreeContext);
@@ -92,27 +59,23 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer<Na
       return null;
     }
 
-    return styled(
-      TREE_NODE_STYLES,
-      styles,
-    )(
+    return (
       <TreeNodeControl
         ref={ref}
         onClick={handleClick}
         onDoubleClick={handleDbClick}
         onContextMenu={handleContextMenuOpen}
-        {...use({ outdated, dragging: dndElement })}
-        className={className}
+        className={s(styles, { treeNodeControl: true, outdated, dragging: isDragging }, className)}
       >
-        <TreeNodeName title={node.name}>
-          <name-box>{node.name}</name-box>
+        <TreeNodeName className={s(styles, { treeNodeName: true })} title={node.name}>
+          <div className={s(styles, { nameBox: true })}>{node.name}</div>
         </TreeNodeName>
         {!dndPlaceholder && (
-          <portal onClick={handlePortalClick}>
+          <div className={s(styles, { portal: true })} onClick={handlePortalClick}>
             <TreeNodeMenuLoader mouseContextMenu={mouseContextMenu} node={node} selected={selected} />
-          </portal>
+          </div>
         )}
-      </TreeNodeControl>,
+      </TreeNodeControl>
     );
   }),
 );
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css
new file mode 100644
index 0000000000..ca67e04bd2
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationTreeProjectsRendererRenderer.m.css
@@ -0,0 +1,12 @@
+.projectNode {
+  margin-top: 8px;
+
+  &.project:only-child,
+  &.hideProjects {
+    margin-top: 0px;
+  }
+
+  & > .navigationNodeNested {
+    padding-left: 0 !important;
+  }
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx
index 35dd96334a..fc6d219e31 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/navigationTreeProjectsRendererRenderer.tsx
@@ -7,13 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled, { css, use } from 'reshadow';
 
-import { getComputed, Translate, TREE_NODE_STYLES, TreeNodeNestedMessage } from '@cloudbeaver/core-blocks';
+import { getComputed, s, SContext, StyleRegistry, Translate, TreeNodeNestedMessage, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import type { NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
 import { NAV_NODE_TYPE_PROJECT, ProjectsService } from '@cloudbeaver/core-projects';
 
+import { NavigationNodeControlRendererStyles, NavigationNodeNestedStyles } from '../../index';
 import { useNode } from '../../NodesManager/useNode';
 import { ElementsTreeContext } from '../ElementsTree/ElementsTreeContext';
 import type { NavigationNodeRendererComponent } from '../ElementsTree/NavigationNodeComponent';
@@ -21,25 +21,24 @@ import { isDraggingInsideProject } from '../ElementsTree/NavigationTreeNode/isDr
 import { NavigationNodeRendererLoader } from '../ElementsTree/NavigationTreeNode/NavigationNodeRendererLoader';
 import type { IElementsTreeCustomRenderer } from '../ElementsTree/useElementsTree';
 import { NavigationNodeProjectControl } from './NavigationNodeProjectControl';
-
-const nestedStyles = css`
-  TreeNode {
-    margin-top: 8px;
-
-    &[|project]:only-child,
-    &[|hideProjects] {
-      margin-top: 0px;
-
-      & Control {
-        display: none;
-      }
-    }
-
-    & NavigationNodeNested {
-      padding-left: 0 !important;
-    }
-  }
-`;
+import style from './NavigationTreeProjectsRendererRenderer.m.css';
+
+const registry: StyleRegistry = [
+  [
+    NavigationNodeNestedStyles,
+    {
+      mode: 'append',
+      styles: [style],
+    },
+  ],
+  [
+    NavigationNodeControlRendererStyles,
+    {
+      mode: 'append',
+      styles: [style],
+    },
+  ],
+];
 
 export function navigationTreeProjectsRendererRenderer(navNodeInfoResource: NavNodeInfoResource): IElementsTreeCustomRenderer {
   return nodeId => {
@@ -61,6 +60,7 @@ const ProjectRenderer: NavigationNodeRendererComponent = observer(function Manag
   className,
   expanded,
 }) {
+  const styles = useS(style);
   const projectsService = useService(ProjectsService);
   const elementsTreeContext = useContext(ElementsTreeContext);
 
@@ -78,26 +78,26 @@ const ProjectRenderer: NavigationNodeRendererComponent = observer(function Manag
   const hideProjects = elementsTreeContext?.tree.settings?.projects === false && !isDragging;
 
   if (!node) {
-    return styled(TREE_NODE_STYLES)(
+    return (
       <TreeNodeNestedMessage>
         <Translate token="app_navigationTree_node_not_found" />
-      </TreeNodeNestedMessage>,
+      </TreeNodeNestedMessage>
     );
   }
 
   const project = node.nodeType === NAV_NODE_TYPE_PROJECT && singleProject && !isDragging;
 
-  return styled(nestedStyles)(
-    <NavigationNodeRendererLoader
-      node={node}
-      path={path}
-      expanded={expanded}
-      dragging={dragging}
-      className={className}
-      control={NavigationNodeProjectControl}
-      style={nestedStyles}
-      component={component}
-      {...use({ hideProjects, project })}
-    />,
+  return (
+    <SContext registry={registry}>
+      <NavigationNodeRendererLoader
+        node={node}
+        path={path}
+        expanded={expanded}
+        dragging={dragging}
+        className={s(styles, { projectNode: true, hideProjects, project }, className)}
+        control={NavigationNodeProjectControl}
+        component={component}
+      />
+    </SContext>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/index.ts b/webapp/packages/plugin-navigation-tree/src/index.ts
index c33fe0d751..81f960e9fe 100644
--- a/webapp/packages/plugin-navigation-tree/src/index.ts
+++ b/webapp/packages/plugin-navigation-tree/src/index.ts
@@ -28,6 +28,10 @@ export * from './NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools
 export * from './NavigationTree/ElementsTree/elementsTreeNameFilter';
 export * from './NavigationTree/NavigationTreeBootstrap';
 export * from './NavigationTree/NavigationTreeService';
+export { default as ElementsTreeToolsStyles } from './NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css';
+export { default as ElementsTreeFilterStyles } from './NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.m.css';
+export { default as NavigationNodeNestedStyles } from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.m.css';
+export { default as NavigationNodeControlRendererStyles } from './NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.m.css';
 
 export * from './NavigationTree/NavigationTreeLoader';
 

From 713082215fd8bde05c1a668f210241968e4ab2e9 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Thu, 28 Sep 2023 12:46:02 +0200
Subject: [PATCH 7/9] CB-3197 add interface comments (#2018)

* CB-3197 add interface comments

* CB-3197 make comments cleaner

* CB-3197 add comment for the indeterminateSelected

* CB-3197 fix code style

---------

Co-authored-by: Alexey <wrouds@gmail.com>
---
 .../packages/core-blocks/src/Tree/TreeNode/ITreeNodeState.ts | 1 +
 .../src/DVResultSetGroupingPresentation.tsx                  | 2 +-
 .../src/DatabaseDataModel/IDatabaseDataModel.ts              | 3 +++
 .../src/DatabaseDataModel/IDatabaseDataOptions.ts            | 2 ++
 .../src/DatabaseDataModel/IDatabaseDataSource.ts             | 5 +++++
 .../plugin-data-viewer/src/TableViewer/TableViewer.tsx       | 1 +
 .../src/NavigationTree/ElementsTree/ElementsTree.tsx         | 3 +++
 .../src/NavigationTree/ElementsTree/useElementsTree.ts       | 1 +
 8 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/ITreeNodeState.ts b/webapp/packages/core-blocks/src/Tree/TreeNode/ITreeNodeState.ts
index 0fc859df39..712f03f81d 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/ITreeNodeState.ts
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/ITreeNodeState.ts
@@ -11,6 +11,7 @@ export interface ITreeNodeState {
   disabled?: boolean;
   loading?: boolean;
   selected?: boolean;
+  /** It is true when the node is neither selected nor unselected, used to indicate a mixed or partial selection in a group of sub-options */
   indeterminateSelected?: boolean;
   externalExpanded?: boolean;
   expanded?: boolean;
diff --git a/webapp/packages/plugin-data-viewer-result-set-grouping/src/DVResultSetGroupingPresentation.tsx b/webapp/packages/plugin-data-viewer-result-set-grouping/src/DVResultSetGroupingPresentation.tsx
index 9ab3d72630..62d9456b3d 100755
--- a/webapp/packages/plugin-data-viewer-result-set-grouping/src/DVResultSetGroupingPresentation.tsx
+++ b/webapp/packages/plugin-data-viewer-result-set-grouping/src/DVResultSetGroupingPresentation.tsx
@@ -15,11 +15,11 @@ import { CaptureViewContext, useDataContext } from '@cloudbeaver/core-view';
 import { DataPresentationComponent, IDatabaseResultSet, TableViewerLoader } from '@cloudbeaver/plugin-data-viewer';
 
 import { DATA_CONTEXT_DV_DDM_RS_GROUPING } from './DataContext/DATA_CONTEXT_DV_DDM_RS_GROUPING';
+import { DEFAULT_GROUPING_QUERY_OPERATION } from './DEFAULT_GROUPING_QUERY_OPERATION';
 import type { IGroupingQueryState } from './IGroupingQueryState';
 import { useGroupingData } from './useGroupingData';
 import { useGroupingDataModel } from './useGroupingDataModel';
 import { useGroupingDnDColumns } from './useGroupingDnDColumns';
-import { DEFAULT_GROUPING_QUERY_OPERATION } from './DEFAULT_GROUPING_QUERY_OPERATION';
 
 const styles = css`
   drop-area {
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataModel.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataModel.ts
index 44be18e79c..84ce052e64 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataModel.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataModel.ts
@@ -16,12 +16,15 @@ export interface IRequestEventData<TOptions = any, TResult extends IDatabaseData
   model: IDatabaseDataModel<TOptions, TResult>;
 }
 
+/** Represents an interface for interacting with a database. It is used for managing and requesting data. */
 export interface IDatabaseDataModel<TOptions = any, TResult extends IDatabaseDataResult = IDatabaseDataResult> {
   readonly id: string;
   readonly name: string | null;
   readonly source: IDatabaseDataSource<TOptions, TResult>;
+  /** Holds metadata about a data request. */
   readonly requestInfo: IRequestInfo;
   readonly supportedDataFormats: ResultDataFormat[];
+  /** Represents the value by which the number of loaded rows will be increased when loading the next data portion */
   readonly countGain: number;
 
   readonly onOptionsChange: IExecutor;
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataOptions.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataOptions.ts
index 50f56e43e0..95a970d28d 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataOptions.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataOptions.ts
@@ -12,7 +12,9 @@ export interface IDatabaseDataOptions {
   connectionKey: IConnectionInfoParams;
   schema?: string;
   catalog?: string;
+  /** A raw string representation of the query filter conditions ("id=4") */
   whereFilter: string;
+  /** A complex object that can represent filters and sorting options of the result set */
   constraints: SqlDataFilterConstraint[];
   readLogs?: boolean;
 }
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataSource.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataSource.ts
index 00d33aa2a8..8a081b7f7c 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataSource.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataSource.ts
@@ -17,6 +17,7 @@ export interface IRequestInfo {
   readonly originalQuery: string;
   readonly requestDuration: number;
   readonly requestMessage: string;
+  /** A string representation of the filters constraints applied to the data request. Also returns as it is in case of whereFilter */
   readonly requestFilter: string;
   readonly source: string | null;
 }
@@ -30,11 +31,13 @@ export interface IDatabaseDataSource<TOptions, TResult extends IDatabaseDataResu
   readonly access: DatabaseDataAccessMode;
   readonly dataFormat: ResultDataFormat;
   readonly supportedDataFormats: ResultDataFormat[];
+  /** Indicates whether database supports filtering and sorting via constraints */
   readonly constraintsAvailable: boolean;
   readonly actions: IDatabaseDataActions<TOptions, TResult>;
   readonly results: TResult[];
   readonly offset: number;
   readonly count: number;
+  /** Options of the previous request */
   readonly prevOptions: Readonly<TOptions> | null;
   readonly options: TOptions | null;
   readonly requestInfo: IRequestInfo;
@@ -80,6 +83,8 @@ export interface IDatabaseDataSource<TOptions, TResult extends IDatabaseDataResu
   setExecutionContext: (context: IConnectionExecutionContext | null) => this;
 
   retry: () => Promise<void>;
+  /** Allows to perform an asynchronous action on the data source, this action will wait previous action to finish and save or load requests.
+   * The data source will have a loading and disabled state while performing an action */
   runTask: <T>(task: () => Promise<T>) => Promise<T>;
   requestData: () => Promise<void> | void;
   refreshData: () => Promise<void> | void;
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
index d16c21b5fd..066b65ce0f 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
@@ -99,6 +99,7 @@ interface Props {
   resultIndex: number | undefined;
   presentationId: string | undefined;
   valuePresentationId: string | null | undefined;
+  /** Display data in simple mode, some features will be hidden or disabled */
   simple?: boolean;
   context?: IDataContext;
   className?: string;
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
index ce6db591ae..efa8684aa5 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
@@ -43,9 +43,12 @@ import { IElementsTreeOptions, useElementsTree } from './useElementsTree';
 import { useElementsTreeFolderExplorer } from './useElementsTreeFolderExplorer';
 
 export interface ElementsTreeProps extends IElementsTreeOptions, React.PropsWithChildren {
+  /** Specifies the root path for the tree. ROOT_NODE_PATH will be used if not defined */
   root?: string;
   selectionTree?: boolean;
+  /** Specifies a custom control component for navigation tree */
   control?: NavTreeControlComponent;
+  /** A placeholder component to be displayed when the elements tree is empty */
   emptyPlaceholder?: React.FC;
   className?: string;
   settingsElements?: PlaceholderElement<IElementsTreeSettingsProps>[];
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts
index ab8d236078..18e63c8e9f 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts
@@ -71,6 +71,7 @@ export interface IElementsTreeOptions {
   renderers?: IElementsTreeCustomRenderer[];
   nodeInfoTransformers?: IElementsTreeCustomNodeInfo[];
   expandStateGetters?: IElementsTreeNodeExpandInfoGetter[];
+  /** Allows to pass external state. It can be used to manipulate a tree state from the outside or to store it in an external state */
   localState?: MetadataMap<string, ITreeNodeState>;
   getChildren: (id: string) => string[] | undefined;
   loadChildren: (id: string, manual: boolean) => Promise<boolean>;

From 6da5f3b0e46e26de04c20ff121260d87a0b5e54a Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Thu, 28 Sep 2023 12:47:29 +0200
Subject: [PATCH 8/9] CB-4059 do not verify the SSL Certificate of the target
 server in dev mode (#2025)

---
 webapp/packages/core-cli/configs/webpack.product.dev.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webapp/packages/core-cli/configs/webpack.product.dev.config.js b/webapp/packages/core-cli/configs/webpack.product.dev.config.js
index 32653b5b61..44be0161a2 100644
--- a/webapp/packages/core-cli/configs/webpack.product.dev.config.js
+++ b/webapp/packages/core-cli/configs/webpack.product.dev.config.js
@@ -61,10 +61,12 @@ module.exports = (env, argv) => {
       proxy: {
         '/api': {
           target: envServer,
+          secure: false,
         },
         '/api/ws': {
           target: `${urlObject.protocol === 'https:' ? 'wss:' : 'ws:'}//${urlObject.hostname}:${urlObject.port}/api/ws`,
           ws: true,
+          secure: false,
         },
       },
       onListening: function (devServer, ...args) {

From c58e62c90e1168983754981de303abfd2e512740 Mon Sep 17 00:00:00 2001
From: Ainur <59531286+yagudin10@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:05:00 +0200
Subject: [PATCH 9/9] CB-2153 update values of tables with join fix (#1961)

Co-authored-by: EvgeniaBzzz <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 .../service/sql/WebSQLResultsInfo.java        |  14 ++
 .../service/sql/WebSQLProcessor.java          | 143 +++++++++++-------
 2 files changed, 99 insertions(+), 58 deletions(-)

diff --git a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/service/sql/WebSQLResultsInfo.java b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/service/sql/WebSQLResultsInfo.java
index ca2bc074e5..3fd68da3c2 100644
--- a/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/service/sql/WebSQLResultsInfo.java
+++ b/server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/service/sql/WebSQLResultsInfo.java
@@ -26,7 +26,9 @@
 import org.jkiss.dbeaver.model.struct.DBSDataContainer;
 import org.jkiss.dbeaver.model.struct.DBSTypedObject;
 
+import java.util.HashSet;
 import java.util.List;
+import java.util.Set;
 
 /**
  * Web query results info.
@@ -82,6 +84,18 @@ public DBDRowIdentifier getDefaultRowIdentifier() {
         return null;
     }
 
+    @NotNull
+    public Set<DBDRowIdentifier> getRowIdentifiers() {
+        Set<DBDRowIdentifier> rowIdentifiers = new HashSet<>();
+        for (DBDAttributeBinding column : attributes) {
+            DBDRowIdentifier rowIdentifier = column.getRowIdentifier();
+            if (rowIdentifier != null) {
+                 rowIdentifiers.add(rowIdentifier);
+            }
+        }
+        return rowIdentifiers;
+    }
+
     public DBSAttributeBase getAttribute(String attributeName) {
         DBPDataSource dataSource = dataContainer.getDataSource();
 
diff --git a/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/service/sql/WebSQLProcessor.java b/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/service/sql/WebSQLProcessor.java
index 4ea954fae9..28b3b20261 100644
--- a/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/service/sql/WebSQLProcessor.java
+++ b/server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/service/sql/WebSQLProcessor.java
@@ -55,6 +55,7 @@
 import java.lang.reflect.InvocationTargetException;
 import java.util.*;
 import java.util.concurrent.atomic.AtomicInteger;
+import java.util.stream.Collectors;
 
 /**
  * Web SQL processor.
@@ -315,56 +316,67 @@ public WebSQLExecuteInfo updateResultsDataBatch(
         @Nullable List<WebSQLResultsRow> addedRows,
         @Nullable WebDataFormat dataFormat) throws DBException
     {
-        Map<DBSDataManipulator.ExecuteBatch, Object[]> resultBatches = new LinkedHashMap<>();
-
+        List<Object[]> newResultSetRows = new ArrayList<>();
         KeyDataReceiver keyReceiver = new KeyDataReceiver(contextInfo.getResults(resultsId));
-
-        DBSDataManipulator dataManipulator = generateUpdateResultsDataBatch(
-            monitor, contextInfo, resultsId, updatedRows, deletedRows, addedRows, dataFormat, resultBatches, keyReceiver);
-
         WebSQLResultsInfo resultsInfo = contextInfo.getResults(resultsId);
 
+        Set<DBDRowIdentifier> rowIdentifierList = new HashSet<>();
+        // several row identifiers could be if we update result set table with join
+        // we can't add or delete rows from result set table with join
+        if (!CommonUtils.isEmpty(deletedRows) || !CommonUtils.isEmpty(addedRows)) {
+            rowIdentifierList.add(resultsInfo.getDefaultRowIdentifier());
+        } else if (!CommonUtils.isEmpty(updatedRows)) {
+            rowIdentifierList = resultsInfo.getRowIdentifiers();
+        }
+
         long totalUpdateCount = 0;
 
         WebSQLExecuteInfo result = new WebSQLExecuteInfo();
         List<WebSQLQueryResults> queryResults = new ArrayList<>();
+        for (var rowIdentifier : rowIdentifierList) {
+            Map<DBSDataManipulator.ExecuteBatch, Object[]> resultBatches = new LinkedHashMap<>();
+            DBSDataManipulator dataManipulator = generateUpdateResultsDataBatch(
+                monitor, resultsInfo, rowIdentifier, updatedRows, deletedRows, addedRows, dataFormat, resultBatches, keyReceiver);
+
+
+            DBCExecutionContext executionContext = getExecutionContext(dataManipulator);
+            try (DBCSession session = executionContext.openSession(monitor, DBCExecutionPurpose.USER, "Update data in container")) {
+                DBCTransactionManager txnManager = DBUtils.getTransactionManager(executionContext);
+                boolean revertToAutoCommit = false;
+                if (txnManager != null && txnManager.isSupportsTransactions() && txnManager.isAutoCommit()) {
+                    txnManager.setAutoCommit(monitor, false);
+                    revertToAutoCommit = true;
+                }
+                try {
+                    Map<String, Object> options = Collections.emptyMap();
+                    for (Map.Entry<DBSDataManipulator.ExecuteBatch, Object[]> rb : resultBatches.entrySet()) {
+                        DBSDataManipulator.ExecuteBatch batch = rb.getKey();
+                        Object[] rowValues = rb.getValue();
+                        keyReceiver.setRow(rowValues);
+                        DBCStatistics statistics = batch.execute(session, options);
+
+                        // Patch result rows (adapt to web format)
+                        for (int i = 0; i < rowValues.length; i++) {
+                            rowValues[i] = WebSQLUtils.makeWebCellValue(webSession, resultsInfo.getAttributeByPosition(i), rowValues[i], dataFormat);
+                        }
 
-        DBCExecutionContext executionContext = getExecutionContext(dataManipulator);
-        try (DBCSession session = executionContext.openSession(monitor, DBCExecutionPurpose.USER, "Update data in container")) {
-            DBCTransactionManager txnManager = DBUtils.getTransactionManager(executionContext);
-            boolean revertToAutoCommit = false;
-            if (txnManager != null && txnManager.isSupportsTransactions() && txnManager.isAutoCommit()) {
-                txnManager.setAutoCommit(monitor, false);
-                revertToAutoCommit = true;
-            }
-            try {
-                Map<String, Object> options = Collections.emptyMap();
-                for (Map.Entry<DBSDataManipulator.ExecuteBatch, Object[]> rb : resultBatches.entrySet()) {
-                    DBSDataManipulator.ExecuteBatch batch = rb.getKey();
-                    Object[] rowValues = rb.getValue();
-                    keyReceiver.setRow(rowValues);
-                    DBCStatistics statistics = batch.execute(session, options);
-
-                    // Patch result rows (adapt to web format)
-                    for (int i = 0; i < rowValues.length; i++) {
-                        rowValues[i] = WebSQLUtils.makeWebCellValue(webSession, resultsInfo.getAttributeByPosition(i), rowValues[i], dataFormat);
+                        totalUpdateCount += statistics.getRowsUpdated();
+                        result.setDuration(result.getDuration() + statistics.getExecuteTime());
+                        newResultSetRows.add(rowValues);
                     }
 
-                    totalUpdateCount += statistics.getRowsUpdated();
-                    result.setDuration(result.getDuration() + statistics.getExecuteTime());
-                }
-
-                if (txnManager != null && txnManager.isSupportsTransactions()) {
-                    txnManager.commit(session);
-                }
-            } catch (Exception e) {
-                if (txnManager != null && txnManager.isSupportsTransactions()) {
-                    txnManager.rollback(session, null);
-                }
-                throw new DBCException("Error persisting data changes", e);
-            } finally {
-                if (revertToAutoCommit) {
-                    txnManager.setAutoCommit(monitor, true);
+                    if (txnManager != null && txnManager.isSupportsTransactions()) {
+                        txnManager.commit(session);
+                    }
+                } catch (Exception e) {
+                    if (txnManager != null && txnManager.isSupportsTransactions()) {
+                        txnManager.rollback(session, null);
+                    }
+                    throw new DBCException("Error persisting data changes", e);
+                } finally {
+                    if (revertToAutoCommit) {
+                        txnManager.setAutoCommit(monitor, true);
+                    }
                 }
             }
         }
@@ -376,7 +388,7 @@ public WebSQLExecuteInfo updateResultsDataBatch(
         WebSQLQueryResults updateResults = new WebSQLQueryResults(webSession, dataFormat);
         updateResults.setUpdateRowCount(totalUpdateCount);
         updateResults.setResultSet(updatedResultSet);
-        updatedResultSet.setRows(resultBatches.values().toArray(new Object[0][]));
+        updatedResultSet.setRows(newResultSetRows.toArray(new Object[0][]));
 
         queryResults.add(updateResults);
 
@@ -396,26 +408,42 @@ public String generateResultsDataUpdateScript(
     {
         Map<DBSDataManipulator.ExecuteBatch, Object[]> resultBatches = new LinkedHashMap<>();
 
-        DBSDataManipulator dataManipulator = generateUpdateResultsDataBatch(
-            monitor, contextInfo, resultsId, updatedRows, deletedRows, addedRows, dataFormat, resultBatches, null);
 
-        List<DBEPersistAction> actions = new ArrayList<>();
-
-        DBCExecutionContext executionContext = getExecutionContext(dataManipulator);
-        try (DBCSession session = executionContext.openSession(monitor, DBCExecutionPurpose.USER, "Update data in container")) {
-            Map<String, Object> options = Collections.emptyMap();
-            for (DBSDataManipulator.ExecuteBatch batch : resultBatches.keySet()) {
-                batch.generatePersistActions(session, actions, options);
+        WebSQLResultsInfo resultsInfo = contextInfo.getResults(resultsId);
+        Set<DBDRowIdentifier> rowIdentifierList = new HashSet<>();
+        // several row identifiers could be if we update result set table with join
+        // we can't add or delete rows from result set table with join
+        if (!CommonUtils.isEmpty(deletedRows) || !CommonUtils.isEmpty(addedRows)) {
+            rowIdentifierList.add(resultsInfo.getDefaultRowIdentifier());
+        } else if (!CommonUtils.isEmpty(updatedRows)) {
+            rowIdentifierList = resultsInfo.getRowIdentifiers();
+        }
+        StringBuilder sqlBuilder = new StringBuilder();
+        for (var rowIdentifier : rowIdentifierList) {
+            DBSDataManipulator dataManipulator = generateUpdateResultsDataBatch(
+                monitor, resultsInfo, rowIdentifier, updatedRows, deletedRows, addedRows, dataFormat, resultBatches, null);
+
+            List<DBEPersistAction> actions = new ArrayList<>();
+
+            DBCExecutionContext executionContext = getExecutionContext(dataManipulator);
+            try (DBCSession session = executionContext.openSession(monitor, DBCExecutionPurpose.USER, "Update data in container")) {
+                Map<String, Object> options = Collections.emptyMap();
+                for (DBSDataManipulator.ExecuteBatch batch : resultBatches.keySet()) {
+                    batch.generatePersistActions(session, actions, options);
+                }
             }
-        }
 
-        return SQLUtils.generateScript(executionContext.getDataSource(), actions.toArray(new DBEPersistAction[0]), false);
+            sqlBuilder.append(
+                SQLUtils.generateScript(executionContext.getDataSource(), actions.toArray(new DBEPersistAction[0]), false)
+            );
+        }
+        return sqlBuilder.toString();
     }
 
     private DBSDataManipulator generateUpdateResultsDataBatch(
         @NotNull DBRProgressMonitor monitor,
-        @NotNull WebSQLContextInfo contextInfo,
-        @NotNull String resultsId,
+        @NotNull WebSQLResultsInfo resultsInfo,
+        @NotNull DBDRowIdentifier rowIdentifier,
         @Nullable List<WebSQLResultsRow> updatedRows,
         @Nullable List<WebSQLResultsRow> deletedRows,
         @Nullable List<WebSQLResultsRow> addedRows,
@@ -424,10 +452,7 @@ private DBSDataManipulator generateUpdateResultsDataBatch(
         @Nullable DBDDataReceiver keyReceiver)
         throws DBException
     {
-        WebSQLResultsInfo resultsInfo = contextInfo.getResults(resultsId);
 
-        DBDRowIdentifier rowIdentifier = resultsInfo.getDefaultRowIdentifier();
-        checkRowIdentifier(resultsInfo, rowIdentifier);
         DBSEntity dataContainer = rowIdentifier.getEntity();
         checkDataEditAllowed(dataContainer);
         DBSDataManipulator dataManipulator = (DBSDataManipulator) dataContainer;
@@ -448,7 +473,9 @@ private DBSDataManipulator generateUpdateResultsDataBatch(
             if (!CommonUtils.isEmpty(updatedRows)) {
 
                 for (WebSQLResultsRow row : updatedRows) {
-                    Map<String, Object> updateValues = row.getUpdateValues();
+                    Map<String, Object> updateValues = row.getUpdateValues().entrySet().stream()
+                        .filter(x -> CommonUtils.equalObjects(allAttributes[CommonUtils.toInt(x.getKey())].getRowIdentifier(), rowIdentifier))
+                        .collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue));
                     if (CommonUtils.isEmpty(row.getData()) || CommonUtils.isEmpty(updateValues)) {
                         continue;
                     }