Upcoming: [UIE-9538]- Disable premium plan tab if corresponding g7 dedicated plans are available

packages/manager/.changeset/pr-13081-upcoming-features-1762935895154.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Disable premium plan tab if corresponding g7 dedicated plans are available ([#13081](https://github.com/linode/manager/pull/13081))

packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts

@@ -70,6 +70,7 @@ describe('clone linode', () => {
   beforeEach(() => {
     mockAppendFeatureFlags({
       linodeInterfaces: { enabled: false },
+      generationalPlansv2: { enabled: false, allowedPlans: [] },
     });
   });
 

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

@@ -86,6 +86,14 @@ const mockGPUType = [
   }),
 ];
 
+const mockPremiumType = [
+  linodeTypeFactory.build({
+    class: 'premium',
+    id: 'premium-8',
+    label: 'Premium 8GB',
+  }),
+];
+
 const mockAcceleratedType = [
   linodeTypeFactory.build({
     class: 'accelerated',
@@ -99,6 +107,7 @@ const mockLinodeTypes = [
   ...mockHighMemoryLinodeTypes,
   ...mockSharedLinodeTypes,
   ...mockGPUType,
+  ...mockPremiumType,
   ...mockAcceleratedType,
 ];
 
@@ -225,7 +234,7 @@ describe('displays linode plans panel based on availability', () => {
       cy.get(notices.unavailable).should('be.visible');
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
-        cy.findAllByRole('row').should('have.length', 2);
+        cy.findAllByRole('row').should('have.length', 3);
         cy.get('[id="g7-premium-64"]').should('be.disabled');
         cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
       });
@@ -355,7 +364,7 @@ describe('displays kubernetes plans panel based on availability', () => {
       cy.get(notices.unavailable).should('be.visible');
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
-        cy.findAllByRole('row').should('have.length', 2);
+        cy.findAllByRole('row').should('have.length', 3);
         cy.get('[data-qa-plan-row="Premium 512 GB"]').should(
           'have.attr',
           'disabled'

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -35,7 +35,7 @@ const options: { flag: keyof Flags; label: string }[] = [
     label: 'Firewall Rulesets & Prefixlists',
   },
   { flag: 'gecko2', label: 'Gecko' },
-  { flag: 'generationalPlans', label: 'Generational compute plans' },
+  { flag: 'generationalPlansv2', label: 'Generational compute plans' },
   { flag: 'limitsEvolution', label: 'Limits Evolution' },
   { flag: 'linodeDiskEncryption', label: 'Linode Disk Encryption (LDE)' },
   { flag: 'linodeInterfaces', label: 'Linode Interfaces' },

packages/manager/src/featureFlags.ts

@@ -202,7 +202,7 @@ export interface Flags {
   disableLargestGbPlans: boolean;
   firewallRulesetsPrefixlists: boolean;
   gecko2: GeckoFeatureFlag;
-  generationalPlans: boolean;
+  generationalPlansv2: GenerationalPlansFlag;
   gpuv2: GpuV2;
   iam: BetaFeatureFlag;
   iamDelegation: BaseFeatureFlag;
@@ -386,3 +386,7 @@ export type AclpServices = {
     metrics?: AclpFlag;
   };
 };
+
+interface GenerationalPlansFlag extends BaseFeatureFlag {
+  allowedPlans: string[];
+}

packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlansPanel.tsx

@@ -11,6 +11,7 @@ import {
   isMTCPlan,
   planTabInfoContent,
   replaceOrAppendPlaceholder512GbPlans,
+  useShouldDisablePremiumPlansTab,
 } from 'src/features/components/PlansPanel/utils';
 import { useFlags } from 'src/hooks/useFlags';
 
@@ -82,6 +83,10 @@ export const KubernetesPlansPanel = (props: Props) => {
     Boolean(flags.soldOutChips) && Boolean(selectedRegionId)
   );
 
+  const shouldDisablePremiumPlansTab = useShouldDisablePremiumPlansTab({
+    types,
+  });
+
   const isPlanDisabledByAPL = (plan: 'shared' | LinodeTypeClass) =>
     plan === 'shared' && Boolean(isAPLEnabled);
 
@@ -109,7 +114,7 @@ export const KubernetesPlansPanel = (props: Props) => {
     { isLKE: true }
   );
 
-  const tabs = Object.keys(plans).map(
+  const tabs = Object.keys(plans)?.map(
     (plan: Exclude<LinodeTypeClass, 'nanode' | 'standard'>) => {
       const plansMap: PlanSelectionType[] = plans[plan]!;
       const {
@@ -125,6 +130,7 @@ export const KubernetesPlansPanel = (props: Props) => {
       });
 
       return {
+        disabled: false,
         render: () => {
           return (
             <>
@@ -170,6 +176,26 @@ export const KubernetesPlansPanel = (props: Props) => {
     currentPlanHeading
   );
 
+  // If there are no premium plans available, plans table will hide the premium tab.
+  // To override this behavior, we add the tab again and then disable it.
+  // If there are plans but they should be disabled, we disable the existing tab.
+  if (
+    shouldDisablePremiumPlansTab &&
+    !tabs.some((tab) => tab.title === planTabInfoContent.premium?.title)
+  ) {
+    tabs.push({
+      disabled: true,
+      render: () => <div />,
+      title: planTabInfoContent.premium?.title,
+    });
+  } else if (shouldDisablePremiumPlansTab) {
+    tabs.forEach((tab) => {
+      if (tab.title === planTabInfoContent.premium?.title) {
+        tab.disabled = true;
+      }
+    });
+  }
+
   return (
     <TabbedPanel
       copy={copy}
@@ -179,6 +205,11 @@ export const KubernetesPlansPanel = (props: Props) => {
       initTab={initialTab >= 0 ? initialTab : 0}
       notice={notice}
       sx={{ padding: 0 }}
+      tabDisabledMessage={
+        shouldDisablePremiumPlansTab
+          ? 'Premium CPUs are now called Dedicated G7 Plans.'
+          : undefined
+      }
       tabs={tabs}
     />
   );

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

@@ -4,6 +4,7 @@ import { useController, useWatch } from 'react-hook-form';
 
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
+import { useShouldDisablePremiumPlansTab } from 'src/features/components/PlansPanel/utils';
 import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 import { sendLinodeCreateFlowDocsClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';
@@ -28,10 +29,15 @@ export const Plan = () => {
 
   const { data: permissions } = usePermissions('account', ['create_linode']);
 
+  const shouldDisablePremiumPlansTab = useShouldDisablePremiumPlansTab({
+    types,
+  });
+
   return (
     <PlansPanel
       data-qa-select-plan
       disabled={!permissions.create_linode}
+      disabledTabs={shouldDisablePremiumPlansTab ? ['premium'] : undefined}
       docsLink={
         <DocsLink
           href="https://techdocs.akamai.com/cloud-computing/docs/how-to-choose-a-compute-instance-plan"
@@ -55,6 +61,11 @@ export const Plan = () => {
       selectedId={field.value}
       selectedRegionID={regionId}
       showLimits
+      tabDisabledMessage={
+        shouldDisablePremiumPlansTab
+          ? 'Premium CPUs are now called Dedicated G7 Plans.'
+          : undefined
+      }
       types={types?.map(extendType) ?? []} // @todo don't extend type
     />
   );

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

@@ -26,6 +26,7 @@ import {
   planTabInfoContent,
   replaceOrAppendPlaceholder512GbPlans,
   useIsAcceleratedPlansEnabled,
+  useShouldDisablePremiumPlansTab,
 } from './utils';
 
 import type { PlanSelectionType } from './types';
@@ -111,6 +112,10 @@ export const PlansPanel = (props: PlansPanelProps) => {
     Boolean(flags.soldOutChips) && Boolean(selectedRegionID)
   );
 
+  const shouldDisablePremiumPlansTab = useShouldDisablePremiumPlansTab({
+    types,
+  });
+
   const _types = types.filter((type) => {
     if (!isAcceleratedLinodePlansEnabled && type.class === 'accelerated') {
       return false;
@@ -162,7 +167,7 @@ export const PlansPanel = (props: PlansPanelProps) => {
 
   const isDatabaseResize = flow === 'database' && isResize;
 
-  const tabs = Object.keys(plans).map(
+  const tabs = Object.keys(plans)?.map(
     (plan: Exclude<LinodeTypeClass, 'nanode' | 'standard'>) => {
       const plansMap: PlanSelectionType[] = plans[plan]!;
       const {
@@ -255,6 +260,19 @@ export const PlansPanel = (props: PlansPanelProps) => {
     );
   }
 
+  // If there are no premium plans available, plans table will hide the premium tab.
+  // To override this behavior, we add the tab again and then disable it.
+  if (
+    shouldDisablePremiumPlansTab &&
+    !tabs.some((tab) => tab.title === planTabInfoContent.premium?.title)
+  ) {
+    tabs.push({
+      disabled: true,
+      render: () => <div />,
+      title: planTabInfoContent.premium?.title,
+    });
+  }
+
   return (
     <TabbedPanel
       copy={copy}

packages/manager/src/features/components/PlansPanel/utils.ts

@@ -2,6 +2,7 @@ import { useAccount } from '@linode/queries';
 import { arrayToList, isFeatureEnabledV2 } from '@linode/utilities';
 
 import { useFlags } from 'src/hooks/useFlags';
+import { useIsGenerationalPlansEnabled } from 'src/utilities/linodes';
 
 import {
   DEDICATED_512_GB_PLAN,
@@ -23,6 +24,7 @@ import type {
 import type {
   BaseType,
   Capabilities,
+  LinodeType,
   LinodeTypeClass,
   Region,
   RegionAvailability,
@@ -495,3 +497,19 @@ export const getDisabledPlanReasonCopy = ({
 
   return PLAN_IS_CURRENTLY_UNAVAILABLE_COPY;
 };
+
+export const useShouldDisablePremiumPlansTab = ({
+  types,
+}: {
+  types: LinodeType[] | PlanSelectionType[] | undefined;
+}): boolean => {
+  const { isGenerationalPlansEnabled, allowedPlans } =
+    useIsGenerationalPlansEnabled();
+  // Check if any public premium plans are available.
+  // We can omit "Premium HT" and "Premium nested" plans as customers don't deploy them using cloud manager.
+  const arePublicPremiumPlansAvailable = types?.some(
+    (plan) => plan.class === 'premium' && allowedPlans.includes(plan.id)
+  );
+
+  return Boolean(isGenerationalPlansEnabled) && !arePublicPremiumPlansAvailable;
+};

packages/manager/src/mocks/presets/crud/handlers/linodes/linodes.ts

@@ -17,7 +17,8 @@ import {
   linodeStatsFactory,
   linodeTransferFactory,
   linodeTypeFactory,
-  premiumTypeFactory,
+  premiumHTTypeFactory,
+  premiumNestedTypeFactory,
 } from '@linode/utilities';
 import { DateTime } from 'luxon';
 import { http } from 'msw';
@@ -105,7 +106,10 @@ export const getLinodePlans = () => [
       const gpuTypesAda = gpuTypeAdaFactory.buildList(20);
       const gpuTypesRtx = gpuTypeRtxFactory.buildList(20);
       const gpuTypesRtxPro = gpuTypeRtxProFactory.buildList(20);
-      const premiumTypes = premiumTypeFactory.buildList(6);
+      const premiumTypes = [
+        premiumNestedTypeFactory.build(),
+        premiumHTTypeFactory.build(),
+      ];
       const acceleratedType = acceleratedTypeFactory.buildList(7);
       const mockPlans = [
         nanodeType,

packages/manager/src/utilities/linodes.test.ts

@@ -82,7 +82,9 @@ describe('useIsLinodeCloneFirewallEnabled', () => {
 
 describe('useIsGenerationalPlansEnabled', () => {
   it('returns isGenerationalPlansEnabled: true if the feature is enabled', () => {
-    const options = { flags: { generationalPlans: true } };
+    const options = {
+      flags: { generationalPlansv2: { enabled: true, allowedPlans: [] } },
+    };
 
     const { result } = renderHook(() => useIsGenerationalPlansEnabled(), {
       wrapper: (ui) => wrapWithTheme(ui, options),
@@ -92,7 +94,9 @@ describe('useIsGenerationalPlansEnabled', () => {
   });
 
   it('returns isGenerationalPlansEnabled: false if the feature is NOT enabled', () => {
-    const options = { flags: { generationalPlans: false } };
+    const options = {
+      flags: { generationalPlansv2: { enabled: false, allowedPlans: [] } },
+    };
 
     const { result } = renderHook(() => useIsGenerationalPlansEnabled(), {
       wrapper: (ui) => wrapWithTheme(ui, options),

packages/manager/src/utilities/linodes.ts

@@ -97,6 +97,7 @@ export const useIsGenerationalPlansEnabled = () => {
   const flags = useFlags();
 
   return {
-    isGenerationalPlansEnabled: Boolean(flags.generationalPlans),
+    isGenerationalPlansEnabled: Boolean(flags.generationalPlansv2?.enabled),
+    allowedPlans: flags.generationalPlansv2?.allowedPlans || [],
   };
 };

packages/utilities/src/factories/linodes.ts

@@ -444,6 +444,20 @@ export const gpuTypeRtxProFactory = linodeTypeFactory.extend({
 
 export const premiumTypeFactory = linodeTypeFactory.extend({
   class: 'premium',
+  id: Factory.each((i) => `g7-premium-${i}`),
+  label: Factory.each((i) => `Premium ${i}GB`),
+});
+
+export const premiumNestedTypeFactory = linodeTypeFactory.extend({
+  class: 'premium',
+  id: 'g7-premium-112',
+  label: 'Premium Nested 112GB',
+});
+
+export const premiumHTTypeFactory = linodeTypeFactory.extend({
+  class: 'premium',
+  id: 'g7-premium-ht-256',
+  label: 'Premium HT 256GB',
 });
 
 export const acceleratedTypeFactory = linodeTypeFactory.extend({