Replace integration error/warning banner with subtitle (#17103)

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

@@ -746,7 +746,7 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
         }
         .container {
           display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
           grid-gap: 8px 8px;
           padding: 8px 16px 16px;
         }

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

@@ -97,7 +97,13 @@ export class HaIntegrationCard extends LitElement {
             .hass=${this.hass}
             .domain=${this.domain}
             .localizedDomainName=${this.items[0].localized_domain_name}
-            .banner=${entryState !== "loaded"
+            .error=${ERROR_STATES.includes(entryState)
+              ? this.hass.localize(
+                  `ui.panel.config.integrations.config_entry.state.${entryState}`
+                )
+              : undefined}
+            .warning=${entryState !== "loaded" &&
+            !ERROR_STATES.includes(entryState)
               ? this.hass.localize(
                   `ui.panel.config.integrations.config_entry.state.${entryState}`
                 )
@@ -317,9 +323,12 @@ export class HaIntegrationCard extends LitElement {
           --text-on-state-color: var(--primary-text-color);
         }
         .state-not-loaded {
+          opacity: 0.8;
+          --state-color: var(--warning-color);
           --state-message-color: var(--primary-text-color);
         }
         .state-setup {
+          opacity: 0.8;
           --state-message-color: var(--secondary-text-color);
         }
         :host(.highlight) ha-card {

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

@@ -1,4 +1,5 @@
-import { LitElement, TemplateResult, css, html } from "lit";
+import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
+import { LitElement, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-svg-icon";
 import { IntegrationManifest, domainToName } from "../../../data/integration";
@@ -13,6 +14,10 @@ export class HaIntegrationHeader extends LitElement {
 
   @property() public label?: string;
 
+  @property() public error?: string;
+
+  @property() public warning?: string;
+
   @property() public localizedDomainName?: string;
 
   @property() public domain!: string;
@@ -52,8 +57,26 @@ export class HaIntegrationHeader extends LitElement {
           @load=${this._onImageLoad}
         />
         <div class="info">
-          <div class="primary" role="heading">${primary}</div>
-          <div class="secondary">${secondary}</div>
+          <div
+            class="primary ${this.warning || this.error ? "hasError" : ""}"
+            role="heading"
+            aria-level="1"
+          >
+            ${primary}
+          </div>
+          ${this.error
+            ? html`<div class="error">
+                <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>${this
+                  .error}
+              </div>`
+            : this.warning
+            ? html`<div class="warning">
+                <ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>${this
+                  .warning}
+              </div>`
+            : secondary
+            ? html`<div class="secondary">${secondary}</div>`
+            : nothing}
         </div>
         <div class="header-button">
           <slot name="header-button"></slot>
@@ -101,30 +124,52 @@ export class HaIntegrationHeader extends LitElement {
       flex: 1;
       align-self: center;
     }
-    .header .info div {
+    .primary,
+    .warning,
+    .error,
+    .secondary {
       word-wrap: break-word;
       display: -webkit-box;
       -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .header-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-    }
     .primary {
       font-size: 16px;
       font-weight: 400;
       word-break: break-word;
       color: var(--primary-text-color);
+      -webkit-line-clamp: 2;
+    }
+    .hasError {
+      -webkit-line-clamp: 1;
+      font-size: 14px;
+    }
+    .warning,
+    .error {
+      line-height: 20px;
+      --mdc-icon-size: 20px;
+      -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);
+    }
+    .warning ha-svg-icon {
+      margin-right: 4px;
+      color: var(--warning-color);
+    }
+    .header-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+    }
   `;
 }
 

src/translations/en.json

@@ -3420,7 +3420,7 @@
               "loaded": "Loaded",
               "setup_error": "Failed to set up",
               "migration_error": "Migration error",
-              "setup_retry": "Retrying setup",
+              "setup_retry": "Failed setup, will retry",
               "not_loaded": "Not loaded",
               "failed_unload": "Failed to unload",
               "setup_in_progress": "Initializing"