Rework PackageDataEntry for new strategy (#2573)

* rework PackageDataEntry for new strategy

* fix type error

* fix issues with manifest fetching

* mock installs working

web/projects/ui/src/app/modals/app-config/app-config.page.html

@@ -9,7 +9,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding" *ngIf="pkg['state-info'].manifest as manifest">
   <!-- loading -->
   <text-spinner
     *ngIf="loading; else notLoading"
@@ -25,14 +25,14 @@
     </ion-item>
 
     <ng-template #noError>
-      <ng-container *ngIf="configForm && !pkg.installed?.status?.configured">
+      <ng-container *ngIf="configForm && !pkg.status.configured">
         <ng-container *ngIf="!original; else hasOriginal">
           <h2
             *ngIf="!configForm.dirty"
             class="ion-padding-bottom header-details"
           >
             <ion-text color="success">
-              {{ pkg.manifest.title }} has been automatically configured with
+              {{ manifest.title }} has been automatically configured with
               recommended defaults. Make whatever changes you want, then click
               "Save".
             </ion-text>
@@ -59,19 +59,19 @@
           <h2 style="display: flex; align-items: center">
             <img
               style="width: 18px; margin: 4px"
-              [src]="pkg['static-files'].icon"
-              [alt]="pkg.manifest.title"
+              [src]="pkg.icon"
+              [alt]="manifest.title"
             />
             <ion-text
               style="margin: 5px; font-family: 'Montserrat'; font-size: 18px"
             >
-              {{ pkg.manifest.title }}
+              {{ manifest.title }}
             </ion-text>
           </h2>
           <p>
             <ion-text color="dark">
-              The following modifications have been made to {{
-              pkg.manifest.title }} to satisfy {{ dependentInfo.title }}:
+              The following modifications have been made to {{ manifest.title }}
+              to satisfy {{ dependentInfo.title }}:
               <ul>
                 <li *ngFor="let d of diff" [innerHtml]="d"></li>
               </ul>
@@ -85,8 +85,7 @@
       <ion-item *ngIf="!hasOptions">
         <ion-label>
           <p>
-            No config options for {{ pkg.manifest.title }} {{
-            pkg.manifest.version }}.
+            No config options for {{ manifest.title }} {{ manifest.version }}.
           </p>
         </ion-label>
       </ion-item>

web/projects/ui/src/app/modals/app-config/app-config.page.ts

@@ -16,6 +16,7 @@ import { DependentInfo } from 'src/app/types/dependent-info'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import {
   DataModel,
+  InstalledState,
   PackageDataEntry,
 } from 'src/app/services/patch-db/data-model'
 import { PatchDB } from 'patch-db-client'
@@ -26,7 +27,12 @@ import {
 } from 'src/app/services/form.service'
 import { compare, Operation, getValueByPointer } from 'fast-json-patch'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
-import { getAllPackages, getPackage } from 'src/app/util/get-package-data'
+import {
+  getAllPackages,
+  getManifest,
+  getPackage,
+  isInstalled,
+} from 'src/app/util/get-package-data'
 import { Breakages } from 'src/app/services/api/api.types'
 
 @Component({
@@ -39,7 +45,7 @@ export class AppConfigPage {
 
   @Input() dependentInfo?: DependentInfo
 
-  pkg!: PackageDataEntry
+  pkg!: PackageDataEntry<InstalledState>
   loadingText = ''
 
   configSpec?: ConfigSpec
@@ -68,10 +74,11 @@ export class AppConfigPage {
   async ngOnInit() {
     try {
       const pkg = await getPackage(this.patch, this.pkgId)
-      if (!pkg) return
+      if (!pkg || !isInstalled(pkg)) return
+
       this.pkg = pkg
 
-      if (!this.pkg.manifest.config) return
+      if (!this.pkg['state-info'].manifest.config) return
 
       let newConfig: object | undefined
       let patch: Operation[] | undefined
@@ -210,7 +217,7 @@ export class AppConfigPage {
       'As a result of this change, the following services will no longer work properly and may crash:<ul>'
     const localPkgs = await getAllPackages(this.patch)
     const bullets = Object.keys(breakages).map(id => {
-      const title = localPkgs[id].manifest.title
+      const title = getManifest(localPkgs[id]).title
       return `<li><b>${title}</b></li>`
     })
     message = `${message}${bullets}</ul>`

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

@@ -4,6 +4,7 @@ import { map, take } 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 { getManifest } from 'src/app/util/get-package-data'
 
 @Component({
   selector: 'backup-select',
@@ -32,13 +33,13 @@ export class BackupSelectPage {
         map(pkgs => {
           return Object.values(pkgs)
             .map(pkg => {
-              const { id, title } = pkg.manifest
+              const { id, title } = getManifest(pkg)
               return {
                 id,
                 title,
-                icon: pkg['static-files'].icon,
-                disabled: pkg.state !== PackageState.Installed,
-                checked: pkg.state === PackageState.Installed,
+                icon: pkg.icon,
+                disabled: pkg['state-info'].state !== PackageState.Installed,
+                checked: false,
               }
             })
             .sort((a, b) =>