diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
index 8a93d69a0..cc899d7d9 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -158,6 +158,10 @@ export class AppActionsPage {
try {
await this.embassyApi.uninstallPackage({ id: this.pkgId })
+ this.embassyApi.setDbValue({
+ pointer: `/ack-instructions/${this.pkgId}`,
+ value: false,
+ })
this.navCtrl.navigateRoot('/services')
} catch (e: any) {
this.errToast.present(e)
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
index 75c88504e..79d2d537c 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { Observable } from 'rxjs'
-import { filter, map, switchMapTo, take, takeUntil, tap } from 'rxjs/operators'
+import { filter, map, switchMap, take, takeUntil, tap } from 'rxjs/operators'
import { isEmptyObject, exists, DestroyService } from '@start9labs/shared'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { parseDataModel, RecoveredInfo } from 'src/app/util/parse-data-model'
@@ -16,7 +16,6 @@ import { parseDataModel, RecoveredInfo } from 'src/app/util/parse-data-model'
export class AppListPage {
pkgs: readonly PackageDataEntry[] = []
recoveredPkgs: readonly RecoveredInfo[] = []
- order: readonly string[] = []
reordering = false
readonly connected$ = this.patch.connected$
@@ -38,17 +37,11 @@ export class AppListPage {
filter(data => exists(data) && !isEmptyObject(data)),
take(1),
map(parseDataModel),
- tap(({ order, pkgs, recoveredPkgs }) => {
+ tap(({ pkgs, recoveredPkgs }) => {
this.pkgs = pkgs
this.recoveredPkgs = recoveredPkgs
- this.order = order
-
- // set order in UI DB if there were unknown packages
- if (order.length < pkgs.length) {
- this.setOrder()
- }
}),
- switchMapTo(this.watchNewlyRecovered()),
+ switchMap(() => this.watchNewlyRecovered()),
takeUntil(this.destroy$),
)
.subscribe()
@@ -88,7 +81,7 @@ export class AppListPage {
}
private setOrder(): void {
- this.order = this.pkgs.map(pkg => pkg.manifest.id)
- this.api.setDbValue({ pointer: '/pkg-order', value: this.order })
+ const order = this.pkgs.map(pkg => pkg.manifest.id)
+ this.api.setDbValue({ pointer: '/pkg-order', value: order })
}
}
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html
index 0be9b2258..d872fdd52 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.html
@@ -5,6 +5,7 @@
detail
(click)="button.action()"
[disabled]="button.disabled"
+ [ngClass]="{ highlighted: button.highlighted$ | async }"
>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss
new file mode 100644
index 000000000..f31b84ed5
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.scss
@@ -0,0 +1,6 @@
+.highlighted {
+ * {
+ color: var(--ion-color-dark);
+ font-weight: bold;
+ }
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts
index 39d16b236..866d3e01f 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts
@@ -4,6 +4,7 @@ import { Button } from '../../pipes/to-buttons.pipe'
@Component({
selector: 'app-show-menu',
templateUrl: './app-show-menu.component.html',
+ styleUrls: ['./app-show-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppShowMenuComponent {
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
index 007a99c19..cd7d7296e 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
@@ -13,14 +13,16 @@ import {
} from 'src/app/services/patch-db/data-model'
import { ModalService } from 'src/app/services/modal.service'
import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { from } from 'rxjs'
+import { from, map, Observable } from 'rxjs'
import { Marketplace } from '@start9labs/marketplace'
import { ActionMarketplaceComponent } from 'src/app/modals/action-marketplace/action-marketplace.component'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
export interface Button {
title: string
description: string
icon: string
action: Function
+ highlighted$?: Observable
disabled?: boolean
}
@@ -36,6 +38,7 @@ export class ToButtonsPipe implements PipeTransform {
private readonly modalCtrl: ModalController,
private readonly modalService: ModalService,
private readonly apiService: ApiService,
+ private readonly patch: PatchDbService,
) {}
transform(
@@ -52,6 +55,9 @@ export class ToButtonsPipe implements PipeTransform {
title: 'Instructions',
description: `Understand how to use ${pkgTitle}`,
icon: 'list-outline',
+ highlighted$: this.patch
+ .watch$('ui', 'ack-instructions', pkg.manifest.id)
+ .pipe(map(seen => !seen)),
},
// config
{
@@ -111,6 +117,11 @@ export class ToButtonsPipe implements PipeTransform {
}
private async presentModalInstructions(pkg: PackageDataEntry) {
+ this.apiService.setDbValue({
+ pointer: `/ack-instructions/${pkg.manifest.id}`,
+ value: true,
+ })
+
const modal = await this.modalCtrl.create({
componentProps: {
title: 'Instructions',
diff --git a/frontend/projects/ui/src/app/services/api/mock-patch.ts b/frontend/projects/ui/src/app/services/api/mock-patch.ts
index 91adda519..d97e9d591 100644
--- a/frontend/projects/ui/src/app/services/api/mock-patch.ts
+++ b/frontend/projects/ui/src/app/services/api/mock-patch.ts
@@ -23,6 +23,7 @@ export const mockPatchData: DataModel = {
},
},
},
+ 'ack-instructions': {},
},
'server-info': {
id: 'abcdefgh',
diff --git a/frontend/projects/ui/src/app/services/patch-db/data-model.ts b/frontend/projects/ui/src/app/services/patch-db/data-model.ts
index c289736d0..9c728a65f 100644
--- a/frontend/projects/ui/src/app/services/patch-db/data-model.ts
+++ b/frontend/projects/ui/src/app/services/patch-db/data-model.ts
@@ -22,6 +22,7 @@ export interface UIData {
'high-score': number
}
}
+ 'ack-instructions': Record
}
export interface UIMarketplaceData {
diff --git a/frontend/projects/ui/src/app/util/get-server-info.ts b/frontend/projects/ui/src/app/util/get-server-info.ts
index 4d14f1613..c0cb6f7e9 100644
--- a/frontend/projects/ui/src/app/util/get-server-info.ts
+++ b/frontend/projects/ui/src/app/util/get-server-info.ts
@@ -1,4 +1,3 @@
-import { first } from 'rxjs/operators'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { ServerInfo } from 'src/app/services/patch-db/data-model'
import { firstValueFrom } from 'rxjs'
diff --git a/frontend/projects/ui/src/app/util/parse-data-model.ts b/frontend/projects/ui/src/app/util/parse-data-model.ts
index 21fdc91ba..d24fd9803 100644
--- a/frontend/projects/ui/src/app/util/parse-data-model.ts
+++ b/frontend/projects/ui/src/app/util/parse-data-model.ts
@@ -9,8 +9,7 @@ export function parseDataModel(data: DataModel): ParsedData {
JSON.stringify(data['package-data']),
)
- const order = [...(data.ui['pkg-order'] || [])]
- const pkgs: PackageDataEntry[] = []
+ // recovered packages (0.2.x)
const recoveredPkgs = Object.entries(data['recovered-packages'])
.filter(([id, _]) => !all[id])
.map(([id, val]) => ({
@@ -18,6 +17,9 @@ export function parseDataModel(data: DataModel): ParsedData {
id,
}))
+ // installed packages
+ const order = [...(data.ui['pkg-order'] || [])]
+ const pkgs: PackageDataEntry[] = []
// add known packages in preferential order
order.forEach(id => {
if (all[id]) {
@@ -33,7 +35,6 @@ export function parseDataModel(data: DataModel): ParsedData {
})
return {
- order,
pkgs,
recoveredPkgs,
}
@@ -44,7 +45,6 @@ export interface RecoveredInfo extends RecoveredPackageDataEntry {
}
interface ParsedData {
- order: string[]
pkgs: PackageDataEntry[]
recoveredPkgs: RecoveredInfo[]
}