feat(sap-features-hub): add pre-installation form step2

ref: MANAGER-15976 Signed-off-by: Paul Dickerson <[email protected]>
ovh · Jan 10, 2025 · 52e2140 · 52e2140
1 parent f9c5f91
commit 52e2140
Show file tree

Hide file tree

Showing 13 changed files with 302 additions and 38 deletions.
diff --git a/packages/manager/apps/sap-features-hub/public/translations/installation/Messages_fr_FR.json b/packages/manager/apps/sap-features-hub/public/translations/installation/Messages_fr_FR.json
@@ -1,13 +1,20 @@
 {
-  "title": "Assistant de pré-installation SAP - Étape 1/8",
+  "title": "Assistant de pré-installation SAP - Étape {{step}}/8",
   "description": "Cet assistant vous guide pour réaliser une pré-installation d'un système SAP.",
   "backlink_label": "Retour au SAP Features Hub",
+  "previous_step_cta": "Précédent",
   "select_label": "Sélectionnez",
   "service_title": "Sélectionnez votre service VMware on OVHcloud",
   "service_subtitle": "Sélectionnez votre service VMware on OVHcloud, votre datacentre et le cluster sur lequel vous souhaitez déployer votre système SAP.",
   "service_cta": "Spécifiez l'installation",
   "service_input_vmware": "Service VMware on OVHcloud",
   "service_input_vdc": "Datacentre",
   "service_input_cluster": "Cluster",
-  "service_input_error_no_cluster_available": "Vous devez sélectionner un datacentre contenant des hôtes pour continuer."
+  "service_input_error_no_cluster_available": "Vous devez sélectionner un datacentre contenant des hôtes pour continuer.",
+  "deployment_title": "Spécifiez l'installation souhaitée",
+  "deployment_subtitle": "Sélectionnez le type d'installation correspondant à vos besoins.",
+  "deployment_cta": "Précisez vos informations SAP",
+  "deployment_input_application_version": "Version d'application",
+  "deployment_input_application_type": "Type d'application",
+  "deployment_input_deployment_type": "Type de déploiement"
 }
diff --git a/packages/manager/apps/sap-features-hub/src/components/Form/SelectField.component.tsx b/packages/manager/apps/sap-features-hub/src/components/Form/SelectField.component.tsx
@@ -10,13 +10,22 @@ import {
   OdsSelectCustomEvent,
 } from '@ovhcloud/ods-components';
 
-type SelectFieldProps<T extends Record<string, unknown>> = {
+type SelectOptionsProps<T> = T extends Record<string, unknown>
+  ? {
+      options: T[];
+      optionValueKey: keyof T;
+      optionLabelKey?: keyof T;
+    }
+  : {
+      options: string[] | number[];
+      optionValueKey?: never;
+      optionLabelKey?: never;
+    };
+
+type SelectFieldProps<T> = SelectOptionsProps<T> & {
   name: string;
   label: string;
-  options: T[];
-  optionValueKey: keyof T;
-  optionLabelKey?: keyof T;
-  isDisabled: boolean;
+  isDisabled?: boolean;
   isLoading?: boolean;
   handleChange: (
     event: OdsSelectCustomEvent<OdsSelectChangeEventDetail>,
@@ -25,9 +34,12 @@ type SelectFieldProps<T extends Record<string, unknown>> = {
   error?: string;
 };
 
-export const SelectField = <T extends Record<string, unknown>>({
+const getFormattedValue = (value: unknown) =>
+  typeof value === 'number' ? value : String(value);
+
+export const SelectField = <T,>({
   name,
-  isDisabled,
+  isDisabled = false,
   isLoading,
   handleChange,
   options = [],
@@ -37,11 +49,14 @@ export const SelectField = <T extends Record<string, unknown>>({
   placeholder,
   error,
 }: SelectFieldProps<T>) => {
-  const sanitizedOptions = options.map((opt) => ({
-    value: String(opt?.[optionValueKey] || ''),
-    label: String(opt?.[optionLabelKey] || opt?.[optionValueKey] || ''),
-    ...opt,
-  }));
+  const sanitizedOptions = options.map((opt) =>
+    typeof opt === 'object'
+      ? {
+          value: opt?.[optionValueKey] || '',
+          label: String(opt?.[optionLabelKey] || opt?.[optionValueKey] || ''),
+        }
+      : { value: opt, label: String(opt) },
+  );
 
   return (
     <OdsFormField error={error}>
@@ -59,13 +74,16 @@ export const SelectField = <T extends Record<string, unknown>>({
           className="w-full max-w-[304px]"
           hasError={!!error}
           defaultValue={
-            sanitizedOptions.length === 1
-              ? sanitizedOptions[0].value
+            !isLoading && sanitizedOptions.length === 1
+              ? String(sanitizedOptions[0].value)
               : undefined
           }
         >
           {sanitizedOptions.map((opt) => (
-            <option key={opt.value} value={opt.value}>
+            <option
+              key={getFormattedValue(opt.value)}
+              value={getFormattedValue(opt.value)}
+            >
               {opt.label}
             </option>
           ))}

diff --git a/packages/manager/apps/sap-features-hub/src/data/api/installationDeployment.ts b/packages/manager/apps/sap-features-hub/src/data/api/installationDeployment.ts
@@ -0,0 +1,9 @@
+import { ApiResponse, v6 } from '@ovh-ux/manager-core-api';
+
+const getApplicationVersionRoute = (serviceName: string) =>
+  `/dedicatedCloud/${serviceName}/sap/capabilities`;
+
+export const getApplicationVersions = async (
+  serviceName: string,
+): Promise<ApiResponse<unknown>> =>
+  v6.get(getApplicationVersionRoute(serviceName));
diff --git a/packages/manager/apps/sap-features-hub/src/hooks/formStep/useFormSteps.ts b/packages/manager/apps/sap-features-hub/src/hooks/formStep/useFormSteps.ts
@@ -0,0 +1,44 @@
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { subRoutes, urls } from '@/routes/routes.constant';
+
+const createStepUrl = (stepNumber: number, serviceName: string) =>
+  urls.installationStep
+    .replace(':stepId', stepNumber.toString())
+    .replace(':serviceName', serviceName);
+
+export const useFormSteps = () => {
+  const { stepId, serviceName } = useParams();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const isInitialStep = pathname.includes(subRoutes.initialStep);
+
+  const initializeAndProceed = (selectedServiceName: string) => {
+    if (isInitialStep && selectedServiceName)
+      navigate(createStepUrl(2, selectedServiceName));
+  };
+
+  const nextStep = () => {
+    if (stepId && serviceName)
+      navigate(createStepUrl(Number(stepId) + 1, serviceName));
+  };
+
+  const previousStep = () => {
+    if (!stepId || !serviceName || isInitialStep) return;
+    if (stepId === '2') {
+      navigate(urls.installationInitialStep);
+    } else {
+      navigate(createStepUrl(Number(stepId) - 1, serviceName));
+    }
+  };
+
+  const getStepLabel = (step: string) => `sap_installation_formStep_${step}`;
+
+  return {
+    initializeAndProceed,
+    nextStep,
+    previousStep,
+    getStepLabel,
+    currentStep: isInitialStep ? '1' : stepId,
+    currentStepLabel: getStepLabel(isInitialStep ? '1' : stepId),
+  };
+};
diff --git a/.../manager/apps/sap-features-hub/src/hooks/installationDeployment/useApplicationVersions.ts b/.../manager/apps/sap-features-hub/src/hooks/installationDeployment/useApplicationVersions.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { getApplicationVersions } from '@/data/api/installationDeployment';
+
+// TODO: implement API calls when developed
+export const useApplicationVersions = (serviceName: string) =>
+  useQuery({
+    queryKey: ['applicationVersions', serviceName],
+    queryFn: () => getApplicationVersions(serviceName),
+    select: (res) => res.data,
+    enabled: !!serviceName,
+  });
diff --git a/packages/manager/apps/sap-features-hub/src/hooks/localStorage/useLocalStorage.tsx b/packages/manager/apps/sap-features-hub/src/hooks/localStorage/useLocalStorage.tsx
@@ -0,0 +1,28 @@
+export const useLocalStorage = () => {
+  const setStorageItem = (key: string, value: Record<string, unknown>) => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (err) {
+      throw new Error('Cannot access localStorage');
+    }
+  };
+
+  const getStorageItem = (key: string) => {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : undefined;
+    } catch (err) {
+      throw new Error('Cannot access localStorage');
+    }
+  };
+
+  const removeStorageItem = (key: string) => {
+    try {
+      localStorage.removeItem(key);
+    } catch (err) {
+      throw new Error('Cannot access localStorage');
+    }
+  };
+
+  return { setStorageItem, getStorageItem, removeStorageItem };
+};
diff --git a/packages/manager/apps/sap-features-hub/src/pages/installation/InstallationDashboard.page.tsx b/packages/manager/apps/sap-features-hub/src/pages/installation/InstallationDashboard.page.tsx
@@ -2,9 +2,13 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet } from 'react-router-dom';
 
-import { BaseLayout } from '@ovh-ux/manager-react-components';
+import {
+  BaseLayout,
+  IconLinkAlignmentType,
+} from '@ovh-ux/manager-react-components';
 
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
+import { useFormSteps } from '@/hooks/formStep/useFormSteps';
 
 export type DashboardTabItemProps = {
   name: string;
@@ -18,14 +22,16 @@ export type DashboardLayoutProps = {
 
 export default function PreinstallationPage() {
   const { t } = useTranslation('installation');
+  const { currentStep } = useFormSteps();
 
   return (
     <BaseLayout
       breadcrumb={<Breadcrumb />}
-      header={{ title: t('title') }}
+      header={{ title: t('title', { step: currentStep }) }}
       backLinkLabel={t('backlink_label')}
       onClickReturn={() => {}}
       description={t('description')}
+      iconAlignment={IconLinkAlignmentType.left}
     >
       <Outlet />
     </BaseLayout>

diff --git a/packages/manager/apps/sap-features-hub/src/pages/installation/formStep/FormStep.page.tsx b/packages/manager/apps/sap-features-hub/src/pages/installation/formStep/FormStep.page.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { useFormSteps } from '@/hooks/formStep/useFormSteps';
+import InstallationInitialStep from '../initialStep/InstallationInitialStep.page';
+import InstallationStepDeployment from '../stepDeployment/InstallationStepDeployment.page';
+
+const steps: Record<string, ReactNode> = {
+  '1': <InstallationInitialStep />,
+  '2': <InstallationStepDeployment />,
+};
+
+export default function FormStep() {
+  const { currentStep } = useFormSteps();
+
+  return steps[currentStep] || <div>Not developed yet.</div>;
+}
diff --git a/...allation/step1/InstallationStep1.page.tsx → ...tialStep/InstallationInitialStep.page.tsx b/...allation/step1/InstallationStep1.page.tsx → ...tialStep/InstallationInitialStep.page.tsx
@@ -8,13 +8,17 @@ import {
   useVMwareServices,
 } from '@/hooks/vmwareServices/useVMwareServices';
 import { SelectField } from '@/components/Form/SelectField.component';
+import { useFormSteps } from '@/hooks/formStep/useFormSteps';
+import { useLocalStorage } from '@/hooks/localStorage/useLocalStorage';
 
-export default function InstallationStep1() {
+export default function InstallationInitialStep() {
   const { t } = useTranslation('installation');
   const [serviceName, setServiceName] = useState<string>(null);
   const [datacenterId, setDatacenterId] = useState<string>(null);
   const [clusterName, setClusterName] = useState<string>(null);
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
+  const { initializeAndProceed, currentStepLabel } = useFormSteps();
+  const { setStorageItem } = useLocalStorage();
 
   const {
     data: services,
@@ -37,7 +41,7 @@ export default function InstallationStep1() {
     datacenterId,
   });
 
-  const isVDCError = useMemo(
+  const isError = useMemo(
     () =>
       datacenterId &&
       !clusters?.length &&
@@ -47,8 +51,13 @@ export default function InstallationStep1() {
   );
 
   useEffect(() => {
-    setIsFormValid(clusterName && !isVDCError);
-  }, [isVDCError, clusterName]);
+    setIsFormValid(clusterName && !isError);
+  }, [isError, clusterName]);
+
+  const handleSubmit = () => {
+    setStorageItem(currentStepLabel, { vdcId: datacenterId, clusterName });
+    initializeAndProceed(serviceName);
+  };
 
   return (
     <div>
@@ -85,9 +94,7 @@ export default function InstallationStep1() {
             setClusterName(null);
           }}
           error={
-            isVDCError
-              ? t('service_input_error_no_cluster_available')
-              : undefined
+            isError ? t('service_input_error_no_cluster_available') : undefined
           }
         />
         <SelectField
@@ -97,12 +104,16 @@ export default function InstallationStep1() {
           options={clusters}
           optionValueKey={'name'}
           isDisabled={
-            !datacenterId || isLoadingClusters || isClustersError || isVDCError
+            !datacenterId || isLoadingClusters || isClustersError || isError
           }
           isLoading={isLoadingClusters && !isLoadingDatacentres}
           handleChange={(event) => setClusterName(event.detail.value)}
         />
-        <OdsButton label={t('service_cta')} isDisabled={!isFormValid} />
+        <OdsButton
+          label={t('service_cta')}
+          isDisabled={!isFormValid}
+          onClick={handleSubmit}
+        />
       </form>
     </div>
   );