Move restored entity warning up and use ha-alert (#13477)

gallery/src/pages/components/ha-alert.markdown

@@ -3,6 +3,13 @@ title: Alerts
 subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 ---
 
+<style>
+  ha-alert {
+    display: block;
+    margin: 4px 0;
+  }
+</style>
+
 # Alert `<ha-alert>`
 The alert offers four severity levels that set a distinctive icon and color.
 

src/components/ha-alert.ts

@@ -83,7 +83,6 @@ class HaAlert extends LitElement {
       position: relative;
       padding: 8px;
       display: flex;
-      margin: 4px 0;
     }
     .issue-type.rtl {
       flex-direction: row-reverse;

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -152,6 +152,7 @@ export class MoreInfoDialog extends LitElement {
               `
             : ""}
         </div>
+
         <div class="content" tabindex="-1" dialogInitialFocus>
           ${cache(
             this._currTab === "info"

src/dialogs/more-info/ha-more-info-info.ts

@@ -1,9 +1,12 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { removeEntityRegistryEntry } from "../../data/entity_registry";
+import { subscribeOne } from "../../common/util/subscribe-one";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../data/entity_registry";
 import type { HomeAssistant } from "../../types";
-import { showConfirmationDialog } from "../generic/show-dialog-box";
 import {
   computeShowHistoryComponent,
   computeShowLogBookComponent,
@@ -19,12 +22,24 @@ export class MoreInfoInfo extends LitElement {
 
   @property() public entityId!: string;
 
+  @state() private _entityEntry?: EntityRegistryEntry;
+
   protected render() {
     const entityId = this.entityId;
     const stateObj = this.hass.states[entityId];
     const domain = computeDomain(entityId);
 
     return html`
+      ${stateObj.attributes.restored && this._entityEntry
+        ? html`<ha-alert alert-type="warning">
+            ${this.hass.localize(
+              "ui.dialogs.more_info_control.restored.no_longer_provided",
+              {
+                integration: this._entityEntry.platform,
+              }
+            )}
+          </ha-alert>`
+        : ""}
       ${DOMAINS_NO_INFO.includes(domain)
         ? ""
         : html`
@@ -52,43 +67,18 @@ export class MoreInfoInfo extends LitElement {
         .stateObj=${stateObj}
         .hass=${this.hass}
       ></more-info-content>
-      ${stateObj.attributes.restored
-        ? html`
-            <p>
-              ${this.hass.localize(
-                "ui.dialogs.more_info_control.restored.not_provided"
-              )}
-            </p>
-            <p>
-              ${this.hass.localize(
-                "ui.dialogs.more_info_control.restored.remove_intro"
-              )}
-            </p>
-            <mwc-button class="warning" @click=${this._removeEntity}>
-              ${this.hass.localize(
-                "ui.dialogs.more_info_control.restored.remove_action"
-              )}
-            </mwc-button>
-          `
-        : ""}
     `;
   }
 
-  private _removeEntity() {
-    const entityId = this.entityId!;
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.dialogs.more_info_control.restored.confirm_remove_title"
-      ),
-      text: this.hass.localize(
-        "ui.dialogs.more_info_control.restored.confirm_remove_text"
-      ),
-      confirmText: this.hass.localize("ui.common.remove"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      confirm: () => {
-        removeEntityRegistryEntry(this.hass, entityId);
-      },
-    });
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    subscribeOne(this.hass.connection, subscribeEntityRegistry).then(
+      (entries) => {
+        this._entityEntry = entries.find(
+          (entry) => entry.entity_id === this.entityId
+        );
+      }
+    );
   }
 
   static get styles() {
@@ -99,6 +89,13 @@ export class MoreInfoInfo extends LitElement {
         display: block;
         margin-bottom: 16px;
       }
+
+      ha-alert {
+        display: block;
+        margin: calc(-1 * var(--dialog-content-padding, 24px))
+          calc(-1 * var(--dialog-content-padding, 24px)) 16px
+          calc(-1 * var(--dialog-content-padding, 24px));
+      }
     `;
   }
 }

src/translations/en.json

@@ -776,11 +776,7 @@
           "activity": "Current activity"
         },
         "restored": {
-          "not_provided": "This entity is currently unavailable and is an orphan to a removed, changed or dysfunctional integration or device.",
-          "remove_intro": "If the entity is no longer in use, you can clean it up by removing it.",
-          "remove_action": "Remove entity",
-          "confirm_remove_title": "Remove entity?",
-          "confirm_remove_text": "Are you sure you want to remove this entity?"
+          "no_longer_provided": "This entity is no longer being provided by the {integration} integration. If the entity is no longer in use, delete it in settings."
         },
         "vacuum": {
           "status": "Status",