Skip to content

Commit

Permalink
Add integration name information to repairs (#22006)
Browse files Browse the repository at this point in the history 
* Add integration name to repairs

* Improve dialog-repairs-issue aria and translations

* Fix type in dialog-repairs-issue

* Remove unused slots in dialog-repairs-issue

* Fix ha-config-repairs avoid nested css

* Fix ha-config-repairs to use ha-md-list

* Add subtitle slot to ha-dialog-header

* Move close icon to left in dialog-data-entry-flow

* Move severity and reportedBy to dialog subtitle in repair-dialog

* Add md buttons to dialog-repairs-issue

* Revert dialog-repairs-issue to use normal ha-buttons

* Revert dialog-entry-flow close icon position

* Improve buttons for dialog-repairs-issue

* Add subtitle to all show-dialog-repair-flow headers

* Fix integration names for repair dialogs

* Fix subtitle title repair dialogs

---------

Co-authored-by: Bram Kragten <[email protected]>
  • Loading branch information
@wendevlin @bramkragten
wendevlin and bramkragten authored Sep 25, 2024
1 parent cd631e8 commit 254ee85
Show file tree
Hide file tree
Showing 8 changed files with 263 additions and 145 deletions.
24 changes: 18 additions & 6 deletions src/components/ha-dialog-header.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@ export class HaDialogHeader extends LitElement {
<section class="header-navigation-icon">
<slot name="navigationIcon"></slot>
</section>
<section class="header-title">
<slot name="title"></slot>
<section class="header-content">
<div class="header-title">
<slot name="title"></slot>
</div>
<div class="header-subtitle">
<slot name="subtitle"></slot>
</div>
</section>
<section class="header-action-items">
<slot name="actionItems"></slot>
Expand Down Expand Up @@ -39,17 +44,24 @@ export class HaDialogHeader extends LitElement {
padding: 4px;
box-sizing: border-box;
}
.header-title {
.header-content {
flex: 1;
font-size: 22px;
line-height: 28px;
font-weight: 400;
padding: 10px 4px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-title {
font-size: 22px;
line-height: 28px;
font-weight: 400;
}
.header-subtitle {
font-size: 14px;
line-height: 20px;
color: var(--secondary-text-color);
}
@media all and (min-width: 450px) and (min-height: 500px) {
.header-bar {
padding: 12px;
Expand Down
14 changes: 11 additions & 3 deletions src/dialogs/config-flow/show-dialog-data-entry-flow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ export interface FlowConfig {

deleteFlow(hass: HomeAssistant, flowId: string): Promise<unknown>;

renderAbortHeader?(
hass: HomeAssistant,
step: DataEntryFlowStepAbort
): TemplateResult | string;

renderAbortDescription(
hass: HomeAssistant,
step: DataEntryFlowStepAbort
Expand All @@ -39,7 +44,7 @@ export interface FlowConfig {
renderShowFormStepHeader(
hass: HomeAssistant,
step: DataEntryFlowStepForm
): string;
): string | TemplateResult;

renderShowFormStepDescription(
hass: HomeAssistant,
Expand Down Expand Up @@ -95,14 +100,17 @@ export interface FlowConfig {
renderShowFormProgressHeader(
hass: HomeAssistant,
step: DataEntryFlowStepProgress
): string;
): string | TemplateResult;

renderShowFormProgressDescription(
hass: HomeAssistant,
step: DataEntryFlowStepProgress
): TemplateResult | "";

renderMenuHeader(hass: HomeAssistant, step: DataEntryFlowStepMenu): string;
renderMenuHeader(
hass: HomeAssistant,
step: DataEntryFlowStepMenu
): string | TemplateResult;

renderMenuDescription(
hass: HomeAssistant,
Expand Down
6 changes: 5 additions & 1 deletion src/dialogs/config-flow/step-flow-abort.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ class StepFlowAbort extends LitElement {
return nothing;
}
return html`
<h2>${this.hass.localize(`component.${this.domain}.title`)}</h2>
<h2>
${this.params.flowConfig.renderAbortHeader
? this.params.flowConfig.renderAbortHeader(this.hass, this.step)
: this.hass.localize(`component.${this.domain}.title`)}
</h2>
<div class="content">
${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
</div>
Expand Down
63 changes: 63 additions & 0 deletions src/panels/config/repairs/dialog-repairs-issue-subtitle.ts
View file
Original file line number Diff line number Diff line change
@@ -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`
<span>
<span class=${this.issue.severity}> ${severity} </span>
${reportedBy}
</span>
`;
}

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;
}
}
158 changes: 80 additions & 78 deletions src/panels/config/repairs/dialog-repairs-issue.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();
}
Expand All @@ -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;
Expand All @@ -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`
<ha-dialog
<ha-md-dialog
open
@closed=${this.closeDialog}
scrimClickAction
escapeKeyAction
.heading=${createCloseHeading(
this.hass,
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")
)}
@closed=${this._dialogClosed}
aria-labelledby="dialog-repairs-issue-title"
aria-describedby="dialog-repairs-issue-description"
>
<div>
<ha-dialog-header slot="headline">
<ha-icon-button
slot="navigationIcon"
.label=${this.hass.localize("ui.dialogs.generic.close") ?? "Close"}
.path=${mdiClose}
@click=${this.closeDialog}
></ha-icon-button>
<span
slot="title"
id="dialog-repairs-issue-title"
.title=${dialogTitle}
>${dialogTitle}</span
>
<dialog-repairs-issue-subtitle
slot="subtitle"
.hass=${this.hass}
.issue=${this._issue}
></dialog-repairs-issue-subtitle>
</ha-dialog-header>
<div slot="content" class="dialog-content">
${this._issue.breaks_in_ha_version
? html`
<ha-alert alert-type="warning">
Expand All @@ -71,6 +96,7 @@ class DialogRepairsIssue extends LitElement {
`
: ""}
<ha-markdown
id="dialog-repairs-issue-description"
allowsvg
breaks
@click=${this._clickHandler}
Expand All @@ -92,51 +118,39 @@ 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
? formatDateNumeric(
new Date(this._issue.created),
this.hass.locale,
this.hass.config
)
: ""}
</div>
</div>
${this._issue.learn_more_url
? html`
<a
.href=${learnMoreUrlIsHomeAssistant
? this._issue.learn_more_url.replace("homeassistant://", "/")
: this._issue.learn_more_url}
.target=${learnMoreUrlIsHomeAssistant ? "" : "_blank"}
@click=${learnMoreUrlIsHomeAssistant
? this.closeDialog
: undefined}
slot="primaryAction"
rel="noopener noreferrer"
>
<mwc-button
.label=${this.hass!.localize(
"ui.panel.config.repairs.dialog.learn"
)}
></mwc-button>
</a>
`
: ""}
<mwc-button
slot="secondaryAction"
.label=${this._issue!.ignored
? this.hass!.localize("ui.panel.config.repairs.dialog.unignore")
: this.hass!.localize("ui.panel.config.repairs.dialog.ignore")}
@click=${this._ignoreIssue}
></mwc-button>
</ha-dialog>
<div slot="actions">
<ha-button @click=${this._ignoreIssue}>
${this._issue!.ignored
? this.hass!.localize("ui.panel.config.repairs.dialog.unignore")
: this.hass!.localize("ui.panel.config.repairs.dialog.ignore")}
</ha-button>
${this._issue.learn_more_url
? html`
<a
rel="noopener noreferrer"
.href=${learnMoreUrlIsHomeAssistant
? this._issue.learn_more_url.replace(
"homeassistant://",
"/"
)
: this._issue.learn_more_url}
.target=${learnMoreUrlIsHomeAssistant ? "" : "_blank"}
>
<ha-button
@click=${learnMoreUrlIsHomeAssistant
? this.closeDialog
: undefined}
>
${this.hass!.localize(
"ui.panel.config.repairs.dialog.learn"
)}
</ha-button>
</a>
`
: ""}
</div>
</ha-md-dialog>
`;
}

Expand All @@ -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);
}
`,
];
}
Expand Down
Loading

0 comments on commit 254ee85

Please sign in to comment.