Support base operations with selectors globality

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: true,
+        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,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 renamed to src/ui/components/ControlComponents/Sections/CommonSettingsSection/CommonGroupSettingsSection.tsx

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

src/ui/components/ControlComponents/Sections/CommonSettingsSection/ConnectionSettings/ConnectionSettings.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>
     );
 };

src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.scss

@@ -15,25 +15,32 @@ import {
 import logger from 'ui/libs/logger';
 import {setLastUsedDatasetId, setSelectorDialogItem} from 'ui/store/actions/controlDialog';
 import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
-import {selectOpenedItemMeta, selectSelectorDialog} from 'ui/store/selectors/controlDialog';
+import {
+    selectOpenedItemMeta,
+    selectSelectorDialog,
+    selectSelectorsGroup,
+} from 'ui/store/selectors/controlDialog';
 import type {SelectorElementType, SetSelectorDialogItemArgs} from 'ui/store/typings/controlDialog';
 
 import {DatasetField} from '../../Switchers/DatasetField/DatasetField';
 import {EntrySelector} from '../EntrySelector/EntrySelector';
+import {TabsScopeSelect} from '../TabsScopeSelect/TabsScopeSelect';
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
 const getDatasetLink = (entryId: string) => `/datasets/${entryId}`;
 
-function DatasetSelector(props: {
+function DatasetSelectorSettings(props: {
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
     rowClassName?: string;
+    enableGlobalSelectors?: boolean;
 }) {
     const dispatch = useDispatch();
     const {datasetId, datasetFieldId, isManualTitle, title, fieldType, validation} =
         useSelector(selectSelectorDialog);
     const {workbookId} = useSelector(selectOpenedItemMeta);
+    const {tabsScope, group} = useSelector(selectSelectorsGroup);
     const [isInvalid, setIsInvalid] = React.useState(false);
 
     const fetchDataset = React.useCallback((entryId: string) => {
@@ -53,7 +60,7 @@ function DatasetSelector(props: {
             })
             .catch((isInvalid) => {
                 setIsInvalid(true);
-                logger.logError('DatasetSelector: load dataset failed', isInvalid);
+                logger.logError('DatasetSelectorSettings: load dataset failed', isInvalid);
             });
     }, []);
 
@@ -171,8 +178,14 @@ function DatasetSelector(props: {
                     />
                 </FieldWrapper>
             </FormRow>
+            {props.enableGlobalSelectors && (
+                <TabsScopeSelect
+                    hasMultipleSelectors={group.length > 1}
+                    groupTabsScope={tabsScope}
+                ></TabsScopeSelect>
+            )}
         </React.Fragment>
     );
 }
 
-export {DatasetSelector};
+export {DatasetSelectorSettings};

src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelector/DatasetSelector.tsx renamed to src/ui/components/ControlComponents/Sections/CommonSettingsSection/DatasetSelectorSettings/DatasetSelectorSettings.tsx

@@ -15,6 +15,7 @@ import {selectOpenedItemMeta, selectSelectorDialog} from 'ui/store/selectors/con
 import {EntryTypeNode} from 'ui/units/dash/modules/constants';
 
 import {EntrySelector} from '../EntrySelector/EntrySelector';
+import {TabsScopeSelect} from '../TabsScopeSelect/TabsScopeSelect';
 
 import './ExternalSelectorSettings.scss';
 
@@ -32,6 +33,7 @@ const ExternalSelectorSettings: React.FC<{
     navigationPath: string | null;
     changeNavigationPath: (newNavigationPath: string) => void;
     enableAutoheightDefault?: boolean;
+    enableGlobalSelectors?: boolean;
     rowClassName?: string;
 }> = (props) => {
     const dispatch = useDispatch();
@@ -121,6 +123,8 @@ const ExternalSelectorSettings: React.FC<{
                 changeNavigationPath={props.changeNavigationPath}
             />
 
+            {props.enableGlobalSelectors && <TabsScopeSelect />}
+
             {!props.enableAutoheightDefault && (
                 <FormRow
                     label={i18n('dash.control-dialog.edit', 'field_autoheight')}