fix: restore editor refresh fields

Author: qradle-yndx

src/editor-v2/components/DynamicForm/FieldBase/FieldBase.scss

@@ -5,17 +5,16 @@ $block: '.#{$ns}field-base';
 
 #{$block} {
     $class: &;
-    padding: 16px 12px;
+    padding: 16px 12px 16px 0;
     border-bottom: 1px solid var(--g-color-line-generic);
 
     position: relative;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    gap: 8px;
 
     &:hover {
-        & > #{$class}__top > #{$class}__button {
+        & > #{$class}__top #{$class}__title > #{$class}__button {
             opacity: 1;
         }
     }
@@ -28,6 +27,7 @@ $block: '.#{$ns}field-base';
             width: 100%;
             flex-basis: initial;
         }
+
         & > #{$block}__children {
             width: 100%;
         }
@@ -37,12 +37,13 @@ $block: '.#{$ns}field-base';
         display: flex;
         align-items: center;
         gap: 4px;
-        flex: 0 0 64px;
-        word-break: break-all;
+        flex: 0 0 84px;
+        word-break: break-word;
     }
 
     &__children {
         flex: 2 1 auto;
+        margin-left: 12px;
     }
 
     &__foldable {
@@ -68,7 +69,9 @@ $block: '.#{$ns}field-base';
 
     &__title {
         @include text-body-2;
-        margin: 5px 0;
+        margin: 5px 16px 5px 0;
+        display: flex;
+        flex-direction: row;
 
         &_size {
             &_s {

src/editor-v2/components/DynamicForm/FieldBase/FieldBase.tsx

@@ -1,4 +1,5 @@
-import {ArrowToggle} from '@gravity-ui/uikit';
+import {ArrowToggle, Button, Icon} from '@gravity-ui/uikit';
+import {ArrowRotateLeft} from '@gravity-ui/icons';
 import _ from 'lodash';
 import * as React from 'react';
 
@@ -25,13 +26,29 @@ const FieldBase: React.FC<FieldBaseProps> = ({
     textSize = 's',
     children,
     expandable = false,
+    onRefresh,
 }) => {
     const [showChildren, setShowChildren] = React.useState(!expandable);
 
     const titleComponent = React.useMemo(() => {
         if (title) {
             const defaultTitle = (
-                <div className={b('title', {size: textSize})}>{_.capitalize(title)}</div>
+                <div className={b('title', {size: textSize})}>
+                    {onRefresh && (
+                        <Button
+                            className={b('button')}
+                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                                e.stopPropagation();
+                                onRefresh(undefined);
+                            }}
+                            view={'flat'}
+                            size={'xs'}
+                        >
+                            <Icon data={ArrowRotateLeft} size={14} />
+                        </Button>
+                    )}
+                    <span>{_.capitalize(title)}</span>
+                </div>
             );
 
             if (expandable) {
@@ -51,7 +68,7 @@ const FieldBase: React.FC<FieldBaseProps> = ({
         }
 
         return null;
-    }, [expandable, showChildren, textSize, title]);
+    }, [expandable, showChildren, textSize, title, onRefresh]);
 
     return (
         <div className={b({expandable}, className)}>