fix bugs with config and clean up dev options (#1558)

* fix bugs with config and clean up dev options

* dont down down arrow in logs prematurely

* change config error border to match error text red color

* change restart button color

* fix error when sideloading and update copy

* adds back in param cloning as this bug creeped up again

* make restarting text match button color

* fix version comparision for updates category

Co-authored-by: Matt Hill <matthill@Matt-M1.local>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/marketplace/src/pipes/filter-packages.pipe.ts

@@ -3,6 +3,7 @@ import Fuse from 'fuse.js'
 
 import { MarketplacePkg } from '../types/marketplace-pkg'
 import { MarketplaceManifest } from '../types/marketplace-manifest'
+import { Emver } from '@start9labs/shared'
 
 const defaultOps = {
   isCaseSensitive: false,
@@ -29,6 +30,8 @@ const defaultOps = {
   name: 'filterPackages',
 })
 export class FilterPackagesPipe implements PipeTransform {
+  constructor(private readonly emver: Emver) {}
+
   transform(
     packages: MarketplacePkg[] | null,
     query: string,
@@ -49,7 +52,10 @@ export class FilterPackagesPipe implements PipeTransform {
       return packages.filter(
         ({ manifest }) =>
           local[manifest.id] &&
-          manifest.version !== local[manifest.id].manifest.version,
+          this.emver.compare(
+            manifest.version,
+            local[manifest.id].manifest.version,
+          ) === 1,
       )
     }
 

frontend/projects/shared/src/pipes/emver/emver.pipe.ts

@@ -31,6 +31,7 @@ export class EmverComparesPipe implements PipeTransform {
     }
   }
 }
+// left compared to right - if 1, version on left is higher; if 0, values the same; if -1, version on left is lower
 type SemverResult = 0 | 1 | -1 | 'comparison-impossible'
 
 @Pipe({

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

@@ -1,4 +1,4 @@
-<div [hidden]="!control.dirty && !control.touched" class="validation-error">
+<div [hidden]="!control.dirty && !control.touched" class="error-message">
   <!-- primitive -->
   <p *ngIf="control.hasError('required')">{{ spec.name }} is required</p>
 

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

@@ -1,24 +1,12 @@
 <ion-button
   *ngIf="data.spec.description"
   class="slot-start"
-  style="--padding-start: 0; --padding-end: 7px"
   fill="clear"
   (click)="presentAlertDescription()"
 >
   <ion-icon name="help-circle-outline" slot="icon-only" size="small"></ion-icon>
 </ion-button>
 
-<!-- this is a button for css purposes only -->
-<ion-button
-  *ngIf="data.invalid"
-  class="slot-start"
-  fill="clear"
-  size="small"
-  color="danger"
->
-  <ion-icon name="warning-outline"></ion-icon>
-</ion-button>
-
 <span>{{ data.spec.name }}</span>
 
 <ion-text color="success" *ngIf="data.new">&nbsp;(New)</ion-text>

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

@@ -47,7 +47,10 @@
       <!-- string or number -->
       <ng-container *ngIf="spec.type === 'string' || spec.type === 'number'">
         <!-- label -->
-        <h4 class="input-label">
+        <h4
+          class="input-label"
+          [class.validation-error]="formGroup.get(entry.key)?.errors"
+        >
           <form-label
             [data]="{
               spec: spec,
@@ -98,6 +101,12 @@
             >{{ spec.units }}</ion-note
           >
         </ion-item>
+        <form-error
+          *ngIf="formGroup.get(entry.key)?.errors"
+          [control]="$any(formGroup.get(entry.key))"
+          [spec]="spec"
+        >
+        </form-error>
       </ng-container>
       <!-- boolean or enum -->
       <ion-item
@@ -164,6 +173,8 @@
         <ion-item-divider
           (click)="toggleExpandObject(entry.key)"
           style="cursor: pointer"
+          [class.error-border]="entry.value.invalid"
+          [class.validation-error]="entry.value.invalid"
         >
           <form-label
             [data]="{
@@ -217,7 +228,10 @@
           [formArrayName]="entry.key"
         >
           <!-- label -->
-          <ion-item-divider>
+          <ion-item-divider
+            [class.error-border]="entry.value.invalid"
+            [class.validation-error]="entry.value.invalid"
+          >
             <form-label
               [data]="{
                 spec: spec,
@@ -226,8 +240,9 @@
               }"
             ></form-label>
             <ion-button
+              strong
               fill="clear"
-              color="primary"
+              color="dark"
               slot="end"
               (click)="addListItemWrapper(entry.key, spec)"
             >
@@ -235,6 +250,12 @@
               Add
             </ion-button>
           </ion-item-divider>
+          <form-error
+            *ngIf="formGroup.get(entry.key)?.errors"
+            [control]="$any(formGroup.get(entry.key))"
+            [spec]="spec"
+          >
+          </form-error>
           <!-- body -->
           <div class="nested-wrapper">
             <div
@@ -249,7 +270,11 @@
                 *ngIf="spec.subtype === 'object' || spec.subtype === 'union'"
               >
                 <!-- nested label -->
-                <ion-item button (click)="toggleExpandListObject(entry.key, i)">
+                <ion-item
+                  button
+                  (click)="toggleExpandListObject(entry.key, i)"
+                  [class.error-border]="abstractControl.invalid"
+                >
                   <form-label
                     [data]="{
                       spec: $any({
@@ -258,8 +283,7 @@
                           'Entry ' + (i + 1)
                       }),
                       new: false,
-                      edited: abstractControl.dirty,
+                      edited: abstractControl.dirty
-                      invalid: abstractControl.invalid
                     }"
                   ></form-label>
                   <ion-icon
@@ -275,7 +299,7 @@
                 </ion-item>
                 <!-- nested body -->
                 <div
-                  class="ion-padding-start"
+                  style="padding-left: 24px"
                   [id]="getElementId(entry.key, i)"
                   [ngStyle]="{
                     'max-height': objectListDisplay[entry.key][i].height,
@@ -332,6 +356,7 @@
                   >
                   </ion-input>
                   <ion-button
+                    strong
                     slot="end"
                     color="danger"
                     (click)="presentAlertDelete(entry.key, i)"
@@ -359,6 +384,7 @@
           <!-- label -->
           <p class="input-label">
             <form-label
+              [class.validation-error]="entry.value.invalid"
               [data]="{
                 spec: spec,
                 new: original?.[entry.key] === undefined,
@@ -380,14 +406,14 @@
               <ion-icon slot="icon-only" name="chevron-down"></ion-icon>
             </ion-button>
           </ion-item>
+          <form-error
+            *ngIf="formGroup.get(entry.key)?.errors"
+            [control]="$any(formGroup.get(entry.key))"
+            [spec]="spec"
+          >
+          </form-error>
         </ng-container>
       </ng-container>
-      <form-error
-        *ngIf="formGroup.get(entry.key)?.errors"
-        [control]="$any(formGroup.get(entry.key))"
-        [spec]="spec"
-      >
-      </form-error>
     </div>
   </div>
 </ion-item-group>

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

@@ -1,6 +1,13 @@
 .slot-start {
   display: inline-block;
   vertical-align: middle;
+  --padding-start: 0;
+  --padding-end: 7px;
+}
+
+.error-border {
+  border-color: var(--ion-color-danger-shade);
+  --border-color: var(--ion-color-danger-shade);
 }
 
 ion-input {
@@ -17,11 +24,16 @@ ion-item-divider {
 }
 
 .nested-wrapper {
-  padding: 0 0 24px 24px;
+  padding: 0 0 16px 24px;
 }
 
 .validation-error {
+  opacity: 1;
+}
+
+.error-message {
   p {
+    margin-bottom: 4px;
     font-size: small;
     color: var(--ion-color-danger);
   }

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

@@ -168,7 +168,7 @@ export class FormObjectComponent {
       ]
       this.objectListDisplay[key].push({
         height: '0px',
-        expanded: true,
+        expanded: false,
         displayAs: displayAs ? Mustache.render(displayAs, newItem.value) : '',
       })
     }
@@ -372,7 +372,6 @@ interface HeaderData {
   edited: boolean
   new: boolean
   newOptions?: boolean
-  invalid?: boolean
 }
 
 @Component({

frontend/projects/ui/src/app/components/logs/logs.page.html

@@ -1,19 +1,30 @@
-<ion-content 
+<ion-content
   [scrollEvents]="true"
   (ionScroll)="scrollEvent()"
-  style="height: 100%;"
+  style="height: 100%"
   class="ion-padding"
 >
-  <ion-infinite-scroll id="scroller" *ngIf="!loading && needInfinite" position="top" threshold="0" (ionInfinite)="loadData($event)">
+  <ion-infinite-scroll
-    <ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
+    id="scroller"
+    *ngIf="!loading && needInfinite"
+    position="top"
+    threshold="0"
+    (ionInfinite)="loadData($event)"
+  >
+    <ion-infinite-scroll-content
+      loadingSpinner="lines"
+    ></ion-infinite-scroll-content>
   </ion-infinite-scroll>
 
   <text-spinner *ngIf="loading" text="Loading Logs"></text-spinner>
 
   <div id="container">
-    <div id="template" style="white-space: pre-line; font-family: monospace;"></div>
+    <div
+      id="template"
+      style="white-space: pre-line; font-family: monospace"
+    ></div>
   </div>
-  <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center;">
+  <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center">
     <ion-button *ngIf="!loadingMore" (click)="loadMore()" strong color="dark">
       Load More
       <ion-icon slot="end" name="refresh"></ion-icon>
@@ -22,18 +33,29 @@
   </div>
 
   <div
+    *ngIf="!loading"
     [ngStyle]="{
       'position': 'fixed',
-      'bottom': '50px',
+      'bottom': '36px',
-      'right': isOnBottom ? '-52px' : '30px',
+      'right': isOnBottom ? '-52px' : '36px',
       'background-color': 'var(--ion-color-medium)',
       'border-radius': '100%',
       'transition': 'right 0.4s ease-out'
     }"
   >
-    <ion-button style="width: 50px; height: 50px; --padding-start: 0px; --padding-end: 0px; --border-radius: 100%;" color="dark" (click)="scrollToBottom()" strong>
+    <ion-button
+      style="
+        width: 50px;
+        height: 50px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        --border-radius: 100%;
+      "
+      color="dark"
+      (click)="scrollToBottom()"
+      strong
+    >
       <ion-icon name="chevron-down"></ion-icon>
     </ion-button>
   </div>
-
 </ion-content>

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

@@ -14,7 +14,6 @@ import {
   isObject,
 } from '@start9labs/shared'
 import { DependentInfo } from 'src/app/types/dependent-info'
-import { WizardDefs } from 'src/app/components/app-wizard/wizard-defs'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
@@ -134,7 +133,7 @@ export class AppConfigPage {
     if (this.configForm.invalid) {
       document
         .getElementsByClassName('validation-error')[0]
-        ?.parentElement?.parentElement?.scrollIntoView({ behavior: 'smooth' })
+        ?.scrollIntoView({ behavior: 'smooth' })
       return
     }
 

frontend/projects/ui/src/app/modals/generic-form/generic-form.page.ts

@@ -50,7 +50,7 @@ export class GenericFormPage {
       this.formGroup.markAllAsTouched()
       document
         .getElementsByClassName('validation-error')[0]
-        ?.parentElement?.parentElement?.scrollIntoView({ behavior: 'smooth' })
+        ?.scrollIntoView({ behavior: 'smooth' })
       return
     }
 

frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts

@@ -33,13 +33,6 @@ export class AppShowPage {
   private readonly pkgId = getPkgId(this.route)
 
   readonly pkg$ = this.patch.watch$('package-data', this.pkgId).pipe(
-    filter(
-      (p: PackageDataEntry) =>
-        !(
-          p.installed?.status.main.status === PackageMainStatus.Starting &&
-          p.installed?.status.main.restarting
-        ),
-    ),
     map(pkg => {
       // if package disappears, navigate to list page
       if (!pkg) {
@@ -49,6 +42,15 @@ export class AppShowPage {
       return { ...pkg }
     }),
     startWith(this.patch.getData()['package-data'][this.pkgId]),
+    filter(
+      (p: PackageDataEntry | undefined) =>
+        // will be undefined when sideloading
+        p !== undefined &&
+        !(
+          p.installed?.status.main.status === PackageMainStatus.Starting &&
+          p.installed?.status.main.restarting
+        ),
+    ),
   )
 
   readonly connectionFailure$ = this.connectionService
@@ -60,7 +62,7 @@ export class AppShowPage {
     private readonly navCtrl: NavController,
     private readonly patch: PatchDbService,
     private readonly connectionService: ConnectionService,
-  ) {}
+  ) { }
 
   isInstalled(
     { state }: PackageDataEntry,

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.html

@@ -23,7 +23,7 @@
           </ion-button>
           <ion-button
             class="action-button"
-            color="warning"
+            color="tertiary"
             (click)="tryRestart()"
           >
             <ion-icon slot="start" name="refresh"></ion-icon>

frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.html

@@ -11,7 +11,11 @@
 </ion-header>
 
 <ion-content>
-  <ion-item button (click)="openBasicInfoModal()">
+  <ion-item
+    *ngIf="projectData$ | async as projectData"
+    button
+    (click)="openBasicInfoModal(projectData)"
+  >
     <ion-icon slot="start" name="information-circle-outline"></ion-icon>
     <ion-label>
       <h2>Basic Info</h2>

frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts

@@ -6,10 +6,8 @@ import { BasicInfo, getBasicInfoSpec } from './form-info'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ErrorToastService, DestroyService } from '@start9labs/shared'
-import { takeUntil } from 'rxjs/operators'
-import { DevProjectData } from 'src/app/services/patch-db/data-model'
 import { getProjectId } from 'src/app/util/get-project-id'
-import * as yaml from 'js-yaml'
+import { DevProjectData } from 'src/app/services/patch-db/data-model'
 
 @Component({
   selector: 'developer-menu',
@@ -19,7 +17,7 @@ import * as yaml from 'js-yaml'
 })
 export class DeveloperMenuPage {
   readonly projectId = getProjectId(this.route)
-  projectData: DevProjectData
+  projectData$ = this.patch.watch$('ui', 'dev', this.projectId)
 
   constructor(
     private readonly route: ActivatedRoute,
@@ -27,29 +25,19 @@ export class DeveloperMenuPage {
     private readonly loadingCtrl: LoadingController,
     private readonly api: ApiService,
     private readonly errToast: ErrorToastService,
-    private readonly destroy$: DestroyService,
+    private readonly patch: PatchDbService,
-    private readonly patchDb: PatchDbService,
+  ) { }
-  ) {}
 
   get name(): string {
-    return this.patchDb.getData().ui?.dev?.[this.projectId]?.name || ''
+    return this.patch.getData().ui?.dev?.[this.projectId]?.name || ''
   }
 
-  ngOnInit() {
+  async openBasicInfoModal(data: DevProjectData) {
-    this.patchDb
-      .watch$('ui', 'dev', this.projectId)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(pd => {
-        this.projectData = pd
-      })
-  }
-
-  async openBasicInfoModal() {
     const modal = await this.modalCtrl.create({
       component: GenericFormPage,
       componentProps: {
         title: 'Basic Info',
-        spec: getBasicInfoSpec(this.projectData),
+        spec: getBasicInfoSpec(data),
         buttons: [
           {
             text: 'Save',

frontend/projects/ui/src/app/pages/developer-routes/developer-menu/form-info.ts

@@ -44,7 +44,7 @@ export function getBasicInfoSpec(devData: DevProjectData): ConfigSpec {
     },
     'service-version-number': {
       type: 'string',
-      name: 'Service Version Number',
+      name: 'Service Version',
       description:
         'Service version - accepts up to four digits, where the last confirms to revisions necessary for EmbassyOS - see documentation: https://github.com/Start9Labs/emver-rs. This value will change with each release of the service',
       placeholder: 'e.g. 0.1.2.3',

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -327,8 +327,8 @@ export class ServerShowPage {
         disabled: of(false),
       },
       {
-        title: 'Manually Install A Service',
+        title: 'Sideload Service',
-        description: `Install a service by drag and drop`,
+        description: `Manually install any service package`,
         icon: 'push-outline',
         action: () =>
           this.navCtrl.navigateForward(['sideload'], {

frontend/projects/ui/src/app/pages/server-routes/sideload/sideload.page.html

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="embassy"></ion-back-button>
     </ion-buttons>
-    <ion-title>Manually Install A Service</ion-title>
+    <ion-title>Sideload Service</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -21,7 +21,7 @@
       color="dark"
       style="font-size: 42px"
     ></ion-icon>
-    <h4>To install a service manually, upload the s9pk here</h4>
+    <h4>Manually upload a service package</h4>
     <p *ngIf="onTor">
       <ion-text color="success"
         >Tip: switch to LAN for faster uploads.</ion-text

frontend/projects/ui/src/app/services/marketplace.service.ts

@@ -187,11 +187,12 @@ export class MarketplaceService extends AbstractMarketplaceService {
     url: string,
     eosVersionCompat: string,
   ): Promise<RR.GetMarketplacePackagesRes> {
+    let clonedParams = { ...params }
     if (params.query) delete params.category
-    if (params.ids) params.ids = JSON.stringify(params.ids)
+    if (clonedParams.ids) clonedParams.ids = JSON.stringify(clonedParams.ids)
 
     const qp: RR.GetMarketplacePackagesReq = {
-      ...params,
+      ...clonedParams,
       'eos-version-compat': eosVersionCompat,
     }
 

frontend/projects/ui/src/app/services/pkg-status-rendering.service.ts

@@ -144,7 +144,7 @@ export const PrimaryRendering: Record<string, StatusRendering> = {
   },
   [PrimaryStatus.Restarting]: {
     display: 'Restarting',
-    color: 'warning',
+    color: 'tertiary',
     showDots: true,
   },
   [PrimaryStatus.Stopped]: {