fix: [M3-9986] - Selected Geographical Area state in Distributed Region select (linode#12584)

## Description 📝
Fix selected Geographical Area persistence issue when switching between Core and Distributed Region tabs

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure gecko feature flag is enabled and your account has gecko customer tags (reach out for more info)

### Verification steps

(How to verify changes)

- [ ] Checkout this branch or preview link and go to the Linode Create page
- [ ] Click on the Distributed Region tab, select a value other than All, click on the Core Region tab, switch back to the Distributed tab
- [ ] You should see the Geographical Area persist the value you selected before switching and the Regions are still filtered  accordingly

Author: hana-akamai

packages/manager/.changeset/pr-12584-fixed-1753473403068.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Geographical Area state in Distributed Region select in Linode Create flow ([#12584](https://github.com/linode/manager/pull/12584))

packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.test.tsx

@@ -1,3 +1,4 @@
+import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
@@ -6,36 +7,14 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
 
 import { TwoStepRegion } from './TwoStepRegion';
 
-const queryMocks = vi.hoisted(() => ({
-  useNavigate: vi.fn(),
-  useParams: vi.fn(),
-  useSearch: vi.fn(),
-}));
-
-vi.mock('@tanstack/react-router', async () => {
-  const actual = await vi.importActual('@tanstack/react-router');
-  return {
-    ...actual,
-    useNavigate: queryMocks.useNavigate,
-    useSearch: queryMocks.useSearch,
-    useParams: queryMocks.useParams,
-  };
-});
-
 describe('TwoStepRegion', () => {
-  beforeEach(() => {
-    queryMocks.useNavigate.mockReturnValue(vi.fn());
-    queryMocks.useSearch.mockReturnValue({});
-    queryMocks.useParams.mockReturnValue({});
-  });
-
   it('should render a heading and docs link', () => {
-    const { getAllByText, getByText } = renderWithThemeAndHookFormContext({
+    renderWithThemeAndHookFormContext({
       component: <TwoStepRegion onChange={vi.fn()} />,
     });
 
-    const heading = getAllByText('Region')[0];
-    const link = getByText(DOCS_LINK_LABEL_DC_PRICING);
+    const heading = screen.getAllByText('Region')[0];
+    const link = screen.getByText(DOCS_LINK_LABEL_DC_PRICING);
 
     expect(heading).toBeVisible();
     expect(heading.tagName).toBe('H2');
@@ -46,73 +25,94 @@ describe('TwoStepRegion', () => {
   });
 
   it('should render two tabs, Core and Distributed', () => {
-    const { getAllByRole } = renderWithThemeAndHookFormContext({
+    renderWithThemeAndHookFormContext({
       component: <TwoStepRegion onChange={vi.fn()} />,
     });
 
-    const tabs = getAllByRole('tab');
-    expect(tabs[0]).toHaveTextContent('Core');
-    expect(tabs[1]).toHaveTextContent('Distributed');
+    const [coreTab, distributedTab] = screen.getAllByRole('tab');
+
+    expect(coreTab).toHaveTextContent('Core');
+    expect(distributedTab).toHaveTextContent('Distributed');
   });
 
   it('should render a Region Select for the Core tab', () => {
-    const { getByPlaceholderText } = renderWithThemeAndHookFormContext({
+    renderWithThemeAndHookFormContext({
       component: <TwoStepRegion onChange={vi.fn()} />,
     });
 
-    const select = getByPlaceholderText('Select a Region');
+    const regionSelect = screen.getByPlaceholderText('Select a Region');
 
-    expect(select).toBeVisible();
-    expect(select).toBeEnabled();
+    expect(regionSelect).toBeVisible();
+    expect(regionSelect).toBeEnabled();
   });
 
   it('should only display core regions in the Core tab region select', async () => {
-    const { getByPlaceholderText, getByRole } =
-      renderWithThemeAndHookFormContext({
-        component: <TwoStepRegion onChange={vi.fn()} />,
-      });
+    renderWithThemeAndHookFormContext({
+      component: <TwoStepRegion onChange={vi.fn()} />,
+    });
 
-    const select = getByPlaceholderText('Select a Region');
-    await userEvent.click(select);
+    const regionSelect = screen.getByPlaceholderText('Select a Region');
+    await userEvent.click(regionSelect);
 
-    const dropdown = getByRole('listbox');
+    const dropdown = screen.getByRole('listbox');
     expect(dropdown.innerHTML).toContain('US, Newark');
     expect(dropdown.innerHTML).not.toContain(
       'US, Gecko Distributed Region Test'
     );
   });
 
   it('should only display distributed regions in the Distributed tab region select', async () => {
-    const { getAllByRole, getByPlaceholderText, getByRole } =
-      renderWithThemeAndHookFormContext({
-        component: <TwoStepRegion onChange={vi.fn()} />,
-      });
+    renderWithThemeAndHookFormContext({
+      component: <TwoStepRegion onChange={vi.fn()} />,
+    });
 
-    const tabs = getAllByRole('tab');
-    await userEvent.click(tabs[1]);
+    const distributedTab = screen.getByRole('tab', { name: 'Distributed' });
+    await userEvent.click(distributedTab);
 
-    const select = getByPlaceholderText('Select a Region');
-    await userEvent.click(select);
+    const regionSelect = screen.getByPlaceholderText('Select a Region');
+    await userEvent.click(regionSelect);
 
-    const dropdown = getByRole('listbox');
+    const dropdown = screen.getByRole('listbox');
     expect(dropdown.innerHTML).toContain('US, Gecko Distributed Region Test');
     expect(dropdown.innerHTML).not.toContain('US, Newark');
   });
 
   it('should render a Geographical Area select with All pre-selected and a Region Select for the Distributed tab', async () => {
-    const { getAllByRole } = renderWithThemeAndHookFormContext({
+    renderWithThemeAndHookFormContext({
       component: <TwoStepRegion onChange={vi.fn()} />,
     });
 
-    const tabs = getAllByRole('tab');
-    await userEvent.click(tabs[1]);
+    const [, distributedTab] = screen.getAllByRole('tab');
+    await userEvent.click(distributedTab);
 
-    const inputs = getAllByRole('combobox');
-    const geographicalAreaSelect = inputs[0];
-    const regionSelect = inputs[1];
+    const [geographicalAreaSelect, regionSelect] =
+      screen.getAllByRole('combobox');
 
     expect(geographicalAreaSelect).toHaveAttribute('value', 'All');
     expect(regionSelect).toHaveAttribute('placeholder', 'Select a Region');
     expect(regionSelect).toBeEnabled();
   });
+
+  it('should persist the selected Geographical Area when switching between the Core and Distributed tabs', async () => {
+    renderWithThemeAndHookFormContext({
+      component: <TwoStepRegion onChange={vi.fn()} />,
+    });
+
+    const [coreTab, distributedTab] = screen.getAllByRole('tab');
+    await userEvent.click(distributedTab);
+
+    const geographicalAreaSelect = screen.getByLabelText('Geographical Area');
+    // Open the dropdown
+    await userEvent.click(geographicalAreaSelect);
+
+    const lastMonthOption = screen.getByText('North America');
+    await userEvent.click(lastMonthOption);
+    expect(geographicalAreaSelect).toHaveAttribute('value', 'North America');
+
+    // Geographical area selection should persist after switching tabs
+    await userEvent.click(coreTab);
+    await userEvent.click(distributedTab);
+    const geographicalAreaSelect2 = screen.getByLabelText('Geographical Area');
+    expect(geographicalAreaSelect2).toHaveAttribute('value', 'North America');
+  });
 });

packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.tsx

@@ -140,6 +140,9 @@ export const TwoStepRegion = (props: CombinedProps) => {
                 }
               }}
               options={GEOGRAPHICAL_AREA_OPTIONS}
+              value={GEOGRAPHICAL_AREA_OPTIONS.find(
+                (option) => option.value === regionFilter
+              )}
             />
             <RegionSelect
               currentCapability="Linodes"