frontend: Unify general and cluster settings

Accessing settings in Headlamp is confusing. This change adds the cluster settings to the sidebar along with the general and plugin settings. When we open a cluster, clicking the Settings (gear) icon at the top will now take us to the cluster settings in the home context. If there are multiple clusters set up, a cluster selector will appear at the top of the cluster settings page. Fixes: #1927 and #2037 Signed-off-by: Evangelos Skopelitis <[email protected]>
headlamp-k8s · Jul 29, 2024 · 49d7d9d · 49d7d9d
1 parent 69e9227
commit 49d7d9d
Show file tree

Hide file tree

Showing 10 changed files with 347 additions and 222 deletions.
diff --git a/frontend/src/components/App/Settings/SettingsCluster.tsx b/frontend/src/components/App/Settings/SettingsCluster.tsx
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
@@ -64,7 +64,7 @@
               >
                 <a
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button Mui-selected css-sayhe9-MuiButtonBase-root-MuiListItem-root"
-                  href="/settings"
+                  href="/settings/general"
                   role="button"
                   tabindex="0"
                 >
@@ -94,6 +94,29 @@
                       <ul
                         class="MuiList-root css-2l483y-MuiList-root"
                       >
+                        <li
+                          class="css-b4fdej"
+                        >
+                          <a
+                            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
+                            href="/settings/general"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div
+                              class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+                            >
+                              <span
+                                class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
+                              >
+                                General
+                              </span>
+                            </div>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </a>
+                        </li>
                         <li
                           class="css-b4fdej"
                         >
@@ -117,6 +140,29 @@
                             />
                           </a>
                         </li>
+                        <li
+                          class="css-b4fdej"
+                        >
+                          <a
+                            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
+                            href="/settings/cluster"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div
+                              class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+                            >
+                              <span
+                                class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
+                              >
+                                Cluster
+                              </span>
+                            </div>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </a>
+                        </li>
                       </ul>
                     </div>
                   </div>

diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot
@@ -78,7 +78,7 @@
               >
                 <a
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button Mui-selected css-sayhe9-MuiButtonBase-root-MuiListItem-root"
-                  href="/settings"
+                  href="/settings/general"
                   role="button"
                   tabindex="0"
                 >
@@ -115,6 +115,29 @@
                       <ul
                         class="MuiList-root css-2l483y-MuiList-root"
                       >
+                        <li
+                          class="css-b4fdej"
+                        >
+                          <a
+                            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
+                            href="/settings/general"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div
+                              class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+                            >
+                              <span
+                                class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
+                              >
+                                General
+                              </span>
+                            </div>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </a>
+                        </li>
                         <li
                           class="css-b4fdej"
                         >
@@ -138,6 +161,29 @@
                             />
                           </a>
                         </li>
+                        <li
+                          class="css-b4fdej"
+                        >
+                          <a
+                            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
+                            href="/settings/cluster"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div
+                              class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+                            >
+                              <span
+                                class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
+                              >
+                                Cluster
+                              </span>
+                            </div>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </a>
+                        </li>
                       </ul>
                     </div>
                   </div>

diff --git a/frontend/src/components/Sidebar/prepareRoutes.ts b/frontend/src/components/Sidebar/prepareRoutes.ts
@@ -35,13 +35,23 @@ function prepareRoutes(
       name: 'settings',
       icon: 'mdi:cog',
       label: t('translation|Settings'),
-      url: '/settings',
+      url: '/settings/general',
       subList: [
+        {
+          name: 'general',
+          label: t('translation|General'),
+          url: '/settings/general',
+        },
         {
           name: 'plugins',
           label: t('translation|Plugins'),
           url: '/settings/plugins',
         },
+        {
+          name: 'settingsCluster',
+          label: t('glossary|Cluster'),
+          url: '/settings/cluster',
+        },
       ],
     },
   ];

diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -370,6 +370,7 @@
   "Expand sidebar": "Seitenleiste erweitern",
   "Main Navigation": "Hauptnavigation",
   "Navigation Tabs": "Navigationstabs",
+  "General": "",
   "Collapse Sidebar": "Seitenleiste einklappen",
   "Navigation": "Navigation",
   "Cluster version upgraded to {{ gitVersion }}": "Cluster-Version auf {{ gitVersion }} aktualisiert",

diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -370,6 +370,7 @@
   "Expand sidebar": "Expand sidebar",
   "Main Navigation": "Main Navigation",
   "Navigation Tabs": "Navigation Tabs",
+  "General": "General",
   "Collapse Sidebar": "Collapse Sidebar",
   "Navigation": "Navigation",
   "Cluster version upgraded to {{ gitVersion }}": "Cluster version upgraded to {{ gitVersion }}",

diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -371,6 +371,7 @@
   "Expand sidebar": "Expandir barra lateral",
   "Main Navigation": "Navegación principal",
   "Navigation Tabs": "Pestañas de navegación",
+  "General": "",
   "Collapse Sidebar": "Contraer barra lateral",
   "Navigation": "Navegación",
   "Cluster version upgraded to {{ gitVersion }}": "Versión del cluster actualizada a {{ gitVersion }}",

diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -371,6 +371,7 @@
   "Expand sidebar": "Développer la barre latérale",
   "Main Navigation": "Navigation principale",
   "Navigation Tabs": "Onglets de navigation",
+  "General": "",
   "Collapse Sidebar": "Réduire la barre latérale",
   "Navigation": "Navigation",
   "Cluster version upgraded to {{ gitVersion }}": "Version du cluster mise à jour vers {{ gitVersion }}",

diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -371,6 +371,7 @@
   "Expand sidebar": "Expandir barra lateral",
   "Main Navigation": "Navegação Principal",
   "Navigation Tabs": "Separadores de Navegação",
+  "General": "",
   "Collapse Sidebar": "Encolher Barra Lateral",
   "Navigation": "Navegação",
   "Cluster version upgraded to {{ gitVersion }}": "Versão do cluster actualizada para {{ gitVersion }}",

diff --git a/frontend/src/lib/router.tsx b/frontend/src/lib/router.tsx
@@ -669,11 +669,11 @@ const defaultRoutes: {
     ),
   },
   settings: {
-    path: '/settings',
+    path: '/settings/general',
     exact: true,
     name: 'Settings',
     sidebar: {
-      item: 'settings',
+      item: 'general',
       sidebar: DefaultSidebars.HOME,
     },
     useClusterURL: false,
@@ -684,7 +684,6 @@ const defaultRoutes: {
       </PageGrid>
     ),
   },
-
   settingsClusters: {
     path: '/settings/clusters',
     exact: true,
@@ -702,7 +701,27 @@ const defaultRoutes: {
     path: '/settings',
     exact: true,
     name: 'Cluster Settings',
-    sidebar: 'settingsCluster',
+    sidebar: {
+      item: 'settingsCluster',
+      sidebar: DefaultSidebars.HOME,
+    },
+    useClusterURL: true,
+    noAuthRequired: true,
+    component: () => (
+      <PageGrid>
+        <SettingsCluster />
+      </PageGrid>
+    ),
+  },
+  settingsClusterHomeContext: {
+    path: '/settings/cluster',
+    exact: true,
+    name: 'Cluster Settings',
+    sidebar: {
+      item: 'settingsCluster',
+      sidebar: DefaultSidebars.HOME,
+    },
+    useClusterURL: false,
     noAuthRequired: true,
     component: () => (
       <PageGrid>