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>
2026-03-26 02:11:53 +00:00 · 2022-06-22 18:26:10 -06:00
parent 53ca9b0420
commit d431fac7de
19 changed files with 128 additions and 80 deletions
--- a/frontend/projects/marketplace/src/pipes/filter-packages.pipe.ts
+++ b/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,
      )
    }

--- a/frontend/projects/shared/src/pipes/emver/emver.pipe.ts
+++ b/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({
--- a/frontend/projects/ui/src/app/components/form-object/form-error.component.html
+++ b/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>

--- a/frontend/projects/ui/src/app/components/form-object/form-label.component.html
+++ b/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>
--- a/frontend/projects/ui/src/app/components/form-object/form-object.component.html
+++ b/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,
-                      invalid: abstractControl.invalid
+                      edited: abstractControl.dirty
                    }"
                  ></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>
--- a/frontend/projects/ui/src/app/components/form-object/form-object.component.scss
+++ b/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);
  }
--- a/frontend/projects/ui/src/app/components/form-object/form-object.component.ts
+++ b/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({
--- a/frontend/projects/ui/src/app/components/logs/logs.page.html
+++ b/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-content loadingSpinner="lines"></ion-infinite-scroll-content>
+  <ion-infinite-scroll
+    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',
-      'right': isOnBottom ? '-52px' : '30px',
+      'bottom': '36px',
+      '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>
--- a/frontend/projects/ui/src/app/modals/app-config/app-config.page.ts
+++ b/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
    }

--- a/frontend/projects/ui/src/app/modals/generic-form/generic-form.page.ts
+++ b/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
    }

--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/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,
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.html
+++ b/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>
--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.html
+++ b/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>
--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
+++ b/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 patchDb: PatchDbService,
-  ) {}
+    private readonly patch: PatchDbService,
+  ) { }

  get name(): string {
-    return this.patchDb.getData().ui?.dev?.[this.projectId]?.name || ''
+    return this.patch.getData().ui?.dev?.[this.projectId]?.name || ''
  }

-  ngOnInit() {
-    this.patchDb
-      .watch$('ui', 'dev', this.projectId)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(pd => {
-        this.projectData = pd
-      })
-  }
-
-  async openBasicInfoModal() {
+  async openBasicInfoModal(data: DevProjectData) {
    const modal = await this.modalCtrl.create({
      component: GenericFormPage,
      componentProps: {
        title: 'Basic Info',
-        spec: getBasicInfoSpec(this.projectData),
+        spec: getBasicInfoSpec(data),
        buttons: [
          {
            text: 'Save',
--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/form-info.ts
+++ b/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',
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/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',
-        description: `Install a service by drag and drop`,
+        title: 'Sideload Service',
+        description: `Manually install any service package`,
        icon: 'push-outline',
        action: () =>
          this.navCtrl.navigateForward(['sideload'], {
--- a/frontend/projects/ui/src/app/pages/server-routes/sideload/sideload.page.html
+++ b/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
--- a/frontend/projects/ui/src/app/services/marketplace.service.ts
+++ b/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,
    }

--- a/frontend/projects/ui/src/app/services/pkg-status-rendering.service.ts
+++ b/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]: {