From c33db1769ad320b4f0990511d9f065e95869c197 Mon Sep 17 00:00:00 2001
From: Adrien Crivelli <adrien.crivelli@gmail.com>
Date: Sat, 28 Sep 2024 14:07:49 +0200
Subject: [PATCH] Don't fetch permissions unless actually used #10746

To minimize the risk of future API breaking change that may happen in
the permissions query and would prevent opening the door without reason
---
 .../admin/events/events/events.component.html |  2 +-
 .../facilitator-documents.component.html      |  2 +-
 .../facilitator-documents.component.ts        |  2 +
 .../admin/newses/newses/newses.component.html |  2 +-
 .../products/products/products.component.html |  2 +-
 .../sessions/sessions/sessions.component.html |  2 +-
 .../admin/users/import/import.component.html  |  2 +-
 .../admin/users/import/import.component.ts    |  2 +
 .../admin/users/users/users.component.html    |  2 +-
 .../comment-list/comment-list.component.html  |  2 +-
 .../home-block/home-block.component.html      |  2 +-
 .../home-block/home-block.component.ts        |  4 +-
 .../homepage/homepage.component.html          |  4 +-
 .../components/homepage/homepage.component.ts |  2 +-
 .../shared/services/permissions.service.ts    | 68 ++++++++-----------
 15 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/client/app/admin/events/events/events.component.html b/client/app/admin/events/events/events.component.html
index 38a4955a..7b54951b 100644
--- a/client/app/admin/events/events/events.component.html
+++ b/client/app/admin/events/events/events.component.html
@@ -76,6 +76,6 @@
     </div>
 }
 
-@if (permissionsService.crud?.event.create) {
+@if ((permissionsService.crud | async)?.event.create) {
     <natural-fixed-button icon="add" [routerLink]="['/admin/event/new']" />
 }
diff --git a/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.html b/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.html
index c72f4592..385ca440 100644
--- a/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.html
+++ b/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.html
@@ -73,6 +73,6 @@
     </div>
 }
 
-@if (permissionsService.crud?.facilitatorDocument.create) {
+@if ((permissionsService.crud | async)?.facilitatorDocument.create) {
     <natural-fixed-button icon="add" [routerLink]="['/admin/facilitator-document/new']" />
 }
diff --git a/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.ts b/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.ts
index d6a9e4a8..d7cc9a17 100644
--- a/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.ts
+++ b/client/app/admin/facilitator-documents/facilitator-documents/facilitator-documents.component.ts
@@ -16,6 +16,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatSortModule} from '@angular/material/sort';
 import {MatTableModule} from '@angular/material/table';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
     selector: 'app-facilitator-documents',
@@ -34,6 +35,7 @@ import {MatTableModule} from '@angular/material/table';
         MatPaginatorModule,
         NaturalFixedButtonComponent,
         RouterLink,
+        AsyncPipe,
     ],
 })
 export class FacilitatorDocumentsComponent extends NaturalAbstractList<FacilitatorDocumentsService> implements OnInit {
diff --git a/client/app/admin/newses/newses/newses.component.html b/client/app/admin/newses/newses/newses.component.html
index cd46cad4..e24bd940 100644
--- a/client/app/admin/newses/newses/newses.component.html
+++ b/client/app/admin/newses/newses/newses.component.html
@@ -77,6 +77,6 @@
     </div>
 }
 
-@if (permissionsService.crud?.news.create) {
+@if ((permissionsService.crud | async)?.news.create) {
     <natural-fixed-button icon="add" [routerLink]="['/admin/news/new']" />
 }
diff --git a/client/app/admin/products/products/products.component.html b/client/app/admin/products/products/products.component.html
index 317a7900..9723f153 100644
--- a/client/app/admin/products/products/products.component.html
+++ b/client/app/admin/products/products/products.component.html
@@ -113,6 +113,6 @@
     </div>
 }
 
-@if (permissionsService.crud?.product.create) {
+@if ((permissionsService.crud | async)?.product.create) {
     <natural-fixed-button icon="add" [routerLink]="['/admin/product/new']" />
 }
diff --git a/client/app/admin/sessions/sessions/sessions.component.html b/client/app/admin/sessions/sessions/sessions.component.html
index e0919a37..23e1747e 100644
--- a/client/app/admin/sessions/sessions/sessions.component.html
+++ b/client/app/admin/sessions/sessions/sessions.component.html
@@ -96,6 +96,6 @@
     </div>
 }
 
-@if (permissionsService.crud?.session.create) {
+@if ((permissionsService.crud | async)?.session.create) {
     <natural-fixed-button icon="add" [routerLink]="['/admin/session/new']" />
 }
diff --git a/client/app/admin/users/import/import.component.html b/client/app/admin/users/import/import.component.html
index 7e7fecc3..314319e8 100644
--- a/client/app/admin/users/import/import.component.html
+++ b/client/app/admin/users/import/import.component.html
@@ -9,7 +9,7 @@ <h1 class="mat-headline-5">{{ routeData.seo.title }}</h1>
                     naturalFileDrop
                     accept=".csv"
                     [selectable]="true"
-                    [disabled]="!permissionsService.crud?.organization.create || importing"
+                    [disabled]="!(permissionsService.crud | async)?.organization.create || importing"
                     (filesChange)="uploadFile($event)"
                 >
                     <mat-icon naturalIcon="file_upload" />
diff --git a/client/app/admin/users/import/import.component.ts b/client/app/admin/users/import/import.component.ts
index b9626c58..a6e161a8 100644
--- a/client/app/admin/users/import/import.component.ts
+++ b/client/app/admin/users/import/import.component.ts
@@ -16,6 +16,7 @@ import {UserService} from '../services/user.service';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
     selector: 'app-import',
@@ -28,6 +29,7 @@ import {MatButtonModule} from '@angular/material/button';
         NaturalIconDirective,
         MatProgressSpinnerModule,
         RouterLink,
+        AsyncPipe,
     ],
 })
 export class ImportComponent implements OnInit {
diff --git a/client/app/admin/users/users/users.component.html b/client/app/admin/users/users/users.component.html
index c33983fd..21547619 100644
--- a/client/app/admin/users/users/users.component.html
+++ b/client/app/admin/users/users/users.component.html
@@ -104,6 +104,6 @@
     </div>
 }
 
-@if (routeData?.isAdmin && permissionsService.crud?.user.create) {
+@if (routeData?.isAdmin && (permissionsService.crud | async)?.user.create) {
     <natural-fixed-button icon="add" [routerLink]="['/admin/user/new']" />
 }
diff --git a/client/app/front-office/components/comment-list/comment-list.component.html b/client/app/front-office/components/comment-list/comment-list.component.html
index b405375e..fed508cf 100644
--- a/client/app/front-office/components/comment-list/comment-list.component.html
+++ b/client/app/front-office/components/comment-list/comment-list.component.html
@@ -1,5 +1,5 @@
 <div class="nat-vertical nat-gap-30">
-    @if (permissionsService.crud?.comment?.create) {
+    @if ((permissionsService.crud | async)?.comment?.create) {
         <div class="nat-vertical nat-left">
             <mat-form-field [style.width]="'100%'">
                 <mat-label>Rédiger un commentaire</mat-label>
diff --git a/client/app/front-office/components/home-block/home-block.component.html b/client/app/front-office/components/home-block/home-block.component.html
index 568bced1..3fd10d86 100644
--- a/client/app/front-office/components/home-block/home-block.component.html
+++ b/client/app/front-office/components/home-block/home-block.component.html
@@ -5,7 +5,7 @@
         <a mat-flat-button [routerLink]="form.get('buttonLink')?.value">
             {{ form.get('buttonLabel')?.value }}
         </a>
-        @if (permissionService.crud?.configuration.create) {
+        @if ((permissionsService.crud | async)?.configuration.create) {
             <button
                 class="edit-button"
                 color="none"
diff --git a/client/app/front-office/components/home-block/home-block.component.ts b/client/app/front-office/components/home-block/home-block.component.ts
index 23ee76ea..cc2ef52b 100644
--- a/client/app/front-office/components/home-block/home-block.component.ts
+++ b/client/app/front-office/components/home-block/home-block.component.ts
@@ -11,6 +11,7 @@ import {NaturalIconDirective} from '@ecodev/natural';
 import {MatIconModule} from '@angular/material/icon';
 import {RouterLink} from '@angular/router';
 import {MatButtonModule} from '@angular/material/button';
+import {AsyncPipe} from '@angular/common';
 
 type Block = {
     title: string;
@@ -35,6 +36,7 @@ type Block = {
         MatFormFieldModule,
         MatInputModule,
         TextFieldModule,
+        AsyncPipe,
     ],
 })
 export class HomeBlockComponent implements OnInit {
@@ -48,7 +50,7 @@ export class HomeBlockComponent implements OnInit {
 
     public constructor(
         private readonly configService: ConfigurationService,
-        public readonly permissionService: PermissionsService,
+        public readonly permissionsService: PermissionsService,
     ) {}
 
     public ngOnInit(): void {
diff --git a/client/app/front-office/components/homepage/homepage.component.html b/client/app/front-office/components/homepage/homepage.component.html
index 6861fe82..92207364 100644
--- a/client/app/front-office/components/homepage/homepage.component.html
+++ b/client/app/front-office/components/homepage/homepage.component.html
@@ -21,7 +21,7 @@
             <div class="mat-headline-4 section-title nat-gap-30 nat-horizontal">
                 <div class="nat-expand">ACTUALITÉS</div>
                 <div class="relative">
-                    @if (permissionService.crud?.news.create) {
+                    @if ((permissionsService.crud | async)?.news.create) {
                         <button
                             class="absolute"
                             color="none"
@@ -57,7 +57,7 @@
             <div class="mat-headline-4 section-title nat-gap-30 nat-horizontal">
                 <div class="nat-expand">AGENDA</div>
                 <div class="relative">
-                    @if (permissionService.crud?.event.create) {
+                    @if ((permissionsService.crud | async)?.event.create) {
                         <button
                             class="absolute"
                             color="none"
diff --git a/client/app/front-office/components/homepage/homepage.component.ts b/client/app/front-office/components/homepage/homepage.component.ts
index 76044521..ff3234a8 100644
--- a/client/app/front-office/components/homepage/homepage.component.ts
+++ b/client/app/front-office/components/homepage/homepage.component.ts
@@ -80,7 +80,7 @@ export class HomepageComponent implements OnInit {
         private readonly newsService: NewsService,
         private readonly eventService: EventService,
         private readonly productService: ProductService,
-        public readonly permissionService: PermissionsService,
+        public readonly permissionsService: PermissionsService,
     ) {}
 
     public ngOnInit(): void {
diff --git a/client/app/shared/services/permissions.service.ts b/client/app/shared/services/permissions.service.ts
index 8230b54a..9ce86ec9 100644
--- a/client/app/shared/services/permissions.service.ts
+++ b/client/app/shared/services/permissions.service.ts
@@ -1,10 +1,10 @@
 import {Apollo} from 'apollo-angular';
 import {Injectable} from '@angular/core';
 import {Literal} from '@ecodev/natural';
-import {isEqual} from 'lodash-es';
-import {BehaviorSubject, Observable, of, ReplaySubject} from 'rxjs';
-import {debounceTime, distinctUntilChanged, filter, skip, take} from 'rxjs/operators';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {concatMap, debounceTime, distinctUntilChanged, filter, map, shareReplay} from 'rxjs/operators';
 import {Permissions} from '../generated-types';
+import {isEqual} from 'lodash-es';
 import {permissionsQuery} from './permissions.queries';
 
 type Contexts = {
@@ -13,66 +13,52 @@ type Contexts = {
 
 /**
  * A service to fetch permissions and use them in templates.
- *
- * Current site and state will be automatically taken into account when they change.
- * The other contexts must be set manually, when available, to get correct permissions.
  */
 @Injectable({
     providedIn: 'root',
 })
 export class PermissionsService {
     /**
-     * CRUD permissions, usually for object creations
+     * Observable of CRUD permissions, usually for object creations
      */
-    public crud: Permissions['permissions']['crud'] | null = null;
+    public readonly crud: Observable<Permissions['permissions']['crud']>;
 
     /**
-     * Observable of changed permissions. Here we use a ReplaySubject so that new subscriber will get
-     * the most recent available permissions (useful in route guard)
+     * Observable of changed permissions
      */
-    public changes = new ReplaySubject<Permissions['permissions']>(1);
+    public readonly changes: Observable<Permissions['permissions']>;
 
     private readonly currentContexts = new BehaviorSubject<Contexts>({
         user: null,
     });
 
     public constructor(apollo: Apollo) {
-        // Query the API when our variables changed
-        this.currentContexts.pipe(distinctUntilChanged(isEqual), debounceTime(5)).subscribe(() => {
-            // Fetch global permissions
-            apollo
-                .query<Permissions>({
-                    query: permissionsQuery,
-                })
-                .pipe(filter(result => !result.loading))
-                .subscribe(result => {
-                    this.crud = result.data.permissions.crud;
-                    this.changes.next(result.data.permissions);
-                });
-        });
-    }
-
-    public setUser(user: Literal | null): Observable<Permissions['permissions']> {
-        const newContexts = {
-            user: user ? user.id : null,
-        };
+        // Query the API whenever our variables change
+        const fetch = this.currentContexts.pipe(
+            distinctUntilChanged(isEqual),
+            debounceTime(5),
+            concatMap(() =>
+                apollo.query<Permissions>({query: permissionsQuery}).pipe(filter(result => !result.loading)),
+            ),
+            shareReplay(), // new subscriber will get the most recent available permissions
+        );
 
-        return this.setNewContexts(newContexts);
+        this.crud = fetch.pipe(map(result => result.data.permissions.crud));
+        this.changes = fetch.pipe(map(result => result.data.permissions));
     }
 
     /**
      * Return an observable that will complete as soon as the next permissions are available
      */
-    private setNewContexts(newContexts: Contexts): Observable<Permissions['permissions']> {
-        if (isEqual(this.currentContexts.value, newContexts) && this.crud) {
-            return of({
-                __typename: 'AllPermissions',
-                crud: this.crud,
-            });
-        } else {
-            this.currentContexts.next(newContexts);
+    private setNewContexts(newContexts: Contexts): void {
+        this.currentContexts.next(newContexts);
+    }
+
+    public setUser(user: Literal | null): void {
+        const newContexts = {
+            user: user ? user.id : null,
+        };
 
-            return this.changes.pipe(skip(1), take(1));
-        }
+        this.setNewContexts(newContexts);
     }
 }