fix(EntityStatus): remove additionalControls, fix ClipboardButton layout (#1524)

Author: Raubzeug

package-lock.json

@@ -22,7 +22,7 @@
     "@gravity-ui/paranoid": "^2.0.1",
     "@gravity-ui/react-data-table": "^2.1.1",
     "@gravity-ui/table": "^0.5.0",
-    "@gravity-ui/uikit": "^6.20.1",
+    "@gravity-ui/uikit": "^6.33.0",
     "@gravity-ui/websql-autocomplete": "^9.1.0",
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.3",

package.json

@@ -1,12 +1,12 @@
 @import '../../styles/mixins.scss';
 
 .entity-status {
+    --button-width: 28px;
     position: relative;
 
     display: inline-flex;
     align-items: center;
 
-    min-width: 90px;
     max-width: 100%;
     height: 100%;
 
@@ -20,6 +20,18 @@
         color: var(--g-color-text-secondary);
 
         @include table-hover-appearing-button();
+
+        &_visible {
+            opacity: 1;
+        }
+    }
+
+    &__wrapper {
+        position: relative;
+
+        overflow: hidden;
+
+        padding-right: var(--button-width);
     }
 
     &__controls-wrapper {
@@ -34,13 +46,18 @@
         width: 0;
         height: 100%;
 
-        background-color: var(--g-color-base-float);
+        &_visible {
+            width: min-content;
+            padding: var(--g-spacing-1);
+        }
 
         .data-table__row:hover &,
         .ydb-paginated-table__row:hover &,
         .ydb-tree-view__item & {
             width: min-content;
             padding: var(--g-spacing-1);
+
+            background-color: var(--g-color-base-float);
         }
     }
 
@@ -57,13 +74,18 @@
     }
 
     &__link {
+        display: inline-block;
         overflow: hidden;
 
+        width: calc(100% + var(--button-width));
+        margin-top: 5px;
+
         white-space: nowrap;
         text-overflow: ellipsis;
     }
 
     &__link_with-left-trim {
+        text-align: end;
         direction: rtl;
 
         .entity-status__name {

src/components/EntityStatus/EntityStatus.scss

@@ -28,8 +28,6 @@ interface EntityStatusProps {
     clipboardButtonAlwaysVisible?: boolean;
 
     className?: string;
-
-    additionalControls?: React.ReactNode;
 }
 
 export function EntityStatus({
@@ -50,8 +48,6 @@ export function EntityStatus({
     clipboardButtonAlwaysVisible = false,
 
     className,
-
-    additionalControls,
 }: EntityStatusProps) {
     const renderIcon = () => {
         if (!showStatus) {
@@ -93,22 +89,29 @@ export function EntityStatus({
                     {label}
                 </span>
             )}
-            <span className={b('link', {'with-left-trim': withLeftTrim})}>{renderLink()}</span>
-            <div className={b('controls-wrapper')}>
-                {hasClipboardButton && (
-                    <ClipboardButton
-                        text={name}
-                        size="xs"
-                        view="normal"
-                        className={b('clipboard-button', {
-                            visible: clipboardButtonAlwaysVisible,
-                        })}
-                    />
-                )}
-                {additionalControls && (
-                    <span className={b('additional-controls')}>{additionalControls}</span>
-                )}
-            </div>
+            {(path || name) && (
+                <div className={b('wrapper')}>
+                    <span className={b('link', {'with-left-trim': withLeftTrim})}>
+                        {renderLink()}
+                    </span>
+                    {hasClipboardButton && (
+                        <div
+                            className={b('controls-wrapper', {
+                                visible: clipboardButtonAlwaysVisible,
+                            })}
+                        >
+                            <ClipboardButton
+                                text={name}
+                                size="xs"
+                                view="normal"
+                                className={b('clipboard-button', {
+                                    visible: clipboardButtonAlwaysVisible,
+                                })}
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
         </div>
     );
 }

src/components/EntityStatus/EntityStatus.tsx

@@ -1,32 +1,20 @@
 import type {ButtonSize} from '@gravity-ui/uikit';
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {cn} from '../../utils/cn';
-
 import monitoringIcon from '../../assets/icons/monitoring.svg';
 
-import './MonitoringButton.scss';
-
-const b = cn('kv-monitoring-button');
-
 interface MonitoringButtonProps {
     className?: string;
-    visible?: boolean;
     href: string;
     size?: ButtonSize;
 }
 
-export function MonitoringButton({
-    href,
-    visible = false,
-    className,
-    size = 's',
-}: MonitoringButtonProps) {
+export function MonitoringButton({href, className, size = 'xs'}: MonitoringButtonProps) {
     return (
         <Button
             href={href}
             target="_blank"
-            className={b({visible}, className)}
+            className={className}
             size={size}
             title="Monitoring dashboard"
         >

src/components/MonitoringButton/MonitoringButton.scss

@@ -6,7 +6,6 @@ import type {TSystemStateInfo} from '../../types/api/nodes';
 import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
 import {isUnavailableNode} from '../../utils/nodes';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
-import {DeveloperUILinkButton} from '../DeveloperUILinkButton/DeveloperUILinkButton';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 
@@ -42,14 +41,10 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
           })
         : undefined;
 
-    const additionalControls = nodeHref ? (
-        <DeveloperUILinkButton href={nodeHref} size="xs" />
-    ) : null;
-
     return (
         <CellWithPopover
             disabled={!isNodeAvailable}
-            content={<NodeEndpointsTooltipContent data={node} />}
+            content={<NodeEndpointsTooltipContent data={node} nodeHref={nodeHref} />}
             placement={['top', 'bottom']}
             behavior={PopoverBehavior.Immediate}
         >
@@ -58,7 +53,6 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
                 status={node.SystemState}
                 path={nodePath}
                 hasClipboardButton
-                additionalControls={additionalControls}
             />
         </CellWithPopover>
     );

src/components/MonitoringButton/MonitoringButton.tsx

@@ -0,0 +1,49 @@
+import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
+
+import {getTabletPagePath} from '../../routes';
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
+import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
+import {useTypedSelector} from '../../utils/hooks';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+import {EntityStatus} from '../EntityStatus/EntityStatus';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+
+import i18n from './i18n';
+
+interface TabletNameWrapperProps {
+    tabletId: string | number;
+    database?: string;
+}
+
+export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
+    const tabletPath = getTabletPagePath(tabletId, {
+        tenantName: database,
+    });
+
+    return (
+        <CellWithPopover
+            disabled={!isUserAllowedToMakeChanges}
+            content={
+                <DefinitionList responsive>
+                    <DefinitionList.Item name={i18n('field_links')}>
+                        <LinkWithIcon
+                            title={i18n('context_developer-ui')}
+                            url={createTabletDeveloperUIHref(tabletId)}
+                        />
+                    </DefinitionList.Item>
+                </DefinitionList>
+            }
+            placement={['top', 'bottom']}
+            behavior={PopoverBehavior.Immediate}
+        >
+            <EntityStatus
+                name={tabletId.toString()}
+                path={tabletPath}
+                hasClipboardButton
+                showStatus={false}
+            />
+        </CellWithPopover>
+    );
+}

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -0,0 +1,4 @@
+{
+  "field_links": "Links",
+  "context_developer-ui": "Developer UI"
+}

src/components/TabletNameWrapper/TabletNameWrapper.tsx

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tablet-name-wrapper';
+
+export default registerKeysets(COMPONENT, {en});