feat: angular migration- groups

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

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

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

feat: resolved review comments

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

Author: aditya-goyal01

gravitee-apim-console-webui/src/app.module.ajs.ts

@@ -112,7 +112,6 @@ import PlatformLogsComponentAjs from './management/analytics/logs/platform-logs.
 import PlatformLogComponentAjs from './management/analytics/logs/platform-log.component.ajs';
 
 import CategoryService from './services/category.service';
-import DialogAddGroupMemberController from './management/settings/groups/group/addMemberDialog.controller';
 import SubscriptionService from './services/subscription.service';
 import EmptyStateDirective from './components/emptystate/emptystate.directive';
 import TagService from './services/tag.service';
@@ -147,9 +146,6 @@ import { ApiAuditComponentAjs } from './management/api/audit/general/audit.compo
 import AuditComponent from './components/audit/audit.component';
 // Configuration
 import PortalSettingsService from './services/portalSettings.service';
-// Groups
-import GroupsComponentAjs from './management/settings/groups/groups.component.ajs';
-import GroupComponentAjs from './management/settings/groups/group/group.component.ajs';
 import GroupService from './services/group.service';
 // Dictionaries
 import DictionaryService from './services/dictionary.service';
@@ -227,7 +223,6 @@ import { ApiAlertsDashboardComponentAjs } from './management/api/analytics/alert
 
 import { markedHighlight } from 'marked-highlight';
 import { downgradeInjectable } from '@angular/upgrade/static';
-import DialogTransferOwnershipController from './management/settings/groups/group/transferOwnershipDialog.controller';
 import ApiKeysComponent from './management/application/components/api-key/api-keys.component';
 import ApiKeysController from './management/application/components/api-key/api-keys.controller';
 import { IfMatchEtagInterceptor } from './shared/interceptors/if-match-etag.interceptor';
@@ -436,10 +431,6 @@ graviteeManagementModule.component('analyticsDashboardComponentAjs', AnalyticsDa
 graviteeManagementModule.component('gvAlertDashboard', AlertsDashboardComponent);
 graviteeManagementModule.component('alertsActivityComponentAjs', AlertsActivityComponentAjs);
 graviteeManagementModule.component('apiAlertsDashboardComponentAjs', ApiAlertsDashboardComponentAjs);
-graviteeManagementModule.component('settingsGroupsAjs', GroupsComponentAjs);
-graviteeManagementModule.component('settingsGroupEditAjs', GroupComponentAjs);
-graviteeManagementModule.controller('DialogAddGroupMemberController', DialogAddGroupMemberController);
-graviteeManagementModule.controller('DialogTransferOwnershipController', DialogTransferOwnershipController);
 graviteeManagementModule.controller('FileChooserDialogController', FileChooserDialogController);
 graviteeManagementModule.controller('DialogConfirmController', DialogConfirmController);
 graviteeManagementModule.controller('DialogConfirmAndValidateController', DialogConfirmAndValidateController);

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,6 +33,7 @@ export interface ConsoleSettings {
   trialInstance?: ConsoleSettingsTrialInstance;
   federation?: ConsoleSettingsFederation;
   cloudHosted?: ConsoleSettingsCloudHosted;
+  userGroup?: ConsoleSettingsUserGroup;
 }
 
 export interface ConsoleSettingsEmail {
@@ -187,3 +188,7 @@ export interface ConsoleSettingsFederation {
 export interface ConsoleSettingsCloudHosted {
   enabled?: boolean;
 }
+
+interface ConsoleSettingsUserGroup {
+  required: { enabled: boolean };
+}

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

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Invitation {
+  id?: string;
+  reference_type?: string;
+  reference_id: string;
+  email: string;
+  api_role?: string;
+  application_role?: string;
+}

gravitee-apim-console-webui/src/index.scss

@@ -42,7 +42,6 @@
   @import 'management/api/api';
   @import 'management/analytics';
   @import 'management/settings/portal-theme/portal-theme';
-  @import 'management/settings/groups/group/group';
   @import 'management/datatable';
   @import 'management/forms';
   @import 'management/stepper';

gravitee-apim-console-webui/src/management/application/creation/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/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,7 @@ 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 { ConsoleSettingsService } from '../../../services-ngx/console-settings.service';
 
 const TYPES_INFOS = {
   SIMPLE: {
@@ -67,7 +68,7 @@ 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;
 
@@ -84,6 +85,7 @@ export class ApplicationCreationComponent {
     oauthGrantTypes: new FormControl(),
     oauthRedirectUris: new FormControl([]),
     additionalClientMetadata: new FormControl([]),
+    groups: new FormControl([]),
   });
 
   public applicationTypes$ = this.applicationTypesService.getEnabledApplicationTypes().pipe(
@@ -111,8 +113,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 +132,7 @@ export class ApplicationCreationComponent {
         name: applicationPayload.name,
         description: applicationPayload.description,
         domain: applicationPayload.domain,
+        groups: applicationPayload.groups,
         settings: {
           ...(applicationPayload.type === 'SIMPLE'
             ? {
@@ -158,4 +166,18 @@ export class ApplicationCreationComponent {
         },
       });
   }
+
+  private setUserGroupRequiredValidator() {
+    this.settingsService
+      .get()
+      .pipe(
+        tap((consoleSettings) => {
+          if (consoleSettings.userGroup.required.enabled) {
+            this.applicationFormGroup.controls.groups?.setValidators(Validators.required);
+          }
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe();
+  }
 }

gravitee-apim-console-webui/src/management/application/creation/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/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, DestroyRef, inject, 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,14 @@ 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, of } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 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 +51,7 @@ export type ApplicationForm = {
   oauthRedirectUris: FormControl<string[]>;
 
   additionalClientMetadata: FormControl<Header[]>;
+  groups: FormControl<string[]>;
 };
 
 export type ApplicationCreationFormApplicationType = ApplicationType & {
@@ -77,8 +81,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 +94,16 @@ export class ApplicationCreationFormComponent implements OnInit {
       allowedGrantTypesVM: { value: string; label: string; disabled: boolean }[];
     }
   >;
+  groupsList: Observable<Group[]> = of([]);
+
+  private refreshGroups = new BehaviorSubject<Group[]>([]);
+  private destroyRef: DestroyRef = inject(DestroyRef);
+
+  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 +143,12 @@ 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))),
+      takeUntilDestroyed(this.destroyRef),
+    );
+  }
 }

gravitee-apim-console-webui/src/management/settings/groups/_groups.scss

@@ -0,0 +1,75 @@
+<!--
+
+    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.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<h2 mat-dialog-title>Add Members</h2>
+<mat-dialog-content>
+  <form [formGroup]="addMemberForm" class="add-member__form">
+    <mat-form-field aria-hidden="false" aria-label="Select default API role">
+      <mat-label>Default API Role</mat-label>
+      <mat-select formControlName="defaultAPIRole" (selectionChange)="onAPIRoleChange()">
+        @for (role of defaultAPIRoles; track role.id) {
+          <mat-option [value]="role.name" [disabled]="disabledAPIRoles().has(role.id)">{{ role.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field aria-hidden="false" aria-label="Select default application role">
+      <mat-label>Default Application Role</mat-label>
+      <mat-select formControlName="defaultApplicationRole">
+        @for (role of defaultApplicationRoles; track role.id) {
+          <mat-option [value]="role.name" [disabled]="role.system">{{ role.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field aria-hidden="false" aria-label="Select default integration role">
+      <mat-label>Default Integration Role</mat-label>
+      <mat-select formControlName="defaultIntegrationRole">
+        @for (role of defaultIntegrationRoles; track role.id) {
+          <mat-option [value]="role.name" [disabled]="role.system">{{ role.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Search Users</mat-label>
+      <input aria-label="Search users" matInput formControlName="searchTerm" [matAutocomplete]="auto" />
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectUser($event)">
+        @for (user of filteredUsers$ | async; track user.id) {
+          <mat-option [value]="user">
+            {{ user.displayName }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+      <mat-hint>Search users to add to the group</mat-hint>
+    </mat-form-field>
+
+    <mat-chip-set>
+      @for (user of selectedUsers; track user.id) {
+        <mat-chip [removable]="true" (removed)="deselectUser(user)">
+          {{ user.displayName }}
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+      }
+    </mat-chip-set>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" [disabled]="disableSubmit()" (click)="submit()">Add Users</button>
+  <button mat-raised-button mat-dialog-close>Cancel</button>
+</mat-dialog-actions>