Date formatting per workspace member settings #6408

lucasbordeau · 2024-07-25T12:56:02Z

Implement date formatting per workspace member settings

We'll need another round to maybe initialize all workspaces on the default settings.

For now the default behavior is to take system settings if nothing is found in DB.

Implement date formatting per workspace member settings We'll need another round to maybe initialize all workspaces on the default settings. For now the default behavior is to take system settings if nothing is found in DB.

lucasbordeau · 2024-07-26T16:33:00Z

@charlesBochet Do we have other places where we should take care of timezone ?

greptile-apps

PR Summary

This pull request introduces date formatting based on workspace member settings, enhancing user customization and localization.

GraphQL Schema Updates: Added enums and fields for date and time formats in packages/twenty-front/src/generated/graphql.tsx.
New Utility Functions: Introduced multiple utility functions for detecting and formatting date and time in packages/twenty-front/src/modules/localization/utils/.
State Management: Added dateTimeFormatState.ts for managing date and time formatting settings.
Component Updates: Modified several components to use new date and time formatting settings, e.g., SettingsAccountsCalendarDisplaySettings.tsx.
File Reorganization: Moved and renamed files for better organization, such as IanaTimeZones.ts and detectTimeZone.ts.

Thorough testing is recommended to ensure compatibility and correctness across different locales and time zones.

_{30 file(s) reviewed, 5 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-07-26T16:37:07Z

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

+            user.workspaceMember.timeZone !== 'system'
+              ? user.workspaceMember.timeZone ?? detectTimeZone()
+              : detectTimeZone(),


Style: Redundant check for user.workspaceMember.timeZone !== 'system'.

greptile-apps · 2024-07-26T16:37:08Z

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

+            user.workspaceMember.timeZone !== 'system'
+              ? user.workspaceMember.timeZone ?? detectTimeZone()
+              : detectTimeZone(),


Style: Simplify time zone assignment logic.

greptile-apps · 2024-07-26T16:37:26Z

packages/twenty-front/src/modules/localization/constants/DateFormat.ts

@@ -0,0 +1,6 @@
+export enum DateFormat {
+  SYSTEM = 'SYSTEM',
+  MONTH_FIRST = 'MMM	d, yyyy', // US


Spelling: The tab character in 'MMM\td, yyyy' should be a space for consistency.

Suggested change

MONTH_FIRST = 'MMM d, yyyy', // US

MONTH_FIRST = 'MMM d, yyyy',

packages/twenty-front/src/modules/localization/utils/detectDateFormat.ts

greptile-apps · 2024-07-26T16:42:01Z

packages/twenty-front/src/modules/localization/utils/formatTimeZoneLabel.ts

+  const ianaTimeZoneParts = ianaTimeZone.split('/');
+  const location =
+    ianaTimeZoneParts.length > 1
+      ? ianaTimeZoneParts.slice(-1)[0].replaceAll('_', ' ')


Spelling: Replace replaceAll with replace for broader compatibility with older environments.

Suggested change

? ianaTimeZoneParts.slice(-1)[0].replaceAll('_', ' ')

.replace(/_/g, ' ')

Weiko · 2024-07-29T14:59:27Z

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

+        // TODO: factorize with UserProviderEffect
+        setDateTimeFormat({
+          timeZone:
+            user.workspaceMember.timeZone !== 'system'


Could be simplified imho

timeZone: workspaceMember.timeZone && workspaceMember.timeZone !== 'system' ? workspaceMember.timeZone : detectTimeZone(),

Weiko · 2024-07-29T15:00:48Z

packages/twenty-front/src/modules/localization/utils/detectDateFormat.ts

@@ -0,0 +1,25 @@
+import { DateFormat } from '@/localization/constants/DateFormat';
+
+export const detectDateFormat = (): DateFormat => {


This seems a bit hacky, I think we can do that with Intl.DateTimeFormat(navigator.language) and analyse its parts with new Date() instead of parsing a raw date

Weiko · 2024-07-29T15:02:15Z

packages/twenty-front/src/modules/localization/utils/findAvailableTimeZoneOption.ts

+ * @param value the IANA time zone to match
+ * @returns the matching available IANA time zone select option or undefined
+ */
+export const findAvailableTimeZoneOption = (value: string) =>


This one already exists in packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts

I suggest we keep it in localization folder but remove the old one

Weiko · 2024-07-29T15:18:28Z

packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx

+      // TODO: factorize
+      setDateTimeFormat({
+        timeZone:
+          workspaceMember.timeZone !== 'system'


Weiko · 2024-07-29T15:23:28Z

...ty-server/src/modules/workspace-member/standard-objects/workspace-member.workspace-entity.ts

+    description: 'User time zone',
+    icon: 'IconTimezone',
+  })
+  @WorkspaceIsNullable()


Not sure we want it to be nullable, especially if we have a defaultValue

Weiko · 2024-07-29T15:47:30Z

...ty-server/src/modules/workspace-member/standard-objects/workspace-member.workspace-entity.ts

+    icon: 'IconCalendarEvent',
+    options: [
+      {
+        value: WorkspaceMemberDateFormatEnum.SYSTEM,


Not sure with the term "system". Same for other fields. Could be confusing wether we are talking about server or client system

Weiko · 2024-07-29T15:49:58Z

...ty-server/src/engine/workspace-manager/workspace-health/commands/workspace-health.command.ts

      }
+
+      const logFilePath = await this.commandLogger.writeLog(


Is this change intended? We are writing logs regardless of dry-run mode?

This reverts commit 26efbf2.

Date formatting per workspace member settings

ad1cd27

Implement date formatting per workspace member settings We'll need another round to maybe initialize all workspaces on the default settings. For now the default behavior is to take system settings if nothing is found in DB.

lucasbordeau self-assigned this Jul 25, 2024

lucasbordeau added 4 commits July 25, 2024 16:57

Improved workspace health command and logger

7838dcf

Added new fields to backend

95c7f60

Added new fields to frontend

45c1ba6

Used new GraphQL generated types

83fce71

This was referenced Jul 25, 2024

Feat/new timezone settings #6398

Closed

add timezone and datetime formatting on workspace member level #5699

Closed

Finished

16b9125

lucasbordeau marked this pull request as ready for review July 26, 2024 16:31

lucasbordeau requested a review from charlesBochet July 26, 2024 16:31

greptile-apps bot reviewed Jul 26, 2024

View reviewed changes

Merge branch 'main' into feat/timezone-workspace-member

6b18524

charlesBochet assigned Weiko and unassigned lucasbordeau Jul 29, 2024

fix missing timezone in timelineactivity + address comments

c4b20f3

Weiko reviewed Jul 29, 2024

View reviewed changes

Weiko added 7 commits July 29, 2024 18:52

rename system to browser

26efbf2

Merge branch 'main' into feat/timezone-workspace-member

a21d8d2

Revert "rename system to browser"

2da13fd

This reverts commit 26efbf2.

fix DateFieldDisplay.perf story

ec44474

Merge branch 'main' into feat/timezone-workspace-member

77b0794

fix ci

23f6d7e

fix coverage

64762be

Weiko approved these changes Jul 30, 2024

View reviewed changes

revert

df2cf7d

Weiko merged commit ccf4d1e into main Jul 30, 2024
13 of 14 checks passed

Weiko deleted the feat/timezone-workspace-member branch July 30, 2024 12:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Date formatting per workspace member settings #6408

Date formatting per workspace member settings #6408

lucasbordeau commented Jul 25, 2024

lucasbordeau commented Jul 26, 2024

greptile-apps bot left a comment

greptile-apps bot Jul 26, 2024

greptile-apps bot Jul 26, 2024

greptile-apps bot Jul 26, 2024

greptile-apps bot Jul 26, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

Weiko Jul 29, 2024

	MONTH_FIRST = 'MMM d, yyyy', // US
	MONTH_FIRST = 'MMM d, yyyy',

	? ianaTimeZoneParts.slice(-1)[0].replaceAll('_', ' ')
	.replace(/_/g, ' ')

		@@ -0,0 +1,25 @@
		import { DateFormat } from '@/localization/constants/DateFormat';

		export const detectDateFormat = (): DateFormat => {

Date formatting per workspace member settings #6408

Date formatting per workspace member settings #6408

Conversation

lucasbordeau commented Jul 25, 2024

lucasbordeau commented Jul 26, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Jul 26, 2024

Choose a reason for hiding this comment

greptile-apps bot Jul 26, 2024

Choose a reason for hiding this comment

greptile-apps bot Jul 26, 2024

Choose a reason for hiding this comment

greptile-apps bot Jul 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment