fix(console): bump ui-particles to fix issue with policy studio

gravitee-apim-console-webui/package.json

@@ -19,10 +19,10 @@
     "@danielmoncada/angular-datetime-picker": "^16.0.1",
     "@danielmoncada/angular-datetime-picker-moment-adapter": "^3.0.1",
     "@fontsource/libre-franklin": "4.4.5",
-    "@gravitee/ui-analytics": "7.29.3",
+    "@gravitee/ui-analytics": "7.37.1",
     "@gravitee/ui-components": "3.44.0",
-    "@gravitee/ui-particles-angular": "7.29.3",
-    "@gravitee/ui-policy-studio-angular": "7.29.3",
+    "@gravitee/ui-particles-angular": "7.37.1",
+    "@gravitee/ui-policy-studio-angular": "7.37.1",
     "@highcharts/map-collection": "1.1.4",
     "@ngx-formly/core": "6.1.8",
     "@ngx-formly/material": "6.1.8",

gravitee-apim-console-webui/src/entities/flow/configurationSchema.fixture.ts

@@ -18,25 +18,15 @@ import { FlowConfigurationSchema } from './configurationSchema';
 export function fakeFlowConfigurationSchema(attributes?: FlowConfigurationSchema): FlowConfigurationSchema {
   const base: FlowConfigurationSchema = {
     type: 'object',
-    id: 'apim',
     properties: {
       flow_mode: {
         title: 'Flow Mode',
         description: 'The flow mode',
         type: 'string',
         enum: ['DEFAULT', 'BEST_MATCH'],
         default: 'DEFAULT',
-        'x-schema-form': {
-          titleMap: {
-            DEFAULT: 'Default',
-            BEST_MATCH: 'Best match',
-          },
-        },
       },
     },
-    required: [],
-    disabled: [],
-    execution_mode: 'v3',
   };
 
   return { ...base, ...attributes };

gravitee-apim-console-webui/src/management/api/component/plan/2-secure-step/plan-edit-secure-step.component.ts

@@ -47,6 +47,7 @@ export class PlanEditSecureStepComponent implements OnInit, OnDestroy {
 
   @Input()
   securityType: PlanMenuItemVM;
+
   constructor(
     @Inject('Constants') private readonly constants: Constants,
     private readonly policyService: PolicyV2Service,

gravitee-apim-console-webui/src/management/api/component/plan/api-plan-form.component.spec.ts

@@ -268,7 +268,7 @@ describe('ApiPlanFormComponent', () => {
 
         expect(testComponent.apiPlanForm.hasNextStep()).toEqual(true);
         expect(testComponent.apiPlanForm.hasPreviousStep()).toEqual(false);
-        testComponent.apiPlanForm.nextStep();
+        await testComponent.apiPlanForm.waitForNextStep();
         fixture.detectChanges();
 
         // 2- Secure Step
@@ -279,7 +279,7 @@ describe('ApiPlanFormComponent', () => {
 
         expect(testComponent.apiPlanForm.hasNextStep()).toEqual(true);
         expect(testComponent.apiPlanForm.hasPreviousStep()).toEqual(true);
-        testComponent.apiPlanForm.nextStep();
+        await testComponent.apiPlanForm.waitForNextStep();
 
         // 3- Restriction Step
 
@@ -415,7 +415,7 @@ describe('ApiPlanFormComponent', () => {
 
         expect(testComponent.apiPlanForm.hasNextStep()).toEqual(true);
         expect(testComponent.apiPlanForm.hasPreviousStep()).toEqual(false);
-        testComponent.apiPlanForm.nextStep();
+        await testComponent.apiPlanForm.waitForNextStep();
         fixture.detectChanges();
 
         // 2- Secure Step
@@ -429,7 +429,7 @@ describe('ApiPlanFormComponent', () => {
 
         expect(testComponent.apiPlanForm.hasNextStep()).toEqual(true);
         expect(testComponent.apiPlanForm.hasPreviousStep()).toEqual(true);
-        testComponent.apiPlanForm.nextStep();
+        await testComponent.apiPlanForm.waitForNextStep();
 
         // 3- Restriction Step
 

gravitee-apim-console-webui/src/management/api/component/plan/api-plan-form.component.ts

@@ -28,8 +28,8 @@ import {
   ViewChild,
 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NgControl, ValidationErrors, Validator } from '@angular/forms';
-import { asyncScheduler, Subject } from 'rxjs';
-import { distinctUntilChanged, map, observeOn, takeUntil, tap } from 'rxjs/operators';
+import { asyncScheduler, interval, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map, observeOn, take, takeUntil, tap } from 'rxjs/operators';
 import { MatStepper } from '@angular/material/stepper';
 import { GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR } from '@gravitee/ui-particles-angular';
 import { isEmpty, isEqual } from 'lodash';
@@ -261,6 +261,20 @@ export class ApiPlanFormComponent implements OnInit, AfterViewInit, OnDestroy, C
     this.matStepper.next();
   }
 
+  /**
+   * Wait for the next step to be selected
+   */
+  waitForNextStep() {
+    const nextStep = this.matStepper.selectedIndex + 1;
+    return interval(100)
+      .pipe(
+        map(() => this.nextStep()),
+        filter(() => this.matStepper.selectedIndex === nextStep),
+        take(1),
+      )
+      .toPromise();
+  }
+
   hasPreviousStep(): boolean | null {
     if (isEmpty(this.matStepper?.steps)) {
       return false;

gravitee-apim-console-webui/src/management/api/creation-v4/steps/step-4-security/step-4-security-1-plans-add.component.html

@@ -34,7 +34,7 @@
       gioFormFocusInvalid
       color="primary"
       type="button"
-      (click)="apiPlanForm.nextStep()"
+      (click)="apiPlanForm.waitForNextStep()"
     >
       Next
     </button>

gravitee-apim-console-webui/src/management/api/endpoints-v4/endpoint-group/create/api-endpoint-group-create.component.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { of, Subject } from 'rxjs';
 import { GioJsonSchema } from '@gravitee/ui-particles-angular';
@@ -41,6 +41,7 @@ import { ConnectorPluginsV2Service } from '../../../../../services-ngx/connector
       useValue: { displayDefaultIndicatorType: false, showError: true },
     },
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ApiEndpointGroupCreateComponent implements OnInit {
   private unsubscribe$: Subject<boolean> = new Subject<boolean>();
@@ -67,6 +68,7 @@ export class ApiEndpointGroupCreateComponent implements OnInit {
     private readonly apiService: ApiV2Service,
     private readonly connectorPluginsV2Service: ConnectorPluginsV2Service,
     private readonly snackBarService: SnackBarService,
+    private readonly changeDetectorRef: ChangeDetectorRef,
   ) {}
 
   ngOnInit() {
@@ -83,6 +85,7 @@ export class ApiEndpointGroupCreateComponent implements OnInit {
           if (this.apiType === 'PROXY') {
             this.endpointGroupTypeForm.get('endpointGroupType').setValue('http-proxy');
           }
+          this.changeDetectorRef.detectChanges();
         },
       });
 

gravitee-apim-console-webui/src/management/api/endpoints-v4/endpoint-group/create/api-endpoint-group-create.harness.ts

@@ -131,7 +131,8 @@ export class ApiEndpointGroupCreateHarness extends ComponentHarness {
   }
 
   async setConfigurationInputValue(inputId: string, text: string): Promise<void> {
-    return this.getConfigurationInput(inputId).then((input) => input.setValue(text));
+    await this.getConfigurationInput(inputId).then((input) => input.setValue(text));
+    await this.waitForTasksOutsideAngular();
   }
 
   async getCreateEndpointGroupButton(): Promise<MatButtonHarness> {

gravitee-apim-console-webui/src/management/api/endpoints-v4/endpoint/api-endpoint.component.spec.ts

@@ -174,7 +174,15 @@ describe('ApiEndpointComponent', () => {
         endpointGroups: [
           {
             ...apiV4.endpointGroups[0],
-            endpoints: [{ ...apiV4.endpointGroups[0].endpoints[0], name: 'endpoint-name updated', sharedConfigurationOverride: undefined }],
+            endpoints: [
+              {
+                ...apiV4.endpointGroups[0].endpoints[0],
+                name: 'endpoint-name updated',
+                sharedConfigurationOverride: {
+                  test: undefined,
+                },
+              },
+            ],
           },
         ],
       };

gravitee-apim-console-webui/src/management/api/general/plans/edit/api-general-plan-edit.component.html

@@ -58,7 +58,7 @@
       color="primary"
       type="button"
       data-testid="api_plans_nextstep"
-      (click)="apiPlanForm.nextStep()"
+      (click)="apiPlanForm.waitForNextStep()"
     >
       Next
     </button>

gravitee-apim-console-webui/src/management/api/policy-studio-v4/design/api-v4-policy-studio-design.component.spec.ts

@@ -23,6 +23,8 @@ import { GioPolicyStudioHarness } from '@gravitee/ui-policy-studio-angular/testi
 import { HarnessLoader } from '@angular/cdk/testing';
 import { of } from 'rxjs';
 import { GioLicenseTestingModule } from '@gravitee/ui-particles-angular';
+import { GioPolicyStudioComponent } from '@gravitee/ui-policy-studio-angular';
+import { By } from '@angular/platform-browser';
 
 import { ApiV4PolicyStudioDesignComponent } from './api-v4-policy-studio-design.component';
 
@@ -68,6 +70,9 @@ describe('ApiV4PolicyStudioDesignComponent', () => {
     component = fixture.componentInstance;
     loader = TestbedHarnessEnvironment.loader(fixture);
 
+    (fixture.debugElement.query(By.directive(GioPolicyStudioComponent)).componentInstance as GioPolicyStudioComponent).enableSavingTimer =
+      false;
+
     httpTestingController = TestBed.inject(HttpTestingController);
     fixture.detectChanges();
   });
@@ -516,7 +521,16 @@ describe('ApiV4PolicyStudioDesignComponent', () => {
     it('should edit step into "PlanA"', async () => {
       // Override Fetcher function
       component.policySchemaFetcher = (_policy) => {
-        return of({});
+        return of({
+          properties: {
+            content: {
+              type: 'string',
+            },
+            status: {
+              type: 'string',
+            },
+          },
+        });
       };
       component.policyDocumentationFetcher = (_policy) => {
         return of('');

gravitee-apim-console-webui/src/management/api/policy-studio/config/policy-studio-config.component.spec.ts

@@ -104,11 +104,8 @@ describe('PolicyStudioConfigComponent', () => {
   });
 
   it('should emulate v4 engine', async (done) => {
-    await fixture.whenStable();
-    fixture.detectChanges();
     const activateSupportSlideToggle = await loader.getHarness(MatSlideToggleHarness.with({ name: 'emulateV4Engine' }));
     expect(await activateSupportSlideToggle.isDisabled()).toEqual(false);
-    await fixture.whenStable();
 
     // Expect last apiDefinition
     policyStudioService.getApiDefinitionToSave$().subscribe((apiDefinition) => {