Upcoming: [UIE-9540] - Implement filter for GPU plans in plans panel (#13115)

* Upcoming: [UIE-9540] - Implement filter for GPU plans in plans panel

* Added changeset: Implement filter for GPU plans in plans panel

Author: grevanak-akamai

packages/manager/.changeset/pr-13115-upcoming-features-1763630712827.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Implement filter for GPU plans in plans panel ([#13115](https://github.com/linode/manager/pull/13115))

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

@@ -348,26 +348,6 @@ export const KubernetesPlanContainer = (
 
         const shouldDisplayPagination = !shouldDisplayNoRegionSelectedMessage;
 
-        const dividerTables = planSelectionDividers
-          .map((divider) => ({
-            planType: divider.planType,
-            tables: divider.tables
-              .map((table) => ({
-                filterOptions: table,
-                plans: table.planFilter
-                  ? paginatedPlans.filter(table.planFilter)
-                  : paginatedPlans,
-              }))
-              .filter((table) => table.plans.length > 0),
-          }))
-          .filter((divider) => divider.tables.length > 0);
-
-        const activeDivider = dividerTables.find(
-          (divider) => divider.planType === planType
-        );
-
-        const hasActiveGpuDivider = planType === 'gpu' && activeDivider;
-
         return (
           <>
             <Grid container spacing={2}>
@@ -399,21 +379,6 @@ export const KubernetesPlanContainer = (
                     text={tableEmptyState.message}
                     variant="info"
                   />
-                ) : hasActiveGpuDivider ? (
-                  activeDivider.tables.map(({ filterOptions, plans }, idx) => (
-                    <React.Fragment
-                      key={`k8-mobile-${filterOptions.header ?? idx}`}
-                    >
-                      {filterOptions.header ? (
-                        <Grid size={12}>
-                          <Typography variant="h3">
-                            {filterOptions.header}
-                          </Typography>
-                        </Grid>
-                      ) : null}
-                      {renderPlanSelection(plans)}
-                    </React.Fragment>
-                  ))
                 ) : (
                   renderPlanSelection(paginatedPlans)
                 )}
@@ -425,31 +390,15 @@ export const KubernetesPlanContainer = (
                     xs: 12,
                   }}
                 >
-                  {hasActiveGpuDivider ? (
-                    activeDivider.tables.map(
-                      ({ filterOptions, plans }, idx) => (
-                        <KubernetesPlanSelectionTable
-                          filterOptions={filterOptions}
-                          key={`k8-plan-filter-${idx}`}
-                          plans={plans}
-                          renderPlanSelection={renderPlanSelection}
-                          shouldDisplayNoRegionSelectedMessage={
-                            shouldDisplayNoRegionSelectedMessage
-                          }
-                        />
-                      )
-                    )
-                  ) : (
-                    <KubernetesPlanSelectionTable
-                      filterEmptyStateMessage={tableEmptyState?.message}
-                      key={planType ?? 'all'}
-                      plans={paginatedPlans}
-                      renderPlanSelection={renderPlanSelection}
-                      shouldDisplayNoRegionSelectedMessage={
-                        shouldDisplayNoRegionSelectedMessage
-                      }
-                    />
-                  )}
+                  <KubernetesPlanSelectionTable
+                    filterEmptyStateMessage={tableEmptyState?.message}
+                    key={planType ?? 'all'}
+                    plans={paginatedPlans}
+                    renderPlanSelection={renderPlanSelection}
+                    shouldDisplayNoRegionSelectedMessage={
+                      shouldDisplayNoRegionSelectedMessage
+                    }
+                  />
                 </Grid>
               </Hidden>
             </Grid>

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

@@ -4,6 +4,7 @@ import type { JSX } from 'react';
 
 import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel';
 import { createDedicatedPlanFiltersRenderProp } from 'src/features/components/PlansPanel/DedicatedPlanFilters';
+import { createGPUPlanFilterRenderProp } from 'src/features/components/PlansPanel/GpuFilters';
 import { PlanInformation } from 'src/features/components/PlansPanel/PlanInformation';
 import {
   determineInitialPlanCategoryTab,
@@ -153,11 +154,16 @@ export const KubernetesPlansPanel = (props: Props) => {
                 hasMajorityOfPlansDisabled={hasMajorityOfPlansDisabled}
                 onAdd={onAdd}
                 onSelect={onSelect}
-                planFilters={
-                  plan === 'dedicated'
-                    ? createDedicatedPlanFiltersRenderProp()
-                    : undefined
-                }
+                planFilters={(() => {
+                  switch (plan) {
+                    case 'dedicated':
+                      return createDedicatedPlanFiltersRenderProp();
+                    case 'gpu':
+                      return createGPUPlanFilterRenderProp();
+                    default:
+                      return undefined;
+                  }
+                })()}
                 plans={plansForThisLinodeTypeClass}
                 planType={plan}
                 selectedId={selectedId}

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

@@ -12,15 +12,17 @@ import { Select } from '@linode/ui';
 import * as React from 'react';
 
 import {
-  PLAN_FILTER_GENERATION_ALL,
+  PLAN_FILTER_ALL,
   PLAN_FILTER_GENERATION_G6,
   PLAN_FILTER_GENERATION_G7,
   PLAN_FILTER_GENERATION_G8,
-  PLAN_FILTER_TYPE_ALL,
   PLAN_FILTER_TYPE_COMPUTE_OPTIMIZED,
   PLAN_FILTER_TYPE_GENERAL_PURPOSE,
 } from './constants';
-import { applyPlanFilters, supportsTypeFiltering } from './utils/planFilters';
+import {
+  applyDedicatedPlanFilters,
+  supportsTypeFiltering,
+} from './utils/planFilters';
 
 import type {
   PlanFilterRenderArgs,
@@ -31,20 +33,20 @@ import type { PlanFilterGeneration, PlanFilterType } from './types/planFilters';
 import type { SelectOption } from '@linode/ui';
 
 const GENERATION_OPTIONS: SelectOption<PlanFilterGeneration>[] = [
-  { label: 'All', value: PLAN_FILTER_GENERATION_ALL },
+  { label: 'All', value: PLAN_FILTER_ALL },
   { label: 'G8 Dedicated', value: PLAN_FILTER_GENERATION_G8 },
   { label: 'G7 Dedicated', value: PLAN_FILTER_GENERATION_G7 },
   { label: 'G6 Dedicated', value: PLAN_FILTER_GENERATION_G6 },
 ];
 
 const TYPE_OPTIONS_WITH_SUBTYPES: SelectOption<PlanFilterType>[] = [
-  { label: 'All', value: PLAN_FILTER_TYPE_ALL },
+  { label: 'All', value: PLAN_FILTER_ALL },
   { label: 'Compute Optimized', value: PLAN_FILTER_TYPE_COMPUTE_OPTIMIZED },
   { label: 'General Purpose', value: PLAN_FILTER_TYPE_GENERAL_PURPOSE },
 ];
 
 const TYPE_OPTIONS_ALL_ONLY: SelectOption<PlanFilterType>[] = [
-  { label: 'All', value: PLAN_FILTER_TYPE_ALL },
+  { label: 'All', value: PLAN_FILTER_ALL },
 ];
 
 interface DedicatedPlanFiltersComponentProps {
@@ -59,12 +61,10 @@ const DedicatedPlanFiltersComponent = React.memo(
     const { disabled = false, onResult, plans, resetPagination } = props;
 
     // Local state - persists automatically because component stays mounted
-    const [generation, setGeneration] = React.useState<PlanFilterGeneration>(
-      PLAN_FILTER_GENERATION_ALL
-    );
+    const [generation, setGeneration] =
+      React.useState<PlanFilterGeneration>(PLAN_FILTER_ALL);
 
-    const [type, setType] =
-      React.useState<PlanFilterType>(PLAN_FILTER_TYPE_ALL);
+    const [type, setType] = React.useState<PlanFilterType>(PLAN_FILTER_ALL);
 
     const typeFilteringSupported = supportsTypeFiltering(generation);
 
@@ -109,11 +109,11 @@ const DedicatedPlanFiltersComponent = React.memo(
         // When clearing, default to "All" instead of undefined
         const newGeneration =
           (option?.value as PlanFilterGeneration | undefined) ??
-          PLAN_FILTER_GENERATION_ALL;
+          PLAN_FILTER_ALL;
         setGeneration(newGeneration);
 
         // Reset type filter when generation changes
-        setType(PLAN_FILTER_TYPE_ALL);
+        setType(PLAN_FILTER_ALL);
       },
       []
     );
@@ -124,25 +124,23 @@ const DedicatedPlanFiltersComponent = React.memo(
         option: null | SelectOption<number | string>
       ) => {
         setType(
-          (option?.value as PlanFilterType | undefined) ?? PLAN_FILTER_TYPE_ALL
+          (option?.value as PlanFilterType | undefined) ?? PLAN_FILTER_ALL
         );
       },
       []
     );
 
     const filteredPlans = React.useMemo(() => {
-      const normalizedType = typeFilteringSupported
-        ? type
-        : PLAN_FILTER_TYPE_ALL;
-      return applyPlanFilters(plans, generation, normalizedType);
+      const normalizedType = typeFilteringSupported ? type : PLAN_FILTER_ALL;
+      return applyDedicatedPlanFilters(plans, generation, normalizedType);
     }, [generation, plans, type, typeFilteringSupported]);
 
     const selectedGenerationOption = React.useMemo(() => {
       return GENERATION_OPTIONS.find((opt) => opt.value === generation) ?? null;
     }, [generation]);
 
     const selectedTypeOption = React.useMemo(() => {
-      const displayType = typeFilteringSupported ? type : PLAN_FILTER_TYPE_ALL;
+      const displayType = typeFilteringSupported ? type : PLAN_FILTER_ALL;
       return typeOptions.find((opt) => opt.value === displayType) ?? null;
     }, [type, typeFilteringSupported, typeOptions]);
 
@@ -155,6 +153,7 @@ const DedicatedPlanFiltersComponent = React.memo(
             flexWrap: 'wrap',
             gap: '19px',
             marginBottom: 16,
+            marginTop: -16,
           }}
         >
           <Select
@@ -189,7 +188,7 @@ const DedicatedPlanFiltersComponent = React.memo(
       return {
         filteredPlans,
         filterUI,
-        hasActiveFilters: generation !== PLAN_FILTER_GENERATION_ALL,
+        hasActiveFilters: generation !== PLAN_FILTER_ALL,
       };
     }, [
       disabled,