Migrate deprecated accordion component

4 files changed, 122 insertions, 86 deletions

diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index 1e224db8c..a414a2121 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -7,7 +7,7 @@ import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/
 import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
-import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionDirective, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { getExternalAuthHref } from '@shared/core-utils'
 import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@shared/models'
 
@@ -23,7 +23,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
   @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
   @ViewChild('otpTokenInput') otpTokenInput: InputTextComponent
 
-  accordion: NgbAccordion
+  accordion: NgbAccordionDirective
   error: string = null
   forgotPasswordEmail = ''
 
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index 9259d902c..c17a3f380 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router'
 import { AuthService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
-import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap'
 import { UserRegister } from '@shared/models'
 import { ServerConfig } from '@shared/models/server'
 import { SignupService } from '../shared/signup.service'
@@ -18,7 +18,7 @@ import { SignupService } from '../shared/signup.service'
 export class RegisterComponent implements OnInit {
   @ViewChild('lastStep') lastStep: CdkStep
 
-  accordion: NgbAccordion
+  accordion: NgbAccordionDirective
 
   signupError: string
   signupSuccess = false
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 ac8c01856..5c679685b 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
@@ -2,91 +2,127 @@
 
 <div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
 
-<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
-  <ngb-panel *ngIf="panels.features" id="instance-features">
-    <ng-template ngbPanelTitle>
-      <my-global-icon iconName="playlists"></my-global-icon>
+<div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true">
+  <div ngbAccordionItem *ngIf="panels.features" id="instance-features">
+    <div ngbAccordionHeader>
+      <button ngbAccordionButton>
+        <my-global-icon iconName="playlists"></my-global-icon>
 
-      <ng-container i18n>Features found on this instance</ng-container>
-    </ng-template>
+        <ng-container i18n>Features found on this instance</ng-container>
+      </button>
+    </div>
 
-    <ng-template ngbPanelContent>
-      <my-instance-features-table></my-instance-features-table>
-    </ng-template>
-  </ngb-panel>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>
+          <my-instance-features-table></my-instance-features-table>
+        </ng-template>
+      </div>
+    </div>
+  </div>
 
   <ng-container *ngIf="about">
-    <ngb-panel *ngIf="getAdministratorsPanel()" >
-      <ng-template ngbPanelTitle>
-        <my-global-icon iconName="playlists"></my-global-icon>
-
-        <ng-container i18n>Administrators & Sustainability</ng-container>
-      </ng-template>
-
-      <ng-template ngbPanelContent>
-        <div class="block">
-          <strong i18n>Who are we?</strong>
-          <div [innerHTML]="aboutHtml.administrator"></div>
+    <div ngbAccordionItem *ngIf="getAdministratorsPanel()" >
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>Administrators & Sustainability</ng-container>
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block">
+              <strong i18n>Who are we?</strong>
+              <div [innerHTML]="aboutHtml.administrator"></div>
+            </div>
+
+            <div class="block">
+              <strong i18n>How long do we plan to maintain this instance?</strong>
+              <div [innerHTML]="about.instance.maintenanceLifetime"></div>
+            </div>
+
+            <div class="block">
+              <strong i18n>How will we finance this instance?</strong>
+              <div [innerHTML]="about.instance.businessModel"></div>
+            </div>
+          </ng-template>
         </div>
-
-        <div class="block">
-          <strong i18n>How long do we plan to maintain this instance?</strong>
-          <div [innerHTML]="about.instance.maintenanceLifetime"></div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem *ngIf="termsPanel" id="terms">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          {{ getTermsTitle() }}
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="aboutHtml.terms"></div>
+          </ng-template>
         </div>
-
-        <div class="block">
-          <strong i18n>How will we finance this instance?</strong>
-          <div [innerHTML]="about.instance.businessModel"></div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem *ngIf="moderationPanel" id="moderation-information">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>Moderation information</ng-container>
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
+          </ng-template>
         </div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngIf="termsPanel" id="terms">
-      <ng-template ngbPanelTitle>
-        <my-global-icon iconName="playlists"></my-global-icon>
-
-        {{ getTermsTitle() }}
-      </ng-template>
-
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="aboutHtml.terms"></div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngIf="moderationPanel" id="moderation-information">
-      <ng-template ngbPanelTitle>
-        <my-global-icon iconName="playlists"></my-global-icon>
-
-        <ng-container i18n>Moderation information</ng-container>
-      </ng-template>
-
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct">
-      <ng-template ngbPanelTitle>
-        <my-global-icon iconName="playlists"></my-global-icon>
-
-        <ng-container i18n>Code of conduct</ng-container>
-      </ng-template>
-
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
-      <ng-template ngbPanelTitle>
-        <my-global-icon iconName="playlists"></my-global-icon>
-
-        <ng-container i18n>{{ pluginPanel.title }}</ng-container>
-      </ng-template>
-
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="pluginPanel.html"></div>
-      </ng-template>
-    </ngb-panel>
+      </div>
+    </div>
+
+    <div ngbAccordionItem *ngIf="codeOfConductPanel" id="code-of-conduct">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>Code of conduct</ng-container>
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>{{ pluginPanel.title }}</ng-container>
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="pluginPanel.html"></div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
   </ng-container>
-</ngb-accordion>
+</div>
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 e13703c03..e299a64a3 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,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { HooksService, Notifier } from '@app/core'
-import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap'
 import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins'
 import { About } from '@shared/models/server'
 import { InstanceService } from './instance.service'
@@ -11,7 +11,7 @@ import { InstanceService } from './instance.service'
   styleUrls: [ './instance-about-accordion.component.scss' ]
 })
 export class InstanceAboutAccordionComponent implements OnInit {
-  @ViewChild('accordion', { static: true }) accordion: NgbAccordion
+  @ViewChild('accordion', { static: true }) accordion: NgbAccordionDirective
 
   @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()