fix: [DI-27690] - Time will not update on changing timezone with custom date

packages/manager/.changeset/pr-12971-fixed-1759933410245.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+ACLP: update `CloudPulseDateTimeRangePickerUtils` to use preset constants ([#12971](https://github.com/linode/manager/pull/12971))

packages/manager/cypress/e2e/core/cloudpulse/timerange-verification.spec.ts

@@ -168,16 +168,16 @@ const getLastMonthRange = (): DateTimeWithPreset => {
   };
 };
 
-// const convertToGmt = (dateStr: string): string => {
-//   return DateTime.fromISO(dateStr.replace(' ', 'T')).toFormat(
-//     'yyyy-MM-dd HH:mm'
-//   );
-// };
-// const formatToUtcDateTime = (dateStr: string): string => {
-//   return DateTime.fromISO(dateStr)
-//     .toUTC() // 🌍 keep it in UTC
-//     .toFormat('yyyy-MM-dd HH:mm');
-// };
+const convertToGmt = (dateStr: string): string => {
+  return DateTime.fromISO(dateStr.replace(' ', 'T')).toFormat(
+    'yyyy-MM-dd HH:mm'
+  );
+};
+const formatToUtcDateTime = (dateStr: string): string => {
+  return DateTime.fromISO(dateStr)
+    .toUTC() // 🌍 keep it in UTC
+    .toFormat('yyyy-MM-dd HH:mm');
+};
 
 // It is going to be modified
 describe('Integration tests for verifying Cloudpulse custom and preset configurations', () => {
@@ -238,14 +238,14 @@ describe('Integration tests for verifying Cloudpulse custom and preset configura
   it('should implement and validate custom date/time picker for a specific date and time range', () => {
     // --- Generate start and end date/time in GMT ---
     const {
-      // actualDate: startActualDate,
+      actualDate: startActualDate,
       day: startDay,
       hour: startHour,
       minute: startMinute,
     } = getDateRangeInGMT(12, 15, true);
 
     const {
-      // actualDate: endActualDate,
+      actualDate: endActualDate,
       day: endDay,
       hour: endHour,
       minute: endMinute,
@@ -335,15 +335,14 @@ describe('Integration tests for verifying Cloudpulse custom and preset configura
 
     // --- Re-validate after apply ---
 
-    // TODO for ACLP: Timezone normalization between GMT baselines and API UTC payloads is environment-dependent.
-    // cy.get('[aria-labelledby="start-date"]').should(
-    //   'have.value',
-    //   `${startActualDate} PM`
-    // );
-    // cy.get('[aria-labelledby="end-date"]').should(
-    //   'have.value',
-    //   `${endActualDate} PM`
-    // );
+    cy.get('[aria-labelledby="start-date"]').should(
+      'have.value',
+      `${startActualDate} PM`
+    );
+    cy.get('[aria-labelledby="end-date"]').should(
+      'have.value',
+      `${endActualDate} PM`
+    );
 
     // --- Select Node Type ---
     ui.autocomplete.findByLabel('Node Type').type('Primary{enter}');
@@ -357,14 +356,12 @@ describe('Integration tests for verifying Cloudpulse custom and preset configura
           request: { body },
         } = xhr as Interception;
 
-        // TODO for ACLP: Timezone normalization between GMT baselines and API UTC payloads is environment-dependent.
-        // Commenting out exact time equality checks to unblock CI; date/time are still driven via UI above.
-        // expect(formatToUtcDateTime(body.absolute_time_duration.start)).to.equal(
-        //   convertToGmt(startActualDate)
-        // );
-        // expect(formatToUtcDateTime(body.absolute_time_duration.end)).to.equal(
-        //   convertToGmt(endActualDate)
-        // );
+        expect(formatToUtcDateTime(body.absolute_time_duration.start)).to.equal(
+          convertToGmt(startActualDate)
+        );
+        expect(formatToUtcDateTime(body.absolute_time_duration.end)).to.equal(
+          convertToGmt(endActualDate)
+        );
 
         // Keep a minimal structural assertion so the request shape is still validated
         expect(body).to.have.nested.property('absolute_time_duration.start');

packages/manager/src/features/CloudPulse/Utils/CloudPulseDateTimePickerUtils.ts

@@ -2,6 +2,7 @@
  * Utility functions for handling date and time operations for CloudPulse.
  */
 
+import { DateTimeRangePicker } from '@linode/ui';
 import { DateTime } from 'luxon';
 
 import type { DateTimeWithPreset } from '@linode/api-v4';
@@ -19,7 +20,7 @@ export const defaultTimeDuration = (timezone?: string): DateTimeWithPreset => {
 
   return {
     end: date.toISO() ?? '',
-    preset: 'last hour',
+    preset: DateTimeRangePicker.PRESET_LABELS.LAST_HOUR,
     start: date.minus({ hours: 1 }).toISO() ?? '',
     timeZone: timezone,
   };
@@ -58,44 +59,44 @@ export function getTimeFromPreset(
   let startDate: string;
   let endDate: string;
   switch (preset) {
-    case 'last 7 days':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_7_DAYS:
       startDate = today.minus({ days: 7 }).toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
 
-    case 'last 12 hours':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_12_HOURS:
       startDate = today.minus({ hours: 12 }).toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
-    case 'last 30 days':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_30_DAYS:
       startDate = today.minus({ days: 30 }).toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
-    case 'last 30 minutes':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_30_MINUTES:
       startDate = today.minus({ minutes: 30 }).toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
-    case 'last day':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_DAY:
       startDate = today.minus({ days: 1 }).toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
-    case 'last hour':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_HOUR:
       startDate = today.minus({ hours: 1 }).toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
-    case 'last month':
+    case DateTimeRangePicker.PRESET_LABELS.LAST_MONTH:
       startDate = today.minus({ months: 1 }).startOf('month').toISO() ?? start;
       endDate = today.minus({ months: 1 }).endOf('month').toISO() ?? end;
       break;
-    case 'this month':
+    case DateTimeRangePicker.PRESET_LABELS.THIS_MONTH:
       startDate = today.startOf('month').toISO() ?? start;
       endDate = today.toISO() ?? end;
       break;
     default:
       // Reset to provided values or empty strings if none provided
       startDate = start;
       endDate = end;
-      selectedPreset = 'reset';
+      selectedPreset = DateTimeRangePicker.PRESET_LABELS.RESET;
   }
 
   return {

packages/ui/.changeset/pr-12971-fixed-1759933343999.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Fixed
+---
+
+DateTimeRangePicker: time will not change on changing timezone for custom dates ([#12971](https://github.com/linode/manager/pull/12971))

packages/ui/src/components/DatePicker/DateTimeRangePicker/DateTimeRangePicker.tsx

@@ -94,9 +94,9 @@ type TimeZoneStrategy = {
 };
 
 const strategies: Record<string, TimeZoneStrategy> = {
-  'last month': { keepStartTime: true, keepEndTime: true },
-  reset: { keepStartTime: true, keepEndTime: true },
-  'this month': { keepStartTime: true, keepEndTime: false },
+  'Last month': { keepStartTime: true, keepEndTime: true },
+  Reset: { keepStartTime: true, keepEndTime: true },
+  'This month': { keepStartTime: true, keepEndTime: false },
   default: { keepStartTime: false, keepEndTime: false },
 };