From 88e8aff5202d544f60ad485e1cd0b32a85bfa5c2 Mon Sep 17 00:00:00 2001
From: fcv-iteratorIt <123963294+fcv-iteratorIt@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:08:29 +0200
Subject: [PATCH 1/2] It is now possible to add permission to application on
 creation (#138)

---
 .../permission-edit.component.html            | 12 +++-
 src/app/applications/application.model.ts     |  2 +
 .../form-body-application.component.html      | 40 ++++++++---
 .../form-body-application.component.ts        | 72 ++++++++++++++++++-
 .../shared/components/forms/form.module.ts    | 10 +--
 src/assets/i18n/da.json                       |  4 +-
 6 files changed, 118 insertions(+), 22 deletions(-)

diff --git a/src/app/admin/permission/permission-edit/permission-edit.component.html b/src/app/admin/permission/permission-edit/permission-edit.component.html
index af8876ae4..7ab628f45 100644
--- a/src/app/admin/permission/permission-edit/permission-edit.component.html
+++ b/src/app/admin/permission/permission-edit/permission-edit.component.html
@@ -67,9 +67,15 @@
         <mat-form-field>
             <label class="form-label" for="name">{{'PERMISSION.EDIT.APPS' | translate}}</label>
             <div class="col-12">
-                <mat-select [formControl]="applicationMultiCtrl" [multiple]="true"
-                    panelClass="overflow-x-hidden" [(value)]="permission.applicationIds" id="applicationIds"
-                    name="applicationIds" #multiSelect [compareWith]="compare">
+                <mat-select
+                  id="applicationIds"
+                  [formControl]="applicationMultiCtrl"
+                  [multiple]="true"
+                  panelClass="overflow-x-hidden"
+                  [(value)]="permission.applicationIds"
+                  name="applicationIds"
+                  #multiSelect
+                  [compareWith]="compare">
                     <app-mat-select-search [formControl]="applicationMultiFilterCtrl"></app-mat-select-search>
                     <mat-option *ngFor="let app of filteredApplicationsMulti | async" [value]="app.id">
                         {{app.name}}
diff --git a/src/app/applications/application.model.ts b/src/app/applications/application.model.ts
index 5b796a68b..3282eb415 100644
--- a/src/app/applications/application.model.ts
+++ b/src/app/applications/application.model.ts
@@ -30,6 +30,7 @@ export class Application {
   public hardware?: string;
   public controlledProperties?: ControlledProperty[];
   public deviceTypes?: ApplicationDeviceType[];
+  public permissionIds: number[];
 }
 
 export class ApplicationRequest {
@@ -48,6 +49,7 @@ export class ApplicationRequest {
   public hardware?: string;
   public controlledProperties?: ControlledPropertyTypes[];
   public deviceTypes?: ApplicationDeviceTypeUnion[];
+  public permissionIds: number[];
 }
 
 export interface ApplicationData {
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.html b/src/app/shared/components/forms/form-body-application/form-body-application.component.html
index 344131afd..d5256f0bf 100644
--- a/src/app/shared/components/forms/form-body-application/form-body-application.component.html
+++ b/src/app/shared/components/forms/form-body-application/form-body-application.component.html
@@ -24,9 +24,27 @@
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('description'), 'is-valid' : formFailedSubmit && !errorFields.includes('description')}"></textarea>
     </div>
 
+    <div class="form-group mt-3 col-12">
+        <label class="form-label" for="userGroup">{{'QUESTION.APPLICATION.ADD-PERMISSION' | translate}}</label>
+          <mat-select
+            id="userGroup"
+            class="form-control"
+            [formControl]="permissionMultiCtrl"
+            [multiple]="true"
+            panelClass="overflow-x-hidden"
+            [(value)]="application.permissionIds"
+            [compareWith]="compare">
+            <app-mat-select-search [formControl]="permissionMultiFilterCtrl"></app-mat-select-search>
+            <mat-option *ngFor="let permission of filteredPermissionsMulti | async" [value]="permission.id">
+              {{permission.name}}
+            </mat-option>
+          </mat-select>
+          <mat-hint>{{'QUESTION.APPLICATION.PERMISSION-HINT' | translate}}</mat-hint>
+    </div>
+
     <div class="form-group mt-3">
-      <label class="form-label" for="application.status">{{'APPLICATION.METADATA-FIELD.STATUS' | translate}}</label>
-      <mat-select class="form-control" name="application.statusOptions" [(ngModel)]="application.status"
+      <label class="form-label" for="application.statusOptions">{{'APPLICATION.METADATA-FIELD.STATUS' | translate}}</label>
+      <mat-select class="form-control" id="application.statusOptions" name="application.statusOptions" [(ngModel)]="application.status"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.status'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.status')}">
         <mat-option *ngFor="let statusOption of statuses" [value]="statusOption.value">
           {{statusOption.label}}
@@ -37,7 +55,7 @@
     <div class="form-group mt-3">
       <label class="form-label" for="application.startDate">{{'APPLICATION.METADATA-FIELD.START-DATE' |
         translate}}</label>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="fill" id="application.startDate">
         <mat-label>{{'QUESTION.APPLICATION.START-DATE-PLACEHOLDER' | translate}}</mat-label>
         <input matInput [max]="serializedEndDate.value" [matDatepicker]="startDatePicker"
           [formControl]="serializedStartDate"
@@ -50,7 +68,7 @@
 
     <div class="form-group mt-3">
       <label class="form-label" for="application.endDate">{{'APPLICATION.METADATA-FIELD.END-DATE' | translate}}</label>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="fill" id="application.endDate">
         <mat-label>{{'QUESTION.APPLICATION.END-DATE-PLACEHOLDER' | translate}}</mat-label>
         <input matInput [min]="serializedStartDate.value" [matDatepicker]="endDatePicker"
           [formControl]="serializedEndDate"
@@ -62,7 +80,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.category">{{'APPLICATION.METADATA-FIELD.CATEGORY' | translate}}</label>
+      <label class="form-label" for="category">{{'APPLICATION.METADATA-FIELD.CATEGORY' | translate}}</label>
       <input type="text" class="form-control" id="category" name="category"
         [placeholder]="'QUESTION.APPLICATION.CATEGORY-PLACEHOLDER' | translate" maxlength="100"
         [(ngModel)]="application.category"
@@ -70,7 +88,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.owner">{{'APPLICATION.METADATA-FIELD.OWNER' | translate}}</label>
+      <label class="form-label" for="owner">{{'APPLICATION.METADATA-FIELD.OWNER' | translate}}</label>
       <input type="text" class="form-control" id="owner" name="owner"
         [placeholder]="'QUESTION.APPLICATION.OWNER-PLACEHOLDER' | translate" maxlength="100"
         [(ngModel)]="application.owner"
@@ -78,7 +96,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.contactPerson">{{'APPLICATION.METADATA-FIELD.CONTACT-PERSON' |
+      <label class="form-label" for="contactPerson">{{'APPLICATION.METADATA-FIELD.CONTACT-PERSON' |
         translate}}</label>
       <input type="text" class="form-control" id="contactPerson" name="contactPerson"
         [placeholder]="'QUESTION.APPLICATION.CONTACT-PERSON-PLACEHOLDER' | translate" maxlength="100"
@@ -87,7 +105,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.contactEmail">{{'APPLICATION.METADATA-FIELD.CONTACT-EMAIL' |
+      <label class="form-label" for="contactEmail">{{'APPLICATION.METADATA-FIELD.CONTACT-EMAIL' |
         translate}}</label>
       <input type="email" class="form-control" id="contactEmail" name="contactEmail"
         [placeholder]="'QUESTION.APPLICATION.CONTACT-EMAIL-PLACEHOLDER' | translate" maxlength="50" [email]="true"
@@ -96,7 +114,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.contactPhone">{{'APPLICATION.METADATA-FIELD.CONTACT-PHONE' |
+      <label class="form-label" for="contactPhone">{{'APPLICATION.METADATA-FIELD.CONTACT-PHONE' |
         translate}}</label>
       <input type="text" class="form-control" id="contactPhone" name="contactPhone" [formControl]="phoneCtrl"
         [placeholder]="'QUESTION.APPLICATION.CONTACT-PHONE-PLACEHOLDER' | translate" maxlength="12"
@@ -126,7 +144,7 @@
       <label class="form-label" for="application.controlledProperty">{{'APPLICATION.METADATA-FIELD.CONTROLLED-PROPERTY'
         |
         translate}}</label>
-      <mat-select class="form-control" name="application.controlledProperty" multiple="true"
+      <mat-select class="form-control" name="application.controlledProperty" id="application.controlledProperty" multiple="true"
         [(ngModel)]="application.controlledProperties"
         [placeholder]="'QUESTION.APPLICATION.CONTROLLED-PROPERTY-PLACEHOLDER' | translate"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.controlledProperty'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.controlledProperty')}">
@@ -139,7 +157,7 @@
     <div class="form-group mt-3">
       <label class="form-label" for="application.deviceType">{{'APPLICATION.METADATA-FIELD.DEVICE-TYPE' |
         translate}}</label>
-      <mat-select class="form-control" name="application.deviceType" multiple="true"
+      <mat-select class="form-control" name="application.deviceType" id="application.deviceType" multiple="true"
         [(ngModel)]="application.deviceTypes" [placeholder]="'QUESTION.APPLICATION.DEVICE-TYPE-PLACEHOLDER' | translate"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.deviceType'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.deviceType')}">
         <mat-option *ngFor="let deviceType of deviceTypes" [value]="deviceType.value">
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
index 2bea15778..4b772d65b 100644
--- a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
+++ b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { ReplaySubject, Subject, Subscription } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { RestService } from '@shared/services/rest.service';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -21,6 +21,10 @@ import {
   ApplicationDeviceTypeEntries,
 } from '@shared/enums/device-type';
 import { isPhoneNumberValid } from '@shared/validators/phone-number.validator';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
+import { takeUntil } from 'rxjs/operators';
+import { PermissionService } from '@app/admin/permission/permission.service';
+import { MeService } from '@shared/services/me.service';
 
 export class User {
   public name: string;
@@ -58,13 +62,25 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
   controlledProperties = Object.values(ControlledPropertyTypes);
   deviceTypes: DropdownOption[] = [];
 
+  permissionsSubscription: Subscription;
+  public permissions: PermissionResponse[];
+  public permissionMultiCtrl: UntypedFormControl = new UntypedFormControl();
+  public permissionMultiFilterCtrl: UntypedFormControl = new UntypedFormControl();
+  public filteredPermissionsMulti: ReplaySubject<
+    PermissionResponse[]
+  > = new ReplaySubject<PermissionResponse[]>(1);
+
+  private _onDestroy = new Subject<void>();
+
   constructor(
     private restService: RestService,
     private applicationService: ApplicationService,
     private route: ActivatedRoute,
     public translate: TranslateService,
     private router: Router,
-    private sharedVariableService: SharedVariableService
+    private permissionService: PermissionService,
+    private sharedVariableService: SharedVariableService,
+    private meService: MeService
   ) {
     this.fillDefaultMetadata();
     this.phoneCtrl = new UntypedFormControl(this.application.contactPhone, [
@@ -78,6 +94,7 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
     if (this.id) {
       this.getApplication(this.id);
     }
+    this.getPermissions(this.sharedVariableService.getUserInfo().user.id);
 
     const statusTranslationPrefix = 'APPLICATION.STATUS.';
     const statusTranslationKeys = ApplicationStatusEntries.map(
@@ -111,6 +128,28 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         }));
         this.deviceTypes.push(...deviceTypeOptions);
       });
+
+    this.permissionMultiFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterPermissionsMulti();
+      });
+  }
+
+  filterPermissionsMulti() {
+    if (!this.permissions) {
+      return;
+    }
+    let search = this.permissionMultiFilterCtrl.value;
+    if (!search) {
+      this.filteredPermissionsMulti.next(this.permissions.slice());
+      return;
+    }
+
+    search = search.toLowerCase();
+    this.filteredPermissionsMulti.next(
+      this.permissions.filter((p) => p.name.toLowerCase().indexOf(search) > -1)
+    );
   }
 
   fillDefaultMetadata() {
@@ -152,6 +191,8 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         this.application.deviceTypes = application.deviceTypes.map(
           (deviceType) => deviceType.type
         );
+        this.application.permissionIds = application.permissionIds;
+        this.permissionMultiCtrl.setValue(this.application.permissionIds);
 
         this.fillDefaultMetadata();
       });
@@ -256,10 +297,37 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
     this.router.navigateByUrl('/applications');
   }
 
+  public compare(o1: any, o2: any): boolean {
+    return o1 === o2;
+  }
+
+  getPermissions(userId: number) {
+    this.permissionsSubscription = this.permissionService
+      .getPermissions(
+        1000,
+        0,
+        undefined,
+        undefined,
+        this.meService.hasGlobalAdmin() ? undefined : userId
+      )
+      .subscribe((res) => {
+        this.permissions = res.data.sort((a, b) =>
+          a.name.localeCompare(b.name, 'da-DK', { numeric: true })
+        );
+        this.filteredPermissionsMulti.next(this.permissions.slice());
+        if (!this.id) {
+          this.application.permissionIds = [this.permissions[0].id];
+          this.permissionMultiCtrl.setValue(this.application.permissionIds);
+        }
+      });
+  }
+
   ngOnDestroy() {
     // prevent memory leak by unsubscribing
     if (this.applicationsSubscription) {
       this.applicationsSubscription.unsubscribe();
     }
+    this._onDestroy.next();
+    this._onDestroy.complete();
   }
 }
diff --git a/src/app/shared/components/forms/form.module.ts b/src/app/shared/components/forms/form.module.ts
index e6641f045..a3534f97b 100644
--- a/src/app/shared/components/forms/form.module.ts
+++ b/src/app/shared/components/forms/form.module.ts
@@ -9,7 +9,7 @@ import { FormBodyApplicationComponent } from './form-body-application/form-body-
 import { FormHeaderComponent } from './form-header/form-header.component';
 import { FormKeyValuePairComponent } from './form-key-value/form-key-value-pair/form-key-value-pair.component';
 import { FormKeyValueListComponent } from './form-key-value/form-key-value-list/form-key-value-list.component';
-
+import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
 
 @NgModule({
   declarations: [
@@ -25,7 +25,8 @@ import { FormKeyValueListComponent } from './form-key-value/form-key-value-list/
     FormsModule,
     ReactiveFormsModule,
     TranslateModule,
-    NGMaterialModule
+    NGMaterialModule,
+    MatSelectSearchModule,
   ],
   exports: [
     FormHeaderComponent,
@@ -33,7 +34,6 @@ import { FormKeyValueListComponent } from './form-key-value/form-key-value-list/
     FormKeyValuePairComponent,
     FormKeyValueListComponent,
   ],
-  providers: [
-  ]
+  providers: [],
 })
-export class FormModule { }
+export class FormModule {}
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
index 04c7c1f39..a03f0b451 100644
--- a/src/assets/i18n/da.json
+++ b/src/assets/i18n/da.json
@@ -742,7 +742,9 @@
       "PERSONAL-DATA-PLACEHOLDER": "Markér, hvis data i applikationen indeholder personoplysninger. Berører ikke funktionalitet i OS2iot",
       "HARDWARE-PLACEHOLDER": "Angiv hvad der bruges af sensorer/hardware, samt model",
       "CONTROLLED-PROPERTY-PLACEHOLDER": "Angiv hvilke datatyper der opsamles",
-      "DEVICE-TYPE-PLACEHOLDER": "Angiv hvilke forbindelsesteknologier, der benyttes"
+      "DEVICE-TYPE-PLACEHOLDER": "Angiv hvilke forbindelsesteknologier, der benyttes",
+      "PERMISSION-HINT": "Husk at alle med adgang til brugergruppen vil kunne se applikationen",
+      "ADD-PERMISSION": "Tilføj til brugergruppe"
     },
     "MQTT": {
       "TITLE": "MQTT specifik opsætning",

From 52685426c7cc0ef7cb4976ed26253086c2fb2f23 Mon Sep 17 00:00:00 2001
From: fcv-iteratorIt <123963294+fcv-iteratorIt@users.noreply.github.com>
Date: Wed, 5 Jul 2023 10:38:49 +0200
Subject: [PATCH 2/2] Added organization filter to permissions (#139)

* Added organization filter to permissions

* Added permissions to application details + fixed permission query
---
 .../admin/permission/permission.service.ts    | 150 +++++++++---------
 .../application-detail.component.html         |  32 ++--
 src/app/applications/application.model.ts     |   2 +
 .../form-body-application.component.ts        |   3 +-
 .../metadata-details.component.html           |   4 +
 .../metadata-details.component.ts             |   2 +
 src/assets/i18n/da.json                       |   1 +
 7 files changed, 104 insertions(+), 90 deletions(-)

diff --git a/src/app/admin/permission/permission.service.ts b/src/app/admin/permission/permission.service.ts
index 2e0e51620..d2ce1d8b1 100644
--- a/src/app/admin/permission/permission.service.ts
+++ b/src/app/admin/permission/permission.service.ts
@@ -2,94 +2,94 @@ import { Injectable } from '@angular/core';
 import { RestService } from '../../shared/services/rest.service';
 import { Observable } from 'rxjs';
 import {
-    PermissionGetManyResponse,
-    PermissionResponse,
-    PermissionRequest,
-    PermissionRequestAcceptUser,
+  PermissionGetManyResponse,
+  PermissionResponse,
+  PermissionRequest,
+  PermissionRequestAcceptUser,
 } from './permission.model';
 import { map } from 'rxjs/operators';
 import { UserMinimalService } from '../users/user-minimal.service';
 
 @Injectable({
-    providedIn: 'root',
+  providedIn: 'root',
 })
 export class PermissionService {
-    endpoint = 'permission';
-    constructor(
-        private restService: RestService,
-        private userMinimalService: UserMinimalService
-    ) {}
+  endpoint = 'permission';
+  constructor(
+    private restService: RestService,
+    private userMinimalService: UserMinimalService
+  ) {}
 
-    createPermission(body: PermissionRequest): Observable<PermissionResponse> {
-        return this.restService.post(this.endpoint, body, {
-            observe: 'response',
-        });
-    }
+  createPermission(body: PermissionRequest): Observable<PermissionResponse> {
+    return this.restService.post(this.endpoint, body, {
+      observe: 'response',
+    });
+  }
 
-    createPermissionAcceptUser(body: PermissionRequestAcceptUser): Observable<PermissionResponse> {
-        return this.restService.put(this.endpoint + '/acceptUser', body, undefined, {
-            observe: 'response',
-        });
-    }
+  createPermissionAcceptUser(
+    body: PermissionRequestAcceptUser
+  ): Observable<PermissionResponse> {
+    return this.restService.put(
+      this.endpoint + '/acceptUser',
+      body,
+      undefined,
+      {
+        observe: 'response',
+      }
+    );
+  }
 
-    updatePermission(
-        body: PermissionRequest,
-        id: number
-    ): Observable<PermissionResponse> {
-        return this.restService.put(this.endpoint, body, id, {
-            observe: 'response',
-        });
-    }
+  updatePermission(
+    body: PermissionRequest,
+    id: number
+  ): Observable<PermissionResponse> {
+    return this.restService.put(this.endpoint, body, id, {
+      observe: 'response',
+    });
+  }
 
-    getPermission(id: number): Observable<PermissionResponse> {
-        return this.restService.get(this.endpoint, {}, id).pipe(
-            map((response: PermissionResponse) => {
-                response.createdByName = this.userMinimalService.getUserNameFrom(
-                    response.createdBy
-                );
-                response.updatedByName = this.userMinimalService.getUserNameFrom(
-                    response.updatedBy
-                );
-                return response;
-            })
+  getPermission(id: number): Observable<PermissionResponse> {
+    return this.restService.get(this.endpoint, {}, id).pipe(
+      map((response: PermissionResponse) => {
+        response.createdByName = this.userMinimalService.getUserNameFrom(
+          response.createdBy
         );
-    }
+        response.updatedByName = this.userMinimalService.getUserNameFrom(
+          response.updatedBy
+        );
+        return response;
+      })
+    );
+  }
 
-    getPermissions(
-        limit: number = 1000,
-        offset: number = 0,
-        orderByColumn?: string,
-        orderByDirection?: string,
-        userId?: number,
-        organisationId?: number
-    ): Observable<PermissionGetManyResponse> {
-        if (userId) {
-            return this.restService.get(this.endpoint, {
-                limit: limit,
-                offset: offset,
-                orderOn: orderByColumn,
-                sort: orderByDirection,
-                userId: userId,
-            });
-        } else if (organisationId) {
-            return this.restService.get(this.endpoint, {
-                limit: limit,
-                offset: offset,
-                orderOn: orderByColumn,
-                sort: orderByDirection,
-                organisationId: organisationId,
-            });
-        } else {
-            return this.restService.get(this.endpoint, {
-                limit: limit,
-                offset: offset,
-                orderOn: orderByColumn,
-                sort: orderByDirection,
-            });
-        }
+  getPermissions(
+    limit: number = 1000,
+    offset: number = 0,
+    orderByColumn?: string,
+    orderByDirection?: string,
+    userId?: number,
+    organisationId?: number
+  ): Observable<PermissionGetManyResponse> {
+    if (userId || organisationId) {
+      return this.restService.get(this.endpoint, {
+        limit: limit,
+        offset: offset,
+        orderOn: orderByColumn,
+        sort: orderByDirection,
+        userId: userId,
+        organisationId: organisationId,
+      });
+    } else {
+      return this.restService.get(this.endpoint, {
+        limit: limit,
+        offset: offset,
+        orderOn: orderByColumn,
+        sort: orderByDirection,
+      });
     }
+  }
 
-    deletePermission(id: number) {
-        return this.restService.delete(this.endpoint, id);
-    }
+  deletePermission(id: number) {
+    return this.restService.delete(this.endpoint, id);
+  }
 }
diff --git a/src/app/applications/application-detail/application-detail.component.html b/src/app/applications/application-detail/application-detail.component.html
index 4c7d2e7b4..2c4819eed 100644
--- a/src/app/applications/application-detail/application-detail.component.html
+++ b/src/app/applications/application-detail/application-detail.component.html
@@ -1,7 +1,8 @@
 <div *ngIf="application">
   <app-top-bar [data]="application" [backButton]="backButton" [subPage]="true"
-    [addDetailDowndown]="true" [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteApplication()"
-    [canEdit]="canEdit">
+               [addDetailDowndown]="true" [dropDownButton]="dropdownButton"
+               (deleteSelectedInDropdown)="onDeleteApplication()"
+               [canEdit]="canEdit">
   </app-top-bar>
   <div class="container-fluid">
     <div class="row">
@@ -15,17 +16,20 @@ <h3>{{ 'APPLICATION.DETAILS' | translate }}</h3>
           <p *ngIf="application.description">
             <strong>{{ 'APPLICATION.DESCRIPTION' | translate }}</strong></p>
           <pre><p>{{application.description}}</p></pre>
-          <app-metadata-details [status]="application.status" [startDate]="application.startDate"
-          [endDate]="application.endDate"
-          [category]="application.category"
-          [owner]="application.owner"
-          [contactPerson]="application.contactPerson"
-          [contactEmail]="application.contactEmail"
-          [contactPhone]="application.contactPhone"
-          [personalData]="application.personalData"
-          [hardware]="application.hardware"
-          [controlledProperties]="application.controlledProperties"
-          [deviceTypes]="application.deviceTypes"
+          <app-metadata-details
+            [permissions]="application.permissions"
+            [status]="application.status"
+            [startDate]="application.startDate"
+            [endDate]="application.endDate"
+            [category]="application.category"
+            [owner]="application.owner"
+            [contactPerson]="application.contactPerson"
+            [contactEmail]="application.contactEmail"
+            [contactPhone]="application.contactPhone"
+            [personalData]="application.personalData"
+            [hardware]="application.hardware"
+            [controlledProperties]="application.controlledProperties"
+            [deviceTypes]="application.deviceTypes"
           ></app-metadata-details>
         </div>
       </div>
@@ -36,7 +40,7 @@ <h3>{{ 'APPLICATION.DETAILS' | translate }}</h3>
          [routerLink]="link.link"
          routerLinkActive #rla="routerLinkActive"
          [active]="rla.isActive"
-         >{{ link.label | translate }}</a>
+      >{{ link.label | translate }}</a>
     </nav>
     <router-outlet></router-outlet>
   </div>
diff --git a/src/app/applications/application.model.ts b/src/app/applications/application.model.ts
index 3282eb415..07982ae4a 100644
--- a/src/app/applications/application.model.ts
+++ b/src/app/applications/application.model.ts
@@ -5,6 +5,7 @@ import { Organisation } from '../admin/organisation/organisation.model';
 import { ApplicationStatus } from './enums/status.enum';
 import { IotDevice } from './iot-devices/iot-device.model';
 import { ApplicationDeviceType } from './models/application-device-type.model';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
 
 export class Application {
   public id: number;
@@ -30,6 +31,7 @@ export class Application {
   public hardware?: string;
   public controlledProperties?: ControlledProperty[];
   public deviceTypes?: ApplicationDeviceType[];
+  public permissions: PermissionResponse[];
   public permissionIds: number[];
 }
 
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
index 4b772d65b..82580715a 100644
--- a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
+++ b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
@@ -308,7 +308,8 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         0,
         undefined,
         undefined,
-        this.meService.hasGlobalAdmin() ? undefined : userId
+        this.meService.hasGlobalAdmin() ? undefined : userId,
+        this.sharedVariableService.getSelectedOrganisationId()
       )
       .subscribe((res) => {
         this.permissions = res.data.sort((a, b) =>
diff --git a/src/app/shared/components/metadata-details/metadata-details.component.html b/src/app/shared/components/metadata-details/metadata-details.component.html
index 4031fd129..85766fd73 100644
--- a/src/app/shared/components/metadata-details/metadata-details.component.html
+++ b/src/app/shared/components/metadata-details/metadata-details.component.html
@@ -1,3 +1,7 @@
+<p *ngIf="permissions.length !== 0"><strong>{{ 'APPLICATION.METADATA-FIELD.PERMISSIONS' | translate }}</strong></p>
+<ul *ngIf="permissions.length !== 0">
+  <li *ngFor="let permission of permissions">{{ permission.name }}</li>
+</ul>
 <p *ngIf="status && status !== ApplicationStatus.NONE">
   <strong>{{ 'APPLICATION.METADATA-FIELD.STATUS' | translate }}</strong>{{ 'APPLICATION.STATUS.' + status | translate }}
 </p>
diff --git a/src/app/shared/components/metadata-details/metadata-details.component.ts b/src/app/shared/components/metadata-details/metadata-details.component.ts
index 35923cf1d..e9b96b20a 100644
--- a/src/app/shared/components/metadata-details/metadata-details.component.ts
+++ b/src/app/shared/components/metadata-details/metadata-details.component.ts
@@ -4,6 +4,7 @@ import { ApplicationDeviceType } from '@applications/models/application-device-t
 import { TranslateService } from '@ngx-translate/core';
 import { toPascalKebabCase } from '@shared/helpers/string.helper';
 import { ControlledProperty } from '@shared/models/controlled-property.model';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
 
 @Component({
   selector: 'app-metadata-details',
@@ -11,6 +12,7 @@ import { ControlledProperty } from '@shared/models/controlled-property.model';
   styleUrls: ['./metadata-details.component.scss'],
 })
 export class MetadataDetailsComponent implements OnInit {
+  @Input() permissions?: PermissionResponse[];
   @Input() status?: ApplicationStatus;
   @Input() startDate?: Date;
   @Input() endDate?: Date;
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
index a03f0b451..e6bf6c8a2 100644
--- a/src/assets/i18n/da.json
+++ b/src/assets/i18n/da.json
@@ -137,6 +137,7 @@
     },
     "DETAILS": "Detaljer",
     "METADATA-FIELD": {
+      "PERMISSIONS": "Brugergrupper",
       "STATUS": "Status",
       "START-DATE": "Startdato",
       "END-DATE": "Slutdato",