Save work

linode · Apr 22, 2024 · c30caf6 · c30caf6
1 parent 8d176fb
commit c30caf6
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 51 deletions.
diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx
@@ -9,13 +9,12 @@ import { TableBody } from 'src/components/TableBody';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
-import { useFlags } from 'src/hooks/useFlags';
 import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing/constants';
 
 import { StyledTable, StyledTableCell } from './PlanContainer.styles';
 import { PlanSelection } from './PlanSelection';
 
-import type { PlanSelectionType, TypeWithAvailability } from './types';
+import type { TypeWithAvailability } from './types';
 import type { Region } from '@linode/api-v4';
 
 const tableCells = [
@@ -36,12 +35,12 @@ const tableCells = [
 ];
 
 export interface Props {
+  allDisabledPlans: string[];
   currentPlanHeading?: string;
   disabled?: boolean;
   disabledClasses?: LinodeTypeClass[];
-  disabledPlanTypes?: PlanSelectionType[];
   disabledPlanTypesToolTipText?: string;
-  hideDisabledHelpIcons?: boolean;
+  hasMajorityOfPlansDisabled: boolean;
   isCreate?: boolean;
   linodeID?: number | undefined;
   onSelect: (key: string) => void;
@@ -54,12 +53,12 @@ export interface Props {
 
 export const PlanContainer = (props: Props) => {
   const {
+    allDisabledPlans,
     currentPlanHeading,
     disabled: isWholePanelDisabled,
     disabledClasses,
-    disabledPlanTypes,
     disabledPlanTypesToolTipText,
-    hideDisabledHelpIcons,
+    hasMajorityOfPlansDisabled,
     isCreate,
     linodeID,
     onSelect,
@@ -69,7 +68,6 @@ export const PlanContainer = (props: Props) => {
     selectedRegionId,
     showTransfer,
   } = props;
-  const flags = useFlags();
   const location = useLocation();
 
   // Show the Transfer column if, for any plan, the api returned data and we're not in the Database Create flow
@@ -90,40 +88,24 @@ export const PlanContainer = (props: Props) => {
     !selectedRegionId && !isDatabaseCreateFlow && !isDatabaseResizeFlow;
 
   const renderPlanSelection = React.useCallback(() => {
-    const allDisabledPlans: string[] = [];
-
-    if (disabledPlanTypes) {
-      disabledPlanTypes.forEach((plan) => {
-        allDisabledPlans.push(plan.id);
-      });
-    }
-
     return plans.map((plan, id) => {
-      // Determine if the plan should be disabled solely due to being a 512GB plan
-      const isDisabled512GbPlan =
-        plan.label.includes('512GB') &&
-        Boolean(flags.disableLargestGbPlans) &&
-        !isWholePanelDisabled;
-
-      if (plan.isLimitedAvailabilityPlan || isDisabled512GbPlan) {
-        allDisabledPlans.push(plan.id);
-      }
-
       const isPlanDisabled = allDisabledPlans.includes(plan.id);
 
       return (
         <PlanSelection
+          hideDisabledHelpIcons={
+            isWholePanelDisabled || hasMajorityOfPlansDisabled
+          }
           currentPlanHeading={currentPlanHeading}
-          disabled={isWholePanelDisabled || isPlanDisabled}
           disabledClasses={disabledClasses}
           disabledToolTip={disabledPlanTypesToolTipText}
-          hideDisabledHelpIcons={hideDisabledHelpIcons}
           idx={id}
           isCreate={isCreate}
+          isPlanDisabled={isPlanDisabled}
+          isWholePanelDisabled={isWholePanelDisabled}
           key={id}
           linodeID={linodeID}
           onSelect={onSelect}
-          planIsDisabled={isPlanDisabled}
           selectedDiskSize={selectedDiskSize}
           selectedId={selectedId}
           selectedRegionId={selectedRegionId}
@@ -133,21 +115,20 @@ export const PlanContainer = (props: Props) => {
       );
     });
   }, [
-    disabledPlanTypes,
+    allDisabledPlans,
     disabledPlanTypesToolTipText,
+    hasMajorityOfPlansDisabled,
     plans,
     selectedRegionId,
     isWholePanelDisabled,
     currentPlanHeading,
     disabledClasses,
-    hideDisabledHelpIcons,
     isCreate,
     linodeID,
     onSelect,
     selectedDiskSize,
     selectedId,
     showTransfer,
-    flags.disableLargestGbPlans,
   ]);
 
   return (

diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx
@@ -30,16 +30,16 @@ import type { LinodeTypeClass, PriceObject, Region } from '@linode/api-v4';
 
 export interface PlanSelectionProps {
   currentPlanHeading?: string;
-  disabled?: boolean;
   disabledClasses?: LinodeTypeClass[];
   disabledToolTip?: string;
   header?: string;
   hideDisabledHelpIcons?: boolean;
   idx: number;
   isCreate?: boolean;
+  isPlanDisabled?: boolean;
+  isWholePanelDisabled?: boolean;
   linodeID?: number | undefined;
   onSelect: (key: string) => void;
-  planIsDisabled?: boolean;
   selectedDiskSize?: number;
   selectedId?: string;
   selectedRegionId?: Region['id'];
@@ -56,14 +56,14 @@ const getDisabledClass = (
 
 const getToolTip = ({
   disabledToolTip,
-  planIsDisabled,
+  isPlanDisabled,
   sizeTooSmall,
 }: {
   disabledToolTip?: string;
-  planIsDisabled?: boolean;
+  isPlanDisabled?: boolean;
   sizeTooSmall: boolean;
 }) => {
-  if (planIsDisabled) {
+  if (isPlanDisabled) {
     return disabledToolTip;
   }
   if (sizeTooSmall) {
@@ -75,15 +75,15 @@ const getToolTip = ({
 export const PlanSelection = (props: PlanSelectionProps) => {
   const {
     currentPlanHeading,
-    disabled,
     disabledClasses,
     disabledToolTip,
     hideDisabledHelpIcons,
     idx,
     isCreate,
+    isPlanDisabled,
+    isWholePanelDisabled,
     linodeID,
     onSelect,
-    planIsDisabled,
     selectedDiskSize,
     selectedId,
     selectedRegionId,
@@ -96,7 +96,7 @@ export const PlanSelection = (props: PlanSelectionProps) => {
   const isSamePlan = type.heading === currentPlanHeading;
   const tooltip = getToolTip({
     disabledToolTip,
-    planIsDisabled,
+    isPlanDisabled,
     sizeTooSmall: planTooSmall,
   });
   const isGPU = type.class === 'gpu';
@@ -127,7 +127,11 @@ export const PlanSelection = (props: PlanSelectionProps) => {
   )}/mo ($${price?.hourly ?? UNKNOWN_PRICE}/hr)`;
 
   const rowIsDisabled =
-    isSamePlan || planTooSmall || isDisabledClass || planIsDisabled || disabled;
+    isSamePlan ||
+    planTooSmall ||
+    isDisabledClass ||
+    isPlanDisabled ||
+    isWholePanelDisabled;
 
   return (
     <React.Fragment key={`tabbed-panel-${idx}`}>
@@ -151,14 +155,14 @@ export const PlanSelection = (props: PlanSelectionProps) => {
                 control={
                   <Radio
                     checked={
-                      !disabled &&
+                      !isWholePanelDisabled &&
                       !rowIsDisabled &&
                       !planTooSmall &&
                       type.id === String(selectedId)
                     }
                     disabled={
                       planTooSmall ||
-                      disabled ||
+                      isWholePanelDisabled ||
                       rowIsDisabled ||
                       isDisabledClass
                     }
@@ -274,7 +278,7 @@ export const PlanSelection = (props: PlanSelectionProps) => {
           disabled={
             planTooSmall ||
             isSamePlan ||
-            disabled ||
+            isWholePanelDisabled ||
             rowIsDisabled ||
             isDisabledClass
           }

diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx
@@ -56,6 +56,7 @@ export const PlansPanel = (props: Props) => {
     copy,
     currentPlanHeading,
     disabled,
+    disabledClasses,
     disabledPlanTypes,
     disabledPlanTypesToolTipText,
     docsLink,
@@ -65,6 +66,7 @@ export const PlansPanel = (props: Props) => {
     linodeID,
     onSelect,
     regionsData,
+    selectedDiskSize,
     selectedId,
     selectedRegionID,
     showTransfer,
@@ -117,8 +119,8 @@ export const PlansPanel = (props: Props) => {
   // @TODO Gecko: Get plan data from API when it's available instead of hardcoding
   const plans = showEdgePlanTable
     ? {
-      dedicated: getDedicatedEdgePlanType(),
-    }
+        dedicated: getDedicatedEdgePlanType(),
+      }
     : _plans;
 
   const {
@@ -145,6 +147,26 @@ export const PlansPanel = (props: Props) => {
       }
     );
 
+    const allDisabledPlans = plansForThisLinodeTypeClass.reduce((acc, plan) => {
+      // Determine if the plan should be disabled solely due to being a 512GB plan
+      const isDisabled512GbPlan =
+        plan.label.includes('512GB') && Boolean(flags.disableLargestGbPlans);
+      // && !isWholePanelDisabled;
+
+      if (
+        plan.isLimitedAvailabilityPlan ||
+        isDisabled512GbPlan ||
+        disabledPlanTypes?.some((disabledPlan) => disabledPlan.id === plan.id)
+      ) {
+        return [...acc, plan.id];
+      }
+
+      return acc;
+    }, []);
+    const hasDisabledPlans = allDisabledPlans.length > 0;
+    const hasMajorityOfPlansDisabled =
+      allDisabledPlans.length >= plansForThisLinodeTypeClass.length / 2;
+
     return {
       disabled: props.disabledTabs ? props.disabledTabs?.includes(plan) : false,
       render: () => {
@@ -157,8 +179,8 @@ export const PlansPanel = (props: Props) => {
               isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan(
                 plan
               )}
-              disabledClasses={props.disabledClasses}
-              hasDisabledPlans={false} // TODO GETWELL based on other TODO
+              disabledClasses={disabledClasses}
+              hasDisabledPlans={hasDisabledPlans}
               hasSelectedRegion={hasSelectedRegion}
               planType={plan}
               regionsData={regionsData || []}
@@ -170,17 +192,17 @@ export const PlansPanel = (props: Props) => {
               />
             )}
             <PlanContainer
+              allDisabledPlans={allDisabledPlans}
               currentPlanHeading={currentPlanHeading}
               disabled={disabled || isPlanPanelDisabled(plan)}
-              disabledClasses={props.disabledClasses}
-              disabledPlanTypes={disabledPlanTypes}
+              disabledClasses={disabledClasses}
               disabledPlanTypesToolTipText={disabledPlanTypesToolTipText}
-              hideDisabledHelpIcons={false} // TODO GETWELL: determined by callback from plan container if we have more than half of the plans disabledd
+              hasMajorityOfPlansDisabled={hasMajorityOfPlansDisabled}
               isCreate={isCreate}
               linodeID={linodeID}
               onSelect={onSelect}
               plans={plansForThisLinodeTypeClass}
-              selectedDiskSize={props.selectedDiskSize}
+              selectedDiskSize={selectedDiskSize}
               selectedId={selectedId}
               selectedRegionId={selectedRegionID}
               showTransfer={showTransfer}