change: [M3-7860] - Source ACLB region info from API data and use Jakarta instead of Sydney

packages/manager/.changeset/pr-10274-changed-1710189301907.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Source ACLB region info from API data and use Jakarta instead of Sydney ([#10274](https://github.com/linode/manager/pull/10274))

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

@@ -7,7 +7,8 @@ import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 
-import { LoadBalancerRegions as Regions } from '../LoadBalancerDetail/LoadBalancerRegions';
+import { ACLB_BETA_REGION_IDS } from '../constants';
+import { LoadBalancerRegionsList } from '../LoadBalancerDetail/LoadBalancerRegions';
 
 interface Props {
   sx?: SxProps<Theme>;
@@ -28,7 +29,7 @@ export const LoadBalancerRegions = ({ sx }: Props) => {
             No charges will be incurred.
           </Typography>
         </Stack>
-        <Regions />
+        <LoadBalancerRegionsList regionIds={ACLB_BETA_REGION_IDS} />
       </Stack>
     </Paper>
   );

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRegions.tsx

@@ -1,27 +1,28 @@
 import React from 'react';
 
-import { Flag } from 'src/components/Flag';
-import { Stack } from 'src/components/Stack';
-import { Typography } from 'src/components/Typography';
+import { Stack, StackProps } from 'src/components/Stack';
 
-import type { Country } from '@linode/api-v4';
+import { RegionItem } from '../LoadBalancerLanding/RegionItem';
 
-export const regions = [
-  { country: 'us', id: 'us-mia', label: 'Miami, FL' },
-  { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
-  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
-  { country: 'jp', id: 'jp-osa', label: 'Osaka, JP' },
-  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },
-];
+interface Props extends StackProps {
+  /**
+   * Disables the country flag that shows before the region label
+   * @default false
+   */
+  hideFlags?: boolean;
+  /**
+   * The region ids
+   */
+  regionIds: string[];
+}
+
+export const LoadBalancerRegionsList = (props: Props) => {
+  const { hideFlags, regionIds, ...rest } = props;
 
-export const LoadBalancerRegions = () => {
   return (
-    <Stack spacing={1.25}>
-      {regions.map((region) => (
-        <Stack alignItems="center" direction="row" key={region.id} spacing={2}>
-          <Flag country={region.country as Country} />
-          <Typography>{`${region.label} (${region.id})`}</Typography>
-        </Stack>
+    <Stack spacing={1.25} {...rest}>
+      {regionIds?.map((regionId) => (
+        <RegionItem hideFlag={hideFlags} key={regionId} regionId={regionId} />
       ))}
     </Stack>
   );

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx

@@ -7,19 +7,17 @@ import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { IPAddress } from 'src/features/Linodes/LinodesLanding/IPAddress';
 import { useLoadBalancerQuery } from 'src/queries/aclb/loadbalancers';
-// import { useRegionsQuery } from 'src/queries/regions';
 
 import { Ports } from '../LoadBalancerLanding/Ports';
 import { LoadBalancerEndpointHealth } from './LoadBalancerEndpointHealth';
-import { LoadBalancerRegions } from './LoadBalancerRegions';
+import { LoadBalancerRegionsList } from './LoadBalancerRegions';
 
 export const LoadBalancerSummary = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
 
   const id = Number(loadbalancerId);
 
   const { data: loadbalancer } = useLoadBalancerQuery(id);
-  // const { data: regions } = useRegionsQuery();
 
   const items = [
     {
@@ -44,15 +42,7 @@ export const LoadBalancerSummary = () => {
     },
     {
       title: 'Regions',
-      value: <LoadBalancerRegions />,
-      // Uncomment the line below to show the regions returned by the API.
-      // value: (
-      //   <Typography>
-      //     {loadbalancer?.regions
-      //       .map((region) => regions?.find((r) => r.id === region)?.label)
-      //       .join(', ')}
-      //   </Typography>
-      // ),
+      value: <LoadBalancerRegionsList regionIds={loadbalancer?.regions ?? []} />,
     },
   ];
 

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx

@@ -10,7 +10,7 @@ import {
   useLoadBalancerQuery,
 } from 'src/queries/aclb/loadbalancers';
 
-import { LoadBalancerRegions } from '../LoadBalancerRegions';
+import { LoadBalancerRegionsList } from '../LoadBalancerRegions';
 
 interface Props {
   loadbalancerId: number;
@@ -42,7 +42,7 @@ export const Region = ({ loadbalancerId }: Props) => {
             />{' '}
             Load Balancer regions can not be changed during beta.
           </Typography>
-          <LoadBalancerRegions />
+          <LoadBalancerRegionsList regionIds={loadbalancer?.regions ?? []} />
         </Stack>
       </form>
     </Paper>

packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx

@@ -3,14 +3,12 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Hidden } from 'src/components/Hidden';
-import { Stack } from 'src/components/Stack';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-import { Typography } from 'src/components/Typography';
 import { IPAddress } from 'src/features/Linodes/LinodesLanding/IPAddress';
 
 import { LoadBalancerEndpointHealth } from '../LoadBalancerDetail/LoadBalancerEndpointHealth';
-import { regions as alphaRegions } from '../LoadBalancerDetail/LoadBalancerRegions';
+import { LoadBalancerRegionsList } from '../LoadBalancerDetail/LoadBalancerRegions';
 import { LoadBalancerActionsMenu } from './LoadBalancerActionsMenu';
 import { Ports } from './Ports';
 
@@ -24,7 +22,7 @@ interface Props {
 }
 
 export const LoadBalancerRow = ({ handlers, loadBalancer }: Props) => {
-  const { hostname, id, label } = loadBalancer;
+  const { hostname, id, label, regions } = loadBalancer;
 
   return (
     <TableRow
@@ -51,17 +49,12 @@ export const LoadBalancerRow = ({ handlers, loadBalancer }: Props) => {
       </Hidden>
       <Hidden mdDown>
         <TableCell>
-          <Stack py={1} spacing={0.5}>
-            {alphaRegions.map(({ id, label }) => (
-              <Typography key={id}>
-                {label} ({id})
-              </Typography>
-            ))}
-          </Stack>
-          {/* Uncomment the code below to show the regions returned by the API */}
-          {/* {regions.map((region) => (
-            <RegionsCell key={region} region={region} />
-          ))} */}
+          <LoadBalancerRegionsList
+            hideFlags
+            py={1}
+            regionIds={regions}
+            spacing={0.5}
+          />
         </TableCell>
       </Hidden>
       <TableCell actionCell>

packages/manager/src/features/LoadBalancers/LoadBalancerLanding/RegionItem.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { regionFactory } from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { rest, server } from 'src/mocks/testServer';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { RegionItem } from './RegionItem';
+
+describe('RegionItem', () => {
+  it('renders the regions label from API data', async () => {
+    const region = regionFactory.build();
+
+    server.use(
+      rest.get('*/v4/regions', (req, res, ctx) => {
+        return res(ctx.json(makeResourcePage([region])));
+      })
+    );
+
+    const { findByText } = renderWithTheme(<RegionItem regionId={region.id} />);
+
+    await findByText(`${region.label} (${region.id})`);
+  });
+  it('renders the region id when there is no API region data', async () => {
+    const region = regionFactory.build();
+
+    const { getByText } = renderWithTheme(<RegionItem regionId={region.id} />);
+
+    expect(getByText(region.id)).toBeVisible();
+  });
+});

packages/manager/src/features/LoadBalancers/LoadBalancerLanding/RegionItem.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { Flag } from 'src/components/Flag';
+import { Stack } from 'src/components/Stack';
+import { Typography } from 'src/components/Typography';
+import { useRegionsQuery } from 'src/queries/regions';
+
+import type { Country } from '@linode/api-v4';
+
+interface Props {
+  /**
+   * Shows a country flag for the region
+   * @default false
+   */
+  hideFlag?: boolean;
+  /**
+   * The region id
+   */
+  regionId: string;
+}
+
+export const RegionItem = ({ hideFlag, regionId }: Props) => {
+  const { data: regions } = useRegionsQuery();
+
+  const region = regions?.find((r) => r.id === regionId);
+
+  if (!region) {
+    return (
+      <Stack alignItems="center" direction="row" spacing={2}>
+        {!hideFlag && <Flag country={'' as Country} />}
+        <Typography>{regionId}</Typography>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack alignItems="center" direction="row" spacing={2}>
+      {!hideFlag && <Flag country={region.country as Country} />}
+      <Typography>
+        {region.label} ({region.id})
+      </Typography>
+    </Stack>
+  );
+};

packages/manager/src/features/LoadBalancers/constants.ts

@@ -14,3 +14,11 @@ export const ACLB_DOCS = {
   ServiceTargetCertificates: `${ACLB_DOCS_ROOT}/guides/certificates/#service-target-certificates`,
   TLSCertificates: `${ACLB_DOCS_ROOT}/guides/certificates`,
 };
+
+export const ACLB_BETA_REGION_IDS = [
+  'us-mia',
+  'us-lax',
+  'fr-par',
+  'jp-osa',
+  'id-cgk',
+];