Refactor & redesign selectors edit dialog (#1964)

src/i18n-keysets/dash.extended-settings-dialog.edit/en.json

@@ -0,0 +1,21 @@
+{
+  "button_back": "Back",
+  "button_cancel": "Cancel",
+  "button_save": "Save",
+  "context_apply-button": "This option enables a button for applying selectors",
+  "context_reset-button": "This option enables a button for resetting selectors",
+  "context_update-controls-on-change": "Once you enable this option, the dependent selectors will have influence on each other before you click Apply.",
+  "label_apply-button-checkbox": "Apply button",
+  "label_autoheight-checkbox": "Autoheight",
+  "label_field-validation": "Invalid width value",
+  "label_group-name": "Name",
+  "label_group-parameters": "Group parameters",
+  "label_note": "Selectors whose width does not fit completely inside the widget that unites a group of selectors will be moved to the next line",
+  "label_reset-button-checkbox": "Reset button",
+  "label_selectors-representation": "Selectors representation order and width",
+  "label_title": "Settings for selectors group",
+  "label_update-controls-on-change": "Auto-updating dependent selectors",
+  "value_auto": "Auto",
+  "value_percent": "%",
+  "value_pixels": "px"
+}

src/i18n-keysets/dash.extended-settings-dialog.edit/ru.json

@@ -0,0 +1,21 @@
+{
+  "button_back": "Назад",
+  "button_cancel": "Отмена",
+  "button_save": "Сохранить",
+  "context_apply-button": "Опция включает кнопку для применения селекторов",
+  "context_reset-button": "Опция включает кнопку для сброса селекторов",
+  "context_update-controls-on-change": "При включении опции зависимые селекторы будут влиять друг на друга до нажатия кнопки «Применить».",
+  "label_apply-button-checkbox": "Кнопка «‎Применить»‎",
+  "label_autoheight-checkbox": "Автовысота",
+  "label_field-validation": "Некорректное значение ширины",
+  "label_group-name": "Название",
+  "label_group-parameters": "Параметры группы",
+  "label_note": "Селекторы, которые по ширине не помещаются в виджет, объединяющий группу селекторов, будут перенесены на следующую строку",
+  "label_reset-button-checkbox": "Кнопка «‎Сбросить»",
+  "label_selectors-representation": "Порядок отображения и ширина селекторов",
+  "label_title": "Настройки группы селекторов",
+  "label_update-controls-on-change": "Автообновление зависимых селекторов",
+  "value_auto": "Авто",
+  "value_percent": "%",
+  "value_pixels": "px"
+}

src/i18n-keysets/dash.group-controls-dialog.edit/en.json

@@ -1,22 +1,19 @@
 {
-  "button_add-selector": "Add",
+  "button_add-selector": "Add selector",
   "button_cancel": "Cancel",
+  "button_extended-settings": "Extended settings",
   "button_paste-selector": "Paste",
   "button_save": "Save",
-  "button_selectors-placement": "Selector placement",
-  "context_apply-button": "This option enables a button for applying selectors",
-  "context_reset-button": "This option enables a button for resetting selectors",
-  "context_update-controls-on-change": "Once you enable this option, the dependent selectors will have influence on each other before you click Apply.",
-  "label_apply-button-checkbox": "Apply button",
-  "label_autoheight-checkbox": "Autoheight",
   "label_copy-invalid-control": "Failed to copy selector: some fields did not pass validation",
+  "label_data": "Data",
   "label_default-tab": "Selector {{index}}",
-  "label_reset-button-checkbox": "Reset button",
+  "label_filtration": "Filtration",
+  "label_representation": "Representation",
   "label_selector-settings": "Selector settings",
   "label_selectors-list": "Selectors",
   "label_source": "Source",
   "label_title-placement": "Title placement",
-  "label_update-controls-on-change": "Auto-updating dependent selectors",
+  "value_title-hidden": "Hidden",
   "value_title-placement-left": "Left",
   "value_title-placement-top": "Top"
 }

src/i18n-keysets/dash.group-controls-dialog.edit/ru.json

@@ -1,22 +1,19 @@
 {
-  "button_add-selector": "Добавить",
+  "button_add-selector": "Добавить селектор",
   "button_cancel": "Отменить",
+  "button_extended-settings": "Расширенные настройки",
   "button_paste-selector": "Вставить",
   "button_save": "Сохранить",
-  "button_selectors-placement": "Размещение селекторов",
-  "context_apply-button": "Опция включает кнопку для применения селекторов",
-  "context_reset-button": "Опция включает кнопку для сброса селекторов",
-  "context_update-controls-on-change": "При включении опции зависимые селекторы будут влиять друг на друга до нажатия кнопки «Применить».",
-  "label_apply-button-checkbox": "Кнопка «‎Применить»‎",
-  "label_autoheight-checkbox": "Автовысота",
   "label_copy-invalid-control": "Не удалось скопировать селектор: некоторые его поля заполнены некорректно",
+  "label_data": "Данные",
   "label_default-tab": "Селектор {{index}}",
-  "label_reset-button-checkbox": "Кнопка «‎Сбросить»",
+  "label_filtration": "Фильтрация",
+  "label_representation": "Отображение",
   "label_selector-settings": "Настройки селектора",
   "label_selectors-list": "Селекторы",
   "label_source": "Источник",
   "label_title-placement": "Размещение заголовка",
-  "label_update-controls-on-change": "Автообновление зависимых селекторов",
+  "value_title-hidden": "Скрыт",
   "value_title-placement-left": "Слева",
   "value_title-placement-top": "Сверху"
 }

src/shared/constants/qa/control.ts

@@ -1,6 +1,5 @@
 export const ControlQA = {
     showInnerTitleCheckbox: 'show-inner-title-checkbox',
-    showLabelCheckbox: 'show-control-name-checkbox',
     controlLabel: 'chartkit-control-title',
 
     controlSelect: 'chartkit-control-select',
@@ -41,6 +40,7 @@ export const DialogControlQa = {
     radioSourceType: 'radio-source-type',
     seletSourceType: 'select-source-type',
     appearanceTitle: 'dialog-control-appearance-title',
+    appearanceTitlePlacement: 'dialog-control-appearance-title-placement',
     appearanceInnerTitle: 'dialog-control-appearance-inner-title',
     fieldNameInput: 'field-name-input',
     dateRangeCheckbox: 'date-range-checkbox',
@@ -63,9 +63,9 @@ export const DialogGroupControlQa = {
     applyButtonCheckbox: 'apply-button-checkbox',
     resetButtonCheckbox: 'reset-button-checkbox',
     updateControlOnChangeCheckbox: 'update-controls-button-checkbox',
-    placementButton: 'selectors-placement-button',
+    extendedSettingsButton: 'extended-settings-button',
     placementControlList: 'selectors-placement-control-list',
-    placementApplyButton: 'selectors-placement-apply-button',
+    extendedSettingsApplyButton: 'selectors-extended-settings-apply-button',
     controlMenu: 'control-menu',
     removeControlButton: 'remove-control-button',
     copyControlButton: 'copy-control-button',

src/shared/types/dash.ts

@@ -2,7 +2,14 @@ import type {ItemDropProps} from '@gravity-ui/dashkit';
 
 import type {Operations} from '../modules';
 
-import type {ClientChartsConfig, Dictionary, Entry, EntryScope, StringParams} from './index';
+import type {
+    ClientChartsConfig,
+    Dictionary,
+    Entry,
+    EntryScope,
+    StringParams,
+    ValueOf,
+} from './index';
 
 export enum ControlType {
     Dash = 'control_dash',
@@ -235,6 +242,14 @@ export enum TitlePlacementOption {
     Top = 'top',
 }
 
+export const TitlePlacements = {
+    Hide: 'hide' as const,
+    Left: TitlePlacementOption.Left,
+    Top: TitlePlacementOption.Top,
+};
+
+export type TitlePlacement = ValueOf<typeof TitlePlacements>;
+
 export type AccentTypeValue = 'info' | null;
 
 export interface DashTabItemControlElementBase {

src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss

@@ -1,16 +1,12 @@
 .control2-appearance-section {
     &__setting-container {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: var(--gc-form-row-field-height);
     }
 
     &__setting-checkbox {
-        margin-right: 8px;
-
-        &_top {
-            align-self: flex-start;
-            margin-top: 4px;
-        }
+        margin-block-start: var(--g-spacing-1);
+        margin-inline-end: var(--g-spacing-2);
     }
 }

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx

@@ -17,7 +17,7 @@ const b = block('control2-appearance-section');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const ColorAccentRow = () => {
+export const ColorAccentRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {accentType} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -47,7 +47,7 @@ export const ColorAccentRow = () => {
     );
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={className}>
             <div className={b('setting-container')}>
                 <Checkbox
                     disabled={isFieldDisabled}

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx

@@ -18,7 +18,7 @@ const b = block('control2-appearance-section');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const HintRow = () => {
+export const HintRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {showHint = false, hint} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -38,7 +38,7 @@ export const HintRow = () => {
     const {MarkdownControl} = registry.common.components.getAll();
 
     return (
-        <FormRow label={i18n('field_hint')}>
+        <FormRow label={i18n('field_hint')} className={className}>
             <div className={b('setting-container')}>
                 <Checkbox
                     disabled={isFieldDisabled}

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx

@@ -28,7 +28,7 @@ const getHelpPopoverText = (sourceType: SelectorSourceType | undefined): string
     }
 };
 
-export const InnerTitleRow = () => {
+export const InnerTitleRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
     const {showInnerTitle, innerTitle, sourceType} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
@@ -63,7 +63,7 @@ export const InnerTitleRow = () => {
     );
 
     return (
-        <FormRow label={label}>
+        <FormRow label={label} className={className}>
             <div className={b('setting-container')} data-qa={DialogControlQa.appearanceInnerTitle}>
                 <Checkbox
                     className={b('setting-checkbox')}

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx

@@ -5,7 +5,8 @@ import {RadioButton} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
-import {TitlePlacementOption} from 'shared/types/dash';
+import type {TitlePlacement} from 'shared';
+import {DialogControlQa, TitlePlacements} from 'shared';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
 import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
@@ -20,33 +21,34 @@ const b = block('control2-appearance-section');
 const i18n = I18n.keyset('dash.group-controls-dialog.edit');
 
 const TITLE_PLACEMENT_OPTIONS = [
-    {content: i18n('value_title-placement-left'), value: TitlePlacementOption.Left},
-    {content: i18n('value_title-placement-top'), value: TitlePlacementOption.Top},
+    {content: i18n('value_title-hidden'), value: TitlePlacements.Hide},
+    {content: i18n('value_title-placement-left'), value: TitlePlacements.Left},
+    {content: i18n('value_title-placement-top'), value: TitlePlacements.Top},
 ];
 
-export const TitlePlacementRow = () => {
+export const TitlePlacementRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
-    const {elementType, titlePlacement = TitlePlacementOption.Left} =
-        useSelector(selectSelectorDialog);
+    const {elementType, titlePlacement} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
 
     const isPlacementDisabled = isFieldDisabled || elementType === ELEMENT_TYPE.CHECKBOX;
 
     const handleItemPlacementUpdate = React.useCallback(
-        (value: string) => {
+        (value: TitlePlacement) => {
             dispatch(
                 setSelectorDialogItem({
-                    titlePlacement: value as TitlePlacementOption,
+                    titlePlacement: value,
                 }),
             );
         },
         [dispatch],
     );
 
     return (
-        <FormRow label={i18n('label_title-placement')}>
+        <FormRow className={className}>
             <div className={b('setting-container')}>
                 <RadioButton
+                    qa={DialogControlQa.appearanceTitlePlacement}
                     options={TITLE_PLACEMENT_OPTIONS}
                     value={titlePlacement}
                     disabled={isPlacementDisabled}

src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {FormRow} from '@gravity-ui/components';
-import {Checkbox, TextInput} from '@gravity-ui/uikit';
+import {TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {FieldWrapper} from 'components/FieldWrapper/FieldWrapper';
 import {I18n} from 'i18n';
@@ -19,9 +19,9 @@ const b = block('control2-appearance-section');
 
 const i18n = I18n.keyset('dash.control-dialog.edit');
 
-export const TitleRow = () => {
+export const TitleRow = ({className}: {className?: string}) => {
     const dispatch = useDispatch();
-    const {showTitle, title, validation} = useSelector(selectSelectorDialog);
+    const {title, validation} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
 
     const handleTitleUpdate = React.useCallback((title: string) => {
@@ -33,25 +33,9 @@ export const TitleRow = () => {
         );
     }, []);
 
-    const handleShowTitleUpdate = React.useCallback((value: boolean) => {
-        dispatch(
-            setSelectorDialogItem({
-                showTitle: value,
-            }),
-        );
-    }, []);
-
     return (
-        <FormRow label={i18n('field_title')}>
+        <FormRow label={i18n('field_title')} className={className}>
             <div className={b('setting-container')} data-qa={DialogControlQa.appearanceTitle}>
-                <Checkbox
-                    disabled={isFieldDisabled}
-                    className={b('setting-checkbox')}
-                    qa={ControlQA.showLabelCheckbox}
-                    checked={showTitle}
-                    onUpdate={handleShowTitleUpdate}
-                    size="l"
-                />
                 <FieldWrapper error={validation.title}>
                     <TextInput
                         disabled={isFieldDisabled}