port 040 config (#2657)

* port 040 config, WIP

* update fixtures

* use taiga modal for backups too

* fix: update Taiga UI and refactor everything to work

* chore: package-lock

* fix interfaces and mocks for interfaces

* better mocks

* function to transform old spec to new

* delete unused fns

* delete unused FE config utils

* fix exports from sdk

* reorganize exports

* functions to translate config

* rename unionSelectKey and unionValueKey

* Adding in the transformation of the getConfig to the new types.

* chore: add Taiga UI to preloader

---------

Co-authored-by: waterplea <alexander@inkin.ru>
Co-authored-by: Aiden McClelland <me@drbonez.dev>
Co-authored-by: J H <dragondef@gmail.com>

web/projects/shared/src/components/loading/loading.component.scss

@@ -0,0 +1,20 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+  @include shadow(3);
+
+  display: flex;
+  align-items: center;
+  max-width: 80%;
+  margin: auto;
+  padding: 1.5rem;
+  background: var(--tui-elevation-01);
+  border-radius: var(--tui-radius-m);
+
+  --tui-primary: var(--tui-warning-fill);
+}
+
+tui-loader {
+  flex-shrink: 0;
+  min-width: 2rem;
+}

web/projects/shared/src/components/loading/loading.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+  POLYMORPHEUS_CONTEXT,
+  PolymorpheusContent,
+} from '@tinkoff/ng-polymorpheus'
+
+@Component({
+  template: `
+    <tui-loader [textContent]="content"></tui-loader>
+  `,
+  styleUrls: ['./loading.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadingComponent {
+  readonly content: PolymorpheusContent =
+    inject(POLYMORPHEUS_CONTEXT)['content']
+}

web/projects/shared/src/components/loading/loading.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core'
+import { TuiLoaderModule } from '@taiga-ui/core'
+import { tuiAsDialog } from '@taiga-ui/cdk'
+import { LoadingComponent } from './loading.component'
+import { LoadingService } from './loading.service'
+
+@NgModule({
+  imports: [TuiLoaderModule],
+  declarations: [LoadingComponent],
+  exports: [LoadingComponent],
+  providers: [tuiAsDialog(LoadingService)],
+})
+export class LoadingModule {}

web/projects/shared/src/components/loading/loading.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core'
+import { AbstractTuiDialogService } from '@taiga-ui/cdk'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { LoadingComponent } from './loading.component'
+
+@Injectable({ providedIn: `root` })
+export class LoadingService extends AbstractTuiDialogService<unknown> {
+  protected readonly component = new PolymorpheusComponent(LoadingComponent)
+  protected readonly defaultOptions = {}
+}

web/projects/shared/src/components/markdown/markdown.component.ts

@@ -3,7 +3,7 @@ import { ModalController } from '@ionic/angular'
 import { defer, isObservable, Observable, of } from 'rxjs'
 import { catchError, ignoreElements, share } from 'rxjs/operators'
 
-import { getErrorMessage } from '../../services/error-toast.service'
+import { getErrorMessage } from '../../services/error.service'
 
 @Component({
   selector: 'markdown',

web/projects/shared/src/public-api.ts

@@ -9,6 +9,9 @@ export * from './components/alert/alert.component'
 export * from './components/alert/alert.module'
 export * from './components/alert/alert-button.directive'
 export * from './components/alert/alert-input.directive'
+export * from './components/loading/loading.component'
+export * from './components/loading/loading.module'
+export * from './components/loading/loading.service'
 export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'
 export * from './components/text-spinner/text-spinner.component'
@@ -42,7 +45,7 @@ export * from './pipes/unit-conversion/unit-conversion.pipe'
 
 export * from './services/download-html.service'
 export * from './services/emver.service'
-export * from './services/error-toast.service'
+export * from './services/error.service'
 export * from './services/http.service'
 
 export * from './themes/dark-theme/dark-theme.component'
@@ -63,6 +66,7 @@ export * from './util/base-64'
 export * from './util/copy-to-clipboard'
 export * from './util/get-new-entries'
 export * from './util/get-pkg-id'
+export * from './util/invert'
 export * from './util/misc.util'
 export * from './util/rpc.util'
 export * from './util/to-local-iso-string'

web/projects/shared/src/services/error-toast.service.ts

@@ -1,70 +0,0 @@
-import { Injectable } from '@angular/core'
-import { IonicSafeString, ToastController } from '@ionic/angular'
-import { HttpError } from '../classes/http-error'
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ErrorToastService {
-  private toast?: HTMLIonToastElement
-
-  constructor(private readonly toastCtrl: ToastController) {}
-
-  async present(e: HttpError | string, link?: string): Promise<void> {
-    console.error(e)
-
-    if (this.toast) return
-
-    this.toast = await this.toastCtrl.create({
-      header: 'Error',
-      message: getErrorMessage(e, link),
-      duration: 0,
-      position: 'top',
-      cssClass: 'error-toast',
-      buttons: [
-        {
-          side: 'end',
-          icon: 'close',
-          handler: () => {
-            this.dismiss()
-          },
-        },
-      ],
-    })
-    await this.toast.present()
-  }
-
-  async dismiss(): Promise<void> {
-    if (this.toast) {
-      await this.toast.dismiss()
-      this.toast = undefined
-    }
-  }
-}
-
-export function getErrorMessage(
-  e: HttpError | string,
-  link?: string,
-): string | IonicSafeString {
-  let message = ''
-
-  if (typeof e === 'string') {
-    message = e
-  } else if (e.code === 0) {
-    message =
-      'Request Error. Your browser blocked the request. This is usually caused by a corrupt browser cache or an overly aggressive ad blocker. Please clear your browser cache and/or adjust your ad blocker and try again'
-    link = 'https://docs.start9.com/0.3.5.x/support/common-issues#request-error'
-  } else if (!e.message) {
-    message = 'Unknown Error'
-  } else {
-    message = e.message
-  }
-
-  if (link) {
-    return new IonicSafeString(
-      `${message}<br /><br /><a href=${link} target="_blank" rel="noreferrer" style="color: white;">Get Help</a>`,
-    )
-  }
-
-  return message
-}

web/projects/shared/src/services/error.service.ts

@@ -0,0 +1,43 @@
+import { ErrorHandler, inject, Injectable } from '@angular/core'
+import { TuiAlertService, TuiNotification } from '@taiga-ui/core'
+import { HttpError } from '../classes/http-error'
+
+// TODO: Enable this as ErrorHandler
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorService extends ErrorHandler {
+  private readonly alerts = inject(TuiAlertService)
+
+  override handleError(error: HttpError | string, link?: string) {
+    console.error(error)
+
+    this.alerts
+      .open(getErrorMessage(error, link), {
+        label: 'Error',
+        autoClose: false,
+        status: TuiNotification.Error,
+      })
+      .subscribe()
+  }
+}
+
+export function getErrorMessage(e: HttpError | string, link?: string): string {
+  let message = ''
+
+  if (typeof e === 'string') {
+    message = e
+  } else if (e.code === 0) {
+    message =
+      'Request Error. Your browser blocked the request. This is usually caused by a corrupt browser cache or an overly aggressive ad blocker. Please clear your browser cache and/or adjust your ad blocker and try again'
+  } else if (!e.message) {
+    message = 'Unknown Error'
+    link = 'https://docs.start9.com/latest/support/faq'
+  } else {
+    message = e.message
+  }
+
+  return link
+    ? `${message}<br /><br /><a href=${link} target="_blank" rel="noreferrer">Get Help</a>`
+    : message
+}

web/projects/shared/src/util/invert.ts

@@ -0,0 +1,12 @@
+export function invert<
+  T extends string | number | symbol,
+  D extends string | number | symbol,
+>(obj: Record<T, D>): Record<D, T> {
+  const result = {} as Record<D, T>
+
+  for (const key in obj) {
+    result[obj[key]] = key
+  }
+
+  return result
+}