Skip to content

Commit ea4d3a9

Browse files
RaubzeugRaubzeug
authored
fix(EntityStatus): remove additionalControls, fix ClipboardButton layout (#1524)
1 parent cabcb5c commit ea4d3a9

File tree

27 files changed

+306
-185
lines changed

27 files changed

+306
-185
lines changed

‎package-lock.json‎

Lines changed: 19 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@gravity-ui/paranoid": "^2.0.1",
2323
"@gravity-ui/react-data-table": "^2.1.1",
2424
"@gravity-ui/table": "^0.5.0",
25-
"@gravity-ui/uikit": "^6.20.1",
25+
"@gravity-ui/uikit": "^6.33.0",
2626
"@gravity-ui/websql-autocomplete": "^9.1.0",
2727
"@hookform/resolvers": "^3.9.0",
2828
"@reduxjs/toolkit": "^2.2.3",

‎src/components/EntityStatus/EntityStatus.scss‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import '../../styles/mixins.scss';
22

33
.entity-status {
4+
--button-width: 28px;
45
position: relative;
56

67
display: inline-flex;
78
align-items: center;
89

9-
min-width: 90px;
1010
max-width: 100%;
1111
height: 100%;
1212

@@ -20,6 +20,18 @@
2020
color: var(--g-color-text-secondary);
2121

2222
@include table-hover-appearing-button();
23+
24+
&_visible {
25+
opacity: 1;
26+
}
27+
}
28+
29+
&__wrapper {
30+
position: relative;
31+
32+
overflow: hidden;
33+
34+
padding-right: var(--button-width);
2335
}
2436

2537
&__controls-wrapper {
@@ -34,13 +46,18 @@
3446
width: 0;
3547
height: 100%;
3648

37-
background-color: var(--g-color-base-float);
49+
&_visible {
50+
width: min-content;
51+
padding: var(--g-spacing-1);
52+
}
3853

3954
.data-table__row:hover &,
4055
.ydb-paginated-table__row:hover &,
4156
.ydb-tree-view__item & {
4257
width: min-content;
4358
padding: var(--g-spacing-1);
59+
60+
background-color: var(--g-color-base-float);
4461
}
4562
}
4663

@@ -57,13 +74,18 @@
5774
}
5875

5976
&__link {
77+
display: inline-block;
6078
overflow: hidden;
6179

80+
width: calc(100% + var(--button-width));
81+
margin-top: 5px;
82+
6283
white-space: nowrap;
6384
text-overflow: ellipsis;
6485
}
6586

6687
&__link_with-left-trim {
88+
text-align: end;
6789
direction: rtl;
6890

6991
.entity-status__name {

‎src/components/EntityStatus/EntityStatus.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ interface EntityStatusProps {
2828
clipboardButtonAlwaysVisible?: boolean;
2929

3030
className?: string;
31-
32-
additionalControls?: React.ReactNode;
3331
}
3432

3533
export function EntityStatus({
@@ -50,8 +48,6 @@ export function EntityStatus({
5048
clipboardButtonAlwaysVisible = false,
5149

5250
className,
53-
54-
additionalControls,
5551
}: EntityStatusProps) {
5652
const renderIcon = () => {
5753
if (!showStatus) {
@@ -93,22 +89,29 @@ export function EntityStatus({
9389
{label}
9490
</span>
9591
)}
96-
<span className={b('link', {'with-left-trim': withLeftTrim})}>{renderLink()}</span>
97-
<div className={b('controls-wrapper')}>
98-
{hasClipboardButton && (
99-
<ClipboardButton
100-
text={name}
101-
size="xs"
102-
view="normal"
103-
className={b('clipboard-button', {
104-
visible: clipboardButtonAlwaysVisible,
105-
})}
106-
/>
107-
)}
108-
{additionalControls && (
109-
<span className={b('additional-controls')}>{additionalControls}</span>
110-
)}
111-
</div>
92+
{(path || name) && (
93+
<div className={b('wrapper')}>
94+
<span className={b('link', {'with-left-trim': withLeftTrim})}>
95+
{renderLink()}
96+
</span>
97+
{hasClipboardButton && (
98+
<div
99+
className={b('controls-wrapper', {
100+
visible: clipboardButtonAlwaysVisible,
101+
})}
102+
>
103+
<ClipboardButton
104+
text={name}
105+
size="xs"
106+
view="normal"
107+
className={b('clipboard-button', {
108+
visible: clipboardButtonAlwaysVisible,
109+
})}
110+
/>
111+
</div>
112+
)}
113+
</div>
114+
)}
112115
</div>
113116
);
114117
}

‎src/components/MonitoringButton/MonitoringButton.scss‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/MonitoringButton/MonitoringButton.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,20 @@
11
import type {ButtonSize} from '@gravity-ui/uikit';
22
import {Button, Icon} from '@gravity-ui/uikit';
33

4-
import {cn} from '../../utils/cn';
5-
64
import monitoringIcon from '../../assets/icons/monitoring.svg';
75

8-
import './MonitoringButton.scss';
9-
10-
const b = cn('kv-monitoring-button');
11-
126
interface MonitoringButtonProps {
137
className?: string;
14-
visible?: boolean;
158
href: string;
169
size?: ButtonSize;
1710
}
1811

19-
export function MonitoringButton({
20-
href,
21-
visible = false,
22-
className,
23-
size = 's',
24-
}: MonitoringButtonProps) {
12+
export function MonitoringButton({href, className, size = 'xs'}: MonitoringButtonProps) {
2513
return (
2614
<Button
2715
href={href}
2816
target="_blank"
29-
className={b({visible}, className)}
17+
className={className}
3018
size={size}
3119
title="Monitoring dashboard"
3220
>

‎src/components/NodeHostWrapper/NodeHostWrapper.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import type {TSystemStateInfo} from '../../types/api/nodes';
66
import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
77
import {isUnavailableNode} from '../../utils/nodes';
88
import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
9-
import {DeveloperUILinkButton} from '../DeveloperUILinkButton/DeveloperUILinkButton';
109
import {EntityStatus} from '../EntityStatus/EntityStatus';
1110
import {NodeEndpointsTooltipContent} from '../TooltipsContent';
1211

@@ -42,14 +41,10 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
4241
})
4342
: undefined;
4443

45-
const additionalControls = nodeHref ? (
46-
<DeveloperUILinkButton href={nodeHref} size="xs" />
47-
) : null;
48-
4944
return (
5045
<CellWithPopover
5146
disabled={!isNodeAvailable}
52-
content={<NodeEndpointsTooltipContent data={node} />}
47+
content={<NodeEndpointsTooltipContent data={node} nodeHref={nodeHref} />}
5348
placement={['top', 'bottom']}
5449
behavior={PopoverBehavior.Immediate}
5550
>
@@ -58,7 +53,6 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
5853
status={node.SystemState}
5954
path={nodePath}
6055
hasClipboardButton
61-
additionalControls={additionalControls}
6256
/>
6357
</CellWithPopover>
6458
);

‎src/components/TabletNameWrapper/TabletNameWrapper.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
2+
3+
import {getTabletPagePath} from '../../routes';
4+
import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
5+
import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
6+
import {useTypedSelector} from '../../utils/hooks';
7+
import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
8+
import {EntityStatus} from '../EntityStatus/EntityStatus';
9+
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
10+
11+
import i18n from './i18n';
12+
13+
interface TabletNameWrapperProps {
14+
tabletId: string | number;
15+
database?: string;
16+
}
17+
18+
export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
19+
const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
20+
21+
const tabletPath = getTabletPagePath(tabletId, {
22+
tenantName: database,
23+
});
24+
25+
return (
26+
<CellWithPopover
27+
disabled={!isUserAllowedToMakeChanges}
28+
content={
29+
<DefinitionList responsive>
30+
<DefinitionList.Item name={i18n('field_links')}>
31+
<LinkWithIcon
32+
title={i18n('context_developer-ui')}
33+
url={createTabletDeveloperUIHref(tabletId)}
34+
/>
35+
</DefinitionList.Item>
36+
</DefinitionList>
37+
}
38+
placement={['top', 'bottom']}
39+
behavior={PopoverBehavior.Immediate}
40+
>
41+
<EntityStatus
42+
name={tabletId.toString()}
43+
path={tabletPath}
44+
hasClipboardButton
45+
showStatus={false}
46+
/>
47+
</CellWithPopover>
48+
);
49+
}

‎src/components/TabletNameWrapper/i18n/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"field_links": "Links",
3+
"context_developer-ui": "Developer UI"
4+
}

‎src/components/TabletNameWrapper/i18n/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {registerKeysets} from '../../../utils/i18n';
2+
3+
import en from './en.json';
4+
5+
const COMPONENT = 'ydb-tablet-name-wrapper';
6+
7+
export default registerKeysets(COMPONENT, {en});

0 commit comments

Comments
 (0)