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
master
asdasd
better-release-script
bundled-extensions-update
catalog-entity-detail-registry
consolidate-running-of-setups-on-application-start
dependabot/npm_and_yarn/react-select-5.3.2
dependabot/npm_and_yarn/react-window-1.8.7
dependabot/npm_and_yarn/types/node-14.18.16
dependabot/npm_and_yarn/types/webpack-env-1.16.4
di-stores
docs/api-all-exported
enhancement-node-vertical-metric-bars
enhancement/group-app-preferences-by-extension
entity-settings
extension-auto-update
extension-dir
extension-discovery-changes
extension-startup
extensions/lens-version-check
feature/auto-update
feature/context-providers
fix-change-os-theme-crash
fix-linter-errors
fix-optimise-update-events-from-buffer
fix-reload-list-items-on-mount
fix-remove-watch-flush-headers
fix-reseting-select-value
fix-resource-applier
fix/consistent-inputs
fix/log-store-loading
fix/ns-selector-performance-issue
fix/pod-logs-storage
fix/search_input_autofocus
front-end-routes-ocp
front-end-routes-ocp-2
front-end-routes-ocp-3
helm-repo-manager
helm-repo-manager-removal
helm-routes
issue-1909
issue-3498
issue-3797
issue-4633
issue-4766
issue-4829
issue-4997
issue-5141
issue-5165
issue-5173
issue-5177
issue-5238
more-places-to-check-for-updates
prometheus/victoria-metrics-single
release/v5.4
remove-unused-telemetry
show-extension-preferences-in-separate-page
single-logger
squashed-update-injectable
testing/virtual-select
top-bar-registry
turn-on-strict
ui-table-empty-state-lines
update-bundled-extensions
update-electon-builder-to-3-0-8
validate-cluster-model
websocket-catalog-sync
welcome-menu-registry
v5.5.0-beta.0
v5.4.6
v5.4.5
v5.4.4
v5.4.3
v5.4.2
v5.4.1
v5.4.0
v5.4.0-beta.5
v5.4.0-beta.4
v5.4.0-beta.3
v5.4.0-beta.2
v5.4.0-beta.1
v5.4.0-beta.0
v5.4.0-alpha.1
v5.4.0-alpha.0
No related merge requests found
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