Show if config entry is not loaded (#8717)

src/data/data_entry_flow.ts

@@ -1,4 +1,5 @@
 import { HaFormSchema } from "../components/ha-form/ha-form";
+import { ConfigEntry } from "./config_entries";
 
 export interface DataEntryFlowProgressedEvent {
   type: "data_entry_flow_progressed";
@@ -44,8 +45,7 @@ export interface DataEntryFlowStepCreateEntry {
   flow_id: string;
   handler: string;
   title: string;
-  // Config entry ID
+  result: ConfigEntry;
-  result: string;
   description: string;
   description_placeholders: Record<string, string>;
 }

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -315,7 +315,7 @@ class DataEntryFlowDialog extends LitElement {
       this._step.type === "create_entry"
     ) {
       if (this._params!.flowConfig.loadDevicesAndAreas) {
-        this._fetchDevices(this._step.result);
+        this._fetchDevices(this._step.result.entry_id);
         this._fetchAreas();
       } else {
         this._devices = [];

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -43,6 +43,13 @@ class StepFlowCreateEntry extends LitElement {
       <h2>Success!</h2>
       <div class="content">
         ${this.flowConfig.renderCreateEntryDescription(this.hass, this.step)}
+        ${this.step.result.state === "not_loaded"
+          ? html`<span class="error"
+              >${localize(
+                "ui.panel.config.integrations.config_flow.not_loaded"
+              )}</span
+            >`
+          : ""}
         ${this.devices.length === 0
           ? ""
           : html`
@@ -136,6 +143,9 @@ class StepFlowCreateEntry extends LitElement {
             width: 100%;
           }
         }
+        .error {
+          color: var(--error-color);
+        }
       `,
     ];
   }

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

@@ -1,5 +1,6 @@
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
+import "@polymer/paper-tooltip/paper-tooltip";
+import { mdiAlertCircle, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -13,6 +14,7 @@ import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-svg-icon";
 import {
   ConfigEntry,
   deleteConfigEntry,
@@ -144,8 +146,26 @@ export class HaIntegrationCard extends LitElement {
                   this.hass.localize(
                     "ui.panel.config.integrations.config_entry.unnamed_entry"
                   )}</paper-item-body
-                ><ha-icon-next></ha-icon-next
+                >
-              ></paper-item>`
+                ${item.state === "not_loaded"
+                  ? html`<span>
+                      <ha-svg-icon
+                        class="error"
+                        .path=${mdiAlertCircle}
+                      ></ha-svg-icon
+                      ><paper-tooltip animation-delay="0" position="left">
+                        ${this.hass.localize(
+                          "ui.panel.config.integrations.config_entry.not_loaded",
+                          "logs_link",
+                          this.hass.localize(
+                            "ui.panel.config.integrations.config_entry.logs"
+                          )
+                        )}
+                      </paper-tooltip>
+                    </span>`
+                  : ""}
+                <ha-icon-next></ha-icon-next>
+              </paper-item>`
           )}
         </paper-listbox>
       </ha-card>
@@ -162,6 +182,7 @@ export class HaIntegrationCard extends LitElement {
         outlined
         class="single integration ${classMap({
           disabled: Boolean(item.disabled_by),
+          "not-loaded": !item.disabled_by && item.state === "not_loaded",
         })}"
         .configEntry=${item}
         .id=${item.entry_id}
@@ -183,6 +204,18 @@ export class HaIntegrationCard extends LitElement {
                 ) || item.disabled_by
               )}
             </div>`
+          : item.state === "not_loaded"
+          ? html`<div class="header">
+              ${this.hass.localize(
+                "ui.panel.config.integrations.config_entry.not_loaded",
+                "logs_link",
+                html`<a href="/config/logs"
+                  >${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.logs"
+                  )}</a
+                >`
+              )}
+            </div>`
           : ""}
         <div class="card-content">
           <div class="image">
@@ -564,11 +597,23 @@ export class HaIntegrationCard extends LitElement {
         .disabled {
           --ha-card-border-color: var(--warning-color);
         }
+        .not-loaded {
+          --ha-card-border-color: var(--error-color);
+        }
+        .header {
+          padding: 8px;
+          text-align: center;
+        }
         .disabled .header {
           background: var(--warning-color);
           color: var(--text-primary-color);
-          padding: 8px;
+        }
-          text-align: center;
+        .not-loaded .header {
+          background: var(--error-color);
+          color: var(--text-primary-color);
+        }
+        .not-loaded .header a {
+          color: var(--text-primary-color);
         }
         .card-content {
           padding: 16px;

src/translations/en.json

@@ -2137,6 +2137,8 @@
             "entity_unavailable": "Entity unavailable",
             "area": "In {area}",
             "no_area": "No Area",
+            "not_loaded": "Not loaded, check the {logs_link}",
+            "logs": "logs",
             "disable": {
               "disabled": "Disabled",
               "disabled_cause": "Disabled by {cause}",
@@ -2167,7 +2169,8 @@
             },
             "loading_first_time": "Please wait while the integration is being installed",
             "error": "Error",
-            "could_not_load": "Config flow could not be loaded"
+            "could_not_load": "Config flow could not be loaded",
+            "not_loaded": "The integration could not be loaded, try to restart Home Assistant."
           }
         },
         "users": {