Add support for groups in mobile

package.json

@@ -61,7 +61,7 @@
     "@gravity-ui/app-layout": "^2.1.0",
     "@gravity-ui/browserslist-config": "^4.3.0",
     "@gravity-ui/chartkit": "^5.19.1",
-    "@gravity-ui/dashkit": "^8.22.1",
+    "@gravity-ui/dashkit": "^8.23.0",
     "@gravity-ui/date-utils": "^2.5.6",
     "@gravity-ui/expresskit": "^2.1.0",
     "@gravity-ui/gateway": "^3.1.1",

src/ui/components/DashKit/helpers.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {ConfigItem, DashKitProps, ItemState} from '@gravity-ui/dashkit';
+import type {ConfigItem, DashKitProps, ItemParams, ItemState, MenuItem} from '@gravity-ui/dashkit';
 import {DashKit} from '@gravity-ui/dashkit';
 import {MenuItems} from '@gravity-ui/dashkit/helpers';
 import {Copy, Pencil, TrashBin} from '@gravity-ui/icons';
@@ -22,16 +22,16 @@ const b = block('dashkit-plugin-menu');
 
 type TabData = {id: string; chartId: string; params: StringParams; state: ItemState};
 
-const removeEmptyParams = (params: StringParams) => {
+const removeEmptyParams = (params: ItemParams) => {
     return Object.entries(params).reduce((result, [key, value]) => {
         if (value !== null && value !== undefined) {
             result[key] = value;
         }
         return result;
-    }, {} as StringParams);
+    }, {} as ItemParams);
 };
 
-export function getEditLink(configItem: ConfigItem, params: StringParams, state: ItemState) {
+export function getEditLink(configItem: ConfigItem, params: ItemParams, state: ItemState) {
     const {type, data} = configItem;
 
     let entryId: string | undefined;
@@ -64,20 +64,20 @@ export function getEditLink(configItem: ConfigItem, params: StringParams, state:
     return `${endpoint}/${entryId}${queryPrams}`;
 }
 
-export function getDashKitMenu() {
+export function getDashKitMenu(): Array<MenuItem> {
     return [
         {
             id: 'edit',
             title: i18n('label_edit'),
             icon: <Icon data={Pencil} size={16} />,
-            handler: (configItem: ConfigItem, params: StringParams, state: ItemState) => {
+            handler: (configItem, params, state) => {
                 const link = getEditLink(configItem, params, state);
 
                 if (link) {
                     window.open(link, '_blank');
                 }
             },
-            visible: (configItem: ConfigItem) => {
+            visible: (configItem) => {
                 const {type, data} = configItem;
 
                 return (

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

@@ -80,7 +80,6 @@ import {
     getPastedWidgetData,
     getPreparedCopyItemOptions,
     memoizedGetLocalTabs,
-    sortByOrderIdOrLayoutComparator,
 } from '../../modules/helpers';
 import type {TabsHashStates} from '../../store/actions/dashTyped';
 import {
@@ -114,6 +113,7 @@ import {
 import {getPropertiesWithResizeHandles} from '../../utils/dashkitProps';
 import {scrollIntoView} from '../../utils/scrollUtils';
 import {DashError} from '../DashError/DashError';
+import {getGroupedItems} from '../Dialogs/Tabs/PopupWidgetsOrder/helpers';
 import {FixedHeaderContainer, FixedHeaderControls} from '../FixedHeader/FixedHeader';
 import TableOfContent from '../TableOfContent/TableOfContent';
 import {Tabs} from '../Tabs/Tabs';
@@ -181,12 +181,6 @@ type GetPreparedCopyItemOptions<T extends object = {}> = (
     itemToCopy: PreparedCopyItemOptions<T>,
 ) => PreparedCopyItemOptions<T>;
 
-const GROUPS_WEIGHT = {
-    [FIXED_GROUP_HEADER_ID]: 2,
-    [FIXED_GROUP_CONTAINER_ID]: 1,
-    [DEFAULT_GROUP]: 0,
-} as const;
-
 // Body is used as a core in different environments
 class Body extends React.PureComponent<BodyProps> {
     static getDerivedStateFromProps(props: BodyProps, state: DashBodyState) {
@@ -289,6 +283,10 @@ class Body extends React.PureComponent<BodyProps> {
         byId: {},
         columns: 0,
     };
+    _memoizedOrderedConfig?: {
+        key: DashKitProps['config'];
+        config: DashKitProps['config'];
+    };
 
     state: DashBodyState = {
         fixedHeaderCollapsed: {},
@@ -702,6 +700,11 @@ class Body extends React.PureComponent<BodyProps> {
         if (isEmpty && !hasFixedContainerElements && this.props.mode !== Mode.Edit) {
             return null;
         }
+
+        if (params.isMobile) {
+            return children;
+        }
+
         const {fixedHeaderCollapsed = false, isEmbeddedMode, isPublicMode} = params.context;
 
         return (
@@ -730,6 +733,11 @@ class Body extends React.PureComponent<BodyProps> {
         if (isEmpty && !hasFixedHeaderElements && this.props.mode !== Mode.Edit) {
             return null;
         }
+
+        if (params.isMobile) {
+            return children;
+        }
+
         const {fixedHeaderCollapsed = false, isEmbeddedMode, isPublicMode} = params.context;
 
         return (
@@ -871,41 +879,6 @@ class Body extends React.PureComponent<BodyProps> {
         return this._memoizedMenu;
     };
 
-    getMobileLayout(): DashKitProps['config'] | null {
-        const {tabData} = this.props;
-        const tabDataConfig = tabData as DashKitProps['config'] | null;
-
-        if (!tabDataConfig) {
-            return tabDataConfig;
-        }
-
-        const {byId, columns} = this.getMemoLayoutMap();
-        const getWeight = (item: DashTabItem): number => {
-            const parentId = getLayoutParentId(byId[item.id]);
-
-            return (GROUPS_WEIGHT as any)[parentId] || 0;
-        };
-
-        return {
-            ...tabDataConfig,
-            items: (tabDataConfig.items as DashTab['items'])
-                .sort((prev, next) => {
-                    const prevWeight = getWeight(prev);
-                    const nextWeight = getWeight(next);
-
-                    if (prevWeight === nextWeight) {
-                        return sortByOrderIdOrLayoutComparator(prev, next, byId, columns);
-                    }
-
-                    return nextWeight - prevWeight;
-                })
-                .map((item, index) => ({
-                    ...item,
-                    orderId: item.orderId || index,
-                })) as ConfigItem[],
-        };
-    }
-
     dataProviderContextGetter = () => {
         const {tabId, entryId} = this.props;
 
@@ -918,14 +891,43 @@ class Body extends React.PureComponent<BodyProps> {
             [DASH_INFO_HEADER]: new URLSearchParams(dashInfo).toString(),
         };
     };
+    private getConfig = () => {
+        const {tabData} = this.props;
+        const tabDataConfig = tabData;
+
+        if (!tabDataConfig || !DL.IS_MOBILE) {
+            return tabDataConfig;
+        }
+
+        const memoItems = this._memoizedOrderedConfig;
+
+        if (!memoItems || memoItems.key !== tabDataConfig) {
+            const sortedItems = getGroupedItems(tabDataConfig.items, tabDataConfig.layout).reduce(
+                (list, group) => {
+                    list.push(...group);
+                    return list;
+                },
+                [],
+            );
+
+            this._memoizedOrderedConfig = {
+                key: tabDataConfig as DashKitProps['config'],
+                config: {
+                    ...tabDataConfig,
+                    items: sortedItems as ConfigItem[],
+                },
+            };
+        }
+
+        return this._memoizedOrderedConfig?.config;
+    };
 
     private renderDashkit = () => {
         const {isGlobalDragging} = this.state;
         const {
             mode,
             settings,
             tabs,
-            tabData,
             handlerEditClick,
             isEditModeLoading,
             globalParams,
@@ -935,9 +937,7 @@ class Body extends React.PureComponent<BodyProps> {
 
         const context = this.getContext();
 
-        const tabDataConfig = DL.IS_MOBILE
-            ? this.getMobileLayout()
-            : (tabData as DashKitProps['config'] | null);
+        const tabDataConfig = this.getConfig();
 
         const isEmptyTab = !tabDataConfig?.items.length;
 

src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.scss

@@ -18,6 +18,14 @@
         overflow: auto;
     }
 
+    &__group-list {
+        margin-bottom: 32px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
     &__row {
         padding: 8px;
     }