change: [M3-8159] - Modify limited availability banner display logic (#…

…10536) * Modify limited availability banner display logic * Update class copy * Added changeset: Modify limited availability banner display logic * Add comments * Update packages/manager/src/features/components/PlansPanel/PlansPanel.tsx Co-authored-by: Mariah Jacobs <[email protected]> * feedback @mjac0bs --------- Co-authored-by: Mariah Jacobs <[email protected]>
linode · Jun 5, 2024 · c13f58e · c13f58e
1 parent 684c38c
commit c13f58e
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 121 deletions.
diff --git a/packages/manager/.changeset/pr-10536-changed-1717183226858.md b/packages/manager/.changeset/pr-10536-changed-1717183226858.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Modify limited availability banner display logic ([#10536](https://github.com/linode/manager/pull/10536))
diff --git a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts b/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
@@ -44,6 +44,11 @@ const mockDedicatedLinodeTypes = [
     label: 'dedicated-3',
     class: 'dedicated',
   }),
+  linodeTypeFactory.build({
+    id: 'dedicated-4',
+    label: 'dedicated-4',
+    class: 'dedicated',
+  }),
 ];
 
 const mockSharedLinodeTypes = [
@@ -98,19 +103,29 @@ const mockRegionAvailability = [
     available: false,
     region: 'us-east',
   }),
+  regionAvailabilityFactory.build({
+    plan: 'dedicated-4',
+    available: false,
+    region: 'us-east',
+  }),
   regionAvailabilityFactory.build({
     plan: 'highmem-1',
     available: false,
     region: 'us-east',
   }),
+  regionAvailabilityFactory.build({
+    plan: 'shared-3',
+    available: false,
+    region: 'us-east',
+  }),
 ];
 
 const linodePlansPanel = '[data-qa-tp="Linode Plan"]';
 const k8PlansPanel = '[data-qa-tp="Add Node Pools"]';
 const planSelectionTable = 'List of Linode Plans';
 
 const notices = {
-  limitedAvailability: '[data-testid="disabled-plan-tooltip"]',
+  limitedAvailability: '[data-testid="limited-availability-banner"]',
   unavailable: '[data-testid="notice-error"]',
 };
 
@@ -136,31 +151,31 @@ describe('displays linode plans panel based on availability', () => {
     // Dedicated CPU tab
     // Should be selected/open by default
     // Should have the limited availability notice
-    // Should contain 4 plans (5 rows including the header row)
-    // Should have 2 plans disabled
-    // Should have tooltips for the disabled plans (not more than half disabled plans in the panel)
+    // Should contain 5 plans (6 rows including the header row)
+    // Should have 3 plans disabled
+    // Should not have tooltips for the disabled plans (more than half disabled plans in the panel)
     cy.get(linodePlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 1);
       cy.get(notices.limitedAvailability).should('be.visible');
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
-        cy.findAllByRole('row').should('have.length', 5);
+        cy.findAllByRole('row').should('have.length', 6);
         cy.get('[id="dedicated-1"]').should('be.enabled');
         cy.get('[id="dedicated-2"]').should('be.enabled');
         cy.get(
           '[aria-label="dedicated-3 - This plan has limited deployment availability."]'
         );
         cy.get('[id="dedicated-3"]').should('be.disabled');
         cy.get('[id="g6-dedicated-64"]').should('be.disabled');
-        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 2);
+        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
       });
     });
 
     // Shared CPU tab
     // Should have no notices
     // Should contain 3 plans (4 rows including the header row)
-    // Should have 0 disabled plan
-    // Should have no tooltip for the disabled plan
+    // Should have 1 disabled plan
+    // Should have one tooltip for the disabled plan
     cy.findByText('Shared CPU').click();
     cy.get(linodePlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 0);
@@ -169,16 +184,16 @@ describe('displays linode plans panel based on availability', () => {
         cy.findAllByRole('row').should('have.length', 4);
         cy.get('[id="shared-1"]').should('be.enabled');
         cy.get('[id="shared-2"]').should('be.enabled');
-        cy.get('[id="shared-3"]').should('be.enabled');
-        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
+        cy.get('[id="shared-3"]').should('be.disabled');
+        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 1);
       });
     });
 
     // High Memory tab
     // Should have the limited availability notice
     // Should contain 1 plan (2 rows including the header row)
     // Should have one disabled plan
-    // Should have tooltip for the disabled plan (more than half disabled plans in the panel, but only one plan)
+    // Should have no tooltip for the disabled plan (more than half disabled plans in the panel)
     cy.findByText('High Memory').click();
     cy.get(linodePlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 1);
@@ -187,7 +202,7 @@ describe('displays linode plans panel based on availability', () => {
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
         cy.findAllByRole('row').should('have.length', 2);
         cy.get('[id="highmem-1"]').should('be.disabled');
-        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 1);
+        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
       });
     });
 
@@ -232,17 +247,17 @@ describe('displays kubernetes plans panel based on availability', () => {
     // Dedicated CPU tab
     // Should be selected/open by default
     // Should have the limited availability notice
-    // Should contain 4 plans (5 rows including the header row)
-    // Should have 2 plans disabled
-    // Should have tooltips for the disabled plans (not more than half disabled plans in the panel)
+    // Should contain 5 plans (6 rows including the header row)
+    // Should have 3 plans disabled
+    // Should have no tooltips for the disabled plans (more than half disabled plans in the panel)
     // All inputs for a row should be enabled if row is enabled (only testing one row in suite)
     // All inputs for a disabled row should be disabled (only testing one row in suite)
     cy.get(k8PlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 1);
       cy.get(notices.limitedAvailability).should('be.visible');
 
       cy.findByRole('table', { name: planSelectionTable }).within(() => {
-        cy.findAllByRole('row').should('have.length', 5);
+        cy.findAllByRole('row').should('have.length', 6);
         cy.get('[data-qa-plan-row="dedicated-1"]').should(
           'not.have.attr',
           'disabled'
@@ -270,14 +285,14 @@ describe('displays kubernetes plans panel based on availability', () => {
             )
             .should('be.disabled');
         });
-        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 2);
+        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
       });
     });
 
     // Shared CPU tab
     // Should have no notices
     // Should contain 3 plans (4 rows including the header row)
-    // Should have 1 disabled plan
+    // Should have 2 disabled plans
     // Should have tooltip for the disabled plan (not more than half disabled plans in the panel)
     cy.findByText('Shared CPU').click();
     cy.get(k8PlansPanel).within(() => {
@@ -293,19 +308,16 @@ describe('displays kubernetes plans panel based on availability', () => {
           'not.have.attr',
           'disabled'
         );
-        cy.get('[data-qa-plan-row="shared-3"]').should(
-          'not.have.attr',
-          'disabled'
-        );
-        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
+        cy.get('[data-qa-plan-row="shared-3"]').should('have.attr', 'disabled');
+        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 1);
       });
     });
 
     // High Memory tab
     // Should have the limited availability notice
     // Should contain 1 plan (2 rows including the header row)
     // Should have one disabled plan
-    // Should have tooltip for the disabled plan (more than half disabled plans in the panel, but only one plan)
+    // Should have no tooltip for the disabled plan (more than half disabled plans in the panel)
     cy.findByText('High Memory').click();
     cy.get(k8PlansPanel).within(() => {
       cy.findAllByRole('alert').should('have.length', 1);
@@ -317,7 +329,7 @@ describe('displays kubernetes plans panel based on availability', () => {
           'have.attr',
           'disabled'
         );
-        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 1);
+        cy.findAllByTestId('disabled-plan-tooltip').should('have.length', 0);
       });
     });
 

diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlansPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlansPanel.tsx
@@ -76,7 +76,6 @@ export const KubernetesPlansPanel = (props: Props) => {
     const plansMap: PlanSelectionType[] = plans[plan];
     const {
       allDisabledPlans,
-      hasDisabledPlans,
       hasMajorityOfPlansDisabled,
       plansForThisLinodeTypeClass,
     } = extractPlansInformation({
@@ -94,7 +93,7 @@ export const KubernetesPlansPanel = (props: Props) => {
               isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan(
                 plan
               )}
-              hasDisabledPlans={hasDisabledPlans}
+              hasMajorityOfPlansDisabled={hasMajorityOfPlansDisabled}
               hasSelectedRegion={hasSelectedRegion}
               planType={plan}
               regionsData={regionsData}

diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.test.tsx
@@ -11,7 +11,7 @@ import {
 import type { PlanInformationProps } from './PlanInformation';
 
 const mockProps: PlanInformationProps = {
-  hasDisabledPlans: false,
+  hasMajorityOfPlansDisabled: false,
   hasSelectedRegion: true,
   isSelectedRegionEligibleForPlan: false,
   planType: 'standard',
@@ -38,7 +38,7 @@ describe('PlanInformation', () => {
     renderWithTheme(
       <PlanInformation
         {...mockProps}
-        hasDisabledPlans={true}
+        hasMajorityOfPlansDisabled={true}
         isSelectedRegionEligibleForPlan={true}
         planType="dedicated"
       />