Allow config entries to show the reason (#8974)

gallery/src/demos/demo-integration-card.ts

@@ -39,6 +39,7 @@ const createConfigEntry = (
   supports_options: false,
   supports_unload: true,
   disabled_by: null,
+  reason: null,
   ...override,
 });
 
@@ -76,6 +77,10 @@ const migrationErrorEntry = createConfigEntry("Migration Error", {
 const setupRetryEntry = createConfigEntry("Setup Retry", {
   state: "setup_retry",
 });
+const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "Unable to connect",
+});
 const failedUnloadEntry = createConfigEntry("Failed Unload", {
   state: "failed_unload",
 });
@@ -135,6 +140,7 @@ const configEntries: Array<{
   { items: [setupErrorEntry] },
   { items: [migrationErrorEntry] },
   { items: [setupRetryEntry] },
+  { items: [setupRetryReasonEntry] },
   { items: [failedUnloadEntry] },
   { items: [notLoadedEntry] },
   {

src/data/config_entries.ts

@@ -16,6 +16,7 @@ export interface ConfigEntry {
   supports_options: boolean;
   supports_unload: boolean;
   disabled_by: "user" | null;
+  reason: string | null;
 }
 
 export interface ConfigEntryMutableParams {

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

@@ -199,14 +199,16 @@ export class HaIntegrationCard extends LitElement {
       stateText = [
         `ui.panel.config.integrations.config_entry.state.${item.state}`,
       ];
-      stateTextExtra = html`
-        <br />
-        <a href="/config/logs"
-          >${this.hass.localize(
-            "ui.panel.config.integrations.config_entry.check_the_logs"
-          )}</a
-        >
-      `;
+      stateTextExtra = item.reason
+        ? html`: ${item.reason}`
+        : html`
+            <br />
+            <a href="/config/logs"
+              >${this.hass.localize(
+                "ui.panel.config.integrations.config_entry.check_the_logs"
+              )}</a
+            >
+          `;
     }
 
     return html`