feat: refactor date picker components and remove deprecated code #3003

AbhishekA1509 · 2025-12-01T08:00:52Z

Description

This pull request refactors the way expiration dates are handled for API tokens, moving from using moment and custom types to a more standardized approach with dayjs and shared types from the common library. The changes improve type safety, maintainability, and UI consistency for selecting and displaying expiration dates.

Expiration date handling and UI improvements:

Replaced moment and custom date types with dayjs and standardized types (ExpirationDateSelectOptionType) throughout API token components, including CreateAPIToken, EditAPIToken, and RegenerateModal. [1] [2] [3] [4] [5] [6] [7]
Updated the expiration date picker to use the shared DateTimePicker component and improved option handling with typed values, enhancing the UI and code reliability. [1] [2] [3]
Standardized date formatting across the API token list and edit screens using DATE_TIME_FORMATS from the common library, ensuring consistent display of dates. [1] [2] [3] [4] [5]
Improved type safety for expiration date selection and custom date handling in state and props, replacing loose objects and numbers with explicit types. [1] [2] [3] [4]

Dependency cleanup:

Removed unused react-dates and its type definitions from package.json, as date handling is now done via shared components and libraries. [1] [2]

Fixes https://github.com/devtron-labs/sprint-tasks/issues/2714

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Test A
Test B

Checklist:

The title of the PR states what changed and the related issues number (used for the release note).
Does this PR require documentation updates?
I've updated documentation as required by this PR.
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas

- Introduced a new DateTimePicker component to replace the existing SingleDatePicker and DayPickerRangeController. - Updated DeploymentMetrics and CustomLogsModal to utilize the new DateTimePicker for date selection. - Removed unused styles and components related to the old date picker implementation. - Added utility functions for generating date range options for the new date picker. - Cleaned up imports and adjusted type definitions to accommodate the new date handling logic.

github-actions · 2025-12-01T08:01:04Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

github-actions · 2025-12-01T08:03:23Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

…, GraphModal, and DeploymentMetrics components

AbhishekA1509 · 2025-12-01T09:07:17Z

src/components/app/details/appDetails/AppMetrics.tsx

            startDate: startStr,
            endDate: 'now',
        })
-        const str = getCalendarValue(startStr, 'now')


Need to check if now-5m and now - 5m are same?

…ency and readability

…nto feat/day-picker

Copilot

Pull request overview

This pull request refactors date handling across the application, migrating from react-dates and custom date picker components to a standardized DateTimePicker component from the common library. The changes improve type safety and maintainability by using dayjs and shared types instead of moment and custom implementations.

Key Changes

Replaced react-dates dependency with react-day-picker (via common library update to v1.21.0-beta-2)
Migrated API token expiration date handling to use standardized ExpirationDateSelectOptionType and shared DateTimePicker component
Refactored app metrics and deployment metrics to use the new DateTimePicker with proper range selection and preset options
Removed deprecated custom calendar components and associated CSS

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
package.json	Updated common library to v1.21.0-beta-2 and removed react-dates dependency
yarn.lock	Updated dependency lockfile with new common library version and removed react-dates related packages
src/config/constants.ts	Removed unused MomentDateFormat constant
src/components/common/index.ts	Removed export of deprecated calendar components
src/components/common/DatePickers/calendar.css	Deleted deprecated custom calendar styles
src/components/common/DatePickers/Calender.tsx	Deleted deprecated custom calendar component
src/components/app/details/metrics/utils.ts	Added utility functions for date range shortcut options
src/components/app/details/metrics/deploymentMetrics.types.ts	Removed focusedInput state property
src/components/app/details/metrics/DeploymentMetrics.tsx	Migrated to DateTimePicker with range selection and shortcuts
src/components/app/details/appDetails/utils.tsx	Refactored calendar utilities to use preset options pattern
src/components/app/details/appDetails/types.ts	Added GrafanaPresetOptionHandlerType type definition
src/components/app/details/appDetails/appDetails.type.ts	Removed deprecated CalendarFocusInput enum and type
src/components/app/details/appDetails/GraphsModal.tsx	Refactored to use DateTimePicker with range selection
src/components/app/details/appDetails/AppMetrics.tsx	Refactored to use DateTimePicker with range selection
src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx	Migrated to DateTimePicker component
src/Pages/GlobalConfigurations/Authorization/APITokens/types.ts	Added ExpirationDateSelectOptionType and ExpirationDateProps
src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.utils.ts	Updated getOptions to use typed SelectPickerOptionType
src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts	Added type annotations for expiration date props
src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx	Updated to use typed expiration date handling
src/Pages/GlobalConfigurations/Authorization/APITokens/ExpirationDate.tsx	Migrated to DateTimePicker and DATE_TIME_FORMATS
src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx	Updated date formatting to use DATE_TIME_FORMATS
src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx	Updated to use typed expiration date handling
src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx	Added type annotation for selectedExpirationDate
src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx	Updated date formatting to use DATE_TIME_FORMATS

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-08T06:28:51Z

src/components/app/details/metrics/DeploymentMetrics.tsx

        meanRecoveryTime: 0,
        benchmarkModalData: undefined,
        startDate: moment().set({ hour: 0, minute: 0, seconds: 0 }).subtract(6, 'months'),
        endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),


The seconds property should be second (singular) when using moment's set() method. Moment.js uses singular forms for time unit properties.

Change to:

endDate: moment().set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),

Also, milliseconds should be millisecond (singular).

Suggested change

endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),

endDate: moment().set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),

Copilot · 2025-12-08T06:28:51Z

src/components/app/details/metrics/DeploymentMetrics.tsx

+            startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, seconds: 0 }),
+            endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),


The seconds and milliseconds properties should be singular (second and millisecond) when using moment's set() method. Moment.js uses singular forms for time unit properties.

Change to:

endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),

Suggested change

startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, seconds: 0 }),

endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),

startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, second: 0 }),

endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),

Copilot · 2025-12-08T06:28:51Z

src/Pages/GlobalConfigurations/Authorization/APITokens/ExpirationDate.tsx

+                    {moment(getDateInMilliseconds(selectedExpirationDate.value)).format(
+                        DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM,
+                    )}


The function getDateInMilliseconds expects a number (days), but selectedExpirationDate.value can be either a number or a Date when "Custom" is selected. This will cause incorrect calculations or runtime errors when a custom date is selected.

The code should check the type before calling getDateInMilliseconds:

{moment(typeof selectedExpirationDate.value === 'number' ? getDateInMilliseconds(selectedExpirationDate.value) : selectedExpirationDate.value ).format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM)}

Suggested change

{moment(getDateInMilliseconds(selectedExpirationDate.value)).format(

DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM,

)}

{typeof selectedExpirationDate.value === 'number'

? moment(getDateInMilliseconds(selectedExpirationDate.value)).format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM)

: ''}

Copilot · 2025-12-08T06:28:52Z

src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx

+        const parsedMilliseconds = selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value)
+
+        setRegeneratedExpireAtInMs(
+            typeof selectedOption.value === 'number' ? parsedMilliseconds : selectedOption.value.valueOf(),
+        )


The function getDateInMilliseconds is being called with selectedOption.value which can be either a number (days) or a Date object (when "Custom" is selected), but the function only accepts numbers. This will cause incorrect behavior.

The logic should be:

const parsedMilliseconds = selectedOption.value === 0 ? 0 : typeof selectedOption.value === 'number' ? getDateInMilliseconds(selectedOption.value) : selectedOption.value.valueOf()

Suggested change

const parsedMilliseconds = selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value)

setRegeneratedExpireAtInMs(

typeof selectedOption.value === 'number' ? parsedMilliseconds : selectedOption.value.valueOf(),

)

const parsedMilliseconds = selectedOption.value === 0

? 0

: typeof selectedOption.value === 'number'

? getDateInMilliseconds(selectedOption.value)

: selectedOption.value.valueOf()

setRegeneratedExpireAtInMs(parsedMilliseconds)

Copilot · 2025-12-08T06:28:52Z

src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx

-    const onChangeSelectFormData = (selectedOption: { label: string; value: number }) => {
+    const onChangeSelectFormData = (selectedOption: ExpirationDateSelectOptionType) => {
        setSelectedExpirationDate(selectedOption)
+        const parsedMilliseconds = selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value)


The function getDateInMilliseconds is being called with selectedOption.value which can be either a number (days) or a Date object (when "Custom" is selected), but the function only accepts numbers. This will cause incorrect behavior.

The logic should be:

const parsedMilliseconds = selectedOption.value === 0 ? 0 : typeof selectedOption.value === 'number' ? getDateInMilliseconds(selectedOption.value) : selectedOption.value.valueOf()

Copilot · 2025-12-08T06:28:52Z

src/Pages/GlobalConfigurations/Authorization/APITokens/ExpirationDate.tsx

+                    id="expiration-date-picker"
+                    date={customDate}
+                    onChange={handleDatesChange}
+                    isTodayBlocked


The DateTimePicker component is missing the hideTimeSelect prop. Since this is for selecting an expiration date (not time), the time selection should be hidden for consistency with other date pickers in the codebase and to avoid confusion.

Add:

<DateTimePicker id="expiration-date-picker" date={customDate} onChange={handleDatesChange} isTodayBlocked hideTimeSelect />

Suggested change

isTodayBlocked

isTodayBlocked

hideTimeSelect

Copilot · 2025-12-08T06:28:53Z

src/components/app/details/metrics/DeploymentMetrics.tsx

+            startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, seconds: 0 }),
+            endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),


The seconds property should be second (singular) when using moment's set() method. Moment.js uses singular forms for time unit properties.

Change to:

startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, second: 0 }),

Suggested change

startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, seconds: 0 }),

endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),

startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, second: 0 }),

endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, second: 59, milliseconds: 999 }),

Copilot · 2025-12-08T06:28:53Z

src/components/app/details/metrics/DeploymentMetrics.tsx

        startDate: moment().set({ hour: 0, minute: 0, seconds: 0 }).subtract(6, 'months'),
        endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),


The seconds property should be second (singular) when using moment's set() method. Moment.js uses singular forms for time unit properties.

Change to:

startDate: moment().set({ hour: 0, minute: 0, second: 0 }).subtract(6, 'months'),

Suggested change

startDate: moment().set({ hour: 0, minute: 0, seconds: 0 }).subtract(6, 'months'),

endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),

startDate: moment().set({ hour: 0, minute: 0, second: 0 }).subtract(6, 'months'),

endDate: moment().set({ hour: 23, minute: 59, second: 59, milliseconds: 999 }),

…X in SSOLogin and EphemeralContainerDrawer fix: update workflowId to ciPipelineId in BranchRegexModal and GitInfoMaterial chore: update types for configMap to use SwitchItemValues enum

sonarqubecloud · 2025-12-08T10:50:20Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

AbhishekA1509 self-assigned this Dec 1, 2025

AbhishekA1509 requested review from vikramdevtron and vivek-devtron as code owners December 1, 2025 08:00

github-actions bot added the PR:Issue-verification-failed PR:Issue-verification-failed label Dec 1, 2025

AbhishekA1509 changed the title ~~feat: Refactor date picker components and remove deprecated code~~ feat: refactor date picker components and remove deprecated code Dec 1, 2025

github-actions bot added PR:Ready-to-Review PR:Ready-to-Review and removed PR:Issue-verification-failed PR:Issue-verification-failed labels Dec 1, 2025

Update dependencies and implement date range validation in AppMetrics…

c787c72

…, GraphModal, and DeploymentMetrics components

AbhishekA1509 commented Dec 1, 2025

View reviewed changes

Refactor date range options in getAppMetricsPresetOptions for consist…

e632f6f

…ency and readability

vivek-devtron previously approved these changes Dec 8, 2025

View reviewed changes

Merge branch 'develop' of https://github.com/devtron-labs/dashboard i…

2c04ae6

…nto feat/day-picker

Copilot AI review requested due to automatic review settings December 8, 2025 06:22

AbhishekA1509 dismissed vivek-devtron’s stale review via 2c04ae6 December 8, 2025 06:22

Copilot started reviewing on behalf of AbhishekA1509 December 8, 2025 06:22 View session

Copilot AI reviewed Dec 8, 2025

View reviewed changes

AbhishekA1509 changed the base branch from kubecon-2025 to develop December 8, 2025 06:38

refactor: replace Switch component with SegmentedControl for better U…

9a2a895

…X in SSOLogin and EphemeralContainerDrawer fix: update workflowId to ciPipelineId in BranchRegexModal and GitInfoMaterial chore: update types for configMap to use SwitchItemValues enum

vivek-devtron approved these changes Dec 8, 2025

View reviewed changes

	endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),
	endDate: moment().set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),

		startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, seconds: 0 }),
		endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),

		startDate: moment().set({ hour: 0, minute: 0, seconds: 0 }).subtract(6, 'months'),
		endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }),

feat: refactor date picker components and remove deprecated code #3003

Are you sure you want to change the base?

feat: refactor date picker components and remove deprecated code #3003

Uh oh!

Conversation

AbhishekA1509 commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Checklist:

Uh oh!

github-actions bot commented Dec 1, 2025

Uh oh!

github-actions bot commented Dec 1, 2025

Uh oh!

AbhishekA1509 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Dec 8, 2025

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AbhishekA1509 commented Dec 1, 2025 •

edited

Loading