Update dialog with status line and other stuff (#13293)

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

@@ -84,6 +84,19 @@ class DialogRepairsIssue extends LitElement {
                 >
               `
             : ""}
+          <div class="secondary">
+            <span class=${this._issue.severity}
+              >${this.hass.localize(
+                `ui.panel.config.repairs.${this._issue.severity}`
+              )}
+            </span>
+            -
+            ${this._issue.created
+              ? new Date(this._issue.created).toLocaleDateString(
+                  this.hass.language
+                )
+              : ""}
+          </div>
         </div>
         ${this._issue.learn_more_url
           ? html`
@@ -130,6 +143,18 @@ class DialogRepairsIssue extends LitElement {
       .dismissed {
         font-style: italic;
       }
+      .secondary {
+        margin-top: 8px;
+        text-align: right;
+        color: var(--secondary-text-color);
+      }
+      .error,
+      .critical {
+        color: var(--error-color);
+      }
+      .warning {
+        color: var(--warning-color);
+      }
     `,
   ];
 }

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

@@ -2,6 +2,7 @@ import "@material/mwc-list/mwc-list";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../../../common/datetime/relative_time";
+import { capitalizeFirstLetter } from "../../../common/string/capitalize-first-letter";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
 import "../../../components/ha-list-item";
@@ -71,8 +72,22 @@ class HaConfigRepairs extends LitElement {
                 )}</span
               >
               <span slot="secondary" class="secondary">
+                ${issue.severity === "critical" || issue.severity === "error"
+                  ? html`<span class="error"
+                      >${this.hass.localize(
+                        `ui.panel.config.repairs.${issue.severity}`
+                      )}</span
+                    >`
+                  : ""}
+                ${(issue.severity === "critical" ||
+                  issue.severity === "error") &&
+                issue.created
+                  ? " - "
+                  : ""}
                 ${issue.created
-                  ? relativeTime(new Date(issue.created), this.hass.locale)
+                  ? capitalizeFirstLetter(
+                      relativeTime(new Date(issue.created), this.hass.locale)
+                    )
                   : ""}
                 ${issue.ignored
                   ? ` - ${this.hass.localize(
@@ -137,6 +152,9 @@ class HaConfigRepairs extends LitElement {
       cursor: pointer;
       font-size: 16px;
     }
+    .error {
+      color: var(--error-color);
+    }
   `;
 }
 

src/translations/en.json

@@ -1244,7 +1244,7 @@
             "learn": "Learn more",
             "ignore": "Ignore",
             "unignore": "Unignore",
-            "breaks_in_version": "This will break in version {version}. Fix this issue before upgrading.",
+            "breaks_in_version": "This stops working in version {version}. Please address before upgrading.",
             "ignored_in_version_short": "Ignored in version {version}",
             "ignored_in_version": "This issue was ignored in version {version}."
           }