fix: fix top aside header logic for use static alert

src/components/AsideHeader/AsideHeader.tsx

@@ -14,7 +14,7 @@ import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../consta
 import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue';
 
 export const AsideHeader = (props: AsideHeaderProps) => {
-    const {className, compact, renderTop} = props;
+    const {className, compact, topAlert} = props;
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);
     const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size});
@@ -34,12 +34,12 @@ export const AsideHeader = (props: AsideHeaderProps) => {
             200,
             {leading: true},
         );
-        if (renderTop) {
+        if (topAlert) {
             window.addEventListener('resize', updateTopSize);
             updateTopSize();
         }
         return () => window.removeEventListener('resize', updateTopSize);
-    }, [renderTop, topRef, topHeight]);
+    }, [topAlert, topRef, topHeight]);
 
     return (
         <AsideHeaderContextProvider value={asideHeaderContextValue}>

src/components/AsideHeader/__stories__/AsideHeader.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
-import {Alert} from '@gravity-ui/uikit';
 
 import {AsideHeader} from '../AsideHeader';
 import {AsideHeaderShowcase} from './AsideHeaderShowcase';
@@ -30,11 +29,7 @@ MultipleTooltip.args = {
 const TopAlertTemplate: StoryFn = (args) => <AsideHeaderShowcase {...args} />;
 export const HeaderAlert = TopAlertTemplate.bind({});
 HeaderAlert.args = {
-    renderTop: () => (
-        <Alert
-            theme="warning"
-            corners="square"
-            message="Scheduled maintenance is being performed"
-        />
-    ),
+    topAlert: {
+        message: 'Scheduled maintenance is being performed',
+    },
 };

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -3,7 +3,7 @@ import React, {FC} from 'react';
 import {RadioButton, Radio, Modal, Button, eventBroker, EventBrokerData} from '@gravity-ui/uikit';
 import {Gear, Magnifier} from '@gravity-ui/icons';
 
-import {AsideHeader, FooterItem} from '../..';
+import {AsideHeader, FooterItem, AsideHeaderTopAlertProps} from '../..';
 import {cn} from '../../utils/cn';
 import {menuItemsShowcase, text as placeholderText} from './moc';
 import {MenuItem, OpenModalSubscriber} from '../../types';
@@ -29,13 +29,13 @@ enum Panel {
 interface AsideHeaderShowcaseProps {
     multipleTooltip?: boolean;
     initialCompact?: boolean;
-    renderTop?: () => React.ReactNode;
+    topAlert?: AsideHeaderTopAlertProps;
 }
 
 export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
     multipleTooltip = false,
     initialCompact = false,
-    renderTop,
+    topAlert,
 }) => {
     const [popupVisible, setPopupVisible] = React.useState(false);
     const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
@@ -126,7 +126,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                 compact={compact}
                 multipleTooltip={multipleTooltip}
                 openModalSubscriber={openModalSubscriber}
-                renderTop={renderTop}
+                topAlert={topAlert}
                 renderFooter={({compact}) => (
                     <React.Fragment>
                         <FooterItem

src/components/AsideHeader/components/TopPanel.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
+import {Alert} from '@gravity-ui/uikit';
 
 import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../utils';
 
 export const TopPanel = React.forwardRef<HTMLDivElement>((_, ref) => {
-    const {renderTop} = useAsideHeaderInnerContext();
+    const {topAlert} = useAsideHeaderInnerContext();
 
-    if (!renderTop) {
+    if (!topAlert) {
         return null;
     }
 
     return (
         <div ref={ref} className={b('pane-top')}>
-            {renderTop()}
+            <Alert
+                corners="square"
+                theme={topAlert.theme || 'warning'}
+                icon={topAlert.icon}
+                message={topAlert.message}
+            />
         </div>
     );
 });

src/components/AsideHeader/types.tsx

@@ -1,6 +1,12 @@
 import {RenderContentType} from '../Content';
 import {DrawerItemProps} from '../Drawer/Drawer';
-import {LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber} from '../types';
+import {
+    LogoProps,
+    MenuItem,
+    SubheaderMenuItem,
+    OpenModalSubscriber,
+    AsideHeaderTopAlertProps,
+} from '../types';
 
 export interface AsideHeaderGeneralProps {
     logo: LogoProps;
@@ -10,13 +16,13 @@ export interface AsideHeaderGeneralProps {
     collapseTitle?: string;
     expandTitle?: string;
     menuMoreTitle?: string;
+    topAlert?: AsideHeaderTopAlertProps;
     renderContent?: RenderContentType;
     renderFooter?: (data: {
         size: number;
         compact: boolean;
         asideRef: React.RefObject<HTMLDivElement>;
     }) => React.ReactNode;
-    renderTop?: () => React.ReactNode;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;

src/components/types.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import {IconProps} from '@gravity-ui/uikit';
+import {IconProps, AlertProps} from '@gravity-ui/uikit';
 
 import {ItemProps} from 'src/components/CompositeBar/Item/Item';
 
@@ -67,3 +67,9 @@ export interface LogoProps {
     wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
+
+export type AsideHeaderTopAlertProps = {
+    message: AlertProps['message'];
+    icon?: AlertProps['icon'];
+    theme?: AlertProps['theme'];
+};