Fix some issues and feedback with About and system health (#12537)

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

@@ -12,6 +12,8 @@ export class HaClickableListItem extends ListItemBase {
   // property used only in css
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
+  @property({ type: Boolean, reflect: true }) public openNewTab = false;
+
   @query("a") private _anchor!: HTMLAnchorElement;
 
   public render() {
@@ -20,7 +22,12 @@ export class HaClickableListItem extends ListItemBase {
 
     return html`${this.disableHref
       ? html`<a aria-role="option">${r}</a>`
-      : html`<a aria-role="option" href=${href}>${r}</a>`}`;
+      : html`<a
+          aria-role="option"
+          target=${this.openNewTab ? "_blank" : ""}
+          href=${href}
+          >${r}</a
+        >`}`;
   }
 
   firstUpdated() {

src/panels/config/core/ha-config-system-navigation.ts

@@ -61,6 +61,7 @@ class HaConfigSystemNavigation extends LitElement {
               .pages=${pages}
             ></ha-navigation-list>
           </ha-card>
+          <div class="yaml-config">Looking for YAML Configuration? It has moved to <a href="/developer-tools/yaml">Developer Tools</a></a></div>
         </ha-config-section>
       </hass-subpage>
     `;
@@ -136,6 +137,11 @@ class HaConfigSystemNavigation extends LitElement {
           --navigation-list-item-title-font-size: 16px;
           --navigation-list-item-padding: 4px;
         }
+        .yaml-config {
+          margin-bottom: max(env(safe-area-inset-bottom), 24px);
+          text-align: center;
+          font-style: italic;
+        }
       `,
     ];
   }

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

@@ -13,7 +13,6 @@ import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import "./integrations-card";
 
 const JS_TYPE = __BUILD__;
 const JS_VERSION = __VERSION__;
@@ -21,13 +20,13 @@ const JS_VERSION = __VERSION__;
 class HaConfigInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced!: boolean;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public route!: Route;
 
   @state() private _hostInfo?: HassioHostInfo;
 
@@ -61,18 +60,22 @@ class HaConfigInfo extends LitElement {
             </ha-logo-svg>
           </a>
           <br />
-          <h2>Home Assistant Core ${hass.connection.haVersion}</h2>
+          <h3>Home Assistant Core ${hass.connection.haVersion}</h3>
           ${this._hassioInfo
-            ? html`<h2>
-                Home Assistant Supervisor ${this._hassioInfo.supervisor}
-              </h2>`
+            ? html`
+                <h3>
+                  Home Assistant Supervisor ${this._hassioInfo.supervisor}
+                </h3>
+              `
             : ""}
           ${this._osInfo?.version
-            ? html`<h2>Home Assistant OS ${this._osInfo.version}</h2>`
+            ? html`<h3>Home Assistant OS ${this._osInfo.version}</h3>`
             : ""}
           ${this._hostInfo
-            ? html`<h4>Kernel version ${this._hostInfo.kernel}</h4>
-                <h4>Agent version ${this._hostInfo.agent_version}</h4>`
+            ? html`
+                <h4>Kernel version ${this._hostInfo.kernel}</h4>
+                <h4>Agent version ${this._hostInfo.agent_version}</h4>
+              `
             : ""}
           <p>
             ${this.hass.localize(
@@ -211,18 +214,15 @@ class HaConfigInfo extends LitElement {
         .about a {
           color: var(--primary-color);
         }
-
-        integrations-card {
-          display: block;
-          max-width: 600px;
-          margin: 0 auto;
-          padding-bottom: 16px;
-        }
         ha-logo-svg {
           padding: 12px;
           height: 180px;
           width: 180px;
         }
+
+        h4 {
+          font-weight: 400;
+        }
       `,
     ];
   }

src/panels/config/system-health/ha-config-system-health.ts

@@ -30,7 +30,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
-import "../info/integrations-card";
+import "./integrations-card";
 
 const sortKeys = (a: string, b: string) => {
   if (a === "homeassistant") {

src/panels/config/system-health/integrations-card.ts

@@ -48,7 +48,7 @@ class IntegrationsCard extends LitElement {
       <ha-card
         outlined
         .header=${this.hass.localize(
-          "ui.panel.config.system_health.long_loading_integrations"
+          "ui.panel.config.system_health.integration_start_time"
         )}
       >
         <mwc-list>
@@ -69,6 +69,7 @@ class IntegrationsCard extends LitElement {
                 graphic="avatar"
                 twoline
                 hasMeta
+                openNewTab
                 @click=${this._entryClicked}
                 href=${docLink}
               >
@@ -129,7 +130,7 @@ class IntegrationsCard extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-clickable-list-item {
-        --mdc-list-item-meta-size: 48px;
+        --mdc-list-item-meta-size: 64px;
         --mdc-typography-caption-font-size: 12px;
       }
       img {
@@ -137,6 +138,11 @@ class IntegrationsCard extends LitElement {
         max-height: 40px;
         max-width: 40px;
       }
+      div[slot="meta"] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     `;
   }
 }

src/translations/en.json

@@ -1152,7 +1152,7 @@
           },
           "about": {
             "main": "About",
-            "secondary": "Version, loaded integrations and links to documentation"
+            "secondary": "Version information, credits and more"
           }
         },
         "common": {
@@ -3167,7 +3167,7 @@
           "ram_usage": "Memory Usage",
           "core_stats": "Core Stats",
           "supervisor_stats": "Supervisor Stats",
-          "long_loading_integrations": "Long Loading Integrations"
+          "integration_start_time": "Integration Startup Time"
         },
         "system_dashboard": {
           "confirm_restart_text": "Restarting Home Assistant will stop all your active dashboards, automations and scripts.",
@@ -4155,7 +4155,7 @@
             "adjust_sum": "Adjust sum"
           },
           "yaml": {
-            "title": "YAML Configuration",
+            "title": "YAML",
             "section": {
               "validation": {
                 "heading": "Configuration validation",