hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix: remove excessive scrollbars from the TabLayout view (#6689)

Browse Source 
* Remove excessive scrollbars from the TabLayout view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating snapshots harder

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-12-01 17:32:41 +03:00 committed by GitHub
parent 87035dd49a
commit 33e6771da3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 331 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
View File

@ -272,7 +272,9 @@ exports[`legacy extension adding cluster frame components given custom component
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

8
src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
View File

@ -327,7 +327,9 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -942,7 +944,9 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

20
src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
View File

@ -300,7 +300,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -836,7 +838,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1392,7 +1396,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -2799,7 +2805,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -3335,7 +3343,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

32
src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
View File

@ -300,7 +300,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -836,7 +838,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1408,7 +1412,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1994,7 +2000,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="some-child-page" data-testid="some-child-page"
> >
@ -2485,7 +2493,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="some-other-child-page" data-testid="some-other-child-page"
> >
@ -2939,7 +2949,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="some-child-page" data-testid="some-child-page"
> >
@ -3416,7 +3428,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -3952,7 +3966,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

8
src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
View File

@ -272,7 +272,9 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -820,7 +822,9 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

4
src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
View File

@ -286,7 +286,9 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

8
src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -663,7 +663,9 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1173,7 +1175,9 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

12
src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -291,7 +291,9 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -801,7 +803,9 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1311,7 +1315,9 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

64
src/features/cluster/namespaces/__snapshots__/edit-namespace-from-new-tab.test.tsx.snap
View File

@ -281,7 +281,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -919,7 +921,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -1562,7 +1566,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -2274,7 +2280,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -2964,7 +2972,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -3726,7 +3736,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -4490,7 +4502,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -5216,7 +5230,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -5937,7 +5953,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -6649,7 +6667,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -7361,7 +7381,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -8073,7 +8095,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -8620,7 +8644,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -9341,7 +9367,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -9888,7 +9916,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >
@ -10435,7 +10465,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout" class="TabLayout"
data-testid="tab-layout" data-testid="tab-layout"
> >
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column KubeObjectListLayout Namespaces" class="ItemListLayout flex column KubeObjectListLayout Namespaces"
> >

8
src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
View File

@ -298,7 +298,9 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -843,7 +845,9 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

12
src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -273,7 +273,9 @@ exports[`disable workloads overview details when cluster is not relevant given e
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -788,7 +790,9 @@ exports[`disable workloads overview details when cluster is not relevant given e
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1298,7 +1302,9 @@ exports[`disable workloads overview details when cluster is not relevant given n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

84
src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
View File

@ -273,7 +273,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -715,7 +717,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -1628,7 +1632,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -2386,7 +2392,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -3388,7 +3396,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -4364,7 +4374,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -5335,7 +5347,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -6306,7 +6320,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -7299,7 +7315,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -8301,7 +8319,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -9272,7 +9292,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -10298,7 +10320,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -11136,7 +11160,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -11909,7 +11935,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -12760,7 +12788,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -13977,7 +14007,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -14787,7 +14819,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -15812,7 +15846,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -16835,7 +16871,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -17806,7 +17844,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -18777,7 +18817,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"

8
src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
View File

@ -273,7 +273,9 @@ exports[`installing helm chart from previously opened tab given tab for installi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -793,7 +795,9 @@ exports[`installing helm chart from previously opened tab given tab for installi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

32
src/features/helm-charts/installing-chart/__snapshots__/opening-dock-tab-for-installing-helm-chart.test.ts.snap
View File

@ -286,7 +286,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -783,7 +785,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -1450,7 +1454,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -2174,7 +2180,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -3081,7 +3089,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -3998,7 +4008,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -4905,7 +4917,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"
@ -5822,7 +5836,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
data-testid="page-for-helm-charts" data-testid="page-for-helm-charts"
style="display: none;" style="display: none;"

28
src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
View File

@ -286,7 +286,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -946,7 +948,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -1703,7 +1707,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -2514,7 +2520,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -3361,7 +3369,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -4348,7 +4358,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -5337,7 +5349,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >

64
src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
View File

@ -286,7 +286,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -1027,7 +1029,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -1773,7 +1777,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -2697,7 +2703,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -3682,7 +3690,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -4667,7 +4677,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -5897,7 +5909,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -7127,7 +7141,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -8357,7 +8373,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -9404,7 +9422,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -10453,7 +10473,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -11683,7 +11705,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -12668,7 +12692,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -13656,7 +13682,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -14580,7 +14608,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >
@ -15565,7 +15595,9 @@ exports[`showing details for helm release given application is started when navi
</div> </div>
</div> </div>
</div> </div>
<main> <main
class=""
>
<div <div
class="ItemListLayout flex column HelmReleases" class="ItemListLayout flex column HelmReleases"
> >

8
src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
View File

@ -273,7 +273,9 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"
@ -1126,7 +1128,9 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"

2
src/renderer/components/+cluster/cluster-overview.tsx
View File

@ -102,7 +102,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
const isMetricHidden = hostedCluster.isMetricHidden(ClusterMetricsResourceType.Cluster); const isMetricHidden = hostedCluster.isMetricHidden(ClusterMetricsResourceType.Cluster);
return ( return (
<TabLayout> <TabLayout scrollable>
<div className={styles.ClusterOverview} data-testid="cluster-overview-page"> <div className={styles.ClusterOverview} data-testid="cluster-overview-page">
{this.renderClusterOverview(isLoaded, isMetricHidden)} {this.renderClusterOverview(isLoaded, isMetricHidden)}
</div> </div>

2
src/renderer/components/+workloads-overview/overview.tsx
View File

@ -103,7 +103,7 @@ class NonInjectedWorkloadsOverview extends React.Component<Dependencies> {
render() { render() {
return ( return (
<SiblingsInTabLayout> <SiblingsInTabLayout scrollable>
<div className="WorkloadsOverview flex column gaps" data-testid="page-for-workloads-overview"> <div className="WorkloadsOverview flex column gaps" data-testid="page-for-workloads-overview">
<div className="header flex gaps align-center"> <div className="header flex gaps align-center">
<h5 className="box grow">Overview</h5> <h5 className="box grow">Overview</h5>

2
src/renderer/components/item-object-list/item-list-layout.scss
View File

@ -31,7 +31,7 @@
> .items { > .items {
position: relative; position: relative;
min-height: 200px; min-height: 130px;
} }
} }

4
src/renderer/components/layout/main-layout.module.scss
View File

@ -23,9 +23,7 @@
} }
.contents { .contents {
grid-area: contents; overflow: hidden;
overflow: auto;
height: calc(100vh - var(--status-bar-height) - var(--main-layout-header));
} }
.footer { .footer {

4
src/renderer/components/layout/siblings-in-tab-layout.tsx
View File

@ -12,6 +12,7 @@ import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
interface SiblingTabLayoutProps { interface SiblingTabLayoutProps {
children: React.ReactNode; children: React.ReactNode;
scrollable?: boolean;
} }
interface Dependencies { interface Dependencies {
@ -19,13 +20,14 @@ interface Dependencies {
} }
const NonInjectedSiblingsInTabLayout = observer( const NonInjectedSiblingsInTabLayout = observer(
({ tabs, children }: Dependencies & SiblingTabLayoutProps) => { ({ tabs, children, ...other }: Dependencies & SiblingTabLayoutProps) => {
const dereferencedTabs = tabs.get(); const dereferencedTabs = tabs.get();
if (dereferencedTabs.length) { if (dereferencedTabs.length) {
return ( return (
<TabLayout <TabLayout
tabs={dereferencedTabs} tabs={dereferencedTabs}
{...other}
> >
{children} {children}
</TabLayout> </TabLayout>

4
src/renderer/components/layout/tab-layout-2.tsx
View File

@ -15,11 +15,13 @@ import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
export interface TabLayoutProps { export interface TabLayoutProps {
tabs?: HierarchicalSidebarItem[]; tabs?: HierarchicalSidebarItem[];
children?: React.ReactNode; children?: React.ReactNode;
scrollable?: boolean;
} }
export const TabLayout = observer( export const TabLayout = observer(
({ ({
tabs = [], tabs = [],
scrollable,
children, children,
}: TabLayoutProps) => { }: TabLayoutProps) => {
const hasTabs = tabs.length > 0; const hasTabs = tabs.length > 0;
@ -50,7 +52,7 @@ export const TabLayout = observer(
</Tabs> </Tabs>
)} )}
<main> <main className={cssNames({ scrollable })}>
<ErrorBoundary> <ErrorBoundary>
{children} {children}
</ErrorBoundary> </ErrorBoundary>

10
src/renderer/components/layout/tab-layout.scss
View File

@ -11,16 +11,20 @@
> .Tabs { > .Tabs {
background: var(--layoutTabsBackground); background: var(--layoutTabsBackground);
min-height: 32px; min-height: 36px;
} }
main { main {
$spacing: $margin * 2; $spacing: $margin * 2;
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; // always reserve space for scrollbar (17px) overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
margin: $spacing; margin: $spacing;
margin-right: 0;
&.scrollable {
overflow-y: scroll;
margin-right: 0;
}
} }
} }

5
src/renderer/components/layout/tab-layout.tsx
View File

@ -20,6 +20,7 @@ export interface TabLayoutProps {
contentClass?: IClassName; contentClass?: IClassName;
tabs?: TabLayoutRoute[]; tabs?: TabLayoutRoute[];
children?: ReactNode; children?: ReactNode;
scrollable?: boolean;
} }
export interface TabLayoutRoute { export interface TabLayoutRoute {
@ -31,7 +32,7 @@ export interface TabLayoutRoute {
default?: boolean; // initial tab to open with provided `url, by default tabs[0] is used default?: boolean; // initial tab to open with provided `url, by default tabs[0] is used
} }
export const TabLayout = observer(({ className, contentClass, tabs = [], children }: TabLayoutProps) => { export const TabLayout = observer(({ className, contentClass, tabs = [], scrollable, children }: TabLayoutProps) => {
const currentLocation = navigation.location.pathname; const currentLocation = navigation.location.pathname;
const hasTabs = tabs.length > 0; const hasTabs = tabs.length > 0;
const startTabUrl = hasTabs ? (tabs.find(tab => tab.default) || tabs[0])?.url : null; const startTabUrl = hasTabs ? (tabs.find(tab => tab.default) || tabs[0])?.url : null;
@ -50,7 +51,7 @@ export const TabLayout = observer(({ className, contentClass, tabs = [], childre
))} ))}
</Tabs> </Tabs>
)} )}
<main className={cssNames(contentClass)}> <main className={cssNames(contentClass, { scrollable })}>
<ErrorBoundary> <ErrorBoundary>
{hasTabs && ( {hasTabs && (
<Switch> <Switch>

4
src/renderer/components/table/table.scss
View File

@ -14,6 +14,10 @@
overflow: auto; overflow: auto;
} }
&.scrollable.virtual {
overflow: unset;
}
&.selectable { &.selectable {
.TableHead, .TableRow { .TableHead, .TableRow {
padding: 0 $padding; padding: 0 $padding;

6
src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
View File

@ -786,7 +786,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
class="TabLayout" class="TabLayout"
> >
<main <main
class="" class="scrollable"
> >
<div <div
class="ClusterOverview" class="ClusterOverview"
@ -1228,7 +1228,9 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
</div> </div>
</div> </div>
</div> </div>
<main> <main
class="scrollable"
>
<div <div
class="WorkloadsOverview flex column gaps" class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview" data-testid="page-for-workloads-overview"