upcoming: [M3-10453] - Improve maintenance banner datetime display and formatting (linode#12663)

* upcoming: [M3-10453] - Maintenance Banner DateTime Fix

* Style fixes

* Remove dev tools for later time

* Update changelog

* Update packages/manager/package.json

Co-authored-by: Banks Nussman <[email protected]>

* Review updates

* Revert type change

---------

Co-authored-by: Jaalah Ramos <[email protected]>
Co-authored-by: Banks Nussman <[email protected]>

Author: 3 people

packages/manager/CHANGELOG.md

@@ -83,6 +83,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - ACLP-Alerting: change the `aclpAlerting` to include alert and metric limits and other relevant changes  ([#12624](https://github.com/linode/manager/pull/12624))
 - ACLP-Alerting: add custom config_id validation, dynamic schema resolver, helperText map, TextField logic, and mock API for nodebalancer metrics added ([#12629](https://github.com/linode/manager/pull/12629))
 - Update VM Host Maintenance GPU Notice Text ([#12632](https://github.com/linode/manager/pull/12632))
+- Improve maintenance banner datetime display and formatting ([#12663](https://github.com/linode/manager/pull/12663))
 
 ## [2025-07-29] - v1.147.0
 

packages/manager/src/components/MaintenanceBanner/LinodeMaintenanceBanner.tsx

@@ -28,6 +28,8 @@ export const LinodeMaintenanceBanner = ({ linodeId }: Props) => {
   );
 
   const maintenanceTypeLabel = linodeMaintenance?.type.split('_').join(' ');
+  const maintenanceStartTime =
+    linodeMaintenance?.start_time || linodeMaintenance?.when;
 
   if (!linodeMaintenance) return null;
 
@@ -36,23 +38,27 @@ export const LinodeMaintenanceBanner = ({ linodeId }: Props) => {
       <Typography>
         Linode {linodeMaintenance.entity.label} {linodeMaintenance.description}{' '}
         maintenance {maintenanceTypeLabel} will begin{' '}
-        <strong>
-          <DateTimeDisplay
-            format="MM/dd/yyyy"
-            sx={(theme) => ({
-              font: theme.font.bold,
-            })}
-            value={linodeMaintenance.start_time}
-          />{' '}
-          at{' '}
-          <DateTimeDisplay
-            format="HH:mm"
-            sx={(theme) => ({
-              font: theme.font.bold,
-            })}
-            value={linodeMaintenance.start_time}
-          />
-        </strong>
+        {maintenanceStartTime ? (
+          <strong>
+            <DateTimeDisplay
+              format="MM/dd/yyyy"
+              sx={(theme) => ({
+                font: theme.font.bold,
+              })}
+              value={maintenanceStartTime}
+            />{' '}
+            at{' '}
+            <DateTimeDisplay
+              format="HH:mm"
+              sx={(theme) => ({
+                font: theme.font.bold,
+              })}
+              value={maintenanceStartTime}
+            />
+          </strong>
+        ) : (
+          <strong>soon</strong>
+        )}
         . For more details, view{' '}
         <Link to="/account/maintenance">Account Maintenance</Link>.
       </Typography>

packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx

@@ -115,7 +115,7 @@ export const MaintenanceTableRow = (props: MaintenanceTableRowProps) => {
           {(tableType === 'upcoming' || tableType === 'completed') && (
             <Hidden mdDown>
               <TableCell data-testid="relative-date">
-                {parseAPIDate(when).toRelative()}
+                {when ? parseAPIDate(when).toRelative() : '—'}
               </TableCell>
             </Hidden>
           )}
@@ -130,13 +130,15 @@ export const MaintenanceTableRow = (props: MaintenanceTableRowProps) => {
       {!flags.vmHostMaintenance?.enabled && (
         <>
           <TableCell noWrap>
-            {formatDate(when, {
-              timezone: profile?.timezone,
-            })}
+            {when
+              ? formatDate(when, {
+                  timezone: profile?.timezone,
+                })
+              : '—'}
           </TableCell>
           <Hidden mdDown>
             <TableCell data-testid="relative-date">
-              {parseAPIDate(when).toRelative()}
+              {when ? parseAPIDate(when).toRelative() : '—'}
             </TableCell>
           </Hidden>
         </>

packages/manager/src/features/Linodes/LinodeEntityDetailHeaderMaintenancePolicy.tsx

@@ -6,8 +6,6 @@ import * as React from 'react';
 import { statusTooltipIcons } from 'src/features/Linodes/LinodeEntityDetailHeaderMaintenancePolicy.utils';
 import { LinodeMaintenanceText } from 'src/features/Linodes/LinodeMaintenanceText';
 
-import { parseMaintenanceStartTime } from './LinodesLanding/utils';
-
 import type { MaintenancePolicySlug } from '@linode/api-v4';
 import type { LinodeMaintenance } from 'src/utilities/linodes';
 
@@ -20,9 +18,7 @@ export const LinodeEntityDetailHeaderMaintenancePolicy = (
   props: LinodeEntityDetailHeaderMaintenancePolicyProps
 ) => {
   const { linodeMaintenancePolicySet, maintenance } = props;
-  const parsedMaintenanceStartTime = parseMaintenanceStartTime(
-    maintenance?.start_time || maintenance?.when
-  );
+  const maintenanceStartTime = maintenance?.start_time || maintenance?.when;
 
   const isPendingOrScheduled =
     maintenance?.status === 'pending' || maintenance?.status === 'scheduled';
@@ -63,7 +59,7 @@ export const LinodeEntityDetailHeaderMaintenancePolicy = (
               ? 'Migrating'
               : 'Migrate'}
         </Typography>
-        {isInProgress && (
+        {isInProgress && maintenanceStartTime && (
           <TooltipIcon
             className="ui-TooltipIcon ui-TooltipIcon-isActive"
             icon={statusTooltipIcons.active}
@@ -76,7 +72,7 @@ export const LinodeEntityDetailHeaderMaintenancePolicy = (
             text={
               <LinodeMaintenanceText
                 isOpened
-                maintenanceStartTime={parsedMaintenanceStartTime}
+                maintenanceStartTime={maintenanceStartTime}
               />
             }
             tooltipPosition="top"
@@ -101,11 +97,13 @@ export const LinodeEntityDetailHeaderMaintenancePolicy = (
             text={
               maintenance?.status === 'pending' ? (
                 "This Linode's maintenance window is pending."
-              ) : (
+              ) : maintenanceStartTime ? (
                 <LinodeMaintenanceText
                   isOpened={false}
-                  maintenanceStartTime={parsedMaintenanceStartTime}
+                  maintenanceStartTime={maintenanceStartTime}
                 />
+              ) : (
+                "This Linode's maintenance window is scheduled."
               )
             }
             tooltipPosition="top"

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

@@ -23,7 +23,7 @@ import { useInProgressEvents } from 'src/queries/events/events';
 import { LinodeMaintenanceText } from '../../LinodeMaintenanceText';
 import { IPAddress } from '../IPAddress';
 import { RegionIndicator } from '../RegionIndicator';
-import { getLinodeIconStatus, parseMaintenanceStartTime } from '../utils';
+import { getLinodeIconStatus } from '../utils';
 import {
   StyledButton,
   StyledIpTableCell,
@@ -65,9 +65,7 @@ export const LinodeRow = (props: Props) => {
 
   const isTransitioning = linodeInTransition(status, recentEvent);
 
-  const parsedMaintenanceStartTime = parseMaintenanceStartTime(
-    maintenance?.start_time || maintenance?.when
-  );
+  const maintenanceStartTime = maintenance?.start_time || maintenance?.when;
 
   const iconStatus = getLinodeIconStatus(status);
 
@@ -96,9 +94,7 @@ export const LinodeRow = (props: Props) => {
       onMouseLeave={handleMouseLeave}
     >
       <TableCell noWrap>
-        <Link tabIndex={0} to={`/linodes/${id}`}>
-          {label}
-        </Link>
+        <Link to={`/linodes/${id}`}>{label}</Link>
       </TableCell>
       <StyledMaintenanceTableCell
         data-qa-status
@@ -117,15 +113,15 @@ export const LinodeRow = (props: Props) => {
             />
           </StyledButton>
         )}
-        {isInProgress && (
+        {isInProgress && maintenanceStartTime && (
           <TooltipIcon
             className="ui-TooltipIcon ui-TooltipIcon-isActive"
             icon={statusTooltipIcons.active}
             sx={{ tooltip: { maxWidth: 300 } }}
             text={
               <LinodeMaintenanceText
                 isOpened
-                maintenanceStartTime={parsedMaintenanceStartTime}
+                maintenanceStartTime={maintenanceStartTime}
               />
             }
             tooltipPosition="top"
@@ -143,11 +139,13 @@ export const LinodeRow = (props: Props) => {
             text={
               maintenance?.status === 'pending' ? (
                 "This Linode's maintenance window is pending."
-              ) : (
+              ) : maintenanceStartTime ? (
                 <LinodeMaintenanceText
                   isOpened={false}
-                  maintenanceStartTime={parsedMaintenanceStartTime}
+                  maintenanceStartTime={maintenanceStartTime}
                 />
+              ) : (
+                "This Linode's maintenance window is scheduled."
               )
             }
             tooltipPosition="top"