Add shape settings scope tabs

Author: arsen-afaunov

src/shared/constants/qa/wizard.ts

@@ -197,6 +197,7 @@ export const enum ChartSettingsDialogQA {
 }
 
 export const enum DialogShapeSettings {
+    LineSettingsScopeTab = 'line-settings-scope-tab',
     LineWidthSelectControl = 'line-width-select-control',
     LineWidthSelectOption = 'line-width-select-option',
 }

src/shared/types/config/wizard/v15.ts

@@ -312,6 +312,7 @@ export type V15ColorsConfig = {
 export type V15ShapesConfig = {
     mountedShapes?: Record<string, string>;
     mountedShapesLineWidths?: Record<string, number>;
+    chartLineWidth?: number;
     fieldGuid?: string;
 };
 

src/shared/types/wizard/index.ts

@@ -511,6 +511,7 @@ export type Sort = Field & {
 export interface ShapesConfig {
     mountedShapes?: Record<string, string>;
     mountedShapesLineWidths?: Record<string, number>;
+    chartLineWidth?: number;
     fieldGuid?: string;
 }
 

src/ui/units/wizard/components/Dialogs/DialogShapes/DialogLineWidth/DialogLineWidth.tsx

@@ -2,35 +2,65 @@ import React from 'react';
 
 import {Flex, Text} from '@gravity-ui/uikit';
 import NumberInput from 'ui/components/NumberFormatSettings/NumberInput/NumberInput';
-import {LINE_WIDTH_MAX_VALUE, LINE_WIDTH_MIN_VALUE} from 'ui/units/wizard/constants/shapes';
+import {
+    LINE_WIDTH_AUTO_VALUE,
+    LINE_WIDTH_MAX_VALUE,
+    LINE_WIDTH_MIN_VALUE,
+} from 'ui/units/wizard/constants/shapes';
 
 import {LineWidthSelect} from '../../../LineWidthSelect/LineWidthSelect';
 
 interface DialogLineWidthProps {
-    value: number;
-    onChange: (lineWidth: number) => void;
+    value: string;
+    onChange: (lineWidth: string) => void;
+    style?: React.CSSProperties;
 }
 
 // TODO: Fix in a separate branch
 const I18N_STUB = {
     'dialog-line-width-title': 'Толщина линии',
 };
 
-export const DialogLineWidth = React.memo(({value, onChange}: DialogLineWidthProps) => {
-    return (
-        <Flex direction="column" gap={2}>
-            <Flex direction="row" alignItems="center" justifyContent="space-between">
-                <Text variant="body-1">{I18N_STUB['dialog-line-width-title']}</Text>
-                <LineWidthSelect value={value} onChange={onChange} />
-            </Flex>
+export const DialogLineWidth = React.memo(({value, onChange, style}: DialogLineWidthProps) => {
+    const handleNumberInputChange = React.useCallback(
+        (nextValue: number) => {
+            return onChange(nextValue.toString());
+        },
+        [onChange],
+    );
+
+    const isAutoValue = value === LINE_WIDTH_AUTO_VALUE;
+
+    const numberInput = React.useMemo(() => {
+        if (isAutoValue) {
+            return null;
+        }
+
+        const valueNumber = Number.parseInt(value, 10);
+
+        if (Number.isNaN(valueNumber)) {
+            return null;
+        }
+
+        return (
             <Flex direction="row" alignItems="center" justifyContent="flex-end">
                 <NumberInput
-                    value={value}
+                    value={valueNumber}
                     min={LINE_WIDTH_MIN_VALUE}
                     max={LINE_WIDTH_MAX_VALUE}
-                    onChange={onChange}
+                    onChange={handleNumberInputChange}
                 />
             </Flex>
+        );
+    }, [handleNumberInputChange, value, isAutoValue]);
+
+    return (
+        <Flex direction="column" gap={2} style={style}>
+            <Flex direction="row" alignItems="center" justifyContent="space-between">
+                <Text variant="body-1">{I18N_STUB['dialog-line-width-title']}</Text>
+                <LineWidthSelect value={value} onChange={onChange} />
+            </Flex>
+            {numberInput}
         </Flex>
     );
 });

src/ui/units/wizard/components/Dialogs/DialogShapes/DialogShapes.scss

@@ -15,12 +15,17 @@
         justify-content: center;
     }
 
-    & .g-dialog-body {
+    &_other-shapes .g-dialog-body {
         display: flex;
         padding: 0;
         overflow-y: auto;
         height: calc(80vh - 153px);
         border-top: 1px solid var(--g-color-line-generic);
         border-bottom: 1px solid var(--g-color-line-generic);
     }
+
+    &_lines-shapes .g-dialog-body {
+        padding: 0;
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
 }