Controls groups title (#1975)

datalens-tech · Dec 26, 2024 · 4691994 · 4691994
1 parent 1d7f730
commit 4691994
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,6 +25,8 @@ export type SelectorDialogValidation = {
 };
 
 export type SelectorsGroupDialogState = {
+    showGroupName: boolean;
+    groupName?: string;
     autoHeight: boolean;
     buttonApply: boolean;
     buttonReset: boolean;