chore: move EntityPageTitle and PageMeta to separate components

src/components/DiskPageTitle/DiskPageTitle.scss → src/components/EntityPageTitle/EntityPageTitle.scss

@@ -1,6 +1,6 @@
 @import '../../styles/mixins.scss';
 
-.ydb-disk-page-title {
+.ydb-entity-page-title {
     display: flex;
     flex-flow: row nowrap;
     align-items: baseline;

src/components/DiskPageTitle/DiskPageTitle.tsx → src/components/EntityPageTitle/EntityPageTitle.tsx

@@ -2,23 +2,31 @@ import type {EFlag} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
 
-import './DiskPageTitle.scss';
+import './EntityPageTitle.scss';
 
-const b = cn('ydb-disk-page-title');
+const b = cn('ydb-entity-page-title');
 
-interface DiskPageTitleProps {
+interface EntityPageTitleProps {
     entityName: React.ReactNode;
     status: EFlag;
     id: React.ReactNode;
     className?: string;
+    children?: React.ReactNode;
 }
 
-export function DiskPageTitle({entityName, status, id, className}: DiskPageTitleProps) {
+export function EntityPageTitle({
+    entityName,
+    status,
+    id,
+    className,
+    children,
+}: EntityPageTitleProps) {
     return (
         <div className={b(null, className)}>
             <span className={b('prefix')}>{entityName}</span>
             <StatusIcon className={b('icon')} status={status} size="s" />
             {id}
+            {children}
         </div>
     );
 }

src/components/PageMeta/PageMeta.scss

@@ -1,16 +1,19 @@
 @import '../../styles//mixins.scss';
 
 .ydb-page-meta {
-    display: flex;
-    flex-flow: row nowrap;
+    &__info {
+        display: flex;
+        flex-grow: 1;
+        flex-flow: row nowrap;
 
-    height: var(--g-text-body-2-line-height);
+        height: var(--g-text-body-2-line-height);
 
-    text-wrap: nowrap;
+        text-wrap: nowrap;
 
-    color: var(--g-color-text-primary);
+        color: var(--g-color-text-primary);
 
-    @include body-2-typography();
+        @include body-2-typography();
+    }
 
     &__skeleton {
         width: 80%;

src/components/PageMeta/PageMeta.tsx

@@ -1,6 +1,8 @@
-import {Skeleton} from '@gravity-ui/uikit';
+import {Flex} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
+import {AutoRefreshControl} from '../AutoRefreshControl/AutoRefreshControl';
+import {Skeleton} from '../Skeleton/Skeleton';
 
 import './PageMeta.scss';
 
@@ -12,7 +14,7 @@ interface PageMetaProps {
     loading?: boolean;
 }
 
-export function PageMeta({items, loading, className}: PageMetaProps) {
+export function PageMeta({items, loading}: PageMetaProps) {
     const renderContent = () => {
         if (loading) {
             return <Skeleton className={b('skeleton')} />;
@@ -21,5 +23,19 @@ export function PageMeta({items, loading, className}: PageMetaProps) {
         return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
     };
 
-    return <div className={b(null, className)}>{renderContent()}</div>;
+    return <div className={b('info')}>{renderContent()}</div>;
+}
+
+export function PageMetaWithAutorefresh({className, ...rest}: PageMetaProps) {
+    return (
+        <Flex
+            gap={1}
+            alignItems="center"
+            justifyContent="space-between"
+            className={b(null, className)}
+        >
+            <PageMeta {...rest} />
+            <AutoRefreshControl />
+        </Flex>
+    );
 }

src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,16 @@
+import {Skeleton as KitSkeleton} from '@gravity-ui/uikit';
+
+import {useDelayed} from '../../utils/hooks/useDelayed';
+
+interface SkeletonProps {
+    delay?: number;
+    className?: string;
+}
+
+export const Skeleton = ({delay = 600, className}: SkeletonProps) => {
+    const show = useDelayed(delay);
+    if (!show) {
+        return null;
+    }
+    return <KitSkeleton className={className} />;
+};

src/containers/PDiskPage/PDiskPage.scss

@@ -20,13 +20,6 @@
         left: 0;
     }
 
-    &__meta {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--g-spacing-4);
-    }
-
     &__controls {
         display: flex;
         align-items: center;

src/containers/PDiskPage/PDiskPage.tsx

@@ -7,14 +7,13 @@ import {Helmet} from 'react-helmet-async';
 import {StringParam, useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
-import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {DiskPageTitle} from '../../components/DiskPageTitle/DiskPageTitle';
+import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink/InternalLink';
 import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
-import {PageMeta} from '../../components/PageMeta/PageMeta';
+import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {getPDiskPagePath} from '../../routes';
 import {api} from '../../store/reducers/api';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
@@ -125,16 +124,17 @@ export function PDiskPage() {
         const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
 
         return (
-            <div className={pdiskPageCn('meta')}>
-                <PageMeta loading={pDiskLoading} items={[hostItem, nodeIdItem, NodeType, NodeDC]} />
-                <AutoRefreshControl />
-            </div>
+            <PageMetaWithAutorefresh
+                loading={pDiskLoading}
+                items={[hostItem, nodeIdItem, NodeType, NodeDC]}
+                className={pdiskPageCn('meta')}
+            />
         );
     };
 
     const renderPageTitle = () => {
         return (
-            <DiskPageTitle
+            <EntityPageTitle
                 entityName={pDiskPageKeyset('pdisk')}
                 status={getSeverityColor(Severity)}
                 id={pDiskParamsDefined ? getPDiskId(nodeId, pDiskId) : null}

src/containers/VDiskPage/VDiskPage.scss

@@ -33,8 +33,4 @@
     &__group-disk {
         width: 150px;
     }
-
-    &__auto-refresh-control {
-        margin-inline-start: auto;
-    }
 }

src/containers/VDiskPage/VDiskPage.tsx

@@ -6,13 +6,12 @@ import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
 import {StringParam, useQueryParams} from 'use-query-params';
 
-import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {DiskPageTitle} from '../../components/DiskPageTitle/DiskPageTitle';
+import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {GroupInfo} from '../../components/GroupInfo/GroupInfo';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import {PageMeta} from '../../components/PageMeta/PageMeta';
+import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {VDiskWithDonorsStack} from '../../components/VDisk/VDiskWithDonorsStack';
 import {VDiskInfo} from '../../components/VDiskInfo/VDiskInfo';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
@@ -120,7 +119,7 @@ export function VDiskPage() {
         const pDiskIdItem = NodeId ? `${vDiskPageKeyset('pdisk')}: ${PDiskId}` : undefined;
 
         return (
-            <PageMeta
+            <PageMetaWithAutorefresh
                 loading={loading}
                 items={[hostItem, nodeIdItem, NodeType, NodeDC, pDiskIdItem, PDiskType]}
             />
@@ -129,7 +128,7 @@ export function VDiskPage() {
 
     const renderPageTitle = () => {
         return (
-            <DiskPageTitle
+            <EntityPageTitle
                 entityName={vDiskPageKeyset('vdisk')}
                 status={getSeverityColor(Severity)}
                 id={stringifyVdiskId(vDiskData?.VDiskId)}
@@ -154,7 +153,6 @@ export function VDiskPage() {
                     <Icon data={ArrowsOppositeToDots} />
                     {vDiskPageKeyset('evict-vdisk-button')}
                 </ButtonWithConfirmDialog>
-                <AutoRefreshControl className={vDiskPageCn('auto-refresh-control')} />
             </div>
         );
     };