Support accent setting for selectors (#1925)

Co-authored-by: datalens-weblate-robot <[email protected]> Co-authored-by: Darya Tikhonova <[email protected]> Co-authored-by: Matthew Casserly <[email protected]>
datalens-tech · Dec 16, 2024 · 2d5e359 · 2d5e359
1 parent e5c259a
commit 2d5e359
Show file tree

Hide file tree

Showing 20 changed files with 217 additions and 89 deletions.
diff --git a/src/i18n-keysets/dash.control-dialog.edit/en.json b/src/i18n-keysets/dash.control-dialog.edit/en.json
@@ -17,6 +17,8 @@
   "error_unsupported-connection": "Connection not supported",
   "field_acceptable-values": "Possible values",
   "field_autoheight": "Auto height",
+  "field_color-accent": "Color accent",
+  "field_color-accent-note": "Use this option to highlight important selectors",
   "field_connection": "Connection",
   "field_control": "Selector",
   "field_dataset": "Dataset",

diff --git a/src/i18n-keysets/dash.control-dialog.edit/ru.json b/src/i18n-keysets/dash.control-dialog.edit/ru.json
@@ -17,6 +17,8 @@
   "error_unsupported-connection": "Подключение не поддерживается",
   "field_acceptable-values": "Возможные значения",
   "field_autoheight": "Автовысота",
+  "field_color-accent": "Цветовой акцент",
+  "field_color-accent-note": "Используйте опцию для выделения цветом важных селекторов",
   "field_connection": "Подключение",
   "field_control": "Селектор",
   "field_dataset": "Датасет",

diff --git a/src/shared/types/dash.ts b/src/shared/types/dash.ts
@@ -231,6 +231,8 @@ export enum TitlePlacementOption {
     Top = 'top',
 }
 
+export type AccentTypeValue = 'info' | null;
+
 export interface DashTabItemControlElementBase {
     showTitle: boolean;
     titlePlacement?: TitlePlacementOption;
@@ -242,6 +244,7 @@ export interface DashTabItemControlElementBase {
     required?: boolean;
     showHint?: boolean;
     hint?: string;
+    accentType?: AccentTypeValue;
 }
 
 export interface DashTabItemControlElementSelect extends DashTabItemControlElementBase {

diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss b/src/ui/components/ControlComponents/Sections/AppearanceSection/AppearanceSection.scss
@@ -1,15 +1,11 @@
 .control2-appearance-section {
-    &__operation-container {
+    &__setting-container {
         display: flex;
         align-items: center;
+        min-height: var(--gc-form-row-field-height);
     }
 
-    &__operation-checkbox {
+    &__setting-checkbox {
         margin-right: 8px;
-
-        &_top {
-            align-self: flex-start;
-            margin-top: 4px;
-        }
     }
 }
diff --git a/...nents/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx b/...nents/ControlComponents/Sections/AppearanceSection/Rows/ColorAccentRow/ColorAccentRow.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {FormRow, HelpPopover} from '@gravity-ui/components';
+import {Checkbox} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import {I18n} from 'i18n';
+import {useDispatch, useSelector} from 'react-redux';
+import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
+import {
+    selectIsControlConfigurationDisabled,
+    selectSelectorDialog,
+} from 'ui/store/selectors/controlDialog';
+
+import '../../AppearanceSection.scss';
+
+const b = block('control2-appearance-section');
+
+const i18n = I18n.keyset('dash.control-dialog.edit');
+
+export const ColorAccentRow = () => {
+    const dispatch = useDispatch();
+    const {accentType} = useSelector(selectSelectorDialog);
+    const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
+
+    const handleaccentTypeUpdate = React.useCallback(
+        (enableAccent) => {
+            const updatedType = enableAccent ? 'info' : null;
+
+            dispatch(
+                setSelectorDialogItem({
+                    accentType: updatedType,
+                }),
+            );
+        },
+        [dispatch],
+    );
+
+    const label = (
+        <React.Fragment>
+            <span>{i18n('field_color-accent')}</span>
+            <HelpPopover
+                placement={['bottom', 'top']}
+                offset={{top: -1, left: 5}}
+                content={i18n('field_color-accent-note')}
+            />
+        </React.Fragment>
+    );
+
+    return (
+        <FormRow label={label}>
+            <div className={b('setting-container')}>
+                <Checkbox
+                    disabled={isFieldDisabled}
+                    onUpdate={handleaccentTypeUpdate}
+                    checked={Boolean(accentType)}
+                    size="l"
+                    className={b('setting-checkbox')}
+                />
+            </div>
+        </FormRow>
+    );
+};
diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx
@@ -39,13 +39,13 @@ export const HintRow = () => {
 
     return (
         <FormRow label={i18n('field_hint')}>
-            <div className={b('operation-container')}>
+            <div className={b('setting-container')}>
                 <Checkbox
                     disabled={isFieldDisabled}
                     onUpdate={handleUpdateEnable}
                     checked={showHint}
                     size="l"
-                    className={b('operation-checkbox', {top: true})}
+                    className={b('setting-checkbox')}
                 />
                 {showHint && (
                     <MarkdownControl

diff --git a/...ponents/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx b/...ponents/ControlComponents/Sections/AppearanceSection/Rows/InnerTitleRow/InnerTitleRow.tsx
@@ -7,7 +7,6 @@ import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
 import {ControlQA, DashTabItemControlSourceType, DialogControlQa} from 'shared';
 import {setSelectorDialogItem} from 'ui/store/actions/controlDialog';
-import {ELEMENT_TYPE} from 'ui/store/constants/controlDialog';
 import {
     selectIsControlConfigurationDisabled,
     selectSelectorDialog,
@@ -31,11 +30,10 @@ const getHelpPopoverText = (sourceType: SelectorSourceType | undefined): string
 
 export const InnerTitleRow = () => {
     const dispatch = useDispatch();
-    const {elementType, showInnerTitle, innerTitle, sourceType} = useSelector(selectSelectorDialog);
+    const {showInnerTitle, innerTitle, sourceType} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
 
-    const isInnerTitleDisabled = elementType === ELEMENT_TYPE.CHECKBOX || isFieldDisabled;
-    const isInnerTitleActive = (elementType !== ELEMENT_TYPE.CHECKBOX && showInnerTitle) ?? false;
+    const isInnerTitleActive = showInnerTitle ?? false;
 
     const handleShowInnerTitleUpdate = React.useCallback((showInnerTitle: boolean) => {
         dispatch(
@@ -66,13 +64,10 @@ export const InnerTitleRow = () => {
 
     return (
         <FormRow label={label}>
-            <div
-                className={b('operation-container')}
-                data-qa={DialogControlQa.appearanceInnerTitle}
-            >
+            <div className={b('setting-container')} data-qa={DialogControlQa.appearanceInnerTitle}>
                 <Checkbox
-                    className={b('operation-checkbox')}
-                    disabled={isInnerTitleDisabled}
+                    className={b('setting-checkbox')}
+                    disabled={isFieldDisabled}
                     checked={isInnerTitleActive}
                     qa={ControlQA.showInnerTitleCheckbox}
                     onUpdate={handleShowInnerTitleUpdate}

diff --git a/...ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx b/...ControlComponents/Sections/AppearanceSection/Rows/TitlePlacementRow/TitlePlacementRow.tsx
@@ -45,7 +45,7 @@ export const TitlePlacementRow = () => {
 
     return (
         <FormRow label={i18n('label_title-placement')}>
-            <div className={b('operation-container')}>
+            <div className={b('setting-container')}>
                 <RadioButton
                     options={TITLE_PLACEMENT_OPTIONS}
                     value={titlePlacement}

diff --git a/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx b/src/ui/components/ControlComponents/Sections/AppearanceSection/Rows/TitleRow/TitleRow.tsx
@@ -43,10 +43,10 @@ export const TitleRow = () => {
 
     return (
         <FormRow label={i18n('field_title')}>
-            <div className={b('operation-container')} data-qa={DialogControlQa.appearanceTitle}>
+            <div className={b('setting-container')} data-qa={DialogControlQa.appearanceTitle}>
                 <Checkbox
                     disabled={isFieldDisabled}
-                    className={b('operation-checkbox')}
+                    className={b('setting-checkbox')}
                     qa={ControlQA.showLabelCheckbox}
                     checked={showTitle}
                     onUpdate={handleShowTitleUpdate}

diff --git a/src/ui/components/DashKit/plugins/Control/ControlItems/ControlItemSelect.tsx b/src/ui/components/DashKit/plugins/Control/ControlItems/ControlItemSelect.tsx
@@ -75,7 +75,7 @@ type ControlItemSelectProps = {
     renderOverlay?: () => React.ReactNode;
     selectProps: Pick<
         SelectControlProps,
-        'style' | 'innerLabel' | 'label' | 'limitLabel' | 'labelPlacement'
+        'style' | 'innerLabel' | 'label' | 'limitLabel' | 'labelPlacement' | 'accentType'
     >;
 };
 

diff --git a/src/ui/components/DashKit/plugins/Control/types.ts b/src/ui/components/DashKit/plugins/Control/types.ts
@@ -1,7 +1,7 @@
 import type React from 'react';
 
 import type {StringParams} from '@gravity-ui/dashkit';
-import type {TitlePlacementOption} from 'shared';
+import type {AccentTypeValue, TitlePlacementOption} from 'shared';
 import type {
     GetDistinctsApiV2Args,
     GetDistinctsApiV2InfoHeadersArg,
@@ -84,6 +84,7 @@ export interface SelectControlProps {
     innerLabel: string;
     labelPlacement?: TitlePlacementOption;
     limitLabel?: boolean;
+    accentType?: AccentTypeValue;
     param: string;
     multiselect: boolean;
     type: ControlType;