Add dash Body component to registry (#3075)

Co-authored-by: Yury Kornilov <kornilovyv@yandex-team.ru>

Author: ykornilov

src/ui/registry/units/dash/components-map.tsx

@@ -1,3 +1,5 @@
+import type {Props as DashBodyContentProps} from 'ui/units/dash/containers/Body/components/Content/Content';
+
 import type {DialogTextWidgetProps} from '../../../components/DialogTextWidget/DialogTextWidget';
 import {makeDefaultEmpty} from '../../components/DefaultEmpty';
 
@@ -8,6 +10,7 @@ export const dashComponentsMap = {
     DashSelectState: makeDefaultEmpty(),
     DashSelectStateDialog: makeDefaultEmpty(),
     DialogTextWidget: makeDefaultEmpty<DialogTextWidgetProps>(),
+    DashBodyContent: makeDefaultEmpty<DashBodyContentProps>(),
     DashBodyAdditionalControls: makeDefaultEmpty(),
     DialogDashOtherSettingsPrepend: makeDefaultEmpty<DialogDashOtherSettingsPrependProps>(),
     DashActionPanelAdditionalButtons: makeDefaultEmpty<DashActionPanelAdditionalButtonsProps>(),

src/ui/registry/units/dash/register.tsx

@@ -3,13 +3,15 @@ import {EXAMPLE_FUNCTION} from 'ui/registry/units/common/constants/functions';
 import {getMinAutoupdateInterval} from 'ui/units/dash/containers/Dialogs/Settings/utils';
 
 import DialogTextWidget from '../../../components/DialogTextWidget/DialogTextWidget';
+import {LazyContent} from '../../../units/dash/containers/Body/components/Content/LazyContent';
 import {getCaptionText} from '../../../units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers';
 import {getExtendedItemData} from '../../../units/dash/store/actions/helpers';
 import {getDashEntryUrl, getNewDashUrl} from '../../../units/dash/utils/url';
 import {registry} from '../../index';
 
 export const registerDashPlugins = () => {
     registry.dash.components.registerMany({
+        DashBodyContent: LazyContent,
         DialogTextWidget,
     });
 

src/ui/units/dash/containers/Body/Body.tsx

@@ -11,11 +11,7 @@ import type {
     PreparedCopyItemOptions,
     ReactGridLayoutProps,
 } from '@gravity-ui/dashkit';
-import {
-    DashKitDnDWrapper,
-    ActionPanel as DashkitActionPanel,
-    DashKit as GravityDashkit,
-} from '@gravity-ui/dashkit';
+import {DashKit as GravityDashkit} from '@gravity-ui/dashkit';
 import {DEFAULT_GROUP, MenuItems} from '@gravity-ui/dashkit/helpers';
 import {
     ChevronsDown,
@@ -46,15 +42,11 @@ import type {DashTab, DashTabItem, DashTabLayout} from 'shared';
 import {
     ControlQA,
     DASH_INFO_HEADER,
-    DashBodyQa,
-    DashEntryQa,
     DashKitOverlayMenuQa,
     DashTabItemType,
-    EntryScope,
     FOCUSED_WIDGET_PARAM_NAME,
     Feature,
     FixedHeaderQa,
-    LOADED_DASH_CLASS,
     SCROLL_TITLE_DEBOUNCE_TIME,
     UPDATE_STATE_DEBOUNCE_TIME,
 } from 'shared';
@@ -68,18 +60,13 @@ import {WidgetContextProvider} from 'ui/components/DashKit/context/WidgetContext
 import {getDashKitMenu} from 'ui/components/DashKit/helpers';
 import {registry} from 'ui/registry';
 import {showToast} from 'ui/store/actions/toaster';
-import {selectAsideHeaderIsCompact} from 'ui/store/selectors/asideHeader';
-import {selectUserSettings} from 'ui/store/selectors/user';
 import {isEmbeddedMode} from 'ui/utils/embedded';
 import {isEnabledFeature} from 'ui/utils/isEnabledFeature';
 
-import {getIsAsideHeaderEnabled} from '../../../../components/AsideHeaderAdapter';
 import {getConfiguredDashKit} from '../../../../components/DashKit/DashKit';
 import {DL} from '../../../../constants';
-import Utils from '../../../../utils';
-import {TYPES_TO_DIALOGS_MAP, getActionPanelItems} from '../../../../utils/getActionPanelItems';
+import {TYPES_TO_DIALOGS_MAP} from '../../../../utils/getActionPanelItems';
 import {EmptyState} from '../../components/EmptyState/EmptyState';
-import Loader from '../../components/Loader/Loader';
 import {Mode} from '../../modules/constants';
 import type {CopiedConfigContext, CopiedConfigData} from '../../modules/helpers';
 import {
@@ -88,7 +75,6 @@ import {
     getLayoutParentId,
     getPastedWidgetData,
     getPreparedCopyItemOptions,
-    memoizedGetLocalTabs,
 } from '../../modules/helpers';
 import type {TabsHashStates} from '../../store/actions/dashTyped';
 import {
@@ -108,28 +94,24 @@ import {
     selectCurrentTab,
     selectCurrentTabId,
     selectDashDescription,
-    selectDashError,
     selectDashShowOpenedDescription,
     selectDashWorkbookId,
     selectEntryId,
     selectLastModifiedItemId,
     selectSettings,
-    selectShowTableOfContent,
     selectSkipReload,
     selectTabHashState,
     selectTabs,
 } from '../../store/selectors/dashTypedSelectors';
 import {getCustomizedProperties} from '../../utils/dashkitProps';
 import {scrollIntoView} from '../../utils/scrollUtils';
-import {DashError} from '../DashError/DashError';
 import {
     FixedHeaderContainer,
     FixedHeaderControls,
     FixedHeaderWrapper,
 } from '../FixedHeader/FixedHeader';
-import TableOfContent from '../TableOfContent/TableOfContent';
-import {Tabs} from '../Tabs/Tabs';
 
+import Content from './components/Content/Content';
 import {
     FixedContainerWrapperWithContext,
     FixedControlsWrapperWithContext,
@@ -426,7 +408,24 @@ class Body extends React.PureComponent<BodyProps, DashBodyState> {
 
         return (
             <div className={b()} ref={this._dashBodyRef}>
-                {this.renderBody()}
+                <Content
+                    copiedData={this.state.hasCopyInBuffer}
+                    dashEntryKey={this.props.entry?.key}
+                    disableHashNavigation={this.props.disableHashNavigation}
+                    hideErrorDetails={this.props.hideErrorDetails}
+                    isCondensed={this.isCondensed()}
+                    loaded={this.state.loaded}
+                    mode={this.props.mode}
+                    showEditActionPanel={this.isEditMode()}
+                    renderDashkit={this.renderDashkit}
+                    onDragEnd={this.handleDragEnd}
+                    onDragStart={this.handleDragStart}
+                    onItemClick={this.handleTocItemClick}
+                    onRetry={this.props.onRetry}
+                    {...(this.props.onlyView
+                        ? {onlyView: this.props.onlyView}
+                        : {onlyView: this.props.onlyView, onPasteItem: this.props.onPasteItem})}
+                />
                 <PaletteEditor />
                 <EntryDialogues ref={this.entryDialoguesRef} />
                 <DashBodyAdditionalControls />
@@ -1304,124 +1303,22 @@ class Body extends React.PureComponent<BodyProps, DashBodyState> {
             });
         }
     };
-
-    private renderBody() {
-        const {
-            mode,
-            settings,
-            tabs,
-            showTableOfContent,
-            isSidebarOpened,
-            hideErrorDetails,
-            onRetry,
-            error,
-            disableHashNavigation,
-        } = this.props;
-
-        const {loaded, hasCopyInBuffer} = this.state;
-
-        switch (mode) {
-            case Mode.Loading:
-            case Mode.Updating:
-                return <Loader size="l" />;
-            case Mode.Error:
-                return <DashError error={error} hideDetails={hideErrorDetails} onRetry={onRetry} />;
-        }
-
-        const localTabs = memoizedGetLocalTabs(tabs);
-
-        const hasTableOfContentForTab = !(localTabs.length === 1 && !localTabs[0].items.length);
-
-        const showEditActionPanel = this.isEditMode();
-
-        const loadedMixin = loaded ? LOADED_DASH_CLASS : undefined;
-
-        const hideDashTitle =
-            settings.hideDashTitle || (DL.IS_MOBILE && !isMobileFixedHeaderEnabled);
-
-        const content = (
-            <div
-                data-qa={DashBodyQa.ContentWrapper}
-                className={b('content-wrapper', {mobile: DL.IS_MOBILE, mode}, loadedMixin)}
-            >
-                <div
-                    className={b('content-container', {
-                        mobile: DL.IS_MOBILE,
-                        'no-title':
-                            settings.hideDashTitle && (settings.hideTabs || tabs.length === 1),
-                        'no-title-with-tabs':
-                            settings.hideDashTitle && !settings.hideTabs && tabs.length > 1,
-                    })}
-                >
-                    <TableOfContent
-                        disableHashNavigation={disableHashNavigation}
-                        onItemClick={this.handleTocItemClick}
-                    />
-                    <div
-                        className={b('content', {
-                            condensed: this.isCondensed(),
-                            'with-table-of-content': showTableOfContent && hasTableOfContentForTab,
-                            mobile: DL.IS_MOBILE,
-                            aside: getIsAsideHeaderEnabled(),
-                            'with-edit-panel': showEditActionPanel,
-                            'with-footer': isEnabledFeature(Feature.EnableFooter),
-                        })}
-                    >
-                        {!hideDashTitle && this.props.entry?.key && (
-                            <div className={b('entry-name')} data-qa={DashEntryQa.EntryName}>
-                                {Utils.getEntryNameFromKey(this.props.entry?.key)}
-                            </div>
-                        )}
-                        {!settings.hideTabs && <Tabs className={b('tabs')} />}
-                        {this.renderDashkit()}
-                        {!this.props.onlyView && (
-                            <DashkitActionPanel
-                                toggleAnimation={true}
-                                disable={!showEditActionPanel}
-                                items={getActionPanelItems({
-                                    copiedData: hasCopyInBuffer,
-                                    onPasteItem: this.props.onPasteItem,
-                                    openDialog: this.props.openDialog,
-                                    filterItem: (item) => item.id === DashTabItemType.Image,
-                                    userSettings: this.props.userSettings,
-                                    scope: EntryScope.Dash,
-                                })}
-                                className={b('edit-panel', {
-                                    'aside-opened': isSidebarOpened,
-                                })}
-                            />
-                        )}
-                    </div>
-                </div>
-            </div>
-        );
-
-        return (
-            <DashKitDnDWrapper onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd}>
-                {content}
-            </DashKitDnDWrapper>
-        );
-    }
 }
 
 const mapStateToProps = (state: DatalensGlobalState) => ({
     entryId: selectEntryId(state),
     lastModifiedItem: selectLastModifiedItemId(state),
     entry: state.dash.entry,
     mode: state.dash.mode,
-    showTableOfContent: selectShowTableOfContent(state),
     hashStates: selectTabHashState(state),
     settings: selectSettings(state),
     tabData: selectCurrentTab(state),
     dashKitRef: state.dash.dashKitRef,
     canEdit: canEdit(state),
     tabs: selectTabs(state),
     tabId: selectCurrentTabId(state),
-    isSidebarOpened: !selectAsideHeaderIsCompact(state),
     workbookId: selectDashWorkbookId(state),
-    error: selectDashError(state),
     skipReload: selectSkipReload(state),
-    userSettings: selectUserSettings(state),
     dashDescription: selectDashDescription(state),
     showOpenedDescription: selectDashShowOpenedDescription(state),
     hasTableOfContent: hasTableOfContent(state),