From 49bdc6264ebb87c690f0aad7b18cc141ef18fbb9 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 11 Oct 2022 11:31:41 -0400
Subject: [PATCH 1/5] fix(Timestamp): updated logic for rendering datetime
 attribute

---
 .../src/components/Timestamp/Timestamp.tsx    | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/Timestamp/Timestamp.tsx b/packages/react-core/src/components/Timestamp/Timestamp.tsx
index da10ddb2483..043bb622199 100644
--- a/packages/react-core/src/components/Timestamp/Timestamp.tsx
+++ b/packages/react-core/src/components/Timestamp/Timestamp.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
+import { isValidDate } from '../CalendarMonth';
 
 export enum TimestampFormat {
   full = 'full',
@@ -78,7 +79,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   children,
   className,
   customFormat,
-  date: dateProp = new Date(),
+  date: dateProp,
   dateFormat,
   displaySuffix = '',
   is12Hour,
@@ -87,6 +88,24 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   tooltip,
   ...props
 }: TimestampProps) => {
+  const [date, setDate] = React.useState(() => {
+    const initDate = new Date(dateProp);
+    if (isValidDate(initDate)) {
+      return initDate;
+    }
+
+    return new Date();
+  });
+
+  React.useEffect(() => {
+    const dateFromProp = new Date(dateProp);
+    if (isValidDate(dateFromProp) && dateFromProp.toString() !== new Date(date).toString()) {
+      setDate(dateFromProp);
+    } else if (!dateProp) {
+      setDate(new Date());
+    }
+  }, [dateProp]);
+
   const hasTimeFormat = timeFormat && !customFormat;
   const formatOptions = {
     ...(dateFormat && !customFormat && { dateStyle: dateFormat }),
@@ -94,7 +113,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     ...(is12Hour !== undefined && { hour12: is12Hour })
   };
 
-  const dateAsLocaleString = new Date(dateProp).toLocaleString(locale, {
+  const dateAsLocaleString = new Date(date).toLocaleString(locale, {
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: timeFormat })
   });
@@ -102,7 +121,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
 
   const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
   const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
-  const utcDateString = new Date(convertToUTCString(dateProp)).toLocaleString(locale, {
+  const utcDateString = new Date(convertToUTCString(date)).toLocaleString(locale, {
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: utcTimeFormat })
   });
@@ -114,7 +133,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
       {...(tooltip && { tabIndex: 0 })}
       {...props}
     >
-      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(dateProp).toISOString()}>
+      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>

From ee6e22294e9760bf98890e87e33ca4fa399d9598 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 11 Oct 2022 11:48:38 -0400
Subject: [PATCH 2/5] Updated spread props to prevent duplicate datetime
 attribute

---
 packages/react-core/src/components/Timestamp/Timestamp.tsx  | 6 ++++--
 .../__tests__/__snapshots__/Timestamp.test.tsx.snap         | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Timestamp/Timestamp.tsx b/packages/react-core/src/components/Timestamp/Timestamp.tsx
index 043bb622199..6e8a4ddbc94 100644
--- a/packages/react-core/src/components/Timestamp/Timestamp.tsx
+++ b/packages/react-core/src/components/Timestamp/Timestamp.tsx
@@ -127,13 +127,15 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   });
   const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
 
+  const { dateTime, ...propsWithoutDateTime } = props;
+
   const timestamp = (
     <span
       className={css(styles.timestamp, tooltip && styles.modifiers.helpText, className)}
       {...(tooltip && { tabIndex: 0 })}
-      {...props}
+      {...propsWithoutDateTime}
     >
-      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(date).toISOString()}>
+      <time className="pf-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>
diff --git a/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap b/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap
index 57b1ddd0047..6eaa5d032d2 100644
--- a/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap
+++ b/packages/react-core/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <span
     class="pf-c-timestamp"
-    datetime="2022-01-01T00:00:00.000Z"
   >
     <time
       class="pf-c-timestamp__text"

From 382b21075933bb111d64b324308b98fe892c4828 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 12 Oct 2022 11:48:00 -0400
Subject: [PATCH 3/5] Made updates per PR feedback

---
 .../CalendarMonth/CalendarMonth.tsx           |  3 +--
 .../src/components/DatePicker/DatePicker.tsx  |  3 ++-
 .../src/components/Timestamp/Timestamp.tsx    |  2 +-
 .../Timestamp/__tests__/Timestamp.test.tsx    | 19 +++++++++++++++++++
 .../react-core/src/helpers/datetimeUtils.ts   |  4 ++++
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-core/src/helpers/datetimeUtils.ts

diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index 82186d297d9..de0e55165c9 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -8,6 +8,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { getUniqueId } from '../../helpers/util';
+import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
   Sunday = 0,
@@ -109,8 +110,6 @@ const buildCalendar = (year: number, month: number, weekStart: number, validator
 const isSameDate = (d1: Date, d2: Date) =>
   d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
 
-export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
-
 const today = new Date();
 
 /** The main calendar month component. */
diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
index 8ab88887d78..3b8a915917e 100644
--- a/packages/react-core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -6,9 +6,10 @@ import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup } from '../InputGroup/InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
-import { CalendarMonth, CalendarFormat, isValidDate } from '../CalendarMonth';
+import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
+import { isValidDate } from '../../helpers/datetimeUtils';
 
 /** The main date picker component. */
 
diff --git a/packages/react-core/src/components/Timestamp/Timestamp.tsx b/packages/react-core/src/components/Timestamp/Timestamp.tsx
index 6e8a4ddbc94..b1e6a8c0366 100644
--- a/packages/react-core/src/components/Timestamp/Timestamp.tsx
+++ b/packages/react-core/src/components/Timestamp/Timestamp.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
-import { isValidDate } from '../CalendarMonth';
+import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum TimestampFormat {
   full = 'full',
diff --git a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
index def82f4a8fe..ef466dfe0c7 100644
--- a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
+++ b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
@@ -36,12 +36,31 @@ test('Renders with current date by default with default formatting', () => {
   expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
 });
 
+test('Renders with correct datetime attribute with current date by default', () => {
+  render(<Timestamp />);
+  // Because there could be a .001 ms difference in the expected and received datetime value,
+  // we want an ISO value without the ms to expect as the datetime value.
+  const isoDateWithoutMS = new Date().toISOString().split('.')[0];
+
+  expect(screen.getByText(new Date().toLocaleString())).toHaveAttribute(
+    'datetime',
+    expect.stringMatching(isoDateWithoutMS)
+  );
+});
+
 test('Renders passed in date with default formatting', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
   expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument();
 });
 
+test('Renders with correct datetime attribute when date is passed in', () => {
+  const passedDate = new Date(2022, 0, 1);
+  render(<Timestamp date={passedDate} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveAttribute('datetime', passedDate.toISOString());
+});
+
 test('Renders with custom formatting when dateFormat and timeFormat are passed in', () => {
   render(
     <Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.short} />
diff --git a/packages/react-core/src/helpers/datetimeUtils.ts b/packages/react-core/src/helpers/datetimeUtils.ts
new file mode 100644
index 00000000000..708a9e73032
--- /dev/null
+++ b/packages/react-core/src/helpers/datetimeUtils.ts
@@ -0,0 +1,4 @@
+/**
+ * @param {Date} date - A date to check the validity of
+ */
+export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));

From 587fb8ebf668148ab35a21ff68c5690f1707148b Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 12 Oct 2022 12:46:30 -0400
Subject: [PATCH 4/5] Added new utils file to helpers index

---
 packages/react-core/src/helpers/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-core/src/helpers/index.ts b/packages/react-core/src/helpers/index.ts
index d75c87f9765..c2aee2b6820 100644
--- a/packages/react-core/src/helpers/index.ts
+++ b/packages/react-core/src/helpers/index.ts
@@ -10,3 +10,4 @@ export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
 export * from './useInterval';
+export * from './datetimeUtils';

From fadaffca496a7b779adeabf7ced7782d731e8ec6 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 17 Oct 2022 11:05:33 -0400
Subject: [PATCH 5/5] Removed timezone from dates in tests

---
 .../src/components/Timestamp/__tests__/Timestamp.test.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
index ef466dfe0c7..482378b2420 100644
--- a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
+++ b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
@@ -70,7 +70,7 @@ test('Renders with custom formatting when dateFormat and timeFormat are passed i
 });
 
 test('Renders with only date when dateFormat is passed in', () => {
-  render(<Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} dateFormat={TimestampFormat.full} />);
+  render(<Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} />);
 
   expect(screen.getByText('Saturday, January 1, 2022')).toBeInTheDocument();
 });
@@ -171,9 +171,7 @@ test('Renders with pf-m-help-text class when tooltip is passed in with custom va
 });
 
 test('Renders with default tooltip content for default variant', () => {
-  render(
-    <Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} tooltip={{ variant: TimestampTooltipVariant.default }} />
-  );
+  render(<Timestamp date={new Date(2022, 0, 1, 0, 0, 0)} tooltip={{ variant: TimestampTooltipVariant.default }} />);
 
   expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument();
 });
@@ -181,7 +179,7 @@ test('Renders with default tooltip content for default variant', () => {
 test('Renders with custom tooltip suffix for default variant', () => {
   render(
     <Timestamp
-      date={new Date('1 Jan 2022 00:00:00 EST')}
+      date={new Date(2022, 0, 1, 0, 0, 0)}
       tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
     />
   );