feat(backup-agent): move baremetal logics in backup-agent module

packages/manager/apps/bmc-backup-agent-baremetal/package.json

@@ -19,11 +19,14 @@
     "test:coverage": "manager-test run --coverage"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@ovh-ux/backup-agent": "*",
+    "@ovh-ux/manager-billing-informations": "*",
     "@ovh-ux/manager-common-translations": "*",
     "@ovh-ux/manager-config": "*",
     "@ovh-ux/manager-core-api": "*",
     "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-module-common-api": "*",
     "@ovh-ux/manager-react-components": "2.42.4",
     "@ovh-ux/manager-react-core-application": "*",
     "@ovh-ux/manager-react-shell-client": "*",
@@ -32,26 +35,30 @@
     "@ovhcloud/ods-components": "~18.6.2",
     "@ovhcloud/ods-themes": "~18.6.2",
     "@tanstack/react-query": "5.51.21",
+    "@tanstack/react-virtual": "^3.10.9",
     "axios": "^1.1.2",
     "element-internals-polyfill": "^3.0.0",
     "i18next": "23.8.2",
     "i18next-http-backend": "2.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.66.1",
     "react-i18next": "14.1.0",
     "react-router-dom": "6.16.0",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.4",
+    "zod": "4.1.12"
   },
   "devDependencies": {
+    "@ovh-ux/manager-core-test-utils": "0.10.0",
     "@ovh-ux/manager-static-analysis-kit": "0.13.0",
     "@ovh-ux/manager-tailwind-config": "*",
     "@ovh-ux/manager-tests-setup": "0.6.0",
     "@ovh-ux/manager-vite-config": "0.15.0",
     "@tanstack/react-query-devtools": "5.51.21",
-    "react-hook-form": "~7.66.0",
     "typescript": "5.4.5",
     "vite": "6.3.4",
-    "vite-plugin-static-copy": "^3.1.4"
+    "vite-plugin-static-copy": "^3.1.4",
+    "vitest": "3.2.4"
   },
   "regions": [
     "CA",

packages/manager/apps/bmc-backup-agent-baremetal/src/components/onboarding/onboardingLayout/OnboardingLayout.component.tsx

@@ -46,12 +46,7 @@ const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
   }
   return (
     <div className="flex sm:pt-8 xs:pt-2.5 flex-row items-center space-x-4 justify-center">
-      <Link
-        id={tooltipId}
-        to={!isOrderDisabled && !isOrderLoading ? orderHref : ''}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <Link id={tooltipId} to={!isOrderDisabled && !isOrderLoading ? orderHref : ''}>
         <OdsButton
           size={ODS_BUTTON_SIZE.md}
           onClick={onOrderButtonClick}

packages/manager/apps/bmc-backup-agent-baremetal/src/pages/first-order/_components/__tests__/FirstOrderForm.spec.tsx

@@ -5,10 +5,9 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 
+import { BAREMETAL_MOCK } from '@ovh-ux/backup-agent/mocks/baremetals/baremetals.mocks';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
-import { BAREMETAL_MOCK } from '@/mocks/baremetals/baremetals.mocks';
-
 import { FirstOrderFormComponent } from '../first-order-form/FirstOrderForm.component';
 
 vi.mock('react-router-dom', async () => {
@@ -94,9 +93,11 @@ const { useBaremetalsListMock } = vi.hoisted(() => ({
     .mockReturnValue({ flattenData: undefined, isLoading: true, isError: false }),
 }));
 
-vi.mock('@/data/hooks/baremetal/useBaremetalsList', () => ({
-  useBaremetalsList: useBaremetalsListMock,
-}));
+vi.mock('@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList', () => {
+  return {
+    useBaremetalsList: useBaremetalsListMock,
+  };
+});
 
 vi.mock('@/hooks/onboarding/useOnboardingData', () => ({
   useOnboardingContent: () => ({
@@ -168,9 +169,7 @@ describe('FirstOrderFormComponent', () => {
     );
 
     await waitFor(() =>
-      expect(
-        screen.getByText(`translated_${NAMESPACES.FORM}:error_required_field`),
-      ).toBeInTheDocument(),
+      expect(screen.getByText(`translated_${NAMESPACES.FORM}:required_field`)).toBeInTheDocument(),
     );
 
     await waitFor(() => expect(getSelectBaremetal()).toHaveAttribute('data-disabled', 'false'), {

packages/manager/apps/bmc-backup-agent-baremetal/src/pages/first-order/_components/first-order-form/FirstOrderForm.component.tsx

@@ -1,79 +1,48 @@
-import { Controller, SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import {
-  OdsButton,
-  OdsCombobox,
-  OdsComboboxItem,
-  OdsFormField,
-  OdsText,
-} from '@ovhcloud/ods-components/react';
+import { OdsButton } from '@ovhcloud/ods-components/react';
 
+import { BaremetalOption } from '@ovh-ux/backup-agent/components/CommonFields/BaremetalOption/BaremetalOption.component';
+import { RhfField } from '@ovh-ux/backup-agent/components/Fields/RhfField/RhfField.component';
+import { useBaremetalsList } from '@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
-import { useBaremetalsList } from '@/data/hooks/baremetal/useBaremetalsList';
-
 type Inputs = {
   baremetal: string;
 };
 
 export const FirstOrderFormComponent = () => {
-  const { t } = useTranslation([NAMESPACES.ACTIONS, NAMESPACES.FORM]);
+  const { t } = useTranslation(['onboarding', NAMESPACES.ACTIONS, NAMESPACES.FORM]);
   const { flattenData, isLoading } = useBaremetalsList();
 
   const {
     control,
     handleSubmit,
+    register,
     formState: { errors },
   } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = (dataForm) => console.log({ dataForm });
 
   return (
     <form
       className={`flex justify-center ${!!errors.baremetal ? 'items-center' : 'items-end'} gap-4 w-full`}
+      noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
-      <Controller
-        name="baremetal"
+      <RhfField
         control={control}
-        rules={{ required: t(`${NAMESPACES.FORM}:error_required_field`) }}
-        render={({ field }) => (
-          <OdsFormField className="w-full max-w-xl" error={errors.baremetal?.message}>
-            <label htmlFor="baremetal-field" slot="label">
-              {t('select_baremetal')}
-            </label>
-            <OdsCombobox
-              id="baremetal-field"
-              ref={field.ref}
-              name={field.name}
-              value={field.value}
-              onOdsChange={field.onChange}
-              onOdsBlur={field.onBlur}
-              placeholder={t('select_baremetal')}
-              isDisabled={isLoading}
-              isRequired={!!errors.baremetal}
-            >
-              {flattenData?.map((baremetalService) => (
-                <OdsComboboxItem
-                  key={baremetalService.name}
-                  value={baremetalService.name}
-                  selectionLabel={`${baremetalService.name} - ${baremetalService.ip}`}
-                >
-                  <div className="flex flex-col py-3">
-                    <OdsText preset="span">{baremetalService.iam.displayName}</OdsText>
-                    <OdsText
-                      preset="caption"
-                      className="[&::part(text)]:text-[var(--ods-color-neutral-400)] -mt-3"
-                    >
-                      {baremetalService.ip}
-                    </OdsText>
-                  </div>
-                </OdsComboboxItem>
-              ))}
-            </OdsCombobox>
-          </OdsFormField>
-        )}
-      />
+        controllerParams={register('baremetal', { required: true })}
+        helperMessage={t(`${NAMESPACES.FORM}:required_field`)}
+        className="w-full max-w-xl"
+      >
+        <RhfField.Label>{t('select_baremetal')}</RhfField.Label>
+        <RhfField.Combobox placeholder={t('select_baremetal')} isDisabled={isLoading}>
+          {flattenData?.map(({ name, ip, iam: { displayName } }) => (
+            <BaremetalOption key={name} name={name} ip={ip} displayName={displayName} />
+          ))}
+        </RhfField.Combobox>
+      </RhfField>
       <OdsButton type="submit" label={t(`${NAMESPACES.ACTIONS}:start`)} isDisabled={isLoading} />
     </form>
   );

packages/manager/apps/bmc-backup-agent-baremetal/src/pages/onboarding/Onboarding.page.tsx

@@ -2,14 +2,15 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
+import { useBaremetalsList } from '@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { Card } from '@ovh-ux/manager-react-components';
 
 import { OnboardingDescription } from '@/components/onboarding/onboardingDescription/OnboardingDescription.component';
 import { OnboardingLayout } from '@/components/onboarding/onboardingLayout/OnboardingLayout.component';
-import { useBaremetalsList } from '@/data/hooks/baremetal/useBaremetalsList';
 import { useGuideLinks, useOnboardingContent } from '@/hooks/onboarding/useOnboardingData';
 import { useOnboardingHeroImage } from '@/hooks/onboarding/useOnboardingHeroImage';
+import { urls } from '@/routes/Routes.constants';
 import { OnboardingLinksType } from '@/types/Onboarding.type';
 
 export default function OnboardingPage() {
@@ -37,7 +38,7 @@ export default function OnboardingPage() {
       moreInfoButtonLabel={t(`${NAMESPACES.ONBOARDING}:more_infos`)}
       onMoreInfoButtonClick={() => {}}
       isOrderLoading={isLoading}
-      orderHref=""
+      orderHref={urls.firstOrder}
       moreInfoHref="/#/"
       isOrderDisabled={!flattenData?.length}
       tooltipContent={!flattenData?.length ? t('no_baremetal_available') : undefined}

packages/manager/apps/bmc-backup-agent-baremetal/src/pages/onboarding/Onboarding.spec.tsx

@@ -3,17 +3,21 @@ import { ReactNode } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 
-import { BAREMETAL_MOCK } from '@/mocks/baremetals/baremetals.mocks';
+import { BAREMETAL_MOCK } from '@ovh-ux/backup-agent/mocks/baremetals/baremetals.mocks';
 
 import OnboardingPage from './Onboarding.page';
 
-vi.mock('react-router-dom', () => ({
-  Link: ({ to, children, ...props }: { to: string; children: React.ReactNode }) => (
-    <a href={to} {...props}>
-      {children}
-    </a>
-  ),
-}));
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    Link: ({ to, children, ...props }: { to: string; children: React.ReactNode }) => (
+      <a href={to} {...props}>
+        {children}
+      </a>
+    ),
+  };
+});
 
 // --- Mock translation ---
 vi.mock('react-i18next', () => ({
@@ -30,9 +34,11 @@ const { useBaremetalsListMock } = vi.hoisted(() => ({
     .mockReturnValue({ data: undefined, isLoading: true, isError: false }),
 }));
 
-vi.mock('@/data/hooks/baremetal/useBaremetalsList', () => ({
-  useBaremetalsList: useBaremetalsListMock,
-}));
+vi.mock('@ovh-ux/backup-agent/data/hooks/baremetal/useBaremetalsList', () => {
+  return {
+    useBaremetalsList: useBaremetalsListMock,
+  };
+});
 
 // --- Mock manager-react-components ---
 interface OnboardingLayoutProps {

packages/manager/apps/bmc-backup-agent-baremetal/src/routes/Routes.constants.ts

@@ -10,6 +10,7 @@ export const subRoutes = Object.freeze({
 export const urls = Object.freeze({
   root: ROOT_URL,
   onboarding: `${ROOT_URL}${subRoutes.onboarding}`,
+  firstOrder: `${ROOT_URL}${subRoutes.firstOrder}`,
 });
 
 export const redirectionApp = appName;

packages/manager/apps/bmc-backup-agent-baremetal/src/utils/tests/setupMsw.ts

@@ -1,9 +1,11 @@
 import { SetupServer } from 'msw/node';
 
+import {
+  TBaremetalsMockParams,
+  getBaremetalsMocks,
+} from '@ovh-ux/backup-agent/mocks/baremetals/baremetals.handler';
 import { getAuthenticationMocks, toMswHandlers } from '@ovh-ux/manager-core-test-utils';
 
-import { TBaremetalsMockParams, getBaremetalsMocks } from '@/mocks/baremetals/baremetals.handler';
-
 export type MockParams = TBaremetalsMockParams;
 
 export const setupMswMock = (mockParams: MockParams = {}) => {

packages/manager/apps/bmc-backup-agent-baremetal/tailwind.config.mjs

@@ -13,7 +13,7 @@ const baseTailwindConfig = [
   ...(baseConfig.content ?? []),
   './src/**/*.{js,jsx,ts,tsx}',
   toGlob(reactComponentsDir),
-  toGlob(backupAgentModuleDir)
+  `${toGlob(backupAgentModuleDir)}src/`
 ];
 
 /** @type {import('tailwindcss').Config} */

packages/manager/apps/bmc-backup-agent-baremetal/vite.config.mjs

@@ -9,8 +9,15 @@ const baseConfig = getBaseConfig()
 const BACKUP_AGENT_PACKAGE = '@ovh-ux/backup-agent';
 
 export default defineConfig({
-  ...getBaseConfig(),
+  ...baseConfig,
   root: resolve(process.cwd()),
+  resolve: {
+    ...baseConfig.resolve,
+    dedupe: [
+      ...baseConfig.resolve.dedupe,
+      'react-hook-form'
+    ],
+  },
   plugins: [
     ...baseConfig.plugins,
     viteStaticCopy({

packages/manager/apps/bmc-backup-agent-baremetal/vitest.config.js

@@ -30,7 +30,7 @@ export default mergeConfig(
         ],
       },
     },
-    resolve: { dedupe: [...defaultDedupedDependencies],
+    resolve: { dedupe: [...defaultDedupedDependencies, 'react-hook-form'],
       alias: {
         // eslint-disable-next-line no-undef
         '@': path.resolve(__dirname, 'src'),