Config menu updates to get it ready for nightly (#12368)

src/components/ha-clickable-list-item.ts

@@ -55,7 +55,6 @@ export class HaClickableListItem extends ListItemBase {
           align-items: center;
           padding-left: var(--mdc-list-side-padding, 20px);
           padding-right: var(--mdc-list-side-padding, 20px);
-          font-weight: 500;
         }
       `,
     ];

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

@@ -254,7 +254,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
     },
     {
       component: "zone",
-      path: "/config/location",
+      path: "/config/zone",
       translationKey: "ui.panel.config.zone.caption",
       iconPath: mdiMapMarkerRadius,
       iconColor: "#E48629",
@@ -436,6 +436,10 @@ class HaPanelConfig extends HassRouterPage {
         tag: "ha-config-helpers",
         load: () => import("./helpers/ha-config-helpers"),
       },
+      server_control: {
+        tag: "ha-config-server-control",
+        load: () => import("./server_control/ha-config-server-control"),
+      },
       storage: {
         tag: "ha-config-section-storage",
         load: () => import("./core/ha-config-section-storage"),
@@ -444,7 +448,7 @@ class HaPanelConfig extends HassRouterPage {
         tag: "ha-config-users",
         load: () => import("./users/ha-config-users"),
       },
-      location: {
+      zone: {
         tag: "ha-config-zone",
         load: () => import("./zone/ha-config-zone"),
       },

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

@@ -1,11 +1,10 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
 import "../../../components/ha-logo-svg";
-import "../../../layouts/hass-tabs-subpage";
+import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import { configSections } from "../ha-panel-config";
 import "./integrations-card";
 import "./system-health-card";
 
@@ -29,12 +28,11 @@ class HaConfigInfo extends LitElement {
       (window as any).CUSTOM_UI_LIST || [];
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         back-path="/config"
-        .route=${this.route}
-        .tabs=${configSections.about}
+        .header=${this.hass.localize("ui.panel.config.info.caption")}
       >
         <div class="about">
           <a
@@ -113,21 +111,23 @@ class HaConfigInfo extends LitElement {
               "type",
               JS_TYPE
             )}
-            ${customUiList.length > 0
+            ${
+              customUiList.length > 0
                 ? html`
                     <div>
                       ${this.hass.localize("ui.panel.config.info.custom_uis")}
                       ${customUiList.map(
                         (item) => html`
                           <div>
-                          <a href=${item.url} target="_blank"> ${item.name}</a>:
-                          ${item.version}
+                            <a href=${item.url} target="_blank"> ${item.name}</a
+                            >: ${item.version}
                           </div>
                         `
                       )}
                     </div>
                   `
-              : ""}
+                : ""
+            }
           </p>
         </div>
         <div>

src/panels/config/server_control/ha-config-server-control.ts

@@ -18,13 +18,13 @@ import "../ha-config-section";
 export class HaConfigServerControl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced!: boolean;
 
   @state() private _validating = false;
 
@@ -54,21 +54,12 @@ export class HaConfigServerControl extends LitElement {
         .narrow=${this.narrow}
         back-path="/config/system"
         .showAdvanced=${this.showAdvanced}
+        .header=${this.hass.localize("ui.panel.config.server_control.caption")}
       >
-        <ha-config-section .isWide=${this.isWide}>
-          <span slot="header"
-            >${this.hass.localize(
-              "ui.panel.config.server_control.caption"
-            )}</span
-          >
-          <span slot="introduction"
-            >${this.hass.localize(
-              "ui.panel.config.server_control.description"
-            )}</span
-          >
-
+        <div class="content">
           ${this.showAdvanced
-            ? html` <ha-card
+            ? html`
+                <ha-card
                   header=${this.hass.localize(
                     "ui.panel.config.server_control.section.validation.heading"
                   )}
@@ -128,7 +119,8 @@ export class HaConfigServerControl extends LitElement {
                           </div>
                         `}
                   </div>
-              </ha-card>`
+                </ha-card>
+              `
             : ""}
 
           <ha-card
@@ -181,7 +173,8 @@ export class HaConfigServerControl extends LitElement {
                   </div>
                   ${this._reloadableDomains.map(
                     (domain) =>
-                      html`<div class="card-actions">
+                      html`
+                        <div class="card-actions">
                           <ha-call-service-button
                             .hass=${this.hass}
                             .domain=${domain}
@@ -195,12 +188,13 @@ export class HaConfigServerControl extends LitElement {
                               domainToName(this.hass.localize, domain)
                             )}
                           </ha-call-service-button>
-                      </div>`
+                        </div>
+                      `
                   )}
                 </ha-card>
               `
             : ""}
-        </ha-config-section>
+        </div>
       </hass-subpage>
     `;
   }
@@ -251,10 +245,22 @@ export class HaConfigServerControl extends LitElement {
           direction: ltr;
         }
 
-        ha-config-section {
-          padding-bottom: 24px;
+        .content {
+          padding: 28px 20px 0;
+          max-width: 1040px;
+          margin: 0 auto;
+        }
+
+        ha-card {
+          margin-top: 24px;
         }
       `,
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-server-control": HaConfigServerControl;
+  }
+}