Skip to content

Update date display to include year and fix consistency across list and details views #6405

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

Merged
merged 7 commits into from
May 7, 2025
Merged

Update date display to include year and fix consistency across list and details views #6405

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4e7eed1
update date format
pa-lem May 5, 2025
12c74b8
add fragment
pa-lem May 5, 2025
7d18dfb
add util function
pa-lem May 6, 2025
e5e5363
show year only for dates before the current year
pa-lem May 6, 2025
4d8942b
update fragment
pa-lem May 6, 2025
f71cdc0
Merge branch 'stable' into ple-dates
pa-lem May 6, 2025
7bf5a0b
update date format
pa-lem May 7, 2025
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
1 change: 1 addition & 0 deletions changelog/+date-format.fixed.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Update date formatting to include the year for dates before the current year, and ensure consistency between the list and detail views.
8 changes: 6 additions & 2 deletions frontend/app/src/entities/nodes/object/ui/object-table/cells/table-attribute-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { UrlCell } from "@/entities/nodes/object/ui/object-table/cells/url-cell"
import { ATTRIBUTE_KIND } from "@/entities/schema/constants";
import { AttributeKind, AttributeSchema } from "@/entities/schema/types";
import { Dropdown, TextAttribute } from "@/shared/api/graphql/generated/graphql";
import { DateDisplay } from "@/shared/components/display/date-display";
import { warnUnexpectedType } from "@/shared/utils/common";
import { formatRelativeTimeFromNow } from "@/shared/utils/date";

export interface TableAttributeCellProps {
attributeSchema: AttributeSchema;
Expand All @@ -23,7 +23,11 @@ export function TableAttributeCell({ attributeSchema, attributeData }: TableAttr
return <DropdownCell dropdown={attributeData as Dropdown} />;
}
case ATTRIBUTE_KIND.DATETIME: {
return <span className="truncate">{formatRelativeTimeFromNow(attributeData.value)}</span>;
return (
<span className="truncate">
<DateDisplay date={attributeData.value} />
</span>
Comment on lines +27 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why should we not display time anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the goal is to make it consistent, it's a request from CS

Copy link
Contributor Author

@pa-lem pa-lem May 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and there was no details in the previous format, with the component it will be more clear since we have the tooltip for the absolute value and it adapts depending on how old the date is

);
}
case ATTRIBUTE_KIND.BOOLEAN:
case ATTRIBUTE_KIND.CHECKBOX: {
Expand Down
7 changes: 5 additions & 2 deletions frontend/app/src/shared/components/display/date-display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Tooltip } from "@/shared/components/ui/tooltip";
import { classNames } from "@/shared/utils/common";
import { isInPreviousYear } from "@/shared/utils/date";
import { differenceInDays, format, formatDistanceToNow } from "date-fns";

type DateDisplayProps = {
Expand All @@ -23,10 +24,12 @@ export const DateDisplay = (props: DateDisplayProps) => {
const distanceFromNow = differenceInDays(new Date(), dateData);

if (distanceFromNow > 7) {
const dateFormat = isInPreviousYear(dateData) ? "MMM d yyyy" : "MMM d";

return (
<span className="flex items-center flex-wrap">
<Tooltip enabled content={getDateDisplay(date)}>
<span className="text-xs font-normal">{format(dateData, "MMM d")}</span>
<Tooltip enabled content={getDateDisplay(dateData)}>
<span className="text-xs font-normal">{format(dateData, dateFormat)}</span>
</Tooltip>
</span>
);
Expand Down
16 changes: 11 additions & 5 deletions frontend/app/src/shared/utils/date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import { format, formatDistance } from "date-fns";
import { format, formatDistance, getYear } from "date-fns";

export const formatFullDate = (date: string | number | Date) => {
export function formatFullDate(date: string | number | Date) {
return format(date, "dd/MM/yyyy HH:mm");
};
}

export const formatRelativeTimeFromNow = (date: number | Date) => {
export function formatRelativeTimeFromNow(date: number | Date) {
return formatDistance(date, new Date(), { addSuffix: true });
};
}

export function isInPreviousYear(date: string | number | Date) {
const currentYear = getYear(new Date());
const previousYear = currentYear - 1;
return getYear(date) === previousYear;
}
Loading