refactor: [M3-8203] - Refactor Region Select

packages/api-v4/src/regions/types.ts

@@ -47,6 +47,6 @@ export interface RegionAvailability {
   region: string;
 }
 
-type ContinentCode = keyof typeof COUNTRY_CODE_TO_CONTINENT_CODE;
+type CountryCode = keyof typeof COUNTRY_CODE_TO_CONTINENT_CODE;
 
-export type Country = Lowercase<ContinentCode>;
+export type Country = Lowercase<CountryCode>;

packages/manager/src/components/RegionSelect/RegionMultiSelect.stories.tsx

@@ -8,10 +8,10 @@ import { sortByString } from 'src/utilities/sort-by';
 import { RegionMultiSelect } from './RegionMultiSelect';
 
 import type { RegionMultiSelectProps } from './RegionSelect.types';
+import type { Region } from '@linode/api-v4';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { RegionSelectOption } from 'src/components/RegionSelect/RegionSelect.types';
 
-const sortRegionOptions = (a: RegionSelectOption, b: RegionSelectOption) => {
+const sortRegionOptions = (a: Region, b: Region) => {
   return sortByString(a.label, b.label, 'asc');
 };
 
@@ -30,7 +30,7 @@ export const Default: StoryObj<RegionMultiSelectProps> = {
         <Box sx={{ minHeight: 500 }}>
           <RegionMultiSelect
             {...args}
-            handleSelection={handleSelectionChange}
+            onChange={handleSelectionChange}
             selectedIds={selectedRegionsIds}
           />
         </Box>

packages/manager/src/components/RegionSelect/RegionMultiSelect.test.tsx

@@ -1,3 +1,4 @@
+import { Region } from '@linode/api-v4';
 import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
@@ -6,24 +7,19 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { RegionMultiSelect } from './RegionMultiSelect';
 
-import type { RegionSelectOption } from 'src/components/RegionSelect/RegionSelect.types';
-
-const regions = regionFactory.buildList(1, {
+const regionNewark = regionFactory.build({
   id: 'us-east',
   label: 'Newark, NJ',
 });
 
-const regionsNewark = regionFactory.buildList(1, {
-  id: 'us-east',
-  label: 'Newark, NJ',
-});
-const regionsAtlanta = regionFactory.buildList(1, {
+const regionAtlanta = regionFactory.build({
   id: 'us-southeast',
   label: 'Atlanta, GA',
 });
+
 interface SelectedRegionsProps {
   onRemove: (region: string) => void;
-  selectedRegions: RegionSelectOption[];
+  selectedRegions: Region[];
 }
 const SelectedRegionsList = ({
   onRemove,
@@ -32,8 +28,8 @@ const SelectedRegionsList = ({
   <ul>
     {selectedRegions.map((region, index) => (
       <li aria-label={region.label} key={index}>
-        {region.label}
-        <button onClick={() => onRemove(region.value)}>Remove</button>
+        {region.label} ({region.id})
+        <button onClick={() => onRemove(region.id)}>Remove</button>
       </li>
     ))}
   </ul>
@@ -46,8 +42,8 @@ describe('RegionMultiSelect', () => {
     renderWithTheme(
       <RegionMultiSelect
         currentCapability="Block Storage"
-        handleSelection={mockHandleSelection}
-        regions={regions}
+        onChange={mockHandleSelection}
+        regions={[regionNewark, regionAtlanta]}
         selectedIds={[]}
       />
     );
@@ -56,11 +52,12 @@ describe('RegionMultiSelect', () => {
   });
 
   it('should be able to select all the regions correctly', () => {
+    const onChange = vi.fn();
     renderWithTheme(
       <RegionMultiSelect
         currentCapability="Block Storage"
-        handleSelection={mockHandleSelection}
-        regions={[...regionsNewark, ...regionsAtlanta]}
+        onChange={onChange}
+        regions={[regionNewark, regionAtlanta]}
         selectedIds={[]}
       />
     );
@@ -70,26 +67,17 @@ describe('RegionMultiSelect', () => {
 
     fireEvent.click(screen.getByRole('option', { name: 'Select All' }));
 
-    // Check if all the option is selected
-    expect(
-      screen.getByRole('option', {
-        name: 'Newark, NJ (us-east)',
-      })
-    ).toHaveAttribute('aria-selected', 'true');
-    expect(
-      screen.getByRole('option', {
-        name: 'Newark, NJ (us-east)',
-      })
-    ).toHaveAttribute('aria-selected', 'true');
+    expect(onChange).toHaveBeenCalledWith([regionAtlanta.id, regionNewark.id]);
   });
 
   it('should be able to deselect all the regions', () => {
+    const onChange = vi.fn();
     renderWithTheme(
       <RegionMultiSelect
         currentCapability="Block Storage"
-        handleSelection={mockHandleSelection}
-        regions={[...regionsNewark, ...regionsAtlanta]}
-        selectedIds={['us-east', 'us-southeast']}
+        onChange={onChange}
+        regions={[regionNewark, regionAtlanta]}
+        selectedIds={[regionAtlanta.id, regionNewark.id]}
       />
     );
 
@@ -98,17 +86,7 @@ describe('RegionMultiSelect', () => {
 
     fireEvent.click(screen.getByRole('option', { name: 'Deselect All' }));
 
-    // Check if all the option is deselected selected
-    expect(
-      screen.getByRole('option', {
-        name: 'Newark, NJ (us-east)',
-      })
-    ).toHaveAttribute('aria-selected', 'false');
-    expect(
-      screen.getByRole('option', {
-        name: 'Newark, NJ (us-east)',
-      })
-    ).toHaveAttribute('aria-selected', 'false');
+    expect(onChange).toHaveBeenCalledWith([]);
   });
 
   it('should render selected regions correctly', () => {
@@ -121,30 +99,34 @@ describe('RegionMultiSelect', () => {
           />
         )}
         currentCapability="Block Storage"
-        handleSelection={mockHandleSelection}
-        regions={[...regionsNewark, ...regionsAtlanta]}
-        selectedIds={[]}
+        onChange={mockHandleSelection}
+        regions={[regionNewark, regionAtlanta]}
+        selectedIds={[regionNewark.id]}
       />
     );
 
     // Open the dropdown
     fireEvent.click(screen.getByRole('button', { name: 'Open' }));
 
-    fireEvent.click(screen.getByRole('option', { name: 'Select All' }));
-
-    // Close the dropdown
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-
-    // Check if all the options are rendered
+    // Check Newark chip shows becaused it is selected
     expect(
       screen.getByRole('listitem', {
-        name: 'Newark, NJ (us-east)',
+        name: 'Newark, NJ',
       })
     ).toBeInTheDocument();
+
+    // Newark is selected
     expect(
-      screen.getByRole('listitem', {
+      screen.getByRole('option', {
         name: 'Newark, NJ (us-east)',
       })
-    ).toBeInTheDocument();
+    ).toHaveAttribute('aria-selected', 'true');
+
+    // Atlanta is not selected
+    expect(
+      screen.getByRole('option', {
+        name: 'Atlanta, GA (us-southeast)',
+      })
+    ).toHaveAttribute('aria-selected', 'false');
   });
 });