From 61d31522fd0a71926dc19a3603a78afc648a831c Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Mon, 16 Sep 2024 16:53:13 -0400 Subject: [PATCH 1/6] initial commit: new banner and flag value --- packages/manager/src/featureFlags.ts | 1 + .../components/PlansPanel/PlanInformation.tsx | 34 ++++++++++++++----- 2 files changed, 26 insertions(+), 9 deletions(-) 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..261d23b5453 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx @@ -1,11 +1,11 @@ -import { LinodeTypeClass } from '@linode/api-v4/lib/linodes'; -import { Theme, useTheme } from '@mui/material/styles'; +import { 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 +19,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 +42,34 @@ export const PlanInformation = (props: PlanInformationProps) => { planType, regionsData, } = props; - + const theme = useTheme(); const getDisabledClass = (thisClass: LinodeTypeClass) => { return Boolean(disabledClasses?.includes(thisClass)); }; + const showGPUEgressBanner = Boolean(useFlags().gpuv2?.egressBanner); return ( <> {planType === 'gpu' ? ( - + <> + {showGPUEgressBanner && ( + + + 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' ? ( Date: Tue, 17 Sep 2024 13:51:18 -0400 Subject: [PATCH 2/6] Copy update --- .../src/features/components/PlansPanel/PlanInformation.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx index 261d23b5453..f7573f5e99e 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx @@ -57,9 +57,10 @@ export const PlanInformation = (props: PlanInformationProps) => { 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. + America, Europe, and Asia.
+ Receive 1 TB of free included network transfer for a limited + time. {/* TODO: Add link to GPU egress banner */} + Learn more. )} From 2bd4b12cf682a97bd62497c37ed88c3997792dde Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Mon, 23 Sep 2024 10:50:30 -0400 Subject: [PATCH 3/6] Update link --- .../src/features/components/PlansPanel/PlanInformation.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx index f7573f5e99e..2ca1a46a6d9 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx @@ -59,8 +59,11 @@ export const PlanInformation = (props: PlanInformationProps) => { 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. {/* TODO: Add link to GPU egress banner */} - Learn more. + time.{' '} + + Learn more + + . )} From 3cfd9e305f0adaab2d9193dda6f9e382cd5d262b Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Mon, 23 Sep 2024 10:54:20 -0400 Subject: [PATCH 4/6] Added changeset: GPUv2 Plan Selection Egress Banner --- packages/manager/.changeset/pr-10956-added-1727103260742.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10956-added-1727103260742.md 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)) From 307c9ff6a41fb5414f55b6d3730e7244c1c1d92f Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Wed, 25 Sep 2024 10:14:57 -0400 Subject: [PATCH 5/6] feedback @bnussman-akamai --- .../components/PlansPanel/PlanInformation.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx index 2ca1a46a6d9..e631e7a9e25 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx @@ -1,4 +1,3 @@ -import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Link } from 'src/components/Link'; @@ -42,7 +41,6 @@ export const PlanInformation = (props: PlanInformationProps) => { planType, regionsData, } = props; - const theme = useTheme(); const getDisabledClass = (thisClass: LinodeTypeClass) => { return Boolean(disabledClasses?.includes(thisClass)); }; @@ -53,8 +51,11 @@ export const PlanInformation = (props: PlanInformationProps) => { {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.
@@ -121,7 +122,6 @@ interface ClassDescriptionCopyProps { export const ClassDescriptionCopy = (props: ClassDescriptionCopyProps) => { const { planType } = props; - const theme = useTheme(); let planTypeLabel: null | string; let docLink: null | string; @@ -153,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] From bf1cc554e79744932c89f622db2146ecc0a01c1a Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Wed, 25 Sep 2024 13:59:29 -0400 Subject: [PATCH 6/6] fix plan selection test --- .../manager/cypress/e2e/core/linodes/plan-selection.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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', {