upcoming: [M3-10102] - VM Host Maintenance Copy Updates to Banners (linode#12397)

* upcoming: [M3-10102] - Copy updates to banners and new icons

* upcoming: [M3-10102] - Remove icons

* Added changeset: Copy updates to VM Host Maintenance Banners

* Update platform maintenance banner

* Add unit test for LinodePlatformMaintenanceBanner

---------

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

Author: jaalah-akamai

packages/manager/.changeset/pr-12397-upcoming-features-1750191260873.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Copy updates to VM Host Maintenance Banners ([#12397](https://github.com/linode/manager/pull/12397))

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

@@ -2,23 +2,19 @@ import { useAllAccountMaintenanceQuery } from '@linode/queries';
 import { Notice, Typography } from '@linode/ui';
 import { pluralize } from '@linode/utilities';
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 
 import { PENDING_MAINTENANCE_FILTER } from 'src/features/Account/Maintenance/utilities';
 import { isPlatformMaintenance } from 'src/hooks/usePlatformMaintenance';
 
 import { Link } from '../Link';
 
-export const MaintenanceBannerV2 = () => {
+export const MaintenanceBannerV2 = ({ pathname }: { pathname?: string }) => {
   const { data: allMaintenance } = useAllAccountMaintenanceQuery(
     {},
     PENDING_MAINTENANCE_FILTER
   );
 
-  const location = useLocation();
-
-  const hideAccountMaintenanceLink =
-    location.pathname === '/account/maintenance';
+  const hideAccountMaintenanceLink = pathname === '/account/maintenance';
 
   // Filter out platform maintenance, since that is handled separately
   const linodeMaintenance =

packages/manager/src/components/PlatformMaintenanceBanner/LinodePlatformMaintenanceBanner.test.tsx

@@ -10,6 +10,7 @@ const queryMocks = vi.hoisted(() => ({
   useNotificationsQuery: vi.fn().mockReturnValue({}),
   useAllAccountMaintenanceQuery: vi.fn().mockReturnValue({}),
   useLinodeQuery: vi.fn().mockReturnValue({}),
+  useLocation: vi.fn(),
 }));
 
 vi.mock('@linode/queries', async () => {
@@ -20,8 +21,17 @@ vi.mock('@linode/queries', async () => {
   };
 });
 
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useLocation: queryMocks.useLocation,
+  };
+});
+
 beforeEach(() => {
   vi.stubEnv('TZ', 'UTC');
+  queryMocks.useLocation.mockReturnValue({ pathname: '/linodes' });
 });
 
 describe('LinodePlatformMaintenanceBanner', () => {
@@ -123,4 +133,86 @@ describe('LinodePlatformMaintenanceBanner', () => {
       )
     ).toBeVisible();
   });
+
+  it('renders linode label as a link when not on linode detail page', () => {
+    const mockPlatformMaintenance = accountMaintenanceFactory.buildList(1, {
+      type: 'reboot',
+      entity: { type: 'linode', id: 123 },
+      reason: 'Your Linode needs a critical security update',
+      when: '2020-01-01T00:00:00',
+      start_time: '2020-01-01T00:00:00',
+    });
+
+    queryMocks.useAllAccountMaintenanceQuery.mockReturnValue({
+      data: mockPlatformMaintenance,
+    });
+
+    queryMocks.useLinodeQuery.mockReturnValue({
+      data: linodeFactory.build({
+        id: 123,
+        label: 'test-linode',
+      }),
+    });
+
+    queryMocks.useNotificationsQuery.mockReturnValue({
+      data: notificationFactory.buildList(1, {
+        type: 'security_reboot_maintenance_scheduled',
+        label: 'Platform Maintenance Scheduled',
+      }),
+    });
+
+    // Mock location to be on a different page
+    queryMocks.useLocation.mockReturnValue({ pathname: '/linodes' });
+
+    const { getByRole } = renderWithTheme(
+      <LinodePlatformMaintenanceBanner linodeId={123} />
+    );
+
+    const link = getByRole('link', { name: 'test-linode' });
+    expect(link).toBeVisible();
+    expect(link).toHaveAttribute('href', '/linodes/123');
+  });
+
+  it('renders linode label as plain text when on linode detail page', () => {
+    const mockPlatformMaintenance = accountMaintenanceFactory.buildList(1, {
+      type: 'reboot',
+      entity: { type: 'linode', id: 123 },
+      reason: 'Your Linode needs a critical security update',
+      when: '2020-01-01T00:00:00',
+      start_time: '2020-01-01T00:00:00',
+    });
+
+    queryMocks.useAllAccountMaintenanceQuery.mockReturnValue({
+      data: mockPlatformMaintenance,
+    });
+
+    queryMocks.useLinodeQuery.mockReturnValue({
+      data: linodeFactory.build({
+        id: 123,
+        label: 'test-linode',
+      }),
+    });
+
+    queryMocks.useNotificationsQuery.mockReturnValue({
+      data: notificationFactory.buildList(1, {
+        type: 'security_reboot_maintenance_scheduled',
+        label: 'Platform Maintenance Scheduled',
+      }),
+    });
+
+    // Mock location to be on the linode detail page
+    queryMocks.useLocation.mockReturnValue({ pathname: '/linodes/123' });
+
+    const { container, queryByRole } = renderWithTheme(
+      <LinodePlatformMaintenanceBanner linodeId={123} />
+    );
+
+    // Should show the label as plain text within the Typography component
+    expect(container.textContent).toContain('test-linode');
+
+    // Should not have a link
+    expect(
+      queryByRole('link', { name: 'test-linode' })
+    ).not.toBeInTheDocument();
+  });
 });

packages/manager/src/components/PlatformMaintenanceBanner/LinodePlatformMaintenanceBanner.tsx

@@ -2,6 +2,7 @@ import { useLinodeQuery } from '@linode/queries';
 import { Notice } from '@linode/ui';
 import { Box, Button, Stack, Typography } from '@linode/ui';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { PowerActionsDialog } from 'src/features/Linodes/PowerActionsDialogOrDrawer';
 import { usePlatformMaintenance } from 'src/hooks/usePlatformMaintenance';
@@ -15,6 +16,7 @@ export const LinodePlatformMaintenanceBanner = (props: {
   linodeId: Linode['id'];
 }) => {
   const { linodeId } = props;
+  const location = useLocation();
 
   const { linodesWithPlatformMaintenance, platformMaintenanceByLinode } =
     usePlatformMaintenance();
@@ -46,16 +48,22 @@ export const LinodePlatformMaintenanceBanner = (props: {
 
   const startTime = getMaintenanceStartTime(earliestMaintenance);
 
+  const hideLinodeLink = location.pathname === `/linodes/${linodeId}`;
+
   return (
     <>
       <Notice forceImportantIconVerticalCenter variant="warning">
         <Stack alignItems="center" direction="row" gap={1}>
           <Box flex={1}>
             <Typography>
               Linode{' '}
-              <Link to={`/linodes/${linodeId}`}>
-                {linode?.label ?? linodeId}
-              </Link>{' '}
+              {hideLinodeLink ? (
+                `${linode?.label ?? linodeId}`
+              ) : (
+                <Link to={`/linodes/${linodeId}`}>
+                  {linode?.label ?? linodeId}
+                </Link>
+              )}{' '}
               needs to be rebooted for critical platform maintenance.{' '}
               {startTime && (
                 <>

packages/manager/src/components/PlatformMaintenanceBanner/PlatformMaintenanceBanner.tsx

@@ -1,6 +1,5 @@
 import { Notice, Typography } from '@linode/ui';
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 
 import { usePlatformMaintenance } from 'src/hooks/usePlatformMaintenance';
 
@@ -13,13 +12,15 @@ import { Link } from '../Link';
  * them separately from the standard MaintenanceBanner.
  */
 
-export const PlatformMaintenanceBanner = () => {
+export const PlatformMaintenanceBanner = ({
+  pathname,
+}: {
+  pathname?: string;
+}) => {
   const { accountHasPlatformMaintenance, linodesWithPlatformMaintenance } =
     usePlatformMaintenance();
 
-  const location = useLocation();
-  const hideAccountMaintenanceLink =
-    location.pathname === '/account/maintenance';
+  const hideAccountMaintenanceLink = pathname === '/account/maintenance';
 
   if (!accountHasPlatformMaintenance) return null;
 
@@ -37,7 +38,7 @@ export const PlatformMaintenanceBanner = () => {
         {!hideAccountMaintenanceLink && (
           <>
             {' '}
-            See which Linodes are scheduled for reboot on the{' '}
+            See which Linodes are <strong>scheduled</strong> for reboot on the{' '}
             <Link to="/account/maintenance">Account Maintenance</Link> page.
           </>
         )}

packages/manager/src/features/Account/AccountLanding.tsx

@@ -1,5 +1,5 @@
 import { useAccount, useProfile } from '@linode/queries';
-import { useMatch, useNavigate } from '@tanstack/react-router';
+import { useLocation, useMatch, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -52,6 +52,7 @@ const MaintenanceLanding = React.lazy(
 
 export const AccountLanding = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const match = useMatch({
     strict: false,
   });
@@ -173,8 +174,8 @@ export const AccountLanding = () => {
 
   return (
     <React.Fragment>
-      <PlatformMaintenanceBanner />
-      <MaintenanceBannerV2 />
+      <PlatformMaintenanceBanner pathname={location.pathname} />
+      <MaintenanceBannerV2 pathname={location.pathname} />
       <DocumentTitleSegment segment="Account Settings" />
       <LandingHeader {...landingHeaderProps} spacingBottom={4} />