Merge pull request #137 in TEA/mina-sidor-fa-web from bugfix/TV-695-felmeddelande-roller to next

Squashed commit of the following:

commit 0a77df6c5cfaff5c2615bd1525485f1f7270a565
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Sep 27 15:05:29 2021 +0200

    Updated changelog

commit a8c356c2fb8079ce0cf3aae07008285aced778d0
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Sep 27 15:02:42 2021 +0200

    Removed unused variable

commit daf114fedb3a7a43c2d3e4f6ca588ddf145ef6c3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Sep 27 14:59:05 2021 +0200

    Added unauthorized-alert component and implemented unauthorized warning inside deltagare

commit c781f485e12e6db61f470ec13c96d40cce3113fe
Merge: 86e224b 62e538e
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Sep 27 14:15:41 2021 +0200

    Merge branch 'next' into bugfix/TV-695-felmeddelande-roller

commit 86e224b06199210662d890179aa50e87793b126a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Sep 27 12:08:51 2021 +0200

    show role errors

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Bug Fixes
 
 - **deltagare:** Now fetching data using "genomforandeReferens" instead of "sokandeId" to avoid wrong data. [TV-692](https://jira.arbetsformedlingen.se/browse/TV-692)
+- **authorization:** Whenever the API throws a "403 Forbidden" error we now show an unauthorized message. [TV-695](https://jira.arbetsformedlingen.se/browse/TV-695)
 
 ## [2.0.0](https://bitbucket.arbetsformedlingen.se/projects/tea/repos/mina-sidor-fa-web/compare/diff?targetBranch=refs%2Ftags%2Fv1.5.0&sourceBranch=refs%2Ftags%2Fv2.0.0) (2021-09-24)
 

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html

@@ -1,12 +1,14 @@
 <msfa-layout>
-  <section class="avrop" *ngIf="currentStep$ | async as currentStep">
   <digi-typography>
+    <ng-container *ngIf="(showUnauthorizedError$ | async) === false; else roleError">
+      <ng-container *ngIf="avropData$ | async as avropData; else skeletonRef">
+        <section class="avrop" *ngIf="currentStep$ | async as currentStep">
           <header class="avrop__header">
             <h1>Nya deltagare</h1>
             <p>
               Här ser du alla nya deltagare. Deltagarna ska tilldelas en handledare innan tjänstens start. Kryssa för de
-          deltagare du vill tilldela en handledare. Du kan välja en, eller flera personer samtidigt, genom att kryssa i
+              deltagare du vill tilldela en handledare. Du kan välja en, eller flera personer samtidigt, genom att
-          boxarna nedan.
+              kryssa i boxarna nedan.
             </p>
 
             <digi-notification-alert
@@ -37,7 +39,6 @@
                 ></digi-ng-progress-progressbar>
               </div>
             </div>
-        <ng-container *ngIf="avropData$ | async as avropData">
             <div class="avrop__content" *ngIf="avropData.data.length; else noAvrop">
               <div class="avrop__filter" *ngIf="currentStep === 1">
                 <h3>Filter</h3>
@@ -99,14 +100,14 @@
                 </ng-container>
                 <ng-container *ngSwitchCase="2">
                   <digi-button af-variation="secondary" af-size="m" (afOnClick)="unlockSelectedAvrop()"
-                  >Tillbaka</digi-button
+                    >Tillbaka
-                >
+                  </digi-button>
                   <digi-button af-size="m" (afOnClick)="confirmHandledare()">Tilldela</digi-button>
                 </ng-container>
                 <ng-container *ngSwitchCase="3">
                   <digi-button af-variation="secondary" af-size="m" (afOnClick)="unconfirmHandledare()"
-                  >Tillbaka</digi-button
+                    >Tillbaka
-                >
+                  </digi-button>
                   <digi-button af-size="m" (afOnClick)="save()">Bekräfta tilldelning</digi-button>
                 </ng-container>
                 <ng-container *ngSwitchCase="4">
@@ -114,18 +115,29 @@
                 </ng-container>
               </div>
             </div>
-        </ng-container>
           </main>
-    </digi-typography>
         </section>
-
+      </ng-container>
-  <ng-template #loadingRef>
+    </ng-container>
-    <msfa-loader></msfa-loader>
+  </digi-typography>
-  </ng-template>
-  <ng-template #noAvailabeHandledare>
-    <!-- lägg in lämpligt innehåll -->
-  </ng-template>
-  <ng-template #noAvrop>
-    <p>Det finns för tillfället inga nya deltagare att tilldela.</p>
-  </ng-template>
 </msfa-layout>
+
+<ng-template #loadingRef>
+  <msfa-loader></msfa-loader>
+</ng-template>
+
+<ng-template #skeletonRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar nya deltagare"></digi-ng-skeleton-base>
+</ng-template>
+
+<ng-template #noAvailabeHandledare>
+  <!-- lägg in lämpligt innehåll -->
+</ng-template>
+
+<ng-template #noAvrop>
+  <p>Det finns för tillfället inga nya deltagare att tilldela.</p>
+</ng-template>
+
+<ng-template #roleError>
+  <msfa-unauthorized-alert></msfa-unauthorized-alert>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts

@@ -13,7 +13,6 @@ import { Observable } from 'rxjs';
 export class AvropComponent {
   readonly totalAmountOfSteps = 3;
   currentStep$: Observable<number> = this.avropService.currentStep$;
-
   error$: Observable<string> = this.avropService.error$;
   avropData$: Observable<AvropCompactData> = this.avropService.avropData$;
   selectedAvrop$: Observable<AvropCompact[]> = this.avropService.selectedAvrop$;
@@ -23,6 +22,7 @@ export class AvropComponent {
   handledareConfirmed$: Observable<boolean> = this.avropService.handledareIsConfirmed$;
   avropIsSubmitted$: Observable<boolean> = this.avropService.avropIsSubmitted$;
   avropLoading$: Observable<boolean> = this.avropService.avropLoading$;
+  showUnauthorizedError$: Observable<boolean> = this.avropService.showUnauthorizedError$;
 
   constructor(private avropService: AvropService) {}
 

apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts

@@ -4,10 +4,11 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module';
 import { AvropComponent } from './avrop.component';
 import { AvropFiltersModule } from './components/avrop-filters/avrop-filters.module';
 import { AvropListModule } from './components/avrop-list/avrop-list.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -21,6 +22,7 @@ import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
     DigiNgProgressProgressbarModule,
     DigiNgSkeletonBaseModule,
     LoaderModule,
+    UnauthorizedAlertModule,
   ],
 })
 export class AvropModule {}

apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.html

@@ -1,11 +1,12 @@
 <msfa-layout>
   <digi-typography>
-    <section class="deltagare">
+    <ng-container *ngIf="(showUnauthorizedError$ | async) === false; else roleError">
+      <section class="deltagare" *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
         <header class="deltagare__header">
           <h1>Deltagarlista</h1>
           <p>
-          Här ser du en lista på de deltagare som tillhör din organisation. Klicka på deltagarens namn för att öppna och
+            Här ser du en lista på de deltagare som tillhör din organisation. Klicka på deltagarens namn för att öppna
-          se mer information om deltagarna.
+            och se mer information om deltagarna.
           </p>
         </header>
         <div class="deltagare__filter">
@@ -16,8 +17,7 @@
             (afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
           ></digi-form-checkbox>
         </div>
-
+        {{showUnauthorizedError$ | async}}
-      <ng-container *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef">
         <ng-container *ngIf="(deltagareLoading$ | async) === false; else loadingRef">
           <msfa-deltagare-list
             *ngIf="allDeltagareData.data.length; else noDeltagare"
@@ -28,18 +28,22 @@
             (paginated)="setNewPage($event)"
           ></msfa-deltagare-list>
         </ng-container>
-      </ng-container>
-
-      <ng-template #loadingRef>
-        <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
-      </ng-template>
       </section>
+    </ng-container>
   </digi-typography>
 </msfa-layout>
 
+<ng-template #loadingRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
+</ng-template>
+
 <ng-template #noDeltagare>
   <p>
     Inga deltagare hittades{{(onlyMyDeltagare$ | async) ? '. Bocka ur "Visa endast mina tilldelade deltagare" för att se
     deltagare som tillhör din organisation.' : ' som tillhör din organisation.' }}
   </p>
 </ng-template>
+
+<ng-template #roleError>
+  <msfa-unauthorized-alert></msfa-unauthorized-alert>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.component.ts

@@ -15,6 +15,7 @@ export class DeltagareComponent {
   sort$: Observable<Sort<keyof DeltagareCompact>> = this.deltagareService.sort$;
   onlyMyDeltagare$: Observable<boolean> = this.deltagareService.onlyMyDeltagare$;
   deltagareLoading$: Observable<boolean> = this.deltagareService.deltagareLoading$;
+  showUnauthorizedError$: Observable<boolean> = this.deltagareService.showUnauthorizedError$;
 
   constructor(private deltagareService: DeltagareService) {}
 

apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.module.ts

@@ -1,14 +1,22 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module';
 import { DeltagareListModule } from './components/deltagare-list/deltagare-list.module';
 import { DeltagareRoutingModule } from './deltagare-routing.module';
 import { DeltagareComponent } from './deltagare.component';
-import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DeltagareComponent],
-  imports: [CommonModule, DeltagareRoutingModule, LayoutModule, DeltagareListModule, DigiNgSkeletonBaseModule],
+  imports: [
+    CommonModule,
+    DeltagareRoutingModule,
+    LayoutModule,
+    DeltagareListModule,
+    UnauthorizedAlertModule,
+    DigiNgSkeletonBaseModule,
+  ],
 })
 export class DeltagareModule {}

apps/mina-sidor-fa/src/app/shared/components/unauthorized-alert/unauthorized-alert.component.html

@@ -0,0 +1,7 @@
+<digi-notification-alert af-heading="Personalkontot saknar behörigheter!" af-variation="danger">
+  <p>
+    Ditt personalkonto behöver tilldelas en tjänst och utförande verksamheter för att det ska fungera korrekt. Ändra
+    ditt personalkonto via personallistan eller kontakta din behörighetsadministratör om du inte kan ändra dina egna
+    behörigheter.
+  </p>
+</digi-notification-alert>

apps/mina-sidor-fa/src/app/shared/components/unauthorized-alert/unauthorized-alert.component.spec.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UnauthorizedAlertComponent } from './unauthorized-alert.component';
+
+describe('UnauthorizedAlertComponent', () => {
+  let component: UnauthorizedAlertComponent;
+  let fixture: ComponentFixture<UnauthorizedAlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UnauthorizedAlertComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnauthorizedAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/mina-sidor-fa/src/app/shared/components/unauthorized-alert/unauthorized-alert.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'msfa-unauthorized-alert',
+  templateUrl: './unauthorized-alert.component.html',
+  styleUrls: ['./unauthorized-alert.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UnauthorizedAlertComponent {}

apps/mina-sidor-fa/src/app/shared/components/unauthorized-alert/unauthorized-alert.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { UnauthorizedAlertComponent } from './unauthorized-alert.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [UnauthorizedAlertComponent],
+  imports: [CommonModule],
+  exports: [UnauthorizedAlertComponent],
+})
+export class UnauthorizedAlertModule {}

apps/mina-sidor-fa/src/app/shared/services/api/avrop-api.service.ts

@@ -7,9 +7,10 @@ import { HandledareResponse } from '@msfa-models/api/handledare.response.model';
 import { Params } from '@msfa-models/api/params.model';
 import { AvropFilter, mapResponseToAvropFilter } from '@msfa-models/avrop-filter.model';
 import { AvropCompact, AvropCompactData, mapAvropResponseToAvrop } from '@msfa-models/avrop.model';
+import { CustomError, errorToCustomError } from '@msfa-models/error/custom-error';
 import { Handledare, mapHandledareResponseToHandledare } from '@msfa-models/handledare.model';
 import { BehaviorSubject, Observable, of } from 'rxjs';
-import { filter, map, tap } from 'rxjs/operators';
+import { catchError, filter, map, tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -18,6 +19,8 @@ export class AvropApiService {
   private _apiBaseUrl = `${environment.api.url}/avrop`;
   private _lockedAvropSnapshot$ = new BehaviorSubject<AvropCompact[]>(null);
   private _availableHandledareSnapshot$ = new BehaviorSubject<Handledare[]>(null);
+  private _showUnauthorizedError$ = new BehaviorSubject<boolean>(false);
+  public showUnauthorizedError$: Observable<boolean> = this._showUnauthorizedError$.asObservable();
 
   constructor(private httpClient: HttpClient) {}
 
@@ -28,7 +31,19 @@ export class AvropApiService {
   fetchAvrop$(params: Params): Observable<AvropCompactData> {
     return this.httpClient
       .get<AvropApiResponse>(`${this._apiBaseUrl}`, { params })
-      .pipe(map(({ data, meta }) => ({ data: data.map(avrop => mapAvropResponseToAvrop(avrop)), meta })));
+      .pipe(
+        map(({ data, meta }) => ({ data: data.map(avrop => mapAvropResponseToAvrop(avrop)), meta })),
+        catchError((error: Error & { status: number }) => {
+          if (error.status === 403) {
+            this._showUnauthorizedError$.next(true);
+            return of(null);
+          } else {
+            throw new CustomError(
+              errorToCustomError({ ...error, message: `Kunde inte hämta deltagare.\n\n${error.message}` })
+            );
+          }
+        })
+      );
   }
 
   fetchAvailableHandledare$(avrop: AvropCompact[]): Observable<Handledare[]> {

apps/mina-sidor-fa/src/app/shared/services/api/deltagare.api.service.ts

@@ -34,6 +34,8 @@ export class DeltagareApiService {
   private _apiBaseUrl = `${environment.api.url}/deltagare`;
   private _deltagareLoading$ = new BehaviorSubject<boolean>(false);
   public deltagareLoading$: Observable<boolean> = this._deltagareLoading$.asObservable();
+  private _showUnauthorizedError$ = new BehaviorSubject<boolean>(false);
+  public showUnauthorizedError$: Observable<boolean> = this._showUnauthorizedError$.asObservable();
 
   constructor(private httpClient: HttpClient) {}
 
@@ -65,10 +67,15 @@ export class DeltagareApiService {
           this._deltagareLoading$.next(false);
           return { data: data.map(deltagare => mapResponseToDeltagareCompact(deltagare)), meta };
         }),
-        catchError((error: Error) => {
+        catchError((error: Error & { status: number }) => {
+          if (error.status === 403) {
+            this._showUnauthorizedError$.next(true);
+            return of(null);
+          } else {
             throw new CustomError(
               errorToCustomError({ ...error, message: `Kunde inte hämta deltagare.\n\n${error.message}` })
             );
+          }
         })
       );
   }

apps/mina-sidor-fa/src/app/shared/services/avrop.service.ts

@@ -45,7 +45,7 @@ export class AvropService {
   public handledareIsConfirmed$: Observable<boolean> = this._handledareIsConfirmed$.asObservable();
   public avropIsSubmitted$: Observable<boolean> = this._avropIsSubmitted$.asObservable();
   public error$: Observable<string> = this._error$.asObservable();
-
+  public showUnauthorizedError$: Observable<boolean> = this.avropApiService.showUnauthorizedError$;
   public avropData$: Observable<AvropCompactData> = combineLatest([
     this._filteredTjanster$,
     this._filteredUtforandeVerksamheter$,

apps/mina-sidor-fa/src/app/shared/services/deltagare.service.ts

@@ -16,6 +16,7 @@ export class DeltagareService {
   public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
   private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
   public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
+  public showUnauthorizedError$: Observable<boolean> = this.deltagareApiService.showUnauthorizedError$;
   public deltagareLoading$: Observable<boolean> = this.deltagareApiService.deltagareLoading$;
   public allDeltagareData$: Observable<DeltagareCompactData> = combineLatest([
     this._limit$,

apps/mina-sidor-fa/src/assets/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Bug Fixes
 
 - **deltagare:** Now fetching data using "genomforandeReferens" instead of "sokandeId" to avoid wrong data. [TV-692](https://jira.arbetsformedlingen.se/browse/TV-692)
+- **authorization:** Whenever the API throws a "403 Forbidden" error we now show an unauthorized message. [TV-695](https://jira.arbetsformedlingen.se/browse/TV-695)
 
 ## [2.0.0](https://bitbucket.arbetsformedlingen.se/projects/tea/repos/mina-sidor-fa-web/compare/diff?targetBranch=refs%2Ftags%2Fv1.5.0&sourceBranch=refs%2Ftags%2Fv2.0.0) (2021-09-24)