ui/volumes: Improve the name of the batch volume

Refs: #2964

ui/src/containers/CreateVolume.js

@@ -23,7 +23,10 @@ import {
   useQuery,
   linuxDrivesNamingIncrement,
 } from '../services/utils';
-import { formatVolumeCreationData } from '../services/NodeVolumesUtils';
+import {
+  formatVolumeCreationData,
+  formatBatchName,
+} from '../services/NodeVolumesUtils';
 import { intl } from '../translations/IntlGlobalProvider';
 
 // We might want to do a factorization later for
@@ -264,12 +267,14 @@ const CreateVolume = (props) => {
 
     React.useEffect(() => {
       if (fieldname === 'name') {
+        // Set the defaults when the field is empty, means even if we change the global value afterwards,
+        // the field of batch volumes will not be override.
         if (
           values.name.trim() !== '' &&
           touched.name &&
           values.volumes[index].name === ''
         ) {
-          setFieldValue(name, `${values.name}${index + 1}`);
+          setFieldValue(name, formatBatchName(values.name, index + 1));
         }
       } else if (fieldname === 'path') {
         if (

ui/src/services/NodeVolumesUtils.js

@@ -304,3 +304,23 @@ export const formatVolumeCreationData = (newVolumes) => {
     return [newVolumes];
   }
 };
+
+/**
+ * This function formats the name base on the index
+ * @param {string} name - The name the default volume name
+ * @param {number} index  - The number of index
+ *
+ * @example
+ * const name = 'volume-test'
+ *
+ * const formatedVolumeName = formatBatchName(name, 1)
+ */
+export const formatBatchName = (name, index) => {
+  if (index >= 1) {
+    if (index <= 9) {
+      return `${name}0${index}`;
+    } else if (index >= 10) return `${name}${index}`;
+  } else {
+    return '';
+  }
+};

ui/src/services/NodeVolumesUtils.test.js

@@ -11,6 +11,7 @@ import {
   volumeGetError,
   getVolumeListData,
   formatVolumeCreationData,
+  formatBatchName,
 } from './NodeVolumesUtils';
 import { stateApp } from './NodeVolumesUtilsData';
 
@@ -651,3 +652,18 @@ it('should return an array with formatted batch rawblock device volume', () => {
   const result = formatVolumeCreationData(rawBlockVolumes);
   expect(result).toEqual(batchRawVolume);
 });
+
+it('should volume01 when the index is 1', () => {
+  const result = formatBatchName('volume', 1);
+  expect(result).toEqual('volume01');
+});
+
+it('should volume09 when the index is 9', () => {
+  const result = formatBatchName('volume', 9);
+  expect(result).toEqual('volume09');
+});
+
+it('should volume09 when the index is 10', () => {
+  const result = formatBatchName('volume', 10);
+  expect(result).toEqual('volume10');
+});

ui/src/services/utils.test.js

@@ -4,6 +4,7 @@ import {
   fromMilliSectoAge,
   useTableSortURLSync,
   linuxDrivesNamingIncrement,
+  formatBatchName,
 } from './utils';
 import { renderHook } from '@testing-library/react-hooks';