feat: [MULTIDIRECTORY-1184] Fixed an issue with deleting access groups in the access policy

Author: Natalia Kupriianova

projects/multidirectory-app/src/app/features/policies/access-policy/access-policy-view/access-policy-view.component.html

@@ -8,17 +8,11 @@
     <div class="form-grid">
       <!-- Domain Row -->
       <div>{{ 'access-policy-create.domain' | transloco }}</div>
-      <md-textbox
-        [(ngModel)]="accessClient.name"
-        [maxLength]="100"
-        appRequired
-        class="span-two"
-      ></md-textbox>
+      <md-textbox [(ngModel)]="accessClient.name" [maxLength]="100" appRequired class="span-two"></md-textbox>
 
       <!-- IP Addresses Row -->
       <div>{{ 'access-policy-create.ip-addresses' | transloco }}</div>
-      <md-textbox (blur)="onIpChanged()" [(ngModel)]="ipAddresses" appRequired validIpAddress>
-      </md-textbox>
+      <md-textbox (blur)="onIpChanged()" [(ngModel)]="ipAddresses" appRequired validIpAddress> </md-textbox>
       <md-button (click)="changeIpAdressAttribute()" [stretch]="true">
         {{ 'access-policy-create.add' | transloco }}
       </md-button>
@@ -28,6 +22,7 @@
       <md-multiselect
         #groupSelector
         (inputChanged)="checkGroups()"
+        (itemSelected)="onChangeSelectedItems($event)"
         [(ngModel)]="groupQuery"
         [options]="availableGroups"
         [(selectedData)]="selectedGroups"
@@ -41,8 +36,7 @@
 
       <!-- MFA Row -->
       <div>MFA</div>
-      <md-dropdown [(ngModel)]="mfaAccess" [options]="options" appRequired class="span-two">
-      </md-dropdown>
+      <md-dropdown [(ngModel)]="mfaAccess" [options]="options" appRequired class="span-two"> </md-dropdown>
 
       <!-- MFA Groups Row (Conditional) -->
       @if (mfaAccess === MfaAccessEnum.SelectedGroups) {
@@ -77,25 +71,15 @@
         <md-group title="Bypass" class="pt-16">
           @if (!bypassAllowed) {
             <div class="flex gap-1">
-              <img
-                class="tooltip-icon"
-                src="assets/info-circle.svg"
-                style="width: 24px; height: 24px"
-              />
+              <img class="tooltip-icon" src="assets/info-circle.svg" style="width: 24px; height: 24px" />
               {{ 'access-policy-create.enable-2fa' | transloco }}<br />
             </div>
           }
           <div class="bypass-switch-column">
-            <md-shift-checkbox
-              [(ngModel)]="accessClient.bypassNoConnection"
-              [disabled]="!bypassAllowed"
-            >
+            <md-shift-checkbox [(ngModel)]="accessClient.bypassNoConnection" [disabled]="!bypassAllowed">
               {{ 'access-policy-create.bypass-no-connection' | transloco }}
             </md-shift-checkbox>
-            <md-shift-checkbox
-              [(ngModel)]="accessClient.bypassServiceFailure"
-              [disabled]="!bypassAllowed"
-            >
+            <md-shift-checkbox [(ngModel)]="accessClient.bypassServiceFailure" [disabled]="!bypassAllowed">
               {{ 'access-policy-create.bypass-service-failure' | transloco }}
             </md-shift-checkbox>
           </div>
@@ -105,9 +89,7 @@
   </md-form>
   @if (showConrolButton()) {
     <div class="flex justify-start gap-1">
-      <md-button [disabled]="!form.valid" [primary]="true" (click)="save()"
-        >{{ 'access-policy-create.approve' | transloco }}
-      </md-button>
+      <md-button [disabled]="!form.valid" [primary]="true" (click)="save()">{{ 'access-policy-create.approve' | transloco }} </md-button>
     </div>
   }
 </div>

projects/multidirectory-app/src/app/features/policies/access-policy/access-policy-view/access-policy-view.component.ts

@@ -1,14 +1,5 @@
 import { NgClass } from '@angular/common';
-import {
-  Component,
-  inject,
-  Input,
-  input,
-  OnDestroy,
-  OnInit,
-  output,
-  viewChild,
-} from '@angular/core';
+import { Component, inject, Input, input, OnDestroy, OnInit, output, viewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { AccessPolicy } from '@core/access-policy/access-policy';
@@ -113,11 +104,7 @@ export class AccessPolicyViewComponent implements OnInit, OnDestroy {
       .getMultifactor()
       .pipe(take(1))
       .subscribe((mfSettings) => {
-        this.bypassAllowed =
-          !!mfSettings.mfa_key_ldap ||
-          !!mfSettings.mfa_secret_ldap ||
-          !!mfSettings.mfa_key ||
-          !!mfSettings.mfa_secret;
+        this.bypassAllowed = !!mfSettings.mfa_key_ldap || !!mfSettings.mfa_secret_ldap || !!mfSettings.mfa_key || !!mfSettings.mfa_secret;
       });
   }
 
@@ -133,20 +120,13 @@ export class AccessPolicyViewComponent implements OnInit, OnDestroy {
         this.windows.hideSpinner();
         if (this.activatedRoute.snapshot.params.id) {
           this.accessClient =
-            policies.find(
-              (x) =>
-                x.id == this.activatedRoute.snapshot.params.id || x.id == this.accessPolicyId(),
-            ) ?? new AccessPolicy();
+            policies.find((x) => x.id == this.activatedRoute.snapshot.params.id || x.id == this.accessPolicyId()) ?? new AccessPolicy();
         }
-        this.ipAddresses = this.accessClient.ipRange
-          .map((x: any) => (x instanceof Object ? x.start + '-' + x.end : x))
-          .join(', ');
+        this.ipAddresses = this.accessClient.ipRange.map((x: any) => (x instanceof Object ? x.start + '-' + x.end : x)).join(', ');
 
         this.mfaAccess = this.accessClient.mfaStatus ?? MfaAccessEnum.Noone;
         this.selectedGroups = this.accessClient.groups.map((x) => this.getMultiselectOption(x));
-        this.selectedMfaGroups = this.accessClient.mfaGroups.map((x) =>
-          this.getMultiselectOption(x),
-        );
+        this.selectedMfaGroups = this.accessClient.mfaGroups.map((x) => this.getMultiselectOption(x));
       },
       error: () => {
         this.windows.hideSpinner();
@@ -189,9 +169,7 @@ export class AccessPolicyViewComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        this.ipAddresses = result.addresses
-          .map((x: any) => (x instanceof Object ? x.start + '-' + x.end : x))
-          .join(', ');
+        this.ipAddresses = result.addresses.map((x: any) => (x instanceof Object ? x.start + '-' + x.end : x)).join(', ');
         this.accessClient.ipRange = result.addresses;
       });
   }
@@ -219,6 +197,10 @@ export class AccessPolicyViewComponent implements OnInit, OnDestroy {
       });
   }
 
+  onChangeSelectedItems($event: MultiselectModel[]) {
+    this.accessClient.groups = $event.map((x) => x.id);
+  }
+
   checkMfaGroups() {
     this.retrieveGroups(this.mfaGroupsQuery)
       .pipe(take(1))
@@ -245,9 +227,7 @@ export class AccessPolicyViewComponent implements OnInit, OnDestroy {
     }
     return from(this.ldapTreeview.load('')).pipe(
       take(1),
-      switchMap((root) =>
-        this.api.search(SearchQueries.findEntities(groupQuery, root?.[0]?.id ?? '', ['group'])),
-      ),
+      switchMap((root) => this.api.search(SearchQueries.findEntities(groupQuery, root?.[0]?.id ?? '', ['group']))),
       map((result) => {
         return result.search_result.map((x) => {
           const name = new RegExp(Constants.RegexGetNameFromDn).exec(x.object_name);