merge: develop to master

Signed-off-by: Anoop N <[email protected]>

.nvmrc

@@ -1 +1 @@
-lts/*
+lts/hydrogen

packages/components/ng-tail-logs/src/service.js

@@ -12,6 +12,8 @@ export default /* @ngInject */ ($q, $timeout, $http) =>
       this.delay = opts.delay || 5000;
 
       this.source = this.getFuncSource();
+      this.shouldStop = false;
+      this.timer = null;
     }
 
     getFuncSource() {
@@ -35,6 +37,9 @@ export default /* @ngInject */ ($q, $timeout, $http) =>
           return undefined;
         })
         .finally(() => {
+          if (this.shouldStop) {
+            return this.logs;
+          }
           this.timer = $timeout(() => {
             this.log();
           }, this.delay);
@@ -45,6 +50,8 @@ export default /* @ngInject */ ($q, $timeout, $http) =>
     stop() {
       if (this.timer) {
         $timeout.cancel(this.timer);
+        this.timer = null;
+        this.shouldStop = true;
       }
       return $q.when(this);
     }

packages/manager-react-components/package.json

@@ -14,10 +14,9 @@
     "dev": "tsc",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
     "start": "storybook dev -p 6006",
-    "test": "jest --coverage -u",
+    "test": "vitest",
     "test:cov": "vitest run --coverage",
-    "test:e2e": "tsc && npx playwright test --ui --debug",
-    "test:watch": "jest --watch"
+    "test:watch": "vitest"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx,json,css,md}": [
@@ -112,7 +111,6 @@
     "i18next": "^23.8.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^11.18.1",
     "react-router-dom": "^6.3.0",
     "zustand": "^4.5.0"
   }

packages/manager-react-components/src/components/ManagerButton/ManagerButton.spec.tsx

@@ -1,11 +1,13 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { fireEvent, screen } from '@testing-library/react';
 import { ManagerButton, ManagerButtonProps } from './ManagerButton';
 import { render } from '../../utils/test.provider';
 import fr_FR from './translations/Messages_fr_FR.json';
 import { useAuthorizationIam } from '../../hooks/iam';
 import { IamAuthorizationResponse } from '../../hooks/iam/iam.interface';
 
-jest.mock('../../hooks/iam');
+vitest.mock('../../hooks/iam');
 
 const renderComponent = (props: ManagerButtonProps) => {
   return render(<ManagerButton {...props} />);
@@ -16,7 +18,7 @@ const mockedHook =
 
 describe('ManagerButton tests', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vitest.resetAllMocks();
   });
 
   describe('should display manager button', () => {

packages/manager-react-components/src/components/ManagerText/ManagerText.spec.tsx

@@ -1,11 +1,13 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { screen } from '@testing-library/react';
 import { ManagerText, ManagerTextProps } from './ManagerText';
 import { render } from '../../utils/test.provider';
 import fr_FR from './translations/Messages_fr_FR.json';
 import { useAuthorizationIam } from '../../hooks/iam';
 import { IamAuthorizationResponse } from '../../hooks/iam/iam.interface';
 
-jest.mock('../../hooks/iam');
+vitest.mock('../../hooks/iam');
 
 const renderComponent = (props: ManagerTextProps) => {
   return render(<ManagerText {...props} />);
@@ -15,7 +17,7 @@ const mockedHook =
 
 describe('ManagerText tests', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vitest.resetAllMocks();
   });
 
   describe('should display manager text', () => {

packages/manager-react-components/src/components/action-banner/action-banner.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { fireEvent, screen, render, act } from '@testing-library/react';
 import { ActionBanner, ActionBannerProps } from './action-banner.component';
 
@@ -16,7 +18,7 @@ describe('ActionBanner tests', () => {
   });
 
   it('should have a working call to action button', () => {
-    const mockOnClick = jest.fn();
+    const mockOnClick = vitest.fn();
 
     renderComponent({
       message: 'hello world',

packages/manager-react-components/src/components/clipboard/clipboard.spec.tsx

@@ -1,3 +1,5 @@
+import { vitest } from 'vitest';
+import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../utils/test.provider';
 import { Clipboard } from './clipboard.component';
@@ -33,7 +35,7 @@ describe('Clipboard', () => {
     const { getByTestId } = await setupSpecTest();
     const clipboard = getByTestId('clipboard');
 
-    const clickHandler = jest.spyOn(clipboard, 'click');
+    const clickHandler = vitest.spyOn(clipboard, 'click');
     clipboard.click = () => {
       throw new Error('Mock error on click');
     };

packages/manager-react-components/src/components/container/step/step.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, Story } from '@storybook/react';
 
 import StepComponent from './Step.component';

packages/manager-react-components/src/components/container/tabs/tabs.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, Story } from '@storybook/react';
 
 import TabsComponent from './Tabs.component';

packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.spec.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { waitFor, screen } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import { DashboardTile } from './dashboard-tile.component';
-import '@testing-library/jest-dom';
 
 const testItem = {
   id: 'id',

packages/manager-react-components/src/components/content/headers/headers.spec.tsx

@@ -1,3 +1,4 @@
+import { vitest } from 'vitest';
 import { waitFor, screen } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import {
@@ -9,7 +10,7 @@ import {
 import { IamAuthorizationResponse } from '../../../hooks/iam/iam.interface';
 import { useAuthorizationIam } from '../../../hooks/iam';
 
-jest.mock('../../../hooks/iam');
+vitest.mock('../../../hooks/iam');
 
 const mockedHook =
   useAuthorizationIam as unknown as jest.Mock<IamAuthorizationResponse>;
@@ -25,23 +26,23 @@ describe('Headers component', () => {
 
   it('renders header correctly', async () => {
     render(header());
-    waitFor(() => {
+    await waitFor(() => {
       expect(screen.getByText('Example for header')).toBeInTheDocument();
       expect(screen.getByText('description for header')).toBeInTheDocument();
     });
   });
 
   it('renders subHeader correctly', async () => {
     render(subHeader());
-    waitFor(() => {
+    await waitFor(() => {
       expect(screen.getByText('Example for subHeader')).toBeInTheDocument();
       expect(screen.getByText('description for subheader')).toBeInTheDocument();
     });
   });
 
   it('renders header with guides correctly', async () => {
     render(headerWithGuides());
-    waitFor(() => {
+    await waitFor(() => {
       expect(
         screen.getByText('Example for header with guides'),
       ).toBeInTheDocument();
@@ -51,7 +52,7 @@ describe('Headers component', () => {
 
   it('renders header with actions correctly', async () => {
     render(headerWithActions());
-    waitFor(() => {
+    await waitFor(() => {
       expect(
         screen.getByText('Example for header with actions'),
       ).toBeInTheDocument();

packages/manager-react-components/src/components/content/price/price.spec.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { screen } from '@testing-library/react';
 import Price from './price.component';
 import { render } from '../../../utils/test.provider';
 import { IntervalUnitType, OvhSubsidiary } from '../../../enumTypes';
 
 describe('Price component', () => {
-  const renderPriceComponent = (props) => {
+  const renderPriceComponent = (props: React.ComponentProps<typeof Price>) => {
     render(<Price {...props} />);
   };
 
@@ -23,6 +24,7 @@ describe('Price component', () => {
       ...baseProps,
       value: 0,
       intervalUnit: IntervalUnitType.none,
+      locale: localeFr,
     };
     renderPriceComponent(props);
     const priceElement = screen.getByText('Inclus');

packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx

@@ -73,7 +73,7 @@ const DatagridStory = ({
   );
 };
 
-export const Empty = {
+export const Empty: any = {
   args: {
     items: [],
   },

packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { vitest } from 'vitest';
+import React, { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import {
   ColumnSort,
@@ -8,16 +9,21 @@ import {
 } from './datagrid.component';
 import DataGridTextCell from './text-cell.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => {
-    return {
-      t: (str: string) => str,
-      i18n: {
-        changeLanguage: () => new Promise(() => {}),
-      },
-    };
-  },
-}));
+vitest.mock('react-i18next', async () => {
+  const originalModule = await vitest.importActual('react-i18next');
+
+  return {
+    ...originalModule,
+    useTranslation: () => {
+      return {
+        t: (str: string) => str,
+        i18n: {
+          changeLanguage: () => new Promise(() => {}),
+        },
+      };
+    },
+  };
+});
 
 const sampleColumns = [
   {
@@ -69,6 +75,15 @@ const DatagridTest = ({
 };
 
 describe('Paginated datagrid component', () => {
+  beforeAll(() => {
+    // Mock attachInternals method for all instances of custom elements
+    (HTMLElement.prototype.attachInternals as unknown) = vitest.fn(() => ({
+      // Mock the properties or methods used from internals
+      setValidity: vitest.fn(),
+      states: new Set(),
+    }));
+  });
+
   it('should display the correct number of columns', async () => {
     const { container } = render(
       <DatagridTest
@@ -97,7 +112,7 @@ describe('Paginated datagrid component', () => {
   });
 
   it('should call sort function when clicking columns header', async () => {
-    const handleSortChange = jest.fn();
+    const handleSortChange = vitest.fn();
     const SortTest = () => {
       const [sorting, setSorting] = useState({ id: 'a', desc: true });
       return (

packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx

@@ -50,15 +50,11 @@ const DatagridStory = ({
   isSortable: boolean;
 }) => {
   const [searchParams] = useSearchParams();
-  const {
-    pagination,
-    setPagination,
-    sorting,
-    setSorting,
-  } = useDatagridSearchParams({
-    id: 'validityTo',
-    desc: false,
-  });
+  const { pagination, setPagination, sorting, setSorting } =
+    useDatagridSearchParams({
+      id: 'validityTo',
+      desc: false,
+    });
   const start = isPaginated ? pagination.pageIndex * pagination.pageSize : 0;
   const end = isPaginated ? start + pagination.pageSize : items.length;
   const paginationAttrs = isPaginated && {
@@ -88,7 +84,7 @@ const DatagridStory = ({
   );
 };
 
-export const Empty = {
+export const Empty: any = {
   args: {
     items: [],
   },

packages/manager-react-components/src/components/filters/filter-add.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { FilterAdd, FilterAddProps } from './filter-add.component';
 import { render } from '../../utils/test.provider';
 
@@ -7,7 +9,7 @@ const renderComponent = (props: FilterAddProps) => {
 
 describe('FilterAdd tests', () => {
   it('should deactivate the add filter button when value est undefined', () => {
-    const mockOnAddFilter = jest.fn();
+    const mockOnAddFilter = vitest.fn();
     const props = {
       columns: [
         {
@@ -33,7 +35,7 @@ describe('FilterAdd tests', () => {
   });
 
   it('should set the id of first columns items as value of the id select', () => {
-    const mockOnAddFilter = jest.fn();
+    const mockOnAddFilter = vitest.fn();
     const props = {
       columns: [
         {