diff --git a/packages/manager/.changeset/pr-10956-added-1727103260742.md b/packages/manager/.changeset/pr-10956-added-1727103260742.md new file mode 100644 index 00000000000..511c979c325 --- /dev/null +++ b/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)) diff --git a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts b/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts index 82b97eb7d63..848732eb462 100644 --- a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts +++ b/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', { diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts index 57cc999ce71..35917a087a6 100644 --- a/packages/manager/src/featureFlags.ts +++ b/packages/manager/src/featureFlags.ts @@ -70,6 +70,7 @@ export interface CloudPulseResourceTypeMapFlag { } interface gpuV2 { + egressBanner: boolean; planDivider: boolean; } diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx index 02b819e3b90..e631e7a9e25 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/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' ? ( - + <> + {showGPUEgressBanner && ( + + 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.
+ Receive 1 TB of free included network transfer for a limited + time.{' '} + + Learn more + + . +
+
+ )} + + ) : null} {planType === 'metal' ? ( { 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 ? ( ({ + marginBottom: theme.spacing(3), + marginTop: theme.spacing(1), + })} > { planTabInfoContent[planType as keyof typeof planTabInfoContent]