Merge pull request #1532 from swaroopar/feature/upgradeAntd5.24.1

dependencies: bump antd from 5.23.4 to 5.24.1 in the antd group

Author: iskey

package-lock.json

@@ -7,7 +7,7 @@
         "@ant-design/icons": "^5.6.1",
         "@axa-fr/react-oidc": "^7.25.3",
         "@tanstack/react-query": "^5.66.5",
-        "antd": "^5.23.4",
+        "antd": "^5.24.1",
         "echarts": "5.6.0",
         "echarts-for-react": "^3.0.2",
         "rc-field-form": "^2.6.0",
@@ -42,12 +42,12 @@
         ]
     },
     "devDependencies": {
+        "@ant-design/v5-patch-for-react-19": "^1.0.3",
         "@axa-fr/oidc-client": "^7.22.32",
         "@eslint/compat": "^1.2.6",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.20.0",
         "@hey-api/openapi-ts": "^0.64.4",
-        "playwright-core": "^1.50.1",
         "@playwright/test": "^1.50.1",
         "@tanstack/eslint-plugin-query": "^5.66.1",
         "@types/react": "^19.0.10",
@@ -67,13 +67,14 @@
         "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-require-explicit-generics": "^1.0.0",
         "knip": "^5.44.1",
+        "playwright-core": "^1.50.1",
         "prettier": "3.5.0",
         "prettier-plugin-organize-imports": "^4.1.0",
         "release-it": "^18.1.2",
         "typescript": "5.7.3",
+        "typescript-eslint": "^8.24.1",
         "uuid": "^11.0.5",
-        "vite": "^6.1.0",
-        "typescript-eslint": "^8.24.1"
+        "vite": "^6.1.0"
     },
     "overrides": {
         "zustand": {

package.json

@@ -10,7 +10,7 @@ import React from 'react';
 function WelcomeCard(): React.JSX.Element {
     return (
         <>
-            <Card title='Welcome to Xpanse' bordered={true}>
+            <Card title='Welcome to Xpanse' variant={'outlined'}>
                 <RocketOutlined />{' '}
                 <a href='https://eclipse.dev/xpanse' target='_blank' rel='noopener noreferrer'>
                     Getting started with Xpanse

src/components/content/home/WelcomeCard.tsx

@@ -20,7 +20,7 @@ export default function DashBoardError({
     if (isHandleKnownErrorResponse(error)) {
         const response: ErrorResponse = error.body;
         return (
-            <Card title='Services Dashboard' bordered={true}>
+            <Card title='Services Dashboard' variant={'outlined'}>
                 <Alert
                     message={response.errorType.valueOf()}
                     description={convertStringArrayToUnorderedList(response.details)}
@@ -43,7 +43,7 @@ export default function DashBoardError({
         );
     } else {
         return (
-            <Card title='Services Dashboard' bordered={true}>
+            <Card title='Services Dashboard' variant={'outlined'}>
                 <Alert
                     message='Fetching Service Details Failed'
                     description={error?.message}

src/components/content/home/common/DashBoardError.tsx

@@ -9,7 +9,7 @@ import dashboardStyles from '../../../../styles/dashboard.module.css';
 
 export function DashBoardSkeleton(): React.JSX.Element {
     return (
-        <Card title='Services Dashboard' bordered={true}>
+        <Card title='Services Dashboard' variant={'outlined'}>
             <Skeleton
                 avatar={false}
                 active={true}

src/components/content/home/common/DashBoardSkeleton.tsx

@@ -95,7 +95,7 @@ export function IsvServicesDashBoard(): React.JSX.Element {
 
     return (
         <>
-            <Card title='Services Dashboard' bordered={true}>
+            <Card title='Services Dashboard' variant={'outlined'}>
                 <Row gutter={16} justify='start'>
                     <Col span={12} className={dashboardStyles.dashboardContainerClass}>
                         <div

src/components/content/home/isv/IsvServicesDashBoard.tsx

@@ -70,7 +70,7 @@ export function EndUserServicesDashboard(): React.JSX.Element {
 
     return (
         <>
-            <Card title='Services Dashboard' bordered={true}>
+            <Card title='Services Dashboard' variant={'outlined'}>
                 <Row gutter={16} justify={'start'}>
                     <Col span={12} className={dashboardStyles.dashboardContainerClass}>
                         <div

src/components/content/home/user/EndUserServicesDashboard.tsx

@@ -3,6 +3,9 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
+// as recommended here - https://ant.design/docs/react/v5-for-19#compatibility-package
+// to be removed with antd v6
+import '@ant-design/v5-patch-for-react-19';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';

src/index.tsx

@@ -35,10 +35,11 @@ test('filtering by backend name works', async ({ page, baseURL }) => {
     await layoutHeader.switchUserRole('admin');
     const healthCheckMenu = new HealthCheckPage(page);
     await healthCheckMenu.clickHealthCheckMenuItem();
-    await page.getByRole('columnheader', { name: 'Name filter' }).getByRole('button').click();
+    await page.waitForTimeout(5000);
+    await page.getByLabel('Name').getByRole('button', { name: 'filter' }).click();
     await page.locator('css=div:nth-child(2) > .ant-tree-checkbox > .ant-tree-checkbox-inner').click();
     await page.getByRole('button', { name: 'OK', exact: true }).click();
-    await expect(page.getByRole('cell', { name: 'Terraform Boot' }).first()).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Terra Boot' }).first()).toBeVisible();
     await expect(page.getByRole('button', { name: 'check-circle OK' })).toBeVisible();
 });
 

tests/admin/healthcheck/health-check.spec.ts

@@ -21,8 +21,8 @@ export const mockHealthCheckSuccessResponse = async (page: Page, timeToWaitForRe
                         details: null,
                     },
                     {
-                        backendSystemType: 'Terraform Boot',
-                        name: 'Terraform Boot',
+                        backendSystemType: 'Terra Boot',
+                        name: 'Terra Boot',
                         healthStatus: 'OK',
                         endpoint: 'http://localhost:9090',
                         details: null,