Move developer tools to settings (admin) area (#29201)

src/components/ha-sidebar.ts

@@ -30,7 +30,6 @@ import {
   getPanelIcon,
   getPanelIconPath,
   getPanelTitle,
-  SHOW_AFTER_SPACER_PANELS,
 } from "../data/panel";
 import type { PersistentNotification } from "../data/persistent_notification";
 import { subscribeNotifications } from "../data/persistent_notification";
@@ -58,7 +57,6 @@ const SORT_VALUE_URL_PATHS = {
   map: 2,
   logbook: 3,
   history: 4,
-  "developer-tools": 100,
 };
 
 const panelSorter = (
@@ -135,10 +133,11 @@ export const computePanels = memoizeOne(
     }
 
     const beforeSpacer: PanelInfo[] = [];
-    const afterSpacer: PanelInfo[] = [];
 
     const allPanels = Object.values(panels).filter(
-      (panel) => !FIXED_PANELS.includes(panel.url_path)
+      (panel) =>
+        !FIXED_PANELS.includes(panel.url_path) &&
+        panel.url_path !== "developer-tools"
     );
 
     allPanels.forEach((panel) => {
@@ -153,10 +152,7 @@ export const computePanels = memoizeOne(
       ) {
         return;
       }
-      (SHOW_AFTER_SPACER_PANELS.includes(panel.url_path)
-        ? afterSpacer
-        : beforeSpacer
-      ).push(panel);
+      beforeSpacer.push(panel);
     });
 
     const reverseSort = [...panelsOrder].reverse();
@@ -164,11 +160,8 @@ export const computePanels = memoizeOne(
     beforeSpacer.sort((a, b) =>
       panelSorter(reverseSort, defaultPanel, a, b, locale.language)
     );
-    afterSpacer.sort((a, b) =>
-      panelSorter(reverseSort, defaultPanel, a, b, locale.language)
-    );
 
-    return [beforeSpacer, afterSpacer];
+    return [beforeSpacer, []];
   }
 );
 

src/data/panel.ts

@@ -138,4 +138,3 @@ export const getPanelIconPath = (panel: PanelInfo): string | undefined =>
   PANEL_ICON_PATHS[panel.url_path];
 
 export const FIXED_PANELS = ["profile", "config"];
-export const SHOW_AFTER_SPACER_PANELS = ["developer-tools"];

src/dialogs/sidebar/dialog-edit-sidebar.ts

@@ -29,7 +29,6 @@ import {
   getPanelIcon,
   getPanelIconPath,
   getPanelTitle,
-  SHOW_AFTER_SPACER_PANELS,
 } from "../../data/panel";
 import type { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
@@ -144,7 +143,6 @@ class DialogEditSidebar extends LitElement {
         `${defaultPanel === panel.url_path ? " (default)" : ""}`,
       icon: getPanelIcon(panel),
       iconPath: getPanelIconPath(panel),
-      disableSorting: SHOW_AFTER_SPACER_PANELS.includes(panel.url_path),
       disableHiding: panel.url_path === defaultPanel,
     }));
 

src/panels/config/ha-panel-config.ts

@@ -9,6 +9,7 @@ import {
   mdiDatabase,
   mdiDevices,
   mdiFlask,
+  mdiHammer,
   mdiInformation,
   mdiInformationOutline,
   mdiLabel,
@@ -196,6 +197,13 @@ export const configSections: Record<string, PageNavigation[]> = {
       iconColor: "#301ABE",
       core: true,
     },
+    {
+      path: "/developer-tools",
+      translationKey: "developer_tools",
+      iconPath: mdiHammer,
+      iconColor: "#7A5AA6",
+      core: true,
+    },
     {
       path: "/config/info",
       translationKey: "about",

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -2,10 +2,11 @@ import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { navigate } from "../../common/navigate";
+import { goBack, navigate } from "../../common/navigate";
 import "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
+import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
 import "../../components/ha-tab-group";
 import "../../components/ha-tab-group-tab";
@@ -31,11 +32,11 @@ class PanelDeveloperTools extends LitElement {
     return html`
       <div class="header">
         <div class="toolbar">
-          <ha-menu-button
+          <ha-icon-button-arrow-prev
             slot="navigationIcon"
             .hass=${this.hass}
-            .narrow=${this.narrow}
-          ></ha-menu-button>
+            @click=${this._handleBack}
+          ></ha-icon-button-arrow-prev>
           <div class="main-title">
             ${this.hass.localize("panel.developer_tools")}
           </div>
@@ -134,6 +135,10 @@ class PanelDeveloperTools extends LitElement {
     return this.route.path.substr(1);
   }
 
+  private _handleBack() {
+    goBack("/config");
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/translations/en.json

@@ -2368,6 +2368,10 @@
             "main": "System",
             "secondary": "Create backups, check logs, or reboot your system"
           },
+          "developer_tools": {
+            "main": "Developer tools",
+            "secondary": "Advanced tools for inspecting and debugging your system"
+          },
           "about": {
             "main": "About",
             "secondary": "Version information, credit, and more"