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