refactor: isolate network toast and login redirect to separate services (#1412)

* refactor: isolate network toast and login redirect to separate services

* chore: remove accidentally committed sketch of a service

* chore: tidying things up

* feat: add `GlobalModule` encapsulating all global subscription services

* remove angular build cache when building deps

* chore: fix more issues found while testing

* chore: fix issues reported by testing

* chore: fix template error

* chore: fix server-info

* chore: fix server-info

* fix: switch to Observable to fix race conditions

* fix embassy name display on load

* update patchdb

* clean up patch data watch

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

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

@@ -157,7 +157,7 @@ export class BackupDrivesComponent {
         entry,
       })
       return true
-    } catch (e) {
+    } catch (e: any) {
       this.errToast.present(e)
       return false
     } finally {
@@ -209,9 +209,8 @@ export class BackupDrivesComponent {
 
     try {
       const res = await this.embassyApi.updateBackupTarget(value)
-      const entry = Object.values(res)[0]
-      this.backupService.cifs[index].entry = entry
-    } catch (e) {
+      this.backupService.cifs[index].entry = Object.values(res)[0]
+    } catch (e: any) {
       this.errToast.present(e)
     } finally {
       loader.dismiss()
@@ -229,7 +228,7 @@ export class BackupDrivesComponent {
     try {
       await this.embassyApi.removeBackupTarget({ id })
       this.backupService.cifs.splice(index, 1)
-    } catch (e) {
+    } catch (e: any) {
       this.errToast.present(e)
     } finally {
       loader.dismiss()

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

@@ -48,7 +48,7 @@ export class BackupService {
             entry: drive as DiskBackupTarget,
           }
         })
-    } catch (e) {
+    } catch (e: any) {
       this.loadingError = getErrorMessage(e)
     } finally {
       this.loading = false

frontend/projects/ui/src/app/components/form-object/form-object.component.ts

@@ -212,8 +212,7 @@ export class FormObjectComponent {
       component: EnumListPage,
     })
 
-    modal.onWillDismiss().then((res: { data: string[] }) => {
-      const data = res.data
+    modal.onWillDismiss<string[]>().then(({ data }) => {
       if (!data) return
       this.updateEnumList(key, current, data)
     })

frontend/projects/ui/src/app/components/install-wizard/dependents/dependents.component.html

@@ -1,23 +1,23 @@
 <div *ngIf="loading$ | async" class="center-spinner">
   <ion-spinner color="warning" name="lines"></ion-spinner>
-  <ion-label class="long-message">Checking for installed services which depend on {{ params.title }}...</ion-label>
+  <ion-label class="long-message">
+    Checking for installed services which depend on
+    {{ params.title }}...
+  </ion-label>
 </div>
 
 <div *ngIf="!(loading$ | async) && !!dependentViolation" class="slide-content">
-  <div style="margin-top: 25px;">
-
-    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
-      <ion-label color="warning" style="font-size: xx-large; font-weight: bold;">
-        WARNING
-      </ion-label>
+  <div class="wrapper">
+    <div class="warning">
+      <ion-label color="warning" class="label">WARNING</ion-label>
     </div>
 
     <div class="long-message">
       {{ dependentViolation }}
     </div>
 
-    <div style="margin: 25px 0px;">
-      <div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);">
+    <div *ngIf="patch.data['package-data']" class="items">
+      <div class="affected">
         <ion-text color="warning">Affected Services</ion-text>
       </div>
 
@@ -25,8 +25,11 @@
         style="--ion-item-background: margin-top: 5px"
         *ngFor="let dep of dependentBreakages | keyvalue"
       >
-        <ion-thumbnail style="position: relative; height: 4vh; width: 4vh" slot="start">
-          <img [src]="patch.data['package-data'][dep.key]['static-files'].icon" />
+        <ion-thumbnail class="thumbnail" slot="start">
+          <img
+            alt=""
+            [src]="patch.data['package-data'][dep.key]['static-files'].icon"
+          />
         </ion-thumbnail>
         <ion-label>
           <h5>{{ patch.data['package-data'][dep.key].manifest.title }}</h5>
@@ -34,4 +37,4 @@
       </ion-item>
     </div>
   </div>
-</div>
+</div>

frontend/projects/ui/src/app/components/install-wizard/dependents/dependents.component.scss

@@ -0,0 +1,35 @@
+.wrapper {
+  margin-top: 25px;
+}
+
+.warning {
+  margin: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.label {
+  font-size: xx-large;
+  font-weight: bold;
+}
+
+.items {
+  margin: 25px 0;
+}
+
+.affected {
+  border-width: 0 0 1px 0;
+  font-size: unset;
+  text-align: left;
+  font-weight: bold;
+  margin-left: 13px;
+  border-style: solid;
+  border-color: var(--ion-color-light-tint);
+}
+
+.thumbnail {
+  position: relative;
+  height: 4vh;
+  width: 4vh;
+}

frontend/projects/ui/src/app/components/install-wizard/dependents/dependents.component.ts

@@ -10,7 +10,10 @@ import { WizardAction } from '../wizard-types'
 @Component({
   selector: 'dependents',
   templateUrl: './dependents.component.html',
-  styleUrls: ['../install-wizard.component.scss'],
+  styleUrls: [
+    './dependents.component.scss',
+    '../install-wizard.component.scss',
+  ],
 })
 export class DependentsComponent {
   @Input() params: {

frontend/projects/ui/src/app/components/logs/logs.page.ts

@@ -54,7 +54,7 @@ export class LogsPage {
       this.loading = false
 
       return logsRes.entries
-    } catch (e) {
+    } catch (e: any) {
       this.errToast.present(e)
     }
   }