refactor: break ui up further down (#2292)

* refactor: break ui up further down

* permit loading even when authed

---------

Co-authored-by: Matt Hill <[email protected]>

Author: waterplea

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

@@ -1,7 +1,14 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { defer, isObservable, Observable, of } from 'rxjs'
-import { catchError, ignoreElements, share } from 'rxjs/operators'
+import {
+  catchError,
+  ignoreElements,
+  share,
+  defer,
+  isObservable,
+  Observable,
+  of,
+} from 'rxjs'
 
 import { getErrorMessage } from '../../services/error-toast.service'
 

frontend/projects/shared/src/directives/responsive-col/responsive-col-viewport.directive.ts

@@ -7,8 +7,7 @@ import {
   NgZone,
 } from '@angular/core'
 import { ResizeObserverService } from '@ng-web-apis/resize-observer'
-import { distinctUntilChanged, Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { distinctUntilChanged, map, Observable } from 'rxjs'
 import { tuiZonefree } from '@taiga-ui/cdk'
 
 export type Step = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

frontend/projects/shared/src/util/unused.ts

@@ -1,5 +1,4 @@
-import { OperatorFunction } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { map, OperatorFunction } from 'rxjs'
 
 /**
  * These utils are not used anywhere

frontend/projects/ui/src/app/app.module.ts

@@ -20,21 +20,19 @@ import {
 
 import { AppComponent } from './app.component'
 import { RoutingModule } from './routing.module'
-import { OSWelcomePageModule } from './modals/os-welcome/os-welcome.module'
-import { GenericInputComponentModule } from './modals/generic-input/generic-input.component.module'
+import { OSWelcomePageModule } from './common/os-welcome/os-welcome.module'
 import { PreloaderModule } from './app/preloader/preloader.module'
 import { FooterModule } from './app/footer/footer.module'
 import { MenuModule } from './app/menu/menu.module'
 import { EnterModule } from './app/enter/enter.module'
 import { APP_PROVIDERS } from './app.providers'
 import { PatchDbModule } from './services/patch-db/patch-db.module'
-import { ToastContainerModule } from './components/toast-container/toast-container.module'
-import { ConnectionBarComponentModule } from './components/connection-bar/connection-bar.component.module'
+import { ToastContainerModule } from './common/toast-container/toast-container.module'
+import { ConnectionBarComponentModule } from './app/connection-bar/connection-bar.component.module'
 import { WidgetsPageModule } from 'src/app/apps/ui/pages/widgets/widgets.module'
 import { ServiceWorkerModule } from '@angular/service-worker'
 import { environment } from '../environments/environment'
-import { LoadingModule } from './modals/loading/loading.module'
-import { FormPageModule } from './modals/form/form.module'
+import { LoadingModule } from './common/loading/loading.module'
 
 @NgModule({
   declarations: [AppComponent],
@@ -51,7 +49,6 @@ import { FormPageModule } from './modals/form/form.module'
     EnterModule,
     OSWelcomePageModule,
     MarkdownModule,
-    GenericInputComponentModule,
     MonacoEditorModule,
     SharedPipesModule,
     PatchDbModule,
@@ -73,7 +70,6 @@ import { FormPageModule } from './modals/form/form.module'
       registrationStrategy: 'registerWhenStable:30000',
     }),
     LoadingModule,
-    FormPageModule,
   ],
   providers: APP_PROVIDERS,
   bootstrap: [AppComponent],

frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.html frontend/projects/ui/src/app/app/connection-bar/connection-bar.component.html

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { heightCollapse } from 'src/app/util/animations'
 import { PatchDB } from 'patch-db-client'
-import { map } from 'rxjs/operators'
+import { map } from 'rxjs'
+import { heightCollapse } from 'src/app/util/animations'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
 @Component({

frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.module.ts frontend/projects/ui/src/app/app/connection-bar/connection-bar.component.module.ts

@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { MenuComponent } from './menu.component'
 import { SnekModule } from '../snek/snek.module'
-import { ConnectionBarComponentModule } from 'src/app/components/connection-bar/connection-bar.component.module'
+import { ConnectionBarComponentModule } from '../connection-bar/connection-bar.component.module'
 
 @NgModule({
   imports: [

frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.scss frontend/projects/ui/src/app/app/connection-bar/connection-bar.component.scss

@@ -1,6 +1,6 @@
 import { Component, HostListener, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { pauseFor } from '@start9labs/shared'
+import { pauseFor } from '../../../../../shared/src/public-api'
 
 @Component({
   selector: 'snake',

frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.ts frontend/projects/ui/src/app/app/connection-bar/connection-bar.component.ts

@@ -1,8 +1,8 @@
 import { Directive, HostListener, Input } from '@angular/core'
 import { LoadingController, ModalController } from '@ionic/angular'
 import { ErrorToastService } from '@start9labs/shared'
-import { SnakePage } from 'src/app/modals/snake/snake.page'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { SnakePage } from './snake.page'
 
 @Directive({
   selector: 'img[appSnek]',

frontend/projects/ui/src/app/app/footer/footer.component.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
 
-import { SnakePageModule } from 'src/app/modals/snake/snake.module'
 import { SnekDirective } from './snek.directive'
+import { SnakePage } from './snake.page'
 
 @NgModule({
-  imports: [SnakePageModule],
-  declarations: [SnekDirective],
-  exports: [SnekDirective],
+  imports: [CommonModule, IonicModule],
+  declarations: [SnekDirective, SnakePage],
+  exports: [SnekDirective, SnakePage],
 })
 export class SnekModule {}

frontend/projects/ui/src/app/app/menu/menu.module.ts

@@ -5,10 +5,7 @@ import { BackupReportPage } from './backup-report.page'
 
 @NgModule({
   declarations: [BackupReportPage],
-  imports: [
-    CommonModule,
-    IonicModule,
-  ],
+  imports: [CommonModule, IonicModule],
   exports: [BackupReportPage],
 })
-export class BackupReportPageModule { }
+export class BackupReportPageModule {}

frontend/projects/ui/src/app/modals/snake/snake.page.html frontend/projects/ui/src/app/app/snek/snake.page.html

@@ -11,9 +11,9 @@
 
 <ion-content>
   <ion-item-group>
-    <ion-item-divider
-      >Completed: {{ timestamp | date : 'medium' }}</ion-item-divider
-    >
+    <ion-item-divider>
+      Completed: {{ timestamp | date : 'medium' }}
+    </ion-item-divider>
     <ion-item>
       <ion-label>
         <h2>System data</h2>
@@ -29,10 +29,9 @@ <h2>System data</h2>
       <ion-label>
         <h2>{{ pkg.key }}</h2>
         <p>
-          <ion-text [color]="pkg.value.error ? 'danger' : 'success'"
-            >{{ pkg.value.error ? 'Failed: ' + pkg.value.error : 'Succeeded'
-            }}</ion-text
-          >
+          <ion-text [color]="pkg.value.error ? 'danger' : 'success'">
+            {{ pkg.value.error ? 'Failed: ' + pkg.value.error : 'Succeeded' }}
+          </ion-text>
         </p>
       </ion-label>
       <ion-icon

frontend/projects/ui/src/app/modals/snake/snake.page.scss frontend/projects/ui/src/app/app/snek/snake.page.scss

@@ -5,7 +5,6 @@ import { BackupReport } from 'src/app/services/api/api.types'
 @Component({
   selector: 'backup-report',
   templateUrl: './backup-report.page.html',
-  styleUrls: ['./backup-report.page.scss'],
 })
 export class BackupReportPage {
   @Input() report!: BackupReport

frontend/projects/ui/src/app/modals/snake/snake.page.ts frontend/projects/ui/src/app/app/snek/snake.page.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common'
 import { ReactiveFormsModule } from '@angular/forms'
 import { TuiValueChangesModule } from '@taiga-ui/cdk'
 import { TuiButtonModule, TuiModeModule } from '@taiga-ui/core'
-import { FormModule } from 'src/app/components/form/form.module'
+import { FormModule } from 'src/app/common/form/form.module'
 import { FormPage } from './form.page'
 
 @NgModule({

frontend/projects/ui/src/app/app/snek/snek.directive.ts

@@ -5,15 +5,15 @@ import {
   Input,
   OnInit,
 } from '@angular/core'
-import { FormService } from 'src/app/services/form.service'
 import { InputSpec } from '@start9labs/start-sdk/lib/config/configTypes'
 import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
 import { TuiDialogContext } from '@taiga-ui/core'
 import { tuiMarkControlAsTouchedAndValidate } from '@taiga-ui/cdk'
-import { InvalidService } from '../../components/form/invalid.service'
 import { TuiDialogFormService } from '@taiga-ui/kit'
 import { FormGroup } from '@angular/forms'
 import { compare, Operation } from 'fast-json-patch'
+import { InvalidService } from 'src/app/common/form/invalid.service'
+import { FormService } from 'src/app/services/form.service'
 
 export interface ActionButton<T> {
   text: string

frontend/projects/ui/src/app/app/snek/snek.module.ts

@@ -1,13 +1,11 @@
 import { Component, inject, Input, ViewChild } from '@angular/core'
 import { ModalController, IonicSafeString, IonInput } from '@ionic/angular'
 import { getErrorMessage, THEME } from '@start9labs/shared'
-import { MaskPipe } from 'src/app/pipes/mask/mask.pipe'
+import { mask } from 'src/app/util/mask'
 
 @Component({
   selector: 'generic-input',
   templateUrl: './generic-input.component.html',
-  styleUrls: ['./generic-input.component.scss'],
-  providers: [MaskPipe],
 })
 export class GenericInputComponent {
   @ViewChild('mainInput') elem?: IonInput
@@ -23,10 +21,7 @@ export class GenericInputComponent {
 
   readonly theme$ = inject(THEME)
 
-  constructor(
-    private readonly modalCtrl: ModalController,
-    private readonly mask: MaskPipe,
-  ) {}
+  constructor(private readonly modalCtrl: ModalController) {}
 
   ngOnInit() {
     const defaultOptions: Partial<GenericInputOptions> = {
@@ -62,7 +57,7 @@ export class GenericInputComponent {
       .split('')
       .map(x => (x === '●' ? this.value[i++] : x))
       .join('')
-    this.maskedValue = this.mask.transform(this.value)
+    this.maskedValue = mask(this.value)
   }
 
   async submit() {

frontend/projects/ui/src/app/modals/backup-report/backup-report.module.ts frontend/projects/ui/src/app/apps/ui/modals/backup-report/backup-report.module.ts

@@ -34,4 +34,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class BackupsRoutingModule {}
+export class BackupsModule {}

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

@@ -5,12 +5,11 @@ import {
   PipeTransform,
 } from '@angular/core'
 import { PatchDB } from 'patch-db-client'
-import { take } from 'rxjs/operators'
+import { take, Observable } from 'rxjs'
 import {
   DataModel,
   PackageMainStatus,
 } from 'src/app/services/patch-db/data-model'
-import { Observable } from 'rxjs'
 
 @Component({
   selector: 'backing-up',

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

@@ -1,12 +1,12 @@
 import { Directive, HostListener } from '@angular/core'
 import { LoadingController, ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { BackupSelectPage } from 'src/app/apps/ui/pages/backups-routes/modals/backup-select/backup-select.page'
 import { TargetSelectPage } from '../modals/target-select/target-select.page'
 import {
   CifsBackupTarget,
   DiskBackupTarget,
 } from 'src/app/services/api/api.types'
+import { BackupSelectPage } from '../modals/backup-select/backup-select.page'
 
 @Directive({
   selector: '[backupCreate]',

frontend/projects/ui/src/app/modals/form/form.module.ts frontend/projects/ui/src/app/apps/ui/modals/form/form.module.ts

@@ -8,11 +8,11 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import {
   GenericInputComponent,
   GenericInputOptions,
-} from 'src/app/modals/generic-input/generic-input.component'
+} from 'src/app/apps/ui/modals/generic-input/generic-input.component'
 import { BackupInfo, BackupTarget } from 'src/app/services/api/api.types'
-import { RecoverSelectPage } from 'src/app/apps/ui/pages/backups-routes/modals/recover-select/recover-select.page'
 import * as argon2 from '@start9labs/argon2'
 import { TargetSelectPage } from '../modals/target-select/target-select.page'
+import { RecoverSelectPage } from '../modals/recover-select/recover-select.page'
 
 @Directive({
   selector: '[backupRestore]',

frontend/projects/ui/src/app/modals/form/form.page.html frontend/projects/ui/src/app/apps/ui/modals/form/form.page.html

@@ -1,9 +1,8 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { map } from 'rxjs/operators'
-import { DataModel, PackageState } from 'src/app/services/patch-db/data-model'
 import { PatchDB } from 'patch-db-client'
-import { firstValueFrom } from 'rxjs'
+import { firstValueFrom, map } from 'rxjs'
+import { DataModel, PackageState } from 'src/app/services/patch-db/data-model'
 
 @Component({
   selector: 'backup-select',

frontend/projects/ui/src/app/modals/form/form.page.scss frontend/projects/ui/src/app/apps/ui/modals/form/form.page.scss

@@ -1,10 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { Emver } from '@start9labs/shared'
+import { map, Observable } from 'rxjs'
 import { PackageBackupInfo } from 'src/app/services/api/api.types'
 import { ConfigService } from 'src/app/services/config.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
 
 export interface AppRecoverOption extends PackageBackupInfo {
   id: string

frontend/projects/ui/src/app/modals/form/form.page.ts frontend/projects/ui/src/app/apps/ui/modals/form/form.page.ts

@@ -8,6 +8,7 @@ import {
   HasErrorPipe,
 } from './backup-history.page'
 import { TargetPipesModule } from '../../pipes/target-pipes.module'
+import { BackupReportPageModule } from 'src/app/apps/ui/modals/backup-report/backup-report.module'
 
 const routes: Routes = [
   {
@@ -17,12 +18,13 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  declarations: [BackupHistoryPage, DurationPipe, HasErrorPipe],
   imports: [
     CommonModule,
     IonicModule,
-    RouterModule.forChild(routes),
     TargetPipesModule,
+    BackupReportPageModule,
+    RouterModule.forChild(routes),
   ],
+  declarations: [BackupHistoryPage, DurationPipe, HasErrorPipe],
 })
 export class BackupHistoryPageModule {}

frontend/projects/ui/src/app/modals/generic-input/generic-input.component.html frontend/projects/ui/src/app/apps/ui/modals/generic-input/generic-input.component.html

@@ -5,7 +5,7 @@ import { LoadingController, ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ErrorToastService } from '@start9labs/shared'
 import { BehaviorSubject } from 'rxjs'
-import { BackupReportPage } from 'src/app/modals/backup-report/backup-report.page'
+import { BackupReportPage } from 'src/app/apps/ui/modals/backup-report/backup-report.page'
 
 @Component({
   selector: 'backup-history',

frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts frontend/projects/ui/src/app/apps/ui/modals/generic-input/generic-input.component.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
-import { BackupTargetsPage } from './backup-targets.page'
-import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/skeleton-list.component.module'
 import { UnitConversionPipesModule } from '@start9labs/shared'
+import { SkeletonListComponentModule } from 'src/app/common/skeleton-list/skeleton-list.component.module'
+import { FormPageModule } from 'src/app/apps/ui/modals/form/form.module'
+import { BackupTargetsPage } from './backup-targets.page'
 
 const routes: Routes = [
   {
@@ -18,9 +19,10 @@ const routes: Routes = [
   imports: [
     CommonModule,
     IonicModule,
-    RouterModule.forChild(routes),
     SkeletonListComponentModule,
     UnitConversionPipesModule,
+    FormPageModule,
+    RouterModule.forChild(routes),
   ],
 })
 export class BackupTargetsPageModule {}

frontend/projects/ui/src/app/modals/generic-input/generic-input.component.ts frontend/projects/ui/src/app/apps/ui/modals/generic-input/generic-input.component.ts

@@ -15,17 +15,17 @@ import {
 } from '../../types/target-types'
 import { BehaviorSubject, filter } from 'rxjs'
 import { TuiDialogService } from '@taiga-ui/core'
-import { ErrorService } from '@start9labs/shared'
-import { FormDialogService } from 'src/app/services/form-dialog.service'
-import { FormPage } from 'src/app/modals/form/form.page'
-import { LoadingService } from 'src/app/modals/loading/loading.service'
 import { TUI_PROMPT } from '@taiga-ui/kit'
-import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
+import { ErrorService } from '@start9labs/shared'
 import {
   InputSpec,
   unionSelectKey,
   unionValueKey,
 } from '@start9labs/start-sdk/lib/config/configTypes'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
+import { LoadingService } from 'src/app/common/loading/loading.service'
+import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
 
 type BackupConfig =
   | {