improve config and mock infra

ui/src/app/modals/app-config-value/app-config-value.page.html

@@ -8,9 +8,9 @@
     <ion-title>
       {{ spec.name }}
     </ion-title>
-    <ion-buttons slot="end">
-      <ion-button [disabled]="!!error" (click)="done()" color="primary">
-        {{ saveFn ? 'Save' : 'Done' }}
+    <ion-buttons *ngIf="!!saveFn" slot="end">
+      <ion-button [disabled]="!!error" (click)="save()" color="primary">
+        Save
       </ion-button>
     </ion-buttons>
   </ion-toolbar>

ui/src/app/modals/app-config-value/app-config-value.page.ts

@@ -49,31 +49,32 @@ export class AppConfigValuePage {
   }
 
   async dismiss () {
-    if (this.edited) {
-      await this.presentAlertUnsaved()
+    if (this.value === '') this.value = null
+
+    if (this.spec.type === 'number' && this.value !== null) {
+      this.value = Number(this.value)
+    }
+
+    if ((!!this.saveFn && this.edited) || (!this.saveFn && this.error)) {
+      await this.presentAlert()
     } else {
       await this.trackingModalCtrl.dismiss()
     }
   }
 
-  async done () {
-    if (!this.validate()) { return }
+  async save () {
+    if (this.value === '') this.value = null
 
-    if (this.spec.type !== 'boolean') {
-      this.value = this.value || null
-    }
-    if (this.spec.type === 'number' && this.value) {
+    if (this.spec.type === 'number' && this.value !== null) {
       this.value = Number(this.value)
     }
 
-    if (this.saveFn) {
-      this.loader.displayDuringP(
-        this.saveFn(this.value).catch(e => {
-          console.error(e)
-          this.error = e.message
-        }),
-      )
-    }
+    this.loader.displayDuringP(
+      this.saveFn(this.value).catch(e => {
+        console.error(e)
+        this.error = e.message
+      }),
+    )
 
     await this.trackingModalCtrl.dismiss(this.value)
   }
@@ -84,7 +85,7 @@ export class AppConfigValuePage {
   }
 
   handleInput () {
-    this.error = ''
+    this.validate()
     this.edited = true
   }
 
@@ -114,7 +115,7 @@ export class AppConfigValuePage {
     if (this.spec.type === 'boolean') return true
 
     // test blank
-    if (!this.value && !(this.spec as any).nullable) {
+    if (this.value === '' && !(this.spec as any).nullable) {
       this.error = 'Value cannot be blank'
       return false
     }
@@ -145,14 +146,23 @@ export class AppConfigValuePage {
       }
     }
 
+    this.error = ''
     return true
   }
 
-  private async presentAlertUnsaved () {
+  private async presentAlert () {
+    const header = this.error ?
+      'Invalid Entry' :
+      'Unsaved Changes'
+
+    const message = this.error ?
+    'Value will not be saved' :
+    'You have unsaved changes. Are you sure you want to leave?'
+
     const alert = await this.alertCtrl.create({
       backdropDismiss: false,
-      header: 'Unsaved Changes',
-      message: 'You have unsaved changes. Are you sure you want to leave?',
+      header,
+      message,
       buttons: [
         {
           text: 'Cancel',

ui/src/app/pages/apps-routes/app-config/app-config.page.html

@@ -49,7 +49,7 @@
               <ion-icon size="small" style="margin-right: 5px" slot="start" color="dark" slot="start" name="alert-circle-outline"></ion-icon>
               <ion-text style="font-size: smaller;">Initial Config</ion-text>
             </h2>
-            <p style="font-size: small">To use the default config for {{ app.title | ngrxPush }}, click "Save" below.</p>
+            <p style="font-size: small">To use the default config for {{ pkg.manifest.title }}, click "Save" below.</p>
           </ion-label>
         </ion-item>
       </ng-container>
@@ -65,7 +65,7 @@
               <ion-text style="margin: 5px; font-family: 'Montserrat'; font-size: smaller;">{{ rec.dependentTitle }}</ion-text>
             </h2>
             <div style="margin: 7px 5px;">
-              <p style="font-size: small; color: var(--ion-color-medium)"> {{app.title | ngrxPush}} config has been modified to satisfy {{ rec.dependentTitle }}.
+              <p style="font-size: small; color: var(--ion-color-medium)"> {{ pkg.manifest.title }} config has been modified to satisfy {{ rec.dependentTitle }}.
                 <ion-text color="dark">To accept the changes, click “Save” below.</ion-text>
               </p>
               <a style="font-size: small" *ngIf="!openRec" (click)="openRec = true">More Info</a>
@@ -92,13 +92,13 @@
       <!-- no config -->
       <ion-item *ngIf="!hasConfig">
         <ion-label class="ion-text-wrap">
-          <p>No config options for {{ app.title | ngrxPush }} {{ app.versionInstalled | ngrxPush }}.</p>
+          <p>No config options for {{ pkg.manifest.title }} {{ pkg.manifest.version }}.</p>
         </ion-label>
       </ion-item>
 
       <!-- save button, always show -->
       <ion-button
-        [disabled]="invalid || (!edited && !added && !(['NEEDS_CONFIG'] | includes: (app.status | ngrxPush)))"
+        [disabled]="invalid || (!edited && !added && !pkg.status.configured )"
         fill="outline"
         expand="block"
         style="margin: 10px"

ui/src/app/pages/apps-routes/app-config/app-config.page.ts

@@ -13,7 +13,7 @@ import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
-import { InstalledPackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { InstalledPackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
 
 @Component({
@@ -32,6 +32,7 @@ export class AppConfigPage {
   hasConfig = false
 
   backButtonDefense = false
+  packageState = PackageState
 
   rec: Recommendation | null = null
   showRec = true

ui/src/app/pages/server-routes/general-settings/general-settings.page.html

@@ -18,7 +18,7 @@
       <ion-label>Auto Check for Updates</ion-label>
       <ion-note slot="end">{{ ui['auto-check-updates'] }}</ion-note>
     </ion-item>
-    <!-- <ion-item style="word-break: break-all;" button (click)="presentModalValueEdit('password')">
+    <!-- <ion-item style="word-break: break-all;" button (click)="presentModalValueEdit('password', ui.password)">
       <ion-label>Change Password</ion-label>
       <ion-note slot="end">********</ion-note>
     </ion-item> -->

ui/src/app/services/api/mock-api.service.ts

@@ -36,15 +36,40 @@ export class MockApiService extends ApiService {
   // db
 
   async getRevisions (since: number): Promise<RR.GetRevisionsRes> {
-    return this.http.rpcRequest({ method: 'db.revisions', params: { since } })
+    await pauseFor(2000)
+    return {
+      ...Mock.DbDump,
+      id: this.nextSequence(),
+    }
+    // return this.http.rpcRequest({ method: 'db.revisions', params: { since } })
   }
 
   async getDump (): Promise<RR.GetDumpRes> {
-    return this.http.rpcRequest({ method: 'db.dump' })
+    await pauseFor(2000)
+    return {
+      ...Mock.DbDump,
+      id: this.nextSequence(),
+    }
+    // return this.http.rpcRequest({ method: 'db.dump' })
   }
 
   async setDbValueRaw (params: RR.SetDBValueReq): Promise<RR.SetDBValueRes> {
-    return this.http.rpcRequest({ method: 'db.put.ui', params })
+    await pauseFor(2000)
+    return {
+      response: null,
+      revision: {
+        id: this.nextSequence(),
+        patch: [
+          {
+            op: PatchOp.REPLACE,
+            path: params.pointer,
+            value: params.value,
+          },
+        ],
+        expireId: null,
+      },
+    }
+    // return this.http.rpcRequest({ method: 'db.put.ui', params })
   }
 
   // auth

ui/src/app/services/server-config.service.ts

@@ -58,8 +58,7 @@ const serverConfig: ConfigSpec = {
     name: 'Device Name',
     description: 'A unique label for this device.',
     nullable: false,
-    // @TODO determine regex
-    // pattern: '',
+    pattern: '^.{1,40}$',
     patternDescription: 'Must be less than 40 characters',
     masked: false,
     copyable: false,
@@ -67,7 +66,7 @@ const serverConfig: ConfigSpec = {
   autoCheckUpdates: {
     type: 'boolean',
     name: 'Auto Check for Updates',
-    description: 'On launch, EmabssyOS will automatically check for updates of itself and your installed services. Updating still requires user approval and action. No updates will ever be performed automatically.',
+    description: 'On launch, EmbassyOS will automatically check for updates of itself and your installed services. Updating still requires user approval and action. No updates will ever be performed automatically.',
     default: true,
   },
   ssh: {

ui/ui-config.json

@@ -12,7 +12,8 @@
   "mocks": {
     "enabled": true,
     "connection": "poll",
-    "websocketUrl": "",
+    "rpcPort": "5959",
+    "wsPort": "5960",
     "maskAs": "tor",
     "skipStartupAlerts": true
   }