From 173a88be7c82c190ee78e952846d0a68b9fa6eaf Mon Sep 17 00:00:00 2001 From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> Date: Thu, 1 Dec 2022 17:41:16 +0530 Subject: [PATCH] fix(ui): wrong relative time being rendered (#9098) * fix(ui): wrong relative time being rendered * unit tests added for timeUtils * remove tailwind classes --- .../ActivityFeedList/ActivityFeedList.tsx | 5 + .../resources/ui/src/utils/TimeUtils.test.ts | 38 +++++ .../main/resources/ui/src/utils/TimeUtils.ts | 150 ++---------------- 3 files changed, 58 insertions(+), 135 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.test.ts diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx index 66978573ad8..8d71fdafcc3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx @@ -37,6 +37,7 @@ import { threadFilterList, } from './ActivityFeedList.util'; import FeedListBody from './FeedListBody'; +import FeedListSeparator from './FeedListSeparator'; const ActivityFeedList: FC = ({ className, @@ -251,6 +252,10 @@ const ActivityFeedList: FC = ({ {relativeDays.map((d, i) => { return (
+ { + it("getRelativeDateByTimeStamp should return Today for currentDay's date", () => { + expect(getRelativeDateByTimeStamp(Date.now())).toBe('Today'); + }); + + it("getRelativeDateByTimeStamp should return Yesterday for yesterday's date", () => { + expect( + getRelativeDateByTimeStamp( + new Date('2020/01/01').valueOf(), + new Date('2020/01/02').valueOf() + ) + ).toBe('Yesterday'); + }); + + it('getRelativeDateByTimeStamp should return Last month for past months date', () => { + expect( + getRelativeDateByTimeStamp( + new Date('2020/01/01').valueOf(), + new Date('2020/02/01').valueOf() + ) + ).toBe('Last month'); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts index e070c2111a6..f2bf373a3bc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts @@ -11,147 +11,27 @@ * limitations under the License. */ -import { isNil, toInteger, toNumber } from 'lodash'; +import { capitalize, isNil, toInteger, toNumber } from 'lodash'; import { DateTime, Duration } from 'luxon'; -const msPerSecond = 1000; -const msPerMinute = 60 * msPerSecond; -const msPerHour = msPerMinute * 60; -const msPerDay = msPerHour * 24; -const msPerMonth = msPerDay * 30; -const msPerYear = msPerDay * 365; - -const formattingObj = { - sameDay: "'Today'", - lastDay: "'Yesterday'", - lastWeek: "DDD 'at' hh:mm a", - sameElse: "DDD 'at' hh:mm a", -}; - -const activityFeedTimeFormat = { - sameDay: "'Today at' hh:mm a", - lastDay: "'Yesterday at' hh:mm a", - lastWeek: "'Last' EEEE 'at' hh:mm a", - sameElse: "DDD 'at' hh:mm a", -}; - -/** - * If the difference between the two dates is less than -1, return 'lastWeek'. If the difference is - * less than 0, return 'lastDay'. If the difference is less than 1, return 'sameDay'. Otherwise, return - * 'sameElse'. - * @param {DateTime} myDateTime - The date you want to format. - * @param {DateTime} now - The current date and time. - * @returns A string - */ -const getCalendarFormat = (myDateTime: DateTime, now: DateTime): string => { - const diff = myDateTime.diff(now.startOf('day'), 'days').as('days'); - - if (diff < -7) return 'sameElse'; - else if (diff < 0) return 'lastWeek'; - else if (diff < 1) return 'lastDay'; - - return 'sameDay'; -}; - -export const getRelativeTimeDifference = ( - current: number, - previous: number -): string => { - const elapsed = current - previous; - - if (elapsed <= msPerSecond) { - return 'now'; - } else if (elapsed < msPerMinute / 5) { - return 'a few seconds ago'; - } else if (elapsed < msPerMinute) { - const relativeTime = Math.round(elapsed / msPerSecond); - - return `${relativeTime} second${relativeTime > 1 ? 's' : ''} ago`; - } else if (elapsed < msPerHour) { - const relativeTime = Math.round(elapsed / msPerMinute); - - return `${relativeTime} minute${relativeTime > 1 ? 's' : ''} ago`; - } else if (elapsed < msPerDay) { - const relativeTime = Math.round(elapsed / msPerHour); - - return `${relativeTime} hour${relativeTime > 1 ? 's' : ''} ago`; - } else if (elapsed < msPerMonth) { - const relativeTime = Math.round(elapsed / msPerDay); - - return `${relativeTime} day${relativeTime > 1 ? 's' : ''} ago`; - } else if (elapsed < msPerYear) { - const relativeTime = Math.round(elapsed / msPerMonth); - - return `${relativeTime} month${relativeTime > 1 ? 's' : ''} ago`; - } else { - const relativeTime = Math.round(elapsed / msPerYear); - - return `${relativeTime} year${relativeTime > 1 ? 's' : ''} ago`; - } -}; - -export const getRelativeDayDifference = ( - current: number, - previous: number -): string => { - const elapsed = current - previous; - - if (elapsed < msPerDay / 6) { - return 'in last few hours'; - } else if (elapsed < msPerDay) { - return 'today'; - } else if (elapsed < msPerMonth) { - const relativeTime = Math.round(elapsed / msPerDay); - - return `in last ${relativeTime} day${relativeTime > 1 ? 's' : ''}`; - } else if (elapsed < msPerYear) { - const relativeTime = Math.round(elapsed / msPerMonth); - - return `${relativeTime} month${relativeTime > 1 ? 's' : ''} ago`; - } else { - const relativeTime = Math.round(elapsed / msPerYear); - - return `${relativeTime} year${relativeTime > 1 ? 's' : ''} ago`; - } -}; - -export const getRelativeTime = (timestamp: number): string => { - return getRelativeTimeDifference(Date.now(), timestamp); -}; - -const getFormattedDateTime = ( - dt1: DateTime, - dt2: DateTime, - formattingRulesObj: Record -) => { - const format = getCalendarFormat(dt1, dt2) || 'sameElse'; - - return dt1.toFormat(formattingRulesObj[format]); -}; - -export const getRelativeDay = (timestamp: number): string => { - return getRelativeDayDifference(Date.now(), timestamp); -}; - -export const getRelativeDateByTimeStamp = (timeStamp: number): string => { - return getFormattedDateTime( - DateTime.fromMillis(timeStamp), - DateTime.now(), - formattingObj - ); -}; - export const getTimeByTimeStamp = (timeStamp: number): string => DateTime.fromMillis(timeStamp).toFormat('hh:mm a'); -export const getDayTimeByTimeStamp = (timeStamp: number): string => { - return getFormattedDateTime( - DateTime.fromMillis(timeStamp), - DateTime.now(), - activityFeedTimeFormat +export const getRelativeDateByTimeStamp = ( + timeStamp: number, + baseTimeStamp?: number +): string => { + return capitalize( + DateTime.fromMillis(timeStamp).toRelativeCalendar({ + base: baseTimeStamp ? DateTime.fromMillis(baseTimeStamp) : DateTime.now(), + }) || '' ); }; +export const getDayTimeByTimeStamp = (timeStamp: number): string => { + return DateTime.fromMillis(timeStamp).toRelative() || ''; +}; + export const getUTCDateTime = (dateTime: string) => { const dateObject = new Date(dateTime); @@ -197,8 +77,8 @@ export const getDateByTimeStamp = ( * It takes a timestamp and returns a relative date time string * @param {number} timestamp - number - The timestamp to convert to a relative date time. */ -export const getRelativeDateTimeByTimeStamp = (timestamp: number) => - DateTime.fromMillis(timestamp as number).toRelative(); +export const getRelativeDateTimeByTimeStamp = (timestamp: number): string => + DateTime.fromMillis(timestamp as number).toRelative() || ''; export const getLocaleDateFromTimeStamp = (timeStamp: number): string => { return DateTime.fromMillis(timeStamp).toISO({ includeOffset: false });