Migrate config-integrations dialog(s) to wa

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

@@ -1,11 +1,9 @@
-import { mdiClose } from "@mdi/js";
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -17,10 +15,10 @@ import {
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
-import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-list";
 import "../../../components/ha-spinner";
+import "../../../components/ha-wa-dialog";
 import "../../../components/search-input";
 import { getConfigEntries } from "../../../data/config_entries";
 import {
@@ -145,6 +143,9 @@ class AddIntegrationDialog extends LitElement {
 
   public closeDialog() {
     this._open = false;
+  }
+
+  private _dialogClosed() {
     this._integrations = undefined;
     this._helpers = undefined;
     this._pickedBrand = undefined;
@@ -361,7 +362,7 @@ class AddIntegrationDialog extends LitElement {
   }
 
   protected render() {
-    if (!this._open) {
+    if (!this._open && !this._integrations && !this._helpers) {
       return nothing;
     }
     const integrations = this._integrations
@@ -373,20 +374,38 @@ class AddIntegrationDialog extends LitElement {
         findIntegration(this._integrations, this._pickedBrand)
       : undefined;
 
-    return html`<ha-dialog
-      open
-      @closed=${this.closeDialog}
-      hideActions
-      .heading=${createCloseHeading(
-        this.hass,
-        this.hass.localize("ui.panel.config.integrations.new")
-      )}
+    const showingBrandView =
+      (this._pickedBrand && (!this._integrations || pickedIntegration)) ||
+      this._showDiscovered;
+
+    const flowsInProgress = showingBrandView
+      ? this._getFlowsForCurrentView(pickedIntegration)
+      : [];
+
+    const headerTitle = showingBrandView
+      ? this._getBrandHeading(pickedIntegration, flowsInProgress)
+      : this.hass.localize("ui.panel.config.integrations.new");
+
+    return html`<ha-wa-dialog
+      .hass=${this.hass}
+      .open=${this._open}
+      header-title=${headerTitle}
+      @closed=${this._dialogClosed}
     >
-      ${(this._pickedBrand && (!this._integrations || pickedIntegration)) ||
-      this._showDiscovered
-        ? this._renderBrandView(pickedIntegration)
+      ${showingBrandView
+        ? html`
+            ${!this._openedDirectly
+              ? html`
+                  <ha-icon-button-prev
+                    slot="headerNavigationIcon"
+                    @click=${this._prevClicked}
+                  ></ha-icon-button-prev>
+                `
+              : nothing}
+            ${this._renderBrandView(pickedIntegration, flowsInProgress)}
+          `
         : this._renderAll(integrations)}
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 
   private _getFlowsForCurrentView(
@@ -413,61 +432,53 @@ class AddIntegrationDialog extends LitElement {
     return this._getFlowsInProgressForDomains(domains);
   }
 
-  private _renderBrandView(
-    integration: Brand | Integration | undefined
-  ): TemplateResult {
-    const flowsInProgress = this._getFlowsForCurrentView(integration);
-
-    let heading: string;
+  private _getBrandHeading(
+    integration: Brand | Integration | undefined,
+    flowsInProgress: DataEntryFlowProgress[]
+  ): string {
     if (
       integration?.iot_standards &&
       !("integrations" in integration) &&
       !flowsInProgress.length
     ) {
-      heading = this.hass.localize(
+      return this.hass.localize(
         "ui.panel.config.integrations.what_device_type"
       );
-    } else if (
+    }
+
+    if (
       integration &&
       !integration?.iot_standards &&
       !("integrations" in integration) &&
       flowsInProgress.length
     ) {
-      heading = this.hass.localize(
+      return this.hass.localize(
         "ui.panel.config.integrations.confirm_add_discovered"
       );
-    } else {
-      heading = this.hass.localize("ui.panel.config.integrations.what_to_add");
     }
 
-    return html`<div slot="heading">
-        ${this._openedDirectly
-          ? html`<ha-icon-button
-              class="header-close-button"
-              .label=${this.hass.localize("ui.common.close")}
-              .path=${mdiClose}
-              dialogAction="close"
-            ></ha-icon-button>`
-          : html`<ha-icon-button-prev
-              @click=${this._prevClicked}
-            ></ha-icon-button-prev>`}
-        <h2 class="mdc-dialog__title">${heading}</h2>
-      </div>
-      <ha-domain-integrations
-        .hass=${this.hass}
-        .domain=${this._pickedBrand}
-        .integration=${integration}
-        .flowsInProgress=${flowsInProgress}
-        .navigateToResult=${this._navigateToResult}
-        .showManageLink=${this._showDiscovered}
-        style=${styleMap({
-          minWidth: `${this._width}px`,
-          minHeight: `581px`,
-        })}
-        @close-dialog=${this.closeDialog}
-        @supported-by=${this._handleSupportedByEvent}
-        @select-brand=${this._handleSelectBrandEvent}
-      ></ha-domain-integrations>`;
+    return this.hass.localize("ui.panel.config.integrations.what_to_add");
+  }
+
+  private _renderBrandView(
+    integration: Brand | Integration | undefined,
+    flowsInProgress: DataEntryFlowProgress[]
+  ): TemplateResult {
+    return html`<ha-domain-integrations
+      .hass=${this.hass}
+      .domain=${this._pickedBrand}
+      .integration=${integration}
+      .flowsInProgress=${flowsInProgress}
+      .navigateToResult=${this._navigateToResult}
+      .showManageLink=${this._showDiscovered}
+      style=${styleMap({
+        minWidth: `${this._width}px`,
+        minHeight: `581px`,
+      })}
+      @close-dialog=${this.closeDialog}
+      @supported-by=${this._handleSupportedByEvent}
+      @select-brand=${this._handleSelectBrandEvent}
+    ></ha-domain-integrations>`;
   }
 
   private _handleSelectBrandEvent(ev: CustomEvent) {
@@ -524,7 +535,7 @@ class AddIntegrationDialog extends LitElement {
   private _renderAll(integrations?: IntegrationListItem[]): TemplateResult {
     return html`<search-input
         .hass=${this.hass}
-        dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
+        ?autofocus=${!this._narrow}
         .filter=${this._filter}
         @value-changed=${this._filterChanged}
         .label=${this.hass.localize(
@@ -533,9 +544,7 @@ class AddIntegrationDialog extends LitElement {
         @keypress=${this._maybeSubmit}
       ></search-input>
       ${integrations
-        ? html`<ha-list
-            dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
-          >
+        ? html`<ha-list ?autofocus=${this._narrow}>
             <lit-virtualizer
               scroller
               tabindex="-1"
@@ -809,12 +818,7 @@ class AddIntegrationDialog extends LitElement {
     haStyleScrollbar,
     haStyleDialog,
     css`
-      @media all and (min-width: 550px) {
-        ha-dialog {
-          --mdc-dialog-min-width: 500px;
-        }
-      }
-      ha-dialog {
+      ha-wa-dialog {
         --dialog-content-padding: 0;
       }
       search-input {
@@ -824,10 +828,6 @@ class AddIntegrationDialog extends LitElement {
       .divider {
         border-bottom-color: var(--divider-color);
       }
-      h2 {
-        padding-inline-end: 66px;
-        direction: var(--direction);
-      }
       p {
         text-align: center;
         padding: 16px;
@@ -853,43 +853,6 @@ class AddIntegrationDialog extends LitElement {
       ha-integration-list-item {
         width: 100%;
       }
-      ha-icon-button-prev,
-      .header-close-button {
-        color: var(--secondary-text-color);
-        position: absolute;
-        left: 16px;
-        top: 14px;
-        inset-inline-end: initial;
-        inset-inline-start: 16px;
-        direction: var(--direction);
-      }
-      .mdc-dialog__title {
-        margin: 0;
-        margin-bottom: 8px;
-        margin-left: 48px;
-        margin-inline-start: 48px;
-        margin-inline-end: initial;
-        padding: 24px 24px 0 24px;
-        color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
-        font-size: var(
-          --mdc-typography-headline6-font-size,
-          var(--ha-font-size-l)
-        );
-        line-height: var(--mdc-typography-headline6-line-height, 2rem);
-        font-weight: var(
-          --mdc-typography-headline6-font-weight,
-          var(--ha-font-weight-medium)
-        );
-        letter-spacing: var(
-          --mdc-typography-headline6-letter-spacing,
-          0.0125em
-        );
-        text-decoration: var(
-          --mdc-typography-headline6-text-decoration,
-          inherit
-        );
-        text-transform: var(--mdc-typography-headline6-text-transform, inherit);
-      }
     `,
   ];
 }

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

@@ -4,8 +4,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { YamlIntegrationDialogParams } from "./show-add-integration-dialog";
-import "../../../components/ha-dialog";
 import "../../../components/ha-button";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
 
 @customElement("dialog-yaml-integration")
 export class DialogYamlIntegration extends LitElement {
@@ -13,11 +14,18 @@ export class DialogYamlIntegration extends LitElement {
 
   @state() private _params?: YamlIntegrationDialogParams;
 
+  @state() private _open = false;
+
   public showDialog(params: YamlIntegrationDialogParams): void {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -31,43 +39,50 @@ export class DialogYamlIntegration extends LitElement {
       ? documentationUrl(this.hass, `/integrations/${manifest.domain}`)
       : manifest.documentation;
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${this.hass.localize(
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
           "ui.panel.config.integrations.config_flow.yaml_only_title"
         )}
+        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize(
             "ui.panel.config.integrations.config_flow.yaml_only"
           )}
         </p>
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        ${docLink
-          ? html`<ha-button
-              appearance="plain"
-              href=${docLink}
-              target="_blank"
-              rel="noreferrer noopener"
-              slot="primaryAction"
-              @click=${this.closeDialog}
-              dialogInitialFocus
-            >
-              ${this.hass.localize(
-                "ui.panel.config.integrations.config_flow.open_documentation"
-              )}
-            </ha-button>`
-          : html`<ha-button @click=${this.closeDialog} dialogInitialFocus>
-              ${this.hass.localize("ui.common.ok")}
-            </ha-button>`}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          ${docLink
+            ? html`<ha-button
+                slot="primaryAction"
+                appearance="plain"
+                href=${docLink}
+                target="_blank"
+                rel="noreferrer noopener"
+                @click=${this.closeDialog}
+                autofocus
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.config_flow.open_documentation"
+                )}
+              </ha-button>`
+            : html`<ha-button
+                slot="primaryAction"
+                @click=${this.closeDialog}
+                autofocus
+              >
+                ${this.hass.localize("ui.common.ok")}
+              </ha-button>`}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -79,15 +94,10 @@ export class DialogYamlIntegration extends LitElement {
     a {
       text-decoration: none;
     }
-    ha-dialog {
+    ha-wa-dialog {
       /* Place above other dialogs */
       --dialog-z-index: 104;
     }
-    @media all and (min-width: 600px) {
-      ha-dialog {
-        --mdc-dialog-min-width: 400px;
-      }
-    }
   `;
 }