feat!: update to uikit7

package.json

@@ -13,18 +13,18 @@
     "@bem-react/classname": "^1.6.0",
     "@ebay/nice-modal-react": "^1.2.13",
     "@gravity-ui/axios-wrapper": "^1.5.1",
-    "@gravity-ui/chartkit": "^5.20.0",
-    "@gravity-ui/components": "^3.13.2",
-    "@gravity-ui/date-components": "^2.11.0",
+    "@gravity-ui/chartkit": "^7.0.1",
+    "@gravity-ui/components": "^4.4.0",
+    "@gravity-ui/date-components": "^3.2.3",
     "@gravity-ui/date-utils": "^2.5.6",
     "@gravity-ui/i18n": "^1.7.0",
-    "@gravity-ui/icons": "^2.12.0",
-    "@gravity-ui/illustrations": "^2.0.0",
-    "@gravity-ui/navigation": "^2.30.0",
-    "@gravity-ui/paranoid": "^2.0.1",
+    "@gravity-ui/icons": "^2.13.0",
+    "@gravity-ui/illustrations": "^2.1.0",
+    "@gravity-ui/navigation": "^3.3.9",
+    "@gravity-ui/paranoid": "^3.0.0",
     "@gravity-ui/react-data-table": "^2.2.1",
-    "@gravity-ui/table": "^1.7.0",
-    "@gravity-ui/uikit": "^6.40.0",
+    "@gravity-ui/table": "^1.10.1",
+    "@gravity-ui/uikit": "^7.16.2",
     "@gravity-ui/unipika": "^5.2.1",
     "@gravity-ui/websql-autocomplete": "^13.7.0",
     "@hookform/resolvers": "^3.10.0",
@@ -59,7 +59,7 @@
     "use-query-params": "^2.2.1",
     "uuid": "^10.0.0",
     "web-vitals": "^1.1.2",
-    "ydb-ui-components": "^4.7.0",
+    "ydb-ui-components": "^5.0.0",
     "zod": "^3.24.1"
   },
   "scripts": {
@@ -117,8 +117,7 @@
     "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "jest-transform-css",
-      "^axios$": "axios/dist/node/axios.cjs",
-      "^@gravity-ui/uikit/toaster-singleton-react-18$": "@gravity-ui/uikit/build/cjs/toaster-singleton-react-18.js"
+      "^axios$": "axios/dist/node/axios.cjs"
     }
   },
   "browserslist": [

playwright.config.ts

@@ -35,11 +35,17 @@ const config: PlaywrightTestConfig = {
     projects: [
         {
             name: 'chromium',
-            use: {...devices['Desktop Chrome']},
+            use: {
+                ...devices['Desktop Chrome'],
+                contextOptions: {permissions: ['clipboard-read', 'clipboard-write']},
+            },
         },
         {
             name: 'safari',
-            use: {...devices['Desktop Safari']},
+            use: {
+                ...devices['Desktop Safari'],
+                contextOptions: {permissions: ['clipboard-read']},
+            },
         },
     ],
 };

src/components/AutoRefreshControl/AutoRefreshControl.tsx

@@ -27,7 +27,7 @@ export function AutoRefreshControl({className, onManualRefresh}: AutoRefreshCont
                     dispatch(api.util.invalidateTags(['All']));
                     onManualRefresh?.();
                 }}
-                extraProps={{'aria-label': i18n('Refresh')}}
+                aria-label={i18n('Refresh')}
             >
                 <Button.Icon>
                     <ArrowsRotateLeft />

src/components/CellWithPopover/CellWithPopover.scss

@@ -12,6 +12,7 @@
         overflow: hidden;
 
         max-width: 100%;
+        padding: var(--g-spacing-4);
 
         vertical-align: middle;
         white-space: nowrap;
@@ -25,4 +26,7 @@
             width: 100%;
         }
     }
+    &__children-wrapper {
+        cursor: pointer;
+    }
 }

src/components/CellWithPopover/CellWithPopover.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {Popover} from '@gravity-ui/uikit';
 import type {PopoverProps} from '@gravity-ui/uikit';
 
@@ -7,9 +9,10 @@ import './CellWithPopover.scss';
 
 const b = cn('ydb-cell-with-popover');
 
-interface CellWithPopoverProps extends PopoverProps {
+interface CellWithPopoverProps extends Omit<PopoverProps, 'children'> {
     wrapperClassName?: string;
     fullWidth?: boolean;
+    children: React.ReactNode;
 }
 
 const DELAY_TIMEOUT = 100;
@@ -24,12 +27,12 @@ export function CellWithPopover({
     return (
         <div className={b({'full-width': fullWidth}, wrapperClassName)}>
             <Popover
-                delayClosing={DELAY_TIMEOUT}
-                delayOpening={DELAY_TIMEOUT}
+                openDelay={DELAY_TIMEOUT}
+                closeDelay={DELAY_TIMEOUT}
                 className={b('popover', {'full-width': fullWidth}, className)}
                 {...props}
             >
-                {children}
+                <div className={b('children-wrapper')}>{children}</div>
             </Popover>
         </div>
     );

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
-import {Dialog, Tabs} from '@gravity-ui/uikit';
+import {Dialog, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 
 import {tenantApi} from '../../store/reducers/tenant/tenant';
@@ -65,14 +65,15 @@ function ConnectToDBDialog({
             <Dialog.Header caption={i18n('header')} />
             <Dialog.Body>
                 <div>{i18n('connection-info-message')}</div>
-                <Tabs
-                    size="m"
-                    allowNotSelected={false}
-                    activeTab={activeTab}
-                    items={connectionTabs}
-                    onSelectTab={(tab) => setActiveTab(tab as SnippetLanguage)}
-                    className={b('dialog-tabs')}
-                />
+                <TabProvider value={activeTab}>
+                    <TabList className={b('dialog-tabs')}>
+                        {connectionTabs.map(({id, title}) => (
+                            <Tab key={id} value={id} onClick={() => setActiveTab(id)}>
+                                {title}
+                            </Tab>
+                        ))}
+                    </TabList>
+                </TabProvider>
                 <div className={b('snippet-container')}>
                     <LoaderWrapper loading={isTenantDataLoading}>
                         <YDBSyntaxHighlighterLazy

src/components/ContentWithPopup/ContentWithPopup.tsx

@@ -42,7 +42,7 @@ export const ContentWithPopup = ({
     return (
         <React.Fragment>
             <Popup
-                anchorRef={anchor}
+                anchorElement={anchor.current}
                 open={isPinned || isPopupVisible}
                 placement={placement}
                 hasArrow={hasArrow}

src/components/CopyLinkButton/CopyLinkButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Link} from '@gravity-ui/icons';
-import type {ButtonProps, CopyToClipboardStatus} from '@gravity-ui/uikit';
+import type {ButtonButtonProps, CopyToClipboardStatus} from '@gravity-ui/uikit';
 import {ActionTooltip, Button, CopyToClipboard, Icon} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
@@ -12,8 +12,7 @@ import './CopyLinkButton.scss';
 
 const b = cn('ydb-copy-link-button');
 
-interface LinkButtonComponentProps extends ButtonProps {
-    size?: ButtonProps['size'];
+interface LinkButtonComponentProps extends ButtonButtonProps {
     hasTooltip?: boolean;
     status: CopyToClipboardStatus;
     closeDelay?: number;
@@ -43,7 +42,7 @@ const LinkButtonComponent = (props: LinkButtonComponentProps) => {
     );
 };
 
-export interface CopyLinkButtonProps extends ButtonProps {
+export interface CopyLinkButtonProps extends ButtonButtonProps {
     text: string;
 }
 

src/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -161,7 +161,7 @@ export function CriticalActionDialog<T>({
             className={b()}
             size="s"
             onClose={onClose}
-            onTransitionExited={handleTransitionExited}
+            onTransitionOutComplete={handleTransitionExited}
         >
             {renderDialogContent()}
         </Dialog>

src/components/DateRange/DateRange.tsx

@@ -4,7 +4,7 @@ import type {
     RelativeRangeDatePickerProps,
     RelativeRangeDatePickerValue,
 } from '@gravity-ui/date-components';
-import {RelativeRangeDatePicker} from '@gravity-ui/date-components';
+import {DEFAULT_TIME_PRESETS, RelativeRangeDatePicker} from '@gravity-ui/date-components';
 
 import {cn} from '../../utils/cn';
 
@@ -57,6 +57,8 @@ export const DateRange = ({from, to, className, defaultValue, onChange}: DateRan
                 onUpdate={handleUpdate}
                 placeholder={`${i18n('date-time-format')} - ${i18n('date-time-format')}`}
                 withApplyButton
+                docs={DEFAULT_TIME_PRESETS}
+                withHeader
             />
         </div>
     );

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -23,7 +23,11 @@ function Legend({children, variant = 'subheader-3', color = 'primary', note}: Le
             <Text variant={variant} color={color} className={b('legend')} as="div">
                 {children}
             </Text>
-            {note && <HelpMark className={b('legend-note')}>{note}</HelpMark>}
+            {note && (
+                <HelpMark className={b('legend-note')} popoverProps={{placement: 'right'}}>
+                    {note}
+                </HelpMark>
+            )}
         </Flex>
     );
 }

src/components/Drawer/Drawer.scss

@@ -1,5 +1,6 @@
 .ydb-drawer {
     &__drawer-container {
+        --gn-drawer-item-position: absolute;
         position: relative;
 
         overflow: hidden;

src/components/Drawer/Drawer.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
 import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
-import {ActionTooltip, Button, Flex, Icon, Portal, Text} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {isNumeric} from '../../utils/utils';
 import {CopyLinkButton} from '../CopyLinkButton/CopyLinkButton';
+import {Portal} from '../Portal/Portal';
 
 import {useDrawerContext} from './DrawerContext';
 

src/components/EntityStatus/EntityStatus.scss

@@ -142,4 +142,8 @@
             color: var(--ydb-color-status-red);
         }
     }
+
+    &__info-popover {
+        padding: var(--g-spacing-4);
+    }
 }

src/components/EntityStatus/EntityStatus.tsx

@@ -122,7 +122,6 @@ export function EntityStatus({
                                 <Popover
                                     className={b('info-popover')}
                                     content={infoPopoverContent}
-                                    tooltipOffset={[-4, 4]}
                                     placement={['top-start', 'bottom-start']}
                                     onOpenChange={(visible) => setInfoIconHovered(visible)}
                                 >

src/components/EntityStatusNew/EntityStatus.scss

@@ -1,5 +1,5 @@
 .ydb-entity-status-new {
-    .g-help-mark__button {
+    &__note {
         color: inherit;
     }
 

src/components/EntityStatusNew/EntityStatus.tsx

@@ -73,7 +73,7 @@ function EntityStatusLabel({
                 <Flex gap="2" wrap="nowrap">
                     {children}
                     {withStatusName ? EFlagToStatusName[status] : null}
-                    {note && <HelpMark>{note}</HelpMark>}
+                    {note && <HelpMark className={b('note')}>{note}</HelpMark>}
                 </Flex>
             </Label>
         </ActionTooltip>

src/components/Fullscreen/Fullscreen.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import {Button, Icon, Portal} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
 
 import {disableFullscreen} from '../../store/reducers/fullscreen';
 import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {Portal} from '../Portal/Portal';
 
 import disableFullscreenIcon from '../../assets/icons/disableFullscreen.svg';
 

src/components/HoverPopup/HoverPopup.scss

@@ -1,3 +1,3 @@
-.hover-popup {
-    padding: var(--g-spacing-3);
+.ydb-hover-popup {
+    padding: var(--g-spacing-4);
 }

src/components/HoverPopup/HoverPopup.tsx

@@ -8,21 +8,21 @@ import {cn} from '../../utils/cn';
 
 import './HoverPopup.scss';
 
-const b = cn('hover-popup');
-
 const DEBOUNCE_TIMEOUT = 100;
 
+const b = cn('ydb-hover-popup');
+
 type HoverPopupProps = {
     children: React.ReactNode;
     renderPopupContent: () => React.ReactNode;
     showPopup?: boolean;
-    offset?: [number, number];
     anchorRef?: React.RefObject<HTMLElement>;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
     delayOpen?: number;
     delayClose?: number;
-} & Pick<PopupProps, 'placement' | 'contentClassName'>;
+    contentClassName?: string;
+} & Pick<PopupProps, 'placement' | 'offset'>;
 
 export const HoverPopup = ({
     children,
@@ -100,20 +100,29 @@ export const HoverPopup = ({
             </span>
             {open ? (
                 <Popup
-                    contentClassName={b(null, contentClassName)}
-                    anchorRef={anchorRef || anchor}
-                    onMouseEnter={onPopupMouseEnter}
-                    onMouseLeave={onPopupMouseLeave}
-                    onEscapeKeyDown={onPopupEscapeKeyDown}
-                    onBlur={onPopupBlur}
+                    anchorElement={anchorRef?.current || anchor.current}
+                    onOpenChange={(_open, _event, reason) => {
+                        if (reason === 'escape-key') {
+                            onPopupEscapeKeyDown();
+                        }
+                    }}
                     placement={placement}
                     hasArrow
                     open
                     // bigger offset for easier switching to neighbour nodes
                     // matches the default offset for popup with arrow out of a sense of beauty
-                    offset={offset || [0, 12]}
+                    offset={offset || {mainAxis: 12, crossAxis: 0}}
+                    className={b()}
                 >
-                    <div onContextMenu={onPopupContextMenu}>{renderPopupContent()}</div>
+                    <div
+                        className={contentClassName}
+                        onContextMenu={onPopupContextMenu}
+                        onMouseEnter={onPopupMouseEnter}
+                        onMouseLeave={onPopupMouseLeave}
+                        onBlur={onPopupBlur}
+                    >
+                        {renderPopupContent()}
+                    </div>
                 </Popup>
             ) : null}
         </React.Fragment>

src/components/InternalLink/InternalLink.scss

@@ -0,0 +1,13 @@
+.ydb-link {
+    &_tab {
+        display: inline-flex;
+        align-items: center;
+
+        height: 100%;
+
+        color: unset;
+        &:hover {
+            color: unset;
+        }
+    }
+}