Refactor widget controls menu

src/server/components/features/features-list/DashFloatControls.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.DashFloatControls,
+    state: {
+        development: false,
+        production: false,
+    },
+});

src/shared/types/feature.ts

@@ -4,6 +4,8 @@ export enum Feature {
     Ql = 'ql',
     HideOldRelations = 'hideOldRelations',
     AsideHeaderEnabled = 'AsideHeaderEnabled',
+    /** Enable redesign of dash controls */
+    DashFloatControls = 'DashFloatControls',
     FieldEditorDocSection = 'FieldEditorDocSection',
     UsePublicDistincts = 'UsePublicDistincts',
     EnablePublishEntry = 'EnablePublishEntry',

src/ui/components/Widgets/Chart/Chart.scss

@@ -80,6 +80,11 @@ $fullscreenZIndex: 999;
         flex-direction: row;
         align-items: center;
         cursor: pointer;
+
+        &_float {
+            top: 6px;
+            right: 10px;
+        }
     }
 
     &__body {
@@ -125,6 +130,11 @@ $fullscreenZIndex: 999;
         top: 0;
     }
 
+    & .chartkit-loader.chartkit-loader_widget .chartkit-loader__loader_compact {
+        right: 10px;
+        top: 7px;
+    }
+
     // for widgets-metrics indentation should be different
     #{$class}__body {
         padding: 0 var(--dl-dk-charts-padding) var(--dl-dk-charts-padding);
@@ -136,7 +146,7 @@ $fullscreenZIndex: 999;
             top: calc(-1 * var(--dl-dk-charts-tabs-height) + var(--dl-dk-header-offset));
         }
 
-        & .chartkit-loader__loader_compact {
+        & .chartkit-loader__loader_compact:not(.chartkit-loader_widget) {
             right: calc(-1 * var(--dl-dk-charts-padding));
             top: -44px;
         }
@@ -193,7 +203,7 @@ $fullscreenZIndex: 999;
 
         // block below: without tabs, maps and metrics
 
-        .chartkit-loader__loader_compact {
+        .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
             top: -2px;
         }
 
@@ -202,62 +212,64 @@ $fullscreenZIndex: 999;
         #{$class}__container {
             padding-top: var(--dl-dk-charts-padding);
 
-            .chartkit-loader__loader_compact {
+            .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
                 top: calc(-1 * var(--dl-dk-charts-padding));
             }
 
-            #{$class}__chart-header {
+            #{$class}__chart-header:not(#{$class}__chart-header_float) {
                 top: calc(-1 * var(--dl-dk-charts-padding) + var(--dl-dk-header-offset));
             }
         }
 
         #{$class}__container_table {
             padding-top: var(--dl-dk-table-padding);
 
-            #{$class}__chart-header {
+            #{$class}__chart-header:not(#{$class}__chart-header_float) {
                 top: calc(-1 * var(--dl-dk-table-padding) + var(--dl-dk-header-offset));
             }
         }
 
         #{$class}__container_metric2 {
             padding: calc(var(--dl-dk-metric-padding) / 2) var(--dl-dk-metric-padding);
 
-            #{$class}__chart-header {
+            #{$class}__chart-header:not(#{$class}__chart-header_float) {
                 top: calc(-1 * var(--dl-dk-metric-padding) + var(--dl-dk-header-offset));
             }
         }
 
         #{$class}__container_markup {
             padding: calc(var(--dl-dk-metric-padding) / 2) var(--dl-dk-metric-padding);
 
-            #{$class}__chart-header {
+            #{$class}__chart-header:not(#{$class}__chart-header_float) {
                 top: calc(-1 * var(--dl-dk-metric-padding) + var(--dl-dk-header-offset));
             }
         }
 
         #{$class}__container_ymap {
             padding: 0;
 
-            #{$class}__chart-header {
+            #{$class}__chart-header:not(#{$class}__chart-header_float) {
                 top: calc(-1 * var(--dl-dk-map-padding) + var(--dl-dk-header-offset));
             }
         }
     }
 
     // Temporarily redefine styles and use similar with production (until designers process the ellipsis in CHARTS-5432)
-    &__container &__chart-header {
+    &__container &__chart-header:not(#{$class}__chart-header_float) {
         top: -4px;
         right: 3px;
     }
-    & .chartkit-loader__loader_compact {
+    & .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
         top: -35px;
         right: 35px;
     }
-    &__container_table .chartkit-loader__loader_compact {
+    &__container_table
+        .chartkit-loader:not(.chartkit-loader_widget)
+        .chartkit-loader__loader_compact {
         top: -46px;
         right: 12px;
     }
-    &_no-controls .chartkit-loader__loader_compact {
+    &_no-controls .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
         right: 15px;
     }
 }

src/ui/components/Widgets/Chart/Chart.tsx

@@ -81,6 +81,8 @@ export const Chart = (props: ChartNoWidgetProps) => {
         onBeforeChartLoad,
     } = props;
 
+    //const showFloatControls = Utils.isEnabledFeature(Feature.DashFloatControls);
+
     const innerParamsRef = React.useRef<DataProps['params'] | null>(null);
     const prevInnerParams = usePrevious(innerParamsRef?.current);
 
@@ -286,6 +288,7 @@ export const Chart = (props: ChartNoWidgetProps) => {
                 paneSplitOrientation={paneSplitOrientation}
                 widgetDashState={widgetDashState}
                 rootNodeRef={rootNodeRef}
+                needRenderContentControls={true}
             />
         </div>
     );

src/ui/components/Widgets/Chart/ChartWidget.scss

@@ -24,14 +24,14 @@ $dashPublicContainerClassName: '.dash';
 
     // styles for widgets with tabs below
 
-    #{$dashPublicContainerClassName} &__container &__chart-header,
-    #{$dashContainerClassName} &__container &__chart-header {
+    #{$dashPublicContainerClassName} &__container &__chart-header:not(&__chart-header_float),
+    #{$dashContainerClassName} &__container &__chart-header:not(&__chart-header_float) {
         top: -40px;
         right: 8px;
     }
 
-    #{$dashPublicContainerClassName} &__container_table &__chart-header,
-    #{$dashContainerClassName} &__container_table &__chart-header {
+    #{$dashPublicContainerClassName} &__container_table &__chart-header:not(&__chart-header_float),
+    #{$dashContainerClassName} &__container_table &__chart-header:not(&__chart-header_float) {
         top: -46px;
         right: 8px;
     }
@@ -54,8 +54,11 @@ $dashPublicContainerClassName: '.dash';
 
     // styles for widgets without tabs below
 
-    #{$dashPublicContainerClassName} &_no-tabs &__container &__chart-header,
-    #{$dashContainerClassName} &_no-tabs &__container &__chart-header {
+    #{$dashPublicContainerClassName}
+        &_no-tabs
+        &__container
+        &__chart-header:not(&__chart-header_float),
+    #{$dashContainerClassName} &_no-tabs &__container &__chart-header:not(&__chart-header_float) {
         top: -4px;
     }
 
@@ -67,4 +70,36 @@ $dashPublicContainerClassName: '.dash';
     #{$dashContainerClassName} &_autoheight .datalens-chartkit-error {
         height: auto;
     }
+
+    /** styles for flat controls */
+    &__controls-corner-wrapper {
+        background-color: transparent;
+        border-radius: var(--g-border-radius-l);
+        margin-left: 8px;
+        padding: 2px;
+        display: flex;
+        column-gap: 2px;
+        opacity: 0.5;
+        transition: opacity 0.3s ease-out;
+
+        & .chartkit-insights__button::before,
+        & .dl-widget__filter-button::before,
+        & .chartkit-menu__switcher_flat {
+            opacity: 0;
+            transition: opacity 0.3s ease-out;
+        }
+    }
+
+    .widget-header_mobile &__controls-corner-wrapper,
+    &:hover &__controls-corner-wrapper {
+        opacity: 1;
+        background-color: var(--g-color-base-background);
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+
+        & .chartkit-insights__button::before,
+        & .dl-widget__filter-button::before,
+        & .chartkit-menu__switcher_flat {
+            opacity: 1;
+        }
+    }
 }

src/ui/components/Widgets/Chart/ChartWidget.tsx

@@ -14,7 +14,9 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import {useDispatch, useSelector} from 'react-redux';
 import type {StringParams} from 'shared';
+import {Feature} from 'shared/types/feature';
 import {setWidgetCurrentTab} from 'ui/units/dash/store/actions/dashTyped';
+import Utils from 'ui/utils/utils';
 
 import type {ChartKit} from '../../../libs/DatalensChartkit/ChartKit/ChartKit';
 import {getDataProviderData} from '../../../libs/DatalensChartkit/components/ChartKitBase/helpers';
@@ -26,6 +28,7 @@ import {getPreparedWrapSettings} from '../../DashKit/utils';
 
 import {Content} from './components/Content';
 import {WidgetFooter} from './components/WidgetFooter';
+import type {HeaderWithControlsProps} from './components/WidgetHeader';
 import {WidgetHeader} from './components/WidgetHeader';
 import {
     COMPONENT_CLASSNAME,
@@ -508,6 +511,42 @@ export const ChartWidget = (props: ChartWidgetProps) => {
 
     const disableControls = noControls || urlNoControls;
 
+    const showFloatControls = Utils.isEnabledFeature(Feature.DashFloatControls);
+
+    const commonHeaderContentProps = {
+        compactLoader,
+        loaderDelay,
+        menuType: 'dash',
+        menuChartkitConfig,
+        dataProvider,
+        error,
+        dataProps,
+        requestId,
+        loadedData,
+        widgetDataRef,
+        widgetRenderTimeRef,
+        yandexMapAPIWaiting,
+        enableActionParams,
+        isWidgetMenuDataChanged,
+        onChange: handleChange,
+        onFullscreenClick: handleToggleFullscreenMode,
+        showActionParamsFilter,
+        noControls: disableControls,
+        onFiltersClear: handleFiltersClear,
+    };
+
+    const widgetHeaderProps = {
+        isFullscreen,
+        editMode,
+        hideTabs,
+        tabsItems: adaptiveTabsItems,
+        currentTab,
+        onSelectTab: handleSelectTab,
+        widgetId,
+        hideDebugTool: true,
+        ...commonHeaderContentProps,
+    };
+
     return (
         <div
             ref={rootNodeRef}
@@ -528,59 +567,31 @@ export const ChartWidget = (props: ChartWidgetProps) => {
                     {label: 'chartId', value: chartId},
                 ]}
             />
-            <WidgetHeader
-                isFullscreen={isFullscreen}
-                onFullscreenClick={handleToggleFullscreenMode}
-                editMode={editMode}
-                hideTabs={hideTabs}
-                tabsItems={adaptiveTabsItems}
-                currentTab={currentTab}
-                onSelectTab={handleSelectTab}
-                widgetId={widgetId}
-                hideDebugTool={true}
-                showActionParamsFilter={showActionParamsFilter}
-                onFiltersClear={handleFiltersClear}
-                noControls={disableControls}
-            />
+            <WidgetHeader {...(widgetHeaderProps as HeaderWithControlsProps)} />
             <Content
                 initialParams={initialParams}
-                dataProps={dataProps}
-                dataProvider={dataProvider}
                 showLoader={showLoader}
-                onFullscreenClick={handleToggleFullscreenMode}
                 showOverlayWithControlsOnEdit={showOverlayWithControlsOnEdit}
-                compactLoader={compactLoader}
                 veil={veil}
-                loaderDelay={loaderDelay}
                 widgetBodyClassName={widgetBodyClassName}
                 hasHiddenClassMod={hasHiddenClassMod}
                 chartId={chartId}
-                noControls={disableControls}
                 transformLoadedData={transformLoadedData}
                 splitTooltip={splitTooltip || isFullscreen}
                 nonBodyScroll={nonBodyScroll}
-                requestId={requestId}
-                error={error}
                 onRender={handleRenderChart}
-                onChange={handleChange}
                 onRetry={handleRetry}
                 onError={handleError}
-                loadedData={loadedData}
                 forwardedRef={chartKitRef}
                 getControls={loadControls}
                 drillDownFilters={drillDownFilters}
                 drillDownLevel={drillDownLevel}
                 widgetType={widgetType}
-                menuType="dash"
-                menuChartkitConfig={menuChartkitConfig}
-                widgetDataRef={widgetDataRef}
-                widgetRenderTimeRef={widgetRenderTimeRef}
-                yandexMapAPIWaiting={yandexMapAPIWaiting}
-                isWidgetMenuDataChanged={isWidgetMenuDataChanged}
-                enableActionParams={enableActionParams}
                 widgetDashState={widgetDashState}
                 rootNodeRef={rootNodeRef}
                 backgroundColor={style?.backgroundColor}
+                needRenderContentControls={!showFloatControls}
+                {...commonHeaderContentProps}
             />
             {Boolean(description || loadedData?.publicAuthor) && (
                 <WidgetFooter