Repair: load translations for all integrations with issues (#13252)

src/components/ha-dialog.ts

@@ -11,7 +11,7 @@ export const createCloseHeading = (
   hass: HomeAssistant,
   title: string | TemplateResult
 ) => html`
-  <span class="header_title">${title}</span>
+  <div class="header_title">${title}</div>
   <ha-icon-button
     .label=${hass.localize("ui.dialogs.generic.close")}
     .path=${mdiClose}
@@ -95,8 +95,8 @@ export class HaDialog extends DialogBase {
         color: inherit;
       }
       .header_title {
-        margin-right: 40px;
-        margin-inline-end: 40px;
+        margin-right: 32px;
+        margin-inline-end: 32px;
         margin-inline-start: initial;
         direction: var(--direction);
       }

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

@@ -124,7 +124,10 @@ class HaConfigDashboard extends LitElement {
 
   @state() private _tip?: string;
 
-  @state() private _repairsIssues: [RepairsIssue[], number] = [[], 0];
+  @state() private _repairsIssues: { issues: RepairsIssue[]; total: number } = {
+    issues: [],
+    total: 0,
+  };
 
   private _pages = memoizeOne((clouStatus, isLoaded) => {
     const pages: PageNavigation[] = [];
@@ -142,10 +145,11 @@ class HaConfigDashboard extends LitElement {
   });
 
   protected render(): TemplateResult {
-    const [canInstallUpdates, totalUpdates] =
+    const { updates: canInstallUpdates, total: totalUpdates } =
       this._filterUpdateEntitiesWithInstall(this.hass.states);
 
-    const [repairsIssues, totalRepairIssues] = this._repairsIssues;
+    const { issues: repairsIssues, total: totalRepairIssues } =
+      this._repairsIssues;
 
     return html`
       <ha-app-layout>
@@ -264,31 +268,31 @@ class HaConfigDashboard extends LitElement {
   }
 
   private _filterUpdateEntitiesWithInstall = memoizeOne(
-    (entities: HassEntities): [UpdateEntity[], number] => {
+    (entities: HassEntities): { updates: UpdateEntity[]; total: number } => {
       const updates = filterUpdateEntitiesWithInstall(entities);
 
-      return [
-        updates.slice(0, updates.length === 3 ? updates.length : 2),
-        updates.length,
-      ];
+      return {
+        updates: updates.slice(0, updates.length === 3 ? updates.length : 2),
+        total: updates.length,
+      };
     }
   );
 
   private async _fetchIssues(): Promise<void> {
-    const [, repairsIssues] = await Promise.all([
-      this.hass.loadBackendTranslation("issues"),
-      fetchRepairsIssues(this.hass),
-    ]);
+    const repairsIssues = (await fetchRepairsIssues(this.hass)).issues;
 
-    this._repairsIssues = [
-      repairsIssues.issues
+    this._repairsIssues = {
+      issues: repairsIssues
         .sort((a, b) => severitySort[a.severity] - severitySort[b.severity])
-        .slice(
-          0,
-          repairsIssues.issues.length === 3 ? repairsIssues.issues.length : 2
-        ),
-      repairsIssues.issues.length,
-    ];
+        .slice(0, repairsIssues.length === 3 ? repairsIssues.length : 2),
+      total: repairsIssues.length,
+    };
+
+    const integrations: Set<string> = new Set();
+    for (const issue of this._repairsIssues.issues) {
+      integrations.add(issue.domain);
+    }
+    this.hass.loadBackendTranslation("issues", [...integrations]);
   }
 
   private _showQuickBar(): void {

src/panels/config/repairs/dialog-repairs-issue.ts

@@ -2,8 +2,8 @@ import "@material/mwc-button/mwc-button";
 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-alert";
 import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-markdown";
 import type { RepairsIssue } from "../../../data/repairs";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -17,8 +17,6 @@ class DialogRepairsIssue extends LitElement {
 
   @state() private _params?: RepairsIssueDialogParams;
 
-  @state() private _error?: string;
-
   public showDialog(params: RepairsIssueDialogParams): void {
     this._params = params;
     this._issue = this._params.issue;
@@ -27,7 +25,6 @@ class DialogRepairsIssue extends LitElement {
   public closeDialog() {
     this._params = undefined;
     this._issue = undefined;
-    this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -42,6 +39,7 @@ class DialogRepairsIssue extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
+        .hideActions=${!this._issue.learn_more_url}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize(
@@ -52,27 +50,28 @@ class DialogRepairsIssue extends LitElement {
         )}
       >
         <div>
-          ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""}
-          ${this.hass.localize(
-            `component.${this._issue.domain}.issues.${
-              this._issue.translation_key || this._issue.issue_id
-            }.description
-            }`,
-            this._issue.translation_placeholders
-          )}
+          <ha-markdown
+            allowsvg
+            breaks
+            .content=${this.hass.localize(
+              `component.${this._issue.domain}.issues.${
+                this._issue.translation_key || this._issue.issue_id
+              }.description`,
+              this._issue.translation_placeholders
+            )}
+          ></ha-markdown>
+
           ${this._issue.breaks_in_ha_version
             ? html`
-                This will no longer work as of the
+                <br />This will no longer work as of the
                 ${this._issue.breaks_in_ha_version} release of Home Assistant.
               `
             : ""}
-          The issue is ${this._issue.severity} severity
-          ${this._issue.is_fixable ? "and fixable" : "but not fixable"}.
+          <br />The issue is ${this._issue.severity} severity.<br />We can not
+          automatically repair this issue for you.
           ${this._issue.dismissed_version
             ? html`
-                This issue has been dismissed in version
+                <br />This issue has been dismissed in version
                 ${this._issue.dismissed_version}.
               `
             : ""}

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

@@ -55,12 +55,12 @@ class HaConfigRepairsDashboard extends LitElement {
   }
 
   private async _fetchIssues(): Promise<void> {
-    const [, repairsIssues] = await Promise.all([
-      this.hass.loadBackendTranslation("issues"),
-      fetchRepairsIssues(this.hass),
-    ]);
-
-    this._repairsIssues = repairsIssues.issues;
+    this._repairsIssues = (await fetchRepairsIssues(this.hass)).issues;
+    const integrations: Set<string> = new Set();
+    for (const issue of this._repairsIssues) {
+      integrations.add(issue.domain);
+    }
+    this.hass.loadBackendTranslation("issues", [...integrations]);
   }
 
   static styles = css`