Update discovered/disabled/ignored integrations (#17107)

src/panels/config/integrations/ha-config-flow-card.ts

@@ -1,15 +1,10 @@
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
+import { mdiBookshelf, mdiCog, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import {
-  mdiBookshelf,
-  mdiCog,
-  mdiDotsVertical,
-  mdiEyeOff,
-  mdiOpenInNew,
-} from "@mdi/js";
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import {
   ATTENTION_SOURCES,
   DISCOVERY_SOURCES,
@@ -17,13 +12,12 @@ import {
   localizeConfigFlowTitle,
 } from "../../../data/config_flow";
 import type { IntegrationManifest } from "../../../data/integration";
-import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
 import "./ha-integration-action-card";
-import { documentationUrl } from "../../../util/documentation-url";
 
 @customElement("ha-config-flow-card")
 export class HaConfigFlowCard extends LitElement {
@@ -38,16 +32,10 @@ export class HaConfigFlowCard extends LitElement {
     return html`
       <ha-integration-action-card
         class=${classMap({
-          discovered: !attention,
           attention: attention,
         })}
         .hass=${this.hass}
         .manifest=${this.manifest}
-        .banner=${this.hass.localize(
-          `ui.panel.config.integrations.${
-            attention ? "attention" : "discovered"
-          }`
-        )}
         .domain=${this.flow.handler}
         .label=${this.flow.localized_title}
       >
@@ -60,72 +48,75 @@ export class HaConfigFlowCard extends LitElement {
             }`
           )}
         ></mwc-button>
-        <ha-button-menu slot="header-button">
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-          ${this.flow.context.configuration_url
-            ? html`<a
-                href=${this.flow.context.configuration_url.replace(
-                  /^homeassistant:\/\//,
-                  ""
-                )}
-                rel="noreferrer"
-                target=${this.flow.context.configuration_url.startsWith(
-                  "homeassistant://"
-                )
-                  ? "_self"
-                  : "_blank"}
-              >
-                <mwc-list-item graphic="icon" hasMeta>
-                  ${this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.open_configuration_url"
-                  )}
-                  <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-                  <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-                </mwc-list-item>
-              </a>`
-            : ""}
-          ${this.manifest
-            ? html`<a
-                href=${this.manifest.is_built_in
-                  ? documentationUrl(
-                      this.hass,
-                      `/integrations/${this.manifest.domain}`
+        ${DISCOVERY_SOURCES.includes(this.flow.context.source) &&
+        this.flow.context.unique_id
+          ? html`<mwc-button
+              @click=${this._ignoreFlow}
+              .label=${this.hass.localize(
+                `ui.panel.config.integrations.ignore.ignore`
+              )}
+            ></mwc-button>`
+          : ""}
+        ${this.flow.context.configuration_url || this.manifest
+          ? html`<ha-button-menu slot="header-button">
+              <ha-icon-button
+                slot="trigger"
+                .label=${this.hass.localize("ui.common.menu")}
+                .path=${mdiDotsVertical}
+              ></ha-icon-button>
+              ${this.flow.context.configuration_url
+                ? html`<a
+                    href=${this.flow.context.configuration_url.replace(
+                      /^homeassistant:\/\//,
+                      ""
+                    )}
+                    rel="noreferrer"
+                    target=${this.flow.context.configuration_url.startsWith(
+                      "homeassistant://"
                     )
-                  : this.manifest.documentation}
-                rel="noreferrer"
-                target="_blank"
-              >
-                <mwc-list-item graphic="icon" hasMeta>
-                  ${this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.documentation"
-                  )}
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiBookshelf}
-                  ></ha-svg-icon>
-                  <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-                </mwc-list-item>
-              </a>`
-            : ""}
-          ${DISCOVERY_SOURCES.includes(this.flow.context.source) &&
-          this.flow.context.unique_id
-            ? html`
-                <mwc-list-item
-                  graphic="icon"
-                  @request-selected=${this._ignoreFlow}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.integrations.ignore.ignore"
-                  )}
-                  <ha-svg-icon slot="graphic" .path=${mdiEyeOff}></ha-svg-icon>
-                </mwc-list-item>
-              `
-            : ""}
-        </ha-button-menu>
+                      ? "_self"
+                      : "_blank"}
+                  >
+                    <mwc-list-item graphic="icon" hasMeta>
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.config_entry.open_configuration_url"
+                      )}
+                      <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+                      <ha-svg-icon
+                        slot="meta"
+                        .path=${mdiOpenInNew}
+                      ></ha-svg-icon>
+                    </mwc-list-item>
+                  </a>`
+                : ""}
+              ${this.manifest
+                ? html`<a
+                    href=${this.manifest.is_built_in
+                      ? documentationUrl(
+                          this.hass,
+                          `/integrations/${this.manifest.domain}`
+                        )
+                      : this.manifest.documentation}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <mwc-list-item graphic="icon" hasMeta>
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.config_entry.documentation"
+                      )}
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${mdiBookshelf}
+                      ></ha-svg-icon>
+                      <ha-svg-icon
+                        slot="meta"
+                        .path=${mdiOpenInNew}
+                      ></ha-svg-icon>
+                    </mwc-list-item>
+                  </a>`
+                : ""}
+            </ha-button-menu>`
+          : ""}
       </ha-integration-action-card>
     `;
   }
@@ -174,14 +165,6 @@ export class HaConfigFlowCard extends LitElement {
   }
 
   static styles = css`
-    .attention {
-      --state-color: var(--error-color);
-      --text-on-state-color: var(--text-primary-color);
-    }
-    .discovered {
-      --state-color: var(--primary-color);
-      --text-on-state-color: var(--text-primary-color);
-    }
     a {
       text-decoration: none;
       color: var(--primary-color);

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

@@ -377,46 +377,57 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
               </div>
             `}
         ${this._showIgnored
-          ? html`<div class="container">
-              ${ignoredConfigEntries.map(
-                (entry: ConfigEntryExtended) => html`
-                  <ha-ignored-config-entry-card
-                    .hass=${this.hass}
-                    .manifest=${this._manifests[entry.domain]}
-                    .entry=${entry}
-                    @change=${this._handleFlowUpdated}
-                  ></ha-ignored-config-entry-card>
-                `
-              )}
-            </div>`
+          ? html`<h1>
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.ignore.ignored"
+                )}
+              </h1>
+              <div class="container">
+                ${ignoredConfigEntries.map(
+                  (entry: ConfigEntryExtended) => html`
+                    <ha-ignored-config-entry-card
+                      .hass=${this.hass}
+                      .manifest=${this._manifests[entry.domain]}
+                      .entry=${entry}
+                      @change=${this._handleFlowUpdated}
+                    ></ha-ignored-config-entry-card>
+                  `
+                )}
+              </div>`
           : ""}
         ${configEntriesInProgress.length
-          ? html`<div class="container">
-              ${configEntriesInProgress.map(
-                (flow: DataEntryFlowProgressExtended) => html`
-                  <ha-config-flow-card
-                    .hass=${this.hass}
-                    .manifest=${this._manifests[flow.handler]}
-                    .flow=${flow}
-                    @change=${this._handleFlowUpdated}
-                  ></ha-config-flow-card>
-                `
-              )}
-            </div>`
+          ? html`<h1>
+                ${this.hass.localize("ui.panel.config.integrations.discovered")}
+              </h1>
+              <div class="container">
+                ${configEntriesInProgress.map(
+                  (flow: DataEntryFlowProgressExtended) => html`
+                    <ha-config-flow-card
+                      .hass=${this.hass}
+                      .manifest=${this._manifests[flow.handler]}
+                      .flow=${flow}
+                      @change=${this._handleFlowUpdated}
+                    ></ha-config-flow-card>
+                  `
+                )}
+              </div>`
           : ""}
         ${this._showDisabled
-          ? html`<div class="container">
-              ${disabledConfigEntries.map(
-                (entry: ConfigEntryExtended) => html`
-                  <ha-disabled-config-entry-card
-                    .hass=${this.hass}
-                    .entry=${entry}
-                    .manifest=${this._manifests[entry.domain]}
-                    .entityRegistryEntries=${this._entityRegistryEntries}
-                  ></ha-disabled-config-entry-card>
-                `
-              )}
-            </div>`
+          ? html`<h1>
+                ${this.hass.localize("ui.panel.config.integrations.disabled")}
+              </h1>
+              <div class="container">
+                ${disabledConfigEntries.map(
+                  (entry: ConfigEntryExtended) => html`
+                    <ha-disabled-config-entry-card
+                      .hass=${this.hass}
+                      .entry=${entry}
+                      .manifest=${this._manifests[entry.domain]}
+                      .entityRegistryEntries=${this._entityRegistryEntries}
+                    ></ha-disabled-config-entry-card>
+                  `
+                )}
+              </div>`
           : ""}
         <div class="container">
           ${integrations.length
@@ -756,6 +767,8 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
         .empty-message {
           margin: auto;
           text-align: center;
+          grid-column-start: 1;
+          grid-column-end: -1;
         }
         .empty-message h1 {
           margin-bottom: 0;
@@ -851,6 +864,9 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
         .menu-badge-container {
           position: relative;
         }
+        h1 {
+          margin: 8px 0 0 16px;
+        }
         ha-button-menu {
           color: var(--primary-text-color);
         }

src/panels/config/integrations/ha-integration-action-card.ts

@@ -1,9 +1,14 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { IntegrationManifest } from "../../../data/integration";
+import {
+  domainToName,
+  type IntegrationManifest,
+} from "../../../data/integration";
 import type { HomeAssistant } from "../../../types";
 import "./ha-integration-header";
 import "../../../components/ha-card";
+import { brandsUrl } from "../../../util/brands-url";
+import { haStyle } from "../../../resources/styles";
 
 @customElement("ha-integration-action-card")
 export class HaIntegrationActionCard extends LitElement {
@@ -22,49 +27,94 @@ export class HaIntegrationActionCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card outlined>
-        <ha-integration-header
-          .hass=${this.hass}
-          .banner=${this.banner}
-          .domain=${this.domain}
-          .label=${this.label}
-          .localizedDomainName=${this.localizedDomainName}
-          .manifest=${this.manifest}
-        >
-          <span slot="header-button"><slot name="header-button"></slot></span>
-        </ha-integration-header>
+        <div class="card-content">
+          <img
+            alt=""
+            src=${brandsUrl({
+              domain: this.domain,
+              type: "icon",
+              darkOptimized: this.hass.themes?.darkMode,
+            })}
+            referrerpolicy="no-referrer"
+            @error=${this._onImageError}
+            @load=${this._onImageLoad}
+          />
+          <h2>${this.label}</h2>
+          <h3>
+            ${this.localizedDomainName ||
+            domainToName(this.hass.localize, this.domain, this.manifest)}
+          </h3>
+        </div>
         <div class="filler"></div>
-        <div class="actions"><slot></slot></div>
+        <div class="card-actions"><slot></slot></div>
+        <div class="header-button"><slot name="header-button"></slot></div>
       </ha-card>
     `;
   }
 
-  static styles = css`
-    ha-card {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      --ha-card-border-color: var(--state-color);
-      --mdc-theme-primary: var(--state-color);
-    }
-    .filler {
-      flex: 1;
-    }
-    .attention {
-      --state-color: var(--error-color);
-      --text-on-state-color: var(--text-primary-color);
-    }
-    .discovered {
-      --state-color: var(--primary-color);
-      --text-on-state-color: var(--text-primary-color);
-    }
-    .actions {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 6px 0;
-      height: 48px;
-    }
-  `;
+  private _onImageLoad(ev) {
+    ev.target.style.visibility = "initial";
+  }
+
+  private _onImageError(ev) {
+    ev.target.style.visibility = "hidden";
+  }
+
+  static styles = [
+    haStyle,
+    css`
+      ha-card {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      img {
+        width: 40px;
+        height: 40px;
+      }
+      h2 {
+        font-size: 16px;
+        font-weight: 400;
+        margin-top: 8px;
+        margin-bottom: 0;
+      }
+      h3 {
+        font-size: 14px;
+        margin: 0;
+      }
+      .header-button {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      }
+      .filler {
+        flex: 1;
+      }
+      .attention {
+        --state-color: var(--error-color);
+        --text-on-state-color: var(--text-primary-color);
+      }
+      .card-content {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+      }
+      .card-actions {
+        border-top: none;
+        padding-top: 0;
+        padding-bottom: 16px;
+        justify-content: center;
+        display: flex;
+      }
+      :host ::slotted(*) {
+        margin-right: 8px;
+      }
+      :host ::slotted(:last-child) {
+        margin-right: 0;
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/integrations/ha-integration-header.ts

@@ -10,10 +10,6 @@ import { brandsUrl } from "../../../util/brands-url";
 export class HaIntegrationHeader extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public banner?: string;
-
-  @property() public label?: string;
-
   @property() public error?: string;
 
   @property() public warning?: string;
@@ -25,25 +21,11 @@ export class HaIntegrationHeader extends LitElement {
   @property({ attribute: false }) public manifest?: IntegrationManifest;
 
   protected render(): TemplateResult {
-    let primary: string;
-    let secondary: string | undefined;
-
     const domainName =
       this.localizedDomainName ||
       domainToName(this.hass.localize, this.domain, this.manifest);
 
-    if (this.label) {
-      primary = this.label;
-      secondary =
-        primary.toLowerCase() === domainName.toLowerCase()
-          ? undefined
-          : domainName;
-    } else {
-      primary = domainName;
-    }
-
     return html`
-      ${!this.banner ? "" : html`<div class="banner">${this.banner}</div>`}
       <div class="header">
         <img
           alt=""
@@ -62,7 +44,7 @@ export class HaIntegrationHeader extends LitElement {
             role="heading"
             aria-level="1"
           >
-            ${primary}
+            ${domainName}
           </div>
           ${this.error
             ? html`<div class="error">
@@ -74,8 +56,6 @@ export class HaIntegrationHeader extends LitElement {
                 <ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>${this
                   .warning}
               </div>`
-            : secondary
-            ? html`<div class="secondary">${secondary}</div>`
             : nothing}
         </div>
         <div class="header-button">
@@ -94,16 +74,6 @@ export class HaIntegrationHeader extends LitElement {
   }
 
   static styles = css`
-    .banner {
-      background-color: var(--state-color);
-      color: var(--text-on-state-color);
-      text-align: center;
-      padding: 2px;
-
-      /* Padding is subtracted for nested elements with border radiuses */
-      border-top-left-radius: calc(var(--ha-card-border-radius, 12px) - 2px);
-      border-top-right-radius: calc(var(--ha-card-border-radius, 12px) - 2px);
-    }
     .header {
       display: flex;
       position: relative;
@@ -126,8 +96,7 @@ export class HaIntegrationHeader extends LitElement {
     }
     .primary,
     .warning,
-    .error,
-    .secondary {
+    .error {
       word-wrap: break-word;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -152,10 +121,6 @@ export class HaIntegrationHeader extends LitElement {
       -webkit-line-clamp: 1;
       font-size: 0.9em;
     }
-    .secondary {
-      font-size: 14px;
-      color: var(--secondary-text-color);
-    }
     .error ha-svg-icon {
       margin-right: 4px;
       color: var(--error-color);

src/translations/en.json

@@ -3301,6 +3301,7 @@
           "description": "Manage integrations with services or devices",
           "integration": "integration",
           "discovered": "Discovered",
+          "disabled": "Disabled",
           "available_integrations": "Available integrations",
           "new_flow": "Setup another instance of {integration}",
           "attention": "Attention required",