Apim upgrade portal next to angular 18

gravitee-apim-portal-webui-next/angular.json

@@ -19,7 +19,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "../gravitee-apim-portal-webui/dist/next",
             "index": "src/index.html",
@@ -86,7 +86,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "port": 4101,
             "proxyConfig": "src/proxy.conf.mjs",
@@ -103,7 +103,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "gravitee-apim-portal-webui-next:build"
           }

gravitee-apim-portal-webui-next/package.json

@@ -30,18 +30,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.3.6",
-    "@angular/cdk": "17.3.6",
-    "@angular/common": "17.3.6",
-    "@angular/compiler": "17.3.6",
-    "@angular/core": "17.3.6",
-    "@angular/forms": "17.3.6",
-    "@angular/localize": "17.3.6",
-    "@angular/material": "17.3.6",
-    "@angular/material-experimental": "17.3.6",
-    "@angular/platform-browser": "17.3.6",
-    "@angular/platform-browser-dynamic": "17.3.6",
-    "@angular/router": "17.3.6",
+    "@angular/animations": "18.2.13",
+    "@angular/cdk": "18.2.14",
+    "@angular/common": "18.2.13",
+    "@angular/compiler": "18.2.13",
+    "@angular/core": "18.2.13",
+    "@angular/forms": "18.2.13",
+    "@angular/localize": "18.2.13",
+    "@angular/material": "18.2.14",
+    "@angular/material-experimental": "18.2.14",
+    "@angular/platform-browser": "18.2.13",
+    "@angular/platform-browser-dynamic": "18.2.13",
+    "@angular/router": "18.2.13",
     "@asciidoctor/core": "3.0.4",
     "@asyncapi/web-component": "1.4.9",
     "@emoji-mart/data": "1.2.1",
@@ -50,38 +50,41 @@
     "highlight.js": "11.9.0",
     "jdenticon": "3.2.0",
     "js-yaml": "4.1.0",
+    "lodash": "4.17.21",
     "marked": "12.0.2",
     "marked-alert": "2.1.2",
     "marked-emoji": "1.4.3",
     "marked-extended-tables": "1.1.0",
     "marked-gfm-heading-id": "3.1.3",
     "marked-highlight": "2.1.1",
-    "ngx-infinite-scroll": "17.0.0",
+    "ngx-infinite-scroll": "18.0.0",
     "rxjs": "7.8.0",
     "swagger-ui": "5.17.9",
     "tslib": "2.3.0",
     "xng-breadcrumb": "11.0.0",
-    "zone.js": "0.14.3"
+    "zone.js": "0.14.10"
   },
   "devDependencies": {
-    "@angular-builders/jest": "17.0.2",
-    "@angular-devkit/build-angular": "17.3.3",
-    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "17.3.3",
-    "@angular/compiler-cli": "17.3.3",
+    "@angular-builders/jest": "18.0.0",
+    "@angular-devkit/build-angular": "18.2.12",
+    "@angular-eslint/builder": "18.4.3",
+    "@angular-eslint/eslint-plugin": "18.4.3",
+    "@angular-eslint/eslint-plugin-template": "18.4.3",
+    "@angular-eslint/schematics": "18.4.3",
+    "@angular-eslint/template-parser": "18.4.3",
+    "@angular/build": "18.2.12",
+    "@angular/cli": "18.2.12",
+    "@angular/compiler-cli": "18.2.13",
     "@chromatic-com/storybook": "1.2.26",
-    "@storybook/addon-essentials": "8.0.5",
-    "@storybook/addon-interactions": "8.0.5",
-    "@storybook/addon-links": "8.0.5",
-    "@storybook/angular": "8.0.5",
-    "@storybook/blocks": "8.0.5",
-    "@storybook/test": "8.0.5",
-    "@types/jest": "29.5.12",
+    "@storybook/addon-essentials": "8.5.0",
+    "@storybook/addon-interactions": "8.5.0",
+    "@storybook/addon-links": "8.5.0",
+    "@storybook/angular": "8.5.0",
+    "@storybook/blocks": "8.5.0",
+    "@storybook/test": "8.5.0",
+    "@types/jest": "29.5.14",
     "@types/js-yaml": "4.0.9",
+    "@types/lodash": "4",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "eslint": "8.57.0",
@@ -92,17 +95,17 @@
     "eslint-plugin-storybook": "0.8.0",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "jest-preset-angular": "14.0.3",
+    "jest-preset-angular": "14.5.0",
     "license-check-and-add": "4.0.5",
     "prettier": "3.2.5",
     "prettier-eslint": "16.3.0",
-    "storybook": "8.0.5",
+    "storybook": "8.5.0",
     "stylelint": "16.2.1",
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.0.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.3.3"
+    "typescript": "5.5.4"
   },
   "packageManager": "[email protected]"
 }

gravitee-apim-portal-webui-next/setup-jest.ts

@@ -1,10 +1,17 @@
-import 'jest-preset-angular/setup-jest';
 import '@angular/localize/init';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
 
 // mocking swagger-ui for tests as it contains some JS incompatible with Jest
 // This means we will not be able to test Swagger in our components tests
 jest.mock('swagger-ui', () => jest.fn(() => ({ initOAuth: () => jest.fn() })));
 
 // Set the mock date globally for all tests
 const MOCK_DATE = new Date(1466424490000); // UTC Time: Mon Jun 20 2016 12:08:10.000
-jest.useFakeTimers({ advanceTimers: true }).setSystemTime(MOCK_DATE);
+
+// Need to define advanceTimers for async calls
+jest.useFakeTimers({ advanceTimers: 1, now: MOCK_DATE }); // advance 1ms every 10ms
+
+// Mock Date.now() so that it always returns the same date
+Date.now = jest.fn(() => MOCK_DATE.getTime());

gravitee-apim-portal-webui-next/src/app/applications/application/application-tab-logs/application-log-table/application-log-table.component.spec.ts

@@ -1139,7 +1139,7 @@ describe('ApplicationLogTableComponent', () => {
   });
 
   function expectGetApplicationLogs(logsResponse: LogsResponse, page: number = 1, query?: string, to?: number, from?: number) {
-    const toInMilliseconds = to ?? new Date().getTime();
+    const toInMilliseconds = to ?? Date.now();
     const fromInMilliseconds = from ?? toInMilliseconds - 86400000;
     httpTestingController
       .expectOne(

gravitee-apim-portal-webui-next/src/components/search-bar/search-bar.component.ts

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, effect, input, OnInit, output } from '@angular/core';
+import { Component, DestroyRef, effect, inject, input, OnInit, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -33,14 +34,16 @@ export class SearchBarComponent implements OnInit {
   searchTerm = output<string>();
   searchControl: FormControl<string> = new FormControl<string>(``, { nonNullable: true });
 
+  private destroyRef = inject(DestroyRef);
+
   constructor() {
     effect(() => {
       this.searchControl.setValue(this.searchParam());
     });
   }
 
   ngOnInit() {
-    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe(term => {
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(term => {
       this.searchTerm.emit(term);
     });
   }

gravitee-apim-portal-webui-next/src/scss/theme/m3-theme.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 /*
  * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
  *
@@ -120,7 +122,7 @@ NOTE: This file is to be deleted once material 3 has an easier way to create pal
 
 @function generate-m3-light-theme() {
   $config: -config();
-  @return matx.define-theme(
+  @return mat.define-theme(
     (
       color: (
         theme-type: light,
@@ -136,7 +138,7 @@ NOTE: This file is to be deleted once material 3 has an easier way to create pal
 
 @function generate-m3-dark-theme() {
   $config: -config();
-  @return matx.define-theme(
+  @return mat.define-theme(
     (
       color: (
         theme-type: dark,

gravitee-apim-portal-webui-next/src/services/application-log.service.ts

@@ -70,12 +70,12 @@ export class ApplicationLogService {
     paramsList.push(`page=${params.page ?? 1}`);
     paramsList.push(`size=${params.size ?? 10}`);
 
-    const currentDate = new Date();
+    const currentDate = Date.now();
     const yesterdayDate = new Date();
     yesterdayDate.setDate(yesterdayDate.getDate() - 1);
 
     paramsList.push(`from=${params.from ?? yesterdayDate.getTime()}`);
-    paramsList.push(`to=${params.to ?? currentDate.getTime()}`);
+    paramsList.push(`to=${params.to ?? currentDate}`);
     paramsList.push(`order=${params.order ?? 'DESC'}`);
 
     paramsList.push(`field=${params.field ?? '@timestamp'}`);

gravitee-apim-portal-webui-next/src/stories/theme/theme.stories.ts

@@ -21,7 +21,7 @@ import { Args, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { of } from 'rxjs/internal/observable/of';
 import { BreadcrumbService } from 'xng-breadcrumb';
 
-import { computeAndInjectThemeForStory, CUSTOMIZATION_ARGS } from './theme.util';
+import { computeAndInjectThemeForStory } from './theme.util';
 import { ApiDetailsComponent } from '../../app/api/api-details/api-details.component';
 import { ApiCardComponent } from '../../components/api-card/api-card.component';
 import { BannerComponent } from '../../components/banner/banner.component';
@@ -67,7 +67,29 @@ export default {
 } as Meta;
 
 export const Default: StoryObj = {
-  argTypes: CUSTOMIZATION_ARGS,
+  argTypes: {
+    primary: {
+      control: { type: 'color' },
+    },
+    secondary: {
+      control: { type: 'color' },
+    },
+    tertiary: {
+      control: { type: 'color' },
+    },
+    error: {
+      control: { type: 'color' },
+    },
+    background: {
+      control: { type: 'color' },
+    },
+    bannerBackground: {
+      control: { type: 'color' },
+    },
+    bannerText: {
+      control: { type: 'color' },
+    },
+  },
   render: (args: Args) => {
     computeAndInjectThemeForStory(args);
     return {

gravitee-apim-portal-webui-next/src/stories/theme/theme.util.ts

@@ -17,30 +17,6 @@ import { Args } from '@storybook/angular';
 
 import { addPropertyToDocument, addHslToDocument } from '../../services/theme.service';
 
-const CUSTOMIZATION_ARGS = {
-  primary: {
-    control: 'color',
-  },
-  secondary: {
-    control: 'color',
-  },
-  tertiary: {
-    control: 'color',
-  },
-  error: {
-    control: 'color',
-  },
-  background: {
-    control: 'color',
-  },
-  bannerBackground: {
-    control: 'color',
-  },
-  bannerText: {
-    control: 'color',
-  },
-};
-
 export interface CustomizationConfig {
   primary?: string;
   secondary?: string;
@@ -75,10 +51,10 @@ const computeAndInjectThemeForStory = (args: Args): void => {
 };
 
 const computePalette = (config: CustomizationConfig) => {
-  addHslToDocument(CSS_VAR.primary, '#613CB0', config.primary);
-  addHslToDocument(CSS_VAR.secondary, '#958BA9', config.secondary);
-  addHslToDocument(CSS_VAR.tertiary, '#B7818F', config.tertiary);
-  addHslToDocument(CSS_VAR.error, '#EC6152', config.error);
+  addHslToDocument(CSS_VAR.primary, config.primary ?? '#613CB0');
+  addHslToDocument(CSS_VAR.secondary, config.secondary ?? '#958BA9');
+  addHslToDocument(CSS_VAR.tertiary, config.tertiary ?? '#B7818F');
+  addHslToDocument(CSS_VAR.error, config.error ?? '#EC6152');
 };
 
 const computeStyles = (theme: CustomizationConfig): void => {
@@ -94,4 +70,4 @@ const resetTheme = (): void => {
   computePalette({});
 };
 
-export { computeAndInjectThemeForStory, resetTheme, CUSTOMIZATION_ARGS };
+export { computeAndInjectThemeForStory, resetTheme };

gravitee-apim-portal-webui-next/src/styles.scss

@@ -24,7 +24,7 @@
 @use './scss/theme';
 
 @include mat.core();
-@include matx.color-variants-back-compat(theme.$light-theme);
+@include mat.color-variants-backwards-compatibility(theme.$light-theme);
 
 html {
   @include mat.all-component-themes(theme.$light-theme);