Update Show Skipped/ignored in updates/repairs, update dialog of integration startup time (#13296)

src/panels/config/core/ha-config-section-updates.ts

@@ -1,15 +1,16 @@
-import type { ActionDetail } from "@material/mwc-list";
+import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
-import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
 import { HassEntities } from "home-assistant-js-websocket";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-alert";
 import "../../../components/ha-bar";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-check-list-item";
 import "../../../components/ha-metric";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
@@ -72,20 +73,23 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+          <ha-button-menu corner="BOTTOM_START" multi>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <mwc-list-item id="skipped">
+            <ha-check-list-item
-              ${this._showSkipped
+              left
-                ? this.hass.localize("ui.panel.config.updates.hide_skipped")
+              @request-selected=${this._toggleSkipped}
-                : this.hass.localize("ui.panel.config.updates.show_skipped")}
+              .selected=${this._showSkipped}
-            </mwc-list-item>
+            >
+              ${this.hass.localize("ui.panel.config.updates.show_skipped")}
+            </ha-check-list-item>
             ${this._supervisorInfo?.channel !== "dev"
               ? html`
-                  <mwc-list-item id="beta">
+                  <li divider role="separator"></li>
+                  <mwc-list-item @request-selected=${this._toggleBeta}>
                     ${this._supervisorInfo?.channel === "stable"
                       ? this.hass.localize("ui.panel.config.updates.join_beta")
                       : this.hass.localize(
@@ -122,18 +126,21 @@ class HaConfigSectionUpdates extends LitElement {
     `;
   }
 
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
+  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
-    switch (ev.detail.index) {
+    if (ev.detail.source !== "property") {
-      case 0:
+      return;
-        this._showSkipped = !this._showSkipped;
-        break;
-      case 1:
-        this._toggleBeta();
-        break;
     }
+
+    this._showSkipped = !this._showSkipped;
   }
 
-  private async _toggleBeta(): Promise<void> {
+  private async _toggleBeta(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): Promise<void> {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+
     if (this._supervisorInfo!.channel === "stable") {
       const confirmed = await showConfirmationDialog(this, {
         title: this.hass.localize("ui.dialogs.join_beta_channel.title"),
@@ -206,6 +213,9 @@ class HaConfigSectionUpdates extends LitElement {
     .no-updates {
       padding: 16px;
     }
+    li[divider] {
+      border-bottom-color: var(--divider-color);
+    }
   `;
 }
 

src/panels/config/repairs/dialog-integration-startup.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
@@ -31,13 +31,14 @@ class DialogIntegrationStartup extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
+        hideActions
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.repairs.integration_startup_time")
         )}
+        @closed=${this.closeDialog}
       >
         <integrations-startup-time
           .hass=${this.hass}
@@ -47,7 +48,14 @@ class DialogIntegrationStartup extends LitElement {
     `;
   }
 
-  static styles: CSSResultGroup = haStyleDialog;
+  static styles: CSSResultGroup = [
+    haStyleDialog,
+    css`
+      ha-dialog {
+        --dialog-content-padding: 0;
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/repairs/ha-config-repairs-dashboard.ts

@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-card";
+import "../../../components/ha-check-list-item";
 import {
   RepairsIssue,
   severitySort,
@@ -65,12 +66,20 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
         .header=${this.hass.localize("ui.panel.config.repairs.caption")}
       >
         <div slot="toolbar-icon">
-          <ha-button-menu corner="BOTTOM_START">
+          <ha-button-menu corner="BOTTOM_START" multi>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
+            <ha-check-list-item
+              left
+              @request-selected=${this._toggleIgnored}
+              .selected=${this._showIgnored}
+            >
+              ${this.hass.localize("ui.panel.config.repairs.show_ignored")}
+            </ha-check-list-item>
+            <li divider role="separator"></li>
             ${isComponentLoaded(this.hass, "system_health") ||
             isComponentLoaded(this.hass, "hassio")
               ? html`
@@ -90,11 +99,6 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
                 "ui.panel.config.repairs.integration_startup_time"
               )}
             </mwc-list-item>
-            <mwc-list-item @request-selected=${this._toggleIgnored}>
-              ${this._showIgnored
-                ? this.hass.localize("ui.panel.config.repairs.hide_ignored")
-                : this.hass.localize("ui.panel.config.repairs.show_ignored")}
-            </mwc-list-item>
           </ha-button-menu>
         </div>
         <div class="content">
@@ -143,7 +147,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
   }
 
   private _toggleIgnored(ev: CustomEvent<RequestSelectedDetail>): void {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
+    if (ev.detail.source !== "property") {
       return;
     }
 
@@ -177,6 +181,9 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
     .no-repairs {
       padding: 16px;
     }
+    li[divider] {
+      border-bottom-color: var(--divider-color);
+    }
   `;
 }
 

src/translations/en.json

@@ -1220,8 +1220,7 @@
           "version_available": "Version {version_available} is available",
           "more_updates": "Show all updates",
           "show": "show",
-          "show_skipped": "Show skipped",
+          "show_skipped": "Show skipped updates",
-          "hide_skipped": "Hide skipped",
           "join_beta": "[%key:supervisor::system::supervisor::join_beta_action%]",
           "leave_beta": "[%key:supervisor::system::supervisor::leave_beta_action%]",
           "skipped": "Skipped"
@@ -1232,8 +1231,7 @@
           "title": "{count} {count, plural,\n  one {repair}\n  other {repairs}\n}",
           "no_repairs": "There are currently no repairs available",
           "more_repairs": "Show all repairs",
-          "show_ignored": "Show ignored",
+          "show_ignored": "Show ignored repairs",
-          "hide_ignored": "Hide ignored",
           "critical": "Critical",
           "error": "Error",
           "warning": "Warning",