upcoming: [M3-10326] - VM Host Maintenance - Status Icon, Copy Updates, Conditional Notice Display (linode#12512)

* upcoming: [M3-10326] - VM Host Maintenance - Status Icon, Copy Updates, Conditional Notice Display

* Remove in-progress event status type - added erroneously

* Add changesets

* Add iconSlot to TableSortCell

* Fix issue with filtering and address reason field when empty

* Update test with latest utilities

---------

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

Author: jaalah-akamai

packages/api-v4/.changeset/pr-12512-removed-1752621192730.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Removed
+---
+
+Remove unnecessary in-progress event.status type during earlier development ([#12512](https://github.com/linode/manager/pull/12512))

packages/api-v4/src/account/types.ts

@@ -510,7 +510,6 @@ export type EventStatus =
   | 'canceled'
   | 'failed'
   | 'finished'
-  | 'in-progress'
   | 'notification'
   | 'scheduled'
   | 'started';

packages/api-v4/src/cloudpulse/types.ts

@@ -392,4 +392,4 @@ export interface CloudPulseAlertsPayload {
    * Only included in Beta mode.
    */
   user?: number[];
-}
+}

packages/manager/.changeset/pr-12512-upcoming-features-1752621282205.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Show GPU warning notice conditionally based on policy type - display for "migrate" policy but hide for "power-off-on" policy ([#12512](https://github.com/linode/manager/pull/12512))

packages/manager/src/components/TableSortCell/TableSortCell.tsx

@@ -12,6 +12,7 @@ export interface TableSortCellProps extends _TableCellProps {
   active: boolean;
   direction: 'asc' | 'desc';
   handleClick: (key: string, order?: 'asc' | 'desc') => void;
+  iconSlot?: React.ReactNode;
   isLoading?: boolean;
   label: string;
   noWrap?: boolean;
@@ -24,6 +25,7 @@ export const TableSortCell = (props: TableSortCellProps) => {
     direction,
     // eslint-disable-next-line
     handleClick,
+    iconSlot,
     isLoading,
     label,
     noWrap,
@@ -72,6 +74,7 @@ export const TableSortCell = (props: TableSortCellProps) => {
         {children}
         {!active && <Sort />}
       </TableSortLabel>
+      {iconSlot}
       {isLoading && <CircleProgress size="sm" />}
     </TableCell>
   );

packages/manager/src/features/Account/Maintenance/MaintenanceTable.test.tsx

@@ -95,4 +95,25 @@ describe('Maintenance Table', () => {
     // Check for custom empty state
     screen.getByText('No in progress maintenance.');
   });
+
+  it('should render tooltip icon next to status for upcoming maintenance', async () => {
+    server.use(
+      http.get('*/account/maintenance', () => {
+        const accountMaintenance = accountMaintenanceFactory.buildList(1, {
+          status: 'scheduled',
+        });
+        return HttpResponse.json(makeResourcePage(accountMaintenance));
+      })
+    );
+
+    await renderWithTheme(<MaintenanceTable type="upcoming" />);
+
+    // Wait for loading to complete
+    await waitForElementToBeRemoved(screen.getByTestId(loadingTestId));
+
+    // The tooltip icon should be present with the correct data-testid
+    expect(
+      screen.getByTestId('maintenance-status-tooltip')
+    ).toBeInTheDocument();
+  });
 });

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

@@ -2,7 +2,7 @@ import {
   useAccountMaintenanceQuery,
   useAllAccountMaintenanceQuery,
 } from '@linode/queries';
-import { Box, Paper, Typography } from '@linode/ui';
+import { Box, Paper, TooltipIcon, Typography } from '@linode/ui';
 import { Hidden } from '@linode/ui';
 import { useFormattedDate } from '@linode/utilities';
 import * as React from 'react';
@@ -255,7 +255,7 @@ export const MaintenanceTable = ({ type }: Props) => {
                   className={classes.cell}
                   direction={order}
                   handleClick={handleOrderChange}
-                  label={getMaintenanceDateLabel(type)}
+                  label={getMaintenanceDateField(type)}
                 >
                   {getMaintenanceDateLabel(type)}
                 </TableSortCell>
@@ -308,6 +308,26 @@ export const MaintenanceTable = ({ type }: Props) => {
                 className={classes.cell}
                 direction={order}
                 handleClick={handleOrderChange}
+                iconSlot={
+                  type === 'upcoming' && (
+                    <TooltipIcon
+                      dataTestId="maintenance-status-tooltip"
+                      status="info"
+                      sxTooltipIcon={{
+                        margin: 0,
+                        padding: 0,
+                      }}
+                      text={
+                        <>
+                          Scheduled status refers to an event that is planned to
+                          start at a certain time. <br />
+                          <br /> Pending status refers to an event that has yet
+                          to be completed or decided.
+                        </>
+                      }
+                    />
+                  )
+                }
                 label="status"
               >
                 Status

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

@@ -155,14 +155,18 @@ export const MaintenanceTableRow = (props: MaintenanceTableRowProps) => {
       )}
       <Hidden lgDown>
         <TableCell>
-          {isTruncated ? (
-            <Tooltip title={<Markdown textOrMarkdown={reason} />}>
-              <div>
-                <Markdown textOrMarkdown={truncatedReason} />
-              </div>
-            </Tooltip>
+          {reason ? (
+            isTruncated ? (
+              <Tooltip title={<Markdown textOrMarkdown={reason} />}>
+                <div>
+                  <Markdown textOrMarkdown={truncatedReason} />
+                </div>
+              </Tooltip>
+            ) : (
+              <Markdown textOrMarkdown={truncatedReason} />
+            )
           ) : (
-            <Markdown textOrMarkdown={truncatedReason} />
+            '—'
           )}
         </TableCell>
       </Hidden>

packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx

@@ -21,9 +21,9 @@ export const MaintenancePolicy = () => {
   const { control } = useFormContext<LinodeCreateFormValues>();
   const flags = useFlags();
 
-  const [selectedRegion, selectedType] = useWatch({
+  const [selectedRegion, selectedType, maintenancePolicy] = useWatch({
     control,
-    name: ['region', 'type'],
+    name: ['region', 'type', 'maintenance_policy'],
   });
 
   const { data: region } = useRegionQuery(selectedRegion);
@@ -52,9 +52,11 @@ export const MaintenancePolicy = () => {
         },
       }}
     >
-      {regionSupportsMaintenancePolicy && isGPUPlan && (
-        <Notice variant="warning">{GPU_PLAN_NOTICE}</Notice>
-      )}
+      {regionSupportsMaintenancePolicy &&
+        isGPUPlan &&
+        maintenancePolicy === 'linode/migrate' && (
+          <Notice variant="warning">{GPU_PLAN_NOTICE}</Notice>
+        )}
       <Controller
         control={control}
         name="maintenance_policy"
@@ -65,7 +67,7 @@ export const MaintenancePolicy = () => {
             onChange={(policy) => field.onChange(policy.slug)}
             textFieldProps={{
               helperText: !region
-                ? 'Select a region to see available maintenance policies.'
+                ? 'Select a region to choose a maintenance policy.'
                 : selectedRegion && !regionSupportsMaintenancePolicy
                   ? MAINTENANCE_POLICY_NOT_AVAILABLE_IN_REGION_TEXT
                   : undefined,

packages/manager/src/features/Linodes/LinodeCreate/Region.tsx

@@ -122,10 +122,14 @@ export const Region = React.memo(() => {
       setValue('metadata.user_data', null);
     }
 
-    if (
-      values.maintenance_policy &&
-      !region.capabilities.includes('Maintenance Policy')
-    ) {
+    // Handle maintenance policy based on region capabilities
+    if (region.capabilities.includes('Maintenance Policy')) {
+      // If the region supports maintenance policy, set it to the default value
+      // or keep the current value if it's already set
+      if (!values.maintenance_policy) {
+        setValue('maintenance_policy', 'linode/migrate');
+      }
+    } else {
       // Clear maintenance_policy if the selected region doesn't support it
       setValue('maintenance_policy', undefined);
     }