Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
小 白蛋
Lens
Commits
541c00cf
Unverified
Commit
541c00cf
authored
3 years ago
by
Sebastian Malton
Committed by
GitHub
3 years ago
Browse files
Options
Download
Email Patches
Plain Diff
Add tooltip for cluster name in sidebar (#4534)
parent
3dd6b432
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx
+11
-4
...erer/components/layout/__tests__/sidebar-cluster.test.tsx
src/renderer/components/layout/sidebar-cluster.module.css
+48
-1
src/renderer/components/layout/sidebar-cluster.module.css
src/renderer/components/layout/sidebar-cluster.tsx
+21
-2
src/renderer/components/layout/sidebar-cluster.tsx
with
80 additions
and
7 deletions
+80
-7
src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx
+
11
-
4
View file @
541c00cf
...
...
@@ -57,18 +57,25 @@ describe("<SidebarCluster/>", () => {
});
it
(
"
renders cluster avatar and name
"
,
()
=>
{
const
{
getByText
}
=
render
(<
SidebarCluster
clusterEntity
=
{
clusterEntity
}
/>);
const
{
getByText
,
getAllByText
}
=
render
(<
SidebarCluster
clusterEntity
=
{
clusterEntity
}
/>);
expect
(
getByText
(
"
tc
"
)).
toBeInTheDocument
();
expect
(
getByText
(
"
test-cluster
"
)).
toBeInTheDocument
();
const
v
=
getAllByText
(
"
test-cluster
"
);
expect
(
v
.
length
).
toBeGreaterThan
(
0
);
for
(
const
e
of
v
)
{
expect
(
e
).
toBeInTheDocument
();
}
});
it
(
"
renders cluster menu
"
,
async
()
=>
{
it
(
"
renders cluster menu
"
,
()
=>
{
const
{
getByTestId
,
getByText
}
=
render
(<
SidebarCluster
clusterEntity
=
{
clusterEntity
}
/>);
const
link
=
getByTestId
(
"
sidebar-cluster-dropdown
"
);
fireEvent
.
click
(
link
);
expect
(
await
getByText
(
"
Add to Hotbar
"
)).
toBeInTheDocument
();
expect
(
getByText
(
"
Add to Hotbar
"
)).
toBeInTheDocument
();
});
});
This diff is collapsed.
Click to expand it.
src/renderer/components/layout/sidebar-cluster.module.css
+
48
-
1
View file @
541c00cf
...
...
@@ -61,4 +61,51 @@
.avatar
{
font-weight
:
500
;
margin-right
:
1.25rem
;
}
\ No newline at end of file
}
.loadingAvatar
{
position
:
relative
;
pointer-events
:
none
;
&:after
{
content
:
""
;
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
0
;
height
:
100%
;
background
:
transparentize
(
white
,
.85
);
animation
:
waiting
1.5s
infinite
linear
;
}
}
.loadingClusterName
{
position
:
relative
;
pointer-events
:
none
;
width
:
80%
;
height
:
16px
;
&:after
{
content
:
""
;
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
0
;
height
:
100%
;
background
:
transparentize
(
white
,
.85
);
animation
:
waiting
1.5s
infinite
linear
;
}
}
@keyframes
waiting
{
0
%
{
left
:
0
;
width
:
0
;
}
50
%
{
left
:
25%
;
width
:
75%
;
}
75
%
{
left
:
100%
;
width
:
0
;
}
}
This diff is collapsed.
Click to expand it.
src/renderer/components/layout/sidebar-cluster.tsx
+
21
-
2
View file @
541c00cf
...
...
@@ -31,6 +31,7 @@ import { Icon } from "../icon";
import
{
navigate
}
from
"
../../navigation
"
;
import
{
Menu
,
MenuItem
}
from
"
../menu
"
;
import
{
ConfirmDialog
}
from
"
../confirm-dialog
"
;
import
{
Tooltip
}
from
"
../tooltip
"
;
const
contextMenu
:
CatalogEntityContextMenuContext
=
observable
({
menuItems
:
[],
...
...
@@ -60,11 +61,25 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
}
}
function
renderLoadingSidebarCluster
()
{
return
(
<
div
className
=
{
styles
.
SidebarCluster
}
>
<
Avatar
title
=
"??"
background
=
"var(--halfGray)"
size
=
{
40
}
className
=
{
styles
.
loadingAvatar
}
/>
<
div
className
=
{
styles
.
loadingClusterName
}
/>
</
div
>
);
}
export
function
SidebarCluster
({
clusterEntity
}:
{
clusterEntity
:
CatalogEntity
})
{
const
[
opened
,
setOpened
]
=
useState
(
false
);
if
(
!
clusterEntity
)
{
return
null
;
return
renderLoadingSidebarCluster
()
;
}
const
onMenuOpen
=
()
=>
{
...
...
@@ -95,6 +110,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
const
{
metadata
,
spec
}
=
clusterEntity
;
const
id
=
`cluster-
${
metadata
.
uid
}
`
;
const
tooltipId
=
`tooltip-
${
id
}
`
;
return
(
<
div
...
...
@@ -112,9 +128,12 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
src
=
{
spec
.
icon
?.
src
}
className
=
{
styles
.
avatar
}
/>
<
div
className
=
{
styles
.
clusterName
}
>
<
div
className
=
{
styles
.
clusterName
}
id
=
{
tooltipId
}
>
{
metadata
.
name
}
</
div
>
<
Tooltip
targetId
=
{
tooltipId
}
>
{
metadata
.
name
}
</
Tooltip
>
<
Icon
material
=
"arrow_drop_down"
className
=
{
styles
.
dropdown
}
/>
<
Menu
usePortal
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Projects
Groups
Snippets
Help