feat: [M3-8581] - GPUv2 Plan Selection Egress Banner (#10956)

* initial commit: new banner and flag value

* Copy update

* Update link

* Added changeset: GPUv2 Plan Selection Egress Banner

* feedback @bnussman-akamai

* fix plan selection test

packages/manager/.changeset/pr-10956-added-1727103260742.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+GPUv2 Plan Selection Egress Banner ([#10956](https://github.com/linode/manager/pull/10956))

packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts

@@ -368,7 +368,7 @@ describe('displays specific linode plans for GPU', () => {
     // Should display two separate tables
     cy.findByText('GPU').click();
     cy.get(linodePlansPanel).within(() => {
-      cy.findAllByRole('alert').should('have.length', 1);
+      cy.findAllByRole('alert').should('have.length', 2);
       cy.get(notices.unavailable).should('be.visible');
 
       cy.findByRole('table', {

packages/manager/src/featureFlags.ts

@@ -70,6 +70,7 @@ export interface CloudPulseResourceTypeMapFlag {
 }
 
 interface gpuV2 {
+  egressBanner: boolean;
   planDivider: boolean;
 }
 

packages/manager/src/features/components/PlansPanel/PlanInformation.tsx

@@ -1,11 +1,10 @@
-import { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
-import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { StyledNoticeTypography } from 'src/features/Linodes/LinodesCreate/PlansAvailabilityNotice.styles';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { PlansAvailabilityNotice } from '../../Linodes/LinodesCreate/PlansAvailabilityNotice';
 import {
@@ -19,6 +18,8 @@ import { MetalNotice } from './MetalNotice';
 import { planTabInfoContent } from './utils';
 
 import type { Region } from '@linode/api-v4';
+import type { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
+import type { Theme } from '@mui/material/styles';
 
 export interface PlanInformationProps {
   disabledClasses?: LinodeTypeClass[];
@@ -40,20 +41,40 @@ export const PlanInformation = (props: PlanInformationProps) => {
     planType,
     regionsData,
   } = props;
-
   const getDisabledClass = (thisClass: LinodeTypeClass) => {
     return Boolean(disabledClasses?.includes(thisClass));
   };
+  const showGPUEgressBanner = Boolean(useFlags().gpuv2?.egressBanner);
 
   return (
     <>
       {planType === 'gpu' ? (
-        <PlansAvailabilityNotice
-          hasSelectedRegion={hasSelectedRegion}
-          isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan}
-          planType={planType}
-          regionsData={regionsData || []}
-        />
+        <>
+          {showGPUEgressBanner && (
+            <Notice spacingBottom={8} variant="info">
+              <Typography
+                fontFamily={(theme: Theme) => theme.font.bold}
+                fontSize="1rem"
+              >
+                New GPU instances are now generally available. Deploy an RTX
+                4000 Ada GPU instance in select core compute regions in North
+                America, Europe, and Asia. <br />
+                Receive 1 TB of free included network transfer for a limited
+                time.{' '}
+                <Link to="https://www.linode.com/blog/compute/new-gpus-nvidia-rtx-4000-ada-generation">
+                  Learn more
+                </Link>
+                .
+              </Typography>
+            </Notice>
+          )}
+          <PlansAvailabilityNotice
+            hasSelectedRegion={hasSelectedRegion}
+            isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan}
+            planType={planType}
+            regionsData={regionsData || []}
+          />
+        </>
       ) : null}
       {planType === 'metal' ? (
         <MetalNotice
@@ -101,7 +122,6 @@ interface ClassDescriptionCopyProps {
 
 export const ClassDescriptionCopy = (props: ClassDescriptionCopyProps) => {
   const { planType } = props;
-  const theme = useTheme();
   let planTypeLabel: null | string;
   let docLink: null | string;
 
@@ -133,7 +153,10 @@ export const ClassDescriptionCopy = (props: ClassDescriptionCopyProps) => {
 
   return planTypeLabel && docLink ? (
     <Typography
-      sx={{ marginBottom: theme.spacing(3), marginTop: theme.spacing(1) }}
+      sx={(theme: Theme) => ({
+        marginBottom: theme.spacing(3),
+        marginTop: theme.spacing(1),
+      })}
     >
       {
         planTabInfoContent[planType as keyof typeof planTabInfoContent]