feat: [M3-7789] – Disable 512GB plans (#10228)

Co-authored-by: Dajahi Wiley <dwiley@linode.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Joe D'Amore <jdamore@linode.com>
linode · Mar 18, 2024 · fded40a · fded40a
1 parent 09d8402
commit fded40a
Show file tree

Hide file tree

Showing 30 changed files with 898 additions and 231 deletions.
diff --git a/packages/manager/.changeset/pr-10228-changed-1709051214975.md b/packages/manager/.changeset/pr-10228-changed-1709051214975.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Disable 512GB Plans ([#10228](https://github.com/linode/manager/pull/10228))
diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
@@ -983,6 +983,10 @@ describe('LKE cluster updates for DC-specific prices', () => {
       .findByTitle(`Add a Node Pool: ${mockCluster.label}`)
       .should('be.visible')
       .within(() => {
+        cy.findByText('Shared CPU')
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
         cy.findByText('Linode 0 GB')
           .should('be.visible')
           .closest('tr')
@@ -1209,6 +1213,10 @@ describe('LKE cluster updates for DC-specific prices', () => {
       .findByTitle(`Add a Node Pool: ${mockCluster.label}`)
       .should('be.visible')
       .within(() => {
+        cy.findByText('Shared CPU')
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
         cy.findByText('Linode 2 GB')
           .should('be.visible')
           .closest('tr')

diff --git a/packages/manager/src/components/SelectionCard/SelectionCard.tsx b/packages/manager/src/components/SelectionCard/SelectionCard.tsx
@@ -1,5 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { styled } from '@mui/material/styles';
+import { Theme, styled } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 
@@ -78,15 +78,15 @@ export interface SelectionCardProps {
   /**
    * Optional styles to apply to the grid of the card.
    */
-  sxGrid?: SxProps;
+  sxGrid?: SxProps<Theme>;
   /**
    * Optional styles to apply to the tooltip of the card.
    */
   sxTooltip?: SxProps;
   /**
    * Optional text to set in a tooltip when hovering over the card.
    */
-  tooltip?: string;
+  tooltip?: JSX.Element | string;
 }
 
 /**
@@ -112,6 +112,7 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
     sxCardBaseIcon,
     sxCardBaseSubheading,
     sxGrid,
+    sxTooltip,
     tooltip,
   } = props;
 
@@ -146,6 +147,7 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
   const cardGrid = (
     <StyledGrid
       className={className}
+      data-testid="selection-card"
       data-qa-selection-card
       data-qa-selection-card-checked={checked}
       disabled={disabled}
@@ -165,7 +167,13 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
 
   if (tooltip) {
     return (
-      <Tooltip placement="top" title={tooltip}>
+      <Tooltip
+        componentsProps={{
+          tooltip: { sx: sxTooltip },
+        }}
+        placement="top-end"
+        title={tooltip}
+      >
         {cardGrid}
       </Tooltip>
     );

diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx
@@ -93,6 +93,7 @@ export const SingleTextFieldForm = React.memo((props: Props) => {
         />
         <ActionsPanel
           primaryButtonProps={{
+            'data-testid': 'Button',
             disabled: disabled || value === initialValue,
             label: `Update ${label}`,
             loading: submitting,

diff --git a/packages/manager/src/constants.ts b/packages/manager/src/constants.ts
@@ -289,7 +289,3 @@ export const FIREWALL_GET_STARTED_LINK =
   'https://www.linode.com/docs/products/networking/cloud-firewall/get-started/';
 export const FIREWALL_LIMITS_CONSIDERATIONS_LINK =
   'https://www.linode.com/docs/products/networking/cloud-firewall/#limits-and-considerations';
-
-// Sold Out plans
-export const PLAN_IS_SOLD_OUT_COPY =
-  'This plan has no availability for the selected region. Please select a different plan or the same plan in another region.';
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -20,6 +20,7 @@ const MOCK_FEATURE_FLAGS_STORAGE_KEY = 'devTools/mock-feature-flags';
 const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'aclb', label: 'ACLB' },
   { flag: 'aclbFullCreateFlow', label: 'ACLB Full Create Flow' },
+  { flag: 'disableLargestGbPlans', label: 'Disable Largest GB Plans' },
   { flag: 'linodeCloneUiChanges', label: 'Linode Clone UI Changes' },
   { flag: 'gecko', label: 'Gecko' },
   { flag: 'parentChildAccountAccess', label: 'Parent/Child Account' },

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -51,6 +51,7 @@ export interface Flags {
   databaseBeta: boolean;
   databaseResize: boolean;
   databases: boolean;
+  disableLargestGbPlans: boolean;
   firewallNodebalancer: boolean;
   gecko: boolean;
   ipv6Sharing: boolean;

diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -9,8 +9,8 @@ import {
 } from '@linode/api-v4/lib/databases/types';
 import { APIError } from '@linode/api-v4/lib/types';
 import { createDatabaseSchema } from '@linode/validation/lib/databases.schema';
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { useFormik } from 'formik';
 import { groupBy } from 'ramda';
 import * as React from 'react';
@@ -24,8 +24,8 @@ import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Divider } from 'src/components/Divider';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue';
+import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { FormControl } from 'src/components/FormControl';
 import { FormControlLabel } from 'src/components/FormControlLabel';
@@ -40,11 +40,11 @@ import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
+import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 import { EngineOption } from 'src/features/Databases/DatabaseCreate/EngineOption';
 import { databaseEngineMap } from 'src/features/Databases/DatabaseLanding/DatabaseRow';
 import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils';
 import { typeLabelDetails } from 'src/features/Linodes/presentation';
-import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 import { useFlags } from 'src/hooks/useFlags';
 import {
   useCreateDatabaseMutation,
@@ -519,7 +519,9 @@ const DatabaseCreate = () => {
             error={errors.type}
             header="Choose a Plan"
             isCreate
+            regionsData={regionsData}
             selectedId={values.type}
+            selectedRegionID={values.region}
             types={displayTypes}
           />
         </Grid>

diff --git a/...ges/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.test.tsx b/...ges/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.test.tsx
@@ -9,7 +9,18 @@ import {
   KubernetesPlanContainerProps,
 } from './KubernetesPlanContainer';
 
-const plans = extendedTypeFactory.buildList(2);
+import type { TypeWithAvailability } from 'src/features/components/PlansPanel/types';
+
+const plans: TypeWithAvailability[] = [
+  {
+    ...extendedTypeFactory.build(),
+    isLimitedAvailabilityPlan: false,
+  },
+  {
+    ...extendedTypeFactory.build(),
+    isLimitedAvailabilityPlan: true,
+  },
+];
 
 const props: KubernetesPlanContainerProps = {
   getTypeCount: vi.fn(),

diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx
@@ -9,14 +9,12 @@ import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
-import { getIsPlanSoldOut } from 'src/features/components/PlansPanel/utils';
-import { useFlags } from 'src/hooks/useFlags';
-import { useRegionsAvailabilityQuery } from 'src/queries/regions';
-import { ExtendedType } from 'src/utilities/extendType';
 import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing/constants';
 
 import { KubernetesPlanSelection } from './KubernetesPlanSelection';
 
+import type { TypeWithAvailability } from 'src/features/components/PlansPanel/types';
+
 const tableCells = [
   { cellName: 'Plan', center: false, noWrap: false, testId: 'plan' },
   { cellName: 'Monthly', center: false, noWrap: false, testId: 'monthly' },
@@ -32,7 +30,7 @@ export interface KubernetesPlanContainerProps {
   getTypeCount: (planId: string) => number;
   onAdd?: (key: string, value: number) => void;
   onSelect: (key: string) => void;
-  plans: ExtendedType[];
+  plans: TypeWithAvailability[];
   selectedId?: string;
   selectedRegionId?: string;
   updatePlanCount: (planId: string, newCount: number) => void;
@@ -51,28 +49,19 @@ export const KubernetesPlanContainer = (
     selectedRegionId,
     updatePlanCount,
   } = props;
-  const flags = useFlags();
 
-  const { data: regionAvailabilities } = useRegionsAvailabilityQuery(
-    selectedRegionId || '',
-    Boolean(flags.soldOutChips) && selectedRegionId !== undefined
-  );
   const shouldDisplayNoRegionSelectedMessage = !selectedRegionId;
 
   const renderPlanSelection = React.useCallback(() => {
     return plans.map((plan, id) => {
-      const isPlanSoldOut = getIsPlanSoldOut({
-        plan,
-        regionAvailabilities,
-        selectedRegionId,
-      });
-
       return (
         <KubernetesPlanSelection
+          isLimitedAvailabilityPlan={
+            disabled ? false : plan.isLimitedAvailabilityPlan
+          } // No need for tooltip due to all plans being unavailable in region
           disabled={disabled}
           getTypeCount={getTypeCount}
           idx={id}
-          isPlanSoldOut={disabled ? false : isPlanSoldOut} // no need to add sold out chip if the whole panel is disabled (meaning that the plan isn't available for the selected region)
           key={id}
           onAdd={onAdd}
           onSelect={onSelect}
@@ -89,7 +78,6 @@ export const KubernetesPlanContainer = (
     onAdd,
     onSelect,
     plans,
-    regionAvailabilities,
     selectedId,
     selectedRegionId,
     updatePlanCount,