Add Account field in the Veeam configuration form

src/react/account/AccountCreate.tsx

@@ -21,14 +21,15 @@ import { useInstanceId } from '../next-architecture/ui/AuthProvider';
 
 const regexpEmailAddress = /^\S+@\S+.\S+$/;
 const regexpName = /^[\w+=,.@ -]+$/;
+export const accountNameValidationSchema = Joi.string()
+  .label('Name')
+  .required()
+  .min(2)
+  .max(64)
+  .regex(regexpName)
+  .message('Invalid Name');
 const schema = Joi.object({
-  name: Joi.string()
-    .label('Name')
-    .required()
-    .min(2)
-    .max(64)
-    .regex(regexpName)
-    .message('Invalid Name'),
+  name: accountNameValidationSchema,
   email: Joi.string()
     .label('Root Account Email')
     .required()

src/react/ui-elements/Veeam/VeeamConfiguration.tsx

@@ -11,7 +11,7 @@ import {
 } from '@scality/core-ui';
 import { useStepper } from '@scality/core-ui/dist/components/steppers/Stepper.component';
 import { Button, Input, Select } from '@scality/core-ui/dist/next';
-import { useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
 import {
@@ -34,8 +34,11 @@ import { VEEAM_STEPS, VeeamStepsIndexes } from './VeeamSteps';
 import { ListItem } from './VeeamTable';
 import { getCapacityBytes } from './useCapacityUnit';
 import { bucketNameValidationSchema } from '../../databrowser/buckets/BucketCreate';
+import { accountNameValidationSchema } from '../../../react/account/AccountCreate';
+import { useAccounts } from '../../../react/utils/hooks';
 
 const schema = Joi.object({
+  accountName: accountNameValidationSchema,
   bucketName: bucketNameValidationSchema,
   application: Joi.string().required(),
   capacity: Joi.when('application', {
@@ -52,6 +55,7 @@ const schema = Joi.object({
 });
 
 type VeeamConfiguration = {
+  accountName: string;
   bucketName: string;
   application: string;
   capacity: string;
@@ -112,6 +116,7 @@ const Configuration = () => {
     mode: 'all',
     resolver: joiResolver(schema),
     defaultValues: {
+      accountName: '',
       bucketName: '',
       application: VEEAM_BACKUP_REPLICATION_XML_VALUE,
       capacity: '0',
@@ -125,12 +130,29 @@ const Configuration = () => {
     control,
     register,
     watch,
+    setValue,
     formState: { errors, isValid },
   } = methods;
 
   const history = useHistory();
+  const { accounts, status } = useAccounts();
+
+  useEffect(() => {
+    if (status === 'success' && accounts.length === 0) {
+      setValue('accountName', VEEAM_DEFAULT_ACCOUNT_NAME);
+    }
+  }, [status]);
   const { next } = useStepper(VeeamStepsIndexes.Configuration, VEEAM_STEPS);
   const application = watch('application');
+  const accountName = watch('accountName');
+
+  const isAccountExist = useMemo(() => {
+    return (
+      status === 'success' &&
+      accounts.some((account) => account.Name === accountName)
+    );
+  }, [accountName, status]);
+
   const onSubmit = ({
     capacity,
     capacityUnit,
@@ -146,8 +168,7 @@ const Configuration = () => {
         application === VEEAM_BACKUP_REPLICATION_XML_VALUE
           ? enableImmutableBackup
           : false,
-      // Add advanced configuration to set the account name, for the moment we use the default account name.
-      accountName: VEEAM_DEFAULT_ACCOUNT_NAME,
+      accountName,
     });
   };
 
@@ -201,6 +222,30 @@ const Configuration = () => {
         }
       >
         <FormSection forceLabelWidth={300}>
+          <FormGroup
+            id="accountName"
+            label="Account"
+            labelHelpTooltip={'TODO'}
+            helpErrorPosition="bottom"
+            error={
+              isAccountExist
+                ? 'Account name already exists'
+                : errors.accountName?.message ?? ''
+            }
+            content={
+              <Input
+                id="accountName"
+                type="text"
+                autoComplete="off"
+                placeholder={
+                  status === 'success' && accounts.length !== 0
+                    ? 'VeeamBackup'
+                    : undefined
+                }
+                {...register('accountName')}
+              />
+            }
+          />
           <FormGroup
             id="application"
             label="Veeam application"
@@ -243,7 +288,7 @@ const Configuration = () => {
                 id="bucketName"
                 type="text"
                 autoComplete="off"
-                placeholder="Veeam bucket name"
+                placeholder="veeam-bucket-name"
                 {...register('bucketName')}
               />
             }

src/react/ui-elements/Veeam/VeeamSummary.tsx

@@ -14,10 +14,10 @@ import styled from 'styled-components';
 import { CertificateDownloadButton } from '../../next-architecture/ui/CertificateDownloadButton';
 import { useAuthGroups } from '../../utils/hooks';
 import { HideCredential } from '../Hide';
-import { VEEAM_DEFAULT_ACCOUNT_NAME } from './VeeamConstants';
 import { useGetS3ServicePoint } from './useGetS3ServicePoint';
 
 type VeeamSummaryProps = {
+  accountName: string;
   bucketName: string;
   enableImmutableBackup: boolean;
   accessKey: string;
@@ -58,6 +58,7 @@ const Separator = styled.div`
 `;
 
 export const VeeamSummary = ({
+  accountName,
   bucketName,
   enableImmutableBackup,
   accessKey,
@@ -79,9 +80,7 @@ export const VeeamSummary = ({
           variant="primary"
           label="Exit"
           onClick={() => {
-            history.push(
-              `/accounts/${VEEAM_DEFAULT_ACCOUNT_NAME}/buckets/${bucketName}`,
-            );
+            history.push(`/accounts/${accountName}/buckets/${bucketName}`);
           }}
         />
       }

src/react/ui-elements/Veeam/VeeamTable.tsx

@@ -32,7 +32,7 @@ export default function VeeamTable(propsConfiguration: VeeamTableProps) {
   const history = useHistory();
   const queryClient = useQueryClient();
   const { next } = useStepper(VeeamStepsIndexes.Table, VEEAM_STEPS);
-  const { bucketName, enableImmutableBackup } = propsConfiguration;
+  const { bucketName, enableImmutableBackup, accountName } = propsConfiguration;
   const { data, accessKey, secretKey } = useMutationTableData({
     propsConfiguration,
   });
@@ -139,6 +139,7 @@ export default function VeeamTable(propsConfiguration: VeeamTableProps) {
               onClick={() => {
                 queryClient.invalidateQueries(['WebIdentityRoles']);
                 next({
+                  accountName,
                   bucketName,
                   enableImmutableBackup,
                   accessKey,