Support base operations with selectors globality

Author: mournfulCoroner

src/server/components/sdk/dash.ts

@@ -156,7 +156,7 @@ function validateData(data: DashData) {
         return true;
     };
 
-    data.tabs.forEach(({id: tabId, title: tabTitle, items, layout, connections}) => {
+    data.tabs.forEach(({id: tabId, title: tabTitle, items, layout, connections, globalItems}) => {
         const currentItemsIds: Set<string> = new Set();
         const currentWidgetTabsIds: Set<string> = new Set();
         const currentControlsIds: Set<string> = new Set();
@@ -165,6 +165,24 @@ function validateData(data: DashData) {
             allTabsIds.add(tabId);
         }
 
+        if (globalItems) {
+            globalItems.forEach(({id: itemId, type, data}) => {
+                allItemsIds.add(itemId);
+                currentItemsIds.add(itemId);
+
+                if (type === DashTabItemType.Control || type === DashTabItemType.GroupControl) {
+                    // if it is group control all connections set on its items
+                    if ('group' in data) {
+                        data.group.forEach((widgetItem) => {
+                            currentControlsIds.add(widgetItem.id);
+                        });
+                    } else {
+                        currentControlsIds.add(itemId);
+                    }
+                }
+            });
+        }
+
         items.forEach(({id: itemId, type, data}) => {
             if (isIdUniq(itemId)) {
                 allItemsIds.add(itemId);
@@ -190,10 +208,12 @@ function validateData(data: DashData) {
             }
         });
 
+        const allItemsLength = items.length + (globalItems?.length ?? 0);
+
         // checking that layout has all the ids from item, i.e. positions are set for all elements
         if (
-            items.length !== layout.length ||
-            items.length !==
+            allItemsLength !== layout.length ||
+            allItemsLength !==
                 intersection(
                     Array.from(currentItemsIds),
                     layout.map(({i}) => i),

src/shared/types/dash.ts

@@ -1,5 +1,6 @@
 import type {ItemDropProps} from '@gravity-ui/dashkit';
 
+import type {TabsScope} from '../../ui/units/dash/typings/selectors';
 import type {Operations} from '../modules';
 
 import type {
@@ -125,6 +126,7 @@ export interface DashTab {
     aliases: DashTabAliases;
     connections: DashTabConnection[];
     settings?: DashTabSettings;
+    globalItems?: DashTabItem[];
 }
 
 export type DashSettingsGlobalParams = Record<string, string | string[]>;
@@ -232,6 +234,7 @@ export interface DashTabItemControlData {
     width?: string;
     defaults?: StringParams;
     namespace: string;
+    tabsScope?: TabsScope;
 }
 
 export type DashTabItemControlSingle = DashTabItemControlDataset | DashTabItemControlManual;
@@ -339,6 +342,7 @@ export interface DashTabItemGroupControlData {
     autoHeight: boolean;
     buttonApply: boolean;
     buttonReset: boolean;
+    tabsScope?: TabsScope;
 
     updateControlsOnChange?: boolean;
 

src/shared/types/feature.ts

@@ -103,6 +103,8 @@ export enum Feature {
 
     EnableMobileFixedHeader = 'EnableMobileFixedHeader',
     EnableCommonChartDashSettings = 'EnableCommonChartDashSettings',
+    /** Enable a setting in the Selector settings dialog that allows you to make the selector pass-through for all or several tabs */
+    EnableGlobalSelectors = 'EnableGlobalSelectors',
 }
 
 export type FeatureConfig = Record<string, boolean>;

src/shared/zod-schemas/dash.ts

@@ -116,6 +116,7 @@ const controlSchema = z
         namespace: z.literal(DASH_DEFAULT_NAMESPACE),
         title: z.string().min(1),
         sourceType: z.enum(DashTabItemControlSourceType),
+        tabsScope: z.union([z.string(), z.array(z.string())]).optional(),
     })
     .and(
         z.discriminatedUnion('sourceType', [
@@ -147,6 +148,7 @@ const groupControlItemsSchema = z
         defaults: z.record(z.any(), z.any()),
         placementMode: z.enum(CONTROLS_PLACEMENT_MODE).optional(),
         width: z.string().optional(),
+        tabsScope: z.union([z.string(), z.array(z.string())]).optional(),
     })
     .and(
         z.discriminatedUnion('sourceType', [

src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonSettingsSection.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 
 import {I18n} from 'i18n';
 import {useSelector} from 'react-redux';
-import {selectSelectorDialog} from 'ui/store/selectors/controlDialog';
+import {selectSelectorDialog, selectSelectorsGroup} from 'ui/store/selectors/controlDialog';
 
 import {ParameterNameInput} from '../ParameterNameInput/ParameterNameInput';
+import {TabsScopeSelect} from '../TabsScopeSelect/TabsScopeSelect';
 
 import {ConnectionSelector} from './components/ConnectionSelector/ConnectionSelector';
 import {QueryTypeControl} from './components/QueryTypeControl/QueryTypeControl';
@@ -15,12 +16,15 @@ export const ConnectionSettings = ({
     navigationPath,
     changeNavigationPath,
     rowClassName,
+    enableGlobalSelectors,
 }: {
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
     rowClassName?: string;
+    enableGlobalSelectors?: boolean;
 }) => {
     const {connectionQueryTypes} = useSelector(selectSelectorDialog);
+    const {tabsScope, group} = useSelector(selectSelectorsGroup);
 
     return (
         <React.Fragment>
@@ -38,6 +42,12 @@ export const ConnectionSettings = ({
                     <QueryTypeControl connectionQueryTypes={connectionQueryTypes} />
                 </React.Fragment>
             )}
+            {enableGlobalSelectors && (
+                <TabsScopeSelect
+                    groupTabsScope={tabsScope}
+                    hasMultipleSelectors={group.length > 1}
+                />
+            )}
         </React.Fragment>
     );
 };