Put rename entities in expandable when renaming device (#22182)

* Put rename entities in expandable when renaming device

* Update ha-config-device-page.ts

* Update src/panels/config/devices/ha-config-device-page.ts

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

src/panels/config/devices/ha-config-device-page.ts

@@ -35,6 +35,7 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-expansion-panel";
 import { getSignedPath } from "../../../data/auth";
 import {
   ConfigEntry,
@@ -1354,16 +1355,14 @@ export class HaConfigDevicePage extends LitElement {
             .filter((entity) => entity.newId)
             .map(
               (entity) =>
-                html`<li style="white-space: nowrap;">
+                html`<tr>
-                  ${entity.oldId} -> ${entity.newId}
+                  <td>${entity.oldId}</td>
-                </li>`
+                  <td>${entity.newId}</td>
+                </tr>`
             );
           const dialogNoRenames = entityIdRenames
             .filter((entity) => !entity.newId)
-            .map(
+            .map((entity) => html`<li>${entity.oldId}</li>`);
-              (entity) =>
-                html`<li style="white-space: nowrap;">${entity.oldId}</li>`
-            );
 
           if (dialogRenames.length) {
             renameEntityid = await showConfirmationDialog(this, {
@@ -1372,16 +1371,45 @@ export class HaConfigDevicePage extends LitElement {
               ),
               text: html`${this.hass.localize(
                   "ui.panel.config.devices.confirm_rename_entity_ids_warning"
-                )} <br /><br />${this.hass.localize(
+                )} <br /><br />
-                  "ui.panel.config.devices.confirm_rename_entity_will_rename"
+                <ha-expansion-panel outlined>
-                )}:
+                  <span slot="header"
+                    >${this.hass.localize(
+                      "ui.panel.config.devices.confirm_rename_entity_will_rename",
+                      { count: dialogRenames.length }
+                    )}</span
+                  >
+                  <div style="overflow: auto;">
+                    <table style="width: 100%; text-align: var(--float-start);">
+                      <tr>
+                        <th>
+                          ${this.hass.localize(
+                            "ui.panel.config.devices.confirm_rename_old"
+                          )}
+                        </th>
+                        <th>
+                          ${this.hass.localize(
+                            "ui.panel.config.devices.confirm_rename_new"
+                          )}
+                        </th>
+                      </tr>
                       ${dialogRenames}
+                    </table>
+                  </div>
+                </ha-expansion-panel>
                 ${dialogNoRenames.length
-                  ? html`<br /><br />${this.hass.localize(
+                  ? html`<ha-expansion-panel outlined>
+                      <span slot="header"
+                        >${this.hass.localize(
                           "ui.panel.config.devices.confirm_rename_entity_wont_rename",
-                        { deviceSlug: oldDeviceSlug }
+                          {
-                      )}:
+                            count: dialogNoRenames.length,
-                      ${dialogNoRenames}`
+                            deviceSlug: oldDeviceSlug,
+                          }
+                        )}</span
+                      >
+                      ${dialogNoRenames}</ha-expansion-panel
+                    >`
                   : nothing} `,
               confirmText: this.hass.localize("ui.common.rename"),
               dismissText: this.hass.localize("ui.common.no"),
@@ -1392,11 +1420,15 @@ export class HaConfigDevicePage extends LitElement {
               title: this.hass.localize(
                 "ui.panel.config.devices.confirm_rename_entity_no_renamable_entity_ids"
               ),
-              text: html`${this.hass.localize(
+              text: html`<ha-expansion-panel outlined>
+                <span slot="header"
+                  >${this.hass.localize(
                     "ui.panel.config.devices.confirm_rename_entity_wont_rename",
-                { deviceSlug: oldDeviceSlug }
+                    { deviceSlug: oldDeviceSlug, count: dialogNoRenames.length }
-              )}:
+                  )}</span
-              ${dialogNoRenames}`,
+                >
+                ${dialogNoRenames}
+              </ha-expansion-panel>`,
             });
           }
         }

src/translations/en.json

@@ -4089,8 +4089,10 @@
           },
           "confirm_rename_entity_ids": "Do you also want to rename the entity IDs of your entities?",
           "confirm_rename_entity_ids_warning": "This will not change any configuration (like automations, scripts, scenes, dashboards) that is currently using these entities! You will have to update them yourself to use the new entity IDs!",
-          "confirm_rename_entity_will_rename": "The following entity IDs will be renamed",
+          "confirm_rename_entity_will_rename": "{count} {count, plural,\n  one {entity ID}\n  other {entity IDs}\n} will be renamed",
-          "confirm_rename_entity_wont_rename": "The following entity IDs will not be renamed as they do not contain the current device name ({deviceSlug})",
+          "confirm_rename_new": "New",
+          "confirm_rename_old": "Old",
+          "confirm_rename_entity_wont_rename": "{count} {count, plural,\n  one {entity ID}\n  other {entity IDs}\n} will not be renamed as they do not contain the current device name ({deviceSlug})",
           "confirm_rename_entity_no_renamable_entity_ids": "No renamable entity IDs",
           "confirm_disable_config_entry": "There are no more devices for the config entry {entry_name}, do you want to instead disable the config entry?",
           "update_device_error": "Updating the device failed",