feat(procedures): implemented gdpr form

ref:MANAGER-15317

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/apps/procedures/src/components/PageLayout/PageLayout.component.tsx

@@ -11,7 +11,7 @@ export const PageLayout: FunctionComponent<Props> = ({ children }) => (
       <div className="inline-block pb-6 md:pb-12">
         <img src={ovhCloudLogo} alt="ovh-cloud-logo" className="app-logo" />
       </div>
-      <div className="flex justify-center app-content lg:w-8/12 mx-auto min-h-[500px] sm:shadow sm:border-none border-t-[1px] border-gray-300 px-6">
+      <div className="flex justify-center app-content lg:w-8/12 mx-auto min-h-[500px] sm:shadow-[0_0_6px_0_rgba(40,89,192,0.2)] sm:border-none border-t-[1px] border-gray-300 px-6">
         <div className="md:p-8 w-full">{children}</div>
       </div>
     </div>

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/RGDPForm.component.tsx

@@ -16,6 +16,7 @@ import {
   GDPRSubjectValues,
   TextInputRegex,
 } from './RGDPForm.constants';
+import './RGDPForm.style.css';
 
 export const RGDPForm: FunctionComponent = () => {
   const { t } = useTranslation('rgdp');
@@ -40,7 +41,6 @@ export const RGDPForm: FunctionComponent = () => {
     }
   }, [email]);
 
-  console.log(isSubmitting);
   return (
     <form onSubmit={handleSubmit(onSubmit)} noValidate>
       <div className="my-10">

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/RGDPForm.style.css

@@ -0,0 +1,26 @@
+/* TODO:
+It is not clean to apply CSS for ODS components. It was added because Tailwind CSS overrides the border of ODS inputs.
+The best solution is to configure Tailwind CSS with this option: corePlugins: {
+    preflight: false,
+},
+
+However,
+
+some components on the MFA page are not in ODS. Consider converting these components to ODS in the future.
+*/
+
+osds-input[size='md'] {
+  border-width: var(--ods-size-input-md-border-width);
+}
+
+osds-input[color='primary'] {
+  border-color: var(--ods-color-primary-200);
+}
+
+osds-input[color='error'] {
+  border-color: var(--ods-color-error-500);
+}
+
+.ods-error {
+  border-color: var(--ods-color-error-500) !important;
+}

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/RGDPForm.test.tsx

@@ -9,12 +9,6 @@ import { GDPRFormValues } from '@/types/gdpr.type';
 const getOsdsElementByFormName = <T,>(fieldName: keyof GDPRFormValues) =>
   (screen.queryByTestId(`field_id_${fieldName}`) as unknown) as T;
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
 vi.mock('@ovhcloud/ods-components/react', async (importOriginal) => {
   const module: typeof OdsComponentModule = await importOriginal();
   return {

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/SelectField/SelectField.component.tsx

@@ -1,8 +1,22 @@
+import {
+  OsdsFormField,
+  OsdsSelect,
+  OsdsSelectOption,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
 import { Control, Controller, Validate, ValidationRule } from 'react-hook-form';
 import React, { FunctionComponent } from 'react';
-import { Select, SelectOption } from '@/components/Select/Select.component';
 import { GDPRFormValues } from '@/types/gdpr.type';
 
+export type SelectOption = {
+  label: string;
+  value: string;
+};
+
 type Props = {
   name: keyof GDPRFormValues;
   label?: string;
@@ -27,6 +41,8 @@ export const SelectField: FunctionComponent<Props> = ({
   options,
   placeholder,
 }) => {
+  const id = `field_id_${name}`;
+
   return (
     <div>
       <Controller
@@ -41,18 +57,35 @@ export const SelectField: FunctionComponent<Props> = ({
           field: { onChange, onBlur, value, name: _name },
           fieldState: { error },
         }) => (
-          <Select
-            label={label}
-            name={_name}
-            required={Boolean(required)}
-            id={`field_id_${_name}`}
-            onBlur={onBlur}
-            onChange={onChange}
-            value={value}
-            options={options}
-            placeholder={placeholder}
-            error={error?.message}
-          />
+          <OsdsFormField error={error?.message}>
+            {label && (
+              <label htmlFor={id} slot="label">
+                <OsdsText
+                  level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                >
+                  {label}:
+                </OsdsText>
+              </label>
+            )}
+            <OsdsSelect
+              onOdsValueChange={onChange}
+              onBlur={onBlur}
+              value={value}
+              name={name}
+              required={Boolean(required)}
+              id={id}
+              error={Boolean(error) || undefined}
+              inline
+            >
+              {placeholder && <span slot="placeholder">{placeholder}</span>}
+              {options.map((option, index) => (
+                <OsdsSelectOption value={option.value} key={index}>
+                  {option.label}
+                </OsdsSelectOption>
+              ))}
+            </OsdsSelect>
+          </OsdsFormField>
         )}
       />
     </div>