save work still need to work on tests

linode · Apr 22, 2024 · 27393be · 27393be
1 parent c30caf6
commit 27393be
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 152 deletions.
diff --git a/...ges/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.test.tsx b/...ges/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.test.tsx
@@ -23,7 +23,10 @@ const plans: TypeWithAvailability[] = [
 ];
 
 const props: KubernetesPlanContainerProps = {
+  allDisabledPlans: [],
   getTypeCount: vi.fn(),
+  hasMajorityOfPlansDisabled: false,
+  isWholePanelDisabled: false,
   onSelect: vi.fn(),
   plans,
   selectedRegionId: undefined,

diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx
@@ -26,8 +26,10 @@ const tableCells = [
 ];
 
 export interface KubernetesPlanContainerProps {
-  disabled?: boolean;
+  allDisabledPlans: string[];
   getTypeCount: (planId: string) => number;
+  hasMajorityOfPlansDisabled: boolean;
+  isWholePanelDisabled: boolean;
   onAdd?: (key: string, value: number) => void;
   onSelect: (key: string) => void;
   plans: TypeWithAvailability[];
@@ -40,8 +42,10 @@ export const KubernetesPlanContainer = (
   props: KubernetesPlanContainerProps
 ) => {
   const {
-    disabled,
+    allDisabledPlans,
     getTypeCount,
+    hasMajorityOfPlansDisabled,
+    isWholePanelDisabled,
     onAdd,
     onSelect,
     plans,
@@ -54,14 +58,15 @@ export const KubernetesPlanContainer = (
 
   const renderPlanSelection = React.useCallback(() => {
     return plans.map((plan, id) => {
+      const isPlanDisabled = allDisabledPlans.includes(plan.id);
+
       return (
         <KubernetesPlanSelection
-          isLimitedAvailabilityPlan={
-            disabled ? false : plan.isLimitedAvailabilityPlan
-          } // No need for tooltip due to all plans being unavailable in region
-          disabled={disabled}
           getTypeCount={getTypeCount}
+          hasMajorityOfPlansDisabled={hasMajorityOfPlansDisabled}
           idx={id}
+          isPlanDisabled={isPlanDisabled}
+          isWholePanelDisabled={isWholePanelDisabled}
           key={id}
           onAdd={onAdd}
           onSelect={onSelect}
@@ -73,7 +78,9 @@ export const KubernetesPlanContainer = (
       );
     });
   }, [
-    disabled,
+    allDisabledPlans,
+    isWholePanelDisabled,
+    hasMajorityOfPlansDisabled,
     getTypeCount,
     onAdd,
     onSelect,

diff --git a/...ges/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx b/...ges/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx
@@ -33,8 +33,10 @@ const typeWithAvailability: TypeWithAvailability = {
 
 const props: KubernetesPlanSelectionProps = {
   getTypeCount: vi.fn(),
+  hasMajorityOfPlansDisabled: false,
   idx: 0,
-  isLimitedAvailabilityPlan: false,
+  isPlanDisabled: false,
+  isWholePanelDisabled: false,
   onAdd: vi.fn(),
   onSelect: vi.fn(),
   selectedRegionId: 'us-east',
@@ -126,11 +128,7 @@ describe('KubernetesPlanSelection (table, desktop view)', () => {
 
     const { getByRole, getByTestId, getByText } = renderWithTheme(
       wrapWithTableBody(
-        <KubernetesPlanSelection
-          {...props}
-          isLimitedAvailabilityPlan={true}
-          type={bigPlanType}
-        />,
+        <KubernetesPlanSelection {...props} type={bigPlanType} />,
         { flags: { disableLargestGbPlans: true } }
       )
     );
@@ -185,11 +183,7 @@ describe('KubernetesPlanSelection (cards, mobile view)', () => {
 
   it('shows limited availability messaging', async () => {
     const { getByRole, getByTestId, getByText } = renderWithTheme(
-      <KubernetesPlanSelection
-        {...props}
-        isLimitedAvailabilityPlan={true}
-        selectedRegionId={'us-east'}
-      />
+      <KubernetesPlanSelection {...props} selectedRegionId={'us-east'} />
     );
 
     const selectionCard = getByTestId('selection-card');
@@ -212,11 +206,7 @@ describe('KubernetesPlanSelection (cards, mobile view)', () => {
     };
 
     const { getByTestId } = renderWithTheme(
-      <KubernetesPlanSelection
-        {...props}
-        isLimitedAvailabilityPlan={false}
-        type={bigPlanType}
-      />,
+      <KubernetesPlanSelection {...props} type={bigPlanType} />,
       { flags: { disableLargestGbPlans: true } }
     );
 

diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.tsx
@@ -16,7 +16,6 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Tooltip } from 'src/components/Tooltip';
 import { LIMITED_AVAILABILITY_TEXT } from 'src/features/components/PlansPanel/constants';
-import { useFlags } from 'src/hooks/useFlags';
 import {
   PRICE_ERROR_TOOLTIP_TEXT,
   UNKNOWN_PRICE,
@@ -28,10 +27,11 @@ import { convertMegabytesTo } from 'src/utilities/unitConversions';
 import type { TypeWithAvailability } from 'src/features/components/PlansPanel/types';
 
 export interface KubernetesPlanSelectionProps {
-  disabled?: boolean;
   getTypeCount: (planId: string) => number;
+  hasMajorityOfPlansDisabled: boolean;
   idx: number;
-  isLimitedAvailabilityPlan: boolean;
+  isPlanDisabled: boolean;
+  isWholePanelDisabled: boolean;
   onAdd?: (key: string, value: number) => void;
   onSelect: (key: string) => void;
   selectedId?: string;
@@ -44,10 +44,11 @@ export const KubernetesPlanSelection = (
   props: KubernetesPlanSelectionProps
 ) => {
   const {
-    disabled,
     getTypeCount,
+    hasMajorityOfPlansDisabled,
     idx,
-    isLimitedAvailabilityPlan,
+    isPlanDisabled,
+    isWholePanelDisabled,
     onAdd,
     onSelect,
     selectedId,
@@ -56,14 +57,7 @@ export const KubernetesPlanSelection = (
     updatePlanCount,
   } = props;
 
-  const flags = useFlags();
-
-  // Determine if the plan should be disabled solely due to being a 512GB plan
-  const disabled512GbPlan =
-    type.label.includes('512GB') &&
-    Boolean(flags.disableLargestGbPlans) &&
-    !disabled;
-  const isDisabled = disabled || isLimitedAvailabilityPlan || disabled512GbPlan;
+  const isDisabled = isPlanDisabled || isWholePanelDisabled;
   const count = getTypeCount(type.id);
   const price: PriceObject | undefined = getLinodeRegionPrice(
     type,
@@ -88,13 +82,8 @@ export const KubernetesPlanSelection = (
         />
         {onAdd && (
           <Button
-            disabled={
-              count < 1 ||
-              disabled ||
-              isLimitedAvailabilityPlan ||
-              disabled512GbPlan
-            }
             buttonType="primary"
+            disabled={count < 1 || isDisabled}
             onClick={() => onAdd(type.id, count)}
             sx={{ marginLeft: '10px', minWidth: '85px' }}
           >
@@ -116,7 +105,7 @@ export const KubernetesPlanSelection = (
           <TableCell data-qa-plan-name>
             <Box alignItems="center">
               {type.heading} &nbsp;
-              {(isLimitedAvailabilityPlan || disabled512GbPlan) && (
+              {isDisabled && !hasMajorityOfPlansDisabled && (
                 <Tooltip
                   PopperProps={{
                     sx: {

diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlansPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlansPanel.tsx
@@ -4,9 +4,8 @@ import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel';
 import { PlanInformation } from 'src/features/components/PlansPanel/PlanInformation';
 import {
   determineInitialPlanCategoryTab,
-  getIsLimitedAvailability,
+  extractPlansInformation,
   getPlanSelectionsByPlanType,
-  isMajorityLimitedAvailabilityPlans,
   planTabInfoContent,
   replaceOrAppendPlaceholder512GbPlans,
 } from 'src/features/components/PlansPanel/utils';
@@ -18,16 +17,12 @@ import { KubernetesPlanContainer } from './KubernetesPlanContainer';
 
 import type { CreateNodePoolData, Region } from '@linode/api-v4';
 import type { LinodeTypeClass } from '@linode/api-v4/lib/linodes/types';
-import type {
-  PlanSelectionType,
-  TypeWithAvailability,
-} from 'src/features/components/PlansPanel/types';
+import type { PlanSelectionType } from 'src/features/components/PlansPanel/types';
 
 interface Props {
   addPool?: (pool?: CreateNodePoolData) => void;
   copy?: string;
   currentPlanHeading?: string;
-  disabled?: boolean;
   error?: string;
   getTypeCount: (planId: string) => number;
   hasSelectedRegion: boolean;
@@ -49,7 +44,6 @@ export const KubernetesPlansPanel = (props: Props) => {
   const {
     copy,
     currentPlanHeading,
-    disabled,
     error,
     getTypeCount,
     hasSelectedRegion,
@@ -79,23 +73,19 @@ export const KubernetesPlansPanel = (props: Props) => {
   );
 
   const tabs = Object.keys(plans).map((plan: LinodeTypeClass) => {
-    const _plansForThisLinodeTypeClass: PlanSelectionType[] = plans[plan];
-    const plansForThisLinodeTypeClass: TypeWithAvailability[] = _plansForThisLinodeTypeClass.map(
-      (plan) => {
-        return {
-          ...plan,
-          isLimitedAvailabilityPlan: getIsLimitedAvailability({
-            plan,
-            regionAvailabilities,
-            selectedRegionId,
-          }),
-        };
-      }
-    );
-
-    const mostClassPlansAreLimitedAvailability = isMajorityLimitedAvailabilityPlans(
-      plansForThisLinodeTypeClass
-    );
+    const plansMap: PlanSelectionType[] = plans[plan];
+    const {
+      allDisabledPlans,
+      hasDisabledPlans,
+      hasMajorityOfPlansDisabled,
+      plansForThisLinodeTypeClass,
+    } = extractPlansInformation({
+      disableLargestGbPlans: flags.disableLargestGbPlans,
+      disabledPlanTypes: [],
+      plans: plansMap,
+      regionAvailabilities,
+      selectedRegionId,
+    });
 
     return {
       render: () => {
@@ -105,19 +95,19 @@ export const KubernetesPlansPanel = (props: Props) => {
               isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan(
                 plan
               )}
-              mostClassPlansAreLimitedAvailability={
-                mostClassPlansAreLimitedAvailability
-              }
+              hasDisabledPlans={hasDisabledPlans}
               hasSelectedRegion={hasSelectedRegion}
               planType={plan}
               regionsData={regionsData}
             />
             <KubernetesPlanContainer
-              disabled={disabled || isPlanPanelDisabled(plan)}
+              allDisabledPlans={allDisabledPlans}
               getTypeCount={getTypeCount}
+              hasMajorityOfPlansDisabled={hasMajorityOfPlansDisabled}
+              isWholePanelDisabled={isPlanPanelDisabled(plan)}
               onAdd={onAdd}
               onSelect={onSelect}
-              plans={plans[plan]}
+              plans={plansForThisLinodeTypeClass}
               selectedId={selectedId}
               selectedRegionId={selectedRegionId}
               updatePlanCount={updatePlanCount}

diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.test.tsx
@@ -27,6 +27,8 @@ describe('PlanContainer', () => {
   it('shows the no region selected message when no region is selected', () => {
     const { getByText } = renderWithTheme(
       <PlanContainer
+        allDisabledPlans={[]}
+        hasMajorityOfPlansDisabled={false}
         onSelect={() => {}}
         plans={mockPlans}
         selectedRegionId={undefined}

diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.test.tsx
@@ -11,6 +11,7 @@ import {
 import type { PlanInformationProps } from './PlanInformation';
 
 const mockProps: PlanInformationProps = {
+  hasDisabledPlans: false,
   hasSelectedRegion: true,
   isSelectedRegionEligibleForPlan: false,
   planType: 'standard',

diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx
@@ -2,16 +2,15 @@ import { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
 import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 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 { PlansAvailabilityNotice } from '../../Linodes/LinodesCreate/PlansAvailabilityNotice';
 import {
   DEDICATED_COMPUTE_INSTANCES_LINK,
   GPU_COMPUTE_INSTANCES_LINK,
-  LIMITED_AVAILABILITY_DISMISSIBLEBANNER_KEY,
   PREMIUM_COMPUTE_INSTANCES_LINK,
 } from './constants';
 import { MetalNotice } from './MetalNotice';
@@ -143,15 +142,14 @@ export const LimitedAvailabilityNoticeCopy = (
 ) => {
   const { docsLink, hasDisabledPlans, planTypeLabel } = props;
   return (
-    <DismissibleBanner
+    <Notice
       sx={(theme: Theme) => ({
         marginBottom: theme.spacing(3),
         marginLeft: 0,
         marginTop: 0,
         padding: `${theme.spacing(0.5)} ${theme.spacing(2)}`,
       })}
       dataTestId={limitedAvailabilityBannerTestId}
-      preferenceKey={LIMITED_AVAILABILITY_DISMISSIBLEBANNER_KEY}
       variant="warning"
     >
       {hasDisabledPlans ? (
@@ -164,6 +162,6 @@ export const LimitedAvailabilityNoticeCopy = (
           <Link to={docsLink}>Learn more</Link> about plans and availability.
         </StyledNoticeTypography>
       )}
-    </DismissibleBanner>
+    </Notice>
   );
 };
diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx
@@ -28,7 +28,6 @@ const mockPlan: PlanSelectionType = planSelectionTypeFactory.build({
 
 const defaultProps: PlanSelectionProps = {
   idx: 0,
-  isLimitedAvailabilityPlan: false,
   onSelect: () => vi.fn(),
   type: mockPlan,
 };
@@ -173,11 +172,7 @@ describe('PlanSelection (table, desktop)', () => {
 
     const { getByRole, getByTestId, getByText } = renderWithTheme(
       wrapWithTableBody(
-        <PlanSelection
-          {...defaultProps}
-          isLimitedAvailabilityPlan={true}
-          type={bigPlanType}
-        />,
+        <PlanSelection {...defaultProps} type={bigPlanType} />,
         { flags: { disableLargestGbPlans: true } }
       )
     );
@@ -276,11 +271,7 @@ describe('PlanSelection (card, mobile)', () => {
 
   it('verifies the presence of a help icon button accompanied by descriptive text for plans marked as "Limited Availability".', async () => {
     const { getByRole, getByTestId, getByText } = renderWithTheme(
-      <PlanSelection
-        {...defaultProps}
-        isLimitedAvailabilityPlan={true}
-        selectedRegionId={'us-east'}
-      />
+      <PlanSelection {...defaultProps} selectedRegionId={'us-east'} />
     );
 
     const selectionCard = getByTestId('selection-card');
@@ -300,11 +291,7 @@ describe('PlanSelection (card, mobile)', () => {
     });
 
     const { getByTestId } = renderWithTheme(
-      <PlanSelection
-        {...defaultProps}
-        isLimitedAvailabilityPlan={false}
-        type={bigPlanType}
-      />,
+      <PlanSelection {...defaultProps} type={bigPlanType} />,
       { flags: { disableLargestGbPlans: true } }
     );