From aedcded8228ced1a77d84b7e28cf7d512f37fb2d Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Mon, 17 Oct 2022 15:49:32 +0300
Subject: [PATCH] Remove duplication from preference pages

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 ...elm-repository-in-preferences.test.ts.snap | 108 ++++++++----------
 ...tory-from-list-in-preferences.test.ts.snap |  90 +++++++--------
 ...m-repositories-in-preferences.test.ts.snap |  90 +++++++--------
 ...ive-repository-in-preferences.test.ts.snap |  36 +++---
 .../closing-preferences.test.tsx.snap         |  22 ++--
 ...nsion-adding-preference-tabs.test.tsx.snap |   9 +-
 .../hiding-of-empty-branches.test.tsx.snap    |  24 ++--
 ...on-to-application-preferences.test.ts.snap |  18 ++-
 ...igation-to-editor-preferences.test.ts.snap |  20 ++--
 ...tension-specific-preferences.test.tsx.snap |  18 ++-
 ...ion-to-kubernetes-preferences.test.ts.snap |  18 ++-
 ...vigation-to-proxy-preferences.test.ts.snap |  18 ++-
 ...ion-to-telemetry-preferences.test.tsx.snap |  36 +++---
 ...ation-to-terminal-preferences.test.ts.snap |  18 ++-
 ...gation-using-application-menu.test.ts.snap |   9 +-
 .../navigation-using-tray.test.ts.snap        |   9 +-
 ...igation-to-application-preferences.test.ts |   4 +-
 .../navigation-to-editor-preferences.test.ts  |   4 +-
 ...vigation-to-kubernetes-preferences.test.ts |   4 +-
 .../navigation-to-proxy-preferences.test.ts   |   4 +-
 ...vigation-to-telemetry-preferences.test.tsx |   4 +-
 ...navigation-to-terminal-preferences.test.ts |   4 +-
 .../navigation-using-application-menu.test.ts |   4 +-
 .../preferences/navigation-using-tray.test.ts |   4 +-
 .../renderer/get-preference-page.tsx          |  14 +++
 ...application-preference-page.injectable.tsx |   4 +-
 .../application-preference-page.tsx           |  14 ---
 .../editor-preference-page.injectable.ts      |   4 +-
 .../editor/editor-preference-page.tsx         |  14 ---
 .../kubernetes/kubernetes-page.tsx            |  14 ---
 .../kubernetes-preference-page.injectable.tsx |   4 +-
 .../preference-item-injection-token.ts        |  11 +-
 .../proxy-preference-page.injectable.tsx      |   4 +-
 .../proxy/proxy-preference-page.tsx           |  14 ---
 .../telemetry/telemetry-page.tsx              |  14 ---
 .../telemetry-preference-page.injectable.tsx  |   4 +-
 ...rminal-page-preference-item.injectable.tsx |   4 +-
 .../terminal/terminal-page.tsx                |  14 ---
 .../preferences/renderer/preferences.tsx      |  34 ++++--
 39 files changed, 314 insertions(+), 428 deletions(-)
 create mode 100644 src/features/preferences/renderer/get-preference-page.tsx
 delete mode 100644 src/features/preferences/renderer/preference-items/application/application-preference-page.tsx
 delete mode 100644 src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx
 delete mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx
 delete mode 100644 src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx
 delete mode 100644 src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx
 delete mode 100644 src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx

diff --git a/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
index 4016e3a837..da7e454080 100644
--- a/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
@@ -87,6 +87,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -162,12 +163,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -685,6 +684,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -760,12 +760,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1294,6 +1292,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -1369,12 +1368,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -2014,6 +2011,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -2089,12 +2087,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -2631,6 +2627,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -2706,12 +2703,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -3351,6 +3346,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -3426,12 +3422,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -4253,6 +4247,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -4328,12 +4323,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -4973,6 +4966,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -5048,12 +5042,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -5875,6 +5867,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -5950,12 +5943,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -6596,6 +6587,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -6671,12 +6663,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -7213,6 +7203,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -7288,12 +7279,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -7819,6 +7808,7 @@ exports[`add custom helm repository in preferences when navigating to preference
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -7894,12 +7884,10 @@ exports[`add custom helm repository in preferences when navigating to preference
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
diff --git a/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
index c9e037260c..4bbfeefa0a 100644
--- a/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
@@ -87,6 +87,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -162,12 +163,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -685,6 +684,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -760,12 +760,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1294,6 +1292,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -1369,12 +1368,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1956,6 +1953,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -2031,12 +2029,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -2565,6 +2561,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -2640,12 +2637,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -3174,6 +3169,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -3249,12 +3245,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -3772,6 +3766,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -3847,12 +3842,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -4415,6 +4408,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -4490,12 +4484,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -5121,6 +5113,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -5196,12 +5189,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -5764,6 +5755,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -5839,12 +5831,10 @@ exports[`add helm repository from list in preferences when navigating to prefere
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
diff --git a/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
index ba598a2c44..9757270629 100644
--- a/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
@@ -87,6 +87,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -162,12 +163,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -685,6 +684,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -760,12 +760,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1283,6 +1281,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -1358,12 +1357,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1773,6 +1770,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -1848,12 +1846,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -2371,6 +2367,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -2446,12 +2443,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -2861,6 +2856,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -2936,12 +2932,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -3459,6 +3453,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -3534,12 +3529,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -4102,6 +4095,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -4177,12 +4171,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -4592,6 +4584,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -4667,12 +4660,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -5082,6 +5073,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -5157,12 +5149,10 @@ exports[`listing active helm repositories in preferences when navigating to pref
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
diff --git a/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
index 0b076e5dae..343830b5c6 100644
--- a/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
@@ -87,6 +87,7 @@ exports[`remove helm repository from list of active repositories in preferences
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -162,12 +163,10 @@ exports[`remove helm repository from list of active repositories in preferences
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -685,6 +684,7 @@ exports[`remove helm repository from list of active repositories in preferences
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -760,12 +760,10 @@ exports[`remove helm repository from list of active repositories in preferences
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1294,6 +1292,7 @@ exports[`remove helm repository from list of active repositories in preferences
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -1369,12 +1368,10 @@ exports[`remove helm repository from list of active repositories in preferences
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
@@ -1903,6 +1900,7 @@ exports[`remove helm repository from list of active repositories in preferences
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -1978,12 +1976,10 @@ exports[`remove helm repository from list of active repositories in preferences
               class="content"
             >
               <section
-                data-preference-page-test="kubernetes"
-                id="kubernetes"
+                data-preference-page-test="kubernetes-page"
+                id="kubernetes-page"
               >
-                <h2
-                  data-testid="kubernetes-header"
-                >
+                <h2>
                   Kubernetes
                 </h2>
                 <section
diff --git a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
index 665787a5d9..1eb9a2d891 100644
--- a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -86,6 +86,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -173,12 +174,10 @@ exports[`preferences - closing-preferences given accessing preferences directly
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -744,7 +743,6 @@ exports[`preferences - closing-preferences given accessing preferences directly
       />
       <div
         class="SettingLayout showNavigation Preferences"
-        data-testid="some-test-id-for-some-test-tab-id"
       >
         <nav
           class="sidebarRegion"
@@ -757,6 +755,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -1315,6 +1314,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -1402,12 +1402,10 @@ exports[`preferences - closing-preferences given already in a page and then navi
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -1973,7 +1971,6 @@ exports[`preferences - closing-preferences given already in a page and then navi
       />
       <div
         class="SettingLayout showNavigation Preferences"
-        data-testid="some-test-id-for-some-test-tab-id"
       >
         <nav
           class="sidebarRegion"
@@ -1986,6 +1983,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
diff --git a/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap b/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
index 0686607919..442cdbecc8 100644
--- a/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
@@ -87,6 +87,7 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -162,12 +163,10 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
               class="content"
             >
               <section
-                data-preference-page-test="application"
-                id="application"
+                data-preference-page-test="application-page"
+                id="application-page"
               >
-                <h2
-                  data-testid="application-header"
-                >
+                <h2>
                   Application
                 </h2>
                 <section
diff --git a/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap b/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
index 15f73f4f6b..82505f0f93 100644
--- a/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
@@ -163,12 +163,10 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -840,12 +838,10 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -1529,12 +1525,10 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
diff --git a/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index 9bc496de2f..06df2df244 100644
--- a/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -86,6 +86,7 @@ exports[`preferences - navigation to application preferences given in some child
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -161,12 +162,10 @@ exports[`preferences - navigation to application preferences given in some child
             class="content"
           >
             <section
-              data-preference-page-test="proxy"
-              id="proxy"
+              data-preference-page-test="proxy-page"
+              id="proxy-page"
             >
-              <h2
-                data-testid="proxy-header"
-              >
+              <h2>
                 Proxy
               </h2>
               <section>
@@ -416,6 +415,7 @@ exports[`preferences - navigation to application preferences given in some child
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -491,12 +491,10 @@ exports[`preferences - navigation to application preferences given in some child
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
diff --git a/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index c6fb8a1891..c9f0bc5d79 100644
--- a/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -86,6 +86,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -161,12 +162,10 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -744,6 +743,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -819,13 +819,11 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
             class="content"
           >
             <section
-              data-preference-page-test="editor"
-              id="editor"
+              data-preference-page-test="editor-page"
+              id="editor-page"
             >
-              <h2
-                data-testid="editor-configuration-header"
-              >
-                Editor configuration
+              <h2>
+                Editor
               </h2>
               <section>
                 <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index e6c9e50f12..c782514e5e 100644
--- a/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -1388,6 +1388,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -1463,12 +1464,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -2046,6 +2045,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -2121,12 +2121,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
diff --git a/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
index a1ce389ca6..f155759306 100644
--- a/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
@@ -86,6 +86,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -161,12 +162,10 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -744,6 +743,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -819,12 +819,10 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
             class="content"
           >
             <section
-              data-preference-page-test="kubernetes"
-              id="kubernetes"
+              data-preference-page-test="kubernetes-page"
+              id="kubernetes-page"
             >
-              <h2
-                data-testid="kubernetes-header"
-              >
+              <h2>
                 Kubernetes
               </h2>
               <section
diff --git a/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index 6d21b42997..2399d508e6 100644
--- a/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -86,6 +86,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -161,12 +162,10 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -744,6 +743,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -819,12 +819,10 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
             class="content"
           >
             <section
-              data-preference-page-test="proxy"
-              id="proxy"
+              data-preference-page-test="proxy-page"
+              id="proxy-page"
             >
-              <h2
-                data-testid="proxy-header"
-              >
+              <h2>
                 Proxy
               </h2>
               <section>
diff --git a/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index 2740cbabd7..9045d0c09e 100644
--- a/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -86,6 +86,7 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -173,12 +174,10 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
             class="content"
           >
             <section
-              data-preference-page-test="telemetry"
-              id="telemetry"
+              data-preference-page-test="telemetry-page"
+              id="telemetry-page"
             >
-              <h2
-                data-testid="telemetry-header"
-              >
+              <h2>
                 Telemetry
               </h2>
               <div
@@ -403,6 +402,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -478,12 +478,10 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -1061,6 +1059,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -1136,12 +1135,10 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -2026,6 +2023,7 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -2101,12 +2099,10 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
             class="content"
           >
             <section
-              data-preference-page-test="telemetry"
-              id="telemetry"
+              data-preference-page-test="telemetry-page"
+              id="telemetry-page"
             >
-              <h2
-                data-testid="telemetry-header"
-              >
+              <h2>
                 Telemetry
               </h2>
             </section>
diff --git a/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index 3f0cff7a8e..9792445da8 100644
--- a/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -86,6 +86,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -161,12 +162,10 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
@@ -744,6 +743,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -819,12 +819,10 @@ exports[`preferences - navigation to terminal preferences given in preferences,
             class="content"
           >
             <section
-              data-preference-page-test="terminal"
-              id="terminal"
+              data-preference-page-test="terminal-page"
+              id="terminal-page"
             >
-              <h2
-                data-testid="terminal-header"
-              >
+              <h2>
                 Terminal
               </h2>
               <section
diff --git a/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index 1f93f2cea9..3b1fcbfdf1 100644
--- a/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -304,6 +304,7 @@ exports[`preferences - navigation using application menu when navigating to pref
             >
               <div
                 class="header flex items-center"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
@@ -379,12 +380,10 @@ exports[`preferences - navigation using application menu when navigating to pref
             class="content"
           >
             <section
-              data-preference-page-test="application"
-              id="application"
+              data-preference-page-test="application-page"
+              id="application-page"
             >
-              <h2
-                data-testid="application-header"
-              >
+              <h2>
                 Application
               </h2>
               <section
diff --git a/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap b/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
index 517640929e..e1e643d91f 100644
--- a/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
@@ -307,6 +307,7 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
               >
                 <div
                   class="header flex items-center"
+                  data-preference-tab-group-test="general-tab-group"
                 >
                   Preferences
                 </div>
@@ -382,12 +383,10 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
               class="content"
             >
               <section
-                data-preference-page-test="application"
-                id="application"
+                data-preference-page-test="application-page"
+                id="application-page"
               >
-                <h2
-                  data-testid="application-header"
-                >
+                <h2>
                   Application
                 </h2>
                 <section
diff --git a/src/features/preferences/navigation-to-application-preferences.test.ts b/src/features/preferences/navigation-to-application-preferences.test.ts
index 464f905a27..70481bfea2 100644
--- a/src/features/preferences/navigation-to-application-preferences.test.ts
+++ b/src/features/preferences/navigation-to-application-preferences.test.ts
@@ -35,7 +35,7 @@ describe("preferences - navigation to application preferences", () => {
     it("does not show application preferences yet", () => {
       const page = querySingleElement(
         "preference-page",
-        "application",
+        "application-page",
       )(rendered);
 
       expect(page).toBeNull();
@@ -53,7 +53,7 @@ describe("preferences - navigation to application preferences", () => {
       it("shows application preferences", () => {
         const page = getSingleElement(
           "preference-page",
-          "application",
+          "application-page",
         )(rendered);
 
         expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-to-editor-preferences.test.ts b/src/features/preferences/navigation-to-editor-preferences.test.ts
index 1874e02f19..10a5dd42cb 100644
--- a/src/features/preferences/navigation-to-editor-preferences.test.ts
+++ b/src/features/preferences/navigation-to-editor-preferences.test.ts
@@ -31,7 +31,7 @@ describe("preferences - navigation to editor preferences", () => {
     it("does not show editor preferences yet", () => {
       const page = querySingleElement(
         "preference-page",
-        "editor",
+        "editor-page",
       )(rendered);
 
       expect(page).toBeNull();
@@ -49,7 +49,7 @@ describe("preferences - navigation to editor preferences", () => {
       it("shows editor preferences", () => {
         const page = getSingleElement(
           "preference-page",
-          "editor",
+          "editor-page",
         )(rendered);
 
         expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-to-kubernetes-preferences.test.ts b/src/features/preferences/navigation-to-kubernetes-preferences.test.ts
index bf5a316bd4..b4cf800c12 100644
--- a/src/features/preferences/navigation-to-kubernetes-preferences.test.ts
+++ b/src/features/preferences/navigation-to-kubernetes-preferences.test.ts
@@ -45,7 +45,7 @@ describe("preferences - navigation to kubernetes preferences", () => {
     it("does not show kubernetes preferences yet", () => {
       const page = querySingleElement(
         "preference-page",
-        "kubernetes",
+        "kubernetes-page",
       )(rendered);
 
       expect(page).toBeNull();
@@ -63,7 +63,7 @@ describe("preferences - navigation to kubernetes preferences", () => {
       it("shows kubernetes preferences", () => {
         const page = getSingleElement(
           "preference-page",
-          "kubernetes",
+          "kubernetes-page",
         )(rendered);
 
         expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-to-proxy-preferences.test.ts b/src/features/preferences/navigation-to-proxy-preferences.test.ts
index 3bbb483196..5df43a7e16 100644
--- a/src/features/preferences/navigation-to-proxy-preferences.test.ts
+++ b/src/features/preferences/navigation-to-proxy-preferences.test.ts
@@ -32,7 +32,7 @@ describe("preferences - navigation to proxy preferences", () => {
     it("does not show proxy preferences yet", () => {
       const page = querySingleElement(
         "preference-page",
-        "proxy",
+        "proxy-page",
       )(rendered);
 
       expect(page).toBeNull();
@@ -50,7 +50,7 @@ describe("preferences - navigation to proxy preferences", () => {
       it("shows proxy preferences", () => {
         const page = getSingleElement(
           "preference-page",
-          "proxy",
+          "proxy-page",
         )(rendered);
 
         expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-to-telemetry-preferences.test.tsx b/src/features/preferences/navigation-to-telemetry-preferences.test.tsx
index b5c8b18ff8..5997814336 100644
--- a/src/features/preferences/navigation-to-telemetry-preferences.test.tsx
+++ b/src/features/preferences/navigation-to-telemetry-preferences.test.tsx
@@ -36,7 +36,7 @@ describe("preferences - navigation to telemetry preferences", () => {
     it("does not show telemetry preferences yet", () => {
       const page = querySingleElement(
         "preference-page",
-        "telemetry",
+        "telemetry-page",
       )(rendered);
 
       expect(page).toBeNull();
@@ -77,7 +77,7 @@ describe("preferences - navigation to telemetry preferences", () => {
         it("shows telemetry preferences", () => {
           const page = getSingleElement(
             "preference-page",
-            "telemetry",
+            "telemetry-page",
           )(rendered);
 
           expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-to-terminal-preferences.test.ts b/src/features/preferences/navigation-to-terminal-preferences.test.ts
index 7920a8c297..58d8388137 100644
--- a/src/features/preferences/navigation-to-terminal-preferences.test.ts
+++ b/src/features/preferences/navigation-to-terminal-preferences.test.ts
@@ -32,7 +32,7 @@ describe("preferences - navigation to terminal preferences", () => {
     it("does not show terminal preferences yet", () => {
       const page = querySingleElement(
         "preference-page",
-        "terminal",
+        "terminal-page",
       )(rendered);
 
       expect(page).toBeNull();
@@ -51,7 +51,7 @@ describe("preferences - navigation to terminal preferences", () => {
       it("shows terminal preferences", () => {
         const page = getSingleElement(
           "preference-page",
-          "terminal",
+          "terminal-page",
         )(rendered);
 
         expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-using-application-menu.test.ts b/src/features/preferences/navigation-using-application-menu.test.ts
index fdcfe6e983..c08f4fab10 100644
--- a/src/features/preferences/navigation-using-application-menu.test.ts
+++ b/src/features/preferences/navigation-using-application-menu.test.ts
@@ -25,7 +25,7 @@ describe("preferences - navigation using application menu", () => {
   it("does not show application preferences yet", () => {
     const page = querySingleElement(
       "preference-page",
-      "application",
+      "application-page",
     )(rendered);
 
     expect(page).toBeNull();
@@ -43,7 +43,7 @@ describe("preferences - navigation using application menu", () => {
     it("shows application preferences", () => {
       const page = getSingleElement(
         "preference-page",
-        "application",
+        "application-page",
       )(rendered);
 
       expect(page).not.toBeNull();
diff --git a/src/features/preferences/navigation-using-tray.test.ts b/src/features/preferences/navigation-using-tray.test.ts
index 869e3f951d..d3b17b3a2e 100644
--- a/src/features/preferences/navigation-using-tray.test.ts
+++ b/src/features/preferences/navigation-using-tray.test.ts
@@ -24,7 +24,7 @@ describe("show-about-using-tray", () => {
   it("does not show application preferences yet", () => {
     const page = querySingleElement(
       "preference-page",
-      "application",
+      "application-page",
     )(rendered);
 
     expect(page).toBeNull();
@@ -42,7 +42,7 @@ describe("show-about-using-tray", () => {
     it("shows application preferences", () => {
       const page = getSingleElement(
         "preference-page",
-        "application",
+        "application-page",
       )(rendered);
 
       expect(page).not.toBeNull();
diff --git a/src/features/preferences/renderer/get-preference-page.tsx b/src/features/preferences/renderer/get-preference-page.tsx
new file mode 100644
index 0000000000..2ebbb60459
--- /dev/null
+++ b/src/features/preferences/renderer/get-preference-page.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import type { PreferencePageComponent } from "./preference-items/preference-item-injection-token";
+
+export const getPreferencePage = (label: string): PreferencePageComponent => ({ children, item }) => (
+  <section id={item.id} data-preference-page-test={item.id}>
+    <h2>{label}</h2>
+
+    {children}
+  </section>
+);
diff --git a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
index 293f3f4a2f..665ce1db62 100644
--- a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
+++ b/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
@@ -4,8 +4,8 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { ApplicationPreferencePage } from "./application-preference-page";
 import React from "react";
+import { getPreferencePage } from "../../get-preference-page";
 
 const applicationPreferencePageInjectable = getInjectable({
   id: "application-preference-page",
@@ -15,7 +15,7 @@ const applicationPreferencePageInjectable = getInjectable({
     id: "application-page",
     parentId: "application-tab",
     orderNumber: 0,
-    Component: ApplicationPreferencePage,
+    Component: getPreferencePage("Application"),
     childrenSeparator: () => <hr />,
   }),
 
diff --git a/src/features/preferences/renderer/preference-items/application/application-preference-page.tsx b/src/features/preferences/renderer/preference-items/application/application-preference-page.tsx
deleted file mode 100644
index f451ebc5b3..0000000000
--- a/src/features/preferences/renderer/preference-items/application/application-preference-page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import React from "react";
-import type { PreferenceItemComponent } from "../preference-item-injection-token";
-
-export const ApplicationPreferencePage: PreferenceItemComponent = ({ children }) => (
-  <section id="application" data-preference-page-test="application">
-    <h2 data-testid="application-header">Application</h2>
-
-    {children}
-  </section>
-);
diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
index c130af6fd7..2db57244e3 100644
--- a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
@@ -4,7 +4,7 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { EditorPreferencePage } from "./editor-preference-page";
+import { getPreferencePage } from "../../get-preference-page";
 
 const editorPreferencePageInjectable = getInjectable({
   id: "editor-preference-page",
@@ -14,7 +14,7 @@ const editorPreferencePageInjectable = getInjectable({
     id: "editor-page",
     parentId: "editor-tab",
     orderNumber: 0,
-    Component: EditorPreferencePage,
+    Component: getPreferencePage("Editor"),
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx
deleted file mode 100644
index 28de924229..0000000000
--- a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import React from "react";
-import type { PreferenceItemComponent } from "../preference-item-injection-token";
-
-export const EditorPreferencePage: PreferenceItemComponent = ({ children }) => (
-  <section id="editor" data-preference-page-test="editor">
-    <h2 data-testid="editor-configuration-header">Editor configuration</h2>
-
-    {children}
-  </section>
-);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx
deleted file mode 100644
index e8f68453f8..0000000000
--- a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import React from "react";
-import type { PreferenceItemComponent } from "../preference-item-injection-token";
-
-export const KubernetesPage: PreferenceItemComponent = ({ children }) => (
-  <section id="kubernetes" data-preference-page-test="kubernetes">
-    <h2 data-testid="kubernetes-header">Kubernetes</h2>
-
-    {children}
-  </section>
-);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
index 220b76e407..34a3aa4bac 100644
--- a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
@@ -4,8 +4,8 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { KubernetesPage } from "./kubernetes-page";
 import React from "react";
+import { getPreferencePage } from "../../get-preference-page";
 
 const kubernetesPreferencePageInjectable = getInjectable({
   id: "kubernetes-preference-page",
@@ -15,7 +15,7 @@ const kubernetesPreferencePageInjectable = getInjectable({
     id: "kubernetes-page",
     parentId: "kubernetes-tab",
     orderNumber: 0,
-    Component: KubernetesPage,
+    Component: getPreferencePage("Kubernetes"),
     childrenSeparator: () => <hr />,
   }),
 
diff --git a/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts b/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
index ffe69c1487..86bec6f3bc 100644
--- a/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
+++ b/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
@@ -5,7 +5,14 @@
 import { getInjectionToken } from "@ogre-tools/injectable";
 import type React from "react";
 
-export type PreferenceItemComponent = React.ComponentType<{ children: React.ReactElement }>;
+export type PreferenceItemComponent = React.ComponentType<{
+  children: React.ReactElement;
+}>;
+
+export type PreferencePageComponent = React.ComponentType<{
+  children: React.ReactElement;
+  item: PreferencePage;
+}>;
 
 export interface PreferenceTab {
   kind: "tab";
@@ -33,7 +40,7 @@ export interface PreferencePage {
   parentId: string;
   isShown?: boolean;
   childrenSeparator?: () => React.ReactElement;
-  Component: PreferenceItemComponent;
+  Component: PreferencePageComponent;
 }
 
 export interface PreferenceGroup {
diff --git a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
index 175aa181ac..9d6b48e007 100644
--- a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
+++ b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
@@ -4,8 +4,8 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { ProxyPreferencePage } from "./proxy-preference-page";
 import React from "react";
+import { getPreferencePage } from "../../get-preference-page";
 
 const proxyPreferencePageInjectable = getInjectable({
   id: "proxy-preference-page",
@@ -15,7 +15,7 @@ const proxyPreferencePageInjectable = getInjectable({
     id: "proxy-page",
     parentId: "proxy-tab",
     orderNumber: 0,
-    Component: ProxyPreferencePage,
+    Component: getPreferencePage("Proxy"),
     childrenSeparator: () => <hr className="small" />,
   }),
 
diff --git a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx
deleted file mode 100644
index 91257d1abc..0000000000
--- a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import React from "react";
-import type { PreferenceItemComponent } from "../preference-item-injection-token";
-
-export const ProxyPreferencePage: PreferenceItemComponent = ({ children }) => (
-  <section id="proxy" data-preference-page-test="proxy">
-    <h2 data-testid="proxy-header">Proxy</h2>
-
-    {children}
-  </section>
-);
diff --git a/src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx b/src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx
deleted file mode 100644
index fbc8590e88..0000000000
--- a/src/features/preferences/renderer/preference-items/telemetry/telemetry-page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import React from "react";
-import type { PreferenceItemComponent } from "../preference-item-injection-token";
-
-export const TelemetryPage: PreferenceItemComponent = ({ children }) => (
-  <section id="telemetry" data-preference-page-test="telemetry">
-    <h2 data-testid="telemetry-header">Telemetry</h2>
-
-    {children}
-  </section>
-);
diff --git a/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx b/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx
index 3cb2775896..716e8b8d8e 100644
--- a/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx
+++ b/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx
@@ -4,8 +4,8 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { TelemetryPage } from "./telemetry-page";
 import React from "react";
+import { getPreferencePage } from "../../get-preference-page";
 
 const telemetryPreferencePageInjectable = getInjectable({
   id: "telemetry-preference-page",
@@ -15,7 +15,7 @@ const telemetryPreferencePageInjectable = getInjectable({
     id: "telemetry-page",
     parentId: "telemetry-tab",
     orderNumber: 0,
-    Component: TelemetryPage,
+    Component: getPreferencePage("Telemetry"),
     childrenSeparator: () => <hr className="small" />,
   }),
 
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx
index 5079b313f1..08ea936ea3 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx
@@ -4,7 +4,7 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { TerminalPage } from "./terminal-page";
+import { getPreferencePage } from "../../get-preference-page";
 
 const terminalPagePreferenceItemInjectable = getInjectable({
   id: "terminal-preference-page",
@@ -14,7 +14,7 @@ const terminalPagePreferenceItemInjectable = getInjectable({
     id: "terminal-page",
     parentId: "terminal-tab",
     orderNumber: 0,
-    Component: TerminalPage,
+    Component: getPreferencePage("Terminal"),
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx
deleted file mode 100644
index 821152599c..0000000000
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import React from "react";
-import type { PreferenceItemComponent } from "../preference-item-injection-token";
-
-export const TerminalPage: PreferenceItemComponent = ({ children }) => (
-  <section id="terminal" data-preference-page-test="terminal">
-    <h2 data-testid="terminal-header">Terminal</h2>
-
-    {children}
-  </section>
-);
diff --git a/src/features/preferences/renderer/preferences.tsx b/src/features/preferences/renderer/preferences.tsx
index 9a2465112a..6683ba3229 100644
--- a/src/features/preferences/renderer/preferences.tsx
+++ b/src/features/preferences/renderer/preferences.tsx
@@ -41,27 +41,39 @@ const NonInjectedPreferences = observer(({
 });
 
 const toPreferenceItemHierarchy = (composite: Composite<PreferenceTypes>) => {
-  switch (composite.value.kind) {
+  const value = composite.value;
 
+  switch (value.kind) {
     case "group": {
       return (
-        <section id={composite.value.id}>
-          <Map items={composite.children} getSeparator={composite.value.childrenSeparator}>
+        <section id={value.id}>
+          <Map items={composite.children} getSeparator={value.childrenSeparator}>
             {toPreferenceItemHierarchy}
           </Map>
         </section>
       );
     }
 
-    case "item":
-
-    // eslint-disable-next-line no-fallthrough
-    case "page": {
-      const Component = composite.value.Component;
+    case "item": {
+      const Component = value.Component;
 
       return (
         <Component>
-          <Map items={composite.children} getSeparator={composite.value.childrenSeparator}>
+          <Map items={composite.children} getSeparator={value.childrenSeparator}>
+            {toPreferenceItemHierarchy}
+          </Map>
+        </Component>
+      );
+
+    }
+
+    // eslint-disable-next-line no-fallthrough
+    case "page": {
+      const Component = value.Component;
+
+      return (
+        <Component item={value}>
+          <Map items={composite.children} getSeparator={value.childrenSeparator}>
             {toPreferenceItemHierarchy}
           </Map>
         </Component>
@@ -82,12 +94,12 @@ const toPreferenceItemHierarchy = (composite: Composite<PreferenceTypes>) => {
     default: {
       // Note: this will fail at transpilation time, if all kinds
       // are not handled in switch/case.
-      const _exhaustiveCheck: never = composite.value;
+      const _exhaustiveCheck: never = value;
 
       // Note: this code is unreachable, it is here to make ts not complain about
       // _exhaustiveCheck not being used.
       // See: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
-      throw new Error(`Tried to create preferences, but foreign item was encountered: ${_exhaustiveCheck} ${composite.value}`);
+      throw new Error(`Tried to create preferences, but foreign item was encountered: ${_exhaustiveCheck} ${value}`);
     }
   }
 };