fix: add margin for developer ui button (#1041)

artemmufazalov · web-flow · commit 6fa1e0bddaa4 · 2024-07-22T14:03:41.000+03:00
diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss
@@ -1,11 +1,12 @@
-.developer-ui-link {
+.developer-ui-link-button {
     display: none;
 
     &_visible {
         display: inline-block;
     }
 
-    .data-table__row:hover & {
+    .data-table__row:hover &,
+    .ydb-paginated-table__row:hover & {
         display: inline-block;
     }
 }
diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx
@@ -3,17 +3,17 @@ import {Button, Icon} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
-import './DeveloperUiLink.scss';
+import './DeveloperUILinkButton.scss';
 
-const b = cn('developer-ui-link');
+const b = cn('developer-ui-link-button');
 
 interface DeveloperUiLinkProps {
     className?: string;
     visible?: boolean;
     href: string;
 }
 
-export function DeveloperUiLink({href, visible = false, className}: DeveloperUiLinkProps) {
+export function DeveloperUILinkButton({href, visible = false, className}: DeveloperUiLinkProps) {
     return (
         <Button size="s" href={href} className={b({visible}, className)} target="_blank">
             <Icon data={ArrowUpRightFromSquare} />
diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
@@ -10,14 +10,14 @@
     @include body-2-typography();
 
     &__icon {
-        margin-right: 8px;
+        margin-right: var(--g-spacing-2);
     }
 
     &__clipboard-button {
         display: flex;
         flex-shrink: 0;
 
-        margin-left: 8px;
+        margin-left: var(--g-spacing-2);
 
         opacity: 0;
         color: var(--g-color-text-secondary);
@@ -28,6 +28,10 @@
         }
     }
 
+    &__additional-controls {
+        margin-left: var(--g-spacing-1);
+    }
+
     &__label {
         margin-right: 2px;
 
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
@@ -104,7 +104,9 @@ export function EntityStatus({
                     })}
                 />
             )}
-            {additionalControls}
+            {additionalControls && (
+                <span className={b('additional-controls ')}>{additionalControls}</span>
+            )}
         </div>
     );
 }
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.scss b/src/components/NodeHostWrapper/NodeHostWrapper.scss
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -1,20 +1,15 @@
-import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
-import {Button, Icon, PopoverBehavior} from '@gravity-ui/uikit';
+import {PopoverBehavior} from '@gravity-ui/uikit';
 
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {NodeAddress} from '../../types/additionalProps';
-import {cn} from '../../utils/cn';
 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';
 
-import './NodeHostWrapper.scss';
-
-const b = cn('ydb-node-host-wrapper');
-
 interface NodeHostWrapperProps {
     node: NodesPreparedEntity;
     getNodeRef?: (node?: NodeAddress) => string | null;
@@ -40,11 +35,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
           })
         : undefined;
 
-    const additionalControls = nodeHref ? (
-        <Button size="s" href={nodeHref} className={b('external-button')} target="_blank">
-            <Icon data={ArrowUpRightFromSquare} />
-        </Button>
-    ) : null;
+    const additionalControls = nodeHref ? <DeveloperUILinkButton href={nodeHref} /> : null;
 
     return (
         <CellWithPopover
diff --git a/src/containers/Tablets/Tablets.tsx b/src/containers/Tablets/Tablets.tsx
@@ -4,21 +4,21 @@ import {Icon, Label, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {DeveloperUiLink} from '../../components/DeveloperUiLink/DeveloperUiLink';
+import {DeveloperUILinkButton} from '../../components/DeveloperUILinkButton/DeveloperUILinkButton';
 import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InternalLink} from '../../components/InternalLink';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import routes, {createHref} from '../../routes';
-import {backend} from '../../store';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import type {TabletsApiRequestParams} from '../../types/store/tablets';
 import {cn} from '../../utils/cn';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
+import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {mapTabletStateToLabelTheme} from '../../utils/tablet';
 import {getDefaultNodePath} from '../Node/NodePages';
@@ -43,14 +43,20 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
     },
     {
         name: 'TabletId',
-        width: 230,
+        width: 220,
         get header() {
             return i18n('Tablet');
         },
         render: ({row}) => {
-            const tabletPath =
-                row.TabletId &&
-                createHref(routes.tablet, {id: row.TabletId}, {nodeId: row.NodeId, type: row.Type});
+            if (!row.TabletId) {
+                return EMPTY_DATA_PLACEHOLDER;
+            }
+
+            const tabletPath = createHref(
+                routes.tablet,
+                {id: row.TabletId},
+                {nodeId: row.NodeId, type: row.Type},
+            );
 
             return (
                 <EntityStatus
@@ -59,7 +65,7 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
                     hasClipboardButton
                     showStatus={false}
                     additionalControls={
-                        <DeveloperUiLink href={`${backend}/tablets?TabletID=${row.TabletId}`} />
+                        <DeveloperUILinkButton href={createTabletDeveloperUIHref(row.TabletId)} />
                     }
                 />
             );
diff --git a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx
@@ -2,17 +2,17 @@ import DataTable from '@gravity-ui/react-data-table';
 import type {Column} from '@gravity-ui/react-data-table';
 import type {Location} from 'history';
 
-import {DeveloperUiLink} from '../../../../components/DeveloperUiLink/DeveloperUiLink';
+import {DeveloperUILinkButton} from '../../../../components/DeveloperUILinkButton/DeveloperUILinkButton';
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../../components/InternalLink';
 import {LinkToSchemaObject} from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
 import routes, {createHref} from '../../../../routes';
-import {backend} from '../../../../store';
 import {getLoadSeverityForShard} from '../../../../store/reducers/tenantOverview/topShards/utils';
 import type {KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import {formatNumber, roundToPrecision} from '../../../../utils/dataFormatters/dataFormatters';
+import {createTabletDeveloperUIHref} from '../../../../utils/developerUI/developerUI';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
 export const TOP_SHARDS_COLUMNS_WIDTH_LS_KEY = 'topShardsColumnsWidth';
@@ -92,13 +92,13 @@ const tabletIdColumn: Column<KeyValueRow> = {
                 hasClipboardButton
                 showStatus={false}
                 additionalControls={
-                    <DeveloperUiLink href={`${backend}/tablets?TabletID=${row.TabletId}`} />
+                    <DeveloperUILinkButton href={createTabletDeveloperUIHref(row.TabletId)} />
                 }
             />
         );
     },
     sortable: false,
-    width: 190,
+    width: 220,
 };
 
 const nodeIdColumn: Column<KeyValueRow> = {
diff --git a/src/containers/Tenants/Tenants.scss b/src/containers/Tenants/Tenants.scss
@@ -49,10 +49,6 @@
         display: block;
     }
 
-    &__monitoring-button {
-        margin-left: 4px;
-    }
-
     &__name {
         overflow: hidden;
     }
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
@@ -116,14 +116,10 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                                 name: row.Name,
                                 backend,
                             })}
-                            additionalControls={
-                                <span className={b('monitoring-button')}>
-                                    {additionalTenantsProps?.getMonitoringLink?.(
-                                        row.Name,
-                                        row.Type,
-                                    )}
-                                </span>
-                            }
+                            additionalControls={additionalTenantsProps?.getMonitoringLink?.(
+                                row.Name,
+                                row.Type,
+                            )}
                         />
                     );
                 },
diff --git a/src/utils/developerUI/developerUI.ts b/src/utils/developerUI/developerUI.ts
@@ -40,3 +40,7 @@ export const createVDiskDeveloperUILink = ({
 
     return createDeveloperUILinkWithNodeId(nodeId, host) + vdiskPath;
 };
+
+export function createTabletDeveloperUIHref(tabletId: number | string, host = backend) {
+    return `${host}/tablets?TabletID=${tabletId}`;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,12 @@`
`1`		`-.developer-ui-link {`
	`1`	`+.developer-ui-link-button {`
`2`	`2`	`display: none;`
`3`	`3`
`4`	`4`	`&_visible {`
`5`	`5`	`display: inline-block;`
`6`	`6`	`}`
`7`	`7`
`8`		`- .data-table__row:hover & {`
	`8`	`+ .data-table__row:hover &,`
	`9`	`+ .ydb-paginated-table__row:hover & {`
`9`	`10`	`display: inline-block;`
`10`	`11`	`}`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -49,10 +49,6 @@`
`49`	`49`	`display: block;`
`50`	`50`	`}`
`51`	`51`
`52`		`- &__monitoring-button {`
`53`		`- margin-left: 4px;`
`54`		`- }`
`55`		`-`
`56`	`52`	`&__name {`
`57`	`53`	`overflow: hidden;`
`58`	`54`	`}`