feat(AsideHeadser): Sort elements in AsideHeader

.storybook/preview.tsx

@@ -13,13 +13,11 @@ uiKitConfigure({
 
 const withContextProvider: Decorator = (Story, context) => {
     return (
-        <React.StrictMode>
-            <ThemeProvider theme={context.globals.theme}>
-                <MobileProvider>
-                    <Story {...context} />
-                </MobileProvider>
-            </ThemeProvider>
-        </React.StrictMode>
+        <ThemeProvider theme={context.globals.theme}>
+            <MobileProvider>
+                <Story {...context} />
+            </MobileProvider>
+        </ThemeProvider>
     );
 };
 

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.scss

@@ -16,4 +16,8 @@
     &__icon {
         color: var(--g-color-text-misc);
     }
+
+    &_edit-mode {
+        padding: 0 0 0 var(--g-spacing-4);
+    }
 }

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx

@@ -13,11 +13,14 @@ const b = block('all-pages-list-item');
 interface AllPagesListItemProps {
     item: MenuItem;
     editMode?: boolean;
+    enableSorting?: boolean;
     onToggle: () => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
 }
 
 export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
-    const {item, editMode, onToggle} = props;
+    const {item, editMode, onToggle, enableSorting, onDragStart, onDragEnd} = props;
     const onPinButtonClick = useCallback(
         (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             e.stopPropagation();
@@ -33,8 +36,32 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
             e.preventDefault();
         }
     };
+
+    const onItemDrugStart = (e: MouseEvent<HTMLDivElement>) => {
+        if (editMode && onDragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDragStart();
+        }
+    };
+
+    const onItemDrugEnd = (e: MouseEvent<HTMLDivElement>) => {
+        if (editMode && onDragEnd) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDragEnd();
+        }
+    };
+
     return (
-        <div className={b()} onClick={onItemClick}>
+        <div
+            key={item.id}
+            className={b({'edit-mode': editMode && enableSorting})}
+            onClick={onItemClick}
+            draggable={editMode}
+            onMouseDown={onItemDrugStart}
+            onMouseUp={onItemDrugEnd}
+        >
             {item.icon ? (
                 <Icon className={b('icon')} data={item.icon} size={item.iconSize} />
             ) : null}

src/components/AllPagesPanel/AllPagesPanel.scss

@@ -20,4 +20,15 @@
     &__discoverable-feature-wrapper {
         display: flex;
     }
+
+    &__item_editMode {
+        padding: 0 var(--g-spacing-6);
+    }
+
+    &__drag-placeholder {
+        padding-left: 88px;
+        padding-right: 68px;
+        text-wrap: nowrap;
+        visibility: hidden;
+    }
 }

src/components/AllPagesPanel/AllPagesPanel.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Gear} from '@gravity-ui/icons';
 import {Button, Flex, Icon, List, ListItemData, Text} from '@gravity-ui/uikit';
@@ -30,6 +30,9 @@
     menuItemsRef.current = menuItems;
 
     const [isEditMode, setIsEditMode] = useState(false);
+
+    const [dragingItemTitle, setDragingItemTitle] = useState<ReactNode | null>(null);
+
     const toggleEditMode = useCallback(() => {
         setIsEditMode((prev) => !prev);
     }, []);
@@ -72,15 +75,28 @@
         [onMenuItemsChanged, editMenuProps],
     );
 
+    const onDragEnd = useCallback(() => {
+        setDragingItemTitle(null);
+    }, [onMenuItemsChanged]);
+
     const itemRender = useCallback(
-        (item: ListItemData<MenuItem>, _isActive: boolean, _itemIndex: number) => (
-            <AllPagesListItem
-                item={item}
-                editMode={isEditMode}
-                onToggle={() => togglePageVisibility(item)}
-            />
-        ),
-        [isEditMode, togglePageVisibility],
+        (item: ListItemData<MenuItem>, _isActive: boolean, _itemIndex: number) => {
+            const onDragStart = () => {
+                setDragingItemTitle(item.title);
+            };
+
+            return (
+                <AllPagesListItem
+                    item={item}
+                    onDragStart={onDragStart}
+                    onDragEnd={onDragEnd}
+                    editMode={isEditMode}
+                    onToggle={() => togglePageVisibility(item)}
+                    enableSorting={editMenuProps?.enableSorting}
+                />
+            );
+        },
+        [isEditMode, togglePageVisibility, onMenuItemsChanged],
     );
 
     const onResetToDefaultClick = useCallback(() => {
@@ -96,6 +112,28 @@
             })),
         );
     }, [onMenuItemsChanged, editMenuProps]);
+
+    const changeItemsOrder = useCallback(
+        ({oldIndex, newIndex}: {oldIndex: number; newIndex: number}) => {
+            const newItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
+
+            const element = newItems.splice(oldIndex, 1)[0];
+            newItems.splice(newIndex, 0, element);
+
+            onMenuItemsChanged?.(newItems);
+
+            setDragingItemTitle(null);
+            editMenuProps?.onChangeItemsOrder?.(element, oldIndex, newIndex);
+        },
+        [onMenuItemsChanged],
+    );
+
+    const sortableItems = useMemo(() => {
+        return menuItemsRef.current.filter(
+            (item) => item.id !== ALL_PAGES_ID && !item.afterMoreButton,
+        );
+    }, [menuItemsRef.current]);
+
     return (
         <Flex className={b(null, className)} gap="5" direction="column">
             <Flex gap="4" alignItems="center" justifyContent="space-between">
@@ -107,22 +145,42 @@
                 </Button>
             </Flex>
             <Flex className={b('content')} gap="5" direction="column">
-                {Object.keys(groupedItems).map((category) => {
-                    return (
-                        <Flex key={category} direction="column" gap="3">
-                            <Text className={b('category')} variant="body-1" color="secondary">
-                                {category}
-                            </Text>
-                            <List
-                                virtualized={false}
-                                filterable={false}
-                                items={groupedItems[category]}
-                                onItemClick={onItemClick}
-                                renderItem={itemRender}
-                            />
-                        </Flex>
-                    );
-                })}
+                {isEditMode && editMenuProps?.enableSorting ? (
+                    <div>
+                        <List
+                            itemClassName={b('item', {editMode: true})}
+                            itemHeight={40}
+                            onSortEnd={changeItemsOrder}
+                            sortable
+                            virtualized={false}
+                            filterable={false}
+                            items={sortableItems}
+                            onItemClick={onItemClick}
+                            renderItem={itemRender}
+                        />
+
+                        {dragingItemTitle && (
+                            <div className={b('drag-placeholder')}>{dragingItemTitle}</div>
+                        )}
+                    </div>
+                ) : (
+                    Object.keys(groupedItems).map((category) => {
+                        return (
+                            <Flex key={category} direction="column" gap="3">
+                                <Text className={b('category')} variant="body-1" color="secondary">
+                                    {category}
+                                </Text>
+                                <List
+                                    virtualized={false}
+                                    filterable={false}
+                                    items={groupedItems[category]}
+                                    onItemClick={onItemClick}
+                                    renderItem={itemRender}
+                                />
+                            </Flex>
+                        );
+                    })
+                )}
             </Flex>
             {isEditMode && (
                 <Button onClick={onResetToDefaultClick}>{i18n('all-panel.resetToDefault')}</Button>

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -72,7 +72,7 @@
                 const openModalCount = data?.meta?.layers?.filter(
                     ({type}) => type === 'modal',
                 ).length;
                 callback(openModalCount !== 0);
             }
         });
     };
@@ -163,7 +163,7 @@
                 multipleTooltip={multipleTooltip}
                 openModalSubscriber={openModalSubscriber}
                 topAlert={topAlert}
                 renderFooter={({compact, asideRef}) => (
                     <React.Fragment>
                         <FooterItem
                             compact={compact}
@@ -295,8 +295,11 @@
                 onChangeCompact={(v) => {
                     setCompact(v);
                 }}
                 onMenuMoreClick={() => console.log('onMenuMoreClick')}
                 onAllPagesClick={() => console.log('onAllPagesClick')}
+                editMenuProps={{
+                    enableSorting: true,
+                }}
             />
         </div>
     );

src/components/AsideHeader/types.tsx

@@ -22,6 +22,8 @@ export interface EditMenuProps {
     onOpenEditMode?: () => void;
     onToggleMenuItem?: (changedItem: MenuItem) => void;
     onResetSettingsToDefault?: () => void;
+    enableSorting?: boolean;
+    onChangeItemsOrder?: (changedItem: MenuItem, oldIndex: number, newIndex: number) => void;
 }
 
 export interface AsideHeaderGeneralProps extends QAProps {