mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +00:00
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:
parent
aaeca323d4
commit
1ac701d1c8
@ -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) {
|
||||
|
96
src/panels/config/integrations/dialog-yaml-integration.ts
Normal file
96
src/panels/config/integrations/dialog-yaml-integration.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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(
|
||||
|
@ -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,
|
||||
});
|
||||
};
|
||||
|
@ -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}",
|
||||
|
Loading…
x
Reference in New Issue
Block a user