+
+
+
${this.hass.localize(`component.${this.domain}.title`)}
++ ${this.params.flowConfig.renderAbortHeader + ? this.params.flowConfig.renderAbortHeader(this.hass, this.step) + : this.hass.localize(`component.${this.domain}.title`)} +
${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
diff --git a/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts b/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts
new file mode 100644
index 0000000000..3a09766df8
--- /dev/null
+++ b/src/panels/config/repairs/dialog-repairs-issue-subtitle.ts
@@ -0,0 +1,63 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../../types";
+import { domainToName } from "../../../data/integration";
+import type { RepairsIssue } from "../../../data/repairs";
+
+@customElement("dialog-repairs-issue-subtitle")
+class DialogRepairsIssueSubtitle extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Object }) public issue!: RepairsIssue;
+
+ protected firstUpdated() {
+ if (this.scrollWidth > this.offsetWidth) {
+ this.title =
+ (this.shadowRoot?.firstElementChild as HTMLElement)?.innerText || "";
+ }
+ }
+
+ protected render() {
+ const domainName = domainToName(this.hass.localize, this.issue.domain);
+ const reportedBy = domainName
+ ? this.hass.localize("ui.panel.config.repairs.reported_by", {
+ integration: domainName,
+ })
+ : "";
+
+ const severity = this.hass.localize(
+ `ui.panel.config.repairs.${this.issue.severity}`
+ );
+
+ return html`
+
+ ${severity}
+ ${reportedBy}
+
+ `;
+ }
+
+ static styles = css`
+ :host {
+ display: block;
+ font-size: 14px;
+ margin-bottom: 8px;
+ color: var(--secondary-text-color);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .error,
+ .critical {
+ color: var(--error-color);
+ }
+ .warning {
+ color: var(--warning-color);
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-repairs-issue-subtitle": DialogRepairsIssueSubtitle;
+ }
+}
diff --git a/src/panels/config/repairs/dialog-repairs-issue.ts b/src/panels/config/repairs/dialog-repairs-issue.ts
index ece7a219f7..7d48662423 100644
--- a/src/panels/config/repairs/dialog-repairs-issue.ts
+++ b/src/panels/config/repairs/dialog-repairs-issue.ts
@@ -1,11 +1,14 @@
-import "@material/mwc-button/mwc-button";
+import { mdiClose } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { formatDateNumeric } from "../../../common/datetime/format_date";
+import { customElement, property, state, query } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { isNavigationClick } from "../../../common/dom/is-navigation-click";
import "../../../components/ha-alert";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../components/ha-md-dialog";
+import "../../../components/ha-button";
+import "../../../components/ha-dialog-header";
+import "./dialog-repairs-issue-subtitle";
import "../../../components/ha-markdown";
import { ignoreRepairsIssue, RepairsIssue } from "../../../data/repairs";
import { haStyleDialog } from "../../../resources/styles";
@@ -20,12 +23,14 @@ class DialogRepairsIssue extends LitElement {
@state() private _params?: RepairsIssueDialogParams;
+ @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
public showDialog(params: RepairsIssueDialogParams): void {
this._params = params;
this._issue = this._params.issue;
}
- public closeDialog() {
+ private _dialogClosed() {
if (this._params?.dialogClosedCallback) {
this._params.dialogClosedCallback();
}
@@ -35,6 +40,10 @@ class DialogRepairsIssue extends LitElement {
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
+ public closeDialog() {
+ this._dialog?.close();
+ }
+
protected render() {
if (!this._issue) {
return nothing;
@@ -43,23 +52,39 @@ class DialogRepairsIssue extends LitElement {
const learnMoreUrlIsHomeAssistant =
this._issue.learn_more_url?.startsWith("homeassistant://") || false;
+ const dialogTitle =
+ this.hass.localize(
+ `component.${this._issue.domain}.issues.${this._issue.translation_key || this._issue.issue_id}.title`,
+ this._issue.translation_placeholders || {}
+ ) || this.hass!.localize("ui.panel.config.repairs.dialog.title");
+
return html`
-
+
+
+
-
${this._issue.breaks_in_ha_version
? html`
@@ -71,6 +96,7 @@ class DialogRepairsIssue extends LitElement {
`
: ""}
`
: ""}
-
- ${this._issue.learn_more_url
- ? html`
-
-
- ${this.hass.localize(
- `ui.panel.config.repairs.${this._issue.severity}`
- )}
-
- -
- ${this._issue.created
- ? formatDateNumeric(
- new Date(this._issue.created),
- this.hass.locale,
- this.hass.config
- )
- : ""}
-
+
+ ${this._issue!.ignored
+ ? this.hass!.localize("ui.panel.config.repairs.dialog.unignore")
+ : this.hass!.localize("ui.panel.config.repairs.dialog.ignore")}
+
+ ${this._issue.learn_more_url
+ ? html`
+
+
+ ${this.hass!.localize(
+ "ui.panel.config.repairs.dialog.learn"
+ )}
+
+
+ `
+ : ""}
+
+
`;
}
@@ -154,28 +168,16 @@ class DialogRepairsIssue extends LitElement {
static styles: CSSResultGroup = [
haStyleDialog,
css`
+ .dialog-content {
+ padding-top: 0;
+ }
ha-alert {
margin-bottom: 16px;
display: block;
}
- a {
- text-decoration: none;
- }
.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);
- }
`,
];
}
diff --git a/src/panels/config/repairs/ha-config-repairs.ts b/src/panels/config/repairs/ha-config-repairs.ts
index 3446fb305b..50c4b9f2f4 100644
--- a/src/panels/config/repairs/ha-config-repairs.ts
+++ b/src/panels/config/repairs/ha-config-repairs.ts
@@ -1,12 +1,9 @@
-import "@material/mwc-list/mwc-list";
import { css, html, LitElement, nothing } 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";
-import "../../../components/ha-svg-icon";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
import { domainToName } from "../../../data/integration";
import {
fetchRepairsIssueData,
@@ -48,19 +45,31 @@ class HaConfigRepairs extends LitElement {
count: this.total || this.repairsIssues.length,
})}