Skip to content
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.

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

Feat: Timezone picker feature #6474

Open
wants to merge 31 commits into
base: develop
Choose a base branch
from
Open

Conversation

ahmadshaheer
Copy link
Collaborator

@ahmadshaheer ahmadshaheer commented Nov 19, 2024

Summary

  • Display timezone in time picker input
    image

  • Timezone hint UI
    image

  • Timezone Picker UI
    image

  • Timezone Picker basic functionality:

    • Add support for esc -> close timezone picker
    • Add selected timezone to the url
    • Search timezones
  • Timezone Preferences UI
    image

    image

    • Default
    • Timezone overridden
  • helper to get all timezones

Related Issues / PR's

part of https://github.com/SigNoz/engineering-pod/issues/2005

Screenshots

Affected Areas and Manually Tested Areas


Important

Add timezone picker and preferences UI components with search and selection functionality.

  • UI Components:
    • Add TimezonePicker in TimezonePicker.tsx for selecting timezones with search functionality.
    • Add TimezoneAdaptation in TimezoneAdaptation.tsx for managing timezone preferences.
    • Update CustomTimePicker.tsx to integrate timezone picker and display current timezone.
  • Styles:
    • Add styles for TimezonePicker in TimezonePicker.styles.scss.
    • Add styles for TimezoneAdaptation in TimezoneAdaptation.styles.scss.
    • Update CustomTimePicker.styles.scss for new UI elements.
  • Functionality:
    • Implement timezone search and selection in TimezonePicker.tsx.
    • Add keyboard shortcut to close timezone picker using escape key in TimezonePickerShortcuts.ts.
    • Add helper functions in timezoneUtils.ts to manage timezone data.
  • Dependencies:
    • Add @vvo/tzdb to package.json for timezone data.

This description was created by Ellipsis for 2c2b9ee. It will automatically update as commits are pushed.

@github-actions github-actions bot added the enhancement New feature or request label Nov 19, 2024
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

1 similar comment
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Reviewed everything up to 49e2956 in 1 minute and 8 seconds

More details
  • Looked at 819 lines of code in 10 files
  • Skipped 1 files when reviewing.
  • Skipped posting 6 drafted comments based on config settings.
1. frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx:1
  • Draft comment:
    Consider renaming the file and class names from TimezoneAdaption to TimezoneAdaptation for consistency and clarity.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The file name and class names use 'Adaption', which is a less common variant of 'Adaptation'. It's better to use 'Adaptation' for consistency and clarity.
2. frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaption.styles.scss:1
  • Draft comment:
    Consider renaming the file and class names from TimezoneAdaption to TimezoneAdaptation for consistency and clarity.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The file name and class names use 'Adaption', which is a less common variant of 'Adaptation'. It's better to use 'Adaptation' for consistency and clarity.
3. frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss:129
  • Draft comment:
    Consider using the $font-family variable for consistency in font-family declarations.
  • Reason this comment was not posted:
    Confidence changes required: 30%
    The SCSS file uses a variable for font-family, but it is not used consistently across all styles. It's better to use the variable for consistency.
4. frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss:21
  • Draft comment:
    Consider using the $font-family variable for consistency in font-family declarations.
  • Reason this comment was not posted:
    Confidence changes required: 30%
    The SCSS file uses a variable for font-family, but it is not used consistently across all styles. It's better to use the variable for consistency.
5. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:21
  • Draft comment:
    Avoid using any[] for the options prop. Define a specific type for better type safety.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The use of any[] for the options prop is not type-safe. It's better to define a specific type for the options to ensure type safety.
6. frontend/src/components/CustomTimePicker/TimezonePicker.tsx:109
  • Draft comment:
    The selected timezone should be fetched from the user's preferences. Ensure this is addressed in future updates.
  • Reason this comment was not posted:
    Confidence changes required: 30%
    The TODO comment indicates that the selected timezone should be fetched from the user's preferences. This is a placeholder and should be addressed in future updates.

Workflow ID: wflow_y9BNYYx5yDtlfAig


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

frontend/src/container/MySettings/index.tsx Outdated Show resolved Hide resolved
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

1 similar comment
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Incremental review on 984f382 in 40 seconds

More details
  • Looked at 47 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 1 drafted comments based on config settings.
1. frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx:1
  • Draft comment:
    Ensure that all class names in this file are updated to match the corrected spelling TimezoneAdaptation for consistency.
  • Reason this comment was not posted:
    Comment did not seem useful.

Workflow ID: wflow_xzPtmfS2aqfH7xYo


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

frontend/src/container/MySettings/index.tsx Show resolved Hide resolved
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 14ccada in 30 seconds

More details
  • Looked at 16 lines of code in 1 files
  • Skipped 0 files when reviewing.
  • Skipped posting 1 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/CustomTimePicker.tsx:356
  • Draft comment:
    Ensure that e.stopPropagation() is necessary here and doesn't interfere with other components' event handling.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The event.stopPropagation() is correctly used to prevent the click event from bubbling up, which is necessary for the intended functionality. However, it's important to ensure that this is the intended behavior and doesn't interfere with other components.

Workflow ID: wflow_okQw3kLLeC2Dtye5


You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

@ahmadshaheer ahmadshaheer changed the base branch from develop to feat/timezone-picker-base-branch November 19, 2024 09:34
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

1 similar comment
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on ff7da5c in 35 seconds

More details
  • Looked at 126 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 3 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/timezoneUtils.ts:80
  • Draft comment:
    Consider throwing an error or handling the invalid timezone type case more gracefully in the default case of the switch statement.
  • Reason this comment was not posted:
    Comment looked like it was already resolved.
2. frontend/src/components/CustomTimePicker/TimezonePicker.tsx:122
  • Draft comment:
    Ensure consistency by using timezone.value instead of timezone.name when setting selectedTimezone.
  • Reason this comment was not posted:
    Comment did not seem useful.
3. frontend/src/components/CustomTimePicker/TimezonePicker.tsx:120
  • Draft comment:
    Avoid using inline styles for the Search and Check components. Consider using CSS classes or styled components instead. This applies to other instances in the file as well.
  • Reason this comment was not posted:
    Decided after close inspection that this draft comment was likely wrong and/or not actionable:
    The comment is not relevant to the changes made in the diff. The diff does not introduce or modify any inline styles for the Search and Check components. The components are using color constants, which is a good practice.
    I might be missing some context about the rest of the file, but based on the diff and the provided file content, there are no inline styles being used for the Search and Check components.
    The provided file content confirms that there are no inline styles for the Search and Check components, so the comment is not applicable to the changes made.
    The comment is not about a change made in the diff and should be deleted. It does not apply to the current state of the file.

Workflow ID: wflow_TfdwKZk4e0cJUtk0


You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 20e00c5 in 49 seconds

More details
  • Looked at 76 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:61
  • Draft comment:
    Consider explicitly defining a default timezone instead of using TIMEZONE_DATA[0].value to avoid potential issues if TIMEZONE_DATA is empty.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The code uses the useMemo hook to calculate activeTimezoneOffset based on the URL query parameter timezone. This is a good practice to avoid unnecessary calculations on every render. However, the default value for timezone is set to TIMEZONE_DATA[0].value, which might not be the intended default timezone. It would be better to explicitly define a default timezone or handle the case where TIMEZONE_DATA might be empty.
2. frontend/src/components/CustomTimePicker/CustomTimePicker.tsx:95
  • Draft comment:
    Consider explicitly defining a default timezone instead of using TIMEZONE_DATA[0].value to avoid potential issues if TIMEZONE_DATA is empty. This comment also applies to CustomTimePickerPopoverContent.tsx.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The code uses the useMemo hook to calculate activeTimezoneOffset based on the URL query parameter timezone. This is a good practice to avoid unnecessary calculations on every render. However, the default value for timezone is set to TIMEZONE_DATA[0].value, which might not be the intended default timezone. It would be better to explicitly define a default timezone or handle the case where TIMEZONE_DATA might be empty.

Workflow ID: wflow_ApLoHiZ46YSEW3rL


You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link
Contributor

@SagarRajput-7 SagarRajput-7 left a comment

Choose a reason for hiding this comment

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

Please check the comments

Copy link

github-actions bot commented Dec 4, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 952258c in 33 seconds

More details
  • Looked at 27 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:128
  • Draft comment:
    Ensure that the class name change to date-time-popover__footer is consistently applied across the codebase to avoid styling issues.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The class name change from date-time-popover-footer to date-time-popover__footer should be consistently applied across the codebase. The change is correctly reflected in the JSX, ensuring the styles are applied as intended.
2. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:130
  • Draft comment:
    Use design tokens or predefined color constants instead of hardcoding color values for consistency. This applies to the Clock component color property.
  • Reason this comment was not posted:
    Comment was on unchanged code.

Workflow ID: wflow_D4Jnj9z1mT6DCKt0


You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

@YounixM YounixM changed the base branch from feat/timezone-picker-base-branch to develop December 5, 2024 12:31
@YounixM YounixM changed the base branch from develop to feat/timezone-picker-base-branch December 5, 2024 12:32
Copy link

github-actions bot commented Dec 5, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link

github-actions bot commented Dec 8, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Incremental review on 031d8ce in 48 seconds

More details
  • Looked at 52 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:138
  • Draft comment:
    Consider providing a default value or handling the case where activeTimezoneOffset might be undefined to avoid potential issues.
  • Reason this comment was not posted:
    Comment was on unchanged code.
2. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:130
  • Draft comment:
    Avoid using inline styles for the Clock and Pencil components. Consider using CSS classes or styled components instead.
  • Reason this comment was not posted:
    Comment was on unchanged code.

Workflow ID: wflow_K1ezEeo79gOvxq8v


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link

github-actions bot commented Dec 9, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Incremental review on eb5d38d in 48 seconds

More details
  • Looked at 183 lines of code in 5 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss:33
  • Draft comment:
    Avoid hardcoding color values like rgba(171, 189, 255, 0.04). Use design tokens or predefined color constants instead. This issue is also present on lines 95 and 107.
  • Reason this comment was not posted:
    Marked as duplicate.
2. frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.styles.scss:85
  • Draft comment:
    Avoid hardcoding color values like rgba(78, 116, 248, 0.1). Use design tokens or predefined color constants instead. This issue is also present on line 86.
  • Reason this comment was not posted:
    Marked as duplicate.

Workflow ID: wflow_whiiunDxo2R52E6H


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link

github-actions bot commented Dec 9, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Incremental review on b0808a2 in 41 seconds

More details
  • Looked at 13 lines of code in 1 files
  • Skipped 0 files when reviewing.
  • Skipped posting 1 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss:169
  • Draft comment:
    There's a typo in the CSS variable name var(---bg-ink-400). It should be var(--bg-ink-400).
  • Reason this comment was not posted:
    Marked as duplicate.

Workflow ID: wflow_AUamqxKEawKMFEvy


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

@ahmadshaheer ahmadshaheer changed the title Feat: Timezone picker, timezone preferences, and timezone hint UI Feat: Timezone picker feature Dec 9, 2024
Copy link

github-actions bot commented Dec 9, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link

github-actions bot commented Dec 9, 2024

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 72ebb0e in 36 seconds

More details
  • Looked at 18 lines of code in 1 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:161
  • Draft comment:
    The span element containing activeTimezoneOffset has been moved before the PenLine icon. Ensure this change does not negatively affect the layout or user experience.
  • Reason this comment was not posted:
    Confidence changes required: 33%
    The span element containing activeTimezoneOffset is moved before the PenLine icon. This change is likely intentional for better UI/UX, but it's important to ensure that this change does not affect the layout negatively.
2. frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx:166
  • Draft comment:
    Avoid using inline styles for the PenLine component. Instead, use CSS classes or styled components for styling. This is also applicable to the Clock component.
  • Reason this comment was not posted:
    Comment was on unchanged code.

Workflow ID: wflow_VXjBwtEw0OSbvAcs


You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 2c2b9ee in 28 seconds

More details
  • Looked at 116 lines of code in 3 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx:18
  • Draft comment:
    Ensure that the dependency array for useMemo includes timezone.offset and browserTimezone.offset directly to ensure correct updates.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The useMemo hook is used to memoize the isTimezoneOverridden value, which is a good practice. However, the dependency array should include timezone.offset and browserTimezone.offset directly to ensure it updates correctly when these specific values change.
2. frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx:25
  • Draft comment:
    Avoid using inline styles in React components. Consider using external stylesheets, CSS classes, or styled components instead. This is also applicable to line 39.
  • Reason this comment was not posted:
    Comment was not on a valid diff hunk.

Workflow ID: wflow_CjubGLsOjyz3g5RR


You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request testing-deploy
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants