finish file upload API and implement for config

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

@@ -6,7 +6,6 @@ import { SharedPipesModule } from '@start9labs/shared'
 import { TuiElasticContainerModule } from '@taiga-ui/kit'
 import { TuiExpandModule } from '@taiga-ui/core'
 import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
-
 import { FormLabelComponent } from './form-label/form-label.component'
 import { FormObjectComponent } from './form-object/form-object.component'
 import { FormUnionComponent } from './form-union/form-union.component'
@@ -14,7 +13,6 @@ import {
   GetErrorPipe,
   ToWarningTextPipe,
   ToElementIdPipe,
-  GetControlPipe,
   ToEnumListDisplayPipe,
   ToRangePipe,
 } from './form-object.pipes'
@@ -28,7 +26,6 @@ import {
     GetErrorPipe,
     ToEnumListDisplayPipe,
     ToElementIdPipe,
-    GetControlPipe,
     ToRangePipe,
   ],
   imports: [

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

@@ -74,19 +74,3 @@ export class ToElementIdPipe implements PipeTransform {
     return getElementId(objectId, key, index)
   }
 }
-
-@Pipe({
-  name: 'getControl',
-})
-export class GetControlPipe implements PipeTransform {
-  transform(
-    formGroup: FormGroup,
-    key: string,
-    index?: number,
-  ): AbstractControl {
-    const abstractControl = formGroup.get(key)!
-    if (index !== undefined)
-      return (abstractControl as UntypedFormArray).at(index)
-    return abstractControl
-  }
-}

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

@@ -63,18 +63,14 @@
           </ion-note>
         </ion-item>
         <p class="error-message">
-          <span *ngIf="(formGroup | getControl : entry.key).errors as errors">
+          <span *ngIf="formGroup.get(entry.key)?.errors as errors">
             {{ errors | getError : $any(spec)['pattern-description'] }}
           </span>
         </p>
       </ng-container>
-      <!-- boolean, enum, or file -->
+      <!-- boolean or enum -->
       <ion-item
-        *ngIf="
+        *ngIf="spec.type === 'boolean' || spec.type === 'enum'"
-          spec.type === 'boolean' ||
-          spec.type === 'enum' ||
-          spec.type === 'file'
-        "
         style="--padding-start: 0"
       >
         <ion-button
@@ -130,36 +126,65 @@
             {{ spec['value-names'][option] }}
           </ion-select-option>
         </ion-select>
-
+      </ion-item>
-        <div
+      <!-- file -->
-          *ngIf="spec.type === 'file' && formGroup.get(entry.key) as control"
+      <ng-container
-          slot="end"
+        *ngIf="spec.type === 'file' && formGroup.get(entry.key) as control"
-        >
+      >
+        <ion-item style="--padding-start: 0">
           <ion-button
-            *ngIf="!control.value; else hasFile"
+            *ngIf="spec.description as desc"
-            strong
+            fill="clear"
-            color="dark"
+            (click.stop)="presentAlertDescription(spec.name, desc)"
-            size="small"
+            style="--padding-start: 0"
           >
-            <label for="upload-file">Browse...</label>
+            <ion-icon
+              name="help-circle-outline"
+              slot="icon-only"
+              size="small"
+            ></ion-icon>
+          </ion-button>
+          <ion-label>
+            <b>
+              {{ spec.name }}
+              <ion-text *ngIf="entry.value.dirty" color="warning">
+                (Edited)
+              </ion-text>
+            </b>
+          </ion-label>
+          <div slot="end">
+            <ion-button
+              *ngIf="!control.value; else hasFile"
+              strong
+              color="dark"
+              size="small"
+              (click)="uploadFile.click()"
+            >
+              Browse...
+            </ion-button>
             <input
               type="file"
               [accept]="spec.extensions.join(',')"
-              style="position: absolute; opacity: 0; height: 100%"
+              style="display: none"
-              id="upload-file"
+              #uploadFile
               (change)="handleFileInput($event, control)"
             />
-          </ion-button>
+            <ng-template #hasFile>
-          <ng-template #hasFile>
+              <div class="inline">
-            <div class="inline">
+                <p class="ion-padding-end">{{ control.value.name }}</p>
-              <p class="ion-padding-end">{{ control.value.name }}</p>
+                <div style="cursor: pointer" (click)="clearFile(control)">
-              <div style="cursor: pointer" (click)="clearFile(control)">
+                  <ion-icon name="close"></ion-icon>
-                <ion-icon name="close"></ion-icon>
+                </div>
               </div>
-            </div>
+            </ng-template>
-          </ng-template>
+          </div>
-        </div>
+        </ion-item>
-      </ion-item>
+        <p class="error-message">
+          <span *ngIf="control.errors as errors">
+            {{ errors | getError }}
+          </span>
+        </p>
+      </ng-container>
       <!-- object -->
       <ng-container *ngIf="spec.type === 'object'">
         <!-- label -->
@@ -242,7 +267,7 @@
             </ion-button>
           </ion-item-divider>
           <p class="error-message" style="margin-bottom: 8px">
-            <span *ngIf="(formGroup | getControl : entry.key).errors as errors">
+            <span *ngIf="formGroup.get(entry.key)?.errors as errors">
               {{ errors | getError }}
             </span>
           </p>
@@ -353,7 +378,7 @@
                 <p class="error-message">
                   <span
                     *ngIf="
-                      (formGroup | getControl : entry.key : i).errors as errors
+                      $any(formGroup.get(entry.key))?.at(i)?.errors as errors
                     "
                   >
                     {{ errors | getError : $any(spec)['pattern-description'] }}
@@ -396,7 +421,7 @@
             </ion-button>
           </ion-item>
           <p class="error-message">
-            <span *ngIf="(formGroup | getControl : entry.key).errors as errors">
+            <span *ngIf="formGroup.get(entry.key)?.errors as errors">
               {{ errors | getError }}
             </span>
           </p>

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

@@ -17,7 +17,6 @@ import { InputSpec } from 'start-sdk/types/config-types'
 import {
   DataModel,
   PackageDataEntry,
-  PackageState,
 } from 'src/app/services/patch-db/data-model'
 import { PatchDB } from 'patch-db-client'
 import { UntypedFormGroup } from '@angular/forms'
@@ -139,32 +138,64 @@ export class AppConfigPage {
 
     this.saving = true
 
+    const config = this.configForm!.value
+
+    const fileKeys = Object.keys(config).filter(
+      key => config[key] instanceof File,
+    )
+
+    let loader: HTMLIonLoadingElement | undefined
+    if (fileKeys.length) {
+      loader = await this.loadingCtrl.create({
+        message: `Uploading File${fileKeys.length > 1 ? 's' : ''}...`,
+      })
+      await loader.present()
+
+      try {
+        const hashes = await Promise.all(
+          fileKeys.map(key => this.embassyApi.uploadFile(config[key])),
+        )
+        fileKeys.forEach((key, i) => (config[key] = hashes[i]))
+      } catch (e: any) {
+        this.errToast.present(e)
+      } finally {
+        await loader.dismiss()
+        return
+      }
+    }
+
     if (await hasCurrentDeps(this.patch, this.pkgId)) {
-      this.dryConfigure()
+      this.dryConfigure(config, loader)
     } else {
-      this.configure()
+      this.configure(config, loader)
     }
   }
 
-  private async dryConfigure() {
+  private async dryConfigure(
-    const loader = await this.loadingCtrl.create({
+    config: Record<string, any>,
-      message: 'Checking dependent services...',
+    loader?: HTMLIonLoadingElement,
-    })
+  ) {
-    await loader.present()
+    const message = 'Checking dependent services...'
+    if (loader) {
+      loader.message = message
+    } else {
+      loader = await this.loadingCtrl.create({ message })
+      await loader.present()
+    }
 
     try {
       const breakages = await this.embassyApi.drySetPackageConfig({
         id: this.pkgId,
-        config: this.configForm!.value,
+        config,
       })
 
       if (isEmptyObject(breakages)) {
-        this.configure(loader)
+        this.configure(config, loader)
       } else {
         await loader.dismiss()
         const proceed = await this.presentAlertBreakages(breakages)
         if (proceed) {
-          this.configure()
+          this.configure(config)
         } else {
           this.saving = false
         }
@@ -176,7 +207,10 @@ export class AppConfigPage {
     }
   }
 
-  private async configure(loader?: HTMLIonLoadingElement) {
+  private async configure(
+    config: Record<string, any>,
+    loader?: HTMLIonLoadingElement,
+  ) {
     const message = 'Saving...'
     if (loader) {
       loader.message = message
@@ -188,7 +222,7 @@ export class AppConfigPage {
     try {
       await this.embassyApi.setPackageConfig({
         id: this.pkgId,
-        config: this.configForm!.value,
+        config,
       })
       this.modalCtrl.dismiss()
     } catch (e: any) {

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -847,7 +847,7 @@ export module Mock {
       name: 'Needed File',
       type: 'file',
       description: 'A file we need',
-      placeholder: 'Testing placeholder',
+      placeholder: null, // @TODO delete
       warning: 'Testing warning',
       nullable: false,
       extensions: ['.png'],

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

@@ -30,7 +30,9 @@ export abstract class ApiService {
   abstract getStatic(url: string): Promise<string>
 
   // for sideloading packages
-  abstract uploadPackage(guid: string, body: Blob): Promise<string>
+  abstract uploadPackage(guid: string, body: Blob): Promise<void>
+
+  abstract uploadFile(body: Blob): Promise<string>
 
   // db
 

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

@@ -31,7 +31,7 @@ export class LiveApiService extends ApiService {
     private readonly patch: PatchDB<DataModel>,
   ) {
     super()
-    ; (window as any).rpcClient = this
+    ;(window as any).rpcClient = this
   }
 
   // for getting static files: ex icons, instructions, licenses
@@ -44,7 +44,7 @@ export class LiveApiService extends ApiService {
   }
 
   // for sideloading packages
-  async uploadPackage(guid: string, body: Blob): Promise<string> {
+  async uploadPackage(guid: string, body: Blob): Promise<void> {
     return this.httpRequest({
       method: Method.POST,
       body,
@@ -53,6 +53,15 @@ export class LiveApiService extends ApiService {
     })
   }
 
+  async uploadFile(body: Blob): Promise<string> {
+    return this.httpRequest({
+      method: Method.POST,
+      body,
+      url: `/rest/upload`,
+      responseType: 'text',
+    })
+  }
+
   // db
 
   async setDbValue<T>(

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

@@ -86,9 +86,13 @@ export class MockApiService extends ApiService {
     return markdown
   }
 
-  async uploadPackage(guid: string, body: Blob): Promise<string> {
+  async uploadPackage(guid: string, body: Blob): Promise<void> {
     await pauseFor(2000)
-    return 'success'
+  }
+
+  async uploadFile(body: Blob): Promise<string> {
+    await pauseFor(2000)
+    return 'returnedhash'
   }
 
   // db