Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(TDC-7364): FormatValue component - fix content not appearing #4936

Merged
merged 3 commits into from
Oct 17, 2023
Merged

fix(TDC-7364): FormatValue component - fix content not appearing #4936

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b81fdfa
fix(TDC-7364): FormatValue component - fix content not appearing when…
dlcaldeira Oct 17, 2023
2a2170d
update snapshots
dlcaldeira Oct 17, 2023
ae4dbfa
Update packages/components/src/FormatValue/FormatValue.component.js
dlcaldeira Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tender-jokes-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/react-components': patch
---

fix(TDC-7364): FormatValue component - fix content not appearing when there were leading whitespaces
45 changes: 24 additions & 21 deletions packages/components/src/FormatValue/FormatValue.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
</>
);
}
}
Expand Down Expand Up @@ -125,3 +126,5 @@ FormatValueComponent.propTypes = {
};

export default FormatValueComponent;

// const value = '<?xml version="1.0" encoding="UTF-8"?>\n<ServiceResponse xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://qualysapi.qualys.com/qps/xsd/version.xsd">\n <responseCode>SUCCESS</responseCode>\n <count>1</count>\n <data>\n <Portal-Version>\n <PortalApplication-VERSION>3.16.0.0-9 OFFICIAL #127 (2023-08-29T14:15:40Z)</PortalApplication-VERSION>\n <QWEB__VM-VERSION>2.16.0-2</QWEB__VM-VERSION>\n <CA-VERSION>3.16.0.1</CA-VERSION>\n </Portal-Version>\n <QWeb-Version>\n <WEB-VERSION>10.23.3.0-2</WEB-VERSION>\n <SCANNER-VERSION>12.15.57-1</SCANNER-VERSION>\n <VULNSIGS-VERSION>2.5.889-3</VULNSIGS-VERSION>\n </QWeb-Version>\n </data>\n</ServiceResponse>');
dlcaldeira marked this conversation as resolved.
Show resolved Hide resolved
55 changes: 49 additions & 6 deletions packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
`;
Expand All @@ -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"
Expand All @@ -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"
Expand Down
Loading