Attempt some transition between app configure views

dashboard/src/components/app/Backups.vue

@@ -155,71 +155,72 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog ref="editDialog"
-    :title="$t('backups.backupEdit.title')"
-    :reject-label="$t('main.dialog.cancel')"
-     reject-style="secondary"
-    :confirm-label="$t('main.dialog.save')"
-    :confirm-active="true"
-    :confirm-busy="editBusy"
-    @confirm="onEditSubmit()"
-  >
-    <div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
-        <div class="info-value">{{ editBackup.id }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-        <div class="info-value">{{ editBackup.emotePath }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
-        <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
-        <div class="info-value">{{ editBackup.packageVersion }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
-        <div class="info-value">{{ editBackup.format }}</div>
-      </div>
-
-      <form @submit.prevent="onEditSubmit()" autocomplete="off">
-        <fieldset :disabled="editBusy">
-          <p class="has-error" v-show="editError">{{ editError }}</p>
-
-          <FormGroup>
-            <label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
-            <TextInput v-model="editLabel" id="labelInput" />
-          </FormGroup>
-
-          <br/>
-
-          <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
-        </fieldset>
-      </form>
-    </div>
-  </Dialog>
-
-  <Dialog ref="restoreDialog"
-    :title="$t('app.restoreDialog.title', { app: app.fqdn })"
-    :reject-label="$t('main.dialog.close')"
-     reject-style="secondary"
-    :confirm-label="$t('app.restoreDialog.restoreAction')"
-    :confirm-active="true"
-    :confirm-busy="restoreBusy"
-    @confirm="onRestoreSubmit()"
-  >
-    <div>
-      <p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
-      <p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
-      <br/>
-    </div>
-  </Dialog>
 
   <div>
+    <Dialog ref="editDialog"
+      :title="$t('backups.backupEdit.title')"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-active="true"
+      :confirm-busy="editBusy"
+      @confirm="onEditSubmit()"
+    >
+      <div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
+          <div class="info-value">{{ editBackup.id }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
+          <div class="info-value">{{ editBackup.emotePath }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
+          <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
+          <div class="info-value">{{ editBackup.packageVersion }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
+          <div class="info-value">{{ editBackup.format }}</div>
+        </div>
+
+        <form @submit.prevent="onEditSubmit()" autocomplete="off">
+          <fieldset :disabled="editBusy">
+            <p class="has-error" v-show="editError">{{ editError }}</p>
+
+            <FormGroup>
+              <label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
+              <TextInput v-model="editLabel" id="labelInput" />
+            </FormGroup>
+
+            <br/>
+
+            <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
+          </fieldset>
+        </form>
+      </div>
+    </Dialog>
+
+    <Dialog ref="restoreDialog"
+      :title="$t('app.restoreDialog.title', { app: app.fqdn })"
+      :reject-label="$t('main.dialog.close')"
+       reject-style="secondary"
+      :confirm-label="$t('app.restoreDialog.restoreAction')"
+      :confirm-active="true"
+      :confirm-busy="restoreBusy"
+      @confirm="onRestoreSubmit()"
+    >
+      <div>
+        <p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
+        <p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
+        <br/>
+      </div>
+    </Dialog>
+
     <label>{{ $t('app.backups.backups.title') }}</label>
     <p>{{ $t('app.backups.backups.description') }}</p>