change: [UIE-8889] - DBaaS - Database Backups time selector to handle hours, minutes, seconds, and manual input by smans-akamai · Pull Request #12868 · linode/manager

smans-akamai · 2025-09-11T19:43:38Z

Description 📝

This pull request makes a change to the Database Backups time selector so it can handle hours, minutes, seconds, and manual input.

This also makes a change to the TimePicker and DateTimeRangePicker components to fix an issue where modifying the value for the time picker would cause it to re-render after every change.

This was interfering with the time picker selection behavior.

Changes 🔄

List any change(s) relevant to the reviewer.

Changes time selector in Database Backups to support hours, minutes, seconds, and manual input
Fixes issue with TimePicker re-rendering by updating key usage for TimePicker and DateTimeRangePicker components

Scope 🚢

Upon production release, changes in this PR will be visible to:

All customers
Some customers (e.g. in Beta or Limited Availability)
No customers / Not applicable

Target release date 🗓️

9/23/2025

Preview 📷

Database Backups Time Selector Default State

Before	After

Database Backups Time Selector Open Selector State

Before	After

Time Picker Selection Behavior in DateTimeRangePicker
Before
https://github.com/user-attachments/assets/753382cf-9902-4b55-8260-e6f52ad86630
After
https://github.com/user-attachments/assets/22666d78-509f-4a6d-928b-6a527fb675f2

How to test 🧪

Prerequisites

(How to setup test environment)

Have access to the Databases tab with databases created
Have active database clusters with available backups (You can view this with mock data)
Access to the the metrics tab in Database Details (You view this with mock data)

Reproduction steps

(How to reproduce the issue, if applicable)

Time Picker Component Selection Bug that can be seen in DateTimeRangePicker

In Database Details, access the metrics tab and open the DateTimeRangePicker popover by selecting either the "Start Date" or "End Date" time picker fields on the right.
Select either the "Start Time" or "End Time" time picker fields to open the time picker popover
Make a selection for hours, minutes, AM/PM and see that, after every selection, the time picker popover closes immediately ad you have to reopen it to make further changes

Verification steps

(How to verify changes)
Note: In case you don't have active clusters. You should be able to test these steps with mock data.

DatabaseBackups Date and Time Selection Verification

Navigate to the Databases Tab and access the details for an active database cluster.
Navigate to the Backups tab in database details
Under Restore a Backup select the Specific date & time radio button
Select an available date to enable the time selector (time picker component)
Verify that you can modify hours, minutes and seconds either through manual input or by selecting the time icon on the right side of the field to open the popover.
Make a valid time selection, either through the time picker popover or manually.
Verify that the Restore button is enabled
Selected Restore to open the dialog and verify that the text under the dialog header accurately reflects the current selection.
With the network tab open, select restore and verify that the payload for the database instance POST request includes restore_time with an ISO string that accurately reflects your date and time selection.

Backups - Disabling and Validation Verification
Validation for date/time selections before earliest backup

Following the initial steps above for navigating to Backups and enabling the time picker
Select the earliest available date in the calendar (This can go back up to 2 weeks, so you may need to navigate back to the previous month in the calendar)
Verify that the hours, minutes, and seconds selections that would put your selection before the oldest_restore_time retrieved from the database instance GET call are disabled in the popover.
Verify that manually entering in earlier times throws a validation error and disables the Restore button

Validation for date/time selections after current date/time

Select the current date in the calendar
Verify that the hours, minutes, and seconds that would occur after the current date/time are disabled
Verify that manually entering in future times into the field throws a validation error and disables the Restore button
Verify that when individual values are cleared in the time selector, the field is cleared of any values and an invalid date format validation error message is displayed.
Time Picker input clears when switching back to 'Newest full backup plus incremental' radio option
Verify that any input in the time selector is cleared when the Restore a Backup radio options are switched back to Newest full backup plus incremental.

DateTimeRange and Time Picker Selection Behavior Verification
Note: This change can be tested in the Database Details Metrics tab

Navigate to the Databases Tab and access the details for an active database cluster.
In Database Details, access the metrics tab and open the DateTimeRangePicker popover by selecting either the "Start Date" or "End Date" fields.
In the popover, select either the "Start Time" or "End Time" time picker fields to open the time picker popover
Make a selection and verify that the popover does not close immediately after every selection (ie. hour, minute, AM/PM) until a complete selection is made.
Verify that switching to a timezone with a different offset updates the times in Start Time and End Time time pickers.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All tests and CI checks are passing

Handling of failing E2E tests related to DateTimeRangePicker and Time Picker fixes to be discussed in PR

TypeScript compilation succeeded without errors
Code passes all linting rules

smans-akamai · 2025-09-11T23:01:41Z

@cpathipa Regarding the failing E2E test in timerange-verification.spec.ts. This failing test is related to the TimePicker and DateTimeRangePicker fixes. Discussed this test failling with @nikhagra-akamai, and he mentioned that his team would handle updating the failing E2E test.

smans-akamai · 2025-09-11T23:04:02Z

                  value={startDate}
                />
                <TimePicker
+                  key={`end-time-picker}-${timeZone}`}


@nikhagra-akamai @cpathipa Here are the changes we discussed, moving up the key up from the TimePicker and having it track changes to the timezone instead.

smans-akamai · 2025-09-11T23:09:01Z

+      hour: selectedTime?.hour,
+      minute: selectedTime?.minute,
+      second: selectedTime?.second,
+    })


@cpathipa Regarding the changes to DatabaseBackups. This logic revolved around selecting a Date from the calendar and a Time from the time picker/selector. Now that we handle hours, minutes, and seconds, I've updated the utility functions to manage DateTime objects for the selectedTime instead.

In the end, we take the hours, minutes, and seconds from the TimePicker selection and apply them to the selected date. This is what gets sent to the backend and displayed in the dialog.

nikhagra-akamai · 2025-09-12T14:05:26Z

@cpathipa Regarding the failing E2E test in timerange-verification.spec.ts. This failing test is related to the TimePicker and DateTimeRangePicker fixes. Discussed this test failling with @nikhagra-akamai, and he mentioned that his team would handle updating the failing E2E test.

@agorthi-akamai can you please take a look at the failing timerange cypress

smans-akamai · 2025-09-12T14:20:36Z

@cpathipa Regarding the failing E2E test in timerange-verification.spec.ts. This failing test is related to the TimePicker and DateTimeRangePicker fixes. Discussed this test failling with @nikhagra-akamai, and he mentioned that his team would handle updating the failing E2E test.

@agorthi-akamai can you please take a look at the failing timerange cypress

Thanks @agorthi-akamai! I've merged in the pull requestthat was opened against my branch to fix the failing E2E test
CC: @nikhagra-akamai @cpathipa

cpathipa

LGTM!

cpathipa · 2025-09-12T14:08:37Z

+"@linode/manager": Changed
+---
+
+DBaaS Backups time selector supports hours, minutes, seconds, and manual input using Linode Time Picker ([#12868](https://github.com/linode/manager/pull/12868))


Suggested change

DBaaS Backups time selector supports hours, minutes, seconds, and manual input using Linode Time Picker ([#12868](https://github.com/linode/manager/pull/12868))

DBaaS Backups time selector now supports hours, minutes, seconds, and manual input using the Linode Time Picker ([#12868](https://github.com/linode/manager/pull/12868))

… hours, minutes, seconds, and manual input. Fixing bug in time picker component.

…e so that input clears completely

…nge verification spec

dwiley-akamai

All verification steps observed ✅
Code review ✅

dwiley-akamai · 2025-09-15T16:45:08Z

+    return isOnMaxDate ? today : undefined;
+  };
+
+  const handleOnVersionOptionChange = (_: any, value: VersionOption) => {


Suggested change

const handleOnVersionOptionChange = (_: any, value: VersionOption) => {

const handleOnVersionOptionChange = (_: React.ChangeEvent<HTMLInputElement>, value: VersionOption) => {

Thanks! I've updated the type for this handler.

linode-gh-bot · 2025-09-15T19:48:00Z

Cloud Manager UI test results

🎉 809 passing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`809 Passing`	`9 Skipped`	`37m 3s`

github-project-automation Bot added this to Cloud Manager Sep 11, 2025

github-project-automation Bot moved this to Review in Cloud Manager Sep 11, 2025

smans-akamai marked this pull request as ready for review September 11, 2025 22:44

smans-akamai requested a review from a team as a code owner September 11, 2025 22:44

smans-akamai requested review from cpathipa, dwiley-akamai and nikhagra-akamai and removed request for a team September 11, 2025 22:44

smans-akamai added the DBaaS Relates to Database as a Service label Sep 11, 2025

smans-akamai self-assigned this Sep 11, 2025

smans-akamai commented Sep 11, 2025

View reviewed changes

smans-akamai requested a review from a team as a code owner September 12, 2025 14:18

smans-akamai requested review from jdamore-linode and removed request for a team September 12, 2025 14:18

smans-akamai added the 🚨 Urgent label Sep 15, 2025

cpathipa approved these changes Sep 15, 2025

View reviewed changes

smans-akamai and others added 5 commits September 15, 2025 12:08

change: [UIE-8889] - DBaaS - Database Backups time selector to handle…

22adfd6

… hours, minutes, seconds, and manual input. Fixing bug in time picker component.

Fixing failing DateTimeRangePicker tests

c7ab0da

Adding key property to TimePicker to re-render on Backup option chang…

6afdc9b

…e so that input clears completely

Adding changesets

33879b5

fix(DateTimeRangePicker): clean up extra time picker button in timera…

22b70af

…nge verification spec

smans-akamai force-pushed the UIE-8889-dbaas-backups-time-selector-hours-minutes-seconds-input branch from 81a8227 to 22b70af Compare September 15, 2025 16:09

Updating changeset

d9ff3a7

dwiley-akamai approved these changes Sep 15, 2025

View reviewed changes

github-project-automation Bot moved this from Review to Approved in Cloud Manager Sep 15, 2025

Updating typing for versionOption change event

2db44d7

mjac0bs added the Approved Multiple approvals and ready to merge! label Sep 15, 2025

smans-akamai merged commit c3c12c2 into linode:develop Sep 15, 2025
35 checks passed

github-project-automation Bot moved this from Approved to Merged in Cloud Manager Sep 15, 2025

This was referenced Sep 17, 2025

Release v1.151.0 - release → staging #12890

Merged

Release v1.151.0 - staging → master #12899

Merged

Navigation Menu

Uh oh!

change: [UIE-8889] - DBaaS - Database Backups time selector to handle hours, minutes, seconds, and manual input - #12868

change: [UIE-8889] - DBaaS - Database Backups time selector to handle hours, minutes, seconds, and manual input#12868
smans-akamai merged 7 commits into
linode:developfrom
smans-akamai:UIE-8889-dbaas-backups-time-selector-hours-minutes-seconds-input

smans-akamai commented Sep 11, 2025 •

edited

Loading

Uh oh!

smans-akamai commented Sep 11, 2025 •

edited

Loading

Uh oh!

smans-akamai Sep 11, 2025 •

edited

Loading

Uh oh!

smans-akamai Sep 11, 2025

Uh oh!

nikhagra-akamai commented Sep 12, 2025

Uh oh!

smans-akamai commented Sep 12, 2025

Uh oh!

cpathipa left a comment

Uh oh!

cpathipa Sep 12, 2025

Uh oh!

dwiley-akamai left a comment

Uh oh!

dwiley-akamai Sep 15, 2025

Uh oh!

smans-akamai Sep 15, 2025

Uh oh!

linode-gh-bot commented Sep 15, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

	DBaaS Backups time selector supports hours, minutes, seconds, and manual input using Linode Time Picker ([#12868](https://github.com/linode/manager/pull/12868))
	DBaaS Backups time selector now supports hours, minutes, seconds, and manual input using the Linode Time Picker ([#12868](https://github.com/linode/manager/pull/12868))

	const handleOnVersionOptionChange = (_: any, value: VersionOption) => {
	const handleOnVersionOptionChange = (_: React.ChangeEvent<HTMLInputElement>, value: VersionOption) => {

Uh oh!

Conversation

smans-akamai commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

smans-akamai commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

smans-akamai Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

nikhagra-akamai commented Sep 12, 2025

Uh oh!

smans-akamai commented Sep 12, 2025

Uh oh!

cpathipa left a comment

Choose a reason for hiding this comment

Uh oh!

cpathipa Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

smans-akamai Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Sep 15, 2025

Cloud Manager UI test results

🎉 809 passing tests on test run #8 ↗︎

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

smans-akamai commented Sep 11, 2025 •

edited

Loading

smans-akamai commented Sep 11, 2025 •

edited

Loading

smans-akamai Sep 11, 2025 •

edited

Loading