feat: admin can require user groups to be added in applications

Signed-off-by: aditya.goyal <aditya.goyal@graviteesource.com>

Author: aditya-goyal01

gravitee-apim-console-webui/src/entities/application/CreateApplication.ts

@@ -22,4 +22,5 @@ export interface CreateApplication {
   domain?: string;
   type?: string;
   settings?: ApplicationSettings;
+  groups?: string[];
 }

gravitee-apim-console-webui/src/entities/consoleSettings.ts

@@ -33,7 +33,7 @@ export interface ConsoleSettings {
   trialInstance?: ConsoleSettingsTrialInstance;
   federation?: ConsoleSettingsFederation;
   cloudHosted?: ConsoleSettingsCloudHosted;
-  userGroups?: ConsoleSettingsUserGroups;
+  userGroup?: ConsoleSettingsUserGroup;
 }
 
 export interface ConsoleSettingsEmail {
@@ -189,6 +189,6 @@ export interface ConsoleSettingsCloudHosted {
   enabled?: boolean;
 }
 
-interface ConsoleSettingsUserGroups {
-  required?: boolean;
+interface ConsoleSettingsUserGroup {
+  required: { enabled: boolean };
 }

gravitee-apim-console-webui/src/management/application/creation-ng/application-creation.component.spec.ts

@@ -68,6 +68,7 @@ describe('ApplicationCreationComponent', () => {
         name: 'name',
         description: 'description',
         domain: 'domain',
+        groups: [],
         settings: {
           app: {
             client_id: 'appClientId',
@@ -97,6 +98,7 @@ describe('ApplicationCreationComponent', () => {
         name: 'name',
         description: 'description',
         domain: 'domain',
+        groups: [],
         settings: {
           oauth: {
             additional_client_metadata: {},
@@ -128,6 +130,7 @@ describe('ApplicationCreationComponent', () => {
         name: 'name',
         description: 'description',
         domain: 'domain',
+        groups: [],
         settings: {
           oauth: {
             additional_client_metadata: {},
@@ -166,6 +169,7 @@ describe('ApplicationCreationComponent', () => {
         name: 'name',
         description: 'description',
         domain: 'domain',
+        groups: [],
         settings: {
           app: {
             client_id: 'appClientId',

gravitee-apim-console-webui/src/management/application/creation-ng/application-creation.component.ts

@@ -15,7 +15,7 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { Component, ChangeDetectionStrategy, DestroyRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { map, tap } from 'rxjs/operators';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -30,6 +30,8 @@ import { ApplicationTypesService } from '../../../services-ngx/application-types
 import { ApplicationService } from '../../../services-ngx/application.service';
 import { SnackBarService } from '../../../services-ngx/snack-bar.service';
 import { toDictionary } from '../../../util/gio-form-header.util';
+import { ConsoleSettings } from '../../../entities/consoleSettings';
+import { ConsoleSettingsService } from '../../../services-ngx/console-settings.service';
 
 const TYPES_INFOS = {
   SIMPLE: {
@@ -67,9 +69,10 @@ const TYPES_INFOS = {
   styleUrls: ['./application-creation.component.scss'],
   templateUrl: './application-creation.component.html',
 })
-export class ApplicationCreationComponent {
+export class ApplicationCreationComponent implements OnInit {
   private destroyRef = inject(DestroyRef);
   private isCreating = false;
+  private consoleSettings: ConsoleSettings = {};
 
   public applicationFormGroup = new FormGroup<ApplicationForm>({
     name: new FormControl(undefined, Validators.required),
@@ -84,6 +87,7 @@ export class ApplicationCreationComponent {
     oauthGrantTypes: new FormControl(),
     oauthRedirectUris: new FormControl([]),
     additionalClientMetadata: new FormControl([]),
+    groups: new FormControl([]),
   });
 
   public applicationTypes$ = this.applicationTypesService.getEnabledApplicationTypes().pipe(
@@ -111,8 +115,13 @@ export class ApplicationCreationComponent {
     private readonly snackBarService: SnackBarService,
     private readonly activatedRoute: ActivatedRoute,
     private readonly router: Router,
+    private readonly settingsService: ConsoleSettingsService,
   ) {}
 
+  ngOnInit(): void {
+    this.setUserGroupRequiredValidator();
+  }
+
   onSubmit() {
     if (this.applicationFormGroup.invalid || this.isCreating === true) {
       return;
@@ -125,6 +134,7 @@ export class ApplicationCreationComponent {
         name: applicationPayload.name,
         description: applicationPayload.description,
         domain: applicationPayload.domain,
+        groups: applicationPayload.groups,
         settings: {
           ...(applicationPayload.type === 'SIMPLE'
             ? {
@@ -158,4 +168,15 @@ export class ApplicationCreationComponent {
         },
       });
   }
+
+  private setUserGroupRequiredValidator() {
+    this.settingsService.get().subscribe({
+      next: (response) => {
+        this.consoleSettings = response;
+        if (this.consoleSettings.userGroup.required.enabled) {
+          this.applicationFormGroup.get('groups').setValidators(Validators.required);
+        }
+      },
+    });
+  }
 }

gravitee-apim-console-webui/src/management/application/creation-ng/components/application-creation-form.component.html

@@ -50,6 +50,16 @@
       <mat-label>Domain</mat-label>
     </mat-form-field>
 
+    <mat-form-field>
+      <mat-label>Select Groups</mat-label>
+      <mat-hint>Select user groups to add to the application</mat-hint>
+      <mat-select formControlName="groups" multiple>
+        @for (group of groupsList | async; track group) {
+          <mat-option [value]="group.id">{{ group.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
     <h3 class="form__securityTitle">Security</h3>
     @if (applicationTypes.length === 0) {
       <gio-banner-warning>No application type available, please check Client Registration configuration.</gio-banner-warning>

gravitee-apim-console-webui/src/management/application/creation-ng/components/application-creation-form.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { CommonModule } from '@angular/common';
-import { Component, OnInit, inject, DestroyRef, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -28,11 +28,13 @@ import {
   Header,
 } from '@gravitee/ui-particles-angular';
 import { MatRadioModule } from '@angular/material/radio';
-import { filter, map, share, startWith, tap } from 'rxjs/operators';
+import { filter, map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { MatSelectModule } from '@angular/material/select';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { ApplicationType } from '../../../../entities/application-type/ApplicationType';
+import { GroupService } from '../../../../services-ngx/group.service';
+import { Group } from '../../../../entities/group/group';
 
 export type ApplicationForm = {
   name: FormControl<string>;
@@ -48,6 +50,7 @@ export type ApplicationForm = {
   oauthRedirectUris: FormControl<string[]>;
 
   additionalClientMetadata: FormControl<Header[]>;
+  groups: FormControl<string[]>;
 };
 
 export type ApplicationCreationFormApplicationType = ApplicationType & {
@@ -77,8 +80,6 @@ export type ApplicationCreationFormApplicationType = ApplicationType & {
   templateUrl: './application-creation-form.component.html',
 })
 export class ApplicationCreationFormComponent implements OnInit {
-  private destroyRef = inject(DestroyRef);
-
   @Input({ required: true })
   public applicationTypes: ApplicationCreationFormApplicationType[];
 
@@ -92,8 +93,14 @@ export class ApplicationCreationFormComponent implements OnInit {
       allowedGrantTypesVM: { value: string; label: string; disabled: boolean }[];
     }
   >;
+  groupsList: Observable<Group[]>;
+  refreshGroups = new BehaviorSubject<Group[]>([]);
+
+  constructor(private readonly groupService: GroupService) {}
 
   ngOnInit() {
+    this.initializeGroups();
+
     this.applicationType$ = this.applicationFormGroup.get('type').valueChanges.pipe(
       startWith(this.applicationFormGroup.get('type').value),
       filter((typeSelected) => !!typeSelected),
@@ -133,4 +140,11 @@ export class ApplicationCreationFormComponent implements OnInit {
       share(),
     );
   }
+
+  private initializeGroups() {
+    this.groupsList = this.refreshGroups.pipe(
+      switchMap((_) => this.groupService.list()),
+      map((_) => _.sort((a, b) => a.name.localeCompare(b.name))),
+    );
+  }
 }

gravitee-apim-console-webui/src/management/settings/groups/group/add-members-dialog/add-members-dialog.component.html

@@ -1,13 +1,13 @@
 <!--
 
     Copyright (C) 2015 The Gravitee team (http://gravitee.io)
-    
+
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
-    
+
             http://www.apache.org/licenses/LICENSE-2.0
-    
+
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -58,11 +58,12 @@ <h2 mat-dialog-title>Add members</h2>
       be transferred while editing the group members.
     </mat-error>
 
-    <mat-list role="list">
-      <mat-list-item *ngFor="let user of selectedUsers">
-        {{ user.displayName }} <button mat-button (click)="deselectUser(user)"><mat-icon svgIcon="gio:trash"></mat-icon></button>
-      </mat-list-item>
-    </mat-list>
+    <mat-chip-set>
+      <mat-chip *ngFor="let user of selectedUsers" [removable]="true" (removed)="deselectUser(user)">
+        {{ user.displayName }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    </mat-chip-set>
   </form>
 
   <mat-dialog-actions style="justify-content: flex-end">

gravitee-apim-console-webui/src/management/settings/groups/group/add-members-dialog/add-members-dialog.component.spec.ts

@@ -13,25 +13,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 
 import { AddMembersDialogComponent } from './add-members-dialog.component';
 
-describe('AddMembersDialogComponent', () => {
-  let component: AddMembersDialogComponent;
-  let fixture: ComponentFixture<AddMembersDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AddMembersDialogComponent],
-    }).compileComponents();
+import { GioTestingModule } from '../../../../../shared/testing';
 
-    fixture = TestBed.createComponent(AddMembersDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+describe('AddMembersDialogComponent', () => {
+  TestBed.configureTestingModule({
+    imports: [AddMembersDialogComponent, MatDialogModule, GioTestingModule],
+    declarations: [],
+    providers: [
+      {
+        provide: MatDialogRef,
+        useValue: {
+          close: jest.fn(),
+        },
+      },
+      {
+        provide: MAT_DIALOG_DATA,
+        useValue: {
+          /* mock data */
+        },
+      },
+    ],
+  }).compileComponents();
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(AddMembersDialogComponent);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

gravitee-apim-console-webui/src/management/settings/groups/group/add-members-dialog/add-members-dialog.component.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { UsersService } from 'src/services-ngx/users.service';
 
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -28,6 +27,7 @@ import { debounceTime, distinctUntilChanged, map, startWith } from 'rxjs/operato
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { Observable, of, switchMap } from 'rxjs';
 import { MatListModule } from '@angular/material/list';
+import { MatChipsModule } from '@angular/material/chips';
 
 import { GioPermissionService } from '../../../../../shared/components/gio-permission/gio-permission.service';
 import { GroupService } from '../../../../../services-ngx/group.service';
@@ -40,7 +40,7 @@ import { SearchableUser } from '../../../../../entities/user/searchableUser';
 import { Member } from '../../../../../entities/management-api-v2';
 import { GroupMembership } from '../../../../../entities/group/groupMember';
 import { RoleName } from '../membershipState';
-
+import { UsersService } from '../../../../../services-ngx/users.service';
 
 @Component({
   selector: 'add-member-dialog',
@@ -56,6 +56,7 @@ import { RoleName } from '../membershipState';
     MatSelectModule,
     MatAutocompleteModule,
     MatListModule,
+    MatChipsModule,
   ],
   templateUrl: './add-members-dialog.component.html',
   styleUrl: './add-members-dialog.component.scss',
@@ -196,9 +197,8 @@ export class AddMembersDialogComponent implements OnInit {
 
     return this.usersService.search(searchTerm).pipe(
       map((users) => {
-        const excludedIds = this.members.map((member) => member.id);
-        excludedIds.concat(this.selectedUsers.map((user) => user.id));
-        return users.filter((user) => !excludedIds.includes(user.id));
+        const excludedIds = new Set([...this.members.map((member) => member.id), ...this.selectedUsers.map((user) => user.id)]);
+        return users.filter((user) => !excludedIds.has(user.id));
       }),
     );
   }

gravitee-apim-console-webui/src/management/settings/groups/group/delete-member-dialog/delete-member-dialog.component.html

@@ -30,12 +30,12 @@ <h2 mat-dialog-title>Delete Member</h2>
       <mat-hint *ngIf="!selectedPrimaryOwner">{{ 'Please search members to transfer ownership' }}</mat-hint>
     </mat-form-field>
 
-    <mat-list role="list" *ngIf="selectedPrimaryOwner">
-      <mat-list-item>
+    <mat-chip-set *ngIf="selectedPrimaryOwner">
+      <mat-chip [removable]="true" (removed)="deselectPrimaryOwner()">
         {{ selectedPrimaryOwner.displayName }}
-        <button mat-button (click)="deselectPrimaryOwner()"><mat-icon svgIcon="gio:trash"></mat-icon></button>
-      </mat-list-item>
-    </mat-list>
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    </mat-chip-set>
 
     <mat-hint *ngIf="this.ownershipTransferMessage">{{ this.ownershipTransferMessage }}</mat-hint>
     <span> Are you sure, you want to delete {{ member.displayName }}? </span>