feat(pci-private-network): Configure private network and subnet in same page

packages/manager/apps/pci-private-network/package.json

@@ -15,6 +15,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@ovh-ux/manager-config": "^7.5.2",
     "@ovh-ux/manager-core-api": "^0.8.2",
     "@ovh-ux/manager-pci-common": "^0.7.6",
@@ -39,6 +40,7 @@
     "react-i18next": "^14.0.5",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.5.0",
+    "zod": "^3.23.8",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

packages/manager/apps/pci-private-network/src/components/back-button/BackButton.component.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { useHref } from 'react-router-dom';
+
+type BackButtonProps = {
+  onClick?: () => void;
+};
+
+const BackButton: FC<BackButtonProps> = ({ onClick }) => {
+  const { t } = useTranslation('common');
+  const backHref = useHref('..');
+
+  return (
+    <OsdsLink
+      data-testid="back-btn"
+      color={ODS_THEME_COLOR_INTENT.primary}
+      className="mt-10"
+      href={backHref}
+      onClick={onClick}
+    >
+      <OsdsIcon
+        slot="start"
+        name={ODS_ICON_NAME.ARROW_LEFT}
+        size={ODS_ICON_SIZE.xs}
+        color={ODS_THEME_COLOR_INTENT.primary}
+      />
+      <span className="ml-4">
+        {t('common_back_button_back_to_previous_page')}
+      </span>
+    </OsdsLink>
+  );
+};
+
+export default BackButton;

packages/manager/apps/pci-private-network/src/pages/new/New.page.tsx

@@ -1,165 +1,84 @@
+import { useEffect } from 'react';
 import {
   Notifications,
   useNotifications,
   useProjectUrl,
+  Title,
 } from '@ovh-ux/manager-react-components';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
-  OsdsBreadcrumb,
-  OsdsIcon,
-  OsdsLink,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { Suspense, useEffect } from 'react';
-
-import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
-import { Translation, useTranslation } from 'react-i18next';
-import { useHref, useNavigate } from 'react-router-dom';
-import {
-  isDiscoveryProject,
-  PciDiscoveryBanner,
-  useProject,
-} from '@ovh-ux/manager-pci-common';
-import ConfigurationStep from './steps/ConfigurationStep';
-import GatewaySummaryStep from './steps/GatewaySummaryStep';
-import LocalizationStep from './steps/LocalizationStep';
-import { useNewNetworkStore } from '@/pages/new/store';
+import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { useHref } from 'react-router-dom';
+import { PciDiscoveryBanner, useProject } from '@ovh-ux/manager-pci-common';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { NewPrivateNetworkForm } from '@/types/private-network-form.type';
+import { schema } from './new.constants';
+import LocalisationConfig from './localisation/LocalisationConfig.component';
+import PrivateNetworkConfig from './private-network/PrivateNetworkConfig.component';
+import SubnetConfig from './subnet/SubnetConfig.component';
+import ButtonAction from './button-action/ButtonAction.component';
+import BackButton from '@/components/back-button/BackButton.component';
 
 export default function NewPage(): JSX.Element {
-  const store = useNewNetworkStore();
-  // <editor-fold desc="translations">
-  const { t } = useTranslation('common');
-  const { t: tListing } = useTranslation('listing');
-  const { t: tNew } = useTranslation('new');
+  const { t } = useTranslation(['new', 'listing']);
   const { clearNotifications } = useNotifications();
-  // </editor-fold>
 
-  // <editor-fold desc="project">
   const { data: project } = useProject();
+
   const projectUrl = useProjectUrl('public-cloud');
   const backHref = useHref('..');
 
+  const form = useForm<NewPrivateNetworkForm>({
+    defaultValues: {
+      subnet: {
+        enableDhcp: true,
+        enableGatewayIp: true,
+        ipVersion: 4,
+      },
+    },
+    resolver: zodResolver(schema),
+  });
+
   useEffect(() => {
-    if (project) {
-      store.setProject({
-        id: project.project_id,
-        isDiscovery: isDiscoveryProject(project),
-      });
-    }
     clearNotifications();
   }, [project]);
-  // </editor-fold>
-
-  const { addError, addSuccess } = useNotifications();
-  const backLink = useHref('..');
-  const navigate = useNavigate();
-
-  const create = async () => {
-    store.setForm({ isCreating: true });
-    try {
-      await store.create();
-      addSuccess(
-        <Translation ns="new">
-          {(translate) => (
-            <span
-              dangerouslySetInnerHTML={{
-                __html: translate(
-                  'pci_projects_project_network_private_create_success',
-                ),
-              }}
-            />
-          )}
-        </Translation>,
-        true,
-      );
-      navigate('..');
-    } catch (e) {
-      addError(
-        <Translation ns="new">
-          {(translate) => (
-            <span
-              dangerouslySetInnerHTML={{
-                __html: translate(
-                  'pci_projects_project_network_private_create_error',
-                  {
-                    message: e?.response?.data?.message || e?.message,
-                  },
-                ),
-              }}
-            />
-          )}
-        </Translation>,
-        true,
-      );
-    } finally {
-      store.setForm({ isCreating: false });
-    }
-  };
 
   return (
     <>
-      {project && (
-        <OsdsBreadcrumb
-          items={[
-            {
-              href: projectUrl,
-              label: project.description,
-            },
-            {
-              href: backHref,
-              label: tListing('pci_projects_project_network_private'),
-            },
-            {
-              label: tNew('pci_projects_project_network_private_create'),
-            },
-          ]}
-        />
-      )}
-      <div className="header mb-10 mt-8">
-        <OsdsLink
-          color={ODS_THEME_COLOR_INTENT.primary}
-          className="mt-10"
-          href={backLink}
-          onClick={() => clearNotifications()}
-        >
-          <OsdsIcon
-            slot="start"
-            name={ODS_ICON_NAME.ARROW_LEFT}
-            size={ODS_ICON_SIZE.xs}
-            color={ODS_THEME_COLOR_INTENT.primary}
-          ></OsdsIcon>
-          <span className="ml-4">
-            {t('common_back_button_back_to_previous_page')}
-          </span>
-        </OsdsLink>
-        <div className="mt-[20px]">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._600}
-            color={ODS_THEME_COLOR_INTENT.primary}
-          >
-            {tNew('pci_projects_project_network_private_create')}
-          </OsdsText>
+      <OsdsBreadcrumb
+        items={[
+          {
+            href: projectUrl,
+            label: project.description,
+          },
+          {
+            href: backHref,
+            label: t('listing:pci_projects_project_network_private'),
+          },
+          {
+            label: t('listing:pci_projects_project_network_private_create'),
+          },
+        ]}
+      />
+      <div className="mb-8">
+        <BackButton />
+      </div>
 
-          <Notifications />
-        </div>
+      <div className="header mb-10 mt-8">
+        <Title>{t('pci_projects_project_network_private_create')}</Title>
+        <Notifications />
       </div>
 
       <div className="mb-5">
         <PciDiscoveryBanner project={project} />
       </div>
 
-      <div className="flex flex-col gap-4 mb-10">
-        <LocalizationStep />
-        <ConfigurationStep onCreate={create} />
-        <Suspense>
-          {store.form.createGateway && <GatewaySummaryStep onCreate={create} />}
-        </Suspense>
-      </div>
+      <FormProvider {...form}>
+        <LocalisationConfig />
+        <PrivateNetworkConfig />
+        <SubnetConfig />
+        <ButtonAction />
+      </FormProvider>
     </>
   );
 }

packages/manager/apps/pci-private-network/src/pages/new/new.constants.ts

@@ -0,0 +1,41 @@
+import { z } from 'zod';
+
+export const VLAN_ID = {
+  default: 1,
+  min: 0,
+  max: 4000,
+};
+
+export const DEFAULT_CIDR = '10.{vlanId}.0.0/16';
+
+export const GATEWAY_HOURLY_PLAN_CODE = 'gateway.s.hour.consumption';
+
+export const schema = z.object({
+  region: z.string().min(1),
+  isLocalZone: z.boolean(),
+  name: z.string().min(1),
+  vlanId: z
+    .number()
+    .min(VLAN_ID.min)
+    .max(VLAN_ID.max)
+    .optional(),
+  subnet: z.object({
+    cidr: z
+      .string()
+      .regex(
+        new RegExp(
+          /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/(8|9|1[0-6]|1[7-9]|2[0-9]))$/,
+        ),
+      ),
+    enableDhcp: z.boolean(),
+    ipVersion: z.number(),
+    enableGatewayIp: z.boolean(),
+  }),
+  gateway: z
+    .object({
+      model: z.string(),
+      name: z.string(),
+    })
+    .optional(),
+  existingGatewayId: z.string().optional(),
+});

packages/manager/apps/pci-private-network/src/types/private-network-form.type.ts

@@ -0,0 +1,22 @@
+export type Subnet = {
+  cidr: string;
+  enableDhcp: boolean;
+  enableGatewayIp: boolean;
+  ipVersion: number;
+};
+
+export type Gateway = {
+  model: string;
+  name: string;
+};
+
+export type NewPrivateNetworkForm = {
+  region: string;
+  isLocalZone: boolean;
+  name: string;
+  defaultVlanId: number;
+  vlanId: number;
+  subnet: Subnet;
+  gateway?: Gateway;
+  existingGatewayId?: string | boolean;
+};