Action Request updates + misc fixes (#2818)

* fix web manifest format error * fix setting optional dependencies * rework dependency actions to be nested * fix styling * fix styles * combine action requests into same component * only display actions header if they exist * fix storing polyfill dependencies * fix styling and button propagation * fixes for setting polyfill dependencies * revert to test * revert required deps setting logic * add logs and adjust logic * test * fix deps logic when changing config * remove logs; deps working as expected
2026-03-26 10:21:52 +00:00 · 2025-02-08 20:11:26 -05:00
parent 4e22f13007
commit 3047dae703
14 changed files with 326 additions and 137 deletions
--- a/container-runtime/package-lock.json
+++ b/container-runtime/package-lock.json
@@ -64,7 +64,7 @@
    },
    "../sdk/dist": {
      "name": "@start9labs/start-sdk",
-      "version": "0.3.6-alpha8",
+      "version": "0.3.6-beta.4",
      "license": "MIT",
      "dependencies": {
        "@iarna/toml": "^2.2.5",
@@ -72,8 +72,8 @@
        "@noble/hashes": "^1.4.0",
        "isomorphic-fetch": "^3.0.0",
        "lodash.merge": "^4.6.2",
-        "mime": "^4.0.3",
-        "ts-matches": "^5.5.1",
+        "mime-types": "^2.1.35",
+        "ts-matches": "^6.2.1",
        "yaml": "^2.2.2"
      },
      "devDependencies": {
@@ -6799,11 +6799,11 @@
        "isomorphic-fetch": "^3.0.0",
        "jest": "^29.4.3",
        "lodash.merge": "^4.6.2",
-        "mime": "^4.0.3",
+        "mime-types": "^2.1.35",
        "peggy": "^3.0.2",
        "prettier": "^3.2.5",
        "ts-jest": "^29.0.5",
-        "ts-matches": "^5.5.1",
+        "ts-matches": "^6.2.1",
        "ts-node": "^10.9.1",
        "ts-pegjs": "^4.2.1",
        "tsx": "^4.7.1",
--- a/container-runtime/src/Adapters/Systems/SystemForEmbassy/index.ts
+++ b/container-runtime/src/Adapters/Systems/SystemForEmbassy/index.ts
@@ -51,6 +51,7 @@ function todo(): never {
 const MANIFEST_LOCATION = "/usr/lib/startos/package/embassyManifest.json"
 export const EMBASSY_JS_LOCATION = "/usr/lib/startos/package/embassy.js"
 const EMBASSY_POINTER_PATH_PREFIX = "/embassyConfig" as utils.StorePath
+const EMBASSY_DEPENDS_ON_PATH_PREFIX = "/embassyDependsOn" as utils.StorePath

 const matchResult = object({
  result: any,
@@ -314,7 +315,7 @@ export class SystemForEmbassy implements System {
        )
        .catch(() => []),
    )
-    await this.setDependencies(effects, oldDeps)
+    await this.setDependencies(effects, oldDeps, false)
  }

  async exit(): Promise<void> {
@@ -664,7 +665,7 @@ export class SystemForEmbassy implements System {
        ),
      )
      const dependsOn = answer["depends-on"] ?? answer.dependsOn ?? {}
-      await this.setDependencies(effects, dependsOn)
+      await this.setDependencies(effects, dependsOn, true)
      return
    } else if (setConfigValue.type === "script") {
      const moduleCode = await this.moduleCode
@@ -687,48 +688,47 @@ export class SystemForEmbassy implements System {
        }),
      )
      const dependsOn = answer["depends-on"] ?? answer.dependsOn ?? {}
-      await this.setDependencies(effects, dependsOn)
+      await this.setDependencies(effects, dependsOn, true)
      return
    }
  }
  private async setDependencies(
    effects: Effects,
    rawDepends: { [x: string]: readonly string[] },
+    configuring: boolean,
  ) {
-    const dependsOn: Record<string, readonly string[] | null> = {
+    const storedDependsOn = (await effects.store.get({
+      packageId: this.manifest.id,
+      path: EMBASSY_DEPENDS_ON_PATH_PREFIX,
+    })) as Record<string, readonly string[]>
+
+    const requiredDeps = {
      ...Object.fromEntries(
-        Object.entries(this.manifest.dependencies || {})?.map((x) => [
-          x[0],
-          null,
-        ]) || [],
+        Object.entries(this.manifest.dependencies || {})
+          ?.filter((x) => x[1].requirement.type === "required")
+          .map((x) => [x[0], []]) || [],
      ),
-      ...rawDepends,
    }
+
+    const dependsOn: Record<string, readonly string[]> = configuring
+      ? {
+          ...requiredDeps,
+          ...rawDepends,
+        }
+      : storedDependsOn
+        ? storedDependsOn
+        : requiredDeps
+
+    await effects.store.set({
+      path: EMBASSY_DEPENDS_ON_PATH_PREFIX,
+      value: dependsOn,
+    })
+
    await effects.setDependencies({
      dependencies: Object.entries(dependsOn).flatMap(
        ([key, value]): T.Dependencies => {
          const dependency = this.manifest.dependencies?.[key]
          if (!dependency) return []
-          if (value == null) {
-            const versionRange = dependency.version
-            if (dependency.requirement.type === "required") {
-              return [
-                {
-                  id: key,
-                  versionRange,
-                  kind: "running",
-                  healthChecks: [],
-                },
-              ]
-            }
-            return [
-              {
-                kind: "exists",
-                id: key,
-                versionRange,
-              },
-            ]
-          }
          const versionRange = dependency.version
          const kind = "running"
          return [
--- a/container-runtime/src/index.ts
+++ b/container-runtime/src/index.ts
@@ -11,7 +11,7 @@ new RpcListener(getDependencies)

 /**

-So, this is going to be sent into a running comtainer along with any of the other node modules that are going to be needed and used.
+So, this is going to be sent into a running container along with any of the other node modules that are going to be needed and used.

 Once the container is started, we will go into a loading/ await state.
 This is the init system, and it will always be running, and it will be waiting for a command to be sent to it.
@@ -38,5 +38,5 @@ There are

 /**
 TODO:
-Should I seperate those adapter in/out?
+Should I separate those adapter in/out?
 */
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -35,6 +35,9 @@
          <app-show-dependencies
            *ngIf="pkgPlus.dependencies.length"
            [dependencies]="pkgPlus.dependencies"
+            [allPkgs]="pkgPlus.allPkgs"
+            [pkg]="pkg"
+            [manifest]="pkgPlus.manifest"
          ></app-show-dependencies>
          <!-- ** menu ** -->
          <app-show-menu [buttons]="pkg | toButtons"></app-show-menu>
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -143,7 +143,7 @@ export class AppShowPage {
        fixText = 'Update'
        fixAction = () => this.installDep(pkg, manifest, depId)
      } else if (depError.type === 'actionRequired') {
-        errorText = 'Action Required (see above)'
+        errorText = 'Action Required (see below)'
      } else if (depError.type === 'notRunning') {
        errorText = 'Not running'
        fixText = 'Start'
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-action-requests/app-show-action-requests.component.html
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-action-requests/app-show-action-requests.component.html
@@ -1,45 +1,42 @@
-<ng-container *ngIf="actionRequests.critical.length">
-  <ion-item-divider>Required Actions</ion-item-divider>
-  <ion-item
-    *ngFor="let request of actionRequests.critical"
-    button
-    (click)="handleAction(request)"
+<ng-container *ngIf="actionRequests[pkgId]?.length">
+  <ion-item-divider
+    *ngIf="!dep"
+    style="--background: unset; z-index: 11; position: relative"
  >
-    <ion-icon slot="start" name="warning-outline" color="warning"></ion-icon>
-    <ion-label>
-      <h2 class="highlighted">{{ request.actionName }}</h2>
-      <p *ngIf="request.dependency" class="dependency">
-        <span class="light">Service:</span>
-        <img [src]="request.dependency.icon" alt="" />
-        {{ request.dependency.title }}
-      </p>
-      <p>
-        <span class="light">Reason:</span>
-        {{ request.reason || 'no reason provided' }}
-      </p>
-    </ion-label>
-  </ion-item>
-</ng-container>
-
-<ng-container *ngIf="actionRequests.important.length">
-  <ion-item-divider>Requested Actions</ion-item-divider>
-  <ion-item
-    *ngFor="let request of actionRequests.important"
-    button
-    (click)="handleAction(request)"
-  >
-    <ion-icon slot="start" name="play-outline" color="warning"></ion-icon>
-    <ion-label>
-      <h2 class="highlighted">{{ request.actionName }}</h2>
-      <p *ngIf="request.dependency" class="dependency">
-        <span class="light">Service:</span>
-        <img [src]="request.dependency.icon" alt="" />
-        {{ request.dependency.title }}
-      </p>
-      <p>
-        <span class="light">Reason:</span>
-        {{ request.reason || 'no reason provided' }}
-      </p>
-    </ion-label>
-  </ion-item>
+    Action Requests
+  </ion-item-divider>
+  <div class="indent">
+    <ion-item
+      class="line"
+      lines="none"
+      *ngFor="let request of actionRequests[pkgId]"
+      button
+      (click)="handleAction(request, $event)"
+    >
+      <ion-icon
+        slot="start"
+        [name]="
+          request.severity === 'critical' ? 'warning-outline' : 'play-outline'
+        "
+        [color]="request.severity === 'critical' ? 'warning' : 'dark'"
+      ></ion-icon>
+      <ion-label>
+        <h2 class="highlighted">{{ request.actionName }}</h2>
+        <p>
+          {{ request.reason || 'no reason provided' }} |
+          <span
+            class="severity"
+            [ngStyle]="{
+              color:
+                request.severity === 'critical'
+                  ? 'var(--ion-color-warning)'
+                  : 'var(--ion-color-dark)'
+            }"
+          >
+            {{ request.severity === 'critical' ? 'Required' : 'Requested' }}
+          </span>
+        </p>
+      </ion-label>
+    </ion-item>
+  </div>
 </ng-container>
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-action-requests/app-show-action-requests.component.scss
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-action-requests/app-show-action-requests.component.scss
@@ -1,5 +1,5 @@
-.light {
-  color: var(--ion-color-dark);
+ion-icon {
+  margin-right: 32px;
 }

 .highlighted {
@@ -7,10 +7,33 @@
  font-weight: bold;
 }

-.dependency {
-  display: inline-flex;
-  img {
-    max-width: 16px;
-    margin: 0 2px 0 5px;
+.severity {
+  font-variant-caps: all-small-caps;
+  font-weight: bold;
+  letter-spacing: 0.2px;
+  font-size: 16px;
+}
+
+.line {
+
+  &:after {
+    content: '';
+    display: block;
+    border-left: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    height: 100%;
+    width: 24px;
+    position: absolute;
+    left: -20px;
+    top: -33px;
  }
+}
+
+.indent { 
+  margin-left: 41px
+}
+
+:host ::ng-deep ion-item {
+  display: table-row;
+  width: fit-content;
 }
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-action-requests/app-show-action-requests.component.ts
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-action-requests/app-show-action-requests.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { T } from '@start9labs/start-sdk'
 import { ActionService } from 'src/app/services/action.service'
+import { DependencyInfo } from 'src/app/pages/apps-routes/app-show/app-show.page'
 import { getDepDetails } from 'src/app/util/dep-info'

@Component({
@@ -19,22 +20,21 @@ export class AppShowActionRequestsComponent {
  @Input()
  manifest!: T.Manifest

-  get actionRequests() {
-    const critical: (T.ActionRequest & {
-      actionName: string
-      dependency: {
-        title: string
-        icon: string
-      } | null
-    })[] = []
-    const important: (T.ActionRequest & {
-      actionName: string
-      dependency: {
-        title: string
-        icon: string
-      } | null
-    })[] = []
+  @Input()
+  dep?: DependencyInfo

+  pkgId!: string
+
+  ngOnInit() {
+    this.pkgId = this.dep ? this.dep?.id : this.manifest.id
+  }
+
+  get actionRequests() {
+    const reqs: {
+      [key: string]: (T.ActionRequest & {
+        actionName: string
+      })[]
+    } = {}
    Object.values(this.pkg.requestedActions)
      .filter(r => r.active)
      .forEach(r => {
@@ -49,20 +49,17 @@ export class AppShowActionRequestsComponent {
            ? null
            : getDepDetails(this.pkg, this.allPkgs, r.request.packageId),
        }
-
-        if (r.request.severity === 'critical') {
-          critical.push(toReturn)
-        } else {
-          important.push(toReturn)
+        if (!reqs[r.request.packageId]) {
+          reqs[r.request.packageId] = []
        }
+        reqs[r.request.packageId].push(toReturn)
      })
-
-    return { critical, important }
+    return reqs
  }
-
  constructor(private readonly actionService: ActionService) {}

-  async handleAction(request: T.ActionRequest) {
+  async handleAction(request: T.ActionRequest, e: Event) {
+    e.stopPropagation()
    const self = request.packageId === this.manifest.id
    this.actionService.present({
      pkgInfo: {
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.html
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.html
@@ -5,27 +5,37 @@
  *ngFor="let dep of dependencies"
  (click)="dep.action()"
 >
-  <ion-thumbnail slot="start">
-    <img [src]="dep.icon" alt="" />
-  </ion-thumbnail>
-  <ion-label>
-    <h2 class="montserrat">
-      <ion-icon
-        *ngIf="!!dep.errorText"
-        class="icon"
-        slot="start"
-        name="warning-outline"
-        color="warning"
-      ></ion-icon>
-      {{ dep.title }}
-    </h2>
-    <p>{{ dep.version }}</p>
-    <p>
-      <ion-text [color]="dep.errorText ? 'warning' : 'success'">
-        {{ dep.errorText || 'satisfied' }}
-      </ion-text>
-    </p>
-  </ion-label>
+  <div class="container">
+    <div class="dep-details">
+      <ion-thumbnail slot="start">
+        <img [src]="dep.icon" alt="" />
+      </ion-thumbnail>
+      <ion-label>
+        <h2 class="montserrat">
+          <ion-icon
+            *ngIf="!!dep.errorText"
+            class="icon"
+            slot="start"
+            name="warning-outline"
+            color="warning"
+          ></ion-icon>
+          {{ dep.title }}
+        </h2>
+        <p>{{ dep.version }}</p>
+        <p>
+          <ion-text [color]="dep.errorText ? 'warning' : 'success'">
+            {{ dep.errorText || 'satisfied' }}
+          </ion-text>
+        </p>
+      </ion-label>
+    </div>
+    <app-show-action-requests
+      [allPkgs]="allPkgs"
+      [pkg]="pkg"
+      [dep]="dep"
+      [manifest]="manifest"
+    ></app-show-action-requests>
+  </div>
  <ion-button *ngIf="dep.actionText" slot="end" fill="clear">
    {{ dep.actionText }}
    <ion-icon slot="end" name="arrow-forward"></ion-icon>
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.scss
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.scss
@@ -1,3 +1,26 @@
 .icon {
  padding-right: 4px;
 }
+
+img {
+  position: relative;
+  z-index: 10;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: 8px;
+}
+
+.dep-details {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 1.2rem;
+}
+
+ion-label h2 {
+  display: flex;
+  align-items: center;
+}
--- a/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.ts
+++ b/web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.ts
@@ -1,5 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { DependencyInfo } from '../../app-show.page'
+import { T } from '@start9labs/start-sdk'
+import {
+  PackageDataEntry,
+  StateInfo,
+} from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'app-show-dependencies',
@@ -10,4 +15,15 @@ import { DependencyInfo } from '../../app-show.page'
 export class AppShowDependenciesComponent {
  @Input()
  dependencies: DependencyInfo[] = []
+
+  @Input()
+  allPkgs!: NonNullable<
+    T.AllPackageData & Record<string, PackageDataEntry<StateInfo>>
+  >
+
+  @Input()
+  pkg!: T.PackageDataEntry & { stateInfo: StateInfo }
+
+  @Input()
+  manifest!: T.Manifest
 }
--- a/web/projects/ui/src/app/services/api/api.fixures.ts
+++ b/web/projects/ui/src/app/services/api/api.fixures.ts
@@ -1739,6 +1739,15 @@ export module Mock {
        hasInput: true,
        group: null,
      },
+      rpc: {
+        name: 'Set RPC',
+        description: 'Create RPC Credentials',
+        warning: null,
+        visibility: 'enabled',
+        allowedStatuses: 'any',
+        hasInput: true,
+        group: null,
+      },
      properties: {
        name: 'View Properties',
        description: 'view important information about Bitcoin',
@@ -2037,7 +2046,26 @@ export module Mock {
    status: {
      main: 'stopped',
    },
-    actions: {},
+    actions: {
+      config: {
+        name: 'Config',
+        description: 'LND needs configuration before starting',
+        warning: null,
+        visibility: 'enabled',
+        allowedStatuses: 'any',
+        hasInput: true,
+        group: null,
+      },
+      connect: {
+        name: 'Connect',
+        description: 'View LND connection details',
+        warning: null,
+        visibility: 'enabled',
+        allowedStatuses: 'any',
+        hasInput: true,
+        group: null,
+      },
+    },
    serviceInterfaces: {
      grpc: {
        id: 'grpc',
@@ -2108,6 +2136,24 @@ export module Mock {
    registry: 'https://registry.start9.com/',
    developerKey: 'developer-key',
    requestedActions: {
+      config: {
+        active: true,
+        request: {
+          packageId: 'lnd',
+          actionId: 'config',
+          severity: 'critical',
+          reason: 'LND needs configuration before starting',
+        },
+      },
+      connect: {
+        active: true,
+        request: {
+          packageId: 'lnd',
+          actionId: 'connect',
+          severity: 'important',
+          reason: 'View LND connection details',
+        },
+      },
      'bitcoind/config': {
        active: true,
        request: {
@@ -2119,10 +2165,24 @@ export module Mock {
            kind: 'partial',
            value: {
              color: '#ffffff',
+              testnet: false,
+            },
+          },
+        },
+      },
+      'bitcoind/rpc': {
+        active: true,
+        request: {
+          packageId: 'bitcoind',
+          actionId: 'rpc',
+          severity: 'important',
+          reason: `LND want's its own RPC credentials`,
+          input: {
+            kind: 'partial',
+            value: {
              rpcsettings: {
                rpcuser: 'lnd',
              },
-              testnet: false,
            },
          },
        },
--- a/web/projects/ui/src/app/services/api/mock-patch.ts
+++ b/web/projects/ui/src/app/services/api/mock-patch.ts
@@ -232,6 +232,15 @@ export const mockPatchData: DataModel = {
          hasInput: true,
          group: null,
        },
+        rpc: {
+          name: 'Set RPC',
+          description: 'Create RPC Credentials',
+          warning: null,
+          visibility: 'enabled',
+          allowedStatuses: 'any',
+          hasInput: true,
+          group: null,
+        },
        properties: {
          name: 'View Properties',
          description: 'view important information about Bitcoin',
@@ -487,7 +496,26 @@ export const mockPatchData: DataModel = {
      status: {
        main: 'stopped',
      },
-      actions: {},
+      actions: {
+        config: {
+          name: 'Config',
+          description: 'LND needs configuration before starting',
+          warning: null,
+          visibility: 'enabled',
+          allowedStatuses: 'any',
+          hasInput: true,
+          group: null,
+        },
+        connect: {
+          name: 'Connect',
+          description: 'View LND connection details',
+          warning: null,
+          visibility: 'enabled',
+          allowedStatuses: 'any',
+          hasInput: true,
+          group: null,
+        },
+      },
      serviceInterfaces: {
        grpc: {
          id: 'grpc',
@@ -559,6 +587,24 @@ export const mockPatchData: DataModel = {
      registry: 'https://registry.start9.com/',
      developerKey: 'developer-key',
      requestedActions: {
+        config: {
+          active: true,
+          request: {
+            packageId: 'lnd',
+            actionId: 'config',
+            severity: 'critical',
+            reason: 'LND needs configuration before starting',
+          },
+        },
+        connect: {
+          active: true,
+          request: {
+            packageId: 'lnd',
+            actionId: 'connect',
+            severity: 'important',
+            reason: 'View LND connection details',
+          },
+        },
        'bitcoind/config': {
          active: true,
          request: {
@@ -570,10 +616,24 @@ export const mockPatchData: DataModel = {
              kind: 'partial',
              value: {
                color: '#ffffff',
+                testnet: false,
+              },
+            },
+          },
+        },
+        'bitcoind/rpc': {
+          active: true,
+          request: {
+            packageId: 'bitcoind',
+            actionId: 'rpc',
+            severity: 'important',
+            reason: `LND want's its own RPC credentials`,
+            input: {
+              kind: 'partial',
+              value: {
                rpcsettings: {
                  rpcuser: 'lnd',
                },
-                testnet: false,
              },
            },
          },
--- a/web/projects/ui/src/manifest.webmanifest
+++ b/web/projects/ui/src/manifest.webmanifest
@@ -20,5 +20,5 @@
      "type": "image/png",
      "purpose": "any"
    }
-  ],
+  ]
 }