fix: [DPS-36769] - Filtering clusters by region not working (#13491)

Author: mduda-akamai

packages/manager/.changeset/pr-13491-fixed-1773404088592.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+In Stream Create and Edit forms in the Clusters table filtering by region resulted in an empty clusters list ([#13491](https://github.com/linode/manager/pull/13491))

packages/manager/src/features/Delivery/Streams/StreamForm/Clusters/StreamFormClusters.tsx

@@ -29,10 +29,12 @@ import { Table } from 'src/components/Table';
 import { StreamFormClusterTableContent } from 'src/features/Delivery/Streams/StreamForm/Clusters/StreamFormClustersTableContent';
 import { useAllKubernetesClustersQuery } from 'src/queries/kubernetes';
 
-import type { KubernetesCluster } from '@linode/api-v4';
 import type { FormMode } from 'src/features/Delivery/Shared/types';
 import type { OrderByKeys } from 'src/features/Delivery/Streams/StreamForm/Clusters/StreamFormClustersTableContent';
-import type { StreamAndDestinationFormType } from 'src/features/Delivery/Streams/StreamForm/types';
+import type {
+  ExtendedKubernetesCluster,
+  StreamAndDestinationFormType,
+} from 'src/features/Delivery/Streams/StreamForm/types';
 
 const controlPaths = {
   isAutoAddAllClustersEnabled:
@@ -80,7 +82,7 @@ export const StreamFormClusters = (props: StreamFormClustersProps) => {
     [regions]
   );
 
-  const eligibleClusters = useMemo(() => {
+  const eligibleClusters: ExtendedKubernetesCluster[] = useMemo(() => {
     const regionMap = new Map(
       eligibleRegions.map(({ id, label }) => [id, label])
     );
@@ -89,7 +91,7 @@ export const StreamFormClusters = (props: StreamFormClustersProps) => {
       .filter(({ region }) => regionMap.has(region))
       .map((cluster) => ({
         ...cluster,
-        region: regionMap.get(cluster.region)
+        regionLabel: regionMap.get(cluster.region)
           ? `${regionMap.get(cluster.region)} (${cluster.region})`
           : cluster.region,
       }));
@@ -198,7 +200,7 @@ export const StreamFormClusters = (props: StreamFormClustersProps) => {
   }, [searchText, regionFilter, logGenerationFilter, eligibleClusters]);
 
   const sortedAndFilteredClusters = useMemo(
-    () => sortData<KubernetesCluster>(orderBy, order)(filteredClusters),
+    () => sortData<ExtendedKubernetesCluster>(orderBy, order)(filteredClusters),
     [orderBy, order, filteredClusters]
   );
 

packages/manager/src/features/Delivery/Streams/StreamForm/Clusters/StreamFormClustersTableContent.tsx

@@ -10,13 +10,15 @@ import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableSortCell } from 'src/components/TableSortCell';
 
-import type { KubernetesCluster } from '@linode/api-v4';
-import type { StreamAndDestinationFormType } from 'src/features/Delivery/Streams/StreamForm/types';
+import type {
+  ExtendedKubernetesCluster,
+  StreamAndDestinationFormType,
+} from 'src/features/Delivery/Streams/StreamForm/types';
 
 export type OrderByKeys = 'label' | 'region';
 
 interface StreamFormClusterTableContentProps {
-  clusters: KubernetesCluster[] | undefined;
+  clusters: ExtendedKubernetesCluster[] | undefined;
   field: ControllerRenderProps<
     StreamAndDestinationFormType,
     'stream.details.cluster_ids'
@@ -101,7 +103,7 @@ export const StreamFormClusterTableContent = ({
           clusters.map(
             ({
               label,
-              region,
+              regionLabel,
               id,
               control_plane: { audit_logs_enabled: logsEnabled },
             }) => (
@@ -115,7 +117,7 @@ export const StreamFormClusterTableContent = ({
                   />
                 </TableCell>
                 <TableCell>{label}</TableCell>
-                <TableCell>{region}</TableCell>
+                <TableCell>{regionLabel}</TableCell>
                 <TableCell>
                   <Box alignItems="center" display="flex">
                     <StatusIcon status={logsEnabled ? 'active' : 'error'} />

packages/manager/src/features/Delivery/Streams/StreamForm/types.ts

@@ -1,4 +1,8 @@
-import type { CreateStreamPayload, StreamDetailsType } from '@linode/api-v4';
+import type {
+  CreateStreamPayload,
+  KubernetesCluster,
+  StreamDetailsType,
+} from '@linode/api-v4';
 import type { DestinationFormType } from 'src/features/Delivery/Shared/types';
 
 export interface StreamFromType extends Omit<CreateStreamPayload, 'details'> {
@@ -9,3 +13,7 @@ export interface StreamAndDestinationFormType {
   destination: DestinationFormType;
   stream: StreamFromType;
 }
+
+export interface ExtendedKubernetesCluster extends KubernetesCluster {
+  regionLabel: string;
+}