Unify interfaces items

.storybook/preview.tsx

@@ -5,6 +5,7 @@ import {withMobile} from './decorators/withMobile';
 import {withLang} from './decorators/withLang';
 
 import './styles.scss';
+
 import '@gravity-ui/uikit/styles/styles.css';
 
 uiKitConfigure({

src/components/AsideHeader/AsideHeaderContext.ts

@@ -1,15 +1,13 @@
 import React from 'react';
 
-import {MenuItem} from '../types';
-
-import {AsideHeaderInnerProps} from './types';
+import {AsideHeaderInnerProps, AsideHeaderItem} from './types';
 
 export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
-    menuItems: MenuItem[];
-    defaultMenuItems?: MenuItem[];
+    menuItems: AsideHeaderItem[];
+    defaultMenuItems?: AsideHeaderItem[];
     allPagesIsAvailable: boolean;
     onItemClick: (
-        item: MenuItem,
+        item: AsideHeaderItem,
         collapsed: boolean,
         event: React.MouseEvent<HTMLElement, MouseEvent>,
     ) => void;

src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss

@@ -1,12 +1,12 @@
-@import '../../../../styles/mixins';
+@use '../../../../styles/mixins';
 
 body {
     margin: 0;
 }
 
 .aside-header-showcase {
     &__content {
-        @include text-body-3;
+        @include mixins.text-body-3;
         padding: 40px;
     }
 
@@ -71,7 +71,7 @@ body {
     }
 
     &__item-accent {
-        @include text-accent;
+        @include mixins.text-accent;
         width: 100%;
         height: 100%;
     }

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -109,20 +109,18 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                 customBackgroundClassName={customBackgroundClassName}
                 subheaderItems={[
                     {
-                        item: {
-                            id: 'services',
-                            title: 'Services',
-                            icon: Gear,
-                            onItemClick: () => {
-                                setVisiblePanel(undefined);
-                                setSubheaderPopupVisible(!subheaderPopupVisible);
-                            },
+                        id: 'services',
+                        title: 'Services',
+                        icon: Gear,
+                        onItemClick: () => {
+                            setVisiblePanel(undefined);
+                            setSubheaderPopupVisible(!subheaderPopupVisible);
                         },
-                        popupAnchor: ref,
+                        popupRef: ref,
                         popupPlacement: ['right-start'],
                         popupOffset: {mainAxis: 10, crossAxis: 10},
                         popupVisible: subheaderPopupVisible,
-                        onClosePopup: () => setSubheaderPopupVisible(false),
+                        onOpenChangePopup: () => setSubheaderPopupVisible(false),
                         renderPopupContent: () => {
                             return (
                                 <div className={b('settings')}>
@@ -137,17 +135,15 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                         },
                     },
                     {
-                        item: {
-                            id: 'search',
-                            title: 'Search',
-                            qa: 'subheader-item-search',
-                            icon: Magnifier,
-                            current: visiblePanel === Panel.Search,
-                            onItemClick: () =>
-                                setVisiblePanel(
-                                    visiblePanel === Panel.Search ? undefined : Panel.Search,
-                                ),
-                        },
+                        id: 'search',
+                        title: 'Search',
+                        qa: 'subheader-item-search',
+                        icon: Magnifier,
+                        current: visiblePanel === Panel.Search,
+                        onItemClick: () =>
+                            setVisiblePanel(
+                                visiblePanel === Panel.Search ? undefined : Panel.Search,
+                            ),
                     },
                 ]}
                 compact={compact}
@@ -159,30 +155,28 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                     <React.Fragment>
                         <FooterItem
                             compact={compact}
-                            item={{
-                                id: 'infra',
-                                icon: Gear,
-                                current: popupVisible,
-                                qa: 'footer-item-gear',
-                                iconQa: 'footer-item-icon-gear',
-                                title: (
-                                    <div className={b('infra-text')}>
-                                        <span className={b('infra-label')}>Minor issue</span>
-                                        <span className={b('infra-period')}>Now</span>
-                                    </div>
-                                ),
-                                tooltipText: 'Minor issue (Now)',
-                                onItemClick: () => {
-                                    setVisiblePanel(undefined);
-                                    setPopupVisible(!popupVisible);
-                                },
+                            id={'infra'}
+                            icon={Gear}
+                            current={popupVisible}
+                            qa={'footer-item-gear'}
+                            iconQa={'footer-item-icon-gear'}
+                            title={
+                                <div className={b('infra-text')}>
+                                    <span className={b('infra-label')}>Minor issue</span>
+                                    <span className={b('infra-period')}>Now</span>
+                                </div>
+                            }
+                            tooltipText={'Minor issue (Now)'}
+                            onItemClick={() => {
+                                setVisiblePanel(undefined);
+                                setPopupVisible(!popupVisible);
                             }}
                             enableTooltip={false}
                             popupVisible={popupVisible}
-                            popupAnchor={asideRef}
+                            popupRef={asideRef}
                             popupPlacement={['right-end']}
                             popupOffset={{mainAxis: 10, crossAxis: 10}}
-                            onClosePopup={() => setPopupVisible(false)}
+                            onOpenChangePopup={() => setPopupVisible(false)}
                             popupKeepMounted={true}
                             renderPopupContent={() => {
                                 return (
@@ -198,45 +192,42 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                             }}
                         />
                         <FooterItem
-                            item={{
-                                id: 'project-settings',
-                                title: 'Settings with panel',
-                                tooltipText: (
-                                    <div>
-                                        <b>Settings with panel</b>
-                                    </div>
-                                ),
-                                current: visiblePanel === Panel.ProjectSettings,
-                                itemWrapper: (params, makeItem) =>
-                                    makeItem({
-                                        ...params,
-                                        icon: <Icon data={Bug} size={ASIDE_HEADER_ICON_SIZE} />,
-                                    }),
-                                onItemClick: () => {
-                                    setVisiblePanel(
-                                        visiblePanel === Panel.ProjectSettings
-                                            ? undefined
-                                            : Panel.ProjectSettings,
-                                    );
-                                },
+                            id={'project-settings'}
+                            title={'Settings with panel'}
+                            tooltipText={
+                                <div>
+                                    <b>Settings with panel</b>
+                                </div>
+                            }
+                            current={visiblePanel === Panel.ProjectSettings}
+                            itemWrapper={(params, makeItem) =>
+                                makeItem({
+                                    ...params,
+                                    icon: <Icon data={Bug} size={ASIDE_HEADER_ICON_SIZE} />,
+                                })
+                            }
+                            onItemClick={() => {
+                                setVisiblePanel(
+                                    visiblePanel === Panel.ProjectSettings
+                                        ? undefined
+                                        : Panel.ProjectSettings,
+                                );
                             }}
                             bringForward
                             compact={compact}
                         />
                         <FooterItem
-                            item={{
-                                id: 'user-settings',
-                                icon: Gear,
-                                title: 'User Settings with panel',
-                                tooltipText: 'User Settings with panel',
-                                current: visiblePanel === Panel.UserSettings,
-                                onItemClick: () => {
-                                    setVisiblePanel(
-                                        visiblePanel === Panel.UserSettings
-                                            ? undefined
-                                            : Panel.UserSettings,
-                                    );
-                                },
+                            id={'user-settings'}
+                            icon={Gear}
+                            title={'User Settings with panel'}
+                            tooltipText={'User Settings with panel'}
+                            current={visiblePanel === Panel.UserSettings}
+                            onItemClick={() => {
+                                setVisiblePanel(
+                                    visiblePanel === Panel.UserSettings
+                                        ? undefined
+                                        : Panel.UserSettings,
+                                );
                             }}
                             compact={compact}
                         />

src/components/AsideHeader/__stories__/moc.tsx

@@ -123,23 +123,18 @@ const MENU_ITEMS_CLAMPED: AsideHeaderProps['menuItems'] = [
         title: MENU_ITEMS_CLAMPED_TITLE,
         icon: Gear,
     },
-    {
-        id: 'text-action',
-        title: MENU_ITEMS_CLAMPED_TITLE,
-        icon: Gear,
-        type: 'action',
-    },
+    {id: 'text-action', title: MENU_ITEMS_CLAMPED_TITLE, icon: Gear, type: 'action'},
     {
         id: 'text-link',
         title: MENU_ITEMS_CLAMPED_TITLE,
         icon: Gear,
-        link: 'about:blank',
+        href: 'about:blank',
     },
     {
         id: 'text-link-action',
         title: MENU_ITEMS_CLAMPED_TITLE,
         icon: Gear,
-        link: 'about:blank',
+        href: 'about:blank',
         type: 'action',
     },
 ];

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.scss → src/components/AsideHeader/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.scss

@@ -1,5 +1,5 @@
-@use '../../variables';
-@use '../../../../styles/mixins';
+@use '../../../../variables';
+@use '../../../../../../styles/mixins';
 
 .#{variables.$ns}all-pages-list-item {
     @include mixins.accessibility-button;

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx → src/components/AsideHeader/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx

@@ -3,15 +3,16 @@ import React, {MouseEvent, useCallback} from 'react';
 import {Pin, PinFill} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {MenuItem} from '../../types';
-import {block} from '../../utils/cn';
+import {AsideHeaderItem} from 'src/components/AsideHeader/types';
+
+import {block} from '../../../../utils/cn';
 
 import './AllPagesListItem.scss';
 
 const b = block('all-pages-list-item');
 
 interface AllPagesListItemProps {
-    item: MenuItem;
+    item: AsideHeaderItem;
     editMode?: boolean;
     enableSorting?: boolean;
     onToggle: () => void;
@@ -37,7 +38,7 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
         }
     };
 
-    const [Tag, tagProps] = item.link ? ['a' as const, {href: item.link}] : ['button' as const, {}];
+    const [Tag, tagProps] = item.href ? ['a' as const, {href: item.href}] : ['button' as const, {}];
 
     return (
         <Tag {...tagProps} className={b()} onClick={onItemClick}>

src/components/AllPagesPanel/AllPagesPanel.scss → src/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.scss

@@ -1,4 +1,4 @@
-@use '../variables';
+@use '../../../variables';
 
 .#{variables.$ns}all-pages-panel {
     min-width: 300px;