display bottom item in backup list and refactor for cleanliness (#1609)

* display bottom item in backup list and refactor for cleanliness

* fix spelling mistake

* display initial toggle to deselect all, as all are selected by default

* add select/deselect all to backup restore and handle backup case when no services intalled

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/components/backup-drives/backup-drives-header.component.html

@@ -3,7 +3,9 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="embassy"></ion-back-button>
     </ion-buttons>
-    <ion-title>{{ title }}</ion-title>
+    <ion-title>{{
+      type === 'create' ? 'Create Backup' : 'Restore From Backup'
+    }}</ion-title>
     <ion-buttons slot="end">
       <ion-button [disabled]="backupService.loading" (click)="refresh()">
         Refresh
@@ -11,4 +13,4 @@
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
-</ion-header>
+</ion-header>

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html

@@ -1,137 +1,145 @@
-<!-- loading -->
-<text-spinner
-  *ngIf="backupService.loading; else loaded"
-  [text]="loadingText"
-></text-spinner>
+<backup-drives-header [type]="type"></backup-drives-header>
 
-<!-- loaded -->
-<ng-template #loaded>
-  <!-- error -->
-  <ion-item *ngIf="backupService.loadingError; else noError">
-    <ion-label>
-      <ion-text color="danger">
-        {{ backupService.loadingError }}
-      </ion-text>
-    </ion-label>
-  </ion-item>
+<ion-content class="ion-padding">
+  <!-- loading -->
+  <text-spinner
+    *ngIf="backupService.loading; else loaded"
+    [text]="loadingText"
+  ></text-spinner>
 
-  <ng-template #noError>
-    <ion-item-group>
-      <!-- ** cifs ** -->
-      <ion-item-divider>LAN Shared Folders</ion-item-divider>
-      <ion-item>
-        <ion-label>
-          <h2>
-            LAN Shared Folders are the recommended way to create Embassy
-            backups. View the
-            <a
-              href="https://start9.com/latest/user-manual/backups/cifs-setup"
-              target="_blank"
-              noreferrer
-              >Instructions</a
-            >
-          </h2>
-        </ion-label>
-      </ion-item>
-      <!-- add new cifs -->
-      <ion-item button detail="false" (click)="presentModalAddCifs()">
-        <ion-icon
-          slot="start"
-          name="folder-open-outline"
-          size="large"
-          color="dark"
-        ></ion-icon>
-        <ion-label>
-          <b>Open New</b>
-        </ion-label>
-      </ion-item>
-      <!-- cifs list -->
-      <ng-container *ngFor="let target of backupService.cifs; let i = index">
-        <ion-item button *ngIf="target.entry as cifs" (click)="select(target)">
+  <!-- loaded -->
+  <ng-template #loaded>
+    <!-- error -->
+    <ion-item *ngIf="backupService.loadingError; else noError">
+      <ion-label>
+        <ion-text color="danger">
+          {{ backupService.loadingError }}
+        </ion-text>
+      </ion-label>
+    </ion-item>
+
+    <ng-template #noError>
+      <ion-item-group>
+        <!-- ** cifs ** -->
+        <ion-item-divider>LAN Shared Folders</ion-item-divider>
+        <ion-item>
+          <ion-label>
+            <h2>
+              LAN Shared Folders are the recommended way to create Embassy
+              backups. View the
+              <a
+                href="https://start9.com/latest/user-manual/backups/cifs-setup"
+                target="_blank"
+                noreferrer
+                >Instructions</a
+              >
+            </h2>
+          </ion-label>
+        </ion-item>
+        <!-- add new cifs -->
+        <ion-item button detail="false" (click)="presentModalAddCifs()">
           <ion-icon
             slot="start"
             name="folder-open-outline"
             size="large"
+            color="dark"
           ></ion-icon>
           <ion-label>
-            <h1>{{ cifs.path.split('/').pop() }}</h1>
-            <ng-container *ngIf="cifs.mountable">
-              <backup-drives-status
-                [type]="type"
-                [hasValidBackup]="target.hasValidBackup"
-              ></backup-drives-status>
-            </ng-container>
-            <h2 *ngIf="!cifs.mountable" class="inline">
-              <ion-icon name="cellular-outline" color="danger"></ion-icon>
-              Unable to connect
-            </h2>
-            <p>Hostname: {{ cifs.hostname }}</p>
-            <p>Path: {{ cifs.path }}</p>
+            <b>Open New</b>
           </ion-label>
-          <ion-note
-            slot="end"
-            class="click-area"
-            (click)="presentActionCifs($event, target, i)"
+        </ion-item>
+        <!-- cifs list -->
+        <ng-container *ngFor="let target of backupService.cifs; let i = index">
+          <ion-item
+            button
+            *ngIf="target.entry as cifs"
+            (click)="select(target)"
           >
-            <ion-icon name="ellipsis-horizontal"></ion-icon>
-          </ion-note>
-        </ion-item>
-      </ng-container>
-
-      <br />
-
-      <!-- ** drives ** -->
-      <ion-item-divider>Physical Drives</ion-item-divider>
-      <!-- no drives -->
-      <ion-item
-        *ngIf="!backupService.drives.length; else hasDrives"
-        class="ion-padding-bottom"
-      >
-        <ion-label>
-          <h2>
-            <ion-text color="warning">
-              Warning! Plugging a 2nd physical drive directly into your Embassy
-              can lead to data corruption.
-            </ion-text>
-            To safely create a backup to a physical drive, view the
-            <a
-              href="https://start9.com/latest/user-manual/backups/backups-create/#backup-using-a-physical-drive"
-              target="_blank"
-              noreferrer
-              >instructions</a
-            >.
-          </h2>
-          <br />
-          <h2>
-            If your drive is plugged in and does not appear, try
-            <a (click)="refresh()" style="cursor: pointer">refreshing</a>.
-          </h2>
-        </ion-label>
-      </ion-item>
-      <!-- drives detected -->
-      <ng-template #hasDrives>
-        <ion-item
-          button
-          *ngFor="let target of backupService.drives"
-          (click)="select(target)"
-        >
-          <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
-          <ng-container *ngIf="target.entry as drive">
+            <ion-icon
+              slot="start"
+              name="folder-open-outline"
+              size="large"
+            ></ion-icon>
             <ion-label>
-              <h1>{{ drive.label || drive.logicalname }}</h1>
-              <backup-drives-status
-                [type]="type"
-                [hasValidBackup]="target.hasValidBackup"
-              ></backup-drives-status>
-              <p>
-                {{ drive.vendor || 'Unknown Vendor' }} -
-                {{ drive.model || 'Unknown Model' }}
-              </p>
-              <p>Capacity: {{ drive.capacity | convertBytes }}</p>
+              <h1>{{ cifs.path.split('/').pop() }}</h1>
+              <ng-container *ngIf="cifs.mountable">
+                <backup-drives-status
+                  [type]="type"
+                  [hasValidBackup]="target.hasValidBackup"
+                ></backup-drives-status>
+              </ng-container>
+              <h2 *ngIf="!cifs.mountable" class="inline">
+                <ion-icon name="cellular-outline" color="danger"></ion-icon>
+                Unable to connect
+              </h2>
+              <p>Hostname: {{ cifs.hostname }}</p>
+              <p>Path: {{ cifs.path }}</p>
             </ion-label>
-          </ng-container>
+            <ion-note
+              slot="end"
+              class="click-area"
+              (click)="presentActionCifs($event, target, i)"
+            >
+              <ion-icon name="ellipsis-horizontal"></ion-icon>
+            </ion-note>
+          </ion-item>
+        </ng-container>
+
+        <br />
+
+        <!-- ** drives ** -->
+        <ion-item-divider>Physical Drives</ion-item-divider>
+        <!-- no drives -->
+        <ion-item
+          *ngIf="!backupService.drives.length; else hasDrives"
+          class="ion-padding-bottom"
+        >
+          <ion-label>
+            <h2>
+              <ion-text color="warning">
+                Warning! Plugging a 2nd physical drive directly into your
+                Embassy can lead to data corruption.
+              </ion-text>
+              To safely create a backup to a physical drive, view the
+              <a
+                href="https://start9.com/latest/user-manual/backups/backups-create/#backup-using-a-physical-drive"
+                target="_blank"
+                noreferrer
+                >instructions</a
+              >.
+            </h2>
+            <br />
+            <h2>
+              If your drive is plugged in and does not appear, try
+              <a (click)="refresh()" style="cursor: pointer">refreshing</a>.
+            </h2>
+          </ion-label>
         </ion-item>
-      </ng-template>
-    </ion-item-group>
+        <!-- drives detected -->
+        <ng-template #hasDrives>
+          <ion-item
+            button
+            *ngFor="let target of backupService.drives"
+            (click)="select(target)"
+          >
+            <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
+            <ng-container *ngIf="target.entry as drive">
+              <ion-label>
+                <h1>{{ drive.label || drive.logicalname }}</h1>
+                <backup-drives-status
+                  [type]="type"
+                  [hasValidBackup]="target.hasValidBackup"
+                ></backup-drives-status>
+                <p>
+                  {{ drive.vendor || 'Unknown Vendor' }} -
+                  {{ drive.model || 'Unknown Model' }}
+                </p>
+                <p>Capacity: {{ drive.capacity | convertBytes }}</p>
+              </ion-label>
+            </ng-container>
+          </ion-item>
+        </ng-template>
+      </ion-item-group>
+    </ng-template>
   </ng-template>
-</ng-template>
+</ion-content>

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts

@@ -17,13 +17,15 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ErrorToastService } from '@start9labs/shared'
 import { MappedBackupTarget } from 'src/app/types/mapped-backup-target'
 
+type BackupType = 'create' | 'restore'
+
 @Component({
   selector: 'backup-drives',
   templateUrl: './backup-drives.component.html',
   styleUrls: ['./backup-drives.component.scss'],
 })
 export class BackupDrivesComponent {
-  @Input() type: 'create' | 'restore'
+  @Input() type: BackupType
   @Output() onSelect: EventEmitter<
     MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>
   > = new EventEmitter()
@@ -232,7 +234,7 @@ export class BackupDrivesComponent {
   styleUrls: ['./backup-drives.component.scss'],
 })
 export class BackupDrivesHeaderComponent {
-  @Input() title: string
+  @Input() type: BackupType
   @Output() onClose: EventEmitter<void> = new EventEmitter()
 
   constructor(public readonly backupService: BackupService) {}

frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.html

@@ -11,6 +11,13 @@
 
 <ion-content>
   <ion-item-group>
+    <ion-item-divider>
+      <ion-buttons slot="end" style="padding-bottom: 6px">
+        <ion-button fill="clear" (click)="toggleSelectAll()">
+          <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
+        </ion-button>
+      </ion-buttons>
+    </ion-item-divider>
     <ion-item *ngFor="let option of options">
       <ion-label>
         <h2>{{ option.title }}</h2>

frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts

@@ -27,6 +27,7 @@ export class AppRecoverSelectPage {
     'newer-eos': boolean
   })[]
   hasSelection = false
+  selectAll = true
   error: string | IonicSafeString
 
   constructor(
@@ -62,6 +63,11 @@ export class AppRecoverSelectPage {
     this.hasSelection = this.options.some(o => o.checked)
   }
 
+  toggleSelectAll() {
+    this.options.forEach(pkg => (pkg.checked = this.selectAll))
+    this.selectAll = !this.selectAll
+  }
+
   async restore(): Promise<void> {
     const ids = this.options
       .filter(option => !!option.checked)

frontend/projects/ui/src/app/modals/backup-select/backup-select.page.html

@@ -9,44 +9,50 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-item-group>
-    <ion-item-divider>
-      <ion-buttons slot="end" style="padding-bottom: 6px">
-        <ion-button fill="clear" (click)="toggleSelectAll()">
-          <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
+<div *ngIf="pkgs.length; else noServices">
+  <ion-content>
+    <ion-item-group>
+      <ion-item-divider>
+        <ion-buttons slot="end" style="padding-bottom: 6px">
+          <ion-button fill="clear" (click)="toggleSelectAll()">
+            <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
+          </ion-button>
+        </ion-buttons>
+      </ion-item-divider>
+      <ion-item *ngFor="let pkg of pkgs">
+        <ion-avatar slot="start">
+          <img alt="" [src]="pkg.icon" />
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ pkg.title }}</h2>
+        </ion-label>
+        <ion-checkbox
+          slot="end"
+          [(ngModel)]="pkg.checked"
+          (ionChange)="handleChange()"
+          [disabled]="pkg.disabled"
+        ></ion-checkbox>
+      </ion-item>
+    </ion-item-group>
+  </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-buttons slot="end" class="ion-padding-end">
+        <ion-button
+          [disabled]="!hasSelection"
+          fill="solid"
+          color="primary"
+          (click)="dismiss(true)"
+          class="enter-click btn-128"
+        >
+          Back Up Selected
         </ion-button>
       </ion-buttons>
-    </ion-item-divider>
-    <ion-item *ngFor="let pkg of pkgs">
-      <ion-avatar slot="start">
-        <img alt="" [src]="pkg.icon" />
-      </ion-avatar>
-      <ion-label>
-        <h2>{{ pkg.title }}</h2>
-      </ion-label>
-      <ion-checkbox
-        slot="end"
-        [(ngModel)]="pkg.checked"
-        (ionChange)="handleChange()"
-        [disabled]="pkg.disabled"
-      ></ion-checkbox>
-    </ion-item>
-  </ion-item-group>
-</ion-content>
+    </ion-toolbar>
+  </ion-footer>
+</div>
 
-<ion-footer>
-  <ion-toolbar>
-    <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button
-        [disabled]="!hasSelection"
-        fill="solid"
-        color="primary"
-        (click)="dismiss(true)"
-        class="enter-click btn-128"
-      >
-        Back Up Selected
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>
+<ng-template #noServices>
+  <ion-content><h2 class="center">No services installed!</h2></ion-content>
+</ng-template>

frontend/projects/ui/src/app/modals/backup-select/backup-select.page.scss

@@ -0,0 +1,4 @@
+.center {
+    text-align: center;
+    padding: 20px;
+}

frontend/projects/ui/src/app/modals/backup-select/backup-select.page.ts

@@ -11,7 +11,7 @@ import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 })
 export class BackupSelectPage {
   hasSelection = false
-  selectAll = true
+  selectAll = false
   pkgs: {
     id: string
     title: string

frontend/projects/ui/src/app/pages/server-routes/restore/restore.component.html

@@ -1,5 +1,5 @@
-<backup-drives-header title="Restore From Backup"></backup-drives-header>
-
-<ion-content class="ion-padding">
-  <backup-drives type="restore" (onSelect)="presentModalPassword($event)"></backup-drives>
-</ion-content>
+<backup-drives
+  type="restore"
+  class="ion-page"
+  (onSelect)="presentModalPassword($event)"
+></backup-drives>

frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.html

@@ -1,16 +1,14 @@
 <!-- currently backing up -->
 <backing-up
   *ngIf="backingUp$ | async; else notBackingUp"
-  style="height: 100%"
+  class="ion-page"
 ></backing-up>
 
 <!-- not backing up -->
 <ng-template #notBackingUp>
-  <backup-drives-header title="Create Backup"></backup-drives-header>
-  <ion-content class="ion-padding">
-    <backup-drives
-      type="create"
-      (onSelect)="presentModalSelect($event)"
-    ></backup-drives>
-  </ion-content>
+  <backup-drives
+    type="create"
+    class="ion-page"
+    (onSelect)="presentModalSelect($event)"
+  ></backup-drives>
 </ng-template>

frontend/projects/ui/src/app/services/api/embassy-api.service.ts

@@ -78,7 +78,7 @@ export abstract class ApiService implements Source<DataModel>, Http<DataModel> {
   async updateServerWrapper(params: RR.UpdateServerReq) {
     const res = await this.updateServerRaw(params)
     if (res.response === 'no-updates') {
-      throw new Error('Could ont find a newer version of EmbassyOS')
+      throw new Error('Could not find a newer version of EmbassyOS')
     }
     return res
   }
@@ -271,7 +271,7 @@ export abstract class ApiService implements Source<DataModel>, Http<DataModel> {
   private syncResponse<
     T,
     F extends (...args: any[]) => Promise<{ response: T; revision?: Revision }>,
-    >(f: F, temp?: Operation<unknown>): (...args: Parameters<F>) => Promise<T> {
+  >(f: F, temp?: Operation<unknown>): (...args: Parameters<F>) => Promise<T> {
     return (...a) => {
       // let expireId = undefined
       // if (temp) {