From 584d551f67e0fb4dad03d05c5c057620bffd8603 Mon Sep 17 00:00:00 2001
From: Andrey Melikhov <melikhov@yandex-team.ru>
Date: Tue, 24 Dec 2024 12:35:27 +0300
Subject: [PATCH 01/18] Add zitadel headers (#1969)

---
 .../components/processor/data-fetcher.ts        |  6 +++---
 .../charts-engine/controllers/charts.ts         |  2 +-
 .../middlewareAdapters/charts-with-dataset.ts   | 10 +++++++---
 .../middlewareAdapters/controls-with-dataset.ts |  2 ++
 .../request-with-dataset/request-dataset.ts     | 17 +++++++++++++++--
 src/server/modes/charts/plugins/types.ts        |  2 ++
 .../registry/units/common/functions-map.ts      |  3 +--
 7 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/server/components/charts-engine/components/processor/data-fetcher.ts b/src/server/components/charts-engine/components/processor/data-fetcher.ts
index 62e562ef1d..f9a757babd 100644
--- a/src/server/components/charts-engine/components/processor/data-fetcher.ts
+++ b/src/server/components/charts-engine/components/processor/data-fetcher.ts
@@ -149,12 +149,12 @@ export type DataFetcherResult = {
     data?: any;
 };
 
-type ZitadelParams = {
+export type ZitadelParams = {
     accessToken?: string;
     serviceUserAccessToken?: string;
 };
 
-function addZitadelHeaders({
+export function addZitadelHeaders({
     headers,
     zitadelParams,
 }: {
@@ -725,7 +725,6 @@ export class DataFetcher {
             );
 
             const sourceAuthorizationHeaders = getSourceAuthorizationHeaders({
-                req,
                 ctx,
                 sourceConfig,
                 subrequestHeaders,
@@ -803,6 +802,7 @@ export class DataFetcher {
                     ChartsEngine: chartsEngine,
                     userId: userId === undefined ? null : userId,
                     rejectFetchingSource,
+                    zitadelParams,
                 });
             }
         }
diff --git a/src/server/components/charts-engine/controllers/charts.ts b/src/server/components/charts-engine/controllers/charts.ts
index f59ae4f077..9696f3f810 100644
--- a/src/server/components/charts-engine/controllers/charts.ts
+++ b/src/server/components/charts-engine/controllers/charts.ts
@@ -90,7 +90,7 @@ function prepareChartData(
     return {chart, type, links, template};
 }
 
-export const getHeaders = (req: Request) => {
+const getHeaders = (req: Request) => {
     const headers = {
         ...req.headers,
         ...(req.ctx.config.isZitadelEnabled ? {...Utils.pickZitadelHeaders(req)} : {}),
diff --git a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts
index 2eb899c3b3..9fb132d35c 100644
--- a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts
+++ b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts
@@ -22,8 +22,11 @@ export default async (
         workbookId,
         rejectFetchingSource,
         pluginOptions,
+        zitadelParams,
     } = args;
 
+    const ctx = req.ctx;
+
     const cacheClient = ChartsEngine.cacheClient as Cache;
 
     const [datasetId, layerId] = getDatasetIdAndLayerIdFromKey(sourceName);
@@ -47,19 +50,20 @@ export default async (
             datasetId,
             workbookId: workbookId ?? null,
             req,
-            ctx: req.ctx,
+            ctx,
             cacheClient,
             userId,
             iamToken,
             rejectFetchingSource,
             pluginOptions,
+            zitadelParams,
         });
 
         revisionId = datasetFieldsResponse.revisionId;
         datasetFields = datasetFieldsResponse.datasetFields;
     }
 
-    req.ctx.log('CHARTS_DATASET_FIELDS_RECEIVED', {
+    ctx.log('CHARTS_DATASET_FIELDS_RECEIVED', {
         count: datasetFields.length,
     });
 
@@ -73,7 +77,7 @@ export default async (
         revisionId,
     });
 
-    req.ctx.log('CHARTS_DATASET_FIELDS_PROCESSED');
+    ctx.log('CHARTS_DATASET_FIELDS_PROCESSED');
 
     return {...source, data};
 };
diff --git a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts
index bbe095bf85..6ffa3d4d16 100644
--- a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts
+++ b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts
@@ -19,6 +19,7 @@ export default async (
         workbookId,
         rejectFetchingSource,
         pluginOptions,
+        zitadelParams,
     } = args;
 
     const ctx = req.ctx;
@@ -37,6 +38,7 @@ export default async (
         iamToken,
         rejectFetchingSource,
         pluginOptions,
+        zitadelParams,
     });
 
     const datasetFields = datasetFieldsResponse.datasetFields;
diff --git a/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts b/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts
index 889316fd6c..40b6c28ef3 100644
--- a/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts
+++ b/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts
@@ -8,7 +8,10 @@ import type {WorkbookId} from '../../../../../shared';
 import {DL_EMBED_TOKEN_HEADER} from '../../../../../shared';
 import type {GetDataSetFieldsByIdResponse, PartialDatasetField} from '../../../../../shared/schema';
 import Cache from '../../../../components/cache-client';
-import {getHeaders} from '../../../../components/charts-engine/controllers/charts';
+import {
+    type ZitadelParams,
+    addZitadelHeaders,
+} from '../../../../components/charts-engine/components/processor/data-fetcher';
 import {registry} from '../../../../registry';
 import type {DatalensGatewaySchemas} from '../../../../types/gateway';
 
@@ -27,6 +30,7 @@ const getDatasetFieldsById = async ({
     rejectFetchingSource,
     iamToken,
     pluginOptions,
+    zitadelParams,
 }: {
     datasetId: string;
     workbookId: string | null;
@@ -35,6 +39,7 @@ const getDatasetFieldsById = async ({
     rejectFetchingSource: (reason?: any) => void;
     iamToken?: string;
     pluginOptions?: ConfigurableRequestWithDatasetPluginOptions;
+    zitadelParams: ZitadelParams | undefined;
 }): Promise<GetDataSetFieldsByIdResponse> => {
     const {gatewayApi} = registry.getGatewayApi<DatalensGatewaySchemas>();
 
@@ -43,7 +48,11 @@ const getDatasetFieldsById = async ({
 
     const requestDatasetFieldsByToken = gatewayApi.bi.embedsGetDataSetFieldsById;
     try {
-        const headers = getHeaders(req);
+        const headers = {...req.headers};
+
+        if (zitadelParams) {
+            addZitadelHeaders({headers, zitadelParams});
+        }
 
         const response = req.headers[DL_EMBED_TOKEN_HEADER]
             ? await requestDatasetFieldsByToken({
@@ -96,6 +105,7 @@ export const getDatasetFields = async (args: {
     userId: string | null;
     rejectFetchingSource: (reason: any) => void;
     pluginOptions?: ConfigurableRequestWithDatasetPluginOptions;
+    zitadelParams: ZitadelParams | undefined;
 }): Promise<{datasetFields: PartialDatasetField[]; revisionId: string}> => {
     const {
         datasetId,
@@ -107,6 +117,7 @@ export const getDatasetFields = async (args: {
         iamToken,
         rejectFetchingSource,
         pluginOptions,
+        zitadelParams,
     } = args;
 
     const cacheKey = `${datasetId}__${userId}`;
@@ -134,6 +145,7 @@ export const getDatasetFields = async (args: {
                 rejectFetchingSource,
                 iamToken,
                 pluginOptions,
+                zitadelParams,
             });
             datasetFields = response.fields;
             revisionId = response.revision_id;
@@ -166,6 +178,7 @@ export const getDatasetFields = async (args: {
             rejectFetchingSource,
             iamToken,
             pluginOptions,
+            zitadelParams,
         });
         datasetFields = response.fields;
         revisionId = response.revision_id;
diff --git a/src/server/modes/charts/plugins/types.ts b/src/server/modes/charts/plugins/types.ts
index 44bd8dca15..33cfdefe7a 100644
--- a/src/server/modes/charts/plugins/types.ts
+++ b/src/server/modes/charts/plugins/types.ts
@@ -2,6 +2,7 @@ import type {Request} from '@gravity-ui/expresskit';
 
 import type {WorkbookId} from '../../../../shared';
 import type {ChartsEngine} from '../../../components/charts-engine';
+import type {ZitadelParams} from '../../../components/charts-engine/components/processor/data-fetcher';
 
 import type {
     CHARTS_MIDDLEWARE_URL_TYPE,
@@ -53,6 +54,7 @@ export interface MiddlewareSourceAdapterArgs {
     ChartsEngine: ChartsEngine;
     userId: string | null;
     rejectFetchingSource: (reason: any) => void;
+    zitadelParams: ZitadelParams | undefined;
 }
 
 export interface ProcessorHookInitArgs {
diff --git a/src/server/registry/units/common/functions-map.ts b/src/server/registry/units/common/functions-map.ts
index 3d1a734f20..615d0e7fda 100644
--- a/src/server/registry/units/common/functions-map.ts
+++ b/src/server/registry/units/common/functions-map.ts
@@ -1,4 +1,4 @@
-import type {Request, Response} from '@gravity-ui/expresskit';
+import type {Response} from '@gravity-ui/expresskit';
 import type {AppContext} from '@gravity-ui/nodekit';
 
 import type {Palette} from '../../../../shared/constants/colors';
@@ -11,7 +11,6 @@ export const commonFunctionsMap = {
     getSourceAuthorizationHeaders:
         makeFunctionTemplate<
             (args: {
-                req?: Request;
                 ctx: AppContext;
                 sourceConfig: SourceConfig;
                 subrequestHeaders: Record<string, string>;

From 1aeec0069c046857a3d22215b10cd465f1c00951 Mon Sep 17 00:00:00 2001
From: Irina Kuzmina <kuzmadom@yandex-team.ru>
Date: Tue, 24 Dec 2024 13:20:11 +0300
Subject: [PATCH 02/18] Up @gravity-ui/chartkit 5.19.0 -> 5.19.1 (#1972)

---
 package-lock.json | 9 +++++----
 package.json      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e12dc98241..1da208a3fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@diplodoc/transform": "^4.20.0",
         "@gravity-ui/app-layout": "^2.1.0",
         "@gravity-ui/browserslist-config": "^4.3.0",
-        "@gravity-ui/chartkit": "^5.19.0",
+        "@gravity-ui/chartkit": "^5.19.1",
         "@gravity-ui/dashkit": "^8.22.1",
         "@gravity-ui/date-utils": "^2.5.6",
         "@gravity-ui/expresskit": "^2.1.0",
@@ -4998,9 +4998,10 @@
       "integrity": "sha512-GhZemc/gPq/Kf4OYyXZpeZLgL69pI8oidWhdOKUHOWSYQyKviDDZDxrMzjZzvCWOxrpQVFtmqiCBMW8nqJivEQ=="
     },
     "node_modules/@gravity-ui/chartkit": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-5.19.0.tgz",
-      "integrity": "sha512-CtjnX+F47+i0RpgL5h6sXzQvyd/BQ27yto/7kyikj1LUEbJZELGyebyZfbzhl6isFXPNWprpo91i5kt5M2oFnA==",
+      "version": "5.19.1",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-5.19.1.tgz",
+      "integrity": "sha512-fzV1TK2Q+jHMoUFZeppmNdtZ7BS7D1Jdqvi2ZOTu6ccJzjU83zbmhkqngl313nZyRaIvrb29HEaLwrLqfu1hQw==",
+      "license": "MIT",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/charts": "^0.5.0",
diff --git a/package.json b/package.json
index 926d8e97c0..cfcb6ca64e 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "@diplodoc/transform": "^4.20.0",
     "@gravity-ui/app-layout": "^2.1.0",
     "@gravity-ui/browserslist-config": "^4.3.0",
-    "@gravity-ui/chartkit": "^5.19.0",
+    "@gravity-ui/chartkit": "^5.19.1",
     "@gravity-ui/dashkit": "^8.22.1",
     "@gravity-ui/date-utils": "^2.5.6",
     "@gravity-ui/expresskit": "^2.1.0",

From a142fb584bfef6041b19da477496fd0d9d5d36cf Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Tue, 24 Dec 2024 14:20:59 +0300
Subject: [PATCH 03/18] Add nullMode to GradientColorConfig & Up
 @gravity-ui/uikit 6.37.0 -> 6.39.0 (#1937)

---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 src/i18n-keysets/wizard/en.json               |   2 +
 src/i18n-keysets/wizard/ru.json               |   2 +
 .../helpers/backgroundColor.ts                |  26 ++-
 .../backend-pivot-table/helpers/color.ts      |   6 +-
 ...kground-colors-map-by-continuous-column.ts |  25 ++-
 .../datalens/preparers/flat-table/index.ts    |   3 +-
 src/shared/constants/gradients/index.ts       |   8 +
 src/shared/types/config/wizard/v12.ts         |   3 +-
 .../types/wizard/background-settings.ts       |   3 +-
 src/shared/types/wizard/index.ts              |   2 +
 src/ui/units/wizard/actions/dialog.ts         |   1 +
 src/ui/units/wizard/actions/dialogColor.ts    |   4 +-
 .../ColorSettingsContainer.tsx                |   1 +
 .../Dialogs/DialogColor/DialogColor.scss      |   2 +-
 .../Dialogs/DialogColor/DialogColor.tsx       |  27 ++-
 .../DialogColorGradient.scss                  |  35 +--
 .../DialogColorGradient.tsx                   | 202 +++++++++---------
 .../BackgroundSettings/BackgroundSettings.tsx |  28 ++-
 .../hooks/useBackgroundNullModeSettings.tsx   |  31 +++
 .../ButtonColorDialog/ButtonColorDialog.tsx   |   1 +
 .../DialogField/utils/backgroundSettings.ts   |   1 +
 src/ui/units/wizard/constants/dialogColor.ts  |  14 +-
 .../utils/clearUnusedVisualizationItems.ts    |  17 +-
 25 files changed, 294 insertions(+), 160 deletions(-)
 create mode 100644 src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/hooks/useBackgroundNullModeSettings.tsx

diff --git a/package-lock.json b/package-lock.json
index 1da208a3fa..6b417bc3f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,7 +78,7 @@
         "@gravity-ui/stylelint-config": "^4.0.1",
         "@gravity-ui/tsconfig": "^1.0.0",
         "@gravity-ui/ui-logger": "^1.1.0",
-        "@gravity-ui/uikit": "^6.37.0",
+        "@gravity-ui/uikit": "^6.39.0",
         "@jest/types": "^29.6.3",
         "@microsoft/fetch-event-source": "^2.0.1",
         "@playwright/test": "^1.48.2",
@@ -5309,9 +5309,9 @@
       "license": "MIT"
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "6.37.0",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.37.0.tgz",
-      "integrity": "sha512-XwtD0+HFYaJv5CiRceuHATD97hZJxigF/8swwYlJx7SZauiR5GMOqB/3+yY/nYcJkWte5H/cC1JnVp3nHv5ELw==",
+      "version": "6.39.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.39.0.tgz",
+      "integrity": "sha512-ORb5OHBNxE7J/NwhwSjs7V2pnEwdItnGyOg6eoL9SVM/IUiG++CpsrApWaVMAsbhWChCTKCdAQK9lnJsGBnfZQ==",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/i18n": "^1.6.0",
diff --git a/package.json b/package.json
index cfcb6ca64e..4843d0a6f7 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,7 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/ui-logger": "^1.1.0",
-    "@gravity-ui/uikit": "^6.37.0",
+    "@gravity-ui/uikit": "^6.39.0",
     "@jest/types": "^29.6.3",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@playwright/test": "^1.48.2",
diff --git a/src/i18n-keysets/wizard/en.json b/src/i18n-keysets/wizard/en.json
index 95dc2cc31f..1968619125 100644
--- a/src/i18n-keysets/wizard/en.json
+++ b/src/i18n-keysets/wizard/en.json
@@ -226,6 +226,8 @@
   "label_overlap": "Labels overlap",
   "label_overriden-from-dashboard": "overriden from dashboard",
   "label_pagination": "Pagination",
+  "label_painting-as-0": "Paint as 0",
+  "label_painting-ignore": "Do not paint",
   "label_palette": "Palette",
   "label_part": "Date part",
   "label_percent": "Percentage",
diff --git a/src/i18n-keysets/wizard/ru.json b/src/i18n-keysets/wizard/ru.json
index 26c36dc16d..d16eba7119 100644
--- a/src/i18n-keysets/wizard/ru.json
+++ b/src/i18n-keysets/wizard/ru.json
@@ -226,6 +226,8 @@
   "label_overlap": "Перекрытие подписей",
   "label_overriden-from-dashboard": "перезаписан с дашборда",
   "label_pagination": "Пагинация",
+  "label_painting-as-0": "Окрашивать как 0",
+  "label_painting-ignore": "Не окрашивать",
   "label_palette": "Палитра",
   "label_part": "Часть даты",
   "label_percent": "В процентах",
diff --git a/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/backgroundColor.ts b/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/backgroundColor.ts
index d55cbd5433..493d21bbac 100644
--- a/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/backgroundColor.ts
+++ b/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/backgroundColor.ts
@@ -7,6 +7,7 @@ import type {
 } from '../../../../../../../../shared';
 import {
     ApiV2Annotations,
+    GradientNullModes,
     PseudoFieldTitle,
     getFakeTitleOrTitle,
 } from '../../../../../../../../shared';
@@ -231,8 +232,19 @@ export const prepareBackgroundColorSettings = (args: PrepareBackgroundColorSetti
         const fieldColorValues = Array.from(colorValues);
 
         continuousColorsByField[guid] = {};
+        const nilValue =
+            backgroundSettings.settings.gradientState.nullMode === GradientNullModes.AsZero
+                ? 0
+                : null;
+
+        const colorValuesWithoutNull = fieldColorValues.reduce<number[]>((acc, cv) => {
+            const colorValue = cv === null ? nilValue : cv;
+            if (colorValue !== null) {
+                acc.push(Number(colorValue));
+            }
 
-        const colorValuesWithoutNull = fieldColorValues.filter((cv): cv is number => cv !== null);
+            return acc;
+        }, []);
 
         const min = Math.min(...colorValuesWithoutNull);
         const max = Math.max(...colorValuesWithoutNull);
@@ -250,12 +262,15 @@ export const prepareBackgroundColorSettings = (args: PrepareBackgroundColorSetti
 
         fieldColorValues.forEach((value) => {
             const colorValue = getContinuousColorValue(value);
-            if (colorValue === null) {
+            if (
+                colorValue === null &&
+                backgroundSettings.settings.gradientState.nullMode !== GradientNullModes.AsZero
+            ) {
                 return;
             }
 
             const color = colorizePivotTableCell(colorValue, chartColorsConfig, [min, max]);
-            continuousColorsByField[guid][String(value)] = color?.backgroundColor || null;
+            continuousColorsByField[guid][String(colorValue)] = color?.backgroundColor || null;
         });
     });
 
@@ -317,7 +332,10 @@ export const colorizePivotTableByFieldBackgroundSettings = (
             const {settings, colorFieldGuid} = backgroundColorSettings;
             const colorKey = cell.colorKey;
 
-            if (!colorKey) {
+            if (
+                !colorKey &&
+                backgroundColorSettings.settings.gradientState.nullMode !== GradientNullModes.AsZero
+            ) {
                 continue;
             }
 
diff --git a/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/color.ts b/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/color.ts
index 5efdbee2b8..38d632e514 100644
--- a/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/color.ts
+++ b/src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/color.ts
@@ -1,5 +1,5 @@
 import type {ServerColor} from '../../../../../../../../shared';
-import {ApiV2Annotations, isMeasureName} from '../../../../../../../../shared';
+import {ApiV2Annotations, GradientNullModes, isMeasureName} from '../../../../../../../../shared';
 import type {ChartColorsConfig} from '../../../types';
 import {colorizePivotTableCell} from '../../../utils/color-helpers';
 import type {AnnotationsMap, PivotDataCellValue, PivotDataRows} from '../types';
@@ -110,11 +110,13 @@ export const colorizePivotTableByColorField = (args: ColorizeByColorFieldArgs) =
     }
 
     const {colorValues, min, max} = colorSettings;
+    const nilValue = colorsConfig.nullMode === GradientNullModes.AsZero ? 0 : null;
 
     rows.forEach((row, rowIndex) => {
         for (let i = rowHeaderLength; i < row.cells.length; i++) {
             const cell = row.cells[i];
-            const colorValue = colorValues[rowIndex][i - rowHeaderLength];
+            const rawColorValue = colorValues[rowIndex][i - rowHeaderLength];
+            const colorValue = rawColorValue === null ? nilValue : rawColorValue;
 
             const isInvalidColorValue = colorValue === null;
 
diff --git a/src/server/modes/charts/plugins/datalens/preparers/flat-table/helpers/background-settings/get-background-colors-map-by-continuous-column.ts b/src/server/modes/charts/plugins/datalens/preparers/flat-table/helpers/background-settings/get-background-colors-map-by-continuous-column.ts
index ff36a0c25e..bc5f603f64 100644
--- a/src/server/modes/charts/plugins/datalens/preparers/flat-table/helpers/background-settings/get-background-colors-map-by-continuous-column.ts
+++ b/src/server/modes/charts/plugins/datalens/preparers/flat-table/helpers/background-settings/get-background-colors-map-by-continuous-column.ts
@@ -1,10 +1,11 @@
 import isNil from 'lodash/isNil';
 import isNumber from 'lodash/isNumber';
 
-import type {
-    RGBColor,
-    ServerField,
-    TableFieldBackgroundSettings,
+import {
+    GradientNullModes,
+    type RGBColor,
+    type ServerField,
+    type TableFieldBackgroundSettings,
 } from '../../../../../../../../../shared';
 import type {ChartColorsConfig} from '../../../../types';
 import {
@@ -46,15 +47,13 @@ export function colorizeFlatTableColumn({
     index: number;
     colorsConfig: ChartColorsConfig;
 }) {
-    const colorValues = data.reduce(
-        (acc, row) => {
-            const rowValue = row[index];
-            const parsedRowValue = isNil(rowValue) ? null : parseFloat(rowValue);
-
-            return [...acc, parsedRowValue];
-        },
-        [] as (number | null)[],
-    );
+    const nilValue = colorsConfig.nullMode === GradientNullModes.AsZero ? 0 : null;
+    const colorValues = data.reduce<(number | null)[]>((acc, row) => {
+        const rowValue = row[index];
+        const parsedRowValue = isNil(rowValue) ? nilValue : parseFloat(rowValue);
+        acc.push(parsedRowValue);
+        return acc;
+    }, []);
 
     const {min, mid, max} = getThresholdValues(colorsConfig, colorValues.filter(isNumber));
     const currentGradient = getCurrentGradient(colorsConfig);
diff --git a/src/server/modes/charts/plugins/datalens/preparers/flat-table/index.ts b/src/server/modes/charts/plugins/datalens/preparers/flat-table/index.ts
index eec53d17d4..326eca2b3e 100644
--- a/src/server/modes/charts/plugins/datalens/preparers/flat-table/index.ts
+++ b/src/server/modes/charts/plugins/datalens/preparers/flat-table/index.ts
@@ -7,6 +7,7 @@ import type {
 } from '../../../../../../../shared';
 import {
     DATASET_FIELD_TYPES,
+    GradientNullModes,
     IS_NULL_FILTER_TEMPLATE,
     MINIMUM_FRACTION_DIGITS,
     isDateField,
@@ -277,7 +278,7 @@ function prepareFlatTable({
 
             if (colors.length) {
                 const valueColor = values[iColor];
-                if (valueColor !== null) {
+                if (valueColor !== null || colorsConfig.nullMode === GradientNullModes.AsZero) {
                     cell.color = Number(valueColor);
                 }
             }
diff --git a/src/shared/constants/gradients/index.ts b/src/shared/constants/gradients/index.ts
index 8b223cf25f..9ec8d6e65c 100644
--- a/src/shared/constants/gradients/index.ts
+++ b/src/shared/constants/gradients/index.ts
@@ -1,4 +1,5 @@
 import type {ColorPalette} from '../../types/color-palettes';
+import type {ValueOf} from '../../types/utility-types';
 
 import {
     THREE_POINT_DEFAULT_GRADIENT,
@@ -27,6 +28,13 @@ export interface Gradient {
     colors: string[];
 }
 
+export const GradientNullModes = {
+    Ignore: 'ignore',
+    AsZero: 'as-0',
+};
+
+export type GradientNullMode = ValueOf<typeof GradientNullModes>;
+
 export interface RGBColor {
     red: number;
     green: number;
diff --git a/src/shared/types/config/wizard/v12.ts b/src/shared/types/config/wizard/v12.ts
index 905a357f26..d70e5e8097 100644
--- a/src/shared/types/config/wizard/v12.ts
+++ b/src/shared/types/config/wizard/v12.ts
@@ -1,4 +1,4 @@
-import type {MarkupType, WidgetSizeType} from '../../..';
+import type {GradientNullMode, MarkupType, WidgetSizeType} from '../../..';
 import type {ColorMode} from '../../../constants';
 import type {DatasetFieldCalcMode, ParameterDefaultValue} from '../../dataset';
 import type {
@@ -294,6 +294,7 @@ export type V12ColorsConfig = {
     coloredByMeasure?: boolean;
     palette?: string;
     colorMode?: ColorMode;
+    nullMode?: GradientNullMode;
 };
 
 export type V12ShapesConfig = {
diff --git a/src/shared/types/wizard/background-settings.ts b/src/shared/types/wizard/background-settings.ts
index 1d6901002a..50ca20cfde 100644
--- a/src/shared/types/wizard/background-settings.ts
+++ b/src/shared/types/wizard/background-settings.ts
@@ -7,7 +7,8 @@ type GradientFields =
     | 'rightThreshold'
     | 'gradientPalette'
     | 'gradientMode'
-    | 'reversed';
+    | 'reversed'
+    | 'nullMode';
 
 export interface TableFieldBackgroundSettings {
     enabled: boolean;
diff --git a/src/shared/types/wizard/index.ts b/src/shared/types/wizard/index.ts
index 17be61dc03..11a9cfc930 100644
--- a/src/shared/types/wizard/index.ts
+++ b/src/shared/types/wizard/index.ts
@@ -13,6 +13,7 @@ import type {
 } from '../';
 import type {
     ColorMode,
+    GradientNullMode,
     GradientType,
     NavigatorLinesMode,
     NavigatorPeriod,
@@ -75,6 +76,7 @@ export interface ColorsConfig {
     coloredByMeasure?: boolean;
     palette?: string;
     colorMode?: ColorMode;
+    nullMode?: GradientNullMode;
 }
 
 export enum LabelsPositions {
diff --git a/src/ui/units/wizard/actions/dialog.ts b/src/ui/units/wizard/actions/dialog.ts
index af67863c82..2e6f8ee37e 100644
--- a/src/ui/units/wizard/actions/dialog.ts
+++ b/src/ui/units/wizard/actions/dialog.ts
@@ -279,6 +279,7 @@ export function openDialogColors({item, onApply, colorSectionFields}: OpenDialog
                         }
                     },
                     colorsConfig,
+                    canSetNullMode: true,
                 }),
             );
         }
diff --git a/src/ui/units/wizard/actions/dialogColor.ts b/src/ui/units/wizard/actions/dialogColor.ts
index 290ef56f0f..1f40c9d5f1 100644
--- a/src/ui/units/wizard/actions/dialogColor.ts
+++ b/src/ui/units/wizard/actions/dialogColor.ts
@@ -1,6 +1,6 @@
 import {selectAvailableClientGradients} from 'constants/common';
 
-import type {ColorsConfig, Field, GradientType, PartialBy} from 'shared';
+import type {ColorsConfig, Field, GradientNullMode, GradientType, PartialBy} from 'shared';
 import {closeDialog, openDialog} from 'store/actions/dialog';
 import type {DatalensGlobalState} from 'ui';
 
@@ -42,6 +42,7 @@ export interface GradientState {
     rightThreshold?: string;
     gradientPalette: string;
     validationStatus?: ValidationStatus;
+    nullMode?: GradientNullMode;
 }
 
 export const RESET_DIALOG_COLOR_STATE = Symbol('wizard/dialogColor/RESET_DIALOG_COLOR_STATE');
@@ -141,6 +142,7 @@ export function prepareDialogColorState(props: {
             middleThreshold: colorsConfig?.middleThreshold || defaultGradientState.middleThreshold,
             rightThreshold: colorsConfig?.rightThreshold || defaultGradientState.rightThreshold,
             gradientPalette: colorsConfig?.gradientPalette || defaultGradientState.gradientPalette,
+            nullMode: colorsConfig?.nullMode || defaultGradientState.nullMode,
         };
 
         const gradients = selectAvailableClientGradients(getState(), gradientState.gradientMode);
diff --git a/src/ui/units/wizard/components/Dialogs/DialogColor/ColorSettingsContainer/ColorSettingsContainer.tsx b/src/ui/units/wizard/components/Dialogs/DialogColor/ColorSettingsContainer/ColorSettingsContainer.tsx
index a468781bca..5323e38cd9 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogColor/ColorSettingsContainer/ColorSettingsContainer.tsx
+++ b/src/ui/units/wizard/components/Dialogs/DialogColor/ColorSettingsContainer/ColorSettingsContainer.tsx
@@ -48,6 +48,7 @@ type OwnProps = {
     onColorModeChange: (value: ColorMode) => void;
     isColorModeChangeAvailable: boolean;
     colorSectionFields?: Field[];
+    canSetNullMode?: boolean;
 };
 
 type StateProps = ReturnType<typeof mapStateToProps>;
diff --git a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.scss b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.scss
index a255a9839a..33fde7af43 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.scss
+++ b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.scss
@@ -11,7 +11,7 @@
     }
 
     &_gradient-mode {
-        height: 370px;
+        height: 380px;
 
         .color-settings-container {
             &__row {
diff --git a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.tsx b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.tsx
index f9a047ed7a..7d974d64a8 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.tsx
+++ b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.tsx
@@ -11,10 +11,15 @@ import {bindActionCreators} from 'redux';
 import type {ColorsConfig, Field} from 'shared';
 import {ColorMode, isMeasureValue} from 'shared';
 import type {DatalensGlobalState} from 'ui';
+import {ALLOWED_FOR_NULL_MODE_VISUALIZATIONS} from 'ui/units/wizard/constants/dialogColor';
 import {setDialogColorPaletteState} from 'units/wizard/actions/dialogColor';
 import {selectDataset, selectParameters} from 'units/wizard/selectors/dataset';
 import {selectUpdates} from 'units/wizard/selectors/preview';
-import {selectDashboardParameters, selectFilters} from 'units/wizard/selectors/visualization';
+import {
+    selectDashboardParameters,
+    selectFilters,
+    selectVisualization,
+} from 'units/wizard/selectors/visualization';
 
 import {
     isGradientDialog,
@@ -46,6 +51,7 @@ interface OwnProps {
     colorsConfig: ColorsConfig;
     extra?: ExtraSettings;
     isColorModeChangeAvailable: boolean;
+    canSetNullMode?: boolean;
 }
 
 type StateProps = ReturnType<typeof mapStateToProps>;
@@ -87,15 +93,26 @@ class DialogColorComponent extends React.Component<Props, State> {
     }
 
     render() {
-        const {item, items, dataset, isColorModeChangeAvailable, colorSectionFields} = this.props;
+        const {
+            item,
+            items,
+            dataset,
+            isColorModeChangeAvailable,
+            colorSectionFields,
+            visualization,
+        } = this.props;
         const {mountedColors = {}} = this.props.paletteState;
         const {validationStatus} = this.props.gradientState;
         const {colorMode} = this.state;
 
-        if (!item || !dataset) {
+        if (!item || !dataset || !visualization) {
             return null;
         }
 
+        const canSetNullMode =
+            this.props.canSetNullMode &&
+            (ALLOWED_FOR_NULL_MODE_VISUALIZATIONS as string[]).includes(visualization.id);
+
         return (
             <Dialog open={true} onClose={this.onClose} disableFocusTrap={true}>
                 <div className={b({[`${colorMode}-mode`]: true})}>
@@ -117,6 +134,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                             colorMode={this.state.colorMode}
                             isColorModeChangeAvailable={isColorModeChangeAvailable}
                             onColorModeChange={this.onColorModeChange}
+                            canSetNullMode={canSetNullMode}
                         />
                     </Dialog.Body>
                     <Dialog.Footer
@@ -183,6 +201,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                 leftThreshold,
                 middleThreshold,
                 rightThreshold,
+                nullMode,
             } = this.props.gradientState;
 
             config = {
@@ -195,6 +214,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                 middleThreshold,
                 rightThreshold,
                 colorMode,
+                nullMode,
             };
 
             return config;
@@ -228,6 +248,7 @@ const mapStateToProps = (state: DatalensGlobalState) => {
         dataset: selectDataset(state),
         gradientState: selectDialogColorGradientState(state),
         paletteState: selectDialogColorPaletteState(state),
+        visualization: selectVisualization(state),
     };
 };
 
diff --git a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.scss b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.scss
index 39bc2eb049..f90f3bcd7b 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.scss
+++ b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.scss
@@ -2,48 +2,36 @@
 
 .dialog-color-gradient {
     &__row {
-        margin-bottom: 20px;
-        vertical-align: middle;
-        line-height: 20px;
-        display: flex;
-        align-items: center;
-    }
+        --gc-form-row-label-width: 220px;
+        margin-bottom: var(--g-spacing-4);
 
-    &__label {
-        display: inline-block;
-        margin-right: 20px;
+        :last-of-type {
+            margin-bottom: 0;
+        }
     }
 
     &__palette-select {
-        width: 204px;
+        padding-inline-end: var(--g-spacing-2);
+        width: var(--gc-form-row-label-width);
         display: inline-block;
     }
 
     &__reverse-button {
-        margin-left: 6px;
+        margin-left: var(--g-spacing-2);
         line-height: 24px;
         vertical-align: middle;
     }
 
-    &__thresholds-checkbox {
-        margin-right: 10px;
-    }
-
     &__threshold-inputs-wrapper {
         display: flex;
         width: 395px;
-        padding-right: 36px;
-        height: 28px;
+        padding-right: 44px;
         justify-content: space-between;
     }
 
     &__threshold-input {
         display: inline-block;
-        width: 80px;
-    }
-
-    &__error-label {
-        margin: 20px 32px;
+        width: 100px;
     }
 
     &__preview {
@@ -51,7 +39,6 @@
         height: 28px;
         background: #000000;
         vertical-align: middle;
-        margin-left: 12px;
     }
 
     &__select {
@@ -63,6 +50,6 @@
     }
 
     &__hint-icon {
-        margin-left: 5px;
+        margin-left: var(--g-spacing-1);
     }
 }
diff --git a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.tsx b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.tsx
index 481fea1f4d..7c1ab98061 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.tsx
+++ b/src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import {HelpPopover} from '@gravity-ui/components';
+import {FormRow, HelpPopover} from '@gravity-ui/components';
 import {ArrowRightArrowLeft} from '@gravity-ui/icons';
-import {Button, Checkbox, Icon, RadioButton, Select, TextInput} from '@gravity-ui/uikit';
+import {Button, Checkbox, Flex, Icon, RadioButton, Select, TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
-import {FieldWrapper} from 'components/FieldWrapper/FieldWrapper';
 import {i18n} from 'i18n';
 import type {DatalensGlobalState} from 'index';
 import {connect} from 'react-redux';
@@ -13,6 +12,7 @@ import {bindActionCreators} from 'redux';
 import type {Field, GradientPalettes} from 'shared';
 import {DialogColorQa, GradientType, isMeasureValue} from 'shared';
 import {selectAvailableClientGradients, selectDefaultClientGradient} from 'ui';
+import {NULLS_OPTIONS} from 'ui/units/wizard/constants/dialogColor';
 import type {GradientState} from 'units/wizard/actions/dialogColor';
 import {setDialogColorGradientState} from 'units/wizard/actions/dialogColor';
 import {GradientPalettePreview} from 'units/wizard/components/GradientPalettePreview/GradientPalettePreview';
@@ -40,6 +40,7 @@ interface Props extends StateProps, DispatchProps {
     };
     setGradientState: (newGradientState: Partial<GradientState>) => void;
     item: Field;
+    canSetNullMode?: boolean;
 }
 
 class DialogColorGradientBody extends React.Component<Props> {
@@ -75,7 +76,7 @@ class DialogColorGradientBody extends React.Component<Props> {
             rightThreshold,
             validationStatus,
         } = this.props.gradientState;
-        const {extra = {}, item, gradients} = this.props;
+        const {extra = {}, item, gradients, canSetNullMode} = this.props;
 
         const currentPalette = this.getCurrentGradientPalette(gradients);
         const options = getGradientSelectorItems(gradients);
@@ -90,15 +91,17 @@ class DialogColorGradientBody extends React.Component<Props> {
             colors.reverse();
         }
 
+        const leftThresholdError = validationStatus?.left?.text;
+        const middleThresholdError = validationStatus?.middle?.text;
+        const rightThresholdError = validationStatus?.right?.text;
+
         return (
             <React.Fragment>
-                <div className={b('row')}>
-                    <span className={b('label')}>{i18n('wizard', 'label_gradient-type')}</span>
+                <FormRow className={b('row')} label={i18n('wizard', 'label_gradient-type')}>
                     <RadioButton
                         size="m"
                         value={gradientMode}
-                        onChange={(event) => {
-                            const gradientType = event.target.value as GradientType;
+                        onUpdate={(gradientType) => {
                             this.props.setGradientState({
                                 gradientMode: gradientType,
                                 gradientPalette: selectDefaultClientGradient(gradientType),
@@ -113,10 +116,9 @@ class DialogColorGradientBody extends React.Component<Props> {
                             {i18n('wizard', 'label_3-point')}
                         </RadioButton.Option>
                     </RadioButton>
-                </div>
+                </FormRow>
                 {extra.polygonBorders && (
-                    <div className={b('row')}>
-                        <span className={b('label')}>{i18n('wizard', 'label_borders')}</span>
+                    <FormRow className={b('row')} label={i18n('wizard', 'label_borders')}>
                         <RadioButton
                             size="m"
                             value={polygonBorders}
@@ -134,9 +136,9 @@ class DialogColorGradientBody extends React.Component<Props> {
                                 {i18n('wizard', 'label_hide')}
                             </RadioButton.Option>
                         </RadioButton>
-                    </div>
+                    </FormRow>
                 )}
-                <div className={b('row')}>
+                <Flex alignItems="center" className={b('row')}>
                     <div className={b('palette-select')}>
                         <Select
                             value={[gradientPalette]}
@@ -169,113 +171,119 @@ class DialogColorGradientBody extends React.Component<Props> {
                     >
                         <Icon data={ArrowRightArrowLeft} width={24} />
                     </Button>
-                </div>
+                </Flex>
                 {!isMeasureValue(item) && (
-                    <div className={b('row')}>
-                        <Checkbox
-                            className={b('thresholds-checkbox')}
-                            size="m"
-                            onChange={() => {
-                                this.props.setGradientState({
-                                    thresholdsMode: thresholdsMode === AUTO ? MANUAL : AUTO,
-                                });
-                            }}
-                            checked={thresholdsMode === MANUAL}
-                        >
-                            <span>
-                                {i18n('wizard', 'label_thresholds')}
-                                <HelpPopover
-                                    delayClosing={TOOLTIP_DELAY_CLOSING}
-                                    placement={['bottom']}
-                                    className={b('hint-icon')}
-                                    content={
-                                        <span>{i18n('wizard', 'label_tooltip-thresholds')}</span>
-                                    }
-                                />
-                            </span>
-                        </Checkbox>
+                    <FormRow
+                        className={b('row')}
+                        label={
+                            <Checkbox
+                                className={b('thresholds-checkbox')}
+                                size="m"
+                                onChange={() => {
+                                    this.props.setGradientState({
+                                        thresholdsMode: thresholdsMode === AUTO ? MANUAL : AUTO,
+                                    });
+                                }}
+                                checked={thresholdsMode === MANUAL}
+                            >
+                                <span>
+                                    {i18n('wizard', 'label_thresholds')}
+                                    <HelpPopover
+                                        delayClosing={TOOLTIP_DELAY_CLOSING}
+                                        placement={['bottom']}
+                                        className={b('hint-icon')}
+                                        content={
+                                            <span>
+                                                {i18n('wizard', 'label_tooltip-thresholds')}
+                                            </span>
+                                        }
+                                    />
+                                </span>
+                            </Checkbox>
+                        }
+                    >
                         {thresholdsMode === MANUAL && (
                             <div className={b('threshold-inputs-wrapper')}>
                                 <div className={b('threshold-input')}>
-                                    <FieldWrapper
-                                        error={
-                                            validationStatus &&
-                                            validationStatus.left &&
-                                            validationStatus.left.text
-                                        }
-                                    >
+                                    <TextInput
+                                        type="number"
+                                        pin="round-round"
+                                        size="m"
+                                        value={leftThreshold}
+                                        validationState={leftThresholdError ? 'invalid' : undefined}
+                                        errorMessage={leftThresholdError}
+                                        errorPlacement="inside"
+                                        onUpdate={(value) => {
+                                            this.props.setGradientState({
+                                                leftThreshold: value,
+                                                validationStatus: this._validateManualThresholds({
+                                                    leftThreshold: value,
+                                                }),
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                {gradientMode === GradientType.THREE_POINT && (
+                                    <div className={b('threshold-input')}>
                                         <TextInput
                                             type="number"
-                                            pin="round-round"
                                             size="m"
-                                            value={leftThreshold}
+                                            pin="round-round"
+                                            value={middleThreshold}
+                                            validationState={
+                                                middleThresholdError ? 'invalid' : undefined
+                                            }
+                                            errorMessage={middleThresholdError}
+                                            errorPlacement="inside"
                                             onUpdate={(value) => {
                                                 this.props.setGradientState({
-                                                    leftThreshold: value,
+                                                    middleThreshold: value,
                                                     validationStatus:
                                                         this._validateManualThresholds({
-                                                            leftThreshold: value,
+                                                            middleThreshold: value,
                                                         }),
                                                 });
                                             }}
                                         />
-                                    </FieldWrapper>
-                                </div>
-                                {gradientMode === GradientType.THREE_POINT && (
-                                    <div className={b('threshold-input')}>
-                                        <FieldWrapper
-                                            error={
-                                                validationStatus &&
-                                                validationStatus.middle &&
-                                                validationStatus.middle.text
-                                            }
-                                        >
-                                            <TextInput
-                                                type="number"
-                                                size="m"
-                                                pin="round-round"
-                                                value={middleThreshold}
-                                                onUpdate={(value) => {
-                                                    this.props.setGradientState({
-                                                        middleThreshold: value,
-                                                        validationStatus:
-                                                            this._validateManualThresholds({
-                                                                middleThreshold: value,
-                                                            }),
-                                                    });
-                                                }}
-                                            />
-                                        </FieldWrapper>
                                     </div>
                                 )}
                                 <div className={b('threshold-input')}>
-                                    <FieldWrapper
-                                        error={
-                                            validationStatus &&
-                                            validationStatus.right &&
-                                            validationStatus.right.text
+                                    <TextInput
+                                        type="number"
+                                        pin="round-round"
+                                        size="m"
+                                        value={rightThreshold}
+                                        validationState={
+                                            rightThresholdError ? 'invalid' : undefined
                                         }
-                                    >
-                                        <TextInput
-                                            type="number"
-                                            pin="round-round"
-                                            size="m"
-                                            value={rightThreshold}
-                                            onUpdate={(value) => {
-                                                this.props.setGradientState({
+                                        errorMessage={rightThresholdError}
+                                        errorPlacement="inside"
+                                        onUpdate={(value) => {
+                                            this.props.setGradientState({
+                                                rightThreshold: value,
+                                                validationStatus: this._validateManualThresholds({
                                                     rightThreshold: value,
-                                                    validationStatus:
-                                                        this._validateManualThresholds({
-                                                            rightThreshold: value,
-                                                        }),
-                                                });
-                                            }}
-                                        />
-                                    </FieldWrapper>
+                                                }),
+                                            });
+                                        }}
+                                    />
                                 </div>
                             </div>
                         )}
-                    </div>
+                    </FormRow>
+                )}
+                {canSetNullMode && (
+                    <FormRow className={b('row')} label={i18n('wizard', 'label_nulls')}>
+                        <RadioButton
+                            options={NULLS_OPTIONS}
+                            value={this.props.gradientState.nullMode}
+                            onUpdate={(nullMode) => {
+                                this.props.setGradientState({
+                                    nullMode,
+                                });
+                            }}
+                        />
+                    </FormRow>
                 )}
             </React.Fragment>
         );
diff --git a/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/BackgroundSettings.tsx b/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/BackgroundSettings.tsx
index 50e9773c1a..e8180a3568 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/BackgroundSettings.tsx
+++ b/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/BackgroundSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Switch} from '@gravity-ui/uikit';
+import {RadioButton, Switch} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import type {
@@ -12,6 +12,7 @@ import type {
     WizardVisualizationId,
 } from 'shared';
 import {DialogFieldBackgroundSettingsQa} from 'shared';
+import {NULLS_OPTIONS} from 'ui/units/wizard/constants/dialogColor';
 
 import {DialogRadioButtons} from '../../../components/DialogRadioButtons/DialogRadioButtons';
 import {ButtonColorDialog} from '../ButtonColorDialog/ButtonColorDialog';
@@ -19,13 +20,16 @@ import {DialogFieldRow} from '../DialogFieldRow/DialogFieldRow';
 import {DialogFieldSelect} from '../DialogFieldSelect/DialogFieldSelect';
 
 import {useBackgroundColorFieldSelect} from './hooks/useBackgrounColorFieldSelect';
-import {useBackgroundColorModeRadioButtons} from './hooks/useBackgroundColorModeRadioButtons';
+import {
+    BackgroundColorMode,
+    useBackgroundColorModeRadioButtons,
+} from './hooks/useBackgroundColorModeRadioButtons';
+import {useBackgroundNullModeSettings} from './hooks/useBackgroundNullModeSettings';
 import {useBackgroundSettings} from './hooks/useBackgroundSettings';
 import {useBackgroundSettingsButtonColorDialog} from './hooks/useBackgroundSettingsButtonColorDialog';
 import {useBackgroundSettingsSwitch} from './hooks/useBackgroundSettingsSwitch';
 
 import './BackgroundSettings.scss';
-
 const b = block('background-settings');
 
 type Props = {
@@ -72,6 +76,11 @@ export const BackgroundSettings: React.FC<Props> = (props) => {
             state,
         });
 
+    const {nullMode, handleNullModeUpdate} = useBackgroundNullModeSettings({
+        onUpdate,
+        state,
+    });
+
     return (
         <div className={b()}>
             <DialogFieldRow
@@ -127,6 +136,19 @@ export const BackgroundSettings: React.FC<Props> = (props) => {
                     />
                 }
             />
+            {selectedRadioButton === BackgroundColorMode.Gradient && (
+                <DialogFieldRow
+                    title={i18n('wizard', 'label_nulls')}
+                    setting={
+                        <RadioButton
+                            disabled={!state.enabled}
+                            options={NULLS_OPTIONS}
+                            value={nullMode}
+                            onUpdate={handleNullModeUpdate}
+                        />
+                    }
+                />
+            )}
         </div>
     );
 };
diff --git a/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/hooks/useBackgroundNullModeSettings.tsx b/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/hooks/useBackgroundNullModeSettings.tsx
new file mode 100644
index 0000000000..76fc981ef6
--- /dev/null
+++ b/src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/hooks/useBackgroundNullModeSettings.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type {GradientNullMode, NestedPartial, TableFieldBackgroundSettings} from 'shared';
+
+export function useBackgroundNullModeSettings({
+    state,
+    onUpdate,
+}: {
+    onUpdate: (args: NestedPartial<TableFieldBackgroundSettings, 'settings'>) => void;
+    state: TableFieldBackgroundSettings;
+}) {
+    const handleNullModeUpdate = React.useCallback(
+        (nullMode: GradientNullMode) => {
+            onUpdate({
+                ...state,
+                settings: {
+                    ...state.settings,
+                    gradientState: {
+                        ...state.settings.gradientState,
+                        nullMode,
+                    },
+                },
+            });
+        },
+        [onUpdate, state],
+    );
+    return {
+        nullMode: state.settings.gradientState.nullMode,
+        handleNullModeUpdate,
+    };
+}
diff --git a/src/ui/units/wizard/components/Dialogs/DialogField/components/ButtonColorDialog/ButtonColorDialog.tsx b/src/ui/units/wizard/components/Dialogs/DialogField/components/ButtonColorDialog/ButtonColorDialog.tsx
index bd15d282fb..fcc74522fd 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogField/components/ButtonColorDialog/ButtonColorDialog.tsx
+++ b/src/ui/units/wizard/components/Dialogs/DialogField/components/ButtonColorDialog/ButtonColorDialog.tsx
@@ -77,6 +77,7 @@ export const ButtonColorDialog: React.FC<ButtonColorDialogProps> = (
                         extra: extraSettings,
                         onApply: onApplyDialogColor,
                         isColorModeChangeAvailable: false,
+                        canSetNullMode: false,
                     }),
                 )
             }
diff --git a/src/ui/units/wizard/components/Dialogs/DialogField/utils/backgroundSettings.ts b/src/ui/units/wizard/components/Dialogs/DialogField/utils/backgroundSettings.ts
index 30e6fd7e2b..47e18c76ef 100644
--- a/src/ui/units/wizard/components/Dialogs/DialogField/utils/backgroundSettings.ts
+++ b/src/ui/units/wizard/components/Dialogs/DialogField/utils/backgroundSettings.ts
@@ -21,6 +21,7 @@ export const extractGradientSettings = (
     gradientPalette: gradientState.gradientPalette,
     gradientMode: gradientState.gradientMode,
     reversed: gradientState.reversed,
+    nullMode: gradientState.nullMode,
 });
 export const getDefaultPaletteSettings = () => {
     return extractPaletteSettings(DEFAULT_PALETTE_STATE);
diff --git a/src/ui/units/wizard/constants/dialogColor.ts b/src/ui/units/wizard/constants/dialogColor.ts
index c7df35edda..faaead8e47 100644
--- a/src/ui/units/wizard/constants/dialogColor.ts
+++ b/src/ui/units/wizard/constants/dialogColor.ts
@@ -1,6 +1,7 @@
 import {getAvailableClientPalettesMap, selectDefaultClientGradient} from 'constants/common';
 
-import {DEFAULT_PALETTE, GradientType} from 'shared';
+import {i18n} from 'i18n';
+import {DEFAULT_PALETTE, GradientNullModes, GradientType, WizardVisualizationId} from 'shared';
 
 export const DEFAULT_BORDERS = 'show';
 export const DEFAULT_THRESHOLDS_MODE = 'auto';
@@ -25,4 +26,15 @@ export const DEFAULT_GRADIENT_STATE = {
     middleThreshold: undefined,
     rightThreshold: undefined,
     gradientPalette: DEFAULT_TWO_POINT_GRADIENT,
+    nullMode: undefined,
 };
+
+export const ALLOWED_FOR_NULL_MODE_VISUALIZATIONS = [
+    WizardVisualizationId.FlatTable,
+    WizardVisualizationId.PivotTable,
+];
+
+export const NULLS_OPTIONS = [
+    {value: GradientNullModes.Ignore, content: i18n('wizard', 'label_painting-ignore')},
+    {value: GradientNullModes.AsZero, content: i18n('wizard', 'label_painting-as-0')},
+];
diff --git a/src/ui/units/wizard/reducers/utils/clearUnusedVisualizationItems.ts b/src/ui/units/wizard/reducers/utils/clearUnusedVisualizationItems.ts
index d5ae616f27..9fee3b6189 100644
--- a/src/ui/units/wizard/reducers/utils/clearUnusedVisualizationItems.ts
+++ b/src/ui/units/wizard/reducers/utils/clearUnusedVisualizationItems.ts
@@ -1,4 +1,5 @@
-import {pick} from 'lodash';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
 import type {
     ColorsConfig,
     Field,
@@ -9,6 +10,7 @@ import type {
 } from 'shared';
 import {WizardVisualizationId, isParameter, isVisualizationWithLayers} from 'shared';
 
+import {ALLOWED_FOR_NULL_MODE_VISUALIZATIONS} from '../../constants/dialogColor';
 import {getSelectedLayer} from '../../utils/helpers';
 
 const VISUALIZATION_FIELDS_KEYS: Array<keyof VisualizationFields> = [
@@ -72,7 +74,11 @@ type PrepareColorsItems = {
     colorsConfig?: ColorsConfig;
 };
 
-function prepareColors(visualization: any, colors: Field[]): PrepareColorsItems {
+function prepareColors(
+    visualization: any,
+    colors: Field[],
+    colorsConfig: ColorsConfig,
+): PrepareColorsItems {
     const isPieOrDonut = [
         WizardVisualizationId.Donut,
         WizardVisualizationId.Pie,
@@ -94,8 +100,13 @@ function prepareColors(visualization: any, colors: Field[]): PrepareColorsItems
             });
         });
 
+        const updatedColorsConfig = ALLOWED_FOR_NULL_MODE_VISUALIZATIONS.includes(visualization?.id)
+            ? colorsConfig
+            : omit(colorsConfig, 'nullMode');
+
         return {
             colors: updatedColors,
+            colorsConfig: updatedColorsConfig,
         };
     } else {
         return {
@@ -188,7 +199,7 @@ function prepareVisualizationItems(
         ? prepareShapes(currentVisualization, items.shapes)
         : undefined;
 
-    const preparedColors = prepareColors(currentVisualization, items.colors);
+    const preparedColors = prepareColors(currentVisualization, items.colors, items.colorsConfig);
 
     const preparedLabels = prepareLabels(currentVisualization, items.labels);
 

From aae92dabfdcb6b8bcb254984da0da619c0d32155 Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Wed, 25 Dec 2024 09:39:32 +0300
Subject: [PATCH 04/18] Refactor & redesign selectors edit dialog (#1964)

---
 .../en.json                                   |  11 -
 .../ru.json                                   |  11 -
 .../en.json                                   |  21 ++
 .../ru.json                                   |  21 ++
 .../dash.group-controls-dialog.edit/en.json   |  15 +-
 .../dash.group-controls-dialog.edit/ru.json   |  15 +-
 src/shared/constants/qa/control.ts            |   6 +-
 src/shared/types/dash.ts                      |  17 +-
 .../AppearanceSection/AppearanceSection.scss  |  10 +-
 .../Rows/ColorAccentRow/ColorAccentRow.tsx    |   4 +-
 .../Rows/HintRow/HintRow.tsx                  |   4 +-
 .../Rows/InnerTitleRow/InnerTitleRow.tsx      |   4 +-
 .../TitlePlacementRow/TitlePlacementRow.tsx   |  20 +-
 .../Rows/TitleRow/TitleRow.tsx                |  24 +-
 .../CommonSettingsSection.tsx                 |   7 +-
 .../ConnectionSettings/ConnectionSettings.tsx |  14 +-
 .../ConnectionSelector/ConnectionSelector.tsx |   2 +
 .../DatasetSelector/DatasetSelector.tsx       |   4 +-
 .../DatasetSettings/DatasetSettings.tsx       |  11 +-
 .../EntrySelector/EntrySelector.scss          |   4 +-
 .../EntrySelector/EntrySelector.tsx           |   4 +-
 .../ExternalSelectorSettings.tsx              |  12 +-
 .../InputSettings/InputSettings.tsx           |  17 +-
 .../InputTypeSelector/InputTypeSelector.tsx   |   4 +-
 .../ParameterNameInput/ParameterNameInput.tsx |   3 +-
 .../OperationSelector/OperationSelector.tsx   |   4 +-
 .../ListValueControl/ListValueControl.tsx     |  10 +-
 .../MultiselectableCheckbox.tsx               |   4 +-
 .../RequiredValueCheckbox.tsx                 |   4 +-
 .../Sections/ValueSelector/ValueSelector.tsx  |  26 +-
 .../TwoColumnDialog/TwoColumnDialog.scss      |  34 +-
 .../TwoColumnDialog/TwoColumnDialog.tsx       |   2 +-
 .../DialogChartWidget/DialogChartWidget.scss  |   1 +
 .../DialogChartWidget/DialogChartWidget.tsx   |   7 +-
 .../DialogChartWidget/TabMenu/TabMenu.scss    |  91 -----
 .../DialogControlsPlacement.tsx               | 173 ---------
 .../ControlPlacementRow.tsx                   |   6 +-
 .../DialogExtendedSettings.scss}              |  36 +-
 .../DialogExtendedSettings.tsx                | 328 ++++++++++++++++++
 .../DialogGroupControl.scss                   |  55 +--
 .../GroupControlBody/GroupControlBody.tsx     |  71 ++--
 .../GroupControlSidebar.tsx                   | 175 +---------
 .../components/FormSection/FormSection.scss   |  10 +
 src/ui/components/FormSection/FormSection.tsx |  25 ++
 .../components/ListWithMenu/ListWithMenu.tsx  |   2 +-
 src/ui/components/TabMenu/TabMenu.scss        |  62 ++++
 .../TabMenu/TabMenu.tsx                       |  32 +-
 .../{DialogChartWidget => }/TabMenu/types.ts  |   1 -
 src/ui/store/actions/openDialogTypes.ts       |   4 +-
 src/ui/store/reducers/controlDialog.ts        |  11 +-
 src/ui/store/typings/controlDialog.ts         |   4 +-
 src/ui/store/utils/controlDialog.ts           |  10 +-
 .../externalInfluencesOnGroup.test.ts         |   2 +
 .../dash/selectors/groupBaseActions.test.ts   |   4 +-
 .../dash/selectors/groupButtonActions.test.ts |   6 +
 .../dash/selectors/selectorsLabels.test.ts    |   4 +-
 .../common/DialogControlPO/AppearanceTitle.ts |   8 +-
 .../common/abstract/RadioGroupElementPO.ts    |   1 -
 .../page-objects/dashboard/ControlActions.ts  |  20 +-
 tests/page-objects/dashboard/DashboardPage.ts |   2 +
 .../dash/selectors/selectorsLabels.test.ts    |   4 +-
 61 files changed, 754 insertions(+), 750 deletions(-)
 delete mode 100644 src/i18n-keysets/dash.controls-placement-dialog.edit/en.json
 delete mode 100644 src/i18n-keysets/dash.controls-placement-dialog.edit/ru.json
 create mode 100644 src/i18n-keysets/dash.extended-settings-dialog.edit/en.json
 create mode 100644 src/i18n-keysets/dash.extended-settings-dialog.edit/ru.json
 delete mode 100644 src/ui/components/DialogChartWidget/TabMenu/TabMenu.scss
 delete mode 100644 src/ui/components/DialogControlsPlacement/DialogControlsPlacement.tsx
 rename src/ui/components/{DialogControlsPlacement => DialogExtendedSettings}/ControlPlacementRow/ControlPlacementRow.tsx (94%)
 rename src/ui/components/{DialogControlsPlacement/DialogControlsPlacement.scss => DialogExtendedSettings/DialogExtendedSettings.scss} (58%)
 create mode 100644 src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
 create mode 100644 src/ui/components/FormSection/FormSection.scss
 create mode 100644 src/ui/components/FormSection/FormSection.tsx
 create mode 100644 src/ui/components/TabMenu/TabMenu.scss
 rename src/ui/components/{DialogChartWidget => }/TabMenu/TabMenu.tsx (91%)
 rename src/ui/components/{DialogChartWidget => }/TabMenu/types.ts (97%)

diff --git a/src/i18n-keysets/dash.controls-placement-dialog.edit/en.json b/src/i18n-keysets/dash.controls-placement-dialog.edit/en.json
deleted file mode 100644
index 18246b10a4..0000000000
--- a/src/i18n-keysets/dash.controls-placement-dialog.edit/en.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "button_back": "Back",
-  "button_cancel": "Cancel",
-  "button_save": "Save",
-  "label_field-validation": "Invalid width value",
-  "label_note": "Selectors whose width does not fit completely inside the widget that unites a group of selectors will be moved to the next line",
-  "label_title": "Settings for the location of selectors in a group",
-  "value_auto": "Auto",
-  "value_percent": "%",
-  "value_pixels": "px"
-}
diff --git a/src/i18n-keysets/dash.controls-placement-dialog.edit/ru.json b/src/i18n-keysets/dash.controls-placement-dialog.edit/ru.json
deleted file mode 100644
index 5714444a89..0000000000
--- a/src/i18n-keysets/dash.controls-placement-dialog.edit/ru.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "button_back": "Назад",
-  "button_cancel": "Отмена",
-  "button_save": "Сохранить",
-  "label_field-validation": "Некорректное значение ширины",
-  "label_note": "Селекторы, которые по ширине не помещаются в виджет, объединяющий группу селекторов, будут перенесены на следующую строку",
-  "label_title": "Настройки размещения селекторов в группе",
-  "value_auto": "Авто",
-  "value_percent": "%",
-  "value_pixels": "px"
-}
diff --git a/src/i18n-keysets/dash.extended-settings-dialog.edit/en.json b/src/i18n-keysets/dash.extended-settings-dialog.edit/en.json
new file mode 100644
index 0000000000..e274170768
--- /dev/null
+++ b/src/i18n-keysets/dash.extended-settings-dialog.edit/en.json
@@ -0,0 +1,21 @@
+{
+  "button_back": "Back",
+  "button_cancel": "Cancel",
+  "button_save": "Save",
+  "context_apply-button": "This option enables a button for applying selectors",
+  "context_reset-button": "This option enables a button for resetting selectors",
+  "context_update-controls-on-change": "Once you enable this option, the dependent selectors will have influence on each other before you click Apply.",
+  "label_apply-button-checkbox": "Apply button",
+  "label_autoheight-checkbox": "Autoheight",
+  "label_field-validation": "Invalid width value",
+  "label_group-name": "Name",
+  "label_group-parameters": "Group parameters",
+  "label_note": "Selectors whose width does not fit completely inside the widget that unites a group of selectors will be moved to the next line",
+  "label_reset-button-checkbox": "Reset button",
+  "label_selectors-representation": "Selectors representation order and width",
+  "label_title": "Settings for selectors group",
+  "label_update-controls-on-change": "Auto-updating dependent selectors",
+  "value_auto": "Auto",
+  "value_percent": "%",
+  "value_pixels": "px"
+}
diff --git a/src/i18n-keysets/dash.extended-settings-dialog.edit/ru.json b/src/i18n-keysets/dash.extended-settings-dialog.edit/ru.json
new file mode 100644
index 0000000000..54dbede7f7
--- /dev/null
+++ b/src/i18n-keysets/dash.extended-settings-dialog.edit/ru.json
@@ -0,0 +1,21 @@
+{
+  "button_back": "Назад",
+  "button_cancel": "Отмена",
+  "button_save": "Сохранить",
+  "context_apply-button": "Опция включает кнопку для применения селекторов",
+  "context_reset-button": "Опция включает кнопку для сброса селекторов",
+  "context_update-controls-on-change": "При включении опции зависимые селекторы будут влиять друг на друга до нажатия кнопки «Применить».",
+  "label_apply-button-checkbox": "Кнопка «‎Применить»‎",
+  "label_autoheight-checkbox": "Автовысота",
+  "label_field-validation": "Некорректное значение ширины",
+  "label_group-name": "Название",
+  "label_group-parameters": "Параметры группы",
+  "label_note": "Селекторы, которые по ширине не помещаются в виджет, объединяющий группу селекторов, будут перенесены на следующую строку",
+  "label_reset-button-checkbox": "Кнопка «‎Сбросить»",
+  "label_selectors-representation": "Порядок отображения и ширина селекторов",
+  "label_title": "Настройки группы селекторов",
+  "label_update-controls-on-change": "Автообновление зависимых селекторов",
+  "value_auto": "Авто",
+  "value_percent": "%",
+  "value_pixels": "px"
+}
diff --git a/src/i18n-keysets/dash.group-controls-dialog.edit/en.json b/src/i18n-keysets/dash.group-controls-dialog.edit/en.json
index 63a607a8d6..d773a38811 100644
--- a/src/i18n-keysets/dash.group-controls-dialog.edit/en.json
+++ b/src/i18n-keysets/dash.group-controls-dialog.edit/en.json
@@ -1,22 +1,19 @@
 {
-  "button_add-selector": "Add",
+  "button_add-selector": "Add selector",
   "button_cancel": "Cancel",
+  "button_extended-settings": "Extended settings",
   "button_paste-selector": "Paste",
   "button_save": "Save",
-  "button_selectors-placement": "Selector placement",
-  "context_apply-button": "This option enables a button for applying selectors",
-  "context_reset-button": "This option enables a button for resetting selectors",
-  "context_update-controls-on-change": "Once you enable this option, the dependent selectors will have influence on each other before you click Apply.",
-  "label_apply-button-checkbox": "Apply button",
-  "label_autoheight-checkbox": "Autoheight",
   "label_copy-invalid-control": "Failed to copy selector: some fields did not pass validation",
+  "label_data": "Data",
   "label_default-tab": "Selector {{index}}",
-  "label_reset-button-checkbox": "Reset button",
+  "label_filtration": "Filtration",
+  "label_representation": "Representation",
   "label_selector-settings": "Selector settings",
   "label_selectors-list": "Selectors",
   "label_source": "Source",
   "label_title-placement": "Title placement",
-  "label_update-controls-on-change": "Auto-updating dependent selectors",
+  "value_title-hidden": "Hidden",
   "value_title-placement-left": "Left",
   "value_title-placement-top": "Top"
 }
diff --git a/src/i18n-keysets/dash.group-controls-dialog.edit/ru.json b/src/i18n-keysets/dash.group-controls-dialog.edit/ru.json
index 72ed10a099..e64085facb 100644
--- a/src/i18n-keysets/dash.group-controls-dialog.edit/ru.json
+++ b/src/i18n-keysets/dash.group-controls-dialog.edit/ru.json
@@ -1,22 +1,19 @@
 {
-  "button_add-selector": "Добавить",
+  "button_add-selector": "Добавить селектор",
   "button_cancel": "Отменить",
+  "button_extended-settings": "Расширенные настройки",
   "button_paste-selector": "Вставить",
   "button_save": "Сохранить",
-  "button_selectors-placement": "Размещение селекторов",
-  "context_apply-button": "Опция включает кнопку для применения селекторов",
-  "context_reset-button": "Опция включает кнопку для сброса селекторов",
-  "context_update-controls-on-change": "При включении опции зависимые селекторы будут влиять друг на друга до нажатия кнопки «Применить».",
-  "label_apply-button-checkbox": "Кнопка «‎Применить»‎",
-  "label_autoheight-checkbox": "Автовысота",
   "label_copy-invalid-control": "Не удалось скопировать селектор: некоторые его поля заполнены некорректно",
+  "label_data": "Данные",
   "label_default-tab": "Селектор {{index}}",
-  "label_reset-button-checkbox": "Кнопка «‎Сбросить»",
+  "label_filtration": "Фильтрация",
+  "label_representation": "Отображение",
   "label_selector-settings": "Настройки селектора",
   "label_selectors-list": "Селекторы",
   "label_source": "Источник",
   "label_title-placement": "Размещение заголовка",
-  "label_update-controls-on-change": "Автообновление зависимых селекторов",
+  "value_title-hidden": "Скрыт",
   "value_title-placement-left": "Слева",
   "value_title-placement-top": "Сверху"
 }
diff --git a/src/shared/constants/qa/control.ts b/src/shared/constants/qa/control.ts
index 1459882d9a..211715a54e 100644
--- a/src/shared/constants/qa/control.ts
+++ b/src/shared/constants/qa/control.ts
@@ -1,6 +1,5 @@
 export const ControlQA = {
     showInnerTitleCheckbox: 'show-inner-title-checkbox',
-    showLabelCheckbox: 'show-control-name-checkbox',
     controlLabel: 'chartkit-control-title',
 
     controlSelect: 'chartkit-control-select',
@@ -41,6 +40,7 @@ export const DialogControlQa = {
     radioSourceType: 'radio-source-type',
     seletSourceType: 'select-source-type',
     appearanceTitle: 'dialog-control-appearance-title',
+    appearanceTitlePlacement: 'dialog-control-appearance-title-placement',
     appearanceInnerTitle: 'dialog-control-appearance-inner-title',
     fieldNameInput: 'field-name-input',
     dateRangeCheckbox: 'date-range-checkbox',
@@ -63,9 +63,9 @@ export const DialogGroupControlQa = {
     applyButtonCheckbox: 'apply-button-checkbox',
     resetButtonCheckbox: 'reset-button-checkbox',
     updateControlOnChangeCheckbox: 'update-controls-button-checkbox',
-    placementButton: 'selectors-placement-button',
+    extendedSettingsButton: 'extended-settings-button',
     placementControlList: 'selectors-placement-control-list',
-    placementApplyButton: 'selectors-placement-apply-button',
+    extendedSettingsApplyButton: 'selectors-extended-settings-apply-button',
     controlMenu: 'control-menu',
     removeControlButton: 'remove-control-button',
     copyControlButton: 'copy-control-button',
diff --git a/src/shared/types/dash.ts b/src/shared/types/dash.ts
index 72cc3539e7..25fd0c01ad 100644
--- a/src/shared/types/dash.ts
+++ b/src/shared/types/dash.ts
@@ -2,7 +2,14 @@ import type {ItemDropProps} from '@gravity-ui/dashkit';
 
 import type {Operations} from '../modules';
 
-import type {ClientChartsConfig, Dictionary, Entry, EntryScope, StringParams} from './index';
+import type {
+    ClientChartsConfig,
+    Dictionary,
+    Entry,
+    EntryScope,
+    StringParams,
+    ValueOf,
+} from './index';
 
 export enum ControlType {
     Dash = 'control_dash',
@@ -235,6 +242,14 @@ export enum TitlePlacementOption {
     Top = 'top',
 }
 
+export const TitlePlacements = {
+    Hide: 'hide' as const,
+    Left: TitlePlacementOption.Left,
+    Top: TitlePlacementOption.Top,
+};
+
+export type TitlePlacement = ValueOf<typeof TitlePlacements>;
+
 export type AccentTypeValue = 'info' | null;
 
 export interface DashTabItemControlElementBase {
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss b/src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss
index e88760dbcb..4add0b4613 100644
--- a/src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss
+++ b/src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss
@@ -1,16 +1,12 @@
 .control2-appearance-section {
     &__setting-container {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: var(--gc-form-row-field-height);
     }
 
     &__setting-checkbox {
-        margin-right: 8px;
-
-        &_top {
-            align-self: flex-start;
-            margin-top: 4px;
-        }
+        margin-block-start: var(--g-spacing-1);
+        margin-inline-end: var(--g-spacing-2);
     }
 }
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx
index 401bdc5246..4f768dd603 100644
--- a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx
+++ b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx
@@ -17,7 +17,7 @@ const b = block('control2-appearance-section');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const ColorAccentRow = () => {
+export const ColorAccentRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {accentType} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -47,7 +47,7 @@ export const ColorAccentRow = () => {
     );
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={className}>
             <div className={b('setting-container')}>
                 <Checkbox
                     disabled={isFieldDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx
index 17198263d4..a1a64c8d94 100644
--- a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx
+++ b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx
@@ -18,7 +18,7 @@ const b = block('control2-appearance-section');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const HintRow = () => {
+export const HintRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {showHint = false, hint} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -38,7 +38,7 @@ export const HintRow = () => {
     const {MarkdownControl} = registry.common.components.getAll();
 
     return (
-        <FormRow label={i18n('field_hint')}>
+        <FormRow label={i18n('field_hint')} className={className}>
             <div className={b('setting-container')}>
                 <Checkbox
                     disabled={isFieldDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx
index f199e3d4b8..e41999f6c7 100644
--- a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx
+++ b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx
@@ -28,7 +28,7 @@ const getHelpPopoverText = (sourceType: SelectorSourceType | undefined): string
     }
 };
 
-export const InnerTitleRow = () => {
+export const InnerTitleRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {showInnerTitle, innerTitle, sourceType} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -63,7 +63,7 @@ export const InnerTitleRow = () => {
     );
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={className}>
             <div className={b('setting-container')} data-qa={DialogControlQa.appearanceInnerTitle}>
                 <Checkbox
                     className={b('setting-checkbox')}
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx
index 8e88e9584c..85c1bf7cf6 100644
--- a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx
+++ b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx
@@ -5,7 +5,8 @@ import {RadioButton} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
-import {TitlePlacementOption} from 'shared/types/dash';
+import type {TitlePlacement} from 'shared';
+import {DialogControlQa, TitlePlacements} from 'shared';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
 import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
@@ -20,23 +21,23 @@ const b = block('control2-appearance-section');
 const i18n = I18n.keyset('dash.group-controls-dialog.edit');
 
 const TITLE_PLACEMENT_OPTIONS = [
-    {content: i18n('value_title-placement-left'), value: TitlePlacementOption.Left},
-    {content: i18n('value_title-placement-top'), value: TitlePlacementOption.Top},
+    {content: i18n('value_title-hidden'), value: TitlePlacements.Hide},
+    {content: i18n('value_title-placement-left'), value: TitlePlacements.Left},
+    {content: i18n('value_title-placement-top'), value: TitlePlacements.Top},
 ];
 
-export const TitlePlacementRow = () => {
+export const TitlePlacementRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
-    const {elementType, titlePlacement = TitlePlacementOption.Left} =
-        useSelector(selectSelectorDialog);
+    const {elementType, titlePlacement} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
 
     const isPlacementDisabled = isFieldDisabled || elementType === ELEMENT_TYPE.CHECKBOX;
 
     const handleItemPlacementUpdate = React.useCallback(
-        (value: string) => {
+        (value: TitlePlacement) => {
             dispatch(
                 setSelectorDialogItem({
-                    titlePlacement: value as TitlePlacementOption,
+                    titlePlacement: value,
                 }),
             );
         },
@@ -44,9 +45,10 @@ export const TitlePlacementRow = () => {
     );
 
     return (
-        <FormRow label={i18n('label_title-placement')}>
+        <FormRow className={className}>
             <div className={b('setting-container')}>
                 <RadioButton
+                    qa={DialogControlQa.appearanceTitlePlacement}
                     options={TITLE_PLACEMENT_OPTIONS}
                     value={titlePlacement}
                     disabled={isPlacementDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx
index 0f18d80f81..55dd48136c 100644
--- a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx
+++ b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {FormRow} from '@gravity-ui/components';
-import {Checkbox, TextInput} from '@gravity-ui/uikit';
+import {TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {FieldWrapper} from 'components/FieldWrapper/FieldWrapper';
 import {I18n} from 'i18n';
@@ -19,9 +19,9 @@ const b = block('control2-appearance-section');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const TitleRow = () => {
+export const TitleRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
-    const {showTitle, title, validation} = useSelector(selectSelectorDialog);
+    const {title, validation} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
 
     const handleTitleUpdate = React.useCallback((title: string) => {
@@ -33,25 +33,9 @@ export const TitleRow = () => {
         );
     }, []);
 
-    const handleShowTitleUpdate = React.useCallback((value: boolean) => {
-        dispatch(
-            setSelectorDialogItem({
-                showTitle: value,
-            }),
-        );
-    }, []);
-
     return (
-        <FormRow label={i18n('field_title')}>
+        <FormRow label={i18n('field_title')} className={className}>
             <div className={b('setting-container')} data-qa={DialogControlQa.appearanceTitle}>
-                <Checkbox
-                    disabled={isFieldDisabled}
-                    className={b('setting-checkbox')}
-                    qa={ControlQA.showLabelCheckbox}
-                    checked={showTitle}
-                    onUpdate={handleShowTitleUpdate}
-                    size="l"
-                />
                 <FieldWrapper error={validation.title}>
                     <TextInput
                         disabled={isFieldDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonSettingsSection.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonSettingsSection.tsx
index a73e03b063..8a8f063dc7 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonSettingsSection.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonSettingsSection.tsx
@@ -15,11 +15,13 @@ export const CommonSettingsSection = ({
     navigationPath,
     changeNavigationPath,
     enableAutoheightDefault,
+    className,
 }: {
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
     hideCommonFields?: boolean;
     enableAutoheightDefault?: boolean;
+    className?: string;
 }) => {
     const {sourceType} = useSelector(selectSelectorDialog);
 
@@ -27,16 +29,18 @@ export const CommonSettingsSection = ({
         case DashTabItemControlSourceType.External:
             return (
                 <ExternalSelectorSettings
+                    rowClassName={className}
                     changeNavigationPath={changeNavigationPath}
                     navigationPath={navigationPath}
                     enableAutoheightDefault={enableAutoheightDefault}
                 />
             );
         case DashTabItemControlSourceType.Manual:
-            return <InputSettings hideCommonFields={hideCommonFields} />;
+            return <InputSettings rowClassName={className} hideCommonFields={hideCommonFields} />;
         case DashTabItemControlSourceType.Connection:
             return (
                 <ConnectionSettings
+                    rowClassName={className}
                     hideCommonFields={hideCommonFields}
                     changeNavigationPath={changeNavigationPath}
                     navigationPath={navigationPath}
@@ -45,6 +49,7 @@ export const CommonSettingsSection = ({
         default:
             return (
                 <DatasetSettings
+                    rowClassName={className}
                     hideCommonFields={hideCommonFields}
                     changeNavigationPath={changeNavigationPath}
                     navigationPath={navigationPath}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx
index 521d57f2f9..9db308c6db 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.tsx
@@ -18,28 +18,34 @@ export const ConnectionSettings = ({
     hideCommonFields,
     navigationPath,
     changeNavigationPath,
+    rowClassName,
 }: {
     hideCommonFields?: boolean;
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
+    rowClassName?: string;
 }) => {
     const {connectionQueryTypes} = useSelector(selectSelectorDialog);
 
     return (
         <React.Fragment>
             <ConnectionSelector
+                className={rowClassName}
                 navigationPath={navigationPath}
                 changeNavigationPath={changeNavigationPath}
             />
             {connectionQueryTypes && connectionQueryTypes.length > 0 && (
                 <React.Fragment>
-                    <ParameterNameInput label={i18n('field_parameter-name')} />
+                    <ParameterNameInput
+                        label={i18n('field_parameter-name')}
+                        className={rowClassName}
+                    />
                     <QueryTypeControl connectionQueryTypes={connectionQueryTypes} />
                     {!hideCommonFields && (
                         <React.Fragment>
-                            <InputTypeSelector />
-                            <RequiredValueCheckbox />
-                            <ValueSelector />
+                            <InputTypeSelector className={rowClassName} />
+                            <RequiredValueCheckbox className={rowClassName} />
+                            <ValueSelector rowClassName={rowClassName} />
                         </React.Fragment>
                     )}
                 </React.Fragment>
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx
index 794e2347c7..8e1150761f 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx
@@ -17,6 +17,7 @@ const i18n = I18n.keyset('dash.control-dialog.edit');
 export const ConnectionSelector = (props: {
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
+    className?: string;
 }) => {
     const dispatch = useDispatch();
     const {connectionId} = useSelector(selectSelectorDialog);
@@ -85,6 +86,7 @@ export const ConnectionSelector = (props: {
 
     return (
         <EntrySelector
+            className={props.className}
             label={i18n('field_connection')}
             entryId={connectionId}
             scope={EntryScope.Connection}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx
index 13539f4197..78459a54b6 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx
@@ -28,6 +28,7 @@ const getDatasetLink = (entryId: string) => `/datasets/${entryId}`;
 function DatasetSelector(props: {
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
+    rowClassName?: string;
 }) {
     const dispatch = useDispatch();
     const {datasetId, datasetFieldId, isManualTitle, title, fieldType, validation} =
@@ -133,6 +134,7 @@ function DatasetSelector(props: {
     return (
         <React.Fragment>
             <EntrySelector
+                className={props.rowClassName}
                 label={i18n('field_dataset')}
                 entryId={datasetId}
                 scope={EntryScope.Dataset}
@@ -143,7 +145,7 @@ function DatasetSelector(props: {
                 navigationPath={props.navigationPath}
                 changeNavigationPath={props.changeNavigationPath}
             />
-            <FormRow label={i18n('field_field')}>
+            <FormRow label={i18n('field_field')} className={props.rowClassName}>
                 <FieldWrapper error={validation.datasetFieldId}>
                     <DatasetField
                         ignoredFieldTypes={[]}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx
index f1e50093dc..4db8a50c2b 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/DatasetSettings.tsx
@@ -10,23 +10,26 @@ const DatasetSettings = ({
     hideCommonFields,
     navigationPath,
     changeNavigationPath,
+    rowClassName,
 }: {
     hideCommonFields?: boolean;
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
+    rowClassName?: string;
 }) => {
     return (
         <React.Fragment>
             <DatasetSelector
+                rowClassName={rowClassName}
                 navigationPath={navigationPath}
                 changeNavigationPath={changeNavigationPath}
             />
             {!hideCommonFields && (
                 <React.Fragment>
-                    <InputTypeSelector />
-                    <OperationSelector />
-                    <RequiredValueCheckbox />
-                    <ValueSelector />
+                    <InputTypeSelector className={rowClassName} />
+                    <OperationSelector className={rowClassName} />
+                    <RequiredValueCheckbox className={rowClassName} />
+                    <ValueSelector rowClassName={rowClassName} />
                 </React.Fragment>
             )}
         </React.Fragment>
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.scss b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.scss
index 3f27354d13..42b0f17cb3 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.scss
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.scss
@@ -1,11 +1,11 @@
 .entry-selector {
     &__navigation {
         grid-template-columns: 1fr auto;
-        grid-template-rows: 40px;
+        row-gap: var(--g-spacing-2);
+        margin-block-end: var(--g-spacing-2);
     }
 
     &__link {
-        grid-auto-rows: 40px;
         --dl-dropdown-navigation-width: initial;
     }
 }
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.tsx
index c00bf8e1c9..743b4b7029 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/EntrySelector/EntrySelector.tsx
@@ -32,6 +32,7 @@ type EntrySelectorProps = {
     getEntryLink?: (entryId: string) => string;
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
+    className?: string;
 };
 
 export const EntrySelector: React.FC<EntrySelectorProps> = (props: EntrySelectorProps) => {
@@ -47,10 +48,11 @@ export const EntrySelector: React.FC<EntrySelectorProps> = (props: EntrySelector
         includeClickableType,
         navigationPath,
         changeNavigationPath,
+        className,
     } = props;
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={className}>
             <FieldWrapper error={errorText}>
                 <NavigationInput
                     entryId={entryId}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx
index 5afb92e2db..7afa9bb6a2 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ExternalSelectorSettings/ExternalSelectorSettings.tsx
@@ -33,6 +33,7 @@ const ExternalSelectorSettings: React.FC<{
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
     enableAutoheightDefault?: boolean;
+    rowClassName?: string;
 }> = (props) => {
     const dispatch = useDispatch();
     const {autoHeight, chartId, title, selectorParameters, validation, selectorParametersGroup} =
@@ -100,7 +101,10 @@ const ExternalSelectorSettings: React.FC<{
 
     return (
         <React.Fragment>
-            <FormRow label={i18n('dash.control-dialog.edit', 'field_title')}>
+            <FormRow
+                label={i18n('dash.control-dialog.edit', 'field_title')}
+                className={props.rowClassName}
+            >
                 <FieldWrapper error={validation.title}>
                     <TextInput
                         qa={ControlQA.inputNameControl}
@@ -111,6 +115,7 @@ const ExternalSelectorSettings: React.FC<{
             </FormRow>
 
             <EntrySelector
+                className={props.rowClassName}
                 label={i18n('dash.control-dialog.edit', 'field_source')}
                 entryId={chartId}
                 errorText={validation.chartId}
@@ -122,7 +127,10 @@ const ExternalSelectorSettings: React.FC<{
             />
 
             {!props.enableAutoheightDefault && (
-                <FormRow label={i18n('dash.control-dialog.edit', 'field_autoheight')}>
+                <FormRow
+                    label={i18n('dash.control-dialog.edit', 'field_autoheight')}
+                    className={props.rowClassName}
+                >
                     <Checkbox
                         className={b('checkbox-option')}
                         checked={autoHeight}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputSettings/InputSettings.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputSettings/InputSettings.tsx
index 87a412047a..ae4d077169 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputSettings/InputSettings.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputSettings/InputSettings.tsx
@@ -10,19 +10,26 @@ import {ParameterNameInput} from '../ParameterNameInput/ParameterNameInput';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-const InputSettings = ({hideCommonFields}: {hideCommonFields?: boolean}) => {
+const InputSettings = ({
+    hideCommonFields,
+    rowClassName,
+}: {
+    hideCommonFields?: boolean;
+    rowClassName?: string;
+}) => {
     return (
         <React.Fragment>
             <ParameterNameInput
                 label={i18n('field_field-name')}
                 note={i18n('field_field-name-note')}
+                className={rowClassName}
             />
             {!hideCommonFields && (
                 <React.Fragment>
-                    <InputTypeSelector />
-                    <OperationSelector />
-                    <RequiredValueCheckbox />
-                    <ValueSelector />
+                    <InputTypeSelector className={rowClassName} />
+                    <OperationSelector className={rowClassName} />
+                    <RequiredValueCheckbox className={rowClassName} />
+                    <ValueSelector rowClassName={rowClassName} />
                 </React.Fragment>
             )}
         </React.Fragment>
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputTypeSelector/InputTypeSelector.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputTypeSelector/InputTypeSelector.tsx
index 5930f2aab7..893fe7006f 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputTypeSelector/InputTypeSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/InputTypeSelector/InputTypeSelector.tsx
@@ -27,7 +27,7 @@ const i18n = I18n.keyset('dash.control-dialog.edit');
 
 const renderOptions = (option: SelectOption) => <SelectOptionWithIcon option={option} />;
 
-const InputTypeSelector = () => {
+const InputTypeSelector = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const controlType = useSelector(selectSelectorControlType);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -79,7 +79,7 @@ const InputTypeSelector = () => {
     );
 
     return (
-        <FormRow label={i18n('field_selector-type')}>
+        <FormRow label={i18n('field_selector-type')} className={className}>
             <Select
                 value={[controlType]}
                 disabled={isFieldDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ParameterNameInput/ParameterNameInput.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ParameterNameInput/ParameterNameInput.tsx
index 0d24978030..19c382937f 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ParameterNameInput/ParameterNameInput.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ParameterNameInput/ParameterNameInput.tsx
@@ -12,6 +12,7 @@ import {FieldWrapper} from '../../../../FieldWrapper/FieldWrapper';
 export type ParameterNameInputProps = {
     label: string;
     note?: string;
+    className?: string;
 };
 export const ParameterNameInput: React.FC<ParameterNameInputProps> = (
     props: ParameterNameInputProps,
@@ -43,7 +44,7 @@ export const ParameterNameInput: React.FC<ParameterNameInputProps> = (
     );
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={props.className}>
             <FieldWrapper error={validation.fieldName || validation.uniqueFieldName}>
                 <TextInput
                     qa={DialogControlQa.fieldNameInput}
diff --git a/src/ui/components/ControlComponents/Sections/OperationSelector/OperationSelector.tsx b/src/ui/components/ControlComponents/Sections/OperationSelector/OperationSelector.tsx
index a5d4e8c6c7..41340a3737 100644
--- a/src/ui/components/ControlComponents/Sections/OperationSelector/OperationSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/OperationSelector/OperationSelector.tsx
@@ -15,7 +15,7 @@ import {
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-const OperationSelector: React.FC = () => {
+const OperationSelector = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {operation} = useSelector(selectSelectorDialog);
     const operations = useSelector(selectInputOperations);
@@ -67,7 +67,7 @@ const OperationSelector: React.FC = () => {
     );
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={className}>
             <SelectFeatured
                 disabled={isFieldDisabled}
                 placeholder="—"
diff --git a/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/ListValueControl.tsx b/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/ListValueControl.tsx
index 44dade891f..8cd8a4f7af 100644
--- a/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/ListValueControl.tsx
+++ b/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/ListValueControl.tsx
@@ -14,7 +14,7 @@ import type {DynamicValueSelectorCustomProps} from './ValueSelector/types';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export type ListValueControlProps = {hasMultiselect?: boolean} & (
+export type ListValueControlProps = {hasMultiselect?: boolean; rowClassName?: string} & (
     | {
           type: 'dynamic';
           custom: DynamicValueSelectorCustomProps;
@@ -28,14 +28,14 @@ export const ListValueControl: React.FC<ListValueControlProps> = (props: ListVal
 
     return (
         <React.Fragment>
-            {hasMultiselectValue && <MultiselectableCheckbox />}
+            {hasMultiselectValue && <MultiselectableCheckbox className={props.rowClassName} />}
 
             {props.type === 'manual' && (
                 <React.Fragment>
-                    <FormRow label={i18n('field_acceptable-values')}>
+                    <FormRow label={i18n('field_acceptable-values')} className={props.rowClassName}>
                         <Acceptable />
                     </FormRow>
-                    <FormRow label={i18n('field_default-value')}>
+                    <FormRow label={i18n('field_default-value')} className={props.rowClassName}>
                         <FieldWrapper error={validation.defaultValue}>
                             <StaticValueSelect
                                 hasValidationError={Boolean(validation.defaultValue)}
@@ -46,7 +46,7 @@ export const ListValueControl: React.FC<ListValueControlProps> = (props: ListVal
                 </React.Fragment>
             )}
             {props.type === 'dynamic' && (
-                <FormRow label={i18n('field_default-value')}>
+                <FormRow label={i18n('field_default-value')} className={props.rowClassName}>
                     <FieldWrapper error={validation.defaultValue}>
                         <DynamicValueSelect
                             {...props.custom}
diff --git a/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/MultiselectableCheckbox.tsx b/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/MultiselectableCheckbox.tsx
index 3b477cb7ac..a65dc787c2 100644
--- a/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/MultiselectableCheckbox.tsx
+++ b/src/ui/components/ControlComponents/Sections/ValueSelector/ListValueControl/MultiselectableCheckbox.tsx
@@ -17,7 +17,7 @@ const b = block('value-selector-wrapper');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const MultiselectableCheckbox = () => {
+export const MultiselectableCheckbox = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {multiselectable} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -34,7 +34,7 @@ export const MultiselectableCheckbox = () => {
     );
 
     return (
-        <FormRow label={i18n('field_multiselectable')}>
+        <FormRow label={i18n('field_multiselectable')} className={className}>
             <Checkbox
                 className={b('checkbox-option')}
                 disabled={isFieldDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/ValueSelector/RequiredValueCheckbox/RequiredValueCheckbox.tsx b/src/ui/components/ControlComponents/Sections/ValueSelector/RequiredValueCheckbox/RequiredValueCheckbox.tsx
index 514428983f..a974466605 100644
--- a/src/ui/components/ControlComponents/Sections/ValueSelector/RequiredValueCheckbox/RequiredValueCheckbox.tsx
+++ b/src/ui/components/ControlComponents/Sections/ValueSelector/RequiredValueCheckbox/RequiredValueCheckbox.tsx
@@ -20,7 +20,7 @@ const i18n = I18n.keyset('dash.control-dialog.edit');
 
 const b = block('value-selector-wrapper');
 
-export const RequiredValueCheckbox = () => {
+export const RequiredValueCheckbox = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const required = useSelector(selectSelectorRequired);
 
@@ -39,7 +39,7 @@ export const RequiredValueCheckbox = () => {
     const value = required ?? false;
 
     return (
-        <FormRow label={i18n('field_required-value')}>
+        <FormRow label={i18n('field_required-value')} className={className}>
             <Checkbox
                 className={b('checkbox-option')}
                 disabled={isFieldDisabled}
diff --git a/src/ui/components/ControlComponents/Sections/ValueSelector/ValueSelector.tsx b/src/ui/components/ControlComponents/Sections/ValueSelector/ValueSelector.tsx
index 860ef699c0..5c95077505 100644
--- a/src/ui/components/ControlComponents/Sections/ValueSelector/ValueSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/ValueSelector/ValueSelector.tsx
@@ -38,7 +38,7 @@ const b = block('value-selector-wrapper');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-const InputValueControl = () => {
+const InputValueControl = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const defaultValue = useSelector(selectSelectorDefaultValue);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -53,7 +53,7 @@ const InputValueControl = () => {
     }, []);
 
     return (
-        <FormRow label={i18n('field_default-value')}>
+        <FormRow label={i18n('field_default-value')} className={className}>
             <FieldWrapper error={validation.defaultValue}>
                 <TextInput
                     disabled={isFieldDisabled}
@@ -66,7 +66,7 @@ const InputValueControl = () => {
     );
 };
 
-const DateValueControl = () => {
+const DateValueControl = ({rowClassName}: {rowClassName?: string}) => {
     const {isRange, acceptableValues, defaultValue, fieldType, sourceType} =
         useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -102,7 +102,7 @@ const DateValueControl = () => {
 
     return (
         <React.Fragment>
-            <FormRow label={i18n('field_date-range')}>
+            <FormRow label={i18n('field_date-range')} className={rowClassName}>
                 <Checkbox
                     qa={DialogControlQa.dateRangeCheckbox}
                     className={b('checkbox-option')}
@@ -114,7 +114,7 @@ const DateValueControl = () => {
             </FormRow>
 
             {sourceType === 'manual' ? (
-                <FormRow label={i18n('field_date-with-time')}>
+                <FormRow label={i18n('field_date-with-time')} className={rowClassName}>
                     <Checkbox
                         qa={DialogControlQa.dateTimeCheckbox}
                         className={b('checkbox-option')}
@@ -125,7 +125,7 @@ const DateValueControl = () => {
                     />
                 </FormRow>
             ) : null}
-            <FormRow label={i18n('field_default-value')}>
+            <FormRow label={i18n('field_default-value')} className={rowClassName}>
                 <FieldWrapper error={validation.defaultValue}>
                     <DateDefaultValue
                         disabled={isFieldDisabled}
@@ -142,7 +142,7 @@ const DateValueControl = () => {
     );
 };
 
-const CheckboxValueControl = () => {
+const CheckboxValueControl = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const defaultValue = useSelector(selectSelectorDefaultValue);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -159,7 +159,7 @@ const CheckboxValueControl = () => {
     );
 
     return (
-        <FormRow label={i18n('field_default-value')}>
+        <FormRow label={i18n('field_default-value')} className={className}>
             <RadioGroup
                 className={b('radio-option')}
                 onUpdate={handleUpdate}
@@ -180,7 +180,7 @@ const CheckboxValueControl = () => {
     );
 };
 
-const ValueSelector = () => {
+const ValueSelector = ({rowClassName}: {rowClassName?: string}) => {
     const {sourceType} = useSelector(selectSelectorDialog);
     const controlType = useSelector(selectSelectorControlType);
     const workbookId = useSelector(selectWorkbookId);
@@ -271,19 +271,19 @@ const ValueSelector = () => {
 
     switch (controlType) {
         case 'date': {
-            inputControl = <DateValueControl />;
+            inputControl = <DateValueControl rowClassName={rowClassName} />;
             break;
         }
         case 'select': {
-            inputControl = <ListValueControl {...listValueProps} />;
+            inputControl = <ListValueControl {...listValueProps} rowClassName={rowClassName} />;
             break;
         }
         case 'input': {
-            inputControl = <InputValueControl />;
+            inputControl = <InputValueControl className={rowClassName} />;
             break;
         }
         case 'checkbox': {
-            inputControl = <CheckboxValueControl />;
+            inputControl = <CheckboxValueControl className={rowClassName} />;
         }
     }
 
diff --git a/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.scss b/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.scss
index 4a77a9de4a..8d3846f549 100644
--- a/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.scss
+++ b/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.scss
@@ -1,34 +1,24 @@
 .two-column-dialog {
-    $dialogPaddingHorizontal: 24px;
+    --dialog-sidebar-horizontal-padding: var(--g-spacing-4);
+    --dialog-footer-vertical-padding: 28px; // equal to gravity Dialog footer vertical padding
 
     // Header
     $dialogHeaderPaddingTop: 20px;
     $dialogHeaderPaddingBottom: 10px;
-    $dialogHeaderPaddingHorizontal: $dialogPaddingHorizontal;
-
-    // Body
-    $dialogBodyPaddingHorizontal: $dialogPaddingHorizontal;
-    $dialogBodyPaddingTop: 14px;
-    $dialogBodyPaddingTopWithoutSidebar: 10px;
-    $dialogBodyPaddingBottom: 0px;
-
-    // Footer
-    $dialogFooterPaddingHorizontal: $dialogPaddingHorizontal;
-    $dialogFooterPaddingVertical: 28px;
 
     border-radius: 5px;
     overflow: hidden;
     flex: 1;
     display: flex;
 
-    &__header {
-        padding: #{$dialogHeaderPaddingTop} #{$dialogHeaderPaddingHorizontal} #{$dialogHeaderPaddingBottom};
-    }
-
     &__sidebar {
         background: var(--g-color-base-generic-ultralight);
     }
 
+    &__sidebar-header {
+        padding-inline: var(--dialog-sidebar-horizontal-padding);
+    }
+
     &__sidebar-body {
         padding: 0;
         overflow: hidden;
@@ -45,16 +35,4 @@
             );
         }
     }
-
-    &__content-body {
-        padding: #{$dialogBodyPaddingTop} #{$dialogBodyPaddingHorizontal} #{$dialogBodyPaddingBottom};
-
-        &_without-sidebar {
-            padding-top: #{$dialogBodyPaddingTopWithoutSidebar};
-        }
-    }
-
-    & .g-dialog-footer {
-        padding: #{$dialogFooterPaddingVertical} #{$dialogFooterPaddingHorizontal};
-    }
 }
diff --git a/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.tsx b/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.tsx
index 3556acbd43..854a0e2d9e 100644
--- a/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.tsx
+++ b/src/ui/components/ControlComponents/TwoColumnDialog/TwoColumnDialog.tsx
@@ -46,7 +46,7 @@ function TwoColumnDialog({
             <div className={b()}>
                 {!withoutSidebar && (
                     <div className={b('sidebar', sidebarClassMixin)}>
-                        <Dialog.Header className={b('header')} caption={sidebarHeader} />
+                        <Dialog.Header className={b('sidebar-header')} caption={sidebarHeader} />
                         <Dialog.Body className={b('sidebar-body')}>{sidebar}</Dialog.Body>
                     </div>
                 )}
diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.scss b/src/ui/components/DialogChartWidget/DialogChartWidget.scss
index 2dd91dfec9..930cb9c170 100644
--- a/src/ui/components/DialogChartWidget/DialogChartWidget.scss
+++ b/src/ui/components/DialogChartWidget/DialogChartWidget.scss
@@ -23,6 +23,7 @@
         flex: 1;
         flex-direction: column;
         width: 255px;
+        padding-block-end: var(--dialog-footer-vertical-padding, var(--g-spacing-6));
     }
 
     &__add-icon {
diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
index 4bb9992ce6..64a3ae8cd2 100644
--- a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
+++ b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
@@ -19,6 +19,9 @@ import {DashCommonQa, DialogDashWidgetQA, EntryScope, Feature, ParamsSettingsQA}
 import {getEntryHierarchy, getEntryVisualizationType} from 'shared/schema/mix/helpers';
 import {Collapse} from 'ui/components/Collapse/Collapse';
 import {Interpolate} from 'ui/components/Interpolate';
+import {TabMenu} from 'ui/components/TabMenu/TabMenu';
+import type {UpdateState} from 'ui/components/TabMenu/types';
+import {TabActionType} from 'ui/components/TabMenu/types';
 import {DL} from 'ui/constants/common';
 
 import {registry} from '../../registry';
@@ -38,10 +41,6 @@ import type {SetItemDataArgs} from '../../units/dash/store/actions/dashTyped';
 import Utils from '../../utils';
 import TwoColumnDialog from '../ControlComponents/TwoColumnDialog/TwoColumnDialog';
 
-import {TabMenu} from './TabMenu/TabMenu';
-import type {UpdateState} from './TabMenu/types';
-import {TabActionType} from './TabMenu/types';
-
 import './DialogChartWidget.scss';
 
 const imm = new Context();
diff --git a/src/ui/components/DialogChartWidget/TabMenu/TabMenu.scss b/src/ui/components/DialogChartWidget/TabMenu/TabMenu.scss
deleted file mode 100644
index 9985fe3065..0000000000
--- a/src/ui/components/DialogChartWidget/TabMenu/TabMenu.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-$class: '.tab-menu';
-$tabButtonFlatHeight: 40px;
-$tabButtonOutlinedHeight: 28px;
-$tabButtonOutlinedPadding: 8px;
-
-#{$class} {
-    $listItemPadding: 0 24px;
-
-    width: 100%;
-    max-height: 100%;
-    font-size: 13px;
-
-    &__list-item {
-        padding: $listItemPadding;
-    }
-
-    &__item {
-        display: flex;
-        align-items: center;
-        border-radius: 4px;
-        height: 40px;
-        width: 100%;
-        cursor: pointer;
-        justify-content: space-between;
-    }
-
-    &__item-star {
-        margin-right: 8px;
-        line-height: 0;
-    }
-
-    &__item-star-inactive {
-        color: var(--g-color-text-secondary);
-    }
-
-    &__item-star-active {
-        color: var(--g-color-base-misc-heavy-hover);
-    }
-
-    &__item-text {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        max-width: 160px;
-    }
-
-    &__item-content {
-        display: flex;
-        align-items: center;
-        width: 100%;
-    }
-
-    &__list {
-        height: calc(100% - $tabButtonFlatHeight);
-        overflow-y: auto;
-    }
-
-    &_view_outlined {
-        height: calc(100% - ($tabButtonOutlinedHeight + 2 * $tabButtonOutlinedPadding));
-
-        #{$class}__buttons-row {
-            display: flex;
-            padding: $tabButtonOutlinedPadding 24px;
-            gap: 6px;
-        }
-
-        #{$class}__list {
-            height: 100%;
-        }
-    }
-
-    &_view_flat {
-        #{$class}__action-button {
-            color: var(--g-color-text-secondary);
-            display: flex;
-            padding: $listItemPadding;
-            align-items: center;
-            cursor: pointer;
-            height: 40px;
-
-            &:hover,
-            &:focus {
-                background-color: var(--g-color-base-simple-hover);
-            }
-        }
-
-        #{$class}__action-button-icon {
-            margin-right: 8px;
-        }
-    }
-}
diff --git a/src/ui/components/DialogControlsPlacement/DialogControlsPlacement.tsx b/src/ui/components/DialogControlsPlacement/DialogControlsPlacement.tsx
deleted file mode 100644
index 304613c988..0000000000
--- a/src/ui/components/DialogControlsPlacement/DialogControlsPlacement.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import React from 'react';
-
-import {Dialog, List} from '@gravity-ui/uikit';
-import block from 'bem-cn-lite';
-import DialogManager from 'components/DialogManager/DialogManager';
-import {I18n} from 'i18n';
-import {useDispatch, useSelector} from 'react-redux';
-import {DialogGroupControlQa} from 'shared';
-import {BackButton} from 'ui/components/ControlComponents/BackButton/BackButton';
-import {updateSelectorsGroup} from 'ui/store/actions/controlDialog';
-import {selectSelectorsGroup} from 'ui/store/selectors/controlDialog';
-import type {SelectorDialogState} from 'ui/store/typings/controlDialog';
-
-import {CONTROLS_PLACEMENT_MODE} from '../../constants/dialogs';
-
-import {ControlPlacementRow} from './ControlPlacementRow/ControlPlacementRow';
-
-import './DialogControlsPlacement.scss';
-
-export const DIALOG_SELECTORS_PLACEMENT = Symbol('DIALOG_SELECTORS_PLACEMENT');
-
-export type ControlsPlacementDialogProps = {
-    onClose: () => void;
-};
-
-export type OpenDialogControlsPlacementArgs = {
-    id: typeof DIALOG_SELECTORS_PLACEMENT;
-    props: ControlsPlacementDialogProps;
-};
-
-const b = block('controls-placement-dialog');
-
-const i18n = I18n.keyset('dash.controls-placement-dialog.edit');
-
-const resetAutoValues = (group: SelectorDialogState[]) =>
-    group.map((item) =>
-        item.placementMode === CONTROLS_PLACEMENT_MODE.AUTO ? {...item, width: ''} : item,
-    );
-
-const DialogControlsPlacement = ({onClose}: ControlsPlacementDialogProps) => {
-    const selectorsGroup = useSelector(selectSelectorsGroup);
-    const [itemsState, setItemsState] = React.useState(selectorsGroup.group);
-    const [errorsIndexes, setErrorsIndexes] = React.useState<number[]>([]);
-    const [showErrors, setShowErrors] = React.useState(false);
-    const dispatch = useDispatch();
-
-    React.useEffect(() => {
-        if (!errorsIndexes.length) {
-            setShowErrors(false);
-        }
-    }, [errorsIndexes.length]);
-
-    const moveItem = React.useCallback((oldIndex: number, newIndex: number) => {
-        setItemsState((prevItemsState) => {
-            const dragItem = prevItemsState[oldIndex];
-            const newItemsState = prevItemsState.filter((_, index) => index !== oldIndex);
-            newItemsState.splice(newIndex, 0, dragItem);
-            return newItemsState;
-        });
-    }, []);
-
-    const handleApplyClick = React.useCallback(() => {
-        if (errorsIndexes.length) {
-            setShowErrors(true);
-            return;
-        }
-        const updatedItemsState = resetAutoValues(itemsState);
-        dispatch(
-            updateSelectorsGroup({
-                ...selectorsGroup,
-                group: updatedItemsState,
-            }),
-        );
-        onClose();
-    }, [selectorsGroup, itemsState, dispatch, onClose, errorsIndexes.length]);
-
-    const handlePlacementModeUpdate = React.useCallback(
-        (targetIndex: number, newType: SelectorDialogState['placementMode']) => {
-            setItemsState((prevItemsState) => {
-                return prevItemsState.map((item, index) => {
-                    if (index !== targetIndex) {
-                        return item;
-                    }
-                    return {...item, placementMode: newType};
-                });
-            });
-        },
-        [],
-    );
-
-    const handlePlacementValueUpdate = React.useCallback(
-        (targetIndex: number, newValue: string) => {
-            setItemsState((prevItemsState) => {
-                return prevItemsState.map((item, index) => {
-                    if (index !== targetIndex) {
-                        return item;
-                    }
-                    return {...item, width: newValue};
-                });
-            });
-        },
-        [],
-    );
-
-    const handleError = React.useCallback((index: number, isError: boolean) => {
-        if (!isError) {
-            setErrorsIndexes((prevErrors) => prevErrors.filter((error) => error !== index));
-            return;
-        }
-
-        setErrorsIndexes((prevErrors) => {
-            if (prevErrors.includes(index)) {
-                return prevErrors;
-            }
-            return [...prevErrors, index];
-        });
-    }, []);
-
-    const renderControlPlacementRow = React.useCallback(
-        (item, _, index) => {
-            return (
-                <ControlPlacementRow
-                    key={`${item.title}-${item.id}`}
-                    title={item.title || ''}
-                    value={item.width || ''}
-                    mode={item.placementMode || CONTROLS_PLACEMENT_MODE.AUTO}
-                    onPlacementModeUpdate={handlePlacementModeUpdate}
-                    onPlacementValueUpdate={handlePlacementValueUpdate}
-                    index={index}
-                    onError={handleError}
-                    showErrors={showErrors}
-                />
-            );
-        },
-        [handleError, handlePlacementModeUpdate, handlePlacementValueUpdate, showErrors],
-    );
-
-    return (
-        <Dialog onClose={onClose} open={true} className={b()}>
-            <Dialog.Header
-                className={b('header')}
-                caption={i18n('label_title')}
-                insertBefore={<BackButton onClose={onClose} />}
-            />
-            <Dialog.Body className={b('body')}>
-                <div className={b('note')}>{i18n('label_note')}</div>
-                <div className={b('selectors')}>
-                    <List
-                        qa={DialogGroupControlQa.placementControlList}
-                        items={itemsState}
-                        filterable={false}
-                        sortable={true}
-                        virtualized={false}
-                        onSortEnd={({oldIndex, newIndex}) => moveItem(oldIndex, newIndex)}
-                        itemClassName={b('list-item-container')}
-                        renderItem={renderControlPlacementRow}
-                    />
-                </div>
-                {showErrors && <div className={b('error')}>{i18n('label_field-validation')}</div>}
-            </Dialog.Body>
-            <Dialog.Footer
-                textButtonCancel={i18n('button_cancel')}
-                textButtonApply={i18n('button_save')}
-                propsButtonCancel={{view: 'flat'}}
-                propsButtonApply={{qa: DialogGroupControlQa.placementApplyButton}}
-                onClickButtonApply={handleApplyClick}
-                onClickButtonCancel={onClose}
-            />
-        </Dialog>
-    );
-};
-
-DialogManager.registerDialog(DIALOG_SELECTORS_PLACEMENT, DialogControlsPlacement);
diff --git a/src/ui/components/DialogControlsPlacement/ControlPlacementRow/ControlPlacementRow.tsx b/src/ui/components/DialogExtendedSettings/ControlPlacementRow/ControlPlacementRow.tsx
similarity index 94%
rename from src/ui/components/DialogControlsPlacement/ControlPlacementRow/ControlPlacementRow.tsx
rename to src/ui/components/DialogExtendedSettings/ControlPlacementRow/ControlPlacementRow.tsx
index 1a6d41013e..d987afeb61 100644
--- a/src/ui/components/DialogControlsPlacement/ControlPlacementRow/ControlPlacementRow.tsx
+++ b/src/ui/components/DialogExtendedSettings/ControlPlacementRow/ControlPlacementRow.tsx
@@ -8,11 +8,11 @@ import {EMPTY_VALUE} from 'ui/units/dash/modules/constants';
 
 import {CONTROLS_PLACEMENT_MODE} from '../../../constants/dialogs';
 
-import '../DialogControlsPlacement.scss';
+import '../DialogExtendedSettings.scss';
 
-const b = block('controls-placement-dialog');
+const b = block('extended-settings-dialog');
 
-const i18n = I18n.keyset('dash.controls-placement-dialog.edit');
+const i18n = I18n.keyset('dash.extended-settings-dialog.edit');
 
 type ControlPlacementRowProps = {
     onPlacementModeUpdate: (
diff --git a/src/ui/components/DialogControlsPlacement/DialogControlsPlacement.scss b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.scss
similarity index 58%
rename from src/ui/components/DialogControlsPlacement/DialogControlsPlacement.scss
rename to src/ui/components/DialogExtendedSettings/DialogExtendedSettings.scss
index e3872d0a01..e0dcbc12b1 100644
--- a/src/ui/components/DialogControlsPlacement/DialogControlsPlacement.scss
+++ b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.scss
@@ -1,6 +1,6 @@
 @import '~@gravity-ui/uikit/styles/mixins';
 
-.controls-placement-dialog {
+.extended-settings-dialog {
     width: 600px;
     display: flex;
     flex-direction: column;
@@ -8,22 +8,30 @@
     &__body {
         display: flex;
         flex-direction: column;
-        padding-bottom: 0;
+        padding-block-end: 0;
+        height: 430px;
     }
 
-    &__selectors {
-        overflow-y: auto;
-        height: 280px;
+    &__row {
+        --gc-form-row-label-width: 272px;
+        margin-block-end: var(--g-spacing-2);
+
+        &:last-child {
+            margin-block-end: 0;
+        }
+    }
+
+    &__help-icon {
+        left: var(--g-spacing-1);
     }
 
     &__note {
         @include text-body-1();
-        color: var(--g-color-text-secondary);
-        margin-bottom: 20px;
+        margin-block-end: var(--g-spacing-5);
     }
 
     &__list-item-container {
-        padding: 0 7px;
+        padding: 0 var(--g-spacing-2);
     }
 
     &__list-item {
@@ -34,18 +42,22 @@
         height: 40px;
         width: 100%;
         cursor: pointer;
-        gap: 8px;
+        gap: var(--g-spacing-2);
     }
 
     &__item-title {
-        flex: 1;
+        width: 240px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
     }
 
+    &__checkbox {
+        margin-block-start: 6px;
+    }
+
     &__radio-button {
-        width: 180px;
+        flex: 1;
     }
 
     &__text-input {
@@ -54,7 +66,7 @@
 
     &__error {
         width: 100%;
-        margin-top: 8px;
+        margin-block-start: var(--g-spacing-2);
         color: var(--g-color-text-danger);
     }
 }
diff --git a/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
new file mode 100644
index 0000000000..00a790ba34
--- /dev/null
+++ b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
@@ -0,0 +1,328 @@
+import React from 'react';
+
+import {FormRow, HelpPopover} from '@gravity-ui/components';
+import {Checkbox, Dialog, List} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import DialogManager from 'components/DialogManager/DialogManager';
+import {I18n} from 'i18n';
+import {useDispatch, useSelector} from 'react-redux';
+import {DialogGroupControlQa, TitlePlacementOption} from 'shared';
+import {BackButton} from 'ui/components/ControlComponents/BackButton/BackButton';
+import {useEffectOnce} from 'ui/hooks';
+import {updateSelectorsGroup} from 'ui/store/actions/controlDialog';
+import {selectSelectorsGroup} from 'ui/store/selectors/controlDialog';
+import type {SelectorDialogState} from 'ui/store/typings/controlDialog';
+
+import {CONTROLS_PLACEMENT_MODE} from '../../constants/dialogs';
+import {FormSection} from '../FormSection/FormSection';
+
+import {ControlPlacementRow} from './ControlPlacementRow/ControlPlacementRow';
+
+import './DialogExtendedSettings.scss';
+
+export const DIALOG_EXTENDED_SETTINGS = Symbol('DIALOG_EXTENDED_SETTINGS');
+
+export type ExtendedSettingsDialogProps = {
+    onClose: () => void;
+
+    enableAutoheightDefault?: boolean;
+};
+
+export type OpenDialogExtendedSettingsArgs = {
+    id: typeof DIALOG_EXTENDED_SETTINGS;
+    props: ExtendedSettingsDialogProps;
+};
+
+const b = block('extended-settings-dialog');
+
+const i18n = I18n.keyset('dash.extended-settings-dialog.edit');
+
+const resetAutoValues = (group: SelectorDialogState[]) =>
+    group.map((item) =>
+        item.placementMode === CONTROLS_PLACEMENT_MODE.AUTO ? {...item, width: ''} : item,
+    );
+
+const DialogExtendedSettings = ({
+    onClose,
+    enableAutoheightDefault,
+}: ExtendedSettingsDialogProps) => {
+    const selectorsGroup = useSelector(selectSelectorsGroup);
+    const [itemsState, setItemsState] = React.useState(selectorsGroup.group);
+    const [errorsIndexes, setErrorsIndexes] = React.useState<number[]>([]);
+    const [showErrors, setShowErrors] = React.useState(false);
+    const dispatch = useDispatch();
+
+    React.useEffect(() => {
+        if (!errorsIndexes.length) {
+            setShowErrors(false);
+        }
+    }, [errorsIndexes.length]);
+
+    const moveItem = React.useCallback((oldIndex: number, newIndex: number) => {
+        setItemsState((prevItemsState) => {
+            const dragItem = prevItemsState[oldIndex];
+            const newItemsState = prevItemsState.filter((_, index) => index !== oldIndex);
+            newItemsState.splice(newIndex, 0, dragItem);
+            return newItemsState;
+        });
+    }, []);
+
+    const handleApplyClick = React.useCallback(() => {
+        if (errorsIndexes.length) {
+            setShowErrors(true);
+            return;
+        }
+        const updatedItemsState = resetAutoValues(itemsState);
+        dispatch(
+            updateSelectorsGroup({
+                ...selectorsGroup,
+                group: updatedItemsState,
+            }),
+        );
+        onClose();
+    }, [selectorsGroup, itemsState, dispatch, onClose, errorsIndexes.length]);
+
+    const handlePlacementModeUpdate = React.useCallback(
+        (targetIndex: number, newType: SelectorDialogState['placementMode']) => {
+            setItemsState((prevItemsState) => {
+                return prevItemsState.map((item, index) => {
+                    if (index !== targetIndex) {
+                        return item;
+                    }
+                    return {...item, placementMode: newType};
+                });
+            });
+        },
+        [],
+    );
+
+    const handlePlacementValueUpdate = React.useCallback(
+        (targetIndex: number, newValue: string) => {
+            setItemsState((prevItemsState) => {
+                return prevItemsState.map((item, index) => {
+                    if (index !== targetIndex) {
+                        return item;
+                    }
+                    return {...item, width: newValue};
+                });
+            });
+        },
+        [],
+    );
+
+    const handleError = React.useCallback((index: number, isError: boolean) => {
+        if (!isError) {
+            setErrorsIndexes((prevErrors) => prevErrors.filter((error) => error !== index));
+            return;
+        }
+
+        setErrorsIndexes((prevErrors) => {
+            if (prevErrors.includes(index)) {
+                return prevErrors;
+            }
+            return [...prevErrors, index];
+        });
+    }, []);
+
+    const renderControlPlacementRow = React.useCallback(
+        (item, _, index) => {
+            return (
+                <ControlPlacementRow
+                    key={`${item.title}-${item.id}`}
+                    title={item.title || ''}
+                    value={item.width || ''}
+                    mode={item.placementMode || CONTROLS_PLACEMENT_MODE.AUTO}
+                    onPlacementModeUpdate={handlePlacementModeUpdate}
+                    onPlacementValueUpdate={handlePlacementValueUpdate}
+                    index={index}
+                    onError={handleError}
+                    showErrors={showErrors}
+                />
+            );
+        },
+        [handleError, handlePlacementModeUpdate, handlePlacementValueUpdate, showErrors],
+    );
+
+    const isMultipleSelectors = selectorsGroup.group?.length > 1;
+
+    const handleChangeAutoHeight = React.useCallback(
+        (value) => {
+            dispatch(
+                updateSelectorsGroup({
+                    ...selectorsGroup,
+                    autoHeight: value,
+                }),
+            );
+        },
+        [dispatch, selectorsGroup],
+    );
+
+    const handleChangeButtonApply = React.useCallback(
+        (value) => {
+            dispatch(
+                updateSelectorsGroup({
+                    ...selectorsGroup,
+                    buttonApply: value,
+                }),
+            );
+        },
+        [dispatch, selectorsGroup],
+    );
+
+    const handleChangeButtonReset = React.useCallback(
+        (value) => {
+            dispatch(
+                updateSelectorsGroup({
+                    ...selectorsGroup,
+                    buttonReset: value,
+                }),
+            );
+        },
+        [dispatch, selectorsGroup],
+    );
+
+    const handleChangeUpdateControls = React.useCallback(
+        (value: boolean) => {
+            dispatch(
+                updateSelectorsGroup({
+                    ...selectorsGroup,
+                    updateControlsOnChange: value,
+                }),
+            );
+        },
+        [dispatch, selectorsGroup],
+    );
+
+    useEffectOnce(() => {
+        if (enableAutoheightDefault) {
+            handleChangeAutoHeight(true);
+        }
+    });
+
+    const showAutoHeight =
+        (isMultipleSelectors ||
+            selectorsGroup.buttonApply ||
+            selectorsGroup.buttonReset ||
+            // until we have supported automatic height adjustment for case with top title placement,
+            // we allow to enable autoheight
+            selectorsGroup.group[0].titlePlacement === TitlePlacementOption.Top) &&
+        !enableAutoheightDefault;
+    const showUpdateControlsOnChange = selectorsGroup.buttonApply && isMultipleSelectors;
+
+    return (
+        <Dialog onClose={onClose} open={true} className={b()}>
+            <Dialog.Header
+                className={b('header')}
+                caption={i18n('label_title')}
+                insertBefore={<BackButton onClose={onClose} />}
+            />
+            <Dialog.Body className={b('body')}>
+                <FormSection title={i18n('label_group-parameters')}>
+                    <FormRow
+                        className={b('row')}
+                        label={
+                            <React.Fragment>
+                                {i18n('label_apply-button-checkbox')}
+                                <HelpPopover
+                                    className={b('help-icon')}
+                                    htmlContent={i18n('context_apply-button')}
+                                />
+                            </React.Fragment>
+                        }
+                    >
+                        <Checkbox
+                            className={b('checkbox')}
+                            checked={selectorsGroup.buttonApply}
+                            onUpdate={handleChangeButtonApply}
+                            size="l"
+                            qa={DialogGroupControlQa.applyButtonCheckbox}
+                        />
+                    </FormRow>
+                    <FormRow
+                        className={b('row')}
+                        label={
+                            <React.Fragment>
+                                {i18n('label_reset-button-checkbox')}
+                                <HelpPopover
+                                    className={b('help-icon')}
+                                    htmlContent={i18n('context_reset-button')}
+                                />
+                            </React.Fragment>
+                        }
+                    >
+                        <Checkbox
+                            className={b('checkbox')}
+                            checked={selectorsGroup.buttonReset}
+                            onUpdate={handleChangeButtonReset}
+                            size="l"
+                            qa={DialogGroupControlQa.resetButtonCheckbox}
+                        />
+                    </FormRow>
+                    {showAutoHeight && (
+                        <FormRow className={b('row')} label={i18n('label_autoheight-checkbox')}>
+                            <Checkbox
+                                className={b('checkbox')}
+                                checked={selectorsGroup.autoHeight}
+                                onUpdate={handleChangeAutoHeight}
+                                size="l"
+                                qa={DialogGroupControlQa.autoHeightCheckbox}
+                            />
+                        </FormRow>
+                    )}
+                    {showUpdateControlsOnChange && (
+                        <FormRow
+                            className={b('row')}
+                            label={
+                                <React.Fragment>
+                                    {i18n('label_update-controls-on-change')}
+                                    <HelpPopover
+                                        className={b('help-icon')}
+                                        htmlContent={i18n('context_update-controls-on-change')}
+                                    />
+                                </React.Fragment>
+                            }
+                        >
+                            <Checkbox
+                                className={b('checkbox')}
+                                checked={selectorsGroup.updateControlsOnChange}
+                                onUpdate={handleChangeUpdateControls}
+                                size="l"
+                                qa={DialogGroupControlQa.updateControlOnChangeCheckbox}
+                            />
+                        </FormRow>
+                    )}
+                </FormSection>
+                {isMultipleSelectors && (
+                    <FormSection title={i18n('label_selectors-representation')}>
+                        <div className={b('note')}>{i18n('label_note')}</div>
+                        <div className={b('selectors')}>
+                            <List
+                                qa={DialogGroupControlQa.placementControlList}
+                                items={itemsState}
+                                filterable={false}
+                                sortable={true}
+                                virtualized={false}
+                                onSortEnd={({oldIndex, newIndex}) => moveItem(oldIndex, newIndex)}
+                                itemClassName={b('list-item-container')}
+                                renderItem={renderControlPlacementRow}
+                            />
+                        </div>
+                        {showErrors && (
+                            <div className={b('error')}>{i18n('label_field-validation')}</div>
+                        )}
+                    </FormSection>
+                )}
+            </Dialog.Body>
+            <Dialog.Footer
+                textButtonCancel={i18n('button_cancel')}
+                textButtonApply={i18n('button_save')}
+                propsButtonCancel={{view: 'flat'}}
+                propsButtonApply={{qa: DialogGroupControlQa.extendedSettingsApplyButton}}
+                onClickButtonApply={handleApplyClick}
+                onClickButtonCancel={onClose}
+            />
+        </Dialog>
+    );
+};
+
+DialogManager.registerDialog(DIALOG_EXTENDED_SETTINGS, DialogExtendedSettings);
diff --git a/src/ui/components/DialogGroupControl/DialogGroupControl.scss b/src/ui/components/DialogGroupControl/DialogGroupControl.scss
index 01b5258e01..8f86d65944 100644
--- a/src/ui/components/DialogGroupControl/DialogGroupControl.scss
+++ b/src/ui/components/DialogGroupControl/DialogGroupControl.scss
@@ -4,19 +4,6 @@
     display: flex;
     flex-direction: column;
 
-    &__section {
-        margin-bottom: 15px;
-
-        &_top-divider {
-            border-top: 1px solid var(--g-color-line-generic);
-            padding-top: 15px;
-        }
-
-        &_bottom-divider {
-            border-bottom: 1px solid var(--g-color-line-generic);
-        }
-    }
-
     &__sidebar {
         display: flex;
         flex-direction: column;
@@ -27,50 +14,24 @@
     }
 
     &__selectors-list {
-        overflow-y: auto;
+        overflow-y: hidden;
         flex: 1;
         display: flex;
         flex-direction: column;
     }
 
     &__settings {
-        border-top: 1px solid var(--g-color-line-generic);
-        padding: 25px 24px 32px;
-    }
-
-    &__settings-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 5px;
-
-        &:not(:last-of-type) {
-            margin-bottom: 22px;
-        }
-    }
-
-    &__order-selectors-button {
-        margin-top: 12px;
-    }
-
-    &__help-icon {
-        left: 5px;
+        padding: var(--g-spacing-2) var(--dialog-sidebar-horizontal-padding)
+            calc(var(--dialog-footer-vertical-padding, 28px) + var(--g-spacing-1));
     }
 
     &__row {
         display: flex;
-        align-items: center;
-        border-radius: 3px;
-        font-size: 13px;
         width: 100%;
-        height: 40px;
+        margin-block-end: var(--g-spacing-2);
 
-        svg {
-            margin-right: 10px;
-        }
-
-        &:not(:last-child) {
-            margin-bottom: 10px;
+        &:last-child {
+            margin-block-end: 0;
         }
 
         &_add {
@@ -88,8 +49,4 @@
         display: flex;
         flex-direction: column;
     }
-
-    &__body {
-        padding: 14px 20px 0px 32px;
-    }
 }
diff --git a/src/ui/components/DialogGroupControl/GroupControlBody/GroupControlBody.tsx b/src/ui/components/DialogGroupControl/GroupControlBody/GroupControlBody.tsx
index d16ca032ae..3a78c6a95f 100644
--- a/src/ui/components/DialogGroupControl/GroupControlBody/GroupControlBody.tsx
+++ b/src/ui/components/DialogGroupControl/GroupControlBody/GroupControlBody.tsx
@@ -20,9 +20,11 @@ import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {selectSelectorControlType} from 'ui/store/selectors/controlDialog';
 import Utils from 'ui/utils/utils';
 
+import {FormSection} from '../../FormSection/FormSection';
+
 import '../DialogGroupControl.scss';
 
-const b = block('group-control-dialog');
+export const b = block('group-control-dialog');
 const i18n = I18n.keyset('dash.group-controls-dialog.edit');
 
 export const GroupControlBody: React.FC<{
@@ -35,53 +37,36 @@ export const GroupControlBody: React.FC<{
 
     return (
         <React.Fragment>
-            <FormRow label={i18n('label_source')}>
-                <SelectorTypeSelect showExternalType={false} mode="select" />
-            </FormRow>
-            <div className={b('section')}>
+            <FormSection title={i18n('label_data')}>
+                <FormRow label={i18n('label_source')} className={b('row')}>
+                    <SelectorTypeSelect showExternalType={false} mode="select" />
+                </FormRow>
                 <CommonSettingsSection
+                    className={b('row')}
                     hideCommonFields={true}
                     navigationPath={props.navigationPath}
                     changeNavigationPath={props.changeNavigationPath}
                 />
-            </div>
-
-            <div className={b('section', {'top-divider': true})}>
-                <InputTypeSelector />
-            </div>
-            <div className={b('section')}>
-                <TitleRow />
-            </div>
-            {isTypeNotCheckbox && (
-                <React.Fragment>
-                    <div className={b('section')}>
-                        <TitlePlacementRow />
-                    </div>
-                    <div className={b('section')}>
-                        <InnerTitleRow />
-                    </div>
-                    <div className={b('section')}>
-                        <ColorAccentRow />
-                    </div>
-                </React.Fragment>
-            )}
-            <div className={b('section', {'bottom-divider': true})}>
-                <HintRow />
-            </div>
-
-            {!Utils.isEnabledFeature(Feature.ConnectionBasedControl) && (
-                <div className={b('section')}>
-                    <OperationSelector />
-                </div>
-            )}
-            {isTypeNotCheckbox && (
-                <div className={b('section')}>
-                    <RequiredValueCheckbox />
-                </div>
-            )}
-            <div className={b('section')}>
-                <ValueSelector />
-            </div>
+            </FormSection>
+            <FormSection title={i18n('label_filtration')}>
+                <InputTypeSelector className={b('row')} />
+                {!Utils.isEnabledFeature(Feature.ConnectionBasedControl) && (
+                    <OperationSelector className={b('row')} />
+                )}
+                <ValueSelector rowClassName={b('row')} />
+                {isTypeNotCheckbox && <RequiredValueCheckbox className={b('row')} />}
+            </FormSection>
+            <FormSection title={i18n('label_representation')}>
+                <TitleRow className={b('row')} />
+                {isTypeNotCheckbox && (
+                    <React.Fragment>
+                        <TitlePlacementRow className={b('row')} />
+                        <InnerTitleRow className={b('row')} />
+                        <ColorAccentRow className={b('row')} />
+                    </React.Fragment>
+                )}
+                <HintRow className={b('row')} />
+            </FormSection>
         </React.Fragment>
     );
 };
diff --git a/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx b/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx
index 1ff5c54c53..f6d943c470 100644
--- a/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx
+++ b/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
 
-import {HelpPopover} from '@gravity-ui/components';
 import {Gear} from '@gravity-ui/icons';
-import {Button, Checkbox, Icon} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
 import type {DashTabItemControlData, DashTabItemGroupControlData} from 'shared';
-import {
-    DashTabItemControlSourceType,
-    DashTabItemType,
-    DialogGroupControlQa,
-    TitlePlacementOption,
-} from 'shared';
-import {useEffectOnce} from 'ui/hooks';
+import {DashTabItemControlSourceType, DashTabItemType, DialogGroupControlQa} from 'shared';
+import {TabMenu} from 'ui/components/TabMenu/TabMenu';
+import type {TabMenuItemData, UpdateState} from 'ui/components/TabMenu/types';
+import {TabActionType} from 'ui/components/TabMenu/types';
 import {
     addSelectorToGroup,
     setActiveSelectorIndex,
@@ -30,10 +26,7 @@ import type {SelectorDialogState, SelectorsGroupDialogState} from 'ui/store/typi
 import type {CopiedConfigData} from 'ui/units/dash/modules/helpers';
 import {isItemPasteAllowed} from 'ui/units/dash/modules/helpers';
 
-import {TabMenu} from '../../DialogChartWidget/TabMenu/TabMenu';
-import type {TabMenuItemData, UpdateState} from '../../DialogChartWidget/TabMenu/types';
-import {TabActionType} from '../../DialogChartWidget/TabMenu/types';
-import {DIALOG_SELECTORS_PLACEMENT} from '../../DialogControlsPlacement/DialogControlsPlacement';
+import {DIALOG_EXTENDED_SETTINGS} from '../../DialogExtendedSettings/DialogExtendedSettings';
 
 import '../DialogGroupControl.scss';
 
@@ -92,8 +85,6 @@ export const GroupControlSidebar: React.FC<{
         selectorsGroup.group?.[0]?.title === i18n('label_default-tab', {index: 1}) ? 2 : 1;
     const [defaultTabIndex, setDefaultTabIndex] = React.useState(initialTabIndex);
 
-    const isMultipleSelectors = selectorsGroup.group?.length > 1;
-
     const updateSelectorsList = React.useCallback(
         ({items, selectedItemIndex, action}: UpdateState<SelectorDialogState>) => {
             if (action === TabActionType.Skipped) {
@@ -129,64 +120,17 @@ export const GroupControlSidebar: React.FC<{
         dispatch(closeDialog());
     }, [dispatch]);
 
-    const handleSelectorsPlacementClick = React.useCallback(() => {
+    const handleExtendedSettingsClick = React.useCallback(() => {
         dispatch(
             openDialog({
-                id: DIALOG_SELECTORS_PLACEMENT,
+                id: DIALOG_EXTENDED_SETTINGS,
                 props: {
                     onClose: handleClosePlacementDialog,
+                    enableAutoheightDefault,
                 },
             }),
         );
-    }, [dispatch, handleClosePlacementDialog]);
-
-    const handleChangeAutoHeight = React.useCallback(
-        (value) => {
-            dispatch(
-                updateSelectorsGroup({
-                    ...selectorsGroup,
-                    autoHeight: value,
-                }),
-            );
-        },
-        [dispatch, selectorsGroup],
-    );
-
-    const handleChangeButtonApply = React.useCallback(
-        (value) => {
-            dispatch(
-                updateSelectorsGroup({
-                    ...selectorsGroup,
-                    buttonApply: value,
-                }),
-            );
-        },
-        [dispatch, selectorsGroup],
-    );
-
-    const handleChangeButtonReset = React.useCallback(
-        (value) => {
-            dispatch(
-                updateSelectorsGroup({
-                    ...selectorsGroup,
-                    buttonReset: value,
-                }),
-            );
-        },
-        [dispatch, selectorsGroup],
-    );
-
-    const handleChangeUpdateControls = React.useCallback(
-        (value: boolean) => {
-            dispatch(
-                updateSelectorsGroup({
-                    ...selectorsGroup,
-                    updateControlsOnChange: value,
-                }),
-            );
-        },
-        [dispatch, selectorsGroup],
-    );
+    }, [dispatch, handleClosePlacementDialog, enableAutoheightDefault]);
 
     const handleUpdateItem = React.useCallback(
         (title: string) => {
@@ -199,22 +143,6 @@ export const GroupControlSidebar: React.FC<{
         [dispatch],
     );
 
-    useEffectOnce(() => {
-        if (enableAutoheightDefault) {
-            handleChangeAutoHeight(true);
-        }
-    });
-
-    const showAutoHeight =
-        (isMultipleSelectors ||
-            selectorsGroup.buttonApply ||
-            selectorsGroup.buttonReset ||
-            // until we have supported automatic height adjustment for case with top title placement,
-            // we allow to enable autoheight
-            selectorsGroup.group[0].titlePlacement === TitlePlacementOption.Top) &&
-        !enableAutoheightDefault;
-    const showUpdateControlsOnChange = selectorsGroup.buttonApply && isMultipleSelectors;
-
     return (
         <div className={b('sidebar')}>
             <div className={b('selectors-list')}>
@@ -228,85 +156,20 @@ export const GroupControlSidebar: React.FC<{
                     enableActionMenu={true}
                     onPasteItems={handlePasteItems}
                     canPasteItems={canPasteItems}
-                    addButtonView="outlined"
                     onCopyItem={handleCopyItem}
                     onUpdateItem={handleUpdateItem}
                 />
             </div>
             <div className={b('settings')}>
-                {showUpdateControlsOnChange && (
-                    <div className={b('settings-container')}>
-                        <div>
-                            <span>{i18n('label_update-controls-on-change')}</span>
-                            <HelpPopover
-                                className={b('help-icon')}
-                                htmlContent={i18n('context_update-controls-on-change')}
-                            />
-                        </div>
-                        <Checkbox
-                            checked={selectorsGroup.updateControlsOnChange}
-                            onUpdate={handleChangeUpdateControls}
-                            size="l"
-                            qa={DialogGroupControlQa.updateControlOnChangeCheckbox}
-                        />
-                    </div>
-                )}
-                {showAutoHeight && (
-                    <div className={b('settings-container')}>
-                        <div>
-                            <span>{i18n('label_autoheight-checkbox')}</span>
-                        </div>
-                        <Checkbox
-                            checked={selectorsGroup.autoHeight}
-                            onUpdate={handleChangeAutoHeight}
-                            size="l"
-                            qa={DialogGroupControlQa.autoHeightCheckbox}
-                        />
-                    </div>
-                )}
-                <div className={b('settings-container')}>
-                    <div>
-                        <span>{i18n('label_apply-button-checkbox')}</span>
-                        <HelpPopover
-                            className={b('help-icon')}
-                            htmlContent={i18n('context_apply-button')}
-                        />
-                    </div>
-                    <Checkbox
-                        checked={selectorsGroup.buttonApply}
-                        onUpdate={handleChangeButtonApply}
-                        size="l"
-                        qa={DialogGroupControlQa.applyButtonCheckbox}
-                    />
-                </div>
-                <div className={b('settings-container')}>
-                    <div>
-                        <span>{i18n('label_reset-button-checkbox')}</span>
-                        <HelpPopover
-                            className={b('help-icon')}
-                            htmlContent={i18n('context_reset-button')}
-                        />
-                    </div>
-                    <Checkbox
-                        checked={selectorsGroup.buttonReset}
-                        onUpdate={handleChangeButtonReset}
-                        size="l"
-                        qa={DialogGroupControlQa.resetButtonCheckbox}
-                    />
-                </div>
-
-                {isMultipleSelectors && (
-                    <Button
-                        view="outlined"
-                        width="max"
-                        className={b('order-selectors-button')}
-                        onClick={handleSelectorsPlacementClick}
-                        qa={DialogGroupControlQa.placementButton}
-                    >
-                        <Icon data={Gear} height={16} width={16} />
-                        {i18n('button_selectors-placement')}
-                    </Button>
-                )}
+                <Button
+                    className={b('extended-settings-button')}
+                    width="max"
+                    onClick={handleExtendedSettingsClick}
+                    qa={DialogGroupControlQa.extendedSettingsButton}
+                >
+                    <Icon data={Gear} height={16} width={16} />
+                    {i18n('button_extended-settings')}
+                </Button>
             </div>
         </div>
     );
diff --git a/src/ui/components/FormSection/FormSection.scss b/src/ui/components/FormSection/FormSection.scss
new file mode 100644
index 0000000000..b703a28799
--- /dev/null
+++ b/src/ui/components/FormSection/FormSection.scss
@@ -0,0 +1,10 @@
+.form-section {
+    &:not(:last-child) {
+        margin-block-end: var(--g-spacing-6);
+    }
+
+    &__title {
+        display: block;
+        margin-block-end: var(--g-spacing-4);
+    }
+}
diff --git a/src/ui/components/FormSection/FormSection.tsx b/src/ui/components/FormSection/FormSection.tsx
new file mode 100644
index 0000000000..8c9a51bb7f
--- /dev/null
+++ b/src/ui/components/FormSection/FormSection.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {Text} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import './FormSection.scss';
+
+export const b = block('form-section');
+
+interface FormSectionProps {
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function FormSection({title, children, className}: FormSectionProps) {
+    return (
+        <div className={b(null, className)}>
+            <Text className={b('title')} variant="subheader-2">
+                {title}
+            </Text>
+            {children}
+        </div>
+    );
+}
diff --git a/src/ui/components/ListWithMenu/ListWithMenu.tsx b/src/ui/components/ListWithMenu/ListWithMenu.tsx
index 06044dde68..9df93a9692 100644
--- a/src/ui/components/ListWithMenu/ListWithMenu.tsx
+++ b/src/ui/components/ListWithMenu/ListWithMenu.tsx
@@ -6,7 +6,7 @@ import {DropdownMenu, Icon, List} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import {DialogGroupControlQa, TabMenuQA} from 'shared';
-import {TabActionType} from 'ui/components/DialogChartWidget/TabMenu/types';
+import {TabActionType} from 'ui/components/TabMenu/types';
 import EditedTabItem from 'ui/units/dash/containers/Dialogs/Tabs/EditedTabItem';
 
 import './ListWithMenu.scss';
diff --git a/src/ui/components/TabMenu/TabMenu.scss b/src/ui/components/TabMenu/TabMenu.scss
new file mode 100644
index 0000000000..ea5df04e76
--- /dev/null
+++ b/src/ui/components/TabMenu/TabMenu.scss
@@ -0,0 +1,62 @@
+$class: '.tab-menu';
+
+#{$class} {
+    width: 100%;
+    max-height: 100%;
+    font-size: var(--g-text-body-1-font-size);
+
+    --_--tab-button-outlined-padding: var(--g-spacing-2);
+    --_--tab-button-add-height: calc(var(--_--tab-button-outlined-padding) * 2 + 28px);
+
+    &__list-item {
+        padding: 0 var(--dialog-sidebar-horizontal-padding, var(--g-spacing-6));
+    }
+
+    &__item {
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+        height: 40px;
+        width: 100%;
+        cursor: pointer;
+        justify-content: space-between;
+    }
+
+    &__item-star {
+        margin-inline-end: var(--g-spacing-2);
+        line-height: 0;
+    }
+
+    &__item-star-inactive {
+        color: var(--g-color-text-secondary);
+    }
+
+    &__item-star-active {
+        color: var(--g-color-base-misc-heavy-hover);
+    }
+
+    &__item-text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 160px;
+    }
+
+    &__item-content {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    &__list {
+        height: calc(100% - var(--_--tab-button-add-height));
+        overflow-y: auto;
+    }
+
+    &__buttons-row {
+        display: flex;
+        padding: var(--_--tab-button-outlined-padding)
+            var(--dialog-sidebar-horizontal-padding, var(--g-spacing-6));
+        gap: var(--g-spacing-2);
+    }
+}
diff --git a/src/ui/components/DialogChartWidget/TabMenu/TabMenu.tsx b/src/ui/components/TabMenu/TabMenu.tsx
similarity index 91%
rename from src/ui/components/DialogChartWidget/TabMenu/TabMenu.tsx
rename to src/ui/components/TabMenu/TabMenu.tsx
index a974e91e37..463d46a96e 100644
--- a/src/ui/components/DialogChartWidget/TabMenu/TabMenu.tsx
+++ b/src/ui/components/TabMenu/TabMenu.tsx
@@ -28,7 +28,6 @@ export const TabMenu = <T extends unknown>({
     enableActionMenu,
     items,
     selectedItemIndex,
-    addButtonView = 'flat',
     onUpdate,
     defaultTabText,
     onPasteItems,
@@ -226,29 +225,12 @@ export const TabMenu = <T extends unknown>({
     };
 
     const renderButtons = () => {
-        if (addButtonView === 'flat') {
-            return (
-                <div className={b('buttons-row', {flat: true})}>
-                    <div
-                        className={b('action-button')}
-                        onClick={onAction({action: TabActionType.Add})}
-                        data-qa={TabMenuQA.Add}
-                    >
-                        <Icon
-                            data={Plus}
-                            className={b('action-button-icon', tabIconMixin)}
-                            width={ADD_BUTTON_DEFAULT_SIZE}
-                        />
-                        <span>
-                            {addButtonText || i18n('dash.widget-dialog.edit', 'button_add')}
-                        </span>
-                    </div>
-                </div>
-            );
-        }
-
+        const addBtnText =
+            !pasteConfig && addButtonText
+                ? addButtonText
+                : i18n('dash.widget-dialog.edit', 'button_add');
         return (
-            <div className={b('buttons-row', {outlined: true})}>
+            <div className={b('buttons-row')}>
                 <Button
                     className={b('action-button')}
                     onClick={onAction({action: TabActionType.Add})}
@@ -261,7 +243,7 @@ export const TabMenu = <T extends unknown>({
                         className={b('action-button-icon', tabIconMixin)}
                         width={ADD_BUTTON_DEFAULT_SIZE}
                     />
-                    <span>{addButtonText || i18n('dash.widget-dialog.edit', 'button_add')}</span>
+                    <span>{addBtnText}</span>
                 </Button>
                 {pasteConfig && (
                     <Button
@@ -374,7 +356,7 @@ export const TabMenu = <T extends unknown>({
     };
 
     return (
-        <div className={b({view: addButtonView})}>
+        <div className={b()}>
             {enableActionMenu
                 ? renderListWithMenu(items, selectedItemIndex, onUpdateItem)
                 : renderListWithRemove(items, selectedItemIndex)}
diff --git a/src/ui/components/DialogChartWidget/TabMenu/types.ts b/src/ui/components/TabMenu/types.ts
similarity index 97%
rename from src/ui/components/DialogChartWidget/TabMenu/types.ts
rename to src/ui/components/TabMenu/types.ts
index 250c81da7a..3633751e82 100644
--- a/src/ui/components/DialogChartWidget/TabMenu/types.ts
+++ b/src/ui/components/TabMenu/types.ts
@@ -34,7 +34,6 @@ export type TabMenuProps<T> = {
     tabIconMixin?: string;
     onPasteItems?: (pasteConfig: CopiedConfigData | null) => null | TabMenuItemData<T>[];
     canPasteItems?: (pasteConfig: CopiedConfigData | null, workbooId?: string | null) => boolean;
-    addButtonView?: 'flat' | 'outlined';
     onCopyItem?: (itemIndex: number) => void;
 } & (TabsWithMenu | TabsWithRemove);
 
diff --git a/src/ui/store/actions/openDialogTypes.ts b/src/ui/store/actions/openDialogTypes.ts
index 4feb1f6857..2b3f0f5d51 100644
--- a/src/ui/store/actions/openDialogTypes.ts
+++ b/src/ui/store/actions/openDialogTypes.ts
@@ -42,7 +42,7 @@ import type {OpenDialogQLParameterArgs} from '../../components/DialogQLParameter
 import type {OpenDialogSelectMigrationToWorkbookArgs} from '../../components/SelectMigrationToWorkbookDialog/SelectMigrationToWorkbookDialog';
 import type {OpenDialogMigrateToWorkbookArgs} from '../../components/MigrateToWorkbookDialog/MigrateToWorkbookDialog';
 import type {OpenDialogLabelSettingsArgs} from '../../units/wizard/components/Dialogs/DialogLabelSettings/DialogLabelSettings';
-import type {OpenDialogControlsPlacementArgs} from '../../components/DialogControlsPlacement/DialogControlsPlacement';
+import type {OpenDialogExtendedSettingsArgs} from '../../components/DialogExtendedSettings/DialogExtendedSettings';
 import type {OpenDialogCopyEntriesToWorkbookArgs} from '../../components/CopyEntriesToWorkbookDialog/CopyEntriesToWorkbookDialog';
 import type {OpenDialogConnAddYadocArgs} from '../../units/connections/components/custom-forms/Yadocs/components/DialogAddDocument/DialogAddDocument';
 import type {OpenDialogEditQueryArgs} from '../../units/dash/containers/Dialogs/DialogEditQuery/DialogEditQuery';
@@ -91,7 +91,7 @@ export type OpenDialogArgs<T = unknown> =
     | OpenDialogMoveCollectionArgs
     | OpenDialogMoveWorkbookArgs
     | OpenDialogCopyWorkbookArgs
-    | OpenDialogControlsPlacementArgs
+    | OpenDialogExtendedSettingsArgs
     | OpenDialogLabelSettingsArgs
     | OpenDialogEditWorkbookArgs
     | OpenDialogEditCollectionArgs
diff --git a/src/ui/store/reducers/controlDialog.ts b/src/ui/store/reducers/controlDialog.ts
index d234785274..6a17fac97a 100644
--- a/src/ui/store/reducers/controlDialog.ts
+++ b/src/ui/store/reducers/controlDialog.ts
@@ -5,7 +5,7 @@ import type {
     EntryScope,
     StringParams,
 } from 'shared';
-import {DashTabItemControlSourceType, DashTabItemType, TitlePlacementOption} from 'shared';
+import {DashTabItemControlSourceType, DashTabItemType, TitlePlacements} from 'shared';
 import type {SelectorDialogState, SelectorsGroupDialogState} from '../typings/controlDialog';
 import {getRandomKey} from 'ui/libs/DatalensChartkit/helpers/helpers';
 import {CONTROLS_PLACEMENT_MODE} from 'ui/constants/dialogs';
@@ -76,8 +76,7 @@ export function getSelectorDialogInitialState(
         defaults: {},
         datasetId: args.lastUsedDatasetId,
         connectionId: args.lastUsedConnectionId,
-        showTitle: true,
-        titlePlacement: TitlePlacementOption.Left,
+        titlePlacement: TitlePlacements.Left,
         accentType: null,
         placementMode: CONTROLS_PLACEMENT_MODE.AUTO,
         width: '',
@@ -134,8 +133,10 @@ export function getSelectorDialogFromData(
         elementType: data.source.elementType || ELEMENT_TYPE.SELECT,
         defaultValue: data.source.defaultValue,
         datasetFieldId: data.source.datasetFieldId,
-        showTitle: data.source.showTitle,
-        titlePlacement: data.source.titlePlacement,
+        titlePlacement:
+            data.source.showTitle === false || data.source.titlePlacement === TitlePlacements.Hide
+                ? TitlePlacements.Hide
+                : data.source.titlePlacement,
         accentType: data.source.accentType,
         multiselectable: data.source.multiselectable,
         isRange: data.source.isRange,
diff --git a/src/ui/store/typings/controlDialog.ts b/src/ui/store/typings/controlDialog.ts
index 88924ed132..04f2bd6db0 100644
--- a/src/ui/store/typings/controlDialog.ts
+++ b/src/ui/store/typings/controlDialog.ts
@@ -9,6 +9,7 @@ import type {
     Dataset,
     DatasetFieldType,
     StringParams,
+    TitlePlacement,
     TitlePlacementOption,
 } from 'shared/types';
 
@@ -72,13 +73,12 @@ export type AcceptableValue = {
 
 export type SelectorDialogState = {
     title?: string;
-    titlePlacement?: TitlePlacementOption;
+    titlePlacement?: TitlePlacement;
 
     innerTitle?: string;
     sourceType?: SelectorSourceType;
     autoHeight?: boolean;
     chartId?: string;
-    showTitle?: boolean;
     showInnerTitle?: boolean;
     elementType: SelectorElementType;
     defaultValue?: string | string[];
diff --git a/src/ui/store/utils/controlDialog.ts b/src/ui/store/utils/controlDialog.ts
index 026e6d608c..b310a99dec 100644
--- a/src/ui/store/utils/controlDialog.ts
+++ b/src/ui/store/utils/controlDialog.ts
@@ -1,6 +1,6 @@
 import type {StringParams} from '@gravity-ui/chartkit/highcharts';
 import {i18n} from 'i18n';
-import {DashTabItemControlSourceType} from 'shared/types';
+import {DashTabItemControlSourceType, TitlePlacements} from 'shared/types';
 import type {
     ItemDataSource,
     SelectorDialogState,
@@ -207,7 +207,6 @@ export const getItemDataSource = (selectorDialog: SelectorDialogState): ItemData
 
         titlePlacement,
         accentType,
-        showTitle,
         showInnerTitle,
         innerTitle,
         showHint,
@@ -238,8 +237,11 @@ export const getItemDataSource = (selectorDialog: SelectorDialogState): ItemData
     }
 
     let source: ItemDataSource = {
-        showTitle,
-        titlePlacement: elementType === ELEMENT_TYPE.CHECKBOX ? undefined : titlePlacement,
+        showTitle: titlePlacement !== TitlePlacements.Hide,
+        titlePlacement:
+            elementType === ELEMENT_TYPE.CHECKBOX || titlePlacement === TitlePlacements.Hide
+                ? undefined
+                : titlePlacement,
         elementType,
         defaultValue,
         showInnerTitle,
diff --git a/tests/opensource-suites/dash/selectors/externalInfluencesOnGroup.test.ts b/tests/opensource-suites/dash/selectors/externalInfluencesOnGroup.test.ts
index e6b9fa76a9..ab5acf00e3 100644
--- a/tests/opensource-suites/dash/selectors/externalInfluencesOnGroup.test.ts
+++ b/tests/opensource-suites/dash/selectors/externalInfluencesOnGroup.test.ts
@@ -244,6 +244,8 @@ datalensTest.describe(
                 await expect(firstControlValue).toEqual(PARAMS.INPUT_TEXT_VALUE);
                 await expect(secondControlValue).toEqual(PARAMS.SIDE_TEXT_VALUE);
 
+                await page.waitForResponse(CommonUrls.CreateDashState);
+
                 // disable autoupdate in group
                 await dashboardPage.disableAutoupdateInFirstControl();
 
diff --git a/tests/opensource-suites/dash/selectors/groupBaseActions.test.ts b/tests/opensource-suites/dash/selectors/groupBaseActions.test.ts
index ef4b6cd62b..5ef63dfc4e 100644
--- a/tests/opensource-suites/dash/selectors/groupBaseActions.test.ts
+++ b/tests/opensource-suites/dash/selectors/groupBaseActions.test.ts
@@ -133,7 +133,7 @@ datalensTest.describe('Dashboards - Base actions with group selectors', () => {
             await dashboardPage.enterEditMode();
             await dashboardPage.clickFirstControlSettingsButton();
             await dashboardPage.controlActions.waitForDialog();
-            await page.locator(slct(DialogGroupControlQa.placementButton)).click();
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsButton)).click();
 
             // the controls of placement prevent you from clicking on the middle of item, so
             // moveXRation is 3 (x position of click is width of item / 3)
@@ -144,7 +144,7 @@ datalensTest.describe('Dashboards - Base actions with group selectors', () => {
                 moveXRation: 3,
             });
 
-            await page.locator(slct(DialogGroupControlQa.placementApplyButton)).click();
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsApplyButton)).click();
 
             await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
 
diff --git a/tests/opensource-suites/dash/selectors/groupButtonActions.test.ts b/tests/opensource-suites/dash/selectors/groupButtonActions.test.ts
index bfe3ed8763..c0471fb757 100644
--- a/tests/opensource-suites/dash/selectors/groupButtonActions.test.ts
+++ b/tests/opensource-suites/dash/selectors/groupButtonActions.test.ts
@@ -52,7 +52,9 @@ datalensTest.describe('Dashboards - Action buttons in group selectors', () => {
         async ({page}: {page: Page}) => {
             const dashboardPage = new DashboardPage({page});
 
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsButton)).click();
             await page.locator(slct(DialogGroupControlQa.applyButtonCheckbox)).click();
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsApplyButton)).click();
 
             await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
             await dashboardPage.saveChanges();
@@ -99,7 +101,9 @@ datalensTest.describe('Dashboards - Action buttons in group selectors', () => {
         async ({page}: {page: Page}) => {
             const dashboardPage = new DashboardPage({page});
 
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsButton)).click();
             await page.locator(slct(DialogGroupControlQa.resetButtonCheckbox)).click();
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsApplyButton)).click();
 
             await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
             await dashboardPage.saveChanges();
@@ -162,8 +166,10 @@ datalensTest.describe('Dashboards - Action buttons in group selectors', () => {
             const dashboardPage = new DashboardPage({page});
             let stateUpdatesCount = 0;
 
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsButton)).click();
             await page.locator(slct(DialogGroupControlQa.applyButtonCheckbox)).click();
             await page.locator(slct(DialogGroupControlQa.resetButtonCheckbox)).click();
+            await page.locator(slct(DialogGroupControlQa.extendedSettingsApplyButton)).click();
 
             await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
             await dashboardPage.saveChanges();
diff --git a/tests/opensource-suites/dash/selectors/selectorsLabels.test.ts b/tests/opensource-suites/dash/selectors/selectorsLabels.test.ts
index 7a7948219b..6485014cbd 100644
--- a/tests/opensource-suites/dash/selectors/selectorsLabels.test.ts
+++ b/tests/opensource-suites/dash/selectors/selectorsLabels.test.ts
@@ -3,7 +3,7 @@ import {Page} from '@playwright/test';
 import DashboardPage from '../../../page-objects/dashboard/DashboardPage';
 
 import datalensTest from '../../../utils/playwright/globalTestDefinition';
-import {DashTabItemControlSourceType} from '../../../../src/shared';
+import {DashTabItemControlSourceType, TitlePlacements} from '../../../../src/shared';
 import {
     SelectorElementType,
     type SelectorSettings,
@@ -26,7 +26,7 @@ const createDashWithSelector = async ({
             await dashboardPage.controlActions.addSelectorWithDefaultSettings({
                 ...{
                     appearance: {
-                        titleEnabled: true,
+                        titlePlacement: TitlePlacements.Left,
                         title: TITLE,
                         innerTitleEnabled: true,
                         innerTitle: INNER_TITLE,
diff --git a/tests/page-objects/common/DialogControlPO/AppearanceTitle.ts b/tests/page-objects/common/DialogControlPO/AppearanceTitle.ts
index d8454540c7..e503cfb551 100644
--- a/tests/page-objects/common/DialogControlPO/AppearanceTitle.ts
+++ b/tests/page-objects/common/DialogControlPO/AppearanceTitle.ts
@@ -2,13 +2,13 @@ import {Page} from '@playwright/test';
 import {slct} from '../../../utils';
 
 import {ControlQA, DialogControlQa} from '../../../../src/shared/constants/qa/control';
-import {CheckboxElementPO} from '../abstract/CheckboxElementPO';
 import {ElementPO} from '../abstract/ElementPO';
 import {TextInputElementPO} from '../abstract/TextInputElementPO';
+import {RadioGroupElementPO} from '../abstract/RadioGroupElementPO';
 
 export class AppearanceTitle extends ElementPO {
     textInput: TextInputElementPO;
-    checkbox: CheckboxElementPO;
+    radioGroup: RadioGroupElementPO;
 
     constructor(page: Page) {
         super({page, selectors: {root: slct(DialogControlQa.appearanceTitle)}});
@@ -16,9 +16,9 @@ export class AppearanceTitle extends ElementPO {
             page,
             selectors: {root: slct(ControlQA.inputNameControl)},
         });
-        this.checkbox = new CheckboxElementPO({
+        this.radioGroup = new RadioGroupElementPO({
             page,
-            selectors: {root: slct(ControlQA.showLabelCheckbox)},
+            selectors: {root: slct(DialogControlQa.appearanceTitlePlacement)},
         });
     }
 }
diff --git a/tests/page-objects/common/abstract/RadioGroupElementPO.ts b/tests/page-objects/common/abstract/RadioGroupElementPO.ts
index 27fa27b294..a1bc5e120d 100644
--- a/tests/page-objects/common/abstract/RadioGroupElementPO.ts
+++ b/tests/page-objects/common/abstract/RadioGroupElementPO.ts
@@ -2,7 +2,6 @@ import {ElementPO} from './ElementPO';
 
 export class RadioGroupElementPO extends ElementPO {
     async selectByName(name: string) {
-        await this.expectVisible();
         await this.page.locator(`${this.getSelector()} input[value="${name}"]`).click();
     }
 }
diff --git a/tests/page-objects/dashboard/ControlActions.ts b/tests/page-objects/dashboard/ControlActions.ts
index 74dc57ccad..beb81fbaf2 100644
--- a/tests/page-objects/dashboard/ControlActions.ts
+++ b/tests/page-objects/dashboard/ControlActions.ts
@@ -14,7 +14,12 @@ import {clickGSelectOption, fillDatePicker, getControlByTitle, slct} from '../..
 
 import {BasePageProps} from '../BasePage';
 
-import {DashTabItemControlSourceType, DialogControlQa} from '../../../src/shared';
+import {
+    DashTabItemControlSourceType,
+    DialogControlQa,
+    TitlePlacement,
+    TitlePlacements,
+} from '../../../src/shared';
 
 import {
     DashboardAddWidgetQa,
@@ -38,7 +43,7 @@ export type SelectorSettings = {
     elementType?: SelectorElementType;
     appearance?: {
         title?: string;
-        titleEnabled?: boolean;
+        titlePlacement?: TitlePlacement;
         innerTitle?: string;
         innerTitleEnabled?: boolean;
     };
@@ -156,6 +161,7 @@ class ControlActions {
         }
 
         if (options && options.buttonApply) {
+            await this.page.locator(slct(DialogGroupControlQa.extendedSettingsButton)).click();
             await this.page
                 .locator(`${slct(DialogGroupControlQa.applyButtonCheckbox)} input`)
                 .setChecked(true);
@@ -163,6 +169,8 @@ class ControlActions {
             await this.page
                 .locator(`${slct(DialogGroupControlQa.updateControlOnChangeCheckbox)} input`)
                 .setChecked(Boolean(options?.updateControlOnChange));
+
+            await this.page.locator(slct(DialogGroupControlQa.extendedSettingsApplyButton)).click();
         }
 
         // adding a selector to the dashboard
@@ -278,9 +286,9 @@ class ControlActions {
             await this.selectElementType(setting.elementType);
         }
 
-        if (typeof setting.appearance?.titleEnabled === 'boolean') {
-            await this.dialogControl.appearanceTitle.checkbox.toggle(
-                setting.appearance.titleEnabled,
+        if (setting.appearance?.titlePlacement) {
+            await this.dialogControl.appearanceTitle.radioGroup.selectByName(
+                setting.appearance.titlePlacement,
             );
         }
 
@@ -315,7 +323,7 @@ class ControlActions {
     async addSelectorWithDefaultSettings(setting: SelectorSettings = {}) {
         const defaultSettings: SelectorSettings = {
             sourceType: DashTabItemControlSourceType.Dataset,
-            appearance: {titleEnabled: true},
+            appearance: {titlePlacement: TitlePlacements.Left},
             dataset: {idx: 0},
             datasetField: {idx: 0},
         };
diff --git a/tests/page-objects/dashboard/DashboardPage.ts b/tests/page-objects/dashboard/DashboardPage.ts
index ebf231a0ef..7e222fd37e 100644
--- a/tests/page-objects/dashboard/DashboardPage.ts
+++ b/tests/page-objects/dashboard/DashboardPage.ts
@@ -988,9 +988,11 @@ class DashboardPage extends BasePage {
     async disableAutoupdateInFirstControl() {
         await this.enterEditMode();
         await this.clickFirstControlSettingsButton();
+        await this.page.locator(slct(DialogGroupControlQa.extendedSettingsButton)).click();
         await this.page
             .locator(`${slct(DialogGroupControlQa.updateControlOnChangeCheckbox)} input`)
             .setChecked(false);
+        await this.page.locator(slct(DialogGroupControlQa.extendedSettingsApplyButton)).click();
         await this.controlActions.applyControlSettings();
         await this.saveChanges();
     }
diff --git a/tests/suites/dash/selectors/selectorsLabels.test.ts b/tests/suites/dash/selectors/selectorsLabels.test.ts
index 326ef9914a..c9243ea239 100644
--- a/tests/suites/dash/selectors/selectorsLabels.test.ts
+++ b/tests/suites/dash/selectors/selectorsLabels.test.ts
@@ -6,7 +6,7 @@ import {getUniqueTimestamp, openTestPage, slct} from '../../../utils';
 import {ControlQA} from '../../../../src/shared/constants';
 import {COMMON_SELECTORS, RobotChartsDashboardUrls} from '../../../utils/constants';
 import datalensTest from '../../../utils/playwright/globalTestDefinition';
-import {DashTabItemControlSourceType} from '../../../../src/shared';
+import {DashTabItemControlSourceType, TitlePlacements} from '../../../../src/shared';
 
 const PARAMS = {
     DATASET: {
@@ -51,7 +51,7 @@ async function checkLabels(
     await dashboardPage.controlActions.editSelectorBySettings({
         appearance: {
             title,
-            titleEnabled: true,
+            titlePlacement: TitlePlacements.Left,
             innerTitle,
             innerTitleEnabled: true,
         },

From 0121f461ef5fcea4603cd56e4eac41e791a585c8 Mon Sep 17 00:00:00 2001
From: Andrey Melikhov <melikhov@yandex-team.ru>
Date: Wed, 25 Dec 2024 14:04:25 +0300
Subject: [PATCH 05/18] Add headers for dataset request (#1974)

---
 .../components/processor/data-fetcher.ts      | 16 +++++++---------
 .../middlewareAdapters/charts-with-dataset.ts |  7 +++----
 .../controls-with-dataset.ts                  |  7 +++----
 .../request-with-dataset/request-dataset.ts   | 19 +++++++++----------
 src/server/modes/charts/plugins/types.ts      |  6 +++++-
 5 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/server/components/charts-engine/components/processor/data-fetcher.ts b/src/server/components/charts-engine/components/processor/data-fetcher.ts
index f9a757babd..b7f0ab17ab 100644
--- a/src/server/components/charts-engine/components/processor/data-fetcher.ts
+++ b/src/server/components/charts-engine/components/processor/data-fetcher.ts
@@ -158,7 +158,7 @@ export function addZitadelHeaders({
     headers,
     zitadelParams,
 }: {
-    headers: IncomingHttpHeaders;
+    headers: OutgoingHttpHeaders;
     zitadelParams: ZitadelParams;
 }) {
     if (zitadelParams?.accessToken) {
@@ -237,7 +237,6 @@ export class DataFetcher {
                 fetchPromisesList.push(() =>
                     source
                         ? DataFetcher.fetchSource({
-                              req,
                               ctx,
                               sourceName,
                               source: isString(source) ? {url: source} : source,
@@ -458,7 +457,6 @@ export class DataFetcher {
     private static async fetchSource({
         sourceName,
         source,
-        req,
         ctx,
         chartsEngine,
         fetchingStartTime,
@@ -476,7 +474,6 @@ export class DataFetcher {
     }: {
         sourceName: string;
         source: Source;
-        req: Request;
         ctx: AppContext;
         chartsEngine: ChartsEngine;
         fetchingStartTime: number;
@@ -786,6 +783,10 @@ export class DataFetcher {
             requestOptions.headers['x-forwarded-for'] = originalReqHeaders.xForwardedFor;
         }
 
+        if (!requestOptions.headers['x-real-ip']) {
+            requestOptions.headers['x-real-ip'] = originalReqHeaders.xRealIP;
+        }
+
         if (isSourceWithMiddlewareUrl(source)) {
             const middlewareSourceConfig = DataFetcher.getSourceConfig({
                 chartsEngine,
@@ -794,15 +795,16 @@ export class DataFetcher {
 
             if (middlewareSourceConfig?.middlewareAdapter) {
                 source = await middlewareSourceConfig.middlewareAdapter({
+                    ctx,
                     source,
                     sourceName,
-                    req,
                     iamToken: iamToken ?? undefined,
                     workbookId,
                     ChartsEngine: chartsEngine,
                     userId: userId === undefined ? null : userId,
                     rejectFetchingSource,
                     zitadelParams,
+                    requestHeaders: requestOptions.headers,
                 });
             }
         }
@@ -824,10 +826,6 @@ export class DataFetcher {
         const publicTargetUri = hideSensitiveData(targetUri);
         const publicSourceData = hideSensitiveData(sourceData);
 
-        if (!requestOptions.headers['x-real-ip']) {
-            requestOptions.headers['x-real-ip'] = originalReqHeaders.xRealIP;
-        }
-
         const traceId = ctx.getTraceId();
         const tenantId = ctx.get('tenantId');
 
diff --git a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts
index 9fb132d35c..78a5f34e11 100644
--- a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts
+++ b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/charts-with-dataset.ts
@@ -13,9 +13,9 @@ export default async (
     },
 ) => {
     const {
+        ctx,
         source,
         sourceName,
-        req,
         ChartsEngine,
         userId,
         iamToken,
@@ -23,10 +23,9 @@ export default async (
         rejectFetchingSource,
         pluginOptions,
         zitadelParams,
+        requestHeaders,
     } = args;
 
-    const ctx = req.ctx;
-
     const cacheClient = ChartsEngine.cacheClient as Cache;
 
     const [datasetId, layerId] = getDatasetIdAndLayerIdFromKey(sourceName);
@@ -49,7 +48,6 @@ export default async (
         const datasetFieldsResponse = await getDatasetFields({
             datasetId,
             workbookId: workbookId ?? null,
-            req,
             ctx,
             cacheClient,
             userId,
@@ -57,6 +55,7 @@ export default async (
             rejectFetchingSource,
             pluginOptions,
             zitadelParams,
+            requestHeaders,
         });
 
         revisionId = datasetFieldsResponse.revisionId;
diff --git a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts
index 6ffa3d4d16..9573d551e8 100644
--- a/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts
+++ b/src/server/modes/charts/plugins/request-with-dataset/middlewareAdapters/controls-with-dataset.ts
@@ -11,8 +11,8 @@ export default async (
     },
 ) => {
     const {
+        ctx,
         source,
-        req,
         ChartsEngine,
         userId,
         iamToken,
@@ -20,10 +20,9 @@ export default async (
         rejectFetchingSource,
         pluginOptions,
         zitadelParams,
+        requestHeaders,
     } = args;
 
-    const ctx = req.ctx;
-
     const cacheClient = ChartsEngine.cacheClient as Cache;
 
     const datasetId = source.datasetId || '';
@@ -31,7 +30,6 @@ export default async (
     const datasetFieldsResponse = await getDatasetFields({
         datasetId,
         workbookId: workbookId ?? null,
-        req,
         ctx,
         cacheClient,
         userId,
@@ -39,6 +37,7 @@ export default async (
         rejectFetchingSource,
         pluginOptions,
         zitadelParams,
+        requestHeaders,
     });
 
     const datasetFields = datasetFieldsResponse.datasetFields;
diff --git a/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts b/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts
index 40b6c28ef3..895dbad513 100644
--- a/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts
+++ b/src/server/modes/charts/plugins/request-with-dataset/request-dataset.ts
@@ -1,4 +1,5 @@
-import type {Request} from '@gravity-ui/expresskit';
+import type {OutgoingHttpHeaders} from 'http';
+
 import type {AppContext} from '@gravity-ui/nodekit';
 import {REQUEST_ID_PARAM_NAME} from '@gravity-ui/nodekit';
 import {isObject} from 'lodash';
@@ -25,21 +26,21 @@ const getStatusFromError = (error: unknown) =>
 const getDatasetFieldsById = async ({
     datasetId,
     workbookId,
-    req,
     ctx,
     rejectFetchingSource,
     iamToken,
     pluginOptions,
     zitadelParams,
+    headers,
 }: {
     datasetId: string;
     workbookId: string | null;
-    req: Request;
     ctx: AppContext;
     rejectFetchingSource: (reason?: any) => void;
     iamToken?: string;
     pluginOptions?: ConfigurableRequestWithDatasetPluginOptions;
     zitadelParams: ZitadelParams | undefined;
+    headers: OutgoingHttpHeaders;
 }): Promise<GetDataSetFieldsByIdResponse> => {
     const {gatewayApi} = registry.getGatewayApi<DatalensGatewaySchemas>();
 
@@ -48,13 +49,11 @@ const getDatasetFieldsById = async ({
 
     const requestDatasetFieldsByToken = gatewayApi.bi.embedsGetDataSetFieldsById;
     try {
-        const headers = {...req.headers};
-
         if (zitadelParams) {
             addZitadelHeaders({headers, zitadelParams});
         }
 
-        const response = req.headers[DL_EMBED_TOKEN_HEADER]
+        const response = headers[DL_EMBED_TOKEN_HEADER]
             ? await requestDatasetFieldsByToken({
                   ctx,
                   headers,
@@ -98,7 +97,6 @@ const getDatasetFieldsById = async ({
 export const getDatasetFields = async (args: {
     datasetId: string;
     workbookId: WorkbookId;
-    req: Request;
     ctx: AppContext;
     iamToken?: string;
     cacheClient: Cache;
@@ -106,18 +104,19 @@ export const getDatasetFields = async (args: {
     rejectFetchingSource: (reason: any) => void;
     pluginOptions?: ConfigurableRequestWithDatasetPluginOptions;
     zitadelParams: ZitadelParams | undefined;
+    requestHeaders: OutgoingHttpHeaders;
 }): Promise<{datasetFields: PartialDatasetField[]; revisionId: string}> => {
     const {
         datasetId,
         workbookId,
         cacheClient,
-        req,
         ctx,
         userId,
         iamToken,
         rejectFetchingSource,
         pluginOptions,
         zitadelParams,
+        requestHeaders,
     } = args;
 
     const cacheKey = `${datasetId}__${userId}`;
@@ -140,12 +139,12 @@ export const getDatasetFields = async (args: {
             const response = await getDatasetFieldsById({
                 datasetId,
                 workbookId,
-                req,
                 ctx,
                 rejectFetchingSource,
                 iamToken,
                 pluginOptions,
                 zitadelParams,
+                headers: requestHeaders,
             });
             datasetFields = response.fields;
             revisionId = response.revision_id;
@@ -173,12 +172,12 @@ export const getDatasetFields = async (args: {
         const response = await getDatasetFieldsById({
             datasetId,
             workbookId,
-            req,
             ctx,
             rejectFetchingSource,
             iamToken,
             pluginOptions,
             zitadelParams,
+            headers: requestHeaders,
         });
         datasetFields = response.fields;
         revisionId = response.revision_id;
diff --git a/src/server/modes/charts/plugins/types.ts b/src/server/modes/charts/plugins/types.ts
index 33cfdefe7a..f05abe61b2 100644
--- a/src/server/modes/charts/plugins/types.ts
+++ b/src/server/modes/charts/plugins/types.ts
@@ -1,4 +1,7 @@
+import type {OutgoingHttpHeaders} from 'http';
+
 import type {Request} from '@gravity-ui/expresskit';
+import type {AppContext} from '@gravity-ui/nodekit';
 
 import type {WorkbookId} from '../../../../shared';
 import type {ChartsEngine} from '../../../components/charts-engine';
@@ -42,19 +45,20 @@ export interface MiddlewareUrl {
 }
 
 export interface MiddlewareSourceAdapterArgs {
+    ctx: AppContext;
     sourceName: string;
     source: {
         sourceArgs: SourcesArgs;
         middlewareUrl: MiddlewareUrl;
         datasetId?: string;
     };
-    req: Request;
     iamToken?: string;
     workbookId?: WorkbookId;
     ChartsEngine: ChartsEngine;
     userId: string | null;
     rejectFetchingSource: (reason: any) => void;
     zitadelParams: ZitadelParams | undefined;
+    requestHeaders: OutgoingHttpHeaders;
 }
 
 export interface ProcessorHookInitArgs {

From 3b2c27216a5dc07b4aa008b578afe34689163ce6 Mon Sep 17 00:00:00 2001
From: Irina Kuzmina <kuzmadom@yandex-team.ru>
Date: Thu, 26 Dec 2024 11:26:17 +0300
Subject: [PATCH 06/18] Add some attributes to the allowed list (#1976)

---
 .../libs/DatalensChartkit/modules/html-generator/constants.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ui/libs/DatalensChartkit/modules/html-generator/constants.ts b/src/ui/libs/DatalensChartkit/modules/html-generator/constants.ts
index 1955612ad7..e5bbea11d8 100644
--- a/src/ui/libs/DatalensChartkit/modules/html-generator/constants.ts
+++ b/src/ui/libs/DatalensChartkit/modules/html-generator/constants.ts
@@ -99,6 +99,7 @@ export const ALLOWED_ATTRIBUTES = [
     'clip-rule',
     'color',
     'colspan',
+    'cursor',
     'cx',
     'cy',
     'd',
@@ -120,6 +121,8 @@ export const ALLOWED_ATTRIBUTES = [
     'opacity',
     'orient',
     'padding',
+    'paint-order',
+    'pointer-events',
     'points',
     'r',
     'refX',
@@ -133,6 +136,7 @@ export const ALLOWED_ATTRIBUTES = [
     'stroke',
     'stroke-linecap',
     'stroke-linejoin',
+    'stroke-opacity',
     'stroke-width',
     'result',
     'rowspan',

From eb490a18997e7ec45f7630fed8de4720f54f5ce0 Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Thu, 26 Dec 2024 11:29:00 +0300
Subject: [PATCH 07/18] Controls groups title (#1975)

---
 src/shared/types/dash.ts                      |  2 +
 .../plugins/GroupControl/GroupControl.scss    |  5 +++
 .../plugins/GroupControl/GroupControl.tsx     |  7 ++-
 .../DialogExtendedSettings.tsx                | 45 ++++++++++++++++++-
 .../DialogGroupControl/DialogGroupControl.tsx |  3 ++
 .../GroupControlSidebar.tsx                   |  4 +-
 src/ui/store/actions/controlDialog.ts         |  2 +
 src/ui/store/reducers/controlDialog.ts        | 14 +++++-
 src/ui/store/typings/controlDialog.ts         |  2 +
 9 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/src/shared/types/dash.ts b/src/shared/types/dash.ts
index 25fd0c01ad..d348b78aa7 100644
--- a/src/shared/types/dash.ts
+++ b/src/shared/types/dash.ts
@@ -302,6 +302,8 @@ export interface DashTabItemGroupControl extends DashTabItemBase {
 }
 
 export interface DashTabItemGroupControlData {
+    showGroupName: boolean;
+    groupName?: string;
     autoHeight: boolean;
     buttonApply: boolean;
     buttonReset: boolean;
diff --git a/src/ui/components/DashKit/plugins/GroupControl/GroupControl.scss b/src/ui/components/DashKit/plugins/GroupControl/GroupControl.scss
index a597d7569c..a2e7c6bf90 100644
--- a/src/ui/components/DashKit/plugins/GroupControl/GroupControl.scss
+++ b/src/ui/components/DashKit/plugins/GroupControl/GroupControl.scss
@@ -41,6 +41,11 @@
         align-items: flex-end;
     }
 
+    &__controls-title {
+        display: block;
+        width: 100%;
+    }
+
     &__control-container {
         display: contents;
         position: relative;
diff --git a/src/ui/components/DashKit/plugins/GroupControl/GroupControl.tsx b/src/ui/components/DashKit/plugins/GroupControl/GroupControl.tsx
index 6462c64955..bec41ef134 100644
--- a/src/ui/components/DashKit/plugins/GroupControl/GroupControl.tsx
+++ b/src/ui/components/DashKit/plugins/GroupControl/GroupControl.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {type Plugin, type PluginWidgetProps, type SettingsProps} from '@gravity-ui/dashkit';
 import type {Config, StateAndParamsMetaData} from '@gravity-ui/dashkit/helpers';
 import {getItemsParams, pluginGroupControlBaseDL} from '@gravity-ui/dashkit/helpers';
-import {Loader} from '@gravity-ui/uikit';
+import {Loader, Text} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import debounce from 'lodash/debounce';
@@ -836,6 +836,11 @@ class GroupControl extends React.PureComponent<PluginGroupControlProps, PluginGr
 
         return (
             <div className={b('controls')}>
+                {controlData.showGroupName && controlData.groupName && (
+                    <Text variant="subheader-2" className={b('controls-title')}>
+                        {controlData.groupName}
+                    </Text>
+                )}
                 {controlData.group?.map((item: DashTabItemControlSingle) =>
                     this.renderControl(item),
                 )}
diff --git a/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
index 00a790ba34..9b64b0a42b 100644
--- a/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
+++ b/src/ui/components/DialogExtendedSettings/DialogExtendedSettings.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {FormRow, HelpPopover} from '@gravity-ui/components';
-import {Checkbox, Dialog, List} from '@gravity-ui/uikit';
+import {Checkbox, Dialog, Flex, List, TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import DialogManager from 'components/DialogManager/DialogManager';
 import {I18n} from 'i18n';
@@ -26,6 +26,7 @@ export type ExtendedSettingsDialogProps = {
     onClose: () => void;
 
     enableAutoheightDefault?: boolean;
+    showSelectorsGroupTitle?: boolean;
 };
 
 export type OpenDialogExtendedSettingsArgs = {
@@ -45,6 +46,7 @@ const resetAutoValues = (group: SelectorDialogState[]) =>
 const DialogExtendedSettings = ({
     onClose,
     enableAutoheightDefault,
+    showSelectorsGroupTitle,
 }: ExtendedSettingsDialogProps) => {
     const selectorsGroup = useSelector(selectSelectorsGroup);
     const [itemsState, setItemsState] = React.useState(selectorsGroup.group);
@@ -145,6 +147,30 @@ const DialogExtendedSettings = ({
 
     const isMultipleSelectors = selectorsGroup.group?.length > 1;
 
+    const handleChangeShowGroupName = React.useCallback(
+        (value) => {
+            dispatch(
+                updateSelectorsGroup({
+                    ...selectorsGroup,
+                    showGroupName: value,
+                }),
+            );
+        },
+        [dispatch, selectorsGroup],
+    );
+
+    const handleChangeGroupName = React.useCallback(
+        (value) => {
+            dispatch(
+                updateSelectorsGroup({
+                    ...selectorsGroup,
+                    groupName: value,
+                }),
+            );
+        },
+        [dispatch, selectorsGroup],
+    );
+
     const handleChangeAutoHeight = React.useCallback(
         (value) => {
             dispatch(
@@ -218,6 +244,23 @@ const DialogExtendedSettings = ({
             />
             <Dialog.Body className={b('body')}>
                 <FormSection title={i18n('label_group-parameters')}>
+                    {showSelectorsGroupTitle && (
+                        <FormRow className={b('row')} label={i18n('label_group-name')}>
+                            <Flex gap={2}>
+                                <Checkbox
+                                    className={b('checkbox')}
+                                    checked={selectorsGroup.showGroupName}
+                                    onUpdate={handleChangeShowGroupName}
+                                    size="l"
+                                />
+                                <TextInput
+                                    disabled={!selectorsGroup.showGroupName}
+                                    value={selectorsGroup.groupName}
+                                    onUpdate={handleChangeGroupName}
+                                />
+                            </Flex>
+                        </FormRow>
+                    )}
                     <FormRow
                         className={b('row')}
                         label={
diff --git a/src/ui/components/DialogGroupControl/DialogGroupControl.tsx b/src/ui/components/DialogGroupControl/DialogGroupControl.tsx
index 86b96e1414..479953192c 100644
--- a/src/ui/components/DialogGroupControl/DialogGroupControl.tsx
+++ b/src/ui/components/DialogGroupControl/DialogGroupControl.tsx
@@ -22,6 +22,7 @@ const i18n = I18n.keyset('dash.group-controls-dialog.edit');
 
 export type DialogGroupControlFeaturesProps = {
     enableAutoheightDefault?: boolean;
+    showSelectorsGroupTitle?: boolean;
 };
 
 export type DialogGroupControlProps = {
@@ -40,6 +41,7 @@ export const DialogGroupControl: React.FC<DialogGroupControlProps> = ({
     navigationPath,
     changeNavigationPath,
     enableAutoheightDefault,
+    showSelectorsGroupTitle,
 }) => {
     const {id, draftId} = useSelector(selectSelectorDialog);
 
@@ -73,6 +75,7 @@ export const DialogGroupControl: React.FC<DialogGroupControlProps> = ({
             sidebar={
                 <GroupControlSidebar
                     enableAutoheightDefault={enableAutoheightDefault}
+                    showSelectorsGroupTitle={showSelectorsGroupTitle}
                     handleCopyItem={handleCopyItem}
                 />
             }
diff --git a/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx b/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx
index f6d943c470..143191efe6 100644
--- a/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx
+++ b/src/ui/components/DialogGroupControl/GroupControlSidebar/GroupControlSidebar.tsx
@@ -75,7 +75,8 @@ const handlePasteItems = (pasteConfig: CopiedConfigData | null) => {
 export const GroupControlSidebar: React.FC<{
     handleCopyItem: (itemIndex: number) => void;
     enableAutoheightDefault?: boolean;
-}> = ({enableAutoheightDefault, handleCopyItem}) => {
+    showSelectorsGroupTitle?: boolean;
+}> = ({enableAutoheightDefault, handleCopyItem, showSelectorsGroupTitle}) => {
     const selectorsGroup = useSelector(selectSelectorsGroup);
     const activeSelectorIndex = useSelector(selectActiveSelectorIndex);
 
@@ -127,6 +128,7 @@ export const GroupControlSidebar: React.FC<{
                 props: {
                     onClose: handleClosePlacementDialog,
                     enableAutoheightDefault,
+                    showSelectorsGroupTitle,
                 },
             }),
         );
diff --git a/src/ui/store/actions/controlDialog.ts b/src/ui/store/actions/controlDialog.ts
index a8225a4bc0..ca548c5291 100644
--- a/src/ui/store/actions/controlDialog.ts
+++ b/src/ui/store/actions/controlDialog.ts
@@ -238,6 +238,8 @@ export const applyGroupControlDialog = ({
                 : false;
 
         const data = {
+            showGroupName: selectorsGroup.showGroupName,
+            groupName: selectorsGroup.groupName,
             autoHeight,
             buttonApply: selectorsGroup.buttonApply,
             buttonReset: selectorsGroup.buttonReset,
diff --git a/src/ui/store/reducers/controlDialog.ts b/src/ui/store/reducers/controlDialog.ts
index 6a17fac97a..88f0384996 100644
--- a/src/ui/store/reducers/controlDialog.ts
+++ b/src/ui/store/reducers/controlDialog.ts
@@ -89,6 +89,7 @@ export function getSelectorDialogInitialState(
 
 export function getGroupSelectorDialogInitialState(): SelectorsGroupDialogState {
     return {
+        showGroupName: false,
         autoHeight: false,
         buttonApply: false,
         buttonReset: false,
@@ -345,8 +346,15 @@ export function controlDialog(
 
         case UPDATE_SELECTORS_GROUP: {
             const {selectorsGroup} = state;
-            const {group, autoHeight, buttonApply, buttonReset, updateControlsOnChange} =
-                action.payload;
+            const {
+                group,
+                autoHeight,
+                buttonApply,
+                buttonReset,
+                updateControlsOnChange,
+                showGroupName,
+                groupName,
+            } = action.payload;
 
             // if the number of selectors has increased from 1 to several, we enable autoHeight
             const updatedAutoHeight =
@@ -361,6 +369,8 @@ export function controlDialog(
                     buttonApply,
                     buttonReset,
                     updateControlsOnChange,
+                    showGroupName,
+                    groupName,
                 },
             };
         }
diff --git a/src/ui/store/typings/controlDialog.ts b/src/ui/store/typings/controlDialog.ts
index 04f2bd6db0..6f55a36f36 100644
--- a/src/ui/store/typings/controlDialog.ts
+++ b/src/ui/store/typings/controlDialog.ts
@@ -25,6 +25,8 @@ export type SelectorDialogValidation = {
 };
 
 export type SelectorsGroupDialogState = {
+    showGroupName: boolean;
+    groupName?: string;
     autoHeight: boolean;
     buttonApply: boolean;
     buttonReset: boolean;

From c02652f1a8c2de27755d38fc891cfe93b138ed3f Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Thu, 26 Dec 2024 15:30:49 +0300
Subject: [PATCH 08/18] Support enableHiddenItems in getActionPanelItems
 (#1978)

---
 src/ui/utils/getActionPanelItems.tsx | 35 ++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/ui/utils/getActionPanelItems.tsx b/src/ui/utils/getActionPanelItems.tsx
index 25e2e18b48..33c0deb166 100644
--- a/src/ui/utils/getActionPanelItems.tsx
+++ b/src/ui/utils/getActionPanelItems.tsx
@@ -24,14 +24,7 @@ export const TYPES_TO_DIALOGS_MAP = {
 
 export const ITEM_PASTE_ITEM_ID = 'paste';
 
-export const getActionPanelItems = ({
-    copiedData,
-    onPasteItem,
-    openDialog,
-    filterItem,
-    userSettings,
-    scope,
-}: {
+export type ActionPanelItemParams = {
     copiedData: CopiedConfigData | null;
     onPasteItem: (item: CopiedConfigData) => void;
     openDialog: (
@@ -41,11 +34,33 @@ export const getActionPanelItems = ({
     filterItem?: (item: DashkitActionPanelItem) => boolean;
     userSettings?: DLUserSettings;
     scope?: string;
-}) => {
+    allowedPasteItems?: string[];
+};
+
+export const BASE_ITEMS_TO_PASTE = [
+    DashTabItemType.Widget,
+    DashTabItemType.GroupControl,
+    DashTabItemType.Control,
+    DashTabItemType.Text,
+    DashTabItemType.Title,
+];
+
+export const getActionPanelItems = ({
+    copiedData,
+    onPasteItem,
+    openDialog,
+    filterItem,
+    userSettings,
+    scope,
+    // TODO: Remove concat
+    allowedPasteItems = BASE_ITEMS_TO_PASTE.concat(DashTabItemType.Image),
+}: ActionPanelItemParams) => {
     const {getBasicActionPanelItems} = registry.common.functions.getAll();
     const items = getBasicActionPanelItems({userSettings, scope});
 
-    if (copiedData) {
+    const enablePaste = copiedData && allowedPasteItems.includes(copiedData.type);
+
+    if (enablePaste) {
         items.push({
             id: ITEM_PASTE_ITEM_ID,
             icon: <Icon data={CopyPlus} />,

From 70eb150ac879fc722e64ea3607469038fd57e4a7 Mon Sep 17 00:00:00 2001
From: Irina Kuzmina <kuzmadom@yandex-team.ru>
Date: Thu, 26 Dec 2024 17:19:33 +0300
Subject: [PATCH 09/18] Fix table null sorting (#1981)

---
 .../Table/renderer/components/Table/utils.ts  | 11 +++-
 .../visualizations/flat-table/sorting.test.ts | 61 +++++++++++++++++++
 2 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts
index 1db53c7b99..c8bfe40808 100644
--- a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts
+++ b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts
@@ -57,18 +57,23 @@ function getSortingFunction(args: {
     }
 
     return function (row1, row2) {
-        const a = getSortAccessor(row1.original[columnIndex].value);
-        const b = getSortAccessor(row2.original[columnIndex].value);
+        const nullReplacement = columnType === 'number' ? -Infinity : '';
+        const a = getSortAccessor(row1.original[columnIndex].value, nullReplacement);
+        const b = getSortAccessor(row2.original[columnIndex].value, nullReplacement);
 
         return ascending(a as Primitive, b as Primitive);
     };
 }
 
-function getSortAccessor(value: unknown) {
+function getSortAccessor(value: unknown, nullReplacement?: Primitive) {
     if (isMarkupItem(value)) {
         return markupToRawString(value);
     }
 
+    if (value === null && typeof nullReplacement !== 'undefined') {
+        return nullReplacement;
+    }
+
     return value as Primitive;
 }
 
diff --git a/tests/opensource-suites/wizard/visualizations/flat-table/sorting.test.ts b/tests/opensource-suites/wizard/visualizations/flat-table/sorting.test.ts
index bdc8c6a617..0dbbe5e990 100644
--- a/tests/opensource-suites/wizard/visualizations/flat-table/sorting.test.ts
+++ b/tests/opensource-suites/wizard/visualizations/flat-table/sorting.test.ts
@@ -163,5 +163,66 @@ datalensTest.describe('Wizard', () => {
             ];
             expect(await wizardPage.chartkit.getRowsTexts()).toEqual(expectedOrder);
         });
+
+        datalensTest('Sorting numbers with null values', async ({page}) => {
+            const wizardPage = new WizardPage({page});
+            const chartContainer = page.locator(slct(WizardPageQa.SectionPreview));
+            const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader));
+
+            await wizardPage.createNewFieldWithFormula('year', 'year([Order_date])');
+            await wizardPage.sectionVisualization.addFieldByClick(PlaceholderName.Filters, 'year');
+            await wizardPage.filterEditor.selectFilterOperation(Operations.EQ);
+            await wizardPage.filterEditor.setInputValue('2015');
+            await wizardPage.filterEditor.apply();
+
+            await wizardPage.createNewFieldWithFormula('month', 'datepart([Order_date], "month")');
+            await wizardPage.createNewFieldWithFormula(
+                'with_null',
+                'if([month] = 2) then null else [month] end',
+            );
+            await wizardPage.sectionVisualization.addFieldByClick(
+                PlaceholderName.FlatTableColumns,
+                'month',
+            );
+            await wizardPage.sectionVisualization.addFieldByClick(
+                PlaceholderName.FlatTableColumns,
+                'with_null',
+            );
+            await expect(previewLoader).not.toBeVisible();
+
+            const initialOrder = [
+                ['1', '1'],
+                ['2', 'null'],
+                ['3', '3'],
+                ['4', '4'],
+                ['5', '5'],
+                ['6', '6'],
+                ['7', '7'],
+                ['8', '8'],
+                ['9', '9'],
+                ['10', '10'],
+                ['11', '11'],
+                ['12', '12'],
+            ];
+            expect(await wizardPage.chartkit.getRowsTexts()).toEqual(initialOrder);
+
+            // Sort values by clicking on header
+            await chartContainer.locator('thead', {hasText: 'with_null'}).first().click();
+            const expectedOrder = [
+                ['12', '12'],
+                ['11', '11'],
+                ['10', '10'],
+                ['9', '9'],
+                ['8', '8'],
+                ['7', '7'],
+                ['6', '6'],
+                ['5', '5'],
+                ['4', '4'],
+                ['3', '3'],
+                ['1', '1'],
+                ['2', 'null'],
+            ];
+            expect(await wizardPage.chartkit.getRowsTexts()).toEqual(expectedOrder);
+        });
     });
 });

From daa0d81955d1d1be8aa528f144c4a30b26200149 Mon Sep 17 00:00:00 2001
From: Andrey Melikhov <melikhov@yandex-team.ru>
Date: Thu, 26 Dec 2024 17:25:28 +0300
Subject: [PATCH 10/18] Refactoring DataFetcher.fetch  (#1979)

---
 .../components/processor/data-fetcher.ts      | 91 +++++++++++--------
 .../components/processor/hooks.ts             |  7 ++
 .../components/processor/index.ts             | 23 ++++-
 .../charts-engine/runners/common.ts           | 35 +++++++
 src/server/components/charts-engine/types.ts  |  7 ++
 5 files changed, 123 insertions(+), 40 deletions(-)

diff --git a/src/server/components/charts-engine/components/processor/data-fetcher.ts b/src/server/components/charts-engine/components/processor/data-fetcher.ts
index b7f0ab17ab..060468025e 100644
--- a/src/server/components/charts-engine/components/processor/data-fetcher.ts
+++ b/src/server/components/charts-engine/components/processor/data-fetcher.ts
@@ -60,8 +60,11 @@ type PromiseWithAbortController = [Promise<unknown>, AbortController];
 type DataFetcherOptions = {
     chartsEngine: ChartsEngine;
     sources: Record<string, Source | string>;
-    req: Request;
-    ctx?: AppContext;
+    /**
+     * @deprecated will be removed
+     */
+    req?: Request;
+    ctx: AppContext;
     postprocess?:
         | ((
               data: Record<string, DataFetcherResult>,
@@ -73,6 +76,17 @@ type DataFetcherOptions = {
     userLogin?: string | null;
     iamToken?: string | null;
     workbookId?: WorkbookId;
+    isEmbed?: boolean;
+    zitadelParams?: ZitadelParams | undefined;
+    originalReqHeaders?: DataFetcherOriginalReqHeaders;
+    adapterContext?: AdapterContext;
+};
+
+export type DataFetcherOriginalReqHeaders = {
+    xRealIP: IncomingHttpHeaders['x-real-ip'];
+    xForwardedFor: IncomingHttpHeaders['x-forwarded-for'];
+    xChartsFetcherVia: IncomingHttpHeaders['x-charts-fetcher-via'];
+    referer: IncomingHttpHeaders['referer'];
 };
 
 type DataFetcherRequestOptions = {
@@ -184,11 +198,11 @@ export class DataFetcher {
         userLogin,
         iamToken,
         workbookId,
+        isEmbed = false,
+        zitadelParams,
+        originalReqHeaders,
+        adapterContext,
     }: DataFetcherOptions): Promise<Record<string, DataFetcherResult>> {
-        // TODO: remove aftex extension will be migrated
-        if (ctx === undefined) {
-            ctx = req.ctx;
-        }
         const fetchingTimeout = chartsEngine.config.fetchingTimeout || DEFAULT_FETCHING_TIMEOUT;
 
         const fetchingStartTime = Date.now();
@@ -209,27 +223,34 @@ export class DataFetcher {
             const queue = new PQueue({concurrency: CONCURRENT_REQUESTS_LIMIT});
             const fetchPromisesList: (() => unknown)[] = [];
 
-            const isEmbed = req.headers[DL_EMBED_TOKEN_HEADER] !== undefined;
-
-            const zitadelParams = ctx.config.isZitadelEnabled
-                ? {
-                      accessToken: req.user?.accessToken,
-                      serviceUserAccessToken: req.serviceUserAccessToken,
-                  }
-                : undefined;
+            // TODO: will be removed after migrations
+            if (req) {
+                isEmbed = req.headers[DL_EMBED_TOKEN_HEADER] !== undefined;
+
+                zitadelParams = ctx.config.isZitadelEnabled
+                    ? {
+                          accessToken: req.user?.accessToken,
+                          serviceUserAccessToken: req.serviceUserAccessToken,
+                      }
+                    : undefined;
+
+                originalReqHeaders = {
+                    xRealIP: req.headers['x-real-ip'],
+                    xForwardedFor: req.headers['x-forwarded-for'],
+                    xChartsFetcherVia: req.headers['x-charts-fetcher-via'],
+                    referer: req.headers.referer,
+                };
+                adapterContext = {
+                    headers: {
+                        ['x-forwarded-for']: req.headers['x-forwarded-for'],
+                        cookie: req.headers.cookie,
+                    },
+                };
+            }
 
-            const originalReqHeaders = {
-                xRealIP: req.headers['x-real-ip'],
-                xForwardedFor: req.headers['x-forwarded-for'],
-                xChartsFetcherVia: req.headers['x-charts-fetcher-via'],
-                referer: req.headers.referer,
-            };
-            const adapterContext: AdapterContext = {
-                headers: {
-                    ['x-forwarded-for']: req.headers['x-forwarded-for'],
-                    cookie: req.headers.cookie,
-                },
-            };
+            if (!originalReqHeaders || !adapterContext) {
+                throw new Error('Missing original request headers or adapter context');
+            }
 
             Object.keys(sources).forEach((sourceName) => {
                 const source = sources[sourceName];
@@ -251,8 +272,9 @@ export class DataFetcher {
                               workbookId,
                               isEmbed,
                               zitadelParams,
-                              originalReqHeaders,
-                              adapterContext,
+                              originalReqHeaders:
+                                  originalReqHeaders as DataFetcherOriginalReqHeaders,
+                              adapterContext: adapterContext as AdapterContext,
                           })
                         : {
                               sourceId: sourceName,
@@ -297,12 +319,12 @@ export class DataFetcher {
 
                             failed[result.sourceId] = filterObjectWhitelist(
                                 entry,
-                                chartsEngine.config.runResponseWhitelist,
+                                ctx.config.runResponseWhitelist,
                             );
                         } else {
                             fetched[result.sourceId] = filterObjectWhitelist(
                                 result,
-                                chartsEngine.config.runResponseWhitelist,
+                                ctx.config.runResponseWhitelist,
                             ) as DataFetcherResult;
                         }
                     });
@@ -486,16 +508,11 @@ export class DataFetcher {
         workbookId?: WorkbookId;
         isEmbed: boolean;
         zitadelParams: ZitadelParams | undefined;
-        originalReqHeaders: {
-            xRealIP: IncomingHttpHeaders['x-real-ip'];
-            xForwardedFor: IncomingHttpHeaders['x-forwarded-for'];
-            xChartsFetcherVia: IncomingHttpHeaders['x-charts-fetcher-via'];
-            referer: IncomingHttpHeaders['referer'];
-        };
+        originalReqHeaders: DataFetcherOriginalReqHeaders;
         adapterContext: AdapterContext;
     }) {
         const singleFetchingTimeout =
-            chartsEngine.config.singleFetchingTimeout || DEFAULT_SINGLE_FETCHING_TIMEOUT;
+            ctx.config.singleFetchingTimeout || DEFAULT_SINGLE_FETCHING_TIMEOUT;
 
         const onDataFetched = chartsEngine.telemetryCallbacks.onDataFetched || (() => {});
         const onDataFetchingFailed =
diff --git a/src/server/components/charts-engine/components/processor/hooks.ts b/src/server/components/charts-engine/components/processor/hooks.ts
index c71896f4e6..69c8117ce5 100644
--- a/src/server/components/charts-engine/components/processor/hooks.ts
+++ b/src/server/components/charts-engine/components/processor/hooks.ts
@@ -3,6 +3,7 @@ import type {AppContext} from '@gravity-ui/nodekit';
 import {flow} from 'lodash';
 
 import type {ChartsEngine} from '../../index';
+import type {HooksContext} from '../../types';
 
 export class HookError extends Error {
     hookError: {
@@ -56,11 +57,16 @@ export class ProcessorHooks {
         config,
         isEditMode,
         ctx,
+        hooksContext,
     }: {
+        /**
+         * @deprecated will be removed
+         */
         req: Request;
         config: Record<string, any>;
         isEditMode: boolean;
         ctx: AppContext;
+        hooksContext: HooksContext;
     }) {
         let hrStart;
 
@@ -75,6 +81,7 @@ export class ProcessorHooks {
                     config,
                     isEditMode,
                     ctx,
+                    hooksContext,
                 });
                 ctx.log(`Hook ${hookName} process`);
                 await hook.process();
diff --git a/src/server/components/charts-engine/components/processor/index.ts b/src/server/components/charts-engine/components/processor/index.ts
index 58e89da0e0..b2d287fade 100644
--- a/src/server/components/charts-engine/components/processor/index.ts
+++ b/src/server/components/charts-engine/components/processor/index.ts
@@ -19,7 +19,7 @@ import {DL_CONTEXT_HEADER, Feature, isEnabledServerFeature} from '../../../../..
 import {renderHTML} from '../../../../../shared/modules/markdown/markdown';
 import {registry} from '../../../../registry';
 import {config as configConstants} from '../../constants';
-import type {Source} from '../../types';
+import type {AdapterContext, HooksContext, Source} from '../../types';
 import * as Storage from '../storage';
 import type {ResolvedConfig} from '../storage/types';
 import {getDuration, normalizeParams, resolveParams} from '../utils';
@@ -27,7 +27,7 @@ import {getDuration, normalizeParams, resolveParams} from '../utils';
 import type {CommentsFetcherPrepareCommentsParams} from './comments-fetcher';
 import {CommentsFetcher} from './comments-fetcher';
 import type {LogItem} from './console';
-import type {DataFetcherResult} from './data-fetcher';
+import type {DataFetcherOriginalReqHeaders, DataFetcherResult, ZitadelParams} from './data-fetcher';
 import {DataFetcher} from './data-fetcher';
 import {ProcessorHooks} from './hooks';
 import {updateActionParams, updateParams} from './paramsUtils';
@@ -152,6 +152,9 @@ export type ProcessorParams = {
     userLang: string | null;
     userId: string | null;
     iamToken: string | null;
+    /**
+     * @deprecated will be removed
+     */
     req: Request;
     responseOptions?: Record<string, string | boolean>;
     uiOnly?: boolean;
@@ -165,6 +168,11 @@ export type ProcessorParams = {
     disableJSONFnByCookie: boolean;
     configName: string;
     configId: string;
+    isEmbed: boolean;
+    zitadelParams: ZitadelParams | undefined;
+    originalReqHeaders: DataFetcherOriginalReqHeaders;
+    adapterContext: AdapterContext;
+    hooksContext: HooksContext;
 };
 
 export class Processor {
@@ -192,6 +200,11 @@ export class Processor {
         disableJSONFnByCookie,
         configName,
         configId,
+        isEmbed,
+        zitadelParams,
+        originalReqHeaders,
+        adapterContext,
+        hooksContext,
     }: ProcessorParams): Promise<
         ProcessorSuccessResponse | ProcessorErrorResponse | {error: string}
     > {
@@ -324,6 +337,7 @@ export class Processor {
                 },
                 isEditMode,
                 ctx,
+                hooksContext,
             });
 
             if (resultHooksInit.status === ProcessorHooks.STATUS.FAILED) {
@@ -556,13 +570,16 @@ export class Processor {
                 resolvedSources = await DataFetcher.fetch({
                     chartsEngine,
                     sources,
-                    req,
                     ctx,
                     iamToken,
                     subrequestHeaders,
                     userId,
                     userLogin,
                     workbookId,
+                    isEmbed,
+                    zitadelParams,
+                    originalReqHeaders,
+                    adapterContext,
                 });
 
                 if (Object.keys(resolvedSources).length) {
diff --git a/src/server/components/charts-engine/runners/common.ts b/src/server/components/charts-engine/runners/common.ts
index ce880e19ef..a690bbb8c3 100644
--- a/src/server/components/charts-engine/runners/common.ts
+++ b/src/server/components/charts-engine/runners/common.ts
@@ -6,6 +6,7 @@ import type {ControlType, EntryPublicAuthor, WorkbookId} from '../../../../share
 import {
     DISABLE,
     DISABLE_JSONFN_SWITCH_MODE_COOKIE_NAME,
+    DL_EMBED_TOKEN_HEADER,
     Feature,
     isEnabledServerFeature,
 } from '../../../../shared';
@@ -193,6 +194,35 @@ export function commonRunner({
     const configId = req.body.id;
     const disableJSONFnByCookie = req.cookies[DISABLE_JSONFN_SWITCH_MODE_COOKIE_NAME] === DISABLE;
 
+    const isEmbed = req.headers[DL_EMBED_TOKEN_HEADER] !== undefined;
+
+    const zitadelParams = ctx.config.isZitadelEnabled
+        ? {
+              accessToken: req.user?.accessToken,
+              serviceUserAccessToken: req.serviceUserAccessToken,
+          }
+        : undefined;
+
+    const originalReqHeaders = {
+        xRealIP: req.headers['x-real-ip'],
+        xForwardedFor: req.headers['x-forwarded-for'],
+        xChartsFetcherVia: req.headers['x-charts-fetcher-via'],
+        referer: req.headers.referer,
+    };
+    const adapterContext = {
+        headers: {
+            ['x-forwarded-for']: req.headers['x-forwarded-for'],
+            cookie: req.headers.cookie,
+        },
+    };
+
+    const hooksContext = {
+        headers: {
+            cookie: req.headers.cookie,
+            authorization: req.headers.authorization,
+        },
+    };
+
     const processorParams: Omit<ProcessorParams, 'ctx'> = {
         chartsEngine,
         paramsOverride: params,
@@ -212,6 +242,11 @@ export function commonRunner({
         configName,
         configId,
         disableJSONFnByCookie,
+        isEmbed,
+        zitadelParams,
+        originalReqHeaders,
+        adapterContext,
+        hooksContext,
     };
 
     if (req.body.unreleased === 1) {
diff --git a/src/server/components/charts-engine/types.ts b/src/server/components/charts-engine/types.ts
index 2cfe6c1e07..17333e41d4 100644
--- a/src/server/components/charts-engine/types.ts
+++ b/src/server/components/charts-engine/types.ts
@@ -132,6 +132,13 @@ export type AdapterContext = {
     };
 };
 
+export type HooksContext = {
+    headers: {
+        cookie: IncomingHttpHeaders['cookie'];
+        authorization: IncomingHttpHeaders['authorization'];
+    };
+};
+
 export type SourceConfig = {
     description?: {
         title: {

From 0a1bb7893770b370ad3679c34a161083b6924cbf Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Thu, 26 Dec 2024 18:18:09 +0300
Subject: [PATCH 11/18] Remove extra code in getActionPanelItems (#1980)

---
 src/ui/utils/getActionPanelItems.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui/utils/getActionPanelItems.tsx b/src/ui/utils/getActionPanelItems.tsx
index 33c0deb166..1f4aea6b93 100644
--- a/src/ui/utils/getActionPanelItems.tsx
+++ b/src/ui/utils/getActionPanelItems.tsx
@@ -52,8 +52,7 @@ export const getActionPanelItems = ({
     filterItem,
     userSettings,
     scope,
-    // TODO: Remove concat
-    allowedPasteItems = BASE_ITEMS_TO_PASTE.concat(DashTabItemType.Image),
+    allowedPasteItems = BASE_ITEMS_TO_PASTE,
 }: ActionPanelItemParams) => {
     const {getBasicActionPanelItems} = registry.common.functions.getAll();
     const items = getBasicActionPanelItems({userSettings, scope});

From 5b08a4f53084a51c0f71558b21d72f2abfa56590 Mon Sep 17 00:00:00 2001
From: Evgenij Shangin <shangin@yandex-team.ru>
Date: Thu, 26 Dec 2024 21:16:38 +0300
Subject: [PATCH 12/18] Add beforeRequest decorator for ui sdk (#1983)

---
 src/ui/libs/schematic-sdk/decorator.ts | 66 ++++++++++++++++++++++++++
 src/ui/libs/schematic-sdk/index.ts     |  9 ++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/ui/libs/schematic-sdk/decorator.ts

diff --git a/src/ui/libs/schematic-sdk/decorator.ts b/src/ui/libs/schematic-sdk/decorator.ts
new file mode 100644
index 0000000000..5f41fa7f35
--- /dev/null
+++ b/src/ui/libs/schematic-sdk/decorator.ts
@@ -0,0 +1,66 @@
+import type {SdkConfig} from '@gravity-ui/sdk';
+import {CancellablePromise} from '@gravity-ui/sdk';
+
+const CANCEL_REQUEST_EVENT = 'sdk_cancel_request';
+
+type ConcurrentId = string | undefined;
+
+class SdkEvent extends EventTarget {
+    cancelRequest(concurrentId: ConcurrentId) {
+        this.dispatchEvent(new CustomEvent(CANCEL_REQUEST_EVENT, {detail: {concurrentId}}));
+    }
+}
+const instance = new SdkEvent();
+
+function subscribeCancelRequest(cb: (concurrentId: ConcurrentId) => void) {
+    function subscribe(event: Event) {
+        const customEvent = event as CustomEvent<{concurrentId: ConcurrentId}>;
+        cb(customEvent.detail.concurrentId);
+    }
+    instance.addEventListener(CANCEL_REQUEST_EVENT, subscribe);
+    function unsubscribe() {
+        instance.removeEventListener(CANCEL_REQUEST_EVENT, subscribe);
+    }
+    return unsubscribe;
+}
+
+export function emitCancelRequest(concurrentId: ConcurrentId) {
+    instance.cancelRequest(concurrentId);
+}
+
+export function initBeforeRequestDecorator(
+    beforeRequest: () => Promise<unknown>,
+): SdkConfig['decorator'] {
+    return (sdkActionFunc) =>
+        (...sdkActionFuncArgs) => {
+            const requestOptions = sdkActionFuncArgs[1];
+            const concurrentId = requestOptions?.concurrentId;
+            let cancelled = false;
+            let actionPromise: ReturnType<typeof sdkActionFunc>;
+            let unsubscribe: ReturnType<typeof subscribeCancelRequest>;
+            if (concurrentId) {
+                unsubscribe = subscribeCancelRequest((emittedConcurrentId) => {
+                    if (emittedConcurrentId === concurrentId) {
+                        cancelled = true;
+                    }
+                });
+            }
+            return new CancellablePromise(
+                beforeRequest().then(() => {
+                    unsubscribe?.();
+                    actionPromise = sdkActionFunc(...sdkActionFuncArgs);
+                    if (cancelled) {
+                        actionPromise.cancel();
+                    }
+                    return actionPromise;
+                }),
+                () => {
+                    unsubscribe?.();
+                    actionPromise?.cancel();
+                    cancelled = true;
+                },
+            ).finally(() => {
+                unsubscribe?.();
+            });
+        };
+}
diff --git a/src/ui/libs/schematic-sdk/index.ts b/src/ui/libs/schematic-sdk/index.ts
index 469e3677f2..36eae1616a 100644
--- a/src/ui/libs/schematic-sdk/index.ts
+++ b/src/ui/libs/schematic-sdk/index.ts
@@ -19,6 +19,7 @@ import {DL} from '../../constants';
 import {registry} from '../../registry';
 import Utils from '../../utils';
 
+import {emitCancelRequest} from './decorator';
 import type {OperationError, SdkError} from './parse-error';
 import {handleRequestError, isOperationError, isSdkError} from './parse-error';
 
@@ -60,6 +61,7 @@ const sdkConfig: SdkConfig = {
             },
         };
     },
+    // decorator: initBeforeRequestDecorator(...),
 };
 
 export const initSdk = () => {
@@ -97,8 +99,15 @@ export const initSdk = () => {
     return sdk;
 };
 
+// TODO: return object with sdk and cancelRequest
 export const getSdk = () => {
     return registry.libs.schematicSdk.get() as DatalensSdk<{
         root: typeof schema;
     }>;
 };
+
+// Use it instead of sdk.cancelRequest
+export function cancelRequest(concurrentId: string) {
+    emitCancelRequest(concurrentId);
+    getSdk().cancelRequest(concurrentId);
+}

From c994c7bc5207b5d1c2c393c1c3fee7b655a0e084 Mon Sep 17 00:00:00 2001
From: Evgenij Shangin <shangin@yandex-team.ru>
Date: Fri, 27 Dec 2024 14:14:08 +0300
Subject: [PATCH 13/18] Add before request interceptor (#1984)

---
 package-lock.json                             |  8 +++----
 package.json                                  |  2 +-
 src/@types/axios.d.ts                         | 14 -----------
 .../DatalensChartkit/modules/axios/axios.ts   | 24 +++++++------------
 src/ui/libs/axios/interceptors.ts             | 16 +++++++++++++
 5 files changed, 30 insertions(+), 34 deletions(-)
 delete mode 100644 src/@types/axios.d.ts
 create mode 100644 src/ui/libs/axios/interceptors.ts

diff --git a/package-lock.json b/package-lock.json
index 6b417bc3f7..cb759b5363 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@node-rs/crc32": "^1.7.2",
         "ajv": "^8.12.0",
         "axios": "^1.7.7",
-        "axios-retry": "^3.2.0",
+        "axios-retry": "^3.9.1",
         "clipboard-copy": "^3.2.0",
         "cookie-session": "^2.1.0",
         "d3": "^7.8.5",
@@ -11742,9 +11742,9 @@
       }
     },
     "node_modules/axios-retry": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.6.0.tgz",
-      "integrity": "sha512-jtH4qWTKZ2a17dH6tjq52Y1ssNV0lKge6/Z9Lw67s9Wt01nGTg4hg7/LJBGYfDci44NTANJQlCPHPOT/TSFm9w==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.9.1.tgz",
+      "integrity": "sha512-8PJDLJv7qTTMMwdnbMvrLYuvB47M81wRtxQmEdV5w4rgbTXTt+vtPkXwajOfOdSyv/wZICJOC+/UhXH4aQ/R+w==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.15.4",
diff --git a/package.json b/package.json
index 4843d0a6f7..8b1fd4c0f6 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "@node-rs/crc32": "^1.7.2",
     "ajv": "^8.12.0",
     "axios": "^1.7.7",
-    "axios-retry": "^3.2.0",
+    "axios-retry": "^3.9.1",
     "clipboard-copy": "^3.2.0",
     "cookie-session": "^2.1.0",
     "d3": "^7.8.5",
diff --git a/src/@types/axios.d.ts b/src/@types/axios.d.ts
deleted file mode 100644
index 7623a5aacc..0000000000
--- a/src/@types/axios.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type {IAxiosRetryConfig} from 'axios-retry';
-
-declare module 'axios' {
-    export interface AxiosRequestConfig {
-        'axios-retry'?: IAxiosRetryConfig;
-    }
-    export interface AxiosInterceptorManager {
-        handlers: Array<() => void>;
-    }
-    export interface AxiosInstance {
-        retryRequestInterceptor?: number;
-        retryResponseInterceptor?: number;
-    }
-}
diff --git a/src/ui/libs/DatalensChartkit/modules/axios/axios.ts b/src/ui/libs/DatalensChartkit/modules/axios/axios.ts
index d14b12b201..fcc6cba2b2 100644
--- a/src/ui/libs/DatalensChartkit/modules/axios/axios.ts
+++ b/src/ui/libs/DatalensChartkit/modules/axios/axios.ts
@@ -9,6 +9,8 @@ import type {ConcurrencyManagerInstance} from './axiosConcurrency';
 import {concurrencyManager} from './axiosConcurrency';
 
 let concurrencyManagerInstance: ConcurrencyManagerInstance;
+let retryRequestInterceptorId: number;
+let retryResponseInterceptorId: number;
 
 const client = axios.create({
     withCredentials: true,
@@ -28,30 +30,22 @@ export function initConcurrencyManager(maxConcurrentRequests: number) {
     // should be added after the interseptors added by axios-concurrency, therefor below we remove earlier
     // added axios-retry interseptors and pass axiosInstance first to concurrencyManager then
     // in axiosRetry
-    // @ts-ignore
-    if (isNumber(client.retryRequestInterceptor)) {
-        // @ts-ignore
-        client.interceptors.request.eject(client.retryRequestInterceptor);
+    if (isNumber(retryRequestInterceptorId)) {
+        client.interceptors.request.eject(retryRequestInterceptorId);
     }
-    // @ts-ignore
-    if (isNumber(client.retryResponseInterceptor)) {
-        // @ts-ignore
-        client.interceptors.response.eject(client.retryResponseInterceptor);
+    if (isNumber(retryResponseInterceptorId)) {
+        client.interceptors.response.eject(retryResponseInterceptorId);
     }
 
     concurrencyManagerInstance = concurrencyManager(client, maxConcurrentRequests);
 
-    axiosRetry(client, {
+    const {requestInterceptorId, responseInterceptorId} = axiosRetry(client, {
         retries: 0,
         retryCondition: isRetryableError,
         retryDelay: () => 3000,
     });
-
-    // it is necessary to store the indexes of the positions of the interceptors added by axios-retry, to bring ability to delete them
-    // @ts-ignore
-    client.retryRequestInterceptor = client.interceptors.request.handlers.length - 1;
-    // @ts-ignore
-    client.retryResponseInterceptor = client.interceptors.response.handlers.length - 1;
+    retryRequestInterceptorId = requestInterceptorId;
+    retryResponseInterceptorId = responseInterceptorId;
 }
 
 client.interceptors.response.use(
diff --git a/src/ui/libs/axios/interceptors.ts b/src/ui/libs/axios/interceptors.ts
new file mode 100644
index 0000000000..ff55464dcc
--- /dev/null
+++ b/src/ui/libs/axios/interceptors.ts
@@ -0,0 +1,16 @@
+import type {AxiosInstance} from 'axios';
+
+export function initBeforeRequestInterceptor(
+    axiosInstance: AxiosInstance,
+    beforeRequest: () => Promise<unknown>,
+) {
+    const requestInterceptorId = axiosInstance.interceptors.request.use(
+        async (config) => {
+            await beforeRequest();
+            return config;
+        },
+        (error) => Promise.reject(error),
+    );
+
+    return {requestInterceptorId};
+}

From 63b48ff652e0969f134fdde8bece4c6b03b588e9 Mon Sep 17 00:00:00 2001
From: Evgenij Shangin <shangin@yandex-team.ru>
Date: Fri, 27 Dec 2024 15:55:44 +0300
Subject: [PATCH 14/18] Refact getSdk return (#1985)

---
 .../components/EntryPanel/EntryPanel.tsx      |  4 +-
 .../ConnectionSelector/ConnectionSelector.tsx |  2 +-
 .../helpers/get-distincts-by-typed-query.ts   |  2 +-
 .../DatasetSelector/DatasetSelector.tsx       |  2 +-
 .../helpers/get-distincts-by-dataset-field.ts |  2 +-
 .../Switchers/DatasetField/DatasetField.tsx   |  2 +-
 .../components/DialogFilter/DialogFilter.tsx  |  6 +-
 .../DialogRelatedEntities.tsx                 |  2 +-
 .../DialogRelations/hooks/useRelations.tsx    |  2 +-
 .../DropdownNavigation/DropdownNavigation.js  |  2 +-
 .../DialogCopyEntry/DialogCopyEntry.tsx       |  6 +-
 .../DialogCreateEditorChart.tsx               |  4 +-
 .../DialogCreateFolder/DialogCreateFolder.tsx |  2 +-
 .../DialogDeleteEntry/DialogDeleteEntry.tsx   |  2 +-
 .../DialogEditFavoritesAlias.tsx              |  2 +-
 .../DialogMoveEntry/DialogMoveEntry.tsx       |  2 +-
 .../DialogRenameEntry/DialogRenameEntry.tsx   |  2 +-
 .../DialogPublic/useDialogPublicState.ts      |  6 +-
 src/ui/components/FieldEditor/FieldEditor.tsx |  4 +-
 .../Navigation/Core/NavigationEntries.js      |  8 +-
 .../dialogs/BatchMove/BatchMove.tsx           |  4 +-
 .../Navigation/hoc/resolveNavigationPath.js   |  2 +-
 .../WorkbookNavigationMinimal.tsx             |  2 +-
 .../Items/Inspector/SourceMeta/Datalens.tsx   |  2 +-
 src/ui/libs/schematic-sdk/index.ts            | 17 ++--
 src/ui/store/actions/collectionsStructure.ts  | 96 +++++++++++--------
 src/ui/store/actions/colorPaletteEditor.ts    |  8 +-
 src/ui/store/actions/copyEntriesToWorkbook.ts | 12 +--
 src/ui/store/actions/entryContent.ts          | 12 +--
 src/ui/store/actions/iamAccessDialog.ts       | 26 ++---
 src/ui/store/actions/migrationToWorkbook.ts   | 20 ++--
 .../store/actions/index.tsx                   |  4 +-
 .../units/collections/store/actions/index.tsx | 12 +--
 src/ui/units/connections/store/actions/api.ts | 38 ++++----
 .../NavigationInput/InputLink/InputLink.js    |  2 +-
 src/ui/units/dash/containers/Body/Body.tsx    |  5 +-
 src/ui/units/dash/containers/Dash/Dash.tsx    |  2 +-
 .../Dialogs/Connections/Connections.js        |  2 +-
 .../DialogEditQuery/DialogEditQuery.tsx       |  2 +-
 .../units/dash/store/actions/base/actions.ts  |  6 +-
 src/ui/units/dash/store/actions/dashTyped.ts  |  8 +-
 .../DatasetSources/DatasetSources.js          |  4 +-
 .../store/actions/creators/dataset.js         | 18 ++--
 .../store/actions/creators/datasetTyped.ts    |  6 +-
 .../components/Documentation/Documentation.js |  2 +-
 .../editor/components/Revisions/Revisions.tsx |  2 +-
 .../components/RevisionsDiff/Editor.tsx       |  4 +-
 .../RevisionsDiff/RevisionsDiff.tsx           |  2 +-
 src/ui/units/editor/libs/monaco/utils.js      |  4 +-
 .../editor/store/reducers/editor/editor.js    | 12 +--
 .../ql/containers/QL/ViewSetup/ViewSetup.tsx  |  2 +-
 src/ui/units/ql/store/actions/ql.ts           | 14 +--
 src/ui/units/wizard/actions/index.ts          |  4 +-
 .../components/ValuesList/ValuesList.tsx      |  6 +-
 .../DuplicateEntryDialog.tsx                  |  2 +-
 src/ui/units/workbooks/store/actions/index.ts | 35 +++----
 src/ui/utils/sdkRequests.ts                   | 12 +--
 src/ui/utils/utils.ts                         |  2 +-
 src/ui/utils/waitOperation.ts                 |  2 +-
 59 files changed, 248 insertions(+), 231 deletions(-)

diff --git a/src/ui/components/ActionPanel/components/EntryPanel/EntryPanel.tsx b/src/ui/components/ActionPanel/components/EntryPanel/EntryPanel.tsx
index b2ba9a1443..56908fec3c 100644
--- a/src/ui/components/ActionPanel/components/EntryPanel/EntryPanel.tsx
+++ b/src/ui/components/ActionPanel/components/EntryPanel/EntryPanel.tsx
@@ -206,7 +206,7 @@ class EntryPanel extends React.Component<Props, State> {
         try {
             if (isFavorite) {
                 getSdk()
-                    .us.deleteFavorite({entryId})
+                    .sdk.us.deleteFavorite({entryId})
                     .then(() =>
                         this.setState({
                             entry: {
@@ -218,7 +218,7 @@ class EntryPanel extends React.Component<Props, State> {
                 return;
             }
             getSdk()
-                .us.addFavorite({entryId})
+                .sdk.us.addFavorite({entryId})
                 .then(() =>
                     this.setState({
                         entry: {
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx
index 8e1150761f..8aea894f1c 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/components/ConnectionSelector/ConnectionSelector.tsx
@@ -33,7 +33,7 @@ export const ConnectionSelector = (props: {
             setIsInvalid(false);
 
             return getSdk()
-                .bi.getConnection({
+                .sdk.bi.getConnection({
                     connectionId: updatedConnectionId,
                     workbookId,
                 })
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/helpers/get-distincts-by-typed-query.ts b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/helpers/get-distincts-by-typed-query.ts
index 14cbd4b168..b48b426141 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/helpers/get-distincts-by-typed-query.ts
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/helpers/get-distincts-by-typed-query.ts
@@ -25,7 +25,7 @@ export const getDistinctsByTypedQuery = async (
     }
 
     try {
-        const result = await getSdk().bi.getConnectionTypedQueryData({
+        const result = await getSdk().sdk.bi.getConnectionTypedQueryData({
             connectionId,
             workbookId,
             body: {
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx
index 78459a54b6..4b2e1c9439 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx
@@ -40,7 +40,7 @@ function DatasetSelector(props: {
         setIsInvalid(false);
 
         getSdk()
-            .bi.getDatasetByVersion({
+            .sdk.bi.getDatasetByVersion({
                 datasetId: entryId,
                 workbookId,
                 version: 'draft',
diff --git a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/helpers/get-distincts-by-dataset-field.ts b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/helpers/get-distincts-by-dataset-field.ts
index e9be42c9af..baf7fdf54a 100644
--- a/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/helpers/get-distincts-by-dataset-field.ts
+++ b/src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSettings/helpers/get-distincts-by-dataset-field.ts
@@ -48,7 +48,7 @@ export const getDistinctsByDatasetField = async ({
             result: {
                 data: {Data},
             },
-        } = await getSdk().bi.getDistinctsApiV2(
+        } = await getSdk().sdk.bi.getDistinctsApiV2(
             {
                 datasetId,
                 workbookId,
diff --git a/src/ui/components/ControlComponents/Sections/Switchers/DatasetField/DatasetField.tsx b/src/ui/components/ControlComponents/Sections/Switchers/DatasetField/DatasetField.tsx
index c2d48855cc..df96c8ea00 100644
--- a/src/ui/components/ControlComponents/Sections/Switchers/DatasetField/DatasetField.tsx
+++ b/src/ui/components/ControlComponents/Sections/Switchers/DatasetField/DatasetField.tsx
@@ -82,7 +82,7 @@ export class DatasetField extends React.PureComponent<Props, State> {
         } = this.props;
 
         getSdk()
-            .bi.getDataSetFieldsById({
+            .sdk.bi.getDataSetFieldsById({
                 dataSetId: this.props.datasetId!,
                 workbookId,
             })
diff --git a/src/ui/components/DialogFilter/DialogFilter.tsx b/src/ui/components/DialogFilter/DialogFilter.tsx
index e86aaddeba..0ff70d4544 100644
--- a/src/ui/components/DialogFilter/DialogFilter.tsx
+++ b/src/ui/components/DialogFilter/DialogFilter.tsx
@@ -487,7 +487,7 @@ class DialogFilter extends React.Component<DialogFilterProps, DialogFilterState>
 
         getSdk().cancelRequest('getDistincts');
 
-        return getSdk().bi.getDistinctsApiV2(
+        return getSdk().sdk.bi.getDistinctsApiV2(
             {
                 datasetId,
                 workbookId,
@@ -526,7 +526,7 @@ class DialogFilter extends React.Component<DialogFilterProps, DialogFilterState>
                 fetching: false,
             });
         } catch (error) {
-            if (this.isUnmounted || getSdk().isCancel(error)) {
+            if (this.isUnmounted || getSdk().sdk.isCancel(error)) {
                 return;
             }
 
@@ -655,7 +655,7 @@ class DialogFilter extends React.Component<DialogFilterProps, DialogFilterState>
                 suggestFetching: false,
             });
         } catch (error) {
-            if (this.isUnmounted || getSdk().isCancel(error)) {
+            if (this.isUnmounted || getSdk().sdk.isCancel(error)) {
                 return;
             }
             logger.logError('DialogFilter: onChangeSuggest failed', error);
diff --git a/src/ui/components/DialogRelatedEntities/DialogRelatedEntities.tsx b/src/ui/components/DialogRelatedEntities/DialogRelatedEntities.tsx
index c90f8c3203..0ac68d8215 100644
--- a/src/ui/components/DialogRelatedEntities/DialogRelatedEntities.tsx
+++ b/src/ui/components/DialogRelatedEntities/DialogRelatedEntities.tsx
@@ -52,7 +52,7 @@ export const DialogRelatedEntities = ({onClose, visible, entry}: DialogRelatedEn
         setIsError(false);
         getSdk().cancelRequest(CONCURRENT_ID);
         getSdk()
-            .mix.getEntryRelations(
+            .sdk.mix.getEntryRelations(
                 {
                     entryId: entry.entryId,
                     workbookId: entry.workbookId,
diff --git a/src/ui/components/DialogRelations/hooks/useRelations.tsx b/src/ui/components/DialogRelations/hooks/useRelations.tsx
index b73eea7e00..c50318adc1 100644
--- a/src/ui/components/DialogRelations/hooks/useRelations.tsx
+++ b/src/ui/components/DialogRelations/hooks/useRelations.tsx
@@ -119,7 +119,7 @@ export const useRelations = ({
             let entriesDatasetsFields: GetEntriesDatasetsFieldsResponse = [];
             if (!isEmpty(entriesList) && (!isEmpty(datasetsList) || !isEmpty(controlsList))) {
                 // TODO does not return the dataType of the field (to study whether it is needed in the links)
-                entriesDatasetsFields = await getSdk().mix.getEntriesDatasetsFields({
+                entriesDatasetsFields = await getSdk().sdk.mix.getEntriesDatasetsFields({
                     entriesIds: entriesList,
                     datasetsIds: Object.keys(datasetsList),
                     workbookId,
diff --git a/src/ui/components/DropdownNavigation/DropdownNavigation.js b/src/ui/components/DropdownNavigation/DropdownNavigation.js
index d378d04b99..0c786b53ec 100644
--- a/src/ui/components/DropdownNavigation/DropdownNavigation.js
+++ b/src/ui/components/DropdownNavigation/DropdownNavigation.js
@@ -88,7 +88,7 @@ class DropdownNavigation extends React.PureComponent {
         if (this.loading) {
             try {
                 const entryMeta = await getSdk()
-                    .us.getEntry({entryId})
+                    .sdk.us.getEntry({entryId})
                     .then((metaData) => {
                         isValidEntry = true;
                         return metaData;
diff --git a/src/ui/components/EntryDialogues/DialogCopyEntry/DialogCopyEntry.tsx b/src/ui/components/EntryDialogues/DialogCopyEntry/DialogCopyEntry.tsx
index b331b847e7..eb0192d835 100644
--- a/src/ui/components/EntryDialogues/DialogCopyEntry/DialogCopyEntry.tsx
+++ b/src/ui/components/EntryDialogues/DialogCopyEntry/DialogCopyEntry.tsx
@@ -119,7 +119,7 @@ class DialogCopyEntry extends React.Component<
         const {scope} = this.props;
         if (scope === EntryScope.Dataset) {
             const new_key = path + name;
-            const {id} = await getSdk().bi.copyDataset({
+            const {id} = await getSdk().sdk.bi.copyDataset({
                 datasetId: this.props.entryId,
                 new_key,
             });
@@ -144,7 +144,7 @@ class DialogCopyEntry extends React.Component<
                 type: entry.type,
             };
         } else {
-            const data = await getSdk().us.copyEntry({
+            const data = await getSdk().sdk.us.copyEntry({
                 entryId: this.props.entryId,
                 name,
                 destination: path,
@@ -162,7 +162,7 @@ class DialogCopyEntry extends React.Component<
 
     private onApplyCreateWorkbookEntry = async ({name}: {name: string}) => {
         const {scope, entryId} = this.props;
-        const newEntry = await getSdk().us.copyWorkbookEntry({
+        const newEntry = await getSdk().sdk.us.copyWorkbookEntry({
             entryId,
             name,
         });
diff --git a/src/ui/components/EntryDialogues/DialogCreateEditorChart/DialogCreateEditorChart.tsx b/src/ui/components/EntryDialogues/DialogCreateEditorChart/DialogCreateEditorChart.tsx
index 3e7a924cce..f6c77bf33d 100644
--- a/src/ui/components/EntryDialogues/DialogCreateEditorChart/DialogCreateEditorChart.tsx
+++ b/src/ui/components/EntryDialogues/DialogCreateEditorChart/DialogCreateEditorChart.tsx
@@ -68,7 +68,7 @@ class DialogCreateEditorChart extends React.Component<Props> {
     }
 
     private onApply = async (key: string) => {
-        const data = await getSdk().mix.createEditorChart({
+        const data = await getSdk().sdk.mix.createEditorChart({
             key,
             data: this.props.data || {},
             type: this.props.type,
@@ -78,7 +78,7 @@ class DialogCreateEditorChart extends React.Component<Props> {
 
     private onWorkbookApply = ({name}: {name: string}) => {
         const {workbookId} = this.props;
-        return getSdk().mix.createEditorChart({
+        return getSdk().sdk.mix.createEditorChart({
             name,
             workbookId: workbookId as string,
             data: this.props.data || {},
diff --git a/src/ui/components/EntryDialogues/DialogCreateFolder/DialogCreateFolder.tsx b/src/ui/components/EntryDialogues/DialogCreateFolder/DialogCreateFolder.tsx
index 64e387a64a..67c2c88e79 100644
--- a/src/ui/components/EntryDialogues/DialogCreateFolder/DialogCreateFolder.tsx
+++ b/src/ui/components/EntryDialogues/DialogCreateFolder/DialogCreateFolder.tsx
@@ -46,7 +46,7 @@ class DialogCreateFolder extends React.Component<Props> {
     }
 
     private onApply = async (key: string) => {
-        const data = await getSdk().us.createFolder({key});
+        const data = await getSdk().sdk.us.createFolder({key});
         return data;
     };
 
diff --git a/src/ui/components/EntryDialogues/DialogDeleteEntry/DialogDeleteEntry.tsx b/src/ui/components/EntryDialogues/DialogDeleteEntry/DialogDeleteEntry.tsx
index ef7850128d..8e758fcc82 100644
--- a/src/ui/components/EntryDialogues/DialogDeleteEntry/DialogDeleteEntry.tsx
+++ b/src/ui/components/EntryDialogues/DialogDeleteEntry/DialogDeleteEntry.tsx
@@ -61,7 +61,7 @@ class DialogDeleteEntry extends React.Component<Props> {
 
     private onApply = async () => {
         const {entry, cleanLock, lockToken} = this.props;
-        await getSdk().mix.deleteEntry({
+        await getSdk().sdk.mix.deleteEntry({
             entryId: entry.entryId,
             scope: entry.scope,
             ...(lockToken ? {lockToken} : {}),
diff --git a/src/ui/components/EntryDialogues/DialogEditFavoritesAlias/DialogEditFavoritesAlias.tsx b/src/ui/components/EntryDialogues/DialogEditFavoritesAlias/DialogEditFavoritesAlias.tsx
index d1f14c2bbe..b825cdd8bc 100644
--- a/src/ui/components/EntryDialogues/DialogEditFavoritesAlias/DialogEditFavoritesAlias.tsx
+++ b/src/ui/components/EntryDialogues/DialogEditFavoritesAlias/DialogEditFavoritesAlias.tsx
@@ -46,7 +46,7 @@ export const DialogEditFavoritesAlias: React.FC<DialogEditFavoritesAliasProps> =
             onCloseDialog();
         } else {
             try {
-                await getSdk().us.renameFavorite({entryId, name});
+                await getSdk().sdk.us.renameFavorite({entryId, name});
                 onClose({status: EntryDialogResolveStatus.Success});
             } catch (error) {
                 logger.logError('DialogEditFavoritesAlias: renameAlias failed', error);
diff --git a/src/ui/components/EntryDialogues/DialogMoveEntry/DialogMoveEntry.tsx b/src/ui/components/EntryDialogues/DialogMoveEntry/DialogMoveEntry.tsx
index 6abef79853..d6ad0e2551 100644
--- a/src/ui/components/EntryDialogues/DialogMoveEntry/DialogMoveEntry.tsx
+++ b/src/ui/components/EntryDialogues/DialogMoveEntry/DialogMoveEntry.tsx
@@ -45,7 +45,7 @@ class DialogMoveEntry extends React.Component<Props> {
     }
 
     private onApply = async (key: string) => {
-        const result = await getSdk().us.moveEntry({
+        const result = await getSdk().sdk.us.moveEntry({
             entryId: this.props.entryId,
             destination: key,
         });
diff --git a/src/ui/components/EntryDialogues/DialogRenameEntry/DialogRenameEntry.tsx b/src/ui/components/EntryDialogues/DialogRenameEntry/DialogRenameEntry.tsx
index f8f1c0563c..faca8631ae 100644
--- a/src/ui/components/EntryDialogues/DialogRenameEntry/DialogRenameEntry.tsx
+++ b/src/ui/components/EntryDialogues/DialogRenameEntry/DialogRenameEntry.tsx
@@ -80,7 +80,7 @@ class DialogRenameEntry extends React.Component<Props, DialogRenameEntryState> {
     };
 
     private onApply = async () => {
-        const data = await getSdk().us.renameEntry({
+        const data = await getSdk().sdk.us.renameEntry({
             entryId: this.props.entryId,
             name: this.state.name.trim(),
         });
diff --git a/src/ui/components/EntryDialogues/DialogSwitchPublic/DialogPublic/useDialogPublicState.ts b/src/ui/components/EntryDialogues/DialogSwitchPublic/DialogPublic/useDialogPublicState.ts
index 75bfb11295..defafdd218 100644
--- a/src/ui/components/EntryDialogues/DialogSwitchPublic/DialogPublic/useDialogPublicState.ts
+++ b/src/ui/components/EntryDialogues/DialogSwitchPublic/DialogPublic/useDialogPublicState.ts
@@ -373,12 +373,12 @@ export const useDialogPublicState = ({
         async function init() {
             dispatch({type: DIALOG_PUBLIC_SET_LOADING});
             try {
-                const entry = await getSdk().us.getEntry({
+                const entry = await getSdk().sdk.us.getEntry({
                     entryId: propsEntry.entryId,
                     includePermissionsInfo: true,
                     includeDlComponentUiData: true,
                 });
-                const relations = await getSdk().mix.getPublicationPreview({
+                const relations = await getSdk().sdk.mix.getPublicationPreview({
                     entryId: entry.entryId,
                     workbookId: entry.workbookId,
                 });
@@ -472,7 +472,7 @@ export const useDialogPublicState = ({
             });
             const entries = getPublicationEntries(state);
             getSdk()
-                .mix.switchPublicationStatus({
+                .sdk.mix.switchPublicationStatus({
                     entries,
                     mainEntry: {
                         entryId: propsEntry.entryId,
diff --git a/src/ui/components/FieldEditor/FieldEditor.tsx b/src/ui/components/FieldEditor/FieldEditor.tsx
index 493a6a7c2f..7f21f340c6 100644
--- a/src/ui/components/FieldEditor/FieldEditor.tsx
+++ b/src/ui/components/FieldEditor/FieldEditor.tsx
@@ -291,7 +291,7 @@ class FieldEditor extends React.Component<Props, FieldEditorState> {
         let fieldErrors: DatasetFieldError[] = [];
 
         try {
-            await getSdk().bi.validateDatasetFormula(
+            await getSdk().sdk.bi.validateDatasetFormula(
                 {
                     datasetId,
                     workbookId,
@@ -301,7 +301,7 @@ class FieldEditor extends React.Component<Props, FieldEditorState> {
                 {concurrentId: 'validateDatasetFormula'},
             );
         } catch (error) {
-            if (!getSdk().isCancel(error)) {
+            if (!getSdk().sdk.isCancel(error)) {
                 fieldErrors = (error?.details?.data?.field_errors as DatasetFieldError[]) || [];
                 logger.logError('FieldEditor: validateDatasetFormula failed', error);
             }
diff --git a/src/ui/components/Navigation/Core/NavigationEntries.js b/src/ui/components/Navigation/Core/NavigationEntries.js
index 3f05deadea..d62f464b71 100644
--- a/src/ui/components/Navigation/Core/NavigationEntries.js
+++ b/src/ui/components/Navigation/Core/NavigationEntries.js
@@ -198,7 +198,7 @@ class NavigationEntries extends React.Component {
         }
         this.setState({page});
 
-        return getSdk().mix.getNavigationList(
+        return getSdk().sdk.mix.getNavigationList(
             {
                 place,
                 scope,
@@ -276,7 +276,7 @@ class NavigationEntries extends React.Component {
                 this.props.focusSearchInput();
             }
         } catch (error) {
-            if (getSdk().isCancel(error)) {
+            if (getSdk().sdk.isCancel(error)) {
                 return;
             }
             if (error.status === 403 && !isPermissionRetry) {
@@ -320,9 +320,9 @@ class NavigationEntries extends React.Component {
         this.changeFavorite(entryId, !isFavorite);
         try {
             if (isFavorite) {
-                await getSdk().us.deleteFavorite({entryId});
+                await getSdk().sdk.us.deleteFavorite({entryId});
             } else {
-                await getSdk().us.addFavorite({entryId});
+                await getSdk().sdk.us.addFavorite({entryId});
             }
             if (this.props.onChangeFavorite) {
                 this.props.onChangeFavorite({entryId, isFavorite: !isFavorite});
diff --git a/src/ui/components/Navigation/dialogs/BatchMove/BatchMove.tsx b/src/ui/components/Navigation/dialogs/BatchMove/BatchMove.tsx
index fe2035e430..5ec8cd42cf 100644
--- a/src/ui/components/Navigation/dialogs/BatchMove/BatchMove.tsx
+++ b/src/ui/components/Navigation/dialogs/BatchMove/BatchMove.tsx
@@ -90,7 +90,7 @@ export const BatchMove = ({
 
         for (const [index, entry] of entriesWithRights.entries()) {
             try {
-                await getSdk().us.moveEntry(
+                await getSdk().sdk.us.moveEntry(
                     {
                         entryId: entry.entryId,
                         destination: path,
@@ -98,7 +98,7 @@ export const BatchMove = ({
                     {concurrentId: CONCURRENT_ID},
                 );
             } catch (error) {
-                if (getSdk().isCancel(error)) {
+                if (getSdk().sdk.isCancel(error)) {
                     moveCancelled.current = true;
                     break;
                 }
diff --git a/src/ui/components/Navigation/hoc/resolveNavigationPath.js b/src/ui/components/Navigation/hoc/resolveNavigationPath.js
index 28f1b7c7be..9694a7cee4 100644
--- a/src/ui/components/Navigation/hoc/resolveNavigationPath.js
+++ b/src/ui/components/Navigation/hoc/resolveNavigationPath.js
@@ -10,7 +10,7 @@ import {PLACE, PLACE_VALUES} from '../constants';
 
 async function getEntryKey(entryId, defaultPath) {
     try {
-        const {key} = await getSdk().us.getEntry({entryId});
+        const {key} = await getSdk().sdk.us.getEntry({entryId});
         return key;
     } catch (error) {
         logger.logError('resolveNavigationPath: getEntry failed', error);
diff --git a/src/ui/components/WorkbookNavigationMinimal/WorkbookNavigationMinimal.tsx b/src/ui/components/WorkbookNavigationMinimal/WorkbookNavigationMinimal.tsx
index bbc24a3fa6..8679a891cc 100644
--- a/src/ui/components/WorkbookNavigationMinimal/WorkbookNavigationMinimal.tsx
+++ b/src/ui/components/WorkbookNavigationMinimal/WorkbookNavigationMinimal.tsx
@@ -183,7 +183,7 @@ class WorkbookNavigationMinimal extends React.Component<Props, State> {
         }
 
         getSdk()
-            .us.getWorkbookEntries(
+            .sdk.us.getWorkbookEntries(
                 {workbookId: this.props.workbookId, scope: this.props.scope, filters},
                 {concurrentId: 'WorkbookNavigationMinimal/getWorkbookEntries'},
             )
diff --git a/src/ui/libs/DatalensChartkit/components/ChartKitBase/components/Header/components/Menu/Items/Inspector/SourceMeta/Datalens.tsx b/src/ui/libs/DatalensChartkit/components/ChartKitBase/components/Header/components/Menu/Items/Inspector/SourceMeta/Datalens.tsx
index 6e7668b058..5509a4d721 100644
--- a/src/ui/libs/DatalensChartkit/components/ChartKitBase/components/Header/components/Menu/Items/Inspector/SourceMeta/Datalens.tsx
+++ b/src/ui/libs/DatalensChartkit/components/ChartKitBase/components/Header/components/Menu/Items/Inspector/SourceMeta/Datalens.tsx
@@ -22,7 +22,7 @@ const Datalens: React.FC<Props> = ({datasetId, setStatus, uiUrl}) => {
     React.useEffect(() => {
         async function fetchData() {
             try {
-                const data = await getSdk().us.getEntryMeta({entryId: datasetId});
+                const data = await getSdk().sdk.us.getEntryMeta({entryId: datasetId});
 
                 setData(data);
                 setStatus('success');
diff --git a/src/ui/libs/schematic-sdk/index.ts b/src/ui/libs/schematic-sdk/index.ts
index 36eae1616a..93b5a9b2e3 100644
--- a/src/ui/libs/schematic-sdk/index.ts
+++ b/src/ui/libs/schematic-sdk/index.ts
@@ -99,15 +99,16 @@ export const initSdk = () => {
     return sdk;
 };
 
-// TODO: return object with sdk and cancelRequest
 export const getSdk = () => {
-    return registry.libs.schematicSdk.get() as DatalensSdk<{
+    const sdk = registry.libs.schematicSdk.get() as DatalensSdk<{
         root: typeof schema;
     }>;
+    return {
+        sdk,
+        // Use this method instead of sdk.cancelRequest
+        cancelRequest(concurrentId: string) {
+            emitCancelRequest(concurrentId);
+            sdk.cancelRequest(concurrentId);
+        },
+    };
 };
-
-// Use it instead of sdk.cancelRequest
-export function cancelRequest(concurrentId: string) {
-    emitCancelRequest(concurrentId);
-    getSdk().cancelRequest(concurrentId);
-}
diff --git a/src/ui/store/actions/collectionsStructure.ts b/src/ui/store/actions/collectionsStructure.ts
index c202f44445..7a33cc438b 100644
--- a/src/ui/store/actions/collectionsStructure.ts
+++ b/src/ui/store/actions/collectionsStructure.ts
@@ -123,7 +123,7 @@ export const getRootCollectionPermissions = () => {
             type: GET_ROOT_COLLECTION_PERMISSIONS_LOADING,
         });
         return getSdk()
-            .us.getRootCollectionPermissions()
+            .sdk.us.getRootCollectionPermissions()
             .then((data) => {
                 dispatch({
                     type: GET_ROOT_COLLECTION_PERMISSIONS_SUCCESS,
@@ -133,7 +133,7 @@ export const getRootCollectionPermissions = () => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError(
@@ -188,7 +188,7 @@ export const getCollectionBreadcrumbs = ({collectionId}: {collectionId: string})
             type: GET_COLLECTION_BREADCRUMBS_LOADING,
         });
         return getSdk()
-            .us.getCollectionBreadcrumbs({
+            .sdk.us.getCollectionBreadcrumbs({
                 collectionId,
             })
             .then((data) => {
@@ -199,7 +199,7 @@ export const getCollectionBreadcrumbs = ({collectionId}: {collectionId: string})
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     dispatch(
@@ -242,7 +242,7 @@ export const getCollection = ({collectionId}: {collectionId: string}) => {
             type: GET_COLLECTION_LOADING,
         });
         return getSdk()
-            .us.getCollection({
+            .sdk.us.getCollection({
                 collectionId,
                 includePermissionsInfo: true,
             })
@@ -254,7 +254,7 @@ export const getCollection = ({collectionId}: {collectionId: string}) => {
                 return data as CollectionWithPermissions;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/getCollection failed', error);
@@ -319,7 +319,7 @@ export const getStructureItems = ({
             type: GET_STRUCTURE_ITEMS_LOADING,
         });
         return getSdk()
-            .us.getStructureItems({
+            .sdk.us.getStructureItems({
                 collectionId,
                 includePermissionsInfo: false,
                 page,
@@ -338,7 +338,7 @@ export const getStructureItems = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/getStructureItems failed', error);
@@ -390,7 +390,7 @@ export const createCollection = ({
             type: CREATE_COLLECTION_LOADING,
         });
         return getSdk()
-            .us.createCollection({
+            .sdk.us.createCollection({
                 title,
                 description,
                 parentId,
@@ -401,7 +401,10 @@ export const createCollection = ({
                     await waitOperation({
                         operation,
                         loader: ({concurrentId}) =>
-                            getSdk().us.getOperation({operationId: operation.id}, {concurrentId}),
+                            getSdk().sdk.us.getOperation(
+                                {operationId: operation.id},
+                                {concurrentId},
+                            ),
                     }).promise;
                 }
                 return result;
@@ -414,7 +417,7 @@ export const createCollection = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/createCollection failed', error);
@@ -468,7 +471,7 @@ export const copyTemplate = ({
             type: COPY_TEMPLATE_LOADING,
         });
         return getSdk()
-            .us.copyTemplate({
+            .sdk.us.copyTemplate({
                 templateName,
                 workbookId,
                 connectionId,
@@ -482,7 +485,7 @@ export const copyTemplate = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/copyTemplate failed', error);
@@ -534,7 +537,7 @@ export const createWorkbook = ({
             type: CREATE_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.createWorkbook({
+            .sdk.us.createWorkbook({
                 title,
                 description,
                 collectionId,
@@ -545,7 +548,10 @@ export const createWorkbook = ({
                     await waitOperation({
                         operation,
                         loader: ({concurrentId}) =>
-                            getSdk().us.getOperation({operationId: operation.id}, {concurrentId}),
+                            getSdk().sdk.us.getOperation(
+                                {operationId: operation.id},
+                                {concurrentId},
+                            ),
                     }).promise;
                 }
                 return result;
@@ -558,7 +564,7 @@ export const createWorkbook = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/createWorkbook failed', error);
@@ -603,7 +609,7 @@ export const deleteWorkbooks = ({workbookIds}: {workbookIds: string[]}) => {
         });
 
         return getSdk()
-            .us.deleteWorkbooks({
+            .sdk.us.deleteWorkbooks({
                 workbookIds,
             })
             .then((data) => {
@@ -614,7 +620,7 @@ export const deleteWorkbooks = ({workbookIds}: {workbookIds: string[]}) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/deleteWorkbooks failed', error);
@@ -659,7 +665,7 @@ export const deleteCollections = ({collectionIds}: {collectionIds: string[]}) =>
         });
 
         return getSdk()
-            .us.deleteCollections({
+            .sdk.us.deleteCollections({
                 collectionIds,
             })
             .then((data) => {
@@ -670,7 +676,7 @@ export const deleteCollections = ({collectionIds}: {collectionIds: string[]}) =>
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/deleteCollections failed', error);
@@ -721,7 +727,7 @@ export const moveCollections = ({
         });
 
         return getSdk()
-            .us.moveCollections({
+            .sdk.us.moveCollections({
                 collectionIds,
                 parentId,
             })
@@ -733,7 +739,7 @@ export const moveCollections = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/moveCollections failed', error);
@@ -783,7 +789,7 @@ export const moveWorkbooks = ({
             type: MOVE_WORKBOOKS_LOADING,
         });
         return getSdk()
-            .us.moveWorkbooks({
+            .sdk.us.moveWorkbooks({
                 workbookIds,
                 collectionId,
             })
@@ -795,7 +801,7 @@ export const moveWorkbooks = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/moveWorkbooks failed', error);
@@ -847,7 +853,7 @@ export const moveCollection = ({
             type: MOVE_COLLECTION_LOADING,
         });
         return getSdk()
-            .us.moveCollection({
+            .sdk.us.moveCollection({
                 collectionId,
                 parentId,
                 title,
@@ -860,7 +866,7 @@ export const moveCollection = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/moveCollection failed', error);
@@ -912,7 +918,7 @@ export const moveWorkbook = ({
             type: MOVE_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.moveWorkbook({
+            .sdk.us.moveWorkbook({
                 workbookId,
                 collectionId,
                 title,
@@ -925,7 +931,7 @@ export const moveWorkbook = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/moveWorkbook failed', error);
@@ -977,7 +983,7 @@ export const copyWorkbook = ({
             type: COPY_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.copyWorkbook({
+            .sdk.us.copyWorkbook({
                 workbookId,
                 collectionId,
                 title,
@@ -988,7 +994,10 @@ export const copyWorkbook = ({
                     await waitOperation({
                         operation,
                         loader: ({concurrentId}) =>
-                            getSdk().us.getOperation({operationId: operation.id}, {concurrentId}),
+                            getSdk().sdk.us.getOperation(
+                                {operationId: operation.id},
+                                {concurrentId},
+                            ),
                     }).promise;
                 }
                 return result;
@@ -1001,7 +1010,7 @@ export const copyWorkbook = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/copyWorkbook failed', error);
@@ -1054,7 +1063,7 @@ export const updateWorkbook = ({
             type: UPDATE_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.updateWorkbook({
+            .sdk.us.updateWorkbook({
                 workbookId,
                 title,
                 description,
@@ -1068,7 +1077,7 @@ export const updateWorkbook = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/updateWorkbook failed', error);
@@ -1121,7 +1130,7 @@ export const updateCollection = ({
             type: UPDATE_COLLECTION_LOADING,
         });
         return getSdk()
-            .us.updateCollection({
+            .sdk.us.updateCollection({
                 collectionId,
                 title,
                 description,
@@ -1135,7 +1144,7 @@ export const updateCollection = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/updateCollection failed', error);
@@ -1179,7 +1188,7 @@ export const deleteCollection = ({collectionId}: {collectionId: string}) => {
             type: DELETE_COLLECTION_LOADING,
         });
         return getSdk()
-            .us.deleteCollection({
+            .sdk.us.deleteCollection({
                 collectionId,
             })
             .then((data) => {
@@ -1190,7 +1199,7 @@ export const deleteCollection = ({collectionId}: {collectionId: string}) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/deleteCollection failed', error);
@@ -1234,7 +1243,7 @@ export const deleteWorkbook = ({workbookId}: {workbookId: string}) => {
             type: DELETE_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.deleteWorkbook({
+            .sdk.us.deleteWorkbook({
                 workbookId,
             })
             .then((data) => {
@@ -1245,7 +1254,7 @@ export const deleteWorkbook = ({workbookId}: {workbookId: string}) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/deleteWorkbook failed', error);
@@ -1297,7 +1306,7 @@ export const addDemoWorkbook = ({
             type: ADD_DEMO_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.copyWorkbookTemplate({
+            .sdk.us.copyWorkbookTemplate({
                 workbookId,
                 title,
                 collectionId,
@@ -1308,7 +1317,10 @@ export const addDemoWorkbook = ({
                     await waitOperation({
                         operation,
                         loader: ({concurrentId}) =>
-                            getSdk().us.getOperation({operationId: operation.id}, {concurrentId}),
+                            getSdk().sdk.us.getOperation(
+                                {operationId: operation.id},
+                                {concurrentId},
+                            ),
                     }).promise;
                 }
                 return result;
@@ -1321,7 +1333,7 @@ export const addDemoWorkbook = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collectionsStructure/addDemoWorkbook failed', error);
diff --git a/src/ui/store/actions/colorPaletteEditor.ts b/src/ui/store/actions/colorPaletteEditor.ts
index 461ed6298b..2cb448435a 100644
--- a/src/ui/store/actions/colorPaletteEditor.ts
+++ b/src/ui/store/actions/colorPaletteEditor.ts
@@ -44,7 +44,7 @@ export function setColorPalettes(colorPalettes: ColorPalette[]): SetColorPalette
 export function fetchColorPalettes() {
     return async (dispatch: AppDispatch) => {
         try {
-            const colorPalettes = await getSdk().us.getColorPalettesList();
+            const colorPalettes = await getSdk().sdk.us.getColorPalettesList();
 
             dispatch(setColorPalettes(colorPalettes));
         } catch (e) {
@@ -66,9 +66,9 @@ export function saveCurrentPalette() {
         const isUpdateAction = currentColorPalette.colorPaletteId;
 
         if (isUpdateAction) {
-            operationPromise = getSdk().us.updateColorPalette(currentColorPalette);
+            operationPromise = getSdk().sdk.us.updateColorPalette(currentColorPalette);
         } else {
-            operationPromise = getSdk().us.createColorPalette({
+            operationPromise = getSdk().sdk.us.createColorPalette({
                 displayName: currentColorPalette.displayName,
                 colors: currentColorPalette.colors,
                 isDefault: currentColorPalette.isDefault,
@@ -110,7 +110,7 @@ export function deleteColorPalette(colorPalette: ColorPalette) {
         }
 
         try {
-            await getSdk().us.deleteColorPalette({
+            await getSdk().sdk.us.deleteColorPalette({
                 colorPaletteId,
             });
         } catch (error) {
diff --git a/src/ui/store/actions/copyEntriesToWorkbook.ts b/src/ui/store/actions/copyEntriesToWorkbook.ts
index dd4a08bd01..1be809d3ad 100644
--- a/src/ui/store/actions/copyEntriesToWorkbook.ts
+++ b/src/ui/store/actions/copyEntriesToWorkbook.ts
@@ -54,7 +54,7 @@ export const getEntry = (params: GetEntryArgs) => {
             type: GET_ENTRY_LOADING,
         });
         return getSdk()
-            .us.getEntry(params)
+            .sdk.us.getEntry(params)
             .then((data) => {
                 dispatch({
                     type: GET_ENTRY_SUCCESS,
@@ -63,7 +63,7 @@ export const getEntry = (params: GetEntryArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('copyEntryToWorkbook/getEntry failed', error);
@@ -107,7 +107,7 @@ export const getRelations = (params: GetRelationsArgs) => {
             type: GET_RELATIONS_LOADING,
         });
         return getSdk()
-            .us.getRelations(params)
+            .sdk.us.getRelations(params)
             .then((data) => {
                 dispatch({
                     type: GET_RELATIONS_SUCCESS,
@@ -116,7 +116,7 @@ export const getRelations = (params: GetRelationsArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('copyEntryToWorkbook/getRelations failed', error);
@@ -160,7 +160,7 @@ export const copyEntriesToWorkbook = (params: CopyEntriesToWorkbookArgs) => {
             type: COPY_ENTRIES_TO_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.copyEntriesToWorkbook(params)
+            .sdk.us.copyEntriesToWorkbook(params)
             .then((data) => {
                 dispatch({
                     type: COPY_ENTRIES_TO_WORKBOOK_SUCCESS,
@@ -169,7 +169,7 @@ export const copyEntriesToWorkbook = (params: CopyEntriesToWorkbookArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('copyEntriesToWorkbook/copyEntriesToWorkbook failed', error);
diff --git a/src/ui/store/actions/entryContent.ts b/src/ui/store/actions/entryContent.ts
index 3a203e1759..bb197242ce 100644
--- a/src/ui/store/actions/entryContent.ts
+++ b/src/ui/store/actions/entryContent.ts
@@ -21,9 +21,9 @@ export function fetchEntryById(
         let entry;
 
         try {
-            entry = await getSdk().us.getEntry({entryId, includePermissionsInfo: true}, params);
+            entry = await getSdk().sdk.us.getEntry({entryId, includePermissionsInfo: true}, params);
         } catch (error: any) {
-            if (getSdk().isCancel(error)) {
+            if (getSdk().sdk.isCancel(error)) {
                 entry = null;
             }
         }
@@ -92,7 +92,7 @@ export function loadRevisions({
         let entries: GetRevisionsEntry[] = [];
 
         try {
-            const getRevisionsResponse = await getSdk().us.getRevisions(
+            const getRevisionsResponse = await getSdk().sdk.us.getRevisions(
                 {
                     entryId,
                     pageSize: REVISIONS_LIST_PART_SIZE,
@@ -103,7 +103,7 @@ export function loadRevisions({
             hasNextPage = getRevisionsResponse.hasNextPage;
             entries = getRevisionsResponse.entries;
         } catch (error) {
-            if (getSdk().isCancel(error)) {
+            if (getSdk().sdk.isCancel(error)) {
                 return;
             }
             throw error;
@@ -128,7 +128,7 @@ export function loadRevisions({
             if (revIdsSet.size > 0) {
                 let extraEntries: GetRevisionsEntry[] = [];
                 try {
-                    const getRevisionsResponse = await getSdk().us.getRevisions(
+                    const getRevisionsResponse = await getSdk().sdk.us.getRevisions(
                         {
                             entryId,
                             pageSize: REVISIONS_LIST_PART_SIZE,
@@ -139,7 +139,7 @@ export function loadRevisions({
                     );
                     extraEntries = getRevisionsResponse.entries;
                 } catch (error) {
-                    if (getSdk().isCancel(error)) {
+                    if (getSdk().sdk.isCancel(error)) {
                         return;
                     }
                     throw error;
diff --git a/src/ui/store/actions/iamAccessDialog.ts b/src/ui/store/actions/iamAccessDialog.ts
index 137eecb435..bea776d2a0 100644
--- a/src/ui/store/actions/iamAccessDialog.ts
+++ b/src/ui/store/actions/iamAccessDialog.ts
@@ -126,7 +126,7 @@ export const listAccessBindings = ({
         };
 
         const catchHandler = (error: Error) => {
-            const isCanceled = getSdk().isCancel(error);
+            const isCanceled = getSdk().sdk.isCancel(error);
 
             if (!isCanceled) {
                 dispatch(
@@ -147,7 +147,7 @@ export const listAccessBindings = ({
 
         if (resourceType === ResourceType.Collection) {
             return getSdk()
-                .extensions.listCollectionAccessBindings({
+                .sdk.extensions.listCollectionAccessBindings({
                     collectionId: resourceId,
                     ...restArgs,
                 })
@@ -155,7 +155,7 @@ export const listAccessBindings = ({
                 .catch(catchHandler);
         } else {
             return getSdk()
-                .extensions.listWorkbookAccessBindings({
+                .sdk.extensions.listWorkbookAccessBindings({
                     workbookId: resourceId,
                     ...restArgs,
                 })
@@ -206,7 +206,7 @@ export const updateAccessBindings = ({
         };
 
         const catchHandler = (error: Error) => {
-            const isCanceled = getSdk().isCancel(error);
+            const isCanceled = getSdk().sdk.isCancel(error);
 
             if (!isCanceled) {
                 dispatch(
@@ -230,7 +230,7 @@ export const updateAccessBindings = ({
                 await waitOperation({
                     operation,
                     loader: ({concurrentId}) =>
-                        getSdk().us.getOperation({operationId: operation.id}, {concurrentId}),
+                        getSdk().sdk.us.getOperation({operationId: operation.id}, {concurrentId}),
                 }).promise;
             }
             return operation;
@@ -238,7 +238,7 @@ export const updateAccessBindings = ({
 
         if (resourceType === ResourceType.Collection) {
             return getSdk()
-                .extensions.updateCollectionAccessBindings({
+                .sdk.extensions.updateCollectionAccessBindings({
                     collectionId: resourceId,
                     deltas,
                 })
@@ -247,7 +247,7 @@ export const updateAccessBindings = ({
                 .catch(catchHandler);
         } else {
             return getSdk()
-                .extensions.updateWorkbookAccessBindings({
+                .sdk.extensions.updateWorkbookAccessBindings({
                     workbookId: resourceId,
                     deltas,
                 })
@@ -282,7 +282,7 @@ export const getCollectionBreadcrumbs = ({collectionId}: {collectionId: string})
         });
 
         return getSdk()
-            .us.getCollectionBreadcrumbs({
+            .sdk.us.getCollectionBreadcrumbs({
                 collectionId,
             })
             .then((data) => {
@@ -293,7 +293,7 @@ export const getCollectionBreadcrumbs = ({collectionId}: {collectionId: string})
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 dispatch({
                     type: GET_COLLECTION_BREADCRUMBS_FAILED,
@@ -326,7 +326,7 @@ export const batchListMembers = ({subjectIds}: GetClaimsArgs) => {
         });
 
         return getSdk()
-            .extensions.getClaims({
+            .sdk.extensions.getClaims({
                 subjectIds,
             })
             .then((data) => {
@@ -337,7 +337,7 @@ export const batchListMembers = ({subjectIds}: GetClaimsArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     dispatch(
@@ -388,7 +388,7 @@ export const suggestBatchListMembers = ({
         });
 
         return getSdk()
-            .extensions.batchListMembers({
+            .sdk.extensions.batchListMembers({
                 id,
                 search: search.toLowerCase(),
                 subType,
@@ -406,7 +406,7 @@ export const suggestBatchListMembers = ({
                 return {subjects: members, nextPageToken};
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     dispatch(
diff --git a/src/ui/store/actions/migrationToWorkbook.ts b/src/ui/store/actions/migrationToWorkbook.ts
index 55a24a4ae7..95a53745e8 100644
--- a/src/ui/store/actions/migrationToWorkbook.ts
+++ b/src/ui/store/actions/migrationToWorkbook.ts
@@ -58,7 +58,7 @@ export const getEntry = (params: GetEntryArgs) => {
             type: GET_ENTRY_LOADING,
         });
         return getSdk()
-            .us.getEntry(params)
+            .sdk.us.getEntry(params)
             .then((data) => {
                 dispatch({
                     type: GET_ENTRY_SUCCESS,
@@ -67,7 +67,7 @@ export const getEntry = (params: GetEntryArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('migrationToWorkbook/getEntry failed', error);
@@ -111,7 +111,7 @@ export const getRelationsGraph = (params: GetRelationsGraphArgs) => {
             type: GET_RELATIONS_GRAPH_LOADING,
         });
         return getSdk()
-            .us.getRelationsGraph(params)
+            .sdk.us.getRelationsGraph(params)
             .then((data) => {
                 dispatch({
                     type: GET_RELATIONS_GRAPH_SUCCESS,
@@ -120,7 +120,7 @@ export const getRelationsGraph = (params: GetRelationsGraphArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('migrationToWorkbook/getRelationsGraph failed', error);
@@ -164,7 +164,7 @@ export const getRelations = (params: GetRelationsArgs) => {
             type: GET_RELATIONS_LOADING,
         });
         return getSdk()
-            .us.getRelations(params)
+            .sdk.us.getRelations(params)
             .then((data) => {
                 dispatch({
                     type: GET_RELATIONS_SUCCESS,
@@ -173,7 +173,7 @@ export const getRelations = (params: GetRelationsArgs) => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('migrationToWorkbook/getRelations failed', error);
@@ -217,7 +217,7 @@ export const migrateEntriesToWorkbookByTransfer = (params: MigrateEntriesToWorkb
             type: MIGRATE_ENTRIES_TO_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.migrateEntriesToWorkbookByTransfer(params)
+            .sdk.us.migrateEntriesToWorkbookByTransfer(params)
             .then((data) => {
                 dispatch({
                     type: MIGRATE_ENTRIES_TO_WORKBOOK_SUCCESS,
@@ -226,7 +226,7 @@ export const migrateEntriesToWorkbookByTransfer = (params: MigrateEntriesToWorkb
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('migrationToWorkbook/migrateEntriesToWorkbook failed', error);
@@ -254,7 +254,7 @@ export const migrateEntriesToWorkbookByCopy = (params: MigrateEntriesToWorkbookA
             type: MIGRATE_ENTRIES_TO_WORKBOOK_LOADING,
         });
         return getSdk()
-            .us.migrateEntriesToWorkbookByCopy(params)
+            .sdk.us.migrateEntriesToWorkbookByCopy(params)
             .then((data) => {
                 dispatch({
                     type: MIGRATE_ENTRIES_TO_WORKBOOK_SUCCESS,
@@ -263,7 +263,7 @@ export const migrateEntriesToWorkbookByCopy = (params: MigrateEntriesToWorkbookA
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('migrationToWorkbook/migrateEntriesToWorkbook failed', error);
diff --git a/src/ui/units/collections-navigation/store/actions/index.tsx b/src/ui/units/collections-navigation/store/actions/index.tsx
index a7db822c45..54de7ec027 100644
--- a/src/ui/units/collections-navigation/store/actions/index.tsx
+++ b/src/ui/units/collections-navigation/store/actions/index.tsx
@@ -45,7 +45,7 @@ export const getCollectionBreadcrumbs = ({collectionId}: {collectionId: string})
             type: GET_COLLECTION_BREADCRUMBS_LOADING,
         });
         return getSdk()
-            .us.getCollectionBreadcrumbs({
+            .sdk.us.getCollectionBreadcrumbs({
                 collectionId,
             })
             .then((data) => {
@@ -56,7 +56,7 @@ export const getCollectionBreadcrumbs = ({collectionId}: {collectionId: string})
                 return data;
             })
             .catch((error: Error) => {
-                if (!getSdk().isCancel(error)) {
+                if (!getSdk().sdk.isCancel(error)) {
                     logger.logError(
                         'collections-navigation/getCollectionBreadcrumbs failed',
                         error,
diff --git a/src/ui/units/collections/store/actions/index.tsx b/src/ui/units/collections/store/actions/index.tsx
index 9b4df3f2c7..4b5f09a213 100644
--- a/src/ui/units/collections/store/actions/index.tsx
+++ b/src/ui/units/collections/store/actions/index.tsx
@@ -62,7 +62,7 @@ export const getCollection = ({collectionId}: {collectionId: string}) => {
             type: GET_COLLECTION_LOADING,
         });
         return getSdk()
-            .us.getCollection({
+            .sdk.us.getCollection({
                 collectionId,
                 includePermissionsInfo: true,
             })
@@ -74,7 +74,7 @@ export const getCollection = ({collectionId}: {collectionId: string}) => {
                 return data as CollectionWithPermissions;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collections/getCollection failed', error);
@@ -158,7 +158,7 @@ export const getStructureItems = ({
             type: GET_STRUCTURE_ITEMS_LOADING,
         });
         return getSdk()
-            .us.getStructureItems({
+            .sdk.us.getStructureItems({
                 collectionId,
                 includePermissionsInfo: true,
                 page,
@@ -177,7 +177,7 @@ export const getStructureItems = ({
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collections/getStructureItems failed', error);
@@ -233,7 +233,7 @@ export const getRootCollectionPermissions = () => {
             type: GET_ROOT_COLLECTION_PERMISSIONS_LOADING,
         });
         return getSdk()
-            .us.getRootCollectionPermissions()
+            .sdk.us.getRootCollectionPermissions()
             .then((data) => {
                 dispatch({
                     type: GET_ROOT_COLLECTION_PERMISSIONS_SUCCESS,
@@ -242,7 +242,7 @@ export const getRootCollectionPermissions = () => {
                 return data;
             })
             .catch((error: Error) => {
-                const isCanceled = getSdk().isCancel(error);
+                const isCanceled = getSdk().sdk.isCancel(error);
 
                 if (!isCanceled) {
                     logger.logError('collections/getRootCollectionPermissions failed', error);
diff --git a/src/ui/units/connections/store/actions/api.ts b/src/ui/units/connections/store/actions/api.ts
index 024b3531f2..1cf4820cfd 100644
--- a/src/ui/units/connections/store/actions/api.ts
+++ b/src/ui/units/connections/store/actions/api.ts
@@ -40,7 +40,7 @@ const fetchEntry = async (
     error?: DataLensApiError;
 }> => {
     try {
-        const entry = await getSdk().us.getEntry({
+        const entry = await getSdk().sdk.us.getEntry({
             entryId,
             includePermissionsInfo: true,
         });
@@ -59,7 +59,7 @@ const fetchConnectionData = async (
     error?: DataLensApiError;
 }> => {
     try {
-        const connectionData = await getSdk().bi.getConnection({connectionId, workbookId});
+        const connectionData = await getSdk().sdk.bi.getConnection({connectionId, workbookId});
         return {connectionData};
     } catch (error) {
         logger.logError('Redux actions (conn): fetchConnectionData failed', error);
@@ -73,7 +73,7 @@ const fetchConnectors = async (): Promise<
     }
 > => {
     try {
-        return await getSdk().bi.getConnectors();
+        return await getSdk().sdk.bi.getConnectors();
     } catch (error) {
         logger.logError('Redux actions (conn): fetchConnectors failed', error);
         return {result: [], error};
@@ -88,7 +88,7 @@ const fetchConnectorSchema = async ({
     error?: DataLensApiError;
 }> => {
     try {
-        const {form: schema} = await getSdk().bi.getConnectorSchema({type, mode});
+        const {form: schema} = await getSdk().sdk.bi.getConnectorSchema({type, mode});
         return {schema};
     } catch (error) {
         logger.logError('Redux actions (conn): fetchConnectorForm failed', error);
@@ -112,7 +112,7 @@ const createConnection = async (
     form: FormDict,
 ): Promise<{id?: string; error?: DataLensApiError}> => {
     try {
-        const {id} = await getSdk().bi.createConnection(form);
+        const {id} = await getSdk().sdk.bi.createConnection(form);
         reachMetricaGoal(CounterName.Main, GoalId.ConnectionCreateSubmit, {
             type: form.type,
         });
@@ -129,7 +129,7 @@ const updateConnection = async (
     dbType: string,
 ): Promise<{error?: DataLensApiError}> => {
     try {
-        await getSdk().bi.updateConnection({...form, connectionId});
+        await getSdk().sdk.bi.updateConnection({...form, connectionId});
         reachMetricaGoal(CounterName.Main, GoalId.ConnectionEditSubmit, {
             type: dbType,
         });
@@ -142,7 +142,7 @@ const updateConnection = async (
 
 const checkConnectionParams = async (params: FormDict): Promise<CheckData> => {
     try {
-        await getSdk().bi.verifyConnectionParams(params);
+        await getSdk().sdk.bi.verifyConnectionParams(params);
         return {status: 'success', error: undefined};
     } catch (error) {
         logger.logError('Redux actions (conn): checkConnectionParams failed', error);
@@ -156,7 +156,7 @@ const checkConnection = async (
     workbookId: string | null,
 ): Promise<CheckData> => {
     try {
-        await getSdk().bi.verifyConnection({...params, connectionId, workbookId});
+        await getSdk().sdk.bi.verifyConnection({...params, connectionId, workbookId});
         return {status: 'success', error: undefined};
     } catch (error) {
         logger.logError('Redux actions (conn): checkConnection failed', error);
@@ -174,7 +174,7 @@ const copyTemplate = async (
     workbookId?: string;
 }> => {
     try {
-        const {entryId, workbookId: templateWorkbookId} = await getSdk().us.copyTemplate(
+        const {entryId, workbookId: templateWorkbookId} = await getSdk().sdk.us.copyTemplate(
             {connectionId, templateName, workbookId},
             {timeout: TIMEOUT_65_SEC},
         );
@@ -205,7 +205,7 @@ const checkFileStatus = async (
     fileId: string,
 ): Promise<{status: GetFileStatusResponse['status']; error?: DataLensApiError}> => {
     try {
-        const {status, error} = await getSdk().biConverter.getFileStatus({fileId});
+        const {status, error} = await getSdk().sdk.biConverter.getFileStatus({fileId});
 
         if (status === 'failed') {
             const code = error?.code;
@@ -230,7 +230,7 @@ const checkFileSourceStatus = async (
     sourceId: string,
 ): Promise<{status: GetFileSourceStatusResponse['status']; error?: DataLensApiError}> => {
     try {
-        const {status} = await getSdk().biConverter.getFileSourceStatus({
+        const {status} = await getSdk().sdk.biConverter.getFileSourceStatus({
             fileId,
             sourceId,
         });
@@ -250,7 +250,7 @@ const fetchFileSources = async (
     fileId: string,
 ): Promise<{sources: GetFileSourcesResponse['sources']; error?: DataLensApiError}> => {
     try {
-        const {sources} = await getSdk().biConverter.getFileSources({fileId});
+        const {sources} = await getSdk().sdk.biConverter.getFileSources({fileId});
         return {sources};
     } catch (error) {
         logger.logError('Redux actions (conn): fetchFileSources failed', error);
@@ -264,7 +264,7 @@ const updateFileSource = async (
     columnTypes?: UpdateFileSourceArgs['column_types'],
 ): Promise<{source: UpdateFileSourceResponse} | {sourceId: string; error: DataLensApiError}> => {
     try {
-        const source = await getSdk().biConverter.updateFileSource({
+        const source = await getSdk().sdk.biConverter.updateFileSource({
             fileId,
             sourceId,
             column_types: columnTypes,
@@ -283,7 +283,7 @@ const applySourceSettings = async (
     title?: string,
 ): Promise<{error?: DataLensApiError}> => {
     try {
-        await getSdk().biConverter.applySourceSettings({
+        await getSdk().sdk.biConverter.applySourceSettings({
             fileId,
             sourceId,
             data_settings: settings,
@@ -308,7 +308,7 @@ const addGoogleSheet = async ({
     refreshToken?: RefreshToken;
 }): Promise<{gsheet?: AddGoogleSheetResponse; error?: DataLensApiError}> => {
     try {
-        const gsheet = await getSdk().biConverter.addGoogleSheet({
+        const gsheet = await getSdk().sdk.biConverter.addGoogleSheet({
             type: 'gsheets',
             url,
             authorized,
@@ -326,7 +326,7 @@ const updateS3BasedConnectionData = async (
     args: UpdateS3BasedConnectionDataArgs,
 ): Promise<{files: UpdateS3BasedConnectionDataResponse['files']; error?: DataLensApiError}> => {
     try {
-        const {files} = await getSdk().biConverter.updateS3BasedConnectionData(args);
+        const {files} = await getSdk().sdk.biConverter.updateS3BasedConnectionData(args);
         return {files};
     } catch (error) {
         logger.logError('Redux actions (conn): addGoogleSheet failed', error);
@@ -348,7 +348,7 @@ const addYandexDocument = async ({
     oauthToken?: string;
 }): Promise<{document?: AddYandexDocumentResponse; error?: DataLensApiError}> => {
     try {
-        const document = await getSdk().biConverter.addYandexDocument({
+        const document = await getSdk().sdk.biConverter.addYandexDocument({
             authorized,
             connection_id: connectionId,
             type: 'yadocs',
@@ -367,7 +367,7 @@ const getOAuthUrl = async (
     args: GetOAuthUriArgs,
 ): Promise<GetOAuthUriResponse & {error?: DataLensApiError}> => {
     try {
-        return await getSdk().bi.getOAuthUri(args);
+        return await getSdk().sdk.bi.getOAuthUri(args);
     } catch (error) {
         return {uri: '', error};
     }
@@ -377,7 +377,7 @@ const getOAuthToken = async (
     args: GetOAuthTokenArgs,
 ): Promise<Partial<GetOAuthTokenResponse> & {error?: DataLensApiError}> => {
     try {
-        return await getSdk().bi.getOAuthToken(args);
+        return await getSdk().sdk.bi.getOAuthToken(args);
     } catch (error) {
         return {access_token: '', error};
     }
diff --git a/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.js b/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.js
index 5e1b570a35..0b2c9eb6c6 100644
--- a/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.js
+++ b/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.js
@@ -87,7 +87,7 @@ class InputLink extends React.PureComponent {
 
         try {
             this.setState({progress: true});
-            const {entry, params} = await getSdk().mix.resolveEntryByLink({
+            const {entry, params} = await getSdk().sdk.mix.resolveEntryByLink({
                 url: this.state.value,
             });
 
diff --git a/src/ui/units/dash/containers/Body/Body.tsx b/src/ui/units/dash/containers/Body/Body.tsx
index b51c2eef26..bc9c9aed0b 100644
--- a/src/ui/units/dash/containers/Body/Body.tsx
+++ b/src/ui/units/dash/containers/Body/Body.tsx
@@ -68,7 +68,6 @@ import {isEmbeddedMode} from 'ui/utils/embedded';
 import {getIsAsideHeaderEnabled} from '../../../../components/AsideHeaderAdapter';
 import {getConfiguredDashKit} from '../../../../components/DashKit/DashKit';
 import {DL} from '../../../../constants';
-import type SDK from '../../../../libs/sdk';
 import Utils from '../../../../utils';
 import {TYPES_TO_DIALOGS_MAP, getActionPanelItems} from '../../../../utils/getActionPanelItems';
 import {EmptyState} from '../../components/EmptyState/EmptyState';
@@ -239,7 +238,7 @@ class Body extends React.PureComponent<BodyProps> {
         if (!this.props.entryId) {
             return;
         }
-        const {hash} = await getSdk().us.createDashState({
+        const {hash} = await getSdk().sdk.us.createDashState({
             entryId: this.props.entryId,
             data,
         });
@@ -373,7 +372,7 @@ class Body extends React.PureComponent<BodyProps> {
             <div className={b()}>
                 {this.renderBody()}
                 <PaletteEditor />
-                <EntryDialogues sdk={getSdk() as unknown as SDK} ref={this.entryDialoguesRef} />
+                <EntryDialogues ref={this.entryDialoguesRef} />
             </div>
         );
     }
diff --git a/src/ui/units/dash/containers/Dash/Dash.tsx b/src/ui/units/dash/containers/Dash/Dash.tsx
index 9dba6541d4..b9efc8e37e 100644
--- a/src/ui/units/dash/containers/Dash/Dash.tsx
+++ b/src/ui/units/dash/containers/Dash/Dash.tsx
@@ -229,7 +229,7 @@ class DashComponent extends React.PureComponent<DashProps, DashState> {
             return;
         }
         return getSdk()
-            .us.extendLock({
+            .sdk.us.extendLock({
                 entryId: this.props.entry.entryId,
                 data: {lockToken: this.props.lockToken, duration: LOCK_DURATION},
             })
diff --git a/src/ui/units/dash/containers/Dialogs/Connections/Connections.js b/src/ui/units/dash/containers/Dialogs/Connections/Connections.js
index 4bb5515fcf..2858b25ca3 100644
--- a/src/ui/units/dash/containers/Dialogs/Connections/Connections.js
+++ b/src/ui/units/dash/containers/Dialogs/Connections/Connections.js
@@ -200,7 +200,7 @@ class Connections extends React.PureComponent {
             const datasetsIds = Object.keys(datasets);
 
             if (!isEmpty(entriesIds) && (!isEmpty(datasetsIds) || !isEmpty(controlsIds))) {
-                entriesDatasetsFields = await getSdk().mix.getEntriesDatasetsFields({
+                entriesDatasetsFields = await getSdk().sdk.mix.getEntriesDatasetsFields({
                     entriesIds,
                     datasetsIds,
                     workbookId: this.props.workbookId,
diff --git a/src/ui/units/dash/containers/Dialogs/DialogEditQuery/DialogEditQuery.tsx b/src/ui/units/dash/containers/Dialogs/DialogEditQuery/DialogEditQuery.tsx
index 193df369fd..b14c7f3a3d 100644
--- a/src/ui/units/dash/containers/Dialogs/DialogEditQuery/DialogEditQuery.tsx
+++ b/src/ui/units/dash/containers/Dialogs/DialogEditQuery/DialogEditQuery.tsx
@@ -71,7 +71,7 @@ const DialogEditQuery: React.FC = () => {
         const queryContent: ConnectionQueryContent = {query};
         setLoading(true);
         getSdk()
-            .bi.getConnectionTypedQueryData({
+            .sdk.bi.getConnectionTypedQueryData({
                 connectionId,
                 workbookId,
                 body: {
diff --git a/src/ui/units/dash/store/actions/base/actions.ts b/src/ui/units/dash/store/actions/base/actions.ts
index 6764d4dffe..dd5d112de5 100644
--- a/src/ui/units/dash/store/actions/base/actions.ts
+++ b/src/ui/units/dash/store/actions/base/actions.ts
@@ -83,7 +83,7 @@ export const setSelectStateMode = ({
                 } = getState();
 
                 const hashData = await getSdk()
-                    .us.getDashState({entryId, hash: stateHash})
+                    .sdk.us.getDashState({entryId, hash: stateHash})
                     .catch((error) => {
                         logger.logError('getDashState failed', error);
                         console.error('STATE_LOAD', error);
@@ -125,7 +125,7 @@ export const setEditMode = (successCallback = () => {}, failCallback = () => {})
         }
 
         try {
-            const {savedId} = await getSdk().us.getEntryMeta({entryId});
+            const {savedId} = await getSdk().sdk.us.getEntryMeta({entryId});
 
             if (stateSavedId !== savedId) {
                 dispatch(
@@ -276,7 +276,7 @@ export const load = ({
                 }),
                 hash
                     ? getSdk()
-                          .us.getDashState({
+                          .sdk.us.getDashState({
                               entryId,
                               hash,
                           })
diff --git a/src/ui/units/dash/store/actions/dashTyped.ts b/src/ui/units/dash/store/actions/dashTyped.ts
index 0961088a5e..9d620bc0e5 100644
--- a/src/ui/units/dash/store/actions/dashTyped.ts
+++ b/src/ui/units/dash/store/actions/dashTyped.ts
@@ -80,7 +80,7 @@ export const cleanLock = (): SetStateAction<{lockToken: null}> => ({
 
 export const setLock = (entryId: string, force = false, noEditMode = false) => {
     return async function (dispatch: DashDispatch) {
-        const {lockToken} = await getSdk().us.createLock({
+        const {lockToken} = await getSdk().sdk.us.createLock({
             entryId,
             data: {duration: LOCK_DURATION, force},
         });
@@ -111,7 +111,7 @@ export const deleteLock = () => {
 
         if (lockToken && entryId) {
             await getSdk()
-                .us.deleteLock({
+                .sdk.us.deleteLock({
                     entryId: entryId,
                     params: {lockToken},
                 })
@@ -252,7 +252,7 @@ export function setTabHashState(data: Omit<SetTabHashStateAction['payload'], 'ha
 
         if (stateHashId && entryId) {
             const hashData = await getSdk()
-                .us.getDashState({entryId, hash: stateHashId})
+                .sdk.us.getDashState({entryId, hash: stateHashId})
                 .catch((error) => logger.logError('getDashState failed', error));
 
             if (hashData) {
@@ -649,7 +649,7 @@ export function copyDash({
         let dashData: DashData;
 
         if (selectDash(state) === null || selectEntryId(state) !== entryId) {
-            const response = await getSdk().us.getEntry({entryId});
+            const response = await getSdk().sdk.us.getEntry({entryId});
 
             if (response.scope === EntryScope.Dash) {
                 dashData = (response as any as DashEntry).data;
diff --git a/src/ui/units/datasets/containers/DatasetSources/DatasetSources.js b/src/ui/units/datasets/containers/DatasetSources/DatasetSources.js
index c1acadf6db..4a41348453 100644
--- a/src/ui/units/datasets/containers/DatasetSources/DatasetSources.js
+++ b/src/ui/units/datasets/containers/DatasetSources/DatasetSources.js
@@ -208,7 +208,7 @@ class DatasetSources extends React.Component {
 
     selectConnection = async ({entryId}) => {
         try {
-            const connection = await getSdk().us.getEntry({entryId});
+            const connection = await getSdk().sdk.us.getEntry({entryId});
 
             this.props.addConnection({connection});
 
@@ -592,7 +592,7 @@ class DatasetSources extends React.Component {
 
     replaceConnection = async (connection, {entryId}) => {
         try {
-            const newConnection = await getSdk().us.getEntry({entryId});
+            const newConnection = await getSdk().sdk.us.getEntry({entryId});
 
             const update = {connection, newConnection};
             this.updateDatasetConfig({
diff --git a/src/ui/units/datasets/store/actions/creators/dataset.js b/src/ui/units/datasets/store/actions/creators/dataset.js
index 44a8e5b3ba..7ea3fe2cde 100644
--- a/src/ui/units/datasets/store/actions/creators/dataset.js
+++ b/src/ui/units/datasets/store/actions/creators/dataset.js
@@ -130,7 +130,7 @@ function setInitialSources(ids) {
             if (ids.length) {
                 const result = await Promise.allSettled(
                     ids.map((id) =>
-                        getSdk().us.getEntry({
+                        getSdk().sdk.us.getEntry({
                             entryId: id,
                             includePermissionsInfo: true,
                         }),
@@ -195,10 +195,10 @@ export function initialFetchDataset({datasetId}) {
                 payload: {},
             });
 
-            const meta = await getSdk().us.getEntryMeta({entryId: datasetId});
+            const meta = await getSdk().sdk.us.getEntryMeta({entryId: datasetId});
             const workbookId = meta.workbookId ?? null;
 
-            const dataset = await getSdk().bi.getDatasetByVersion({
+            const dataset = await getSdk().sdk.bi.getDatasetByVersion({
                 datasetId,
                 workbookId,
                 version: 'draft',
@@ -277,7 +277,7 @@ export function fetchDataset({datasetId}) {
 
             const workbookId = workbookIdSelector(getState());
 
-            const dataset = await getSdk().bi.getDatasetByVersion({
+            const dataset = await getSdk().sdk.bi.getDatasetByVersion({
                 datasetId,
                 workbookId,
                 version: 'draft',
@@ -338,11 +338,11 @@ export function saveDataset({
                     creationData.name = nameFromKey;
                 }
 
-                const {id: createdDatasetId} = await getSdk().bi.createDataset(creationData);
+                const {id: createdDatasetId} = await getSdk().sdk.bi.createDataset(creationData);
 
                 datasetId = createdDatasetId;
             } else {
-                const validation = await getSdk().bi.updateDataset({
+                const validation = await getSdk().sdk.sdk.bi.updateDataset({
                     datasetId,
                     dataset,
                     multisource: true,
@@ -398,7 +398,7 @@ export function fetchFieldTypes() {
         let types;
 
         try {
-            const response = await getSdk().bi.getFieldTypes();
+            const response = await getSdk().sdk.bi.getFieldTypes();
 
             types = response.types
                 .map((type) => {
@@ -469,7 +469,7 @@ export function getSources(connectionId, workbookId) {
         let sources = [];
 
         try {
-            const result = await getSdk().bi.getSources(
+            const result = await getSdk().sdk.bi.getSources(
                 {connectionId, workbookId, limit: 10000},
                 {concurrentId: 'getSources', timeout: TIMEOUT_65_SEC},
             );
@@ -491,7 +491,7 @@ export function getSources(connectionId, workbookId) {
             dispatch(setFreeformSources(freeformSources));
             dispatch(setSourcesLoadingError(null));
         } catch (error) {
-            if (!getSdk().isCancel(error)) {
+            if (!getSdk().sdk.isCancel(error)) {
                 logger.logError('dataset: getSources failed', error);
                 error.connectionId = connectionId;
                 dispatch(setSourcesLoadingError(error));
diff --git a/src/ui/units/datasets/store/actions/creators/datasetTyped.ts b/src/ui/units/datasets/store/actions/creators/datasetTyped.ts
index 066d3eed14..60c3be66bd 100644
--- a/src/ui/units/datasets/store/actions/creators/datasetTyped.ts
+++ b/src/ui/units/datasets/store/actions/creators/datasetTyped.ts
@@ -183,7 +183,7 @@ const dispatchFetchPreviewDataset = async (
         let previewDataset: GetPreviewResponse = {};
 
         if (resultSchema.length && !isLoading) {
-            previewDataset = await getSdk().bi.getPreview(
+            previewDataset = await getSdk().sdk.bi.getPreview(
                 {
                     datasetId,
                     workbookId,
@@ -926,7 +926,7 @@ export function validateDataset({compareContent, initial = false}: ValidateDatas
 
             const workbookId = workbookIdSelector(getState());
 
-            const validation = await getSdk().bi.validateDataset(
+            const validation = await getSdk().sdk.bi.validateDataset(
                 {
                     datasetId,
                     workbookId,
@@ -953,7 +953,7 @@ export function validateDataset({compareContent, initial = false}: ValidateDatas
                 dispatch(toggleSaveDataset({enable: true}));
             }
         } catch (error) {
-            if (!getSdk().isCancel(error)) {
+            if (!getSdk().sdk.isCancel(error)) {
                 const filteredError = getFilteredObject(error, [
                     'details.data.dataset',
                     'details.data.options',
diff --git a/src/ui/units/editor/components/Documentation/Documentation.js b/src/ui/units/editor/components/Documentation/Documentation.js
index 589f9a6673..6cb5cf597c 100644
--- a/src/ui/units/editor/components/Documentation/Documentation.js
+++ b/src/ui/units/editor/components/Documentation/Documentation.js
@@ -132,7 +132,7 @@ function ModuleDocumentation({module}) {
     return (
         <React.Fragment>
             <div className={b('module-docs')}>
-                <Fetch fetch={() => getSdk().us.getEntryByKey({key})}>
+                <Fetch fetch={() => getSdk().sdk.us.getEntryByKey({key})}>
                     {({data}) => renderMarkdown(data.data)}
                 </Fetch>
             </div>
diff --git a/src/ui/units/editor/components/Revisions/Revisions.tsx b/src/ui/units/editor/components/Revisions/Revisions.tsx
index c7afb3c0e9..5d3248d57e 100644
--- a/src/ui/units/editor/components/Revisions/Revisions.tsx
+++ b/src/ui/units/editor/components/Revisions/Revisions.tsx
@@ -176,7 +176,7 @@ class Revisions extends React.Component<Props, RevisionsState> {
                 this.setState({status: Status.Loading, loadMore: true});
             }
             const {entry} = this.props;
-            const {hasNextPage, entries} = await getSdk().us.getRevisions({
+            const {hasNextPage, entries} = await getSdk().sdk.us.getRevisions({
                 entryId: entry.entryId,
                 pageSize: 100,
                 page: this.state.page,
diff --git a/src/ui/units/editor/components/RevisionsDiff/Editor.tsx b/src/ui/units/editor/components/RevisionsDiff/Editor.tsx
index 701ef746ee..0f84a084e3 100644
--- a/src/ui/units/editor/components/RevisionsDiff/Editor.tsx
+++ b/src/ui/units/editor/components/RevisionsDiff/Editor.tsx
@@ -114,7 +114,7 @@ class Editor extends React.Component<Props, RevisionsDiffState> {
                 status: Status.Success,
             } as unknown as SetStateDynamicKey);
         } catch (error) {
-            if (this.isUnmounted || getSdk().isCancel(error)) {
+            if (this.isUnmounted || getSdk().sdk.isCancel(error)) {
                 return;
             }
             logger.logError('RevisionsDiff: getScripts failed', error);
@@ -175,7 +175,7 @@ class Editor extends React.Component<Props, RevisionsDiffState> {
     };
 
     private getEntry(revId: string) {
-        return getSdk().us.getEntry(
+        return getSdk().sdk.us.getEntry(
             {entryId: this.props.entry.entryId, revId},
             {concurrentId: 'getEntry: RevisionsDiff'},
         );
diff --git a/src/ui/units/editor/components/RevisionsDiff/RevisionsDiff.tsx b/src/ui/units/editor/components/RevisionsDiff/RevisionsDiff.tsx
index 2c1e91ce52..458a678d41 100644
--- a/src/ui/units/editor/components/RevisionsDiff/RevisionsDiff.tsx
+++ b/src/ui/units/editor/components/RevisionsDiff/RevisionsDiff.tsx
@@ -91,7 +91,7 @@ export const useRevisionsReqEnhancer = (props: UseRevisionsReqEnhancerProps) =>
 
     const getRevisions = React.useCallback(() => {
         getSdk()
-            .us.getRevisions({
+            .sdk.us.getRevisions({
                 entryId: props.entry.entryId,
                 pageSize: PAGE_SIZE,
                 page: nextPageNumber,
diff --git a/src/ui/units/editor/libs/monaco/utils.js b/src/ui/units/editor/libs/monaco/utils.js
index b7f0723d77..eecab1c577 100644
--- a/src/ui/units/editor/libs/monaco/utils.js
+++ b/src/ui/units/editor/libs/monaco/utils.js
@@ -125,7 +125,9 @@ export class MonacoUtils {
                 } else {
                     try {
                         // fix module resolve without navigation service
-                        const {entryId} = await getSdk().us.getEntryByKey({key: matchRequire.key});
+                        const {entryId} = await getSdk().sdk.us.getEntryByKey({
+                            key: matchRequire.key,
+                        });
                         window.open(`/editor/${entryId}`, '_blank');
                     } catch (error) {
                         window.open(`${DL.ENDPOINTS.charts}/editor/${matchRequire.key}`, '_blank');
diff --git a/src/ui/units/editor/store/reducers/editor/editor.js b/src/ui/units/editor/store/reducers/editor/editor.js
index 4a2a0eafe5..2f3bca48a4 100644
--- a/src/ui/units/editor/store/reducers/editor/editor.js
+++ b/src/ui/units/editor/store/reducers/editor/editor.js
@@ -38,7 +38,7 @@ export const fetchInitialLoad = ({id, template, location}) => {
             const urlSearch = new UrlSearch(search);
             if (id) {
                 const revId = urlSearch.get(URL_QUERY.REV_ID_OLD);
-                const entryData = await getSdk().us.getEntry({
+                const entryData = await getSdk().sdk.us.getEntry({
                     entryId: id,
                     includePermissionsInfo: true,
                     revId,
@@ -141,7 +141,7 @@ export const fetchEditorChartUpdate = ({mode, release, history, location}) => {
                 componentStateChange({name: ComponentName.ButtonSave, data: {progress: true}}),
             );
             const meta = release ? {...entry.meta, is_release: true} : {...entry.meta};
-            const updatedEntry = await getSdk().mix.updateEditorChart({
+            const updatedEntry = await getSdk().sdk.mix.updateEditorChart({
                 mode,
                 data: Helper.formEntryData({scriptsValues, entry}),
                 entryId: entry.entryId,
@@ -217,7 +217,7 @@ export const fetchRevisionChange = ({revisionEntry, action}, history, location)
             const urlSearch = new UrlSearch(search);
             switch (action) {
                 case RevisionAction.Open: {
-                    entryData = await getSdk().us.getEntry({
+                    entryData = await getSdk().sdk.us.getEntry({
                         entryId,
                         includePermissionsInfo: true,
                         revId,
@@ -232,7 +232,7 @@ export const fetchRevisionChange = ({revisionEntry, action}, history, location)
                     break;
                 }
                 case RevisionAction.Publish: {
-                    const publishedEntry = await getSdk().mix.updateEditorChart({
+                    const publishedEntry = await getSdk().sdk.mix.updateEditorChart({
                         mode: UPDATE_ENTRY_MODE.PUBLISH,
                         entryId,
                         revId,
@@ -241,7 +241,7 @@ export const fetchRevisionChange = ({revisionEntry, action}, history, location)
                     break;
                 }
                 case RevisionAction.Reset: {
-                    const clonedEntry = await getSdk().us.getEntry({
+                    const clonedEntry = await getSdk().sdk.us.getEntry({
                         entryId,
                         includePermissionsInfo: true,
                         revId,
@@ -249,7 +249,7 @@ export const fetchRevisionChange = ({revisionEntry, action}, history, location)
                     const tabData = Helper.createTabData(clonedEntry);
                     scriptsValues = tabData.scriptsValues;
                     chart = null;
-                    entryData = await getSdk().mix.updateEditorChart({
+                    entryData = await getSdk().sdk.mix.updateEditorChart({
                         mode: UPDATE_ENTRY_MODE.SAVE,
                         entryId,
                         data: Helper.formEntryData({scriptsValues, entry: clonedEntry}),
diff --git a/src/ui/units/ql/containers/QL/ViewSetup/ViewSetup.tsx b/src/ui/units/ql/containers/QL/ViewSetup/ViewSetup.tsx
index 9aa4b659c3..e5c94bced3 100644
--- a/src/ui/units/ql/containers/QL/ViewSetup/ViewSetup.tsx
+++ b/src/ui/units/ql/containers/QL/ViewSetup/ViewSetup.tsx
@@ -251,7 +251,7 @@ class ViewSetupComponent extends React.PureComponent<ViewSetupInnerProps, ViewSe
 
     private fetchConnection(connectionId: string) {
         return getSdk()
-            .us.getEntry({entryId: connectionId})
+            .sdk.us.getEntry({entryId: connectionId})
             .then((loadedConnectionEntry?: GetEntryResponse) => {
                 if (!loadedConnectionEntry) {
                     throw new Error(i18n('sql', 'error_failed-to-load-default-connection'));
diff --git a/src/ui/units/ql/store/actions/ql.ts b/src/ui/units/ql/store/actions/ql.ts
index aa8b64e413..583de66c8c 100644
--- a/src/ui/units/ql/store/actions/ql.ts
+++ b/src/ui/units/ql/store/actions/ql.ts
@@ -582,7 +582,7 @@ export const fetchConnectionSources = ({entryId, workbookId}: FetchConnectionSou
     return async function (dispatch: QLDispatch) {
         // Requesting information about connection sources
         const {sources: connectionSources, freeform_sources: connectionFreeformSources} =
-            await getSdk().bi.getConnectionSources({
+            await getSdk().sdk.bi.getConnectionSources({
                 connectionId: entryId,
                 workbookId,
             });
@@ -640,7 +640,7 @@ export const fetchConnectionSourceSchema = ({tableName}: FetchConnectionSourceSc
                 throw new Error(`Unknown connection source: ${tableName}`);
             }
 
-            const {raw_schema: schema} = await getSdk().bi.getConnectionSourceSchema({
+            const {raw_schema: schema} = await getSdk().sdk.bi.getConnectionSourceSchema({
                 connectionId: connection!.entryId,
                 workbookId: connection!.workbookId ?? null,
                 source: {...targetConnectionSource, id: 'sample'},
@@ -698,7 +698,7 @@ export const initializeApplication = (args: InitializeApplicationArgs) => {
                     branch: 'published',
                 };
 
-                const loadedEntry = await getSdk().us.getEntry(getEntryArgs);
+                const loadedEntry = await getSdk().sdk.us.getEntry(getEntryArgs);
 
                 if (!loadedEntry) {
                     throw new Error(i18n('sql', 'error_failed-to-load-chart'));
@@ -743,7 +743,7 @@ export const initializeApplication = (args: InitializeApplicationArgs) => {
 
                 try {
                     // We request the connection for which the chart is built
-                    const loadedConnectionEntry = await getSdk().us.getEntry({
+                    const loadedConnectionEntry = await getSdk().sdk.us.getEntry({
                         entryId: connectionEntryId,
                     });
 
@@ -961,7 +961,7 @@ export const initializeApplication = (args: InitializeApplicationArgs) => {
                     );
 
                     try {
-                        const loadedConnectionEntry = await getSdk().us.getEntry({
+                        const loadedConnectionEntry = await getSdk().sdk.us.getEntry({
                             entryId: defaultMonitoringQLConnectionId,
                         });
 
@@ -976,7 +976,7 @@ export const initializeApplication = (args: InitializeApplicationArgs) => {
 
                         dispatch(setConnection(connection));
 
-                        const preset = await getSdk().us.getPreset({presetId});
+                        const preset = await getSdk().sdk.us.getPreset({presetId});
 
                         const {initialQueries, initialParams, redirectUrl, visualization} =
                             prepareMonitoringPreset(preset);
@@ -1059,7 +1059,7 @@ export const initializeApplication = (args: InitializeApplicationArgs) => {
                 if (connectionEntryId) {
                     try {
                         // We request the connection for which the chart is built
-                        const loadedConnectionEntry = await getSdk().us.getEntry({
+                        const loadedConnectionEntry = await getSdk().sdk.us.getEntry({
                             entryId: connectionEntryId,
                         });
 
diff --git a/src/ui/units/wizard/actions/index.ts b/src/ui/units/wizard/actions/index.ts
index ec7d6ee71a..509be572f3 100644
--- a/src/ui/units/wizard/actions/index.ts
+++ b/src/ui/units/wizard/actions/index.ts
@@ -166,7 +166,7 @@ type GetDatasetArgs = {
 
 function getDataset({id, workbookId}: GetDatasetArgs) {
     return getSdk()
-        .bi.getDatasetByVersion({
+        .sdk.bi.getDatasetByVersion({
             datasetId: id,
             workbookId,
             version: 'draft',
@@ -1227,7 +1227,7 @@ const validateDataset = ({dataset, updates}: {dataset: Dataset; updates: Update[
         const workbookId = selectWizardWorkbookId(getState());
 
         try {
-            return await getSdk().bi.validateDataset(
+            return await getSdk().sdk.bi.validateDataset(
                 {
                     version: 'draft',
                     datasetId: dataset.id,
diff --git a/src/ui/units/wizard/components/ValuesList/ValuesList.tsx b/src/ui/units/wizard/components/ValuesList/ValuesList.tsx
index e0becd673d..0d1b1c20d6 100644
--- a/src/ui/units/wizard/components/ValuesList/ValuesList.tsx
+++ b/src/ui/units/wizard/components/ValuesList/ValuesList.tsx
@@ -253,7 +253,7 @@ class ValuesList extends React.Component<Props, State> {
 
             this.props.onChangeSelectedValue(values[0] || null, shouldClearPalette);
         } catch (error) {
-            if (this.isUnmounted || getSdk().isCancel(error)) {
+            if (this.isUnmounted || getSdk().sdk.isCancel(error)) {
                 return;
             }
             logger.logError('DialogColorPalette: fetchInitialData failed', error);
@@ -307,7 +307,7 @@ class ValuesList extends React.Component<Props, State> {
 
         getSdk().cancelRequest('getDistincts');
 
-        return getSdk().bi.getDistinctsApiV2(
+        return getSdk().sdk.bi.getDistinctsApiV2(
             {
                 updates,
                 datasetId,
@@ -374,7 +374,7 @@ class ValuesList extends React.Component<Props, State> {
 
             this.props.onChangeSelectedValue(values[0] || null);
         } catch (error) {
-            if (this.isUnmounted || getSdk().isCancel(error)) {
+            if (this.isUnmounted || getSdk().sdk.isCancel(error)) {
                 return;
             }
             logger.logError('DialogColorPalette: onChangeSuggest failed', error);
diff --git a/src/ui/units/workbooks/components/DuplicateEntryDialog/DuplicateEntryDialog.tsx b/src/ui/units/workbooks/components/DuplicateEntryDialog/DuplicateEntryDialog.tsx
index 23cca8018b..add0fb3fd3 100644
--- a/src/ui/units/workbooks/components/DuplicateEntryDialog/DuplicateEntryDialog.tsx
+++ b/src/ui/units/workbooks/components/DuplicateEntryDialog/DuplicateEntryDialog.tsx
@@ -33,7 +33,7 @@ const DuplicateEntryDialog: React.FC<Props> = ({open, onClose, onApply, initName
 
     const handleApply = React.useCallback(
         async ({name}: {name: string}) => {
-            const duplicatedEntry = await getSdk().us.copyWorkbookEntry({
+            const duplicatedEntry = await getSdk().sdk.us.copyWorkbookEntry({
                 entryId,
                 name,
             });
diff --git a/src/ui/units/workbooks/store/actions/index.ts b/src/ui/units/workbooks/store/actions/index.ts
index 1157cef544..4739688e12 100644
--- a/src/ui/units/workbooks/store/actions/index.ts
+++ b/src/ui/units/workbooks/store/actions/index.ts
@@ -75,7 +75,7 @@ export const getWorkbook = ({workbookId}: {workbookId: string}) => {
             type: GET_WORKBOOK_LOADING,
         });
         try {
-            const data = await getSdk().us.getWorkbook(
+            const data = await getSdk().sdk.us.getWorkbook(
                 {
                     workbookId,
                     includePermissionsInfo: true,
@@ -87,7 +87,7 @@ export const getWorkbook = ({workbookId}: {workbookId: string}) => {
                 data: data as WorkbookWithPermissions,
             });
         } catch (error) {
-            if (getSdk().isCancel(error)) {
+            if (getSdk().sdk.isCancel(error)) {
                 return;
             }
             logger.logError('workbooks/getWorkbook failed', error);
@@ -138,7 +138,7 @@ export const getWorkbookBreadcrumbs = ({collectionId}: {collectionId: string}) =
             type: GET_WORKBOOK_BREADCRUMBS_LOADING,
         });
         try {
-            const data = await getSdk().us.getCollectionBreadcrumbs(
+            const data = await getSdk().sdk.us.getCollectionBreadcrumbs(
                 {
                     collectionId,
                 },
@@ -149,7 +149,7 @@ export const getWorkbookBreadcrumbs = ({collectionId}: {collectionId: string}) =
                 data,
             });
         } catch (error) {
-            const isCanceled = getSdk().isCancel(error);
+            const isCanceled = getSdk().sdk.isCancel(error);
 
             dispatch({
                 type: GET_WORKBOOK_BREADCRUMBS_FAILED,
@@ -213,7 +213,7 @@ export const getWorkbookEntries = ({
         }
 
         try {
-            const data = await getSdk().us.getWorkbookEntries(args, {
+            const data = await getSdk().sdk.us.getWorkbookEntries(args, {
                 concurrentId: ignoreConcurrentId ? undefined : 'workbooks/getWorkbookEntries',
             });
             dispatch({
@@ -223,7 +223,7 @@ export const getWorkbookEntries = ({
 
             return data;
         } catch (error) {
-            if (getSdk().isCancel(error)) {
+            if (getSdk().sdk.isCancel(error)) {
                 return null;
             }
             logger.logError('workbooks/getWorkbookEntries failed', error);
@@ -292,7 +292,7 @@ export const getAllWorkbookEntriesSeparately = ({
         }
 
         const promises = scopes.map((scope) => {
-            return getSdk().us.getWorkbookEntries({
+            return getSdk().sdk.us.getWorkbookEntries({
                 ...args,
                 scope,
             });
@@ -403,7 +403,7 @@ export const renameEntry = ({
             type: RENAME_ENTRY_LOADING,
         });
         return getSdk()
-            .us.renameEntry({
+            .sdk.us.renameEntry({
                 entryId,
                 name,
             })
@@ -421,7 +421,7 @@ export const renameEntry = ({
                 return data;
             })
             .catch((error) => {
-                if (!getSdk().isCancel(error)) {
+                if (!getSdk().sdk.isCancel(error)) {
                     logger.logError('workbooks/renameEntry failed', error);
                     dispatch(
                         showToast({
@@ -483,7 +483,7 @@ export const changeFavoriteEntry = ({
         };
 
         const catchHandler = (error: Error) => {
-            if (!getSdk().isCancel(error)) {
+            if (!getSdk().sdk.isCancel(error)) {
                 logger.logError('workbooks/changeFavoriteEntry failed', error);
                 dispatch(
                     showToast({
@@ -526,14 +526,14 @@ export const changeFavoriteEntry = ({
 
         if (isFavorite) {
             return getSdk()
-                .us.addFavorite({
+                .sdk.us.addFavorite({
                     entryId,
                 })
                 .then(thenHandler)
                 .catch(catchHandler);
         } else {
             return getSdk()
-                .us.deleteFavorite({
+                .sdk.us.deleteFavorite({
                     entryId,
                 })
                 .then(thenHandler)
@@ -578,7 +578,7 @@ export const deleteEntry = ({
             type: DELETE_ENTRY_LOADING,
         });
         return getSdk()
-            .mix.deleteEntry({
+            .sdk.mix.deleteEntry({
                 entryId,
                 scope,
             })
@@ -603,7 +603,7 @@ export const deleteEntry = ({
                 return data;
             })
             .catch((error) => {
-                if (!getSdk().isCancel(error)) {
+                if (!getSdk().sdk.isCancel(error)) {
                     logger.logError('workbooks/deleteEntry failed', error);
                     dispatch(
                         showToast({
@@ -654,14 +654,17 @@ type AddWorkbookInfoAction = {
 
 export const addWorkbookInfo = (workbookId: string, withBreadcrumbs = false) => {
     return async (dispatch: WorkbooksDispatch) => {
-        const workbook = await getSdk().us.getWorkbook({workbookId, includePermissionsInfo: true});
+        const workbook = await getSdk().sdk.us.getWorkbook({
+            workbookId,
+            includePermissionsInfo: true,
+        });
 
         let workbookBreadcrumbs = null;
         let requestedWithBreadcrumbs = false;
 
         if (withBreadcrumbs && workbook.collectionId) {
             try {
-                workbookBreadcrumbs = await getSdk().us.getCollectionBreadcrumbs(
+                workbookBreadcrumbs = await getSdk().sdk.us.getCollectionBreadcrumbs(
                     {
                         collectionId: workbook.collectionId,
                     },
diff --git a/src/ui/utils/sdkRequests.ts b/src/ui/utils/sdkRequests.ts
index 33129a2b89..f65a50218c 100644
--- a/src/ui/utils/sdkRequests.ts
+++ b/src/ui/utils/sdkRequests.ts
@@ -16,28 +16,28 @@ export const fetchDistinctsByApi = (
     headers?: GetDistinctsApiV2InfoHeadersArg,
 ): Promise<GetDistinctsApiV2TransformedResponse> => {
     return Utils.isEnabledFeature(Feature.UsePublicDistincts)
-        ? getSdk().bi.getPublicDistinctsApiV2(params, {headers})
-        : getSdk().bi.getDistinctsApiV2(params, {headers});
+        ? getSdk().sdk.bi.getPublicDistinctsApiV2(params, {headers})
+        : getSdk().sdk.bi.getDistinctsApiV2(params, {headers});
 };
 
 export const fetchBatchRenderedMarkdown = (texts: Record<string, string>) => {
-    return getSdk().mix.batchRenderMarkdown({
+    return getSdk().sdk.mix.batchRenderMarkdown({
         texts,
         lang: DL.USER_LANG,
     });
 };
 
 export const fetchRenderedMarkdown = (text: string) => {
-    return getSdk().mix.renderMarkdown({
+    return getSdk().sdk.mix.renderMarkdown({
         text,
         lang: DL.USER_LANG,
     });
 };
 
 export const requestCollectDashStats = (dashStats: CollectDashStatsArgs) => {
-    return getSdk().mix.collectDashStats(dashStats);
+    return getSdk().sdk.mix.collectDashStats(dashStats);
 };
 
 export const requestCollectChartkitStats = (chartkitStats: CollectChartkitStatsArgs) => {
-    return getSdk().mix.collectChartkitStats(chartkitStats);
+    return getSdk().sdk.mix.collectChartkitStats(chartkitStats);
 };
diff --git a/src/ui/utils/utils.ts b/src/ui/utils/utils.ts
index 92267e6baa..23614e5709 100644
--- a/src/ui/utils/utils.ts
+++ b/src/ui/utils/utils.ts
@@ -170,7 +170,7 @@ export default class Utils {
     }
 
     static setSdk() {
-        window.sdk = getSdk();
+        window.sdk = getSdk().sdk;
     }
 
     static setup() {
diff --git a/src/ui/utils/waitOperation.ts b/src/ui/utils/waitOperation.ts
index 99f129d301..e808ca84d3 100644
--- a/src/ui/utils/waitOperation.ts
+++ b/src/ui/utils/waitOperation.ts
@@ -37,7 +37,7 @@ export function waitOperation<O extends Operation>({
 }: WaitOperationOptions<O>): WaitOperationResult<O> {
     const cancelSource = axios.CancelToken.source();
     const cancelToken = cancelSource.token;
-    const concurrentId = getSdk().getConcurrentId();
+    const concurrentId = getSdk().sdk.getConcurrentId();
     let cancelOperation: () => void;
     let timeouted = false;
     let cancelled = false;

From c6b7ead322e518388024fe3a4f1935f080938948 Mon Sep 17 00:00:00 2001
From: Andrey Melikhov <melikhov@yandex-team.ru>
Date: Fri, 27 Dec 2024 16:46:50 +0300
Subject: [PATCH 15/18] Remove code after refactoring (#1986)

---
 .../components/processor/data-fetcher.ts      | 35 ++-----------------
 .../components/processor/hooks.ts             |  7 ----
 .../components/processor/index.ts             |  7 ----
 .../charts-engine/runners/common.ts           |  1 -
 4 files changed, 2 insertions(+), 48 deletions(-)

diff --git a/src/server/components/charts-engine/components/processor/data-fetcher.ts b/src/server/components/charts-engine/components/processor/data-fetcher.ts
index 060468025e..a71a9b29c9 100644
--- a/src/server/components/charts-engine/components/processor/data-fetcher.ts
+++ b/src/server/components/charts-engine/components/processor/data-fetcher.ts
@@ -3,7 +3,6 @@ import type {IncomingHttpHeaders, OutgoingHttpHeaders} from 'http';
 import querystring from 'querystring';
 import url from 'url';
 
-import type {Request} from '@gravity-ui/expresskit';
 import type {AppContext} from '@gravity-ui/nodekit';
 import {REQUEST_ID_PARAM_NAME} from '@gravity-ui/nodekit';
 import {isObject, isString} from 'lodash';
@@ -60,10 +59,6 @@ type PromiseWithAbortController = [Promise<unknown>, AbortController];
 type DataFetcherOptions = {
     chartsEngine: ChartsEngine;
     sources: Record<string, Source | string>;
-    /**
-     * @deprecated will be removed
-     */
-    req?: Request;
     ctx: AppContext;
     postprocess?:
         | ((
@@ -78,8 +73,8 @@ type DataFetcherOptions = {
     workbookId?: WorkbookId;
     isEmbed?: boolean;
     zitadelParams?: ZitadelParams | undefined;
-    originalReqHeaders?: DataFetcherOriginalReqHeaders;
-    adapterContext?: AdapterContext;
+    originalReqHeaders: DataFetcherOriginalReqHeaders;
+    adapterContext: AdapterContext;
 };
 
 export type DataFetcherOriginalReqHeaders = {
@@ -190,7 +185,6 @@ export class DataFetcher {
     static fetch({
         chartsEngine,
         sources,
-        req,
         ctx,
         postprocess = null,
         subrequestHeaders,
@@ -223,31 +217,6 @@ export class DataFetcher {
             const queue = new PQueue({concurrency: CONCURRENT_REQUESTS_LIMIT});
             const fetchPromisesList: (() => unknown)[] = [];
 
-            // TODO: will be removed after migrations
-            if (req) {
-                isEmbed = req.headers[DL_EMBED_TOKEN_HEADER] !== undefined;
-
-                zitadelParams = ctx.config.isZitadelEnabled
-                    ? {
-                          accessToken: req.user?.accessToken,
-                          serviceUserAccessToken: req.serviceUserAccessToken,
-                      }
-                    : undefined;
-
-                originalReqHeaders = {
-                    xRealIP: req.headers['x-real-ip'],
-                    xForwardedFor: req.headers['x-forwarded-for'],
-                    xChartsFetcherVia: req.headers['x-charts-fetcher-via'],
-                    referer: req.headers.referer,
-                };
-                adapterContext = {
-                    headers: {
-                        ['x-forwarded-for']: req.headers['x-forwarded-for'],
-                        cookie: req.headers.cookie,
-                    },
-                };
-            }
-
             if (!originalReqHeaders || !adapterContext) {
                 throw new Error('Missing original request headers or adapter context');
             }
diff --git a/src/server/components/charts-engine/components/processor/hooks.ts b/src/server/components/charts-engine/components/processor/hooks.ts
index 69c8117ce5..beab12d560 100644
--- a/src/server/components/charts-engine/components/processor/hooks.ts
+++ b/src/server/components/charts-engine/components/processor/hooks.ts
@@ -1,4 +1,3 @@
-import type {Request} from '@gravity-ui/expresskit';
 import type {AppContext} from '@gravity-ui/nodekit';
 import {flow} from 'lodash';
 
@@ -53,16 +52,11 @@ export class ProcessorHooks {
     }
 
     async init({
-        req,
         config,
         isEditMode,
         ctx,
         hooksContext,
     }: {
-        /**
-         * @deprecated will be removed
-         */
-        req: Request;
         config: Record<string, any>;
         isEditMode: boolean;
         ctx: AppContext;
@@ -77,7 +71,6 @@ export class ProcessorHooks {
             try {
                 ctx.log(`Hook ${hookName} init`);
                 const hook = processHook.init({
-                    req,
                     config,
                     isEditMode,
                     ctx,
diff --git a/src/server/components/charts-engine/components/processor/index.ts b/src/server/components/charts-engine/components/processor/index.ts
index b2d287fade..7b404be2ef 100644
--- a/src/server/components/charts-engine/components/processor/index.ts
+++ b/src/server/components/charts-engine/components/processor/index.ts
@@ -1,5 +1,4 @@
 import {transformParamsToActionParams} from '@gravity-ui/dashkit/helpers';
-import type {Request} from '@gravity-ui/expresskit';
 import {type AppContext, REQUEST_ID_PARAM_NAME} from '@gravity-ui/nodekit';
 import {AxiosError} from 'axios';
 import JSONfn from 'json-fn';
@@ -152,10 +151,6 @@ export type ProcessorParams = {
     userLang: string | null;
     userId: string | null;
     iamToken: string | null;
-    /**
-     * @deprecated will be removed
-     */
-    req: Request;
     responseOptions?: Record<string, string | boolean>;
     uiOnly?: boolean;
     isEditMode: boolean;
@@ -188,7 +183,6 @@ export class Processor {
         userLogin,
         userId = null,
         iamToken = null,
-        req,
         responseOptions = {},
         uiOnly = false,
         isEditMode,
@@ -330,7 +324,6 @@ export class Processor {
             ctx.log('EditorEngine::ConfigResolved', {duration: getDuration(hrStart)});
 
             const resultHooksInit = await hooks.init({
-                req,
                 config: {
                     ...config,
                     entryId: config.entryId || configId,
diff --git a/src/server/components/charts-engine/runners/common.ts b/src/server/components/charts-engine/runners/common.ts
index a690bbb8c3..7787a0c085 100644
--- a/src/server/components/charts-engine/runners/common.ts
+++ b/src/server/components/charts-engine/runners/common.ts
@@ -232,7 +232,6 @@ export function commonRunner({
         userLogin: res.locals && res.locals.login,
         userId: res.locals && res.locals.userId,
         subrequestHeaders: res.locals.subrequestHeaders,
-        req,
         iamToken,
         isEditMode: Boolean(res.locals.editMode),
         configResolving,

From 1ba1c0e477e3af8bb3b7bede303a607315b86572 Mon Sep 17 00:00:00 2001
From: Georgy Malkov <malkovgv@yandex-team.ru>
Date: Fri, 27 Dec 2024 17:29:41 +0300
Subject: [PATCH 16/18] Move E2E report to S3 bucket (#1988)

---
 .github/workflows/delete-e2e-report.yml | 59 -------------------------
 .github/workflows/e2e_tests_report.yml  | 49 +++++++-------------
 2 files changed, 15 insertions(+), 93 deletions(-)
 delete mode 100644 .github/workflows/delete-e2e-report.yml

diff --git a/.github/workflows/delete-e2e-report.yml b/.github/workflows/delete-e2e-report.yml
deleted file mode 100644
index 0001c58c98..0000000000
--- a/.github/workflows/delete-e2e-report.yml
+++ /dev/null
@@ -1,59 +0,0 @@
-name: Delete E2E Report
-
-on:
-  delete:
-
-# ensures that currently running Playwright workflow of deleted branch gets cancelled
-concurrency:
-  group: ${{ github.event.ref }}
-  cancel-in-progress: true
-
-jobs:
-  delete_reports:
-    name: Delete Reports
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    env:
-      # Contains all reports for deleted branch
-      BRANCH_REPORTS_DIR: reports/${{ github.event.ref }}
-    steps:
-      - name: Checkout GitHub Pages Branch
-        uses: actions/checkout@v2
-        with:
-          ref: gh-pages
-      - name: Set Git User
-        # see: https://github.com/actions/checkout/issues/13#issuecomment-724415212
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-      - name: Check for workflow reports
-        run: |
-          if [ -z "$(ls -A $BRANCH_REPORTS_DIR)" ]; then
-            echo "BRANCH_REPORTS_EXIST="false"" >> $GITHUB_ENV
-          else
-            echo "BRANCH_REPORTS_EXIST="true"" >> $GITHUB_ENV
-          fi
-      - name: Delete reports from repo for branch
-        if: ${{ env.BRANCH_REPORTS_EXIST == 'true' }}
-        timeout-minutes: 3
-        run: |
-          cd $BRANCH_REPORTS_DIR/..
-
-          rm -rf ${{ github.event.ref }}
-          git add .
-          git commit -m "workflow: remove all reports for branch ${{ github.event.ref }}"
-
-          while true; do
-            git pull --rebase
-            if [ $? -ne 0 ]; then
-              echo "Failed to rebase. Please review manually."
-              exit 1
-            fi
-
-            git push
-            if [ $? -eq 0 ]; then
-              echo "Successfully pushed HTML reports to repo."
-              exit 0
-            fi
-          done
\ No newline at end of file
diff --git a/.github/workflows/e2e_tests_report.yml b/.github/workflows/e2e_tests_report.yml
index a06ec2a286..484e557a2a 100644
--- a/.github/workflows/e2e_tests_report.yml
+++ b/.github/workflows/e2e_tests_report.yml
@@ -14,19 +14,13 @@ jobs:
       (github.event.workflow_run.conclusion == 'success' || github.event.workflow_run.conclusion == 'failure')
     runs-on: ubuntu-latest
     permissions:
-      contents: write
-      pages: write
+      contents: read
       pull-requests: write
     steps:
-      - name: Checkout GitHub Pages Branch
+      - name: Checkout main
         uses: actions/checkout@v2
         with:
-          ref: gh-pages
-      - name: Set Git User
-        # see: https://github.com/actions/checkout/issues/13#issuecomment-724415212
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          ref: main
       - name: Download Artifacts
         uses: dawidd6/action-download-artifact@v6
         with:
@@ -36,37 +30,24 @@ jobs:
         run: |
           echo "HTML_REPORT_URL_PATH=$(cat playwright-report/report-link)" >> "$GITHUB_ENV"
           echo "REPORT_PR_NUMBER=$(cat playwright-report/report-pr)" >> "$GITHUB_ENV"
-      - name: Move report to commit folder
-        run: mkdir -p ${{ env.HTML_REPORT_URL_PATH }} && mv playwright-report/report ${{ env.HTML_REPORT_URL_PATH }}/report
-      - name: Push HTML Report
+      - name: Upload HTML Report
         timeout-minutes: 3
-        # commit report, then try push-rebase-loop until it's able to merge the HTML report to the gh-pages branch
-        # this is necessary when this job is running at least twice at the same time (e.g. through two pushes at the same time)
-        run: |
-          git add .
-          git commit -m "workflow: add HTML report for ${{ env.HTML_REPORT_URL_PATH }}"
-
-          while true; do
-            git pull --rebase
-            if [ $? -ne 0 ]; then
-              echo "Failed to rebase. Please review manually."
-              exit 1
-            fi
-
-            git push
-            if [ $? -eq 0 ]; then
-              echo "Successfully pushed HTML report to repo."
-              exit 0
-            fi
-          done
+        uses: shallwefootball/s3-upload-action@master
+        with:
+          aws_key_id: ${{ secrets.E2E_REPORT_S3_ACCESS_KEY }}
+          aws_secret_access_key: ${{ secrets.E2E_REPORT_S3_SECRET_KEY}}
+          aws_bucket: ${{ vars.E2E_REPORT_S3_BUCKET }}
+          endpoint: ${{ vars.E2E_REPORT_S3_ENDPOINT }}
+          source_dir: playwright-report/report
+          destination_dir: ${{ env.HTML_REPORT_URL_PATH }}/report
       - name: Output Report URL as Worfklow Annotation
         run: |
-          FULL_HTML_REPORT_URL=https://datalens-tech.github.io/datalens-ui/${{ env.HTML_REPORT_URL_PATH }}/report
-
+          FULL_HTML_REPORT_URL=${{ vars.E2E_REPORT_S3_ENDPOINT }}/${{ vars.E2E_REPORT_S3_BUCKET }}/${{ env.HTML_REPORT_URL_PATH }}/report
+          echo "FULL_HTML_REPORT_URL=${FULL_HTML_REPORT_URL}" >> "$GITHUB_ENV"
           echo "::notice title=📋 Published Playwright Test Report::$FULL_HTML_REPORT_URL"
       - name: Create Comment
         uses: marocchino/sticky-pull-request-comment@v2
         with:
           header: e2e-report
           number: ${{ env.REPORT_PR_NUMBER }}
-          message: '[E2E Report](https://datalens-tech.github.io/datalens-ui/${{ env.HTML_REPORT_URL_PATH }}/report) is ready.'
+          message: '[E2E Report](${{ env.FULL_HTML_REPORT_URL }}) is ready.'

From 5c0ce18b3b77d501e5609c96a11d2788b6b2481d Mon Sep 17 00:00:00 2001
From: Georgy Malkov <malkovgv@yandex-team.ru>
Date: Fri, 27 Dec 2024 18:22:44 +0300
Subject: [PATCH 17/18] Fix E2E report link (#1990)

---
 .github/workflows/e2e_tests_report.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e_tests_report.yml b/.github/workflows/e2e_tests_report.yml
index 484e557a2a..555edb91f2 100644
--- a/.github/workflows/e2e_tests_report.yml
+++ b/.github/workflows/e2e_tests_report.yml
@@ -42,7 +42,7 @@ jobs:
           destination_dir: ${{ env.HTML_REPORT_URL_PATH }}/report
       - name: Output Report URL as Worfklow Annotation
         run: |
-          FULL_HTML_REPORT_URL=${{ vars.E2E_REPORT_S3_ENDPOINT }}/${{ vars.E2E_REPORT_S3_BUCKET }}/${{ env.HTML_REPORT_URL_PATH }}/report
+          FULL_HTML_REPORT_URL=https://${{ vars.E2E_REPORT_S3_BUCKET }}.${{ vars.E2E_REPORT_HTML_ENDPOINT }}/${{ env.HTML_REPORT_URL_PATH }}/report
           echo "FULL_HTML_REPORT_URL=${FULL_HTML_REPORT_URL}" >> "$GITHUB_ENV"
           echo "::notice title=📋 Published Playwright Test Report::$FULL_HTML_REPORT_URL"
       - name: Create Comment

From 793e3fe49080c3eddbd5c06ecb51535a7faa8dd6 Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Fri, 27 Dec 2024 20:04:58 +0300
Subject: [PATCH 18/18] Add release version dialog (#1982)

Co-authored-by: datalens-weblate-robot <robot-charts@yandex-team.com>
Co-authored-by: Darya Tikhonova <tihonova-d@yandex-team.ru>
---
 src/@types/nodekit.d.ts                       |  1 +
 .../component.aside-header.view/en.json       |  1 +
 .../component.aside-header.view/ru.json       |  1 +
 src/server/app-env.ts                         |  1 +
 .../layout/opensource-layout-config.ts        |  1 +
 src/server/configs/common.ts                  |  2 +
 src/shared/types/common.ts                    |  1 +
 .../AsideHeaderAdapter.scss                   |  3 +-
 .../AsideHeaderAdapter/AsideHeaderAdapter.tsx | 44 ++++++++++++++++---
 .../VersionDialog/VersionDialog.tsx           | 35 +++++++++++++++
 src/ui/constants/common.ts                    |  3 ++
 src/ui/store/actions/openDialogTypes.ts       |  2 +
 12 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx

diff --git a/src/@types/nodekit.d.ts b/src/@types/nodekit.d.ts
index e008ed8c3e..1e0b8e34f0 100644
--- a/src/@types/nodekit.d.ts
+++ b/src/@types/nodekit.d.ts
@@ -89,6 +89,7 @@ export interface SharedAppConfig {
     redis: RedisConfig | null;
     apiPrefix: string;
     preloadList?: string[];
+    releaseVersion?: string;
 }
 
 export interface SharedAppDynamicConfig {
diff --git a/src/i18n-keysets/component.aside-header.view/en.json b/src/i18n-keysets/component.aside-header.view/en.json
index fb2d66e394..8103884084 100644
--- a/src/i18n-keysets/component.aside-header.view/en.json
+++ b/src/i18n-keysets/component.aside-header.view/en.json
@@ -1,6 +1,7 @@
 {
   "label_about": "About",
   "label_account": "Account",
+  "label_app-version": "Version",
   "label_collections": "Collections and workbooks",
   "label_docs": "Documentation",
   "label_github": "GitHub",
diff --git a/src/i18n-keysets/component.aside-header.view/ru.json b/src/i18n-keysets/component.aside-header.view/ru.json
index de45c81f8e..86356c41d7 100644
--- a/src/i18n-keysets/component.aside-header.view/ru.json
+++ b/src/i18n-keysets/component.aside-header.view/ru.json
@@ -1,6 +1,7 @@
 {
   "label_about": "О сервисе",
   "label_account": "Учётная запись",
+  "label_app-version": "Версия",
   "label_collections": "Коллекции и воркбуки",
   "label_docs": "Документация",
   "label_github": "GitHub",
diff --git a/src/server/app-env.ts b/src/server/app-env.ts
index 55291512f3..867199b1bf 100644
--- a/src/server/app-env.ts
+++ b/src/server/app-env.ts
@@ -3,6 +3,7 @@ import {AppInstallation, AppMode} from '../shared';
 const mode = process.env.APP_MODE;
 export const appInstallation = process.env.APP_INSTALLATION;
 export const appEnv = process.env.APP_ENV;
+export const releaseVersion = process.env.RELEASE_VERSION;
 
 export const isFullMode = mode === AppMode.Full;
 export const isDatalensMode = mode === AppMode.Datalens;
diff --git a/src/server/components/layout/opensource-layout-config.ts b/src/server/components/layout/opensource-layout-config.ts
index 89b6ca744d..a42467c534 100644
--- a/src/server/components/layout/opensource-layout-config.ts
+++ b/src/server/components/layout/opensource-layout-config.ts
@@ -72,6 +72,7 @@ export const getOpensourceLayoutConfig: GetLayoutConfig = async (args) => {
         ymapApiKey: config.chartkitSettings?.yandexMap?.token,
         connectorIcons: res.locals.connectorIcons,
         apiPrefix: config.apiPrefix,
+        releaseVersion: config.releaseVersion,
         ...appLayoutSettings.DL,
     };
     const renderConfig: RenderParams<{DL: DLGlobalData}> = {
diff --git a/src/server/configs/common.ts b/src/server/configs/common.ts
index 4024fa2b3e..79ba5c3b5b 100644
--- a/src/server/configs/common.ts
+++ b/src/server/configs/common.ts
@@ -11,6 +11,7 @@ import {
     SuperuserHeader,
     TENANT_ID_HEADER,
 } from '../../shared';
+import {releaseVersion} from '../app-env';
 import {SERVICE_NAME_DATALENS} from '../components';
 
 export default {
@@ -44,4 +45,5 @@ export default {
     ],
     headersMap: {},
     requestIdHeaderName: 'x-request-id',
+    releaseVersion: releaseVersion,
 } satisfies Partial<AppConfig>;
diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts
index c98d2ee546..0192583419 100644
--- a/src/shared/types/common.ts
+++ b/src/shared/types/common.ts
@@ -211,6 +211,7 @@ export type DLGlobalData = {
     isZitadelEnabled?: boolean;
     hideNavigation?: boolean;
     connectorIcons?: ConnectorIconData[];
+    releaseVersion?: string;
 } & MainLayoutConfigData;
 
 export type ContactDialogSettings = {
diff --git a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.scss b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.scss
index 13ed3b3702..6a1139f125 100644
--- a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.scss
+++ b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.scss
@@ -22,7 +22,8 @@
         @include link-reset;
     }
 
-    &__docs-link {
+    &__docs-link,
+    &__info-btn {
         align-items: center;
         box-sizing: border-box;
         display: flex;
diff --git a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx
index 887597781b..db7fce0aa8 100644
--- a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx
+++ b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx
@@ -11,6 +11,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {Link, useLocation} from 'react-router-dom';
 import {DlNavigationQA, Feature} from 'shared';
 import {DL, PRODUCT_NAME} from 'ui/constants';
+import {closeDialog, openDialog} from 'ui/store/actions/dialog';
 import {selectAsideHeaderIsCompact} from 'ui/store/selectors/asideHeader';
 import Utils from 'ui/utils';
 
@@ -20,6 +21,7 @@ import {UserAvatar} from '../UserMenu/UserAvatar';
 import {UserMenu} from '../UserMenu/UserMenu';
 
 import {Settings as SettingsPanel} from './Settings/Settings';
+import {DIALOG_RELEASE_VERSION} from './VersionDialog/VersionDialog';
 
 import defaultLogoIcon from '../../assets/icons/logo.svg';
 import iconCollection from '../../assets/icons/mono-collection.svg';
@@ -175,6 +177,33 @@ export const AsideHeaderAdapter = ({renderContent, logoIcon}: AsideHeaderAdapter
         [visiblePanel],
     );
 
+    const getReliaseVersionWrapper = React.useCallback(
+        ({text}) => {
+            const handleShowReleaseVersion = () => {
+                setCurrentPopup(null);
+                dispatch(
+                    openDialog({
+                        id: DIALOG_RELEASE_VERSION,
+                        props: {
+                            releaseVersion: DL.RELEASE_VERSION || '',
+                            open: true,
+                            onClose: () => {
+                                dispatch(closeDialog());
+                            },
+                        },
+                    }),
+                );
+            };
+
+            return (
+                <div className={b('info-btn')} onClick={handleShowReleaseVersion}>
+                    {text}
+                </div>
+            );
+        },
+        [dispatch],
+    );
+
     const renderFooter = () => {
         return (
             <React.Fragment>
@@ -222,15 +251,20 @@ export const AsideHeaderAdapter = ({renderContent, logoIcon}: AsideHeaderAdapter
                                         text: i18n('label_github'),
                                         url: GITHUB_URL,
                                     },
-                                    {
-                                        text: i18n('label_about'),
-                                        url: PROMO_SITE_DOMAIN,
-                                    },
+                                    DL.RELEASE_VERSION
+                                        ? {
+                                              text: i18n('label_about'),
+                                              itemWrapper: getReliaseVersionWrapper,
+                                          }
+                                        : {
+                                              text: i18n('label_about'),
+                                              url: PROMO_SITE_DOMAIN,
+                                          },
                                     {
                                         text: i18n('label_docs'),
                                         url: DOCUMENTATION_LINK,
                                     },
-                                ]}
+                                ].filter(Boolean)}
                                 filterable={false}
                                 virtualized={false}
                                 renderItem={renderDocsItem}
diff --git a/src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx b/src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx
new file mode 100644
index 0000000000..a7dc027066
--- /dev/null
+++ b/src/ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Dialog, Text, spacing} from '@gravity-ui/uikit';
+import {i18n} from 'i18n';
+import DialogManager from 'ui/components/DialogManager/DialogManager';
+
+export const DIALOG_RELEASE_VERSION = Symbol('DIALOG_RELEASE_VERSION');
+
+type VersionDialogProps = {
+    releaseVersion: string;
+    open: boolean;
+    onClose: VoidFunction;
+};
+
+export type OpenDialogReleaseVersionArgs = {
+    id: typeof DIALOG_RELEASE_VERSION;
+    props: VersionDialogProps;
+};
+
+export function VersionDialog({releaseVersion, open, onClose}: VersionDialogProps) {
+    return (
+        <Dialog open={open} onClose={onClose} size="s">
+            <Dialog.Header caption={i18n('component.aside-header.view', 'label_about')} />
+            <Dialog.Body>
+                <Text variant="subheader-1" className={spacing({mr: 2})}>
+                    {i18n('component.aside-header.view', 'label_app-version')}:
+                </Text>
+                {releaseVersion}
+            </Dialog.Body>
+            <Dialog.Footer />
+        </Dialog>
+    );
+}
+
+DialogManager.registerDialog(DIALOG_RELEASE_VERSION, VersionDialog);
diff --git a/src/ui/constants/common.ts b/src/ui/constants/common.ts
index 109a94046e..c2c67d1d4c 100644
--- a/src/ui/constants/common.ts
+++ b/src/ui/constants/common.ts
@@ -234,6 +234,9 @@ export const DL = {
     get CONNECTOR_ICONS() {
         return window.DL.connectorIcons || [];
     },
+    get RELEASE_VERSION() {
+        return window.DL.releaseVersion;
+    },
 };
 
 // monaco-editor common themes:
diff --git a/src/ui/store/actions/openDialogTypes.ts b/src/ui/store/actions/openDialogTypes.ts
index 2b3f0f5d51..897a964c40 100644
--- a/src/ui/store/actions/openDialogTypes.ts
+++ b/src/ui/store/actions/openDialogTypes.ts
@@ -55,8 +55,10 @@ import type {OpenDialogIamAccessArgs} from '../../components/IamAccessDialog';
 import type {OpenDialogTooltipSettingsArgs} from '../../units/wizard/components/Dialogs/DialogTooltipSettings/DialogTooltipSettings';
 import type {OpenDialogChangeDatasetFieldsArgs} from '../../units/datasets/components/DatasetTable/components/BatchActionPanel/components/DialogChangeDatasetFields/DialogChangeDatasetFields';
 import type {OpenDialogCollectionNoCreatePermissionArgs} from 'ui/components/CollectionsStructure/CollectionNoCreatePermissionDialog';
+import type {OpenDialogReleaseVersionArgs} from 'ui/components/AsideHeaderAdapter/VersionDialog/VersionDialog';
 
 export type OpenDialogArgs<T = unknown> =
+    | OpenDialogReleaseVersionArgs
     | OpenDialogMetricSettingsArgs
     | OpenDialogColorArgs
     | OpenDialogFieldInspectorArgs