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)