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>

src/panels/config/integrations/dialog-add-integration.ts

@@ -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) {

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

@@ -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;
+  }
+}

src/panels/config/integrations/ha-domain-integrations.ts

@@ -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(

src/panels/config/integrations/show-add-integration-dialog.ts

@@ -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,
+  });
+};

src/translations/en.json

@@ -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}",