ovh · tibs245 · Nov 21, 2025 · Nov 22, 2025
@@ -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",

@@ -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}

@@ -94,9 +94,14 @@ 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', async () => {
+  const actual = await vi.importActual('@ovh-ux/backup-agent');
+
+  return {
+    ...actual,
+    useBaremetalsList: useBaremetalsListMock,
+  };
+});
 
 vi.mock('@/hooks/onboarding/useOnboardingData', () => ({
   useOnboardingContent: () => ({
@@ -168,9 +173,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'), {

@@ -1,79 +1,46 @@
-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, RhfField, useBaremetalsList } from '@ovh-ux/backup-agent';
 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>
   );

@@ -2,14 +2,15 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
+import { useBaremetalsList } from '@ovh-ux/backup-agent';
 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}

@@ -7,13 +7,17 @@ import { BAREMETAL_MOCK } from '@/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,7 +34,7 @@ const { useBaremetalsListMock } = vi.hoisted(() => ({
     .mockReturnValue({ data: undefined, isLoading: true, isError: false }),
 }));
 
-vi.mock('@/data/hooks/baremetal/useBaremetalsList', () => ({
+vi.mock('@ovh-ux/backup-agent', () => ({
   useBaremetalsList: useBaremetalsListMock,
 }));
 

@@ -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;
@@ -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'),

@@ -18,10 +18,6 @@
     "test": "manager-test run",
     "test:coverage": "manager-test run --coverage"
   },
-  "dependencies": {
-    "@tanstack/react-virtual": "^3.10.9",
-    "date-fns": "^3.6.0"
-  },
   "devDependencies": {
     "@ovh-ux/manager-billing-informations": "*",
     "@ovh-ux/manager-common-translations": "*",
@@ -33,16 +29,16 @@
     "@ovh-ux/manager-vite-config": "0.15.0",
     "@ovhcloud/ods-components": "^18.6.2",
     "@ovhcloud/ods-themes": "^18.6.2",
-    "@tanstack/react-query": "5.61.5",
-    "@tanstack/react-virtual": "^3.10.9",
+    "@types/lodash.capitalize": "^4.2.1",
+    "lodash.capitalize": "^4.2.1",
     "msw": "2.1.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
-    "react-router-dom": "^6.3.0",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.4",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.4.5",
+    "zod": "3.22.4"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@ovh-ux/manager-billing-informations": "*",
     "@ovh-ux/manager-common-translations": "*",
     "@ovh-ux/manager-config": "^8.0.2",
@@ -59,8 +55,10 @@
     "date-fns": "^3.6.0",
     "element-internals-polyfill": "^1.3.11",
     "i18next": "^23.8.2",
+    "lodash.capitalize": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "7.66.1",
     "react-i18next": "^14.0.5",
     "react-router-dom": "^6.3.0"
   }

@@ -0,0 +1,10 @@
+{
+  "add_configuration": "Ajouter une configuration",
+  "link_agent_to_a_server": "Lier un agent à un serveur existant",
+  "add_server": "Ajouter un serveur",
+  "select_server": "Sélectionner le serveur",
+  "product_name": "Nom du produit",
+  "select_os": "Sélectionner un système d'exploitation",
+  "os": "Système d'exploitation",
+  "download_agent": "Télécharger l'agent"
+}
@@ -9,4 +9,5 @@ export const BACKUP_AGENT_NAMESPACES = {
   VAULT_DELETE: `${VAULTS_NAMESPACE_PREFIX}/delete`,
   SERVICE_DASHBOARD: `${SERVICES_NAMESPACE_PREFIX}/dashboard`,
   SERVICE_LISTING: `${SERVICES_NAMESPACE_PREFIX}/listing`,
+  AGENT: `${SERVICES_NAMESPACE_PREFIX}/agent`,
 };
@@ -0,0 +1,28 @@
+import { OdsText } from '@ovhcloud/ods-components/react';
+
+import { RhfField } from '@/components/Fields';
+import { Baremetal } from '@/types';
+
+type BaremetalOptionProps = Pick<Baremetal, 'name' | 'ip'> & Pick<Baremetal['iam'], 'displayName'>;
+
+const BaremetalOption = (baremetalService: BaremetalOptionProps) => {
+  return (
+    <RhfField.ComboboxItem
+      key={baremetalService.name}
+      value={baremetalService.name}
+      selectionLabel={`${baremetalService.name} - ${baremetalService.ip}`}
+    >
+      <div className="flex flex-col py-3">
+        <OdsText preset="span">{baremetalService.displayName}</OdsText>
+        <OdsText
+          preset="caption"
+          className="[&::part(text)]:text-[var(--ods-color-neutral-400)] -mt-3"
+        >
+          {baremetalService.ip}
+        </OdsText>
+      </div>
+    </RhfField.ComboboxItem>
+  );
+};
+
+export default BaremetalOption;
@@ -0,0 +1,3 @@
+import BaremetalOption from './BaremetalOption.component';
+
+export { BaremetalOption };
@@ -0,0 +1 @@
+export * from './BaremetalOption';
@@ -0,0 +1,29 @@
+import React, { ComponentProps } from 'react';
+
+import { OdsCombobox } from '@ovhcloud/ods-components/react';
+
+import { useRhfFieldContext } from './RhfField.context';
+
+export function RhfCombobox(
+  props: Readonly<Omit<ComponentProps<typeof OdsCombobox>, 'id' | 'name'>>,
+) {
+  const {
+    id,
+    controller: {
+      field,
+      fieldState: { error },
+    },
+  } = useRhfFieldContext();
+
+  return (
+    <OdsCombobox
+      id={id}
+      {...props}
+      {...field}
+      aria-describedby={`helper-${id}`}
+      hasError={!!error}
+      onOdsBlur={field.onBlur}
+      onOdsChange={field.onChange}
+    />
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import BaremetalOption from './BaremetalOption.component';

		export { BaremetalOption };