feat(pci-block-storage): add availability zone step

ref: TAPC-2111 Signed-off-by: Simon Chaumet <[email protected]>
ovh · Dec 20, 2024 · 52cdc63 · 52cdc63
1 parent 2e37a18
commit 52cdc63
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 34 deletions.
diff --git a/packages/manager/apps/pci-block-storage/public/translations/add/Messages_fr_FR.json b/packages/manager/apps/pci-block-storage/public/translations/add/Messages_fr_FR.json
@@ -11,6 +11,7 @@
   "pci_projects_project_storages_blocks_add_type_addon_iops_not_guaranteed": "Jusqu'à {{iops}} IOPS{{separator}} ",
   "pci_projects_project_storages_blocks_add_type_addon_capacity_max": "{{capacity}} max.",
   "pci_projects_project_storages_blocks_add_type_addon_price": "{{price}} HT/Go/heure",
+  "pci_projects_project_storages_blocks_add_availability_zone": "Sélectionnez une zone de disponibilité",
   "pci_projects_project_storages_blocks_add_size_title": "Capacité du volume",
   "pci_projects_project_storages_blocks_add_size_help": "La taille maximale dépend de votre quota disponible.",
   "pci_projects_project_storages_blocks_add_size_unit": "Go",

diff --git a/packages/manager/apps/pci-block-storage/src/api/data/availableVolumes.ts b/packages/manager/apps/pci-block-storage/src/api/data/availableVolumes.ts
@@ -1,4 +1,5 @@
 import { v6 } from '@ovh-ux/manager-core-api';
+import { TLocalisation } from '@/api/hooks/useRegions';
 
 export type TAvailableVolumesResponse = {
   plans: {
@@ -20,3 +21,15 @@ export const getProjectsAvailableVolumes = async (
 
   return data;
 };
+
+export function isRegionWith3AZ(region: TLocalisation) {
+  return region.type === 'region-3-az';
+}
+
+/**
+ * TODO: use real informations
+ * @param planCode
+ */
+export function isProductWithAvailabilityZone(planCode: string) {
+  return planCode.startsWith('volume.high-speed');
+}
diff --git a/packages/manager/apps/pci-block-storage/src/api/data/volume.ts b/packages/manager/apps/pci-block-storage/src/api/data/volume.ts
@@ -185,6 +185,7 @@ export interface AddVolumeProps {
   regionName: string;
   volumeCapacity: number;
   volumeType: string;
+  availabilityZone?: string;
 }
 
 export const addVolume = async ({

diff --git a/packages/manager/apps/pci-block-storage/src/pages/new/New.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/new/New.page.tsx
@@ -23,6 +23,7 @@ import { LocationStep } from './components/LocationStep.component';
 import { useVolumeStepper } from './hooks/useVolumeStepper';
 import { useAddVolume } from '@/api/hooks/useVolume';
 import { ExtenBannerBeta } from '@/components/exten-banner-beta/ExtenBannerBeta';
+import { AvailabilityZoneStep } from '@/pages/new/components/AvailabilityZoneStep';
 
 export default function NewPage(): JSX.Element {
   const { t } = useTranslation('common');
@@ -35,7 +36,7 @@ export default function NewPage(): JSX.Element {
   const backHref = useHref('..');
   const isDiscovery = isDiscoveryProject(project);
   const { addError, addSuccess, clearNotifications } = useNotifications();
-  const stepper = useVolumeStepper();
+  const stepper = useVolumeStepper(projectId);
 
   const { addVolume } = useAddVolume({
     projectId,
@@ -109,7 +110,7 @@ export default function NewPage(): JSX.Element {
 
       <div className="mt-8">
         <StepComponent
-          order={1}
+          order={stepper.getOrder(stepper.location.step)}
           {...stepper.location.step}
           isLocked={stepper.location.step.isLocked || isDiscovery}
           title={tAdd('pci_projects_project_storages_blocks_add_region_title')}
@@ -126,7 +127,7 @@ export default function NewPage(): JSX.Element {
           />
         </StepComponent>
         <StepComponent
-          order={2}
+          order={stepper.getOrder(stepper.volumeType.step)}
           {...stepper.volumeType.step}
           title={tAdd('pci_projects_project_storages_blocks_add_type_title')}
           edit={{
@@ -142,8 +143,30 @@ export default function NewPage(): JSX.Element {
             onSubmit={stepper.volumeType.submit}
           />
         </StepComponent>
+        {stepper.availabilityZone.step.isShown && (
+          <StepComponent
+            order={stepper.getOrder(stepper.availabilityZone.step)}
+            {...stepper.availabilityZone.step}
+            title={tAdd(
+              'pci_projects_project_storages_blocks_add_availability_zone',
+            )}
+            edit={{
+              action: stepper.availabilityZone.edit,
+              label: tStepper('common_stepper_modify_this_step'),
+              isDisabled: stepper.validation.step.isLocked,
+            }}
+          >
+            {!!stepper.form.region?.name && (
+              <AvailabilityZoneStep
+                step={stepper.availabilityZone.step}
+                regionName={stepper.form.region.name}
+                onSubmit={stepper.availabilityZone.submit}
+              />
+            )}
+          </StepComponent>
+        )}
         <StepComponent
-          order={3}
+          order={stepper.getOrder(stepper.capacity.step)}
           {...stepper.capacity.step}
           title={tAdd('pci_projects_project_storages_blocks_add_size_title')}
           edit={{
@@ -161,7 +184,7 @@ export default function NewPage(): JSX.Element {
           />
         </StepComponent>
         <StepComponent
-          order={4}
+          order={stepper.getOrder(stepper.volumeName.step)}
           {...stepper.volumeName.step}
           title={tAdd('pci_projects_project_storages_blocks_add_name_title')}
           edit={{
@@ -177,7 +200,7 @@ export default function NewPage(): JSX.Element {
           />
         </StepComponent>
         <StepComponent
-          order={5}
+          order={stepper.getOrder(stepper.validation.step)}
           {...stepper.validation.step}
           title={tAdd('pci_projects_project_storages_blocks_add_submit_title')}
         >

diff --git a/packages/manager/apps/pci-block-storage/src/pages/new/components/AvailabilityZoneStep.tsx b/packages/manager/apps/pci-block-storage/src/pages/new/components/AvailabilityZoneStep.tsx
@@ -0,0 +1,70 @@
+import { TilesInputComponent } from '@ovh-ux/manager-react-components';
+import { useMemo, useState } from 'react';
+import { OsdsButton, OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_BUTTON_SIZE } from '@ovhcloud/ods-components';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { useTranslation } from 'react-i18next';
+import { Step } from '@/pages/new/hooks/useStep';
+
+type Props = {
+  regionName: string;
+  step: Step;
+  onSubmit: (zone: string) => void;
+};
+
+export function AvailabilityZoneStep({ regionName, step, onSubmit }: Props) {
+  const { t } = useTranslation('stepper');
+
+  // TODO: use real informations
+  const zones = useMemo(
+    () =>
+      ['a', 'b', 'c'].map((suffix) => `${regionName.toLowerCase()}-${suffix}`),
+    [regionName],
+  );
+  const [selectedZone, setSelectedZone] = useState<string | undefined>(
+    undefined,
+  );
+  const displayedZones = useMemo(
+    () => (!!selectedZone && step.isLocked ? [selectedZone] : zones),
+    [zones, selectedZone, step],
+  );
+
+  return (
+    <div>
+      <TilesInputComponent<string>
+        items={displayedZones}
+        value={selectedZone}
+        onInput={(z) => setSelectedZone(z)}
+        label={(z) => (
+          <div className="w-full">
+            <div className="border-solid border-0 py-3">
+              <OsdsText
+                level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+                size={ODS_THEME_TYPOGRAPHY_SIZE._600}
+                color={ODS_THEME_COLOR_INTENT.text}
+              >
+                {z}
+              </OsdsText>
+            </div>
+          </div>
+        )}
+      />
+      {!!selectedZone && !step.isLocked && (
+        <div className="mt-6">
+          <OsdsButton
+            size={ODS_BUTTON_SIZE.md}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            onClick={() => onSubmit(selectedZone)}
+            className="w-fit"
+          >
+            {t('common_stepper_next_button_label')}
+          </OsdsButton>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/manager/apps/pci-block-storage/src/pages/new/form.type.ts b/packages/manager/apps/pci-block-storage/src/pages/new/form.type.ts
@@ -6,4 +6,5 @@ export type TFormState = {
   volumeType: TAddon;
   volumeName: string;
   volumeCapacity: number;
+  availabilityZone: string;
 };
diff --git a/packages/manager/apps/pci-block-storage/src/pages/new/hooks/useStep.ts b/packages/manager/apps/pci-block-storage/src/pages/new/hooks/useStep.ts
@@ -4,21 +4,40 @@ export interface StepState {
   isOpen: boolean;
   isChecked: boolean;
   isLocked: boolean;
+  isShown: boolean;
 }
 
-export function useStep(initialState?: Readonly<Partial<StepState>>) {
+export type Step = StepState & {
+  open: () => void;
+  close: () => void;
+  check: () => void;
+  uncheck: () => void;
+  lock: () => void;
+  unlock: () => void;
+  show: () => void;
+  hide: () => void;
+};
+
+export function useStep(initialState?: Readonly<Partial<StepState>>): Step {
   const [isOpen, setIsOpen] = useState(!!initialState?.isOpen);
   const [isChecked, setIsChecked] = useState(!!initialState?.isChecked);
   const [isLocked, setIsLocked] = useState(!!initialState?.isLocked);
+  const [isShown, setIsShown] = useState(
+    initialState && 'isShown' in initialState ? initialState.isShown : true,
+  );
+
   return {
     isOpen,
     isChecked,
     isLocked,
+    isShown,
     open: () => setIsOpen(true),
     close: () => setIsOpen(false),
     check: () => setIsChecked(true),
     uncheck: () => setIsChecked(false),
     lock: () => setIsLocked(true),
     unlock: () => setIsLocked(false),
+    show: () => setIsShown(true),
+    hide: () => setIsShown(false),
   };
 }