ydb-embedded-ui 6.2.0 → 6.2.2

package/dist/components/EntityStatus/EntityStatus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EFlag } from '../../types/api/enums';
 import type { StatusIconMode, StatusIconSize } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
@@ -15,6 +16,7 @@ interface EntityStatusProps {
     hasClipboardButton?: boolean;
     clipboardButtonAlwaysVisible?: boolean;
     className?: string;
+    additionalControls?: React.ReactNode;
 }
-export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, additionalControls, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link as UIKitLink } from '@gravity-ui/uikit';
-import { Link } from 'react-router-dom';
 import { EFlag } from '../../types/api/enums';
 import { cn } from '../../utils/cn';
 import { ClipboardButton } from '../ClipboardButton';
+import { InternalLink } from '../InternalLink/InternalLink';
 import { StatusIcon } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
 const b = cn('entity-status');
-export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, }) {
+export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, additionalControls, }) {
     const renderIcon = () => {
         if (!showStatus) {
             return null;
@@ -22,11 +22,11 @@ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, icon
             if (externalLink) {
                 return (_jsx(UIKitLink, { className: b('name'), href: path, children: name }));
             }
-            return (_jsx(Link, { className: b('name'), to: path, children: name }));
+            return (_jsx(InternalLink, { className: b('name'), to: path, children: name }));
         }
         return name && _jsx("span", { className: b('name'), children: name });
     };
     return (_jsxs("div", { className: b(null, className), title: name, children: [iconPath ? renderStatusLink(iconPath) : renderIcon(), label && (_jsx("span", { title: label, className: b('label', { size, state: status.toLowerCase() }), children: label })), _jsx("span", { className: b('link', { 'with-left-trim': withLeftTrim }), children: renderLink() }), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
                     visible: clipboardButtonAlwaysVisible,
-                }) }))] }));
+                }) })), additionalControls] }));
 }

package/dist/components/EntityStatus/EntityStatus.scss

@@ -14,27 +14,20 @@
     }
 
     &__clipboard-button {
-        visibility: hidden;
+        display: flex;
+        flex-shrink: 0;
 
         margin-left: 8px;
 
+        opacity: 0;
         color: var(--g-color-text-secondary);
 
-        &_visible {
-            visibility: visible;
+        &_visible,
+        &:focus-visible {
+            opacity: 1;
         }
     }
 
-    a {
-        text-decoration: none;
-
-        color: var(--g-color-text-link);
-    }
-
-    a:hover {
-        color: var(--g-color-text-link-hover);
-    }
-
     &__label {
         margin-right: 2px;
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
 import { cn } from '../../utils/cn';
@@ -20,5 +20,6 @@ export const NodeHostWrapper = ({ node, getNodeRef }) => {
             tenantName: node.TenantName,
         })
         : undefined;
-    return (_jsxs(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: [_jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, className: b('host') }), nodeRef && (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) }))] }));
+    const additionalControls = nodeRef ? (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) })) : null;
+    return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, additionalControls: additionalControls }) }));
 };

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,10 +1,7 @@
 .ydb-node-host-wrapper {
-    &__host {
-        overflow: hidden;
-    }
-
     &__external-button {
         display: none;
+        flex-shrink: 0;
 
         margin-left: 4px;
     }

package/dist/containers/App/App.scss

@@ -119,10 +119,9 @@ body,
 .data-table__row,
 .ydb-virtual-table__row,
 .ydb-tree-view__item {
-    &:hover,
-    &:focus-within {
+    &:hover {
         & .clipboard-button {
-            visibility: visible;
+            opacity: 1;
         }
     }
 }

package/dist/containers/Tenant/Query/Preview/Preview.js

@@ -15,10 +15,11 @@ import './Preview.scss';
 const b = cn('kv-preview');
 export const Preview = ({ database, type }) => {
     const dispatch = useTypedDispatch();
+    const isPreviewAvailable = isTableType(type);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
-    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh });
+    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh, skip: !isPreviewAvailable });
     const loading = isFetching && currentData === undefined;
     const data = currentData !== null && currentData !== void 0 ? currentData : {};
     const handleClosePreview = () => {
@@ -31,7 +32,7 @@ export const Preview = ({ database, type }) => {
         return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));
     }
     let message;
-    if (!isTableType(type)) {
+    if (!isPreviewAvailable) {
         message = _jsx("div", { className: b('message-container'), children: i18n('preview.not-available') });
     }
     else if (error) {

package/dist/containers/Tenants/Tenants.js

@@ -55,10 +55,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
                     var _a;
                     const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
-                    return (_jsxs("div", { className: b('name-wrapper'), children: [_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
-                                    name: row.Name,
-                                    backend,
-                                }) }), (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type)] }));
+                    return (_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
+                            name: row.Name,
+                            backend,
+                        }), additionalControls: _jsx("span", { className: b('monitoring-button'), children: (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type) }) }));
                 },
                 width: 440,
                 sortable: true,

package/dist/containers/Tenants/Tenants.scss

@@ -49,10 +49,8 @@
         display: block;
     }
 
-    &__name-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+    &__monitoring-button {
+        margin-left: 4px;
     }
 
     &__name {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "files": [
     "dist"
   ],