Plugins can add custom instance infobox

2 files changed, 20 insertions, 4 deletions

diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index e91e44656..73e511d1c 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -49,5 +49,11 @@
         <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
       </ng-template>
     </ngb-panel>
+
+    <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id" [title]="pluginPanel.title">
+      <ng-template ngbPanelContent>
+        <div class="block" [innerHTML]="pluginPanel.html"></div>
+      </ng-template>
+    </ngb-panel>
   </ng-container>
 </ngb-accordion>
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index 1eb7b49b6..b9f57e2a4 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -1,8 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { HooksService, Notifier } from '@app/core'
 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
-import { InstanceService } from './instance.service'
-import { Notifier } from '@app/core'
+import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins'
 import { About } from '@shared/models/server'
+import { InstanceService } from './instance.service'
 
 @Component({
   selector: 'my-instance-about-accordion',
@@ -11,8 +12,12 @@ import { About } from '@shared/models/server'
 })
 export class InstanceAboutAccordionComponent implements OnInit {
   @ViewChild('accordion', { static: true }) accordion: NgbAccordion
+
   @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
 
+  @Input() pluginScope: PluginClientScope
+  @Input() pluginHook: ClientFilterHookName
+
   @Input() panels = {
     features: true,
     administrators: true,
@@ -29,12 +34,15 @@ export class InstanceAboutAccordionComponent implements OnInit {
     administrator: ''
   }
 
+  pluginPanels: { id: string, title: string, html: string }[] = []
+
   constructor (
     private instanceService: InstanceService,
-    private notifier: Notifier
+    private notifier: Notifier,
+    private hookService: HooksService
   ) { }
 
-  ngOnInit (): void {
+  async ngOnInit () {
     this.instanceService.getAbout()
       .subscribe({
         next: async about => {
@@ -47,6 +55,8 @@ export class InstanceAboutAccordionComponent implements OnInit {
 
         error: err => this.notifier.error(err.message)
       })
+
+    this.pluginPanels = await this.hookService.wrapObject([], this.pluginScope, this.pluginHook)
   }
 
   getAdministratorsPanel () {