fix: empty date is not working in CellDateTime (#5057)

* fix: empty date is not working in CellDateTime * update tests
Talend · Dec 12, 2023 · bf0caf3 · bf0caf3
1 parent 58a4866
commit bf0caf3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/.changeset/nervous-yaks-repair.md b/.changeset/nervous-yaks-repair.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix: empty date cell renderer
diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js
@@ -19,7 +19,7 @@ import getDefaultT from '../../translate';
 
 import styles from './CellDatetime.module.scss';
 
-const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 
 export function computeValue(cellData, columnData, t) {
 	const date = new Date(cellData);
@@ -52,8 +52,10 @@ export function getTooltipLabel(cellData, columnData, t) {
 	if (typeof columnData.getTooltipLabel === 'function') {
 		return columnData.getTooltipLabel(cellData);
 	}
-	if (columnData.mode === 'ago') {
-		const date = new Date(cellData);
+	const date = new Date(cellData);
+	const isDateValid = isValid(date);
+
+	if (columnData.mode === 'ago' && isDateValid) {
 		let tooltipLabel = '';
 		if (columnData.timeZone) {
 			tooltipLabel = dateUtils.formatToTimeZone(date, columnData.pattern || DATE_TIME_FORMAT, {
@@ -88,6 +90,7 @@ export class CellDatetimeComponent extends Component {
 
 	render() {
 		const { cellData, columnData, t } = this.props;
+
 		const computedValue = computeValue(cellData, columnData, t);
 		const tooltipLabel = getTooltipLabel(cellData, columnData, t);
 

diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js
@@ -90,7 +90,7 @@ describe('CellDatetime', () => {
 		render(<CellDatetimeComponent columnData={columnData} />);
 		// then
 		expect(distanceInWordsToNow).not.toHaveBeenCalled();
-		expect(format).toHaveBeenCalled();
+		expect(format).not.toHaveBeenCalled();
 		expect(document.querySelector('.cell-datetime-container')).toBeEmptyDOMElement();
 	});
 

diff --git a/packages/components/src/VirtualizedList/VirtualizedList.stories.js b/packages/components/src/VirtualizedList/VirtualizedList.stories.js
@@ -1,9 +1,11 @@
 /* eslint-disable react/prop-types */
 import { useState } from 'react';
-import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies
-
-import { SortIndicator } from 'react-virtualized';
 import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
+// eslint-disable-line import/no-extraneous-dependencies
+import { SortIndicator } from 'react-virtualized';
+
+import { action } from '@storybook/addon-actions';
+
 import VirtualizedList from '.';
 
 function MyCustomRow(props) {
@@ -283,7 +285,7 @@ const collection = [
 		name: 'Title with long long long long long long long long long long long text',
 		tag: 'test',
 		created: '2016-09-22',
-		modified: '2016-09-22',
+		modified: undefined,
 		description: 'Row with a super super long text to show the ellipsis',
 		author:
 			'Jean-Pierre DUPONT with super super super super super super super super super super super super super super super super super super super super super super super long name, but there was not enough long text',
@@ -470,7 +472,7 @@ export const ListTable = () => (
 				<VirtualizedList.Datetime
 					label="Modified"
 					dataKey="modified"
-					columnData={{ mode: 'format' }}
+					columnData={{ mode: 'ago' }}
 				/>
 			</VirtualizedList>
 		</section>