feat!: update to uikit7 (#2544)

Author: Raubzeug

package-lock.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": [

package.json

@@ -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']},
+            },
         },
     ],
 };

playwright.config.ts

@@ -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/AutoRefreshControl/AutoRefreshControl.tsx

@@ -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.scss

@@ -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/CellWithPopover/CellWithPopover.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/ConnectToDB/ConnectToDBDialog.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/ContentWithPopup/ContentWithPopup.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/CopyLinkButton/CopyLinkButton.tsx

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