fix[frontend](federation_service): added remove modal on instance remove

Author: AlexSanchez-bit

frontend/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {UserRouteAccessService} from './core/auth/user-route-access-service';
+import {WelcomeComponent as FederationWelcomeComponent} from './federation/pages/welcome/welcome.component';
 import {ConfirmIdentityComponent} from './shared/components/auth/confirm-identity/confirm-identity.component';
 import {LoginComponent} from './shared/components/auth/login/login.component';
 import {
@@ -152,6 +153,16 @@ const routes: Routes = [
     canActivate: [UserRouteAccessService],
     data: {authorities: [ADMIN_ROLE, USER_ROLE]}
   },
+  {
+    path: 'federation',
+    canActivate: [UserRouteAccessService],
+    data: {authorities: [ADMIN_ROLE, USER_ROLE]},
+    children: [
+      {path: '', redirectTo: 'welcome', pathMatch: 'full'},
+      {path: 'welcome', component: FederationWelcomeComponent},
+      {path: 'instances', component: FederationWelcomeComponent}
+    ]
+  },
   {path: '', component: LoginComponent},
   {path: 'totp', component: TotpComponent},
   {path: 'enroll-tfa', component: TfaSetupComponent},

frontend/src/app/federation/components/instance-switcher/instance-switcher.component.ts

@@ -2,6 +2,9 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
+import {
+  ModalConfirmationComponent
+} from '../../../shared/components/utm/util/modal-confirmation/modal-confirmation.component';
 import {FederationInstance} from '../../domain/federation-instance.model';
 import {FederationInstanceStateService} from '../../services/federation-instance-state.service';
 import {FederationInstancesService} from '../../services/federation-instances.service';
@@ -81,10 +84,19 @@ export class InstanceSwitcherComponent implements OnInit, OnDestroy {
     if (this.pendingDeleteId !== null) {
       return;
     }
-    const confirmed = window.confirm(`Remove instance "${instance.name}"?`);
-    if (!confirmed) {
-      return;
-    }
+    const modalRef = this.modalService.open(ModalConfirmationComponent, {backdrop: 'static', centered: true});
+    modalRef.componentInstance.header = 'Remove federation instance';
+    modalRef.componentInstance.message = `Are you sure that you want to remove the instance: \n${instance.name}?`;
+    modalRef.componentInstance.confirmBtnText = 'Remove';
+    modalRef.componentInstance.confirmBtnIcon = 'icon-cancel-circle2';
+    modalRef.componentInstance.confirmBtnType = 'delete';
+    modalRef.componentInstance.textDisplay = 'Requests routed to this instance will stop working' +
+      ' and its locally stored selection will be cleared.';
+    modalRef.componentInstance.textType = 'warning';
+    modalRef.result.then(() => this.confirmRemove(instance), () => undefined);
+  }
+
+  private confirmRemove(instance: FederationInstance): void {
     this.pendingDeleteId = instance.id;
     this.errorMessage = null;
     this.instancesService.delete(instance.id).subscribe({

frontend/src/app/federation/federation-routing.module.ts

@@ -5,16 +5,14 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {InlineSVGModule} from 'ng-inline-svg';
 import {InstanceFormModalComponent} from './components/instance-form-modal/instance-form-modal.component';
 import {InstanceSwitcherComponent} from './components/instance-switcher/instance-switcher.component';
-import {FederationRoutingModule} from './federation-routing.module';
 import {WelcomeComponent} from './pages/welcome/welcome.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     NgbModule,
-    InlineSVGModule,
-    FederationRoutingModule
+    InlineSVGModule
   ],
   declarations: [
     InstanceSwitcherComponent,