fixed: [UIE-9539] Turn off generational plan features if no g7 and g8 plans are returned (#13136)

* fixed: [UIE-9539] turn off generational plan features if no g7 and g8 plans are returned

* fixed: [UIE-9539] addressed review comment

* fixed: [UIE-9539] updated info content in dedicated cpu tab

* fixed: [UIE-9539] updated info content in dedicated cpu tab and configured it to fallback to previous message if generational plans are not there in dedicated

Author: tvijay-akamai

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

@@ -110,7 +110,10 @@ export const KubernetesPlanContainer = (
     wholePanelIsDisabled,
   } = props;
   const shouldDisplayNoRegionSelectedMessage = !selectedRegionId;
-  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled();
+  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled(
+    plans,
+    planType
+  );
 
   /**
    * This features allows us to divide the GPU plans into two separate tables.
@@ -297,6 +300,7 @@ export const KubernetesPlanContainer = (
                         filterOptions={table}
                         key={`k8-plan-filter-${idx}`}
                         plans={filteredPlans}
+                        planType={planType}
                         renderPlanSelection={renderPlanSelection}
                         shouldDisplayNoRegionSelectedMessage={
                           shouldDisplayNoRegionSelectedMessage
@@ -309,6 +313,7 @@ export const KubernetesPlanContainer = (
                 <KubernetesPlanSelectionTable
                   key={planType}
                   plans={plans}
+                  planType={planType}
                   renderPlanSelection={renderPlanSelection}
                   shouldDisplayNoRegionSelectedMessage={
                     shouldDisplayNoRegionSelectedMessage
@@ -394,6 +399,7 @@ export const KubernetesPlanContainer = (
                     filterEmptyStateMessage={tableEmptyState?.message}
                     key={planType ?? 'all'}
                     plans={paginatedPlans}
+                    planType={planType}
                     renderPlanSelection={renderPlanSelection}
                     shouldDisplayNoRegionSelectedMessage={
                       shouldDisplayNoRegionSelectedMessage

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

@@ -9,6 +9,7 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { useIsGenerationalPlansEnabled } from 'src/utilities/linodes';
 import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing/constants';
 
+import type { LinodeTypeClass } from '@linode/api-v4';
 import type { PlanSelectionFilterOptionsTable } from 'src/features/components/PlansPanel/PlanContainer';
 import type { PlanWithAvailability } from 'src/features/components/PlansPanel/types';
 
@@ -19,6 +20,7 @@ interface KubernetesPlanSelectionTableProps {
   filterEmptyStateMessage?: string;
   filterOptions?: PlanSelectionFilterOptionsTable;
   plans?: PlanWithAvailability[];
+  planType?: LinodeTypeClass;
   renderPlanSelection?: (plans: PlanWithAvailability[]) => React.JSX.Element[];
   shouldDisplayNoRegionSelectedMessage: boolean;
 }
@@ -40,10 +42,14 @@ export const KubernetesPlanSelectionTable = (
     filterEmptyStateMessage,
     filterOptions,
     plans,
+    planType,
     renderPlanSelection,
     shouldDisplayNoRegionSelectedMessage,
   } = props;
-  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled();
+  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled(
+    plans,
+    planType
+  );
 
   // Determine spacing based on feature flag:
   // - If generationalPlans is enabled (pagination mode) -> spacingBottom={0}

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

@@ -144,6 +144,7 @@ export const KubernetesPlansPanel = (props: Props) => {
                 isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan(
                   plan
                 )}
+                plans={plansForThisLinodeTypeClass}
                 planType={plan}
                 regionsData={regionsData}
               />

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

@@ -116,7 +116,10 @@ export const PlanContainer = (props: PlanContainerProps) => {
   } = props;
   const location = useLocation();
   const flags = useFlags();
-  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled();
+  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled(
+    plans,
+    planType
+  );
 
   // Show the Transfer column if, for any plan, the api returned data and we're not in the Database Create flow
   const showTransfer =

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Link } from 'src/components/Link';
 import { useFlags } from 'src/hooks/useFlags';
+import { useIsGenerationalPlansEnabled } from 'src/utilities/linodes';
 
 import { APLNotice } from './APLNotice';
 import {
@@ -19,6 +20,7 @@ import { PlansAvailabilityNotice } from './PlansAvailabilityNotice';
 import { PlanNoticeTypography } from './PlansAvailabilityNotice.styles';
 import { planTabInfoContent } from './utils';
 
+import type { PlanSelectionType } from './types';
 import type { Region } from '@linode/api-v4';
 import type { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
 import type { Theme } from '@mui/material/styles';
@@ -37,6 +39,10 @@ export interface PlanInformationProps extends ExtendedPlanType {
   isAPLEnabled?: boolean;
   isResize?: boolean;
   isSelectedRegionEligibleForPlan: boolean;
+  /**
+   * Array of plans for this plan type class.
+   */
+  plans?: PlanSelectionType[];
   regionsData?: Region[];
 }
 
@@ -51,6 +57,7 @@ export const PlanInformation = (props: PlanInformationProps) => {
     isAPLEnabled,
     isResize,
     isSelectedRegionEligibleForPlan,
+    plans,
     planType,
     regionsData,
   } = props;
@@ -142,10 +149,10 @@ export const PlanInformation = (props: PlanInformationProps) => {
         <Notice
           dataTestId={limitedAvailabilityBannerTestId}
           sx={(theme: Theme) => ({
-            marginBottom: theme.spacing(3),
+            marginBottom: theme.spacingFunction(24),
             marginLeft: 0,
             marginTop: 0,
-            padding: `${theme.spacing(0.5)} ${theme.spacing(2)}`,
+            padding: `${theme.spacingFunction(4)} ${theme.spacingFunction(16)}`,
           })}
           variant="warning"
         >
@@ -158,15 +165,30 @@ export const PlanInformation = (props: PlanInformationProps) => {
         additionalBanners.map((banner, index) => (
           <React.Fragment key={index}>{banner}</React.Fragment>
         ))}
-      <ClassDescriptionCopy planType={planType} />
+      <ClassDescriptionCopy plans={plans} planType={planType} />
     </>
   );
 };
 
 export const limitedAvailabilityBannerTestId = 'limited-availability-banner';
 
-export const ClassDescriptionCopy = (props: ExtendedPlanType) => {
-  const { planType } = props;
+interface ClassDescriptionCopyProps extends ExtendedPlanType {
+  /**
+   * Array of plans for this plan type class.
+   */
+  plans?: PlanSelectionType[];
+}
+
+export const ClassDescriptionCopy = (props: ClassDescriptionCopyProps) => {
+  const { plans, planType } = props;
+
+  // Only check generational plans feature for dedicated plans
+  // Other plan types don't have different legacy descriptions
+  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled(
+    plans,
+    planType === 'dedicated' ? 'dedicated' : undefined
+  );
+
   let planTypeLabel: null | string;
   let docLink: null | string;
 
@@ -200,18 +222,31 @@ export const ClassDescriptionCopy = (props: ExtendedPlanType) => {
       docLink = null;
   }
 
+  // Determine which typography to display
+  let typography: string | undefined;
+
+  if (planType === 'dedicated') {
+    // For dedicated plans, use typographyOld if generational plans are disabled
+    typography = isGenerationalPlansEnabled
+      ? planTabInfoContent.dedicated?.typography
+      : planTabInfoContent.dedicated?.typographyOld ||
+        planTabInfoContent.dedicated?.typography;
+  } else {
+    // For all other plan types, just use typography
+    typography =
+      planTabInfoContent[planType as keyof typeof planTabInfoContent]
+        ?.typography;
+  }
+
   return planTypeLabel && docLink ? (
     <Typography
       sx={(theme: Theme) => ({
-        marginBottom: theme.spacing(3),
-        marginTop: theme.spacing(1),
+        marginBottom: theme.spacingFunction(24),
+        marginTop: theme.spacingFunction(8),
       })}
     >
-      {
-        planTabInfoContent[planType as keyof typeof planTabInfoContent]
-          ?.typography
-      }{' '}
-      <Link to={docLink}>Learn more</Link> about our {planTypeLabel} plans.
+      {typography} <Link to={docLink}>Learn more</Link> about our{' '}
+      {planTypeLabel} plans.
     </Typography>
   ) : null;
 };

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

@@ -59,7 +59,10 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => {
     showUsableStorage,
   } = props;
   const flags = useFlags();
-  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled();
+  const { isGenerationalPlansEnabled } = useIsGenerationalPlansEnabled(
+    plans,
+    planType
+  );
 
   // Determine spacing based on feature flag:
   // - If generationalPlans is enabled (pagination mode) -> spacingBottom={0}

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

@@ -209,6 +209,7 @@ export const PlansPanel = (props: PlansPanelProps) => {
                 isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan(
                   plan
                 )}
+                plans={plansForThisLinodeTypeClass}
                 planType={plan}
                 regionsData={regionsData || []}
               />

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

@@ -237,6 +237,8 @@ export const planTabInfoContent = {
     key: 'dedicated',
     title: 'Dedicated CPU',
     typography:
+      'Dedicated CPU instances are built for full-duty workloads needing consistent performance. Choose from different hardware generations — newer plans feature the latest hardware. Select Compute Optimized (1:2) for CPU-heavy tasks or General Purpose (1:4) for balanced workloads.',
+    typographyOld:
       'Dedicated CPU instances are good for full-duty workloads where consistent performance is important.',
   },
   gpu: {
@@ -504,7 +506,7 @@ export const useShouldDisablePremiumPlansTab = ({
   types: LinodeType[] | PlanSelectionType[] | undefined;
 }): boolean => {
   const { isGenerationalPlansEnabled, allowedPlans } =
-    useIsGenerationalPlansEnabled();
+    useIsGenerationalPlansEnabled(types, 'premium');
   // 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(