Support base operations with selectors globality (#3061)

Author: mournfulCoroner

src/server/components/features/features-list/EnableGlobalSelectors.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.EnableGlobalSelectors,
+    state: {
+        development: false,
+        production: false,
+    },
+});

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,23 @@ function validateData(data: DashData) {
             allTabsIds.add(tabId);
         }
 
+        globalItems?.forEach(({id: itemId, type, data}) => {
+            allItemsIds.add(itemId);
+            currentItemsIds.add(itemId);
+
+            // to avoid isIdUniq check
+            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 +207,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

@@ -2,6 +2,9 @@ import type {ItemDropProps} from '@gravity-ui/dashkit';
 
 import type {Operations} from '../modules';
 
+export type ImpactType = 'allTabs' | 'currentTab' | 'selectedTabs' | 'asGroup';
+export type ImpactTabsIds = string[] | null | undefined;
+
 import type {
     ClientChartsConfig,
     Dictionary,
@@ -126,6 +129,7 @@ export interface DashTab {
     aliases: DashTabAliases;
     connections: DashTabConnection[];
     settings?: DashTabSettings;
+    globalItems?: DashTabItem[];
 }
 
 export type DashSettingsGlobalParams = Record<string, string | string[]>;
@@ -222,19 +226,24 @@ export interface DashTabItemControl extends DashTabItemBase {
     defaults: StringParams;
 }
 
-export interface DashTabItemControlData {
+export interface DashTabItemControlBaseData {
     id: string;
     title: string;
-    sourceType: DashTabItemControlSourceType;
-    source:
-        | DashTabItemControlDataset['source']
-        | DashTabItemControlManual['source']
-        | DashTabItemControlExternal['source'];
     placementMode?: 'auto' | '%' | 'px';
     autoHeight?: boolean;
     width?: string;
     defaults?: StringParams;
     namespace: string;
+    impactType?: ImpactType;
+    impactTabsIds?: ImpactTabsIds;
+}
+
+export interface DashTabItemControlData extends DashTabItemControlBaseData {
+    sourceType: DashTabItemControlSourceType;
+    source:
+        | DashTabItemControlDataset['source']
+        | DashTabItemControlManual['source']
+        | DashTabItemControlExternal['source'];
 }
 
 export type DashTabItemControlSingle = DashTabItemControlDataset | DashTabItemControlManual;
@@ -336,15 +345,19 @@ export interface DashTabItemGroupControl extends DashTabItemBase {
     defaults: StringParams;
 }
 
-export interface DashTabItemGroupControlData {
+export interface DashTabItemGroupControlBaseData {
     showGroupName: boolean;
     groupName?: string;
     autoHeight: boolean;
     buttonApply: boolean;
     buttonReset: boolean;
+    impactType?: ImpactType;
+    impactTabsIds?: ImpactTabsIds;
 
     updateControlsOnChange?: boolean;
+}
 
+export interface DashTabItemGroupControlData extends DashTabItemGroupControlBaseData {
     group: DashTabItemControlSingle[];
 }
 

src/shared/types/feature.ts

@@ -100,6 +100,8 @@ export enum Feature {
     EnableMobileFixedHeader = 'EnableMobileFixedHeader',
     /** enabled redesign/moving to drawers existing settings */
     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',
     /** enables new dash & widgets settings */
     EnableNewDashSettings = 'EnableNewDashSettings',
     /** Shows updated settings page */

src/shared/zod-schemas/dash.ts

@@ -116,6 +116,13 @@ const controlSchema = z
         namespace: z.literal(DASH_DEFAULT_NAMESPACE),
         title: z.string().min(1),
         sourceType: z.enum(DashTabItemControlSourceType),
+        // TODO(global selectors): uncomment when flag will be enabled
+        // fields that regulate which tabs the selector will be displayed on
+        // 'allTabs' = global selectors
+        // 'currentTab' = regular selector that is visible only on one tab
+        // 'selectedTabs' + impactTabsIds = selector is visible on the selected tabs
+        // impactType: z.enum(['allTabs', 'currentTab', 'selectedTabs']).optional(),
+        // impactTabsIds: z.array(z.string()).optional(),
     })
     .and(
         z.discriminatedUnion('sourceType', [
@@ -147,6 +154,13 @@ const groupControlItemsSchema = z
         defaults: z.record(z.any(), z.any()),
         placementMode: z.enum(CONTROLS_PLACEMENT_MODE).optional(),
         width: z.string().optional(),
+        // TODO(global selectors): uncomment when flag will be enabled
+        // fields that regulate which tabs the selector will be displayed on
+        // 'allTabs' = global selectors
+        // 'currentTab' = regular selector that is visible only on one tab
+        // 'selectedTabs' + impactTabsIds = selector is visible on the selected tabs
+        // impactType: z.enum(['allTabs', 'currentTab', 'selectedTabs']).optional(),
+        // impactTabsIds: z.array(z.string()).optional(),
     })
     .and(
         z.discriminatedUnion('sourceType', [

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

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {I18n} from 'i18n';
+import {useSelector} from 'react-redux';
+import {DashTabItemControlSourceType} from 'shared';
+import {selectSelectorDialog, selectSelectorsGroup} from 'ui/store/selectors/controlDialog';
+
+import {ConnectionSettings} from './ConnectionSettings/ConnectionSettings';
+import {DatasetSelectorSettings} from './DatasetSelectorSettings/DatasetSelectorSettings';
+import {ImpactTypeSelect} from './ImpactTypeSelect/ImpactTypeSelect';
+import {ParameterNameInput} from './ParameterNameInput/ParameterNameInput';
+
+const i18n = I18n.keyset('dash.control-dialog.edit');
+
+export const CommonGroupSettingsSection = ({
+    navigationPath,
+    changeNavigationPath,
+    enableGlobalSelectors,
+    className,
+}: {
+    navigationPath: string | null;
+    changeNavigationPath: (newNavigationPath: string) => void;
+    enableGlobalSelectors?: boolean;
+    className?: string;
+}) => {
+    const {sourceType} = useSelector(selectSelectorDialog);
+    const {group, impactType, impactTabsIds} = useSelector(selectSelectorsGroup);
+
+    const hasMultipleSelectors = group.length > 1;
+
+    switch (sourceType) {
+        case DashTabItemControlSourceType.Manual:
+            return (
+                <React.Fragment>
+                    <ParameterNameInput
+                        label={i18n('field_field-name')}
+                        note={i18n('field_field-name-note')}
+                        className={className}
+                    />
+                    {enableGlobalSelectors && (
+                        <ImpactTypeSelect
+                            groupImpactType={impactType}
+                            groupImpactTabsIds={impactTabsIds}
+                            hasMultipleSelectors={hasMultipleSelectors}
+                        />
+                    )}
+                </React.Fragment>
+            );
+        case DashTabItemControlSourceType.Connection:
+            return (
+                <ConnectionSettings
+                    rowClassName={className}
+                    changeNavigationPath={changeNavigationPath}
+                    navigationPath={navigationPath}
+                    enableGlobalSelectors={enableGlobalSelectors}
+                />
+            );
+        default:
+            return (
+                <DatasetSelectorSettings
+                    rowClassName={className}
+                    navigationPath={navigationPath}
+                    changeNavigationPath={changeNavigationPath}
+                    enableGlobalSelectors={enableGlobalSelectors}
+                />
+            );
+    }
+};

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

@@ -2,8 +2,9 @@ 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 {ImpactTypeSelect} from '../ImpactTypeSelect/ImpactTypeSelect';
 import {ParameterNameInput} from '../ParameterNameInput/ParameterNameInput';
 
 import {ConnectionSelector} from './components/ConnectionSelector/ConnectionSelector';
@@ -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 {impactType, impactTabsIds, group} = useSelector(selectSelectorsGroup);
 
     return (
         <React.Fragment>
@@ -38,6 +42,13 @@ export const ConnectionSettings = ({
                     <QueryTypeControl connectionQueryTypes={connectionQueryTypes} />
                 </React.Fragment>
             )}
+            {enableGlobalSelectors && (
+                <ImpactTypeSelect
+                    groupImpactType={impactType}
+                    groupImpactTabsIds={impactTabsIds}
+                    hasMultipleSelectors={group.length > 1}
+                />
+            )}
         </React.Fragment>
     );
 };