diff --git a/ui/src/app/modals/app-config/app-config.page.html b/ui/src/app/modals/app-config/app-config.page.html index 2bfba9a4b..cd8969ddc 100644 --- a/ui/src/app/modals/app-config/app-config.page.html +++ b/ui/src/app/modals/app-config/app-config.page.html @@ -47,10 +47,11 @@

- {{ pkg.manifest.title }} has been modified to satisfy {{ dependentInfo.title }}. -
-
- To accept the modifications, click "Save". + The following modifications have been made to {{ pkg.manifest.title }} to satisfy {{ dependentInfo.title }}: +

+ To accept these modifications, click "Save".

diff --git a/ui/src/app/modals/app-config/app-config.page.ts b/ui/src/app/modals/app-config/app-config.page.ts index 20f8b1e62..9fd2c2acd 100644 --- a/ui/src/app/modals/app-config/app-config.page.ts +++ b/ui/src/app/modals/app-config/app-config.page.ts @@ -1,7 +1,7 @@ import { Component, Input, ViewChild } from '@angular/core' import { AlertController, ModalController, IonContent, LoadingController, IonicSafeString } from '@ionic/angular' import { ApiService } from 'src/app/services/api/embassy-api.service' -import { DependentInfo, isEmptyObject } from 'src/app/util/misc.util' +import { DependentInfo, isEmptyObject, isObject } from 'src/app/util/misc.util' import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component' import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards' import { ConfigSpec } from 'src/app/pkg-config/config-types' @@ -10,7 +10,7 @@ import { PatchDbService } from 'src/app/services/patch-db/patch-db.service' import { ErrorToastService, getErrorMessage } from 'src/app/services/error-toast.service' import { FormGroup } from '@angular/forms' import { convertValuesRecursive, FormService } from 'src/app/services/form.service' -import { compare, Operation } from 'fast-json-patch' +import { compare, Operation, getValueByPointer } from 'fast-json-patch' @Component({ selector: 'app-config', @@ -21,6 +21,7 @@ export class AppConfigPage { @ViewChild(IonContent) content: IonContent @Input() pkgId: string @Input() dependentInfo?: DependentInfo + diff: string[] // only if dependent info pkg: PackageDataEntry loadingText: string | undefined configSpec: ConfigSpec @@ -72,6 +73,7 @@ export class AppConfigPage { this.configForm.markAllAsTouched() if (patch) { + this.diff = this.getDiff(patch) this.markDirty(patch) } } catch (e) { @@ -148,6 +150,63 @@ export class AppConfigPage { } } + private getDiff (patch: Operation[]): string[] { + return patch.map(op => { + let message: string + switch (op.op) { + case 'add': + message = `Added ${this.getNewValue(op.value)}` + break + case 'remove': + message = `Removed ${this.getOldValue(op.path)}` + break + case 'replace': + message = `Changed from ${this.getOldValue(op.path)} to ${this.getNewValue(op.value)}` + break + default: + message = `Unknown operation` + } + + let displayPath: string + + const arrPath = op.path.substring(1) + .split('/') + .map(node => { + const num = Number(node) + return isNaN(num) ? node : num + }) + + if (typeof arrPath[arrPath.length - 1] === 'number') { + arrPath.pop() + } + + displayPath = arrPath.join(' → ') + + return `${displayPath}: ${message}` + }) + } + + private getOldValue (path: any): string { + const val = getValueByPointer(this.original, path) + if (['string', 'number', 'boolean'].includes(typeof val)) { + return val + } else if (isObject(val)) { + return 'entry' + } else { + return 'list' + } + } + + private getNewValue (val: any): string { + if (['string', 'number', 'boolean'].includes(typeof val)) { + return val + } else if (isObject(val)) { + return 'new entry' + } else { + return 'new list' + } + } + private markDirty (patch: Operation[]) { patch.forEach(op => { const arrPath = op.path.substring(1) diff --git a/ui/src/app/pages/marketplace-routes/marketplace.service.ts b/ui/src/app/pages/marketplace-routes/marketplace.service.ts index 933efede7..32db93cb8 100644 --- a/ui/src/app/pages/marketplace-routes/marketplace.service.ts +++ b/ui/src/app/pages/marketplace-routes/marketplace.service.ts @@ -50,9 +50,9 @@ export class MarketplaceService { }) } - async getPkg (id: string, version?: string): Promise { + async getPkg (id: string, version = '*'): Promise { const pkgs = await this.api.getMarketplacePkgs({ - ids: [{ id, version: version || '*' }], + ids: [{ id, version }], 'eos-version-compat': this.patch.getData()['server-info']['eos-version-compat'], }) const pkg = pkgs.find(pkg => pkg.manifest.id == id)