ui/volumes: Improve the name of the batch volume

Refs: #2964

ui/src/containers/CreateVolume.js

@@ -22,6 +22,7 @@ import {
   sizeUnits,
   useQuery,
   linuxDrivesNamingIncrement,
+  formatBatchName,
 } from '../services/utils';
 import { formatVolumeCreationData } from '../services/NodeVolumesUtils';
 import { intl } from '../translations/IntlGlobalProvider';
@@ -264,12 +265,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/utils.js

@@ -479,3 +479,23 @@ export const linuxDrivesNamingIncrement = (devicePath, increment) => {
     return '';
   }
 };
+
+/**
+ * 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 nextDevicePath = linuxDrivesNamingIncrement(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/utils.test.js

@@ -4,6 +4,7 @@ import {
   fromMilliSectoAge,
   useTableSortURLSync,
   linuxDrivesNamingIncrement,
+  formatBatchName,
 } from './utils';
 import { renderHook } from '@testing-library/react-hooks';
 
@@ -304,3 +305,18 @@ it('should return an empty string if the increment is smaller than 0', () => {
   const result = linuxDrivesNamingIncrement('/dev/vda', -1);
   expect(result).toEqual('');
 });
+
+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');
+});