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 + {controlData.showGroupName && controlData.groupName && ( + + {controlData.groupName} + + )} {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 = ({ /> + {showSelectorsGroupTitle && ( + + + + + + + )} = ({ navigationPath, changeNavigationPath, enableAutoheightDefault, + showSelectorsGroupTitle, }) => { const {id, draftId} = useSelector(selectSelectorDialog); @@ -73,6 +75,7 @@ export const DialogGroupControl: React.FC = ({ sidebar={ } 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;