From 09e978140c7ff2b94a10b91b00326d7d2fe15ba1 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 18 Dec 2024 12:32:28 +0300 Subject: [PATCH 1/6] Add support for groups in mobile --- src/ui/components/DashKit/helpers.tsx | 14 +++++++------- src/ui/units/dash/containers/Body/Body.tsx | 14 +++++++++++--- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/ui/components/DashKit/helpers.tsx b/src/ui/components/DashKit/helpers.tsx index 4d28b8bf1c..1110eea33f 100644 --- a/src/ui/components/DashKit/helpers.tsx +++ b/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 { return [ { id: 'edit', title: i18n('label_edit'), icon: , - 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 ( diff --git a/src/ui/units/dash/containers/Body/Body.tsx b/src/ui/units/dash/containers/Body/Body.tsx index b51c2eef26..090eeed466 100644 --- a/src/ui/units/dash/containers/Body/Body.tsx +++ b/src/ui/units/dash/containers/Body/Body.tsx @@ -703,6 +703,11 @@ class Body extends React.PureComponent { if (isEmpty && !hasFixedContainerElements && this.props.mode !== Mode.Edit) { return null; } + + if (params.isMobile) { + return children; + } + const {fixedHeaderCollapsed = false, isEmbeddedMode, isPublicMode} = params.context; return ( @@ -731,6 +736,11 @@ class Body extends React.PureComponent { if (isEmpty && !hasFixedHeaderElements && this.props.mode !== Mode.Edit) { return null; } + + if (params.isMobile) { + return children; + } + const {fixedHeaderCollapsed = false, isEmbeddedMode, isPublicMode} = params.context; return ( @@ -936,9 +946,7 @@ class Body extends React.PureComponent { const context = this.getContext(); - const tabDataConfig = DL.IS_MOBILE - ? this.getMobileLayout() - : (tabData as DashKitProps['config'] | null); + const tabDataConfig = tabData as DashKitProps['config'] | null; const isEmptyTab = !tabDataConfig?.items.length; From 71bc84980c4ae6dbbd98fd3ed9426931b3ef4425 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 18 Dec 2024 15:37:41 +0300 Subject: [PATCH 2/6] Update @gravity-ui/dashkit --- package-lock.json | 12 ++++++------ package.json | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 429766d3d2..467e8397e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@gravity-ui/app-layout": "^2.1.0", "@gravity-ui/browserslist-config": "^4.3.0", "@gravity-ui/chartkit": "^5.19.0", - "@gravity-ui/dashkit": "^8.20.2", + "@gravity-ui/dashkit": "^8.22.1-beta.1", "@gravity-ui/date-utils": "^2.5.6", "@gravity-ui/expresskit": "^2.1.0", "@gravity-ui/gateway": "^3.1.1", @@ -5055,12 +5055,12 @@ } }, "node_modules/@gravity-ui/dashkit": { - "version": "8.20.2", - "resolved": "https://registry.npmjs.org/@gravity-ui/dashkit/-/dashkit-8.20.2.tgz", - "integrity": "sha512-LfmL4Qc9WApK1U5Q69LNIwyxZ1NJcA3Bfk2L6z2b0xF1o7IyUtHVugN/CDgz6LDRri7OGQBuam4RzoMOgPR8qg==", + "version": "8.22.1-beta.1", + "resolved": "https://registry.npmjs.org/@gravity-ui/dashkit/-/dashkit-8.22.1-beta.1.tgz", + "integrity": "sha512-ETG4tjrDels0RD9zRj511YuPmi9/PcklJTUCjwRPc5JiBeJpUeLkx70S21pShl6w+eN6jFBFse87U9Df1t3DVQ==", "dependencies": { "@bem-react/classname": "^1.6.0", - "@gravity-ui/icons": "^2.8.1", + "@gravity-ui/icons": "^2.11.0", "hashids": "^2.2.8", "immutability-helper": "^3.1.1", "prop-types": "^15.8.1", @@ -29940,4 +29940,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 86d6860db2..51732fa9c3 100644 --- a/package.json +++ b/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.0", - "@gravity-ui/dashkit": "^8.20.2", + "@gravity-ui/dashkit": "^8.22.1-beta.1", "@gravity-ui/date-utils": "^2.5.6", "@gravity-ui/expresskit": "^2.1.0", "@gravity-ui/gateway": "^3.1.1", From f06ecbf6e324a71b101dce3babf47119e65f4d52 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 18 Dec 2024 17:29:49 +0300 Subject: [PATCH 3/6] Up @gravity-ui/dashkit 8.22.0 -> 8.23.0 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 467e8397e0..559e17f7c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@gravity-ui/app-layout": "^2.1.0", "@gravity-ui/browserslist-config": "^4.3.0", "@gravity-ui/chartkit": "^5.19.0", - "@gravity-ui/dashkit": "^8.22.1-beta.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", @@ -5055,9 +5055,9 @@ } }, "node_modules/@gravity-ui/dashkit": { - "version": "8.22.1-beta.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/dashkit/-/dashkit-8.22.1-beta.1.tgz", - "integrity": "sha512-ETG4tjrDels0RD9zRj511YuPmi9/PcklJTUCjwRPc5JiBeJpUeLkx70S21pShl6w+eN6jFBFse87U9Df1t3DVQ==", + "version": "8.23.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/dashkit/-/dashkit-8.23.0.tgz", + "integrity": "sha512-ChnCAv84HDULby/mtcQKhRTbRlsFZq8T5YkDisolMjaVL5tZ5BcbTcaPyO8giSf1k0XqM7e+/sH3YK3zQKM4hA==", "dependencies": { "@bem-react/classname": "^1.6.0", "@gravity-ui/icons": "^2.11.0", diff --git a/package.json b/package.json index 51732fa9c3..c86e04814a 100644 --- a/package.json +++ b/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.0", - "@gravity-ui/dashkit": "^8.22.1-beta.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", From 31ea7f786b1b3dc290e9dcbe7f0a650b8d699846 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Thu, 19 Dec 2024 13:04:21 +0300 Subject: [PATCH 4/6] Dash body cleanup --- src/ui/units/dash/containers/Body/Body.tsx | 42 ---------------------- 1 file changed, 42 deletions(-) diff --git a/src/ui/units/dash/containers/Body/Body.tsx b/src/ui/units/dash/containers/Body/Body.tsx index 090eeed466..50fd36bbcf 100644 --- a/src/ui/units/dash/containers/Body/Body.tsx +++ b/src/ui/units/dash/containers/Body/Body.tsx @@ -81,7 +81,6 @@ import { getPastedWidgetData, getPreparedCopyItemOptions, memoizedGetLocalTabs, - sortByOrderIdOrLayoutComparator, } from '../../modules/helpers'; import type {TabsHashStates} from '../../store/actions/dashTyped'; import { @@ -182,12 +181,6 @@ type GetPreparedCopyItemOptions = ( itemToCopy: PreparedCopyItemOptions, ) => PreparedCopyItemOptions; -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 { static getDerivedStateFromProps(props: BodyProps, state: DashBodyState) { @@ -882,41 +875,6 @@ class Body extends React.PureComponent { 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; From a7201f32d701c3635bec9934d1480929aa3aff53 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Thu, 19 Dec 2024 15:40:40 +0300 Subject: [PATCH 5/6] Add groups sorting for mobile layout --- .../PopupWidgetsOrder/PopupWidgetsOrder.scss | 8 ++ .../PopupWidgetsOrder/PopupWidgetsOrder.tsx | 109 +++++++++++++----- .../dash/containers/Dialogs/Tabs/TabItem.tsx | 1 - .../dash/containers/Dialogs/Tabs/Tabs.tsx | 5 +- 4 files changed, 91 insertions(+), 32 deletions(-) diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.scss b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.scss index 1b990f6eb5..f9b89a2c89 100644 --- a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.scss +++ b/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; } diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx index 986f31882c..6f3a08b8c5 100644 --- a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx +++ b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx @@ -1,12 +1,14 @@ import React from 'react'; +import {DEFAULT_GROUP} from '@gravity-ui/dashkit/helpers'; import type {PopupProps} from '@gravity-ui/uikit'; import {Button, Dialog, List, Popup} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {I18n} from 'i18n'; -import {cloneDeep} from 'lodash'; +import cloneDeep from 'lodash/cloneDeep'; import type {DashTabItem, DashTabLayout} from 'shared'; import {DialogTabsQA, EntryDialogQA} from 'shared'; +import {FIXED_GROUP_CONTAINER_ID, FIXED_GROUP_HEADER_ID} from 'ui/components/DashKit/constants'; import {registry} from 'ui/registry'; import {getLayoutMap, sortByLayoutComparator} from '../../../../modules/helpers'; @@ -36,6 +38,8 @@ const LIST_PREFIX_TEXTS = { image: i18n('label_image'), }; +const ROW_HEIGHT = 34; + const WidgetRow = (item: DashTabItem) => { const typeLabel = LIST_PREFIX_TEXTS[item.type]; const text = getWidgetRowText(item); @@ -47,33 +51,50 @@ const WidgetRow = (item: DashTabItem) => { ); }; +const getGroupedItems = (items: Array, layout: Array) => { + const preparedItems = getPreparedItems(cloneDeep(items), layout); + + const parentByItem = layout.reduce>((memo, item) => { + const parent = item.parent ?? DEFAULT_GROUP; + + memo[item.i] = parent; + + return memo; + }, {}); + + return [FIXED_GROUP_HEADER_ID, FIXED_GROUP_CONTAINER_ID, DEFAULT_GROUP].map((group) => { + return preparedItems.filter((item) => parentByItem[item.id] === group); + }); +}; + export const PopupWidgetsOrder = (props: PopupWidgetsOrderProps) => { const {anchorRef, onClose, onApply, items, layout, tabId} = props; - const [preparedItems, setPreparedItems] = React.useState>([]); - const isApplyDisabled = preparedItems.length <= 1; + const [groupedItems, setGroupedItems] = React.useState>>([]); + const isApplyDisabled = items.length <= 1; React.useEffect(() => { - if (items?.length) { - setPreparedItems(getPreparedItems(cloneDeep(items), layout)); - } - }, [items]); + setGroupedItems(getGroupedItems(items, layout)); + }, [items, layout]); const handleOnSortEnd = React.useCallback( - ({oldIndex, newIndex}: {oldIndex: number; newIndex: number}) => { + (groupIndex, {oldIndex, newIndex}: {oldIndex: number; newIndex: number}) => { if (oldIndex === newIndex) { return; } + const groupItems = groupedItems[groupIndex]; const newItems = getUpdatedItems({ - items: preparedItems, - dragItem: preparedItems[oldIndex], + items: groupItems, + dragItem: groupItems[oldIndex], oldIndex, newIndex, }); + const clone = [...groupedItems]; + clone[groupIndex] = newItems; - setPreparedItems(newItems); + setGroupedItems(clone); }, - [preparedItems], + [groupedItems], ); const handleResetToDefaultClick = React.useCallback(() => { @@ -91,11 +112,27 @@ export const PopupWidgetsOrder = (props: PopupWidgetsOrderProps) => { }; }); - setPreparedItems(newItems); - }, [preparedItems]); + setGroupedItems(getGroupedItems(newItems, layout)); + }, [items, layout]); const handleApplyClick = () => { - onApply({tabId, items: preparedItems}); + const itemsLayoutOrder = layout.reduce>((memo, item, index) => { + memo[item.i] = index; + + return memo; + }, {}); + + const sortedItems = groupedItems + .reduce((memo, group) => { + memo.push(...group); + return memo; + }, []) + .sort((a, b) => itemsLayoutOrder[a.id] - itemsLayoutOrder[b.id]); + + onApply({ + tabId, + items: sortedItems, + }); }; const {getCaptionText} = registry.dash.functions.getAll(); @@ -118,21 +155,33 @@ export const PopupWidgetsOrder = (props: PopupWidgetsOrderProps) => { >
- {preparedItems?.length ? ( - - ) : ( -
{i18n('label_no-items')}
- )} +
+ {groupedItems.map((preparedItems, index) => { + if (preparedItems.length) { + return ( + 1} + items={preparedItems} + className={b('group-list')} + itemClassName={b('row')} + // Fix in @gravity-ui 7 + itemsHeight={preparedItems.length * ROW_HEIGHT} + onSortEnd={handleOnSortEnd.bind(this, index)} + renderItem={WidgetRow} + qa={DialogTabsQA.PopupWidgetOrderList} + /> + ); + } + + return null; + })} + {groupedItems.every((list) => list.length === 0) && ( +
{i18n('label_no-items')}
+ )} +
; type Props = OwnProps & DispatchProps; - class TabItem extends React.PureComponent { state = { editMode: false, diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/Tabs.tsx b/src/ui/units/dash/containers/Dialogs/Tabs/Tabs.tsx index 70eb490231..1b04f93850 100644 --- a/src/ui/units/dash/containers/Dialogs/Tabs/Tabs.tsx +++ b/src/ui/units/dash/containers/Dialogs/Tabs/Tabs.tsx @@ -41,6 +41,7 @@ type State = { expandedItemIndex?: number; }; +const ROW_HEIGHT = 40; class Tabs extends React.PureComponent { static getDerivedStateFromProps(nextProps: Props, prevState: State) { if (nextProps.visible === prevState.prevVisible) { @@ -80,6 +81,9 @@ class Tabs extends React.PureComponent { itemClassName={b('sortable-item', { highlight: tabs.length > 1, })} + // Fix in @gravity-ui 7 + itemsHeight={ROW_HEIGHT * tabs.length} + itemHeight={ROW_HEIGHT} activeItemIndex={expandedItemIndex} onSortEnd={({oldIndex, newIndex}) => this.moveItem(oldIndex, newIndex)} renderItem={(tab, isActive) => ( @@ -99,7 +103,6 @@ class Tabs extends React.PureComponent { onChangeItemOrder={this.handleChangeOrderItem} /> )} - itemHeight={40} />
Date: Mon, 23 Dec 2024 18:02:31 +0300 Subject: [PATCH 6/6] Fix mobile layout widgets order --- src/ui/units/dash/containers/Body/Body.tsx | 38 ++++++++++++++++++- .../PopupWidgetsOrder/PopupWidgetsOrder.tsx | 21 +--------- .../Dialogs/Tabs/PopupWidgetsOrder/helpers.ts | 18 +++++++++ src/ui/units/dash/modules/helpers.ts | 7 +--- 4 files changed, 56 insertions(+), 28 deletions(-) diff --git a/src/ui/units/dash/containers/Body/Body.tsx b/src/ui/units/dash/containers/Body/Body.tsx index 50fd36bbcf..0c479ceffe 100644 --- a/src/ui/units/dash/containers/Body/Body.tsx +++ b/src/ui/units/dash/containers/Body/Body.tsx @@ -114,6 +114,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'; @@ -283,6 +284,10 @@ class Body extends React.PureComponent { byId: {}, columns: 0, }; + _memoizedOrderedConfig?: { + key: DashKitProps['config']['items']; + config: DashKitProps['config']; + }; state: DashBodyState = { fixedHeaderCollapsed: {}, @@ -887,6 +892,36 @@ class Body extends React.PureComponent { [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.items) { + const sortedItems = getGroupedItems(tabDataConfig.items, tabDataConfig.layout).reduce( + (list, group) => { + list.push(...group); + return list; + }, + [], + ); + + this._memoizedOrderedConfig = { + key: tabDataConfig.items as ConfigItem[], + config: { + ...tabDataConfig, + items: sortedItems as ConfigItem[], + }, + }; + } + + return this._memoizedOrderedConfig?.config; + }; private renderDashkit = () => { const {isGlobalDragging} = this.state; @@ -894,7 +929,6 @@ class Body extends React.PureComponent { mode, settings, tabs, - tabData, handlerEditClick, isEditModeLoading, globalParams, @@ -904,7 +938,7 @@ class Body extends React.PureComponent { const context = this.getContext(); - const tabDataConfig = tabData as DashKitProps['config'] | null; + const tabDataConfig = this.getConfig(); const isEmptyTab = !tabDataConfig?.items.length; diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx index 6f3a08b8c5..d0f6bb99d1 100644 --- a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx +++ b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx @@ -1,19 +1,16 @@ import React from 'react'; -import {DEFAULT_GROUP} from '@gravity-ui/dashkit/helpers'; import type {PopupProps} from '@gravity-ui/uikit'; import {Button, Dialog, List, Popup} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {I18n} from 'i18n'; -import cloneDeep from 'lodash/cloneDeep'; import type {DashTabItem, DashTabLayout} from 'shared'; import {DialogTabsQA, EntryDialogQA} from 'shared'; -import {FIXED_GROUP_CONTAINER_ID, FIXED_GROUP_HEADER_ID} from 'ui/components/DashKit/constants'; import {registry} from 'ui/registry'; import {getLayoutMap, sortByLayoutComparator} from '../../../../modules/helpers'; -import {getPreparedItems, getUpdatedItems, getWidgetRowText} from './helpers'; +import {getGroupedItems, getUpdatedItems, getWidgetRowText} from './helpers'; import './PopupWidgetsOrder.scss'; @@ -51,22 +48,6 @@ const WidgetRow = (item: DashTabItem) => { ); }; -const getGroupedItems = (items: Array, layout: Array) => { - const preparedItems = getPreparedItems(cloneDeep(items), layout); - - const parentByItem = layout.reduce>((memo, item) => { - const parent = item.parent ?? DEFAULT_GROUP; - - memo[item.i] = parent; - - return memo; - }, {}); - - return [FIXED_GROUP_HEADER_ID, FIXED_GROUP_CONTAINER_ID, DEFAULT_GROUP].map((group) => { - return preparedItems.filter((item) => parentByItem[item.id] === group); - }); -}; - export const PopupWidgetsOrder = (props: PopupWidgetsOrderProps) => { const {anchorRef, onClose, onApply, items, layout, tabId} = props; const [groupedItems, setGroupedItems] = React.useState>>([]); diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers.ts b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers.ts index 38aba2edcf..bcc0657b1b 100644 --- a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers.ts +++ b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers.ts @@ -1,3 +1,4 @@ +import {DEFAULT_GROUP} from '@gravity-ui/dashkit/helpers'; import {i18n} from 'i18n'; import update from 'immutability-helper'; import {isNumber} from 'lodash'; @@ -10,6 +11,7 @@ import type { DashTabLayout, } from 'shared'; import {DashTabItemType} from 'shared'; +import {FIXED_GROUP_CONTAINER_ID, FIXED_GROUP_HEADER_ID} from 'ui/components/DashKit/constants'; import {getTextOverflowedStr} from '../../../../../../utils/stringUtils'; import {getLayoutMap, sortByOrderIdOrLayoutComparator} from '../../../../modules/helpers'; @@ -95,6 +97,22 @@ export const getPreparedItems = (items: Array, layout: Array, layout: Array) => { + const preparedItems = getPreparedItems(items, layout); + + const parentByItem = layout.reduce>((memo, item) => { + const parent = item.parent ?? DEFAULT_GROUP; + + memo[item.i] = parent; + + return memo; + }, {}); + + return [FIXED_GROUP_HEADER_ID, FIXED_GROUP_CONTAINER_ID, DEFAULT_GROUP].map((group) => { + return preparedItems.filter((item) => parentByItem[item.id] === group); + }); +}; + export const getUpdatedItems = ({ items, dragItem, diff --git a/src/ui/units/dash/modules/helpers.ts b/src/ui/units/dash/modules/helpers.ts index ff44ce237b..d62ec5c808 100644 --- a/src/ui/units/dash/modules/helpers.ts +++ b/src/ui/units/dash/modules/helpers.ts @@ -274,12 +274,7 @@ export const sortByOrderIdOrLayoutComparator = ( return sortByLayoutComparator(prev, next, layout, columns); } - if (prevOrderId > nextOrderId) { - return 1; - } else if (prevOrderId < nextOrderId) { - return -1; - } - return 0; + return prevOrderId - nextOrderId; }; export const getLayoutParentId = (layout: DashTabLayout) => {