change yaml integration dialog (#14003)

* change yaml integration dialog

* Update dialog-yaml-integration.ts

* Update src/panels/config/integrations/dialog-yaml-integration.ts

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Bram Kragten 2022-10-05 16:26:06 +02:00 committed by GitHub
parent aaeca323d4
commit 1ac701d1c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 145 additions and 76 deletions

View File

@ -36,10 +36,12 @@ import {
} from "../../../dialogs/generic/show-dialog-box";
import { haStyleDialog, haStyleScrollbar } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import "./ha-domain-integrations";
import "./ha-integration-list-item";
import { AddIntegrationDialogParams } from "./show-add-integration-dialog";
import {
AddIntegrationDialogParams,
showYamlIntegrationDialog,
} from "./show-add-integration-dialog";
export interface IntegrationListItem {
name: string;
@ -545,35 +547,7 @@ class AddIntegrationDialog extends LitElement {
this.hass,
integration.domain
);
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.integrations.config_flow.yaml_only_title"
),
text: this.hass.localize(
"ui.panel.config.integrations.config_flow.yaml_only_text",
{
link:
manifest?.is_built_in || manifest?.documentation
? html`<a
href=${manifest.is_built_in
? documentationUrl(
this.hass,
`/integrations/${manifest.domain}`
)
: manifest.documentation}
target="_blank"
rel="noreferrer noopener"
>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.documentation"
)}</a
>`
: this.hass.localize(
"ui.panel.config.integrations.config_flow.documentation"
),
}
),
});
showYamlIntegrationDialog(this, { manifest });
}
private async _createFlow(integration: IntegrationListItem) {

View File

@ -0,0 +1,96 @@
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 { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { YamlIntegrationDialogParams } from "./show-add-integration-dialog";
@customElement("dialog-yaml-integration")
export class DialogYamlIntegration extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _params?: YamlIntegrationDialogParams;
public showDialog(params: YamlIntegrationDialogParams): void {
this._params = params;
}
public closeDialog() {
this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this._params) {
return html``;
}
const manifest = this._params.manifest;
const docLink = manifest.is_built_in
? documentationUrl(this.hass, `/integrations/${manifest.domain}`)
: manifest.documentation;
return html`
<ha-dialog
open
@closed=${this.closeDialog}
.heading=${this.hass.localize(
"ui.panel.config.integrations.config_flow.yaml_only_title"
)}
>
<p>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.yaml_only"
)}
</p>
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
${this.hass.localize("ui.dialogs.generic.cancel")}
</mwc-button>
${docLink
? html`<a
.href=${docLink}
target="_blank"
rel="noreferrer noopener"
slot="primaryAction"
>
<mwc-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.open_documentation"
)}
</mwc-button>
</a>`
: html`<mwc-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize("ui.dialogs.generic.ok")}
</mwc-button>`}
</ha-dialog>
`;
}
static get styles(): CSSResultGroup {
return css`
:host([inert]) {
pointer-events: initial !important;
cursor: initial !important;
}
a {
text-decoration: none;
}
ha-dialog {
--mdc-dialog-heading-ink-color: var(--primary-text-color);
--mdc-dialog-content-ink-color: var(--primary-text-color);
/* Place above other dialogs */
--dialog-z-index: 104;
}
@media all and (min-width: 600px) {
ha-dialog {
--mdc-dialog-min-width: 400px;
}
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-yaml-integration": DialogYamlIntegration;
}
}

View File

@ -1,8 +1,10 @@
import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item-base";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { fireEvent } from "../../../common/dom/fire_event";
import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
import { navigate } from "../../../common/navigate";
import { caseInsensitiveStringCompare } from "../../../common/string/compare";
import { localizeConfigFlowTitle } from "../../../data/config_flow";
@ -13,12 +15,11 @@ import {
} from "../../../data/integration";
import { Integration } from "../../../data/integrations";
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { brandsUrl } from "../../../util/brands-url";
import { documentationUrl } from "../../../util/documentation-url";
import "./ha-integration-list-item";
import { showYamlIntegrationDialog } from "./show-add-integration-dialog";
const standardToDomain = { zigbee: "zha", zwave: "zwave_js" } as const;
@ -43,7 +44,7 @@ class HaDomainIntegrations extends LitElement {
(flow) => html`<mwc-list-item
graphic="medium"
.flow=${flow}
@click=${this._flowInProgressPicked}
@request-selected=${this._flowInProgressPicked}
hasMeta
>
<img
@ -80,7 +81,7 @@ class HaDomainIntegrations extends LitElement {
return html`<mwc-list-item
graphic="medium"
.domain=${domain}
@click=${this._standardPicked}
@request-selected=${this._standardPicked}
hasMeta
>
<img
@ -129,7 +130,7 @@ class HaDomainIntegrations extends LitElement {
is_built_in: val.is_built_in !== false,
cloud: val.iot_class?.startsWith("cloud_"),
}}
@click=${this._integrationPicked}
@request-selected=${this._integrationPicked}
>
</ha-integration-list-item>`
)
@ -138,7 +139,7 @@ class HaDomainIntegrations extends LitElement {
? html`<mwc-list-item
graphic="medium"
.domain=${this.domain}
@click=${this._standardPicked}
@request-selected=${this._standardPicked}
hasMeta
>
<img
@ -164,7 +165,7 @@ class HaDomainIntegrations extends LitElement {
? html`${this.flowsInProgress?.length
? html`<mwc-list-item
.domain=${this.domain}
@click=${this._integrationPicked}
@request-selected=${this._integrationPicked}
hasMeta
>
${this.hass.localize("ui.panel.config.integrations.new_flow", {
@ -186,15 +187,18 @@ class HaDomainIntegrations extends LitElement {
is_built_in: this.integration.is_built_in !== false,
cloud: this.integration.iot_class?.startsWith("cloud_"),
}}
@click=${this._integrationPicked}
@request-selected=${this._integrationPicked}
>
</ha-integration-list-item>`}`
: ""}
</mwc-list> `;
}
private async _integrationPicked(ev) {
const domain = ev.currentTarget.domain;
private async _integrationPicked(ev: CustomEvent<RequestSelectedDetail>) {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
const domain = (ev.currentTarget as any).domain;
if (
["cloud", "google_assistant", "alexa"].includes(domain) &&
@ -213,37 +217,10 @@ class HaDomainIntegrations extends LitElement {
this.integration!.integrations?.[domain]?.config_flow === false
) {
const manifest = await fetchIntegrationManifest(this.hass, domain);
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.integrations.config_flow.yaml_only_title"
),
text: this.hass.localize(
"ui.panel.config.integrations.config_flow.yaml_only_text",
{
link:
manifest?.is_built_in || manifest?.documentation
? html`<a
href=${manifest.is_built_in
? documentationUrl(
this.hass,
`/integrations/${manifest.domain}`
)
: manifest.documentation}
target="_blank"
rel="noreferrer noopener"
>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.documentation"
)}</a
>`
: this.hass.localize(
"ui.panel.config.integrations.config_flow.documentation"
),
}
),
});
showYamlIntegrationDialog(this, { manifest });
return;
}
const root = this.getRootNode();
showConfigFlowDialog(
root instanceof ShadowRoot ? (root.host as HTMLElement) : this,
@ -256,8 +233,11 @@ class HaDomainIntegrations extends LitElement {
fireEvent(this, "close-dialog");
}
private async _flowInProgressPicked(ev) {
const flow: DataEntryFlowProgress = ev.currentTarget.flow;
private async _flowInProgressPicked(ev: CustomEvent<RequestSelectedDetail>) {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
const flow: DataEntryFlowProgress = (ev.currentTarget as any).flow;
const root = this.getRootNode();
showConfigFlowDialog(
root instanceof ShadowRoot ? (root.host as HTMLElement) : this,
@ -270,8 +250,11 @@ class HaDomainIntegrations extends LitElement {
fireEvent(this, "close-dialog");
}
private _standardPicked(ev) {
const domain = ev.currentTarget.domain;
private _standardPicked(ev: CustomEvent<RequestSelectedDetail>) {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
const domain = (ev.currentTarget as any).domain;
const root = this.getRootNode();
fireEvent(this, "close-dialog");
protocolIntegrationPicked(

View File

@ -1,10 +1,15 @@
import { fireEvent } from "../../../common/dom/fire_event";
import { IntegrationManifest } from "../../../data/integration";
export interface AddIntegrationDialogParams {
brand?: string;
initialFilter?: string;
}
export interface YamlIntegrationDialogParams {
manifest: IntegrationManifest;
}
export const showAddIntegrationDialog = (
element: HTMLElement,
dialogParams?: AddIntegrationDialogParams
@ -15,3 +20,14 @@ export const showAddIntegrationDialog = (
dialogParams: dialogParams,
});
};
export const showYamlIntegrationDialog = (
element: HTMLElement,
dialogParams?: YamlIntegrationDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-yaml-integration",
dialogImport: () => import("./dialog-yaml-integration"),
dialogParams: dialogParams,
});
};

View File

@ -2965,8 +2965,8 @@
"next": "Next",
"found_following_devices": "We found the following devices",
"yaml_only_title": "This device can not be added from the UI",
"yaml_only_text": "You can add this device by adding it to your `configuration.yaml`. See the {link} for more information.",
"documentation": "documentation",
"yaml_only": "You can add this device by adding it to your ''configuration.yaml''. See the documentation for more information.",
"open_documentation": "Open documentation",
"no_config_flow": "This integration does not support configuration via the UI. If you followed this link from the Home Assistant website, make sure you run the latest version of Home Assistant.",
"not_all_required_fields": "Not all required fields are filled in.",
"error_saving_area": "Error saving area: {error}",