From b0f7bbf70a44cdf23c80a68152d2f1c74e5b532a Mon Sep 17 00:00:00 2001
From: dlcaldeira <124570762+dlcaldeira@users.noreply.github.com>
Date: Tue, 17 Oct 2023 11:08:30 +0100
Subject: [PATCH] fix(TDC-7364): FormatValue component - fix content not
 appearing if there are leading whitespaces

---
 .changeset/tender-jokes-join.md               |  5 ++
 .../src/FormatValue/FormatValue.component.js  | 43 ++++++++-------
 .../__snapshots__/FormatValue.test.js.snap    | 55 +++++++++++++++++--
 3 files changed, 76 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/tender-jokes-join.md

diff --git a/.changeset/tender-jokes-join.md b/.changeset/tender-jokes-join.md
new file mode 100644
index 00000000000..be900d29546
--- /dev/null
+++ b/.changeset/tender-jokes-join.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix(TDC-7364): FormatValue component - fix content not appearing when there were leading whitespaces
diff --git a/packages/components/src/FormatValue/FormatValue.component.js b/packages/components/src/FormatValue/FormatValue.component.js
index d768030177a..b9b67c5de55 100644
--- a/packages/components/src/FormatValue/FormatValue.component.js
+++ b/packages/components/src/FormatValue/FormatValue.component.js
@@ -12,7 +12,7 @@ export const REG_EXP_LEADING_TRAILING_WHITE_SPACE_CHARACTERS = /(^\s*)?([\s\S]*?
 const REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS = /(\t| |\n)/g;
 const REG_EXP_CAPTUR_LINE_FEEDING = /(\n)/g;
 const REG_EXP_LINE_FEEDING = /\n/;
-const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s/;
+const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s+/;
 
 /**
  * replaceCharacterByIcon - replace a character by the corresponding icon
@@ -54,30 +54,31 @@ function replaceCharacterByIcon(value, index, t) {
 						className={classNames(theme['td-white-space-character'], 'td-white-space-character')}
 						name="talend-carriage-return"
 					/>
-					{'\n'}
 				</span>
 			);
 		default:
-			if (REG_EXP_WHITE_SPACE_CHARACTERS.test(value)) {
-				return (
-					<Icon
-						key={index}
-						aria-label={t('FORMAT_VALUE_WHITE_SPACE_CHARACTER', {
-							defaultValue: 'whitespace character',
-						})}
-						className={classNames(
-							theme['td-white-space-character'],
-							theme['td-other-characters'],
-							'td-white-space-character',
-						)}
-						name="talend-empty-char"
-					/>
-				);
-			}
+			const whitespaces = value.match(REG_EXP_WHITE_SPACE_CHARACTERS)?.[0];
 			return (
-				<span key={index} className={classNames(theme['td-value'], 'td-value')}>
-					{value}
-				</span>
+				<>
+					{whitespaces &&
+						[...whitespaces]?.map(() => (
+							<Icon
+								key={index}
+								aria-label={t('FORMAT_VALUE_WHITE_SPACE_CHARACTER', {
+									defaultValue: 'whitespace character',
+								})}
+								className={classNames(
+									theme['td-white-space-character'],
+									theme['td-other-characters'],
+									'td-white-space-character',
+								)}
+								name="talend-empty-char"
+							/>
+						))}
+					<span key={index} className={classNames(theme['td-value'], 'td-value')}>
+						{value.trimStart()}
+					</span>
+				</>
 			);
 	}
 }
diff --git a/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap b/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap
index 525efab2de7..4a14269b18b 100755
--- a/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap
+++ b/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap
@@ -14,6 +14,9 @@ exports[`FormatValue should handle leading empty space in the string 1`] = `
       class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
       name="talend-empty-char"
     />
+    <span
+      class="theme-td-value td-value"
+    />
     <span
       class="theme-td-value td-value"
     >
@@ -37,8 +40,6 @@ exports[`FormatValue should handle line feeding in the string 1`] = `
         class="CoralIcon theme-td-white-space-character td-white-space-character"
         name="talend-carriage-return"
       />
-      
-
     </span>
     <span
       class="theme-td-value td-value"
@@ -66,8 +67,6 @@ exports[`FormatValue should handle single line feed 1`] = `
         class="CoralIcon theme-td-white-space-character td-white-space-character"
         name="talend-carriage-return"
       />
-      
-
     </span>
   </span>
 </DocumentFragment>
@@ -106,6 +105,9 @@ exports[`FormatValue should handle trailing empty space in the string 1`] = `
       class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
       name="talend-empty-char"
     />
+    <span
+      class="theme-td-value td-value"
+    />
   </span>
 </DocumentFragment>
 `;
@@ -126,6 +128,39 @@ exports[`FormatValue should replace the leading/trailing white space and the lin
       class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
       name="talend-empty-char"
     />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      class="theme-td-value td-value"
+    />
     <span
       aria-label="space character"
       class="CoralIcon theme-td-white-space-character td-white-space-character"
@@ -147,14 +182,22 @@ exports[`FormatValue should replace the leading/trailing white space and the lin
         class="CoralIcon theme-td-white-space-character td-white-space-character"
         name="talend-carriage-return"
       />
-      
-
     </span>
     <span
       aria-label="whitespace character"
       class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
       name="talend-empty-char"
     />
+    <span
+      aria-label="whitespace character"
+      class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
+      name="talend-empty-char"
+    />
+    <span
+      class="theme-td-value td-value"
+    >
+      psum
+    </span>
     <span
       aria-label="tab character"
       class="CoralIcon theme-td-white-space-character theme-td-tab-character td-white-space-character"