Update Move datadisk (not found) dialog (#13812)

src/panels/config/storage/dialog-move-datadisk.ts

@@ -52,7 +52,23 @@ class MoveDatadiskDialog extends LitElement {
 
     try {
       this._osInfo = await fetchHassioHassOsInfo(this.hass);
+
+      const data = await listDatadisks(this.hass);
+      if (data.devices.length > 0) {
+        this._devices = data.devices;
+      } else {
+        this.closeDialog();
+        await showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.storage.datadisk.no_devices_title"
+          ),
+          text: this.hass.localize(
+            "ui.panel.config.storage.datadisk.no_devices_text"
+          ),
+        });
+      }
     } catch (err: any) {
+      this.closeDialog();
       await showAlertDialog(this, {
         title: this.hass.localize(
           "ui.panel.config.hardware.available_hardware.failed_to_get"
@@ -60,10 +76,6 @@ class MoveDatadiskDialog extends LitElement {
         text: extractApiErrorMessage(err),
       });
     }
-
-    listDatadisks(this.hass).then((data) => {
-      this._devices = data.devices;
-    });
   }
 
   public closeDialog(): void {
@@ -76,9 +88,10 @@ class MoveDatadiskDialog extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._hostInfo || !this._osInfo) {
+    if (!this._hostInfo || !this._osInfo || !this._devices) {
       return html``;
     }
+
     return html`
       <ha-dialog
         open
@@ -91,47 +104,40 @@ class MoveDatadiskDialog extends LitElement {
         ?hideActions=${this._moving}
       >
         ${this._moving
-          ? html` <ha-circular-progress alt="Moving" size="large" active>
+          ? html`
+              <ha-circular-progress alt="Moving" size="large" active>
               </ha-circular-progress>
               <p class="progress-text">
                 ${this.hass.localize(
                   "ui.panel.config.storage.datadisk.moving_desc"
                 )}
-              </p>`
-          : html`${this._devices?.length
-                ? html`
-                    ${this.hass.localize(
-                      "ui.panel.config.storage.datadisk.description",
-                      {
-                        current_path: this._osInfo.data_disk,
-                        time: calculateMoveTime(this._hostInfo),
-                      }
-                    )}
-                    <br /><br />
+              </p>
+            `
+          : html`
+              ${this.hass.localize(
+                "ui.panel.config.storage.datadisk.description",
+                {
+                  current_path: this._osInfo.data_disk,
+                  time: calculateMoveTime(this._hostInfo),
+                }
+              )}
+              <br /><br />
 
-                    <ha-select
-                      .label=${this.hass.localize(
-                        "ui.panel.config.storage.datadisk.select_device"
-                      )}
-                      @selected=${this._select_device}
-                      @closed=${stopPropagation}
-                      dialogInitialFocus
-                    >
-                      ${this._devices.map(
-                        (device) =>
-                          html`<mwc-list-item .value=${device}
-                            >${device}</mwc-list-item
-                          >`
-                      )}
-                    </ha-select>
-                  `
-                : this._devices === undefined
-                ? this.hass.localize(
-                    "ui.panel.config.storage.datadisk.loading_devices"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.storage.datadisk.no_devices"
-                  )}
+              <ha-select
+                .label=${this.hass.localize(
+                  "ui.panel.config.storage.datadisk.select_device"
+                )}
+                @selected=${this._select_device}
+                @closed=${stopPropagation}
+                dialogInitialFocus
+              >
+                ${this._devices.map(
+                  (device) =>
+                    html`<mwc-list-item .value=${device}
+                      >${device}</mwc-list-item
+                    >`
+                )}
+              </ha-select>
 
               <mwc-button
                 slot="secondaryAction"
@@ -147,7 +153,8 @@ class MoveDatadiskDialog extends LitElement {
                 @click=${this._moveDatadisk}
               >
                 ${this.hass.localize("ui.panel.config.storage.datadisk.move")}
-              </mwc-button>`}
+              </mwc-button>
+            `}
       </ha-dialog>
     `;
   }

src/translations/en.json

@@ -3507,7 +3507,8 @@
             "title": "Move datadisk",
             "description": "You are currently using ''{current_path}'' as datadisk. Moving data disks will reboot your device and it's estimated to take {time} minutes. Your Home Assistant installation will not be accessible during this period. Do not disconnect the power during the move!",
             "select_device": "Select new datadisk",
-            "no_devices": "No suitable attached devices found",
+            "no_devices_title": "No suitable storage found",
+            "no_devices_text": "There is no suitable external device found. The storage capacity of the external data disk must be larger than the storage capacity of the existing disk",
             "moving_desc": "Rebooting and moving datadisk. Please have patience",
             "moving": "Moving datadisk",
             "loading_devices": "Loading devices",