@spinnaker/google 2026.3.1 → 2026.4.0

package/src/loadBalancer/configure/choice/GceLoadBalancerChoiceModal.spec.tsx

@@ -1,20 +1,28 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import { ReactModal } from '@spinnaker/core';
 
-import { GceProxyLoadBalancerModal } from '../common/GceProxyLoadBalancerModal';
-import { GceHttpLoadBalancerModal } from '../http/GceHttpLoadBalancerModal';
-import { GceNetworkLoadBalancerModal } from '../network/GceNetworkLoadBalancerModal';
 import {
   GCE_LOAD_BALANCER_CHOICES,
   GceLoadBalancerChoiceModal,
   getGceLoadBalancerModal,
 } from './GceLoadBalancerChoiceModal';
+import { GceProxyLoadBalancerModal } from '../common/GceProxyLoadBalancerModal';
+import { GceHttpLoadBalancerModal } from '../http/GceHttpLoadBalancerModal';
+import { GceNetworkLoadBalancerModal } from '../network/GceNetworkLoadBalancerModal';
+import { GceRegionalExternalNetworkLoadBalancerModal } from '../network/GceRegionalExternalNetworkLoadBalancerModal';
 
 describe('GceLoadBalancerChoiceModal', () => {
   const application = { name: 'fnord' } as any;
 
+  const spyOnAllGceLoadBalancerModals = (impl: (props: any) => Promise<any> = () => Promise.resolve() as any): void => {
+    vi.spyOn(GceNetworkLoadBalancerModal, 'show').mockImplementation(impl);
+    vi.spyOn(GceProxyLoadBalancerModal, 'show').mockImplementation(impl);
+    vi.spyOn(GceHttpLoadBalancerModal, 'show').mockImplementation(impl);
+    vi.spyOn(GceRegionalExternalNetworkLoadBalancerModal, 'show').mockImplementation(impl);
+  };
+
   it('routes every exposed GCE load balancer type to its React modal', () => {
     expect(GCE_LOAD_BALANCER_CHOICES.map(({ type }) => type)).toEqual([
       'NETWORK',
@@ -23,14 +31,17 @@ describe('GceLoadBalancerChoiceModal', () => {
       'SSL',
       'HTTP',
       'INTERNAL_MANAGED',
+      'EXTERNAL_MANAGED',
+      'REGIONAL_EXTERNAL_NETWORK',
     ]);
     expect(getGceLoadBalancerModal('NETWORK')).toBe(GceNetworkLoadBalancerModal);
     (['INTERNAL', 'TCP', 'SSL'] as const).forEach((type) => {
-      expect(getGceLoadBalancerModal(type)).withContext(type).toBe(GceProxyLoadBalancerModal);
+      expect(getGceLoadBalancerModal(type), type).toBe(GceProxyLoadBalancerModal);
     });
-    (['HTTP', 'INTERNAL_MANAGED'] as const).forEach((type) => {
-      expect(getGceLoadBalancerModal(type)).withContext(type).toBe(GceHttpLoadBalancerModal);
+    (['HTTP', 'INTERNAL_MANAGED', 'EXTERNAL_MANAGED'] as const).forEach((type) => {
+      expect(getGceLoadBalancerModal(type), type).toBe(GceHttpLoadBalancerModal);
     });
+    expect(getGceLoadBalancerModal('REGIONAL_EXTERNAL_NETWORK')).toBe(GceRegionalExternalNetworkLoadBalancerModal);
   });
 
   it('advertises pipeline support only at the fully routed choice entry point', () => {
@@ -39,12 +50,12 @@ describe('GceLoadBalancerChoiceModal', () => {
 
   it('passes modal sizing as ReactModal dialog options instead of component props', () => {
     const result = Promise.resolve();
-    const show = spyOn(ReactModal, 'show').and.returnValue(result);
+    const show = vi.spyOn(ReactModal, 'show').mockReturnValue(result);
 
     const opened = GceLoadBalancerChoiceModal.show({ application } as any);
 
     expect(opened).toBe(result);
-    expect(show).toHaveBeenCalledOnceWith(
+    expect(show).toHaveBeenCalledExactlyOnceWith(
       GceLoadBalancerChoiceModal,
       { application },
       { dialogClassName: 'create-pipeline-modal-overflow-visible modal-lg' },
@@ -52,73 +63,69 @@ describe('GceLoadBalancerChoiceModal', () => {
   });
 
   it('renders native modal sections and controls', () => {
-    const wrapper = shallow(<GceLoadBalancerChoiceModal application={application} />);
+    const { container } = render(<GceLoadBalancerChoiceModal application={application} />);
 
-    expect(wrapper.find('.modal-header')).toHaveSize(1);
-    expect(wrapper.find('.modal-body')).toHaveSize(1);
-    expect(wrapper.find('.modal-footer')).toHaveSize(1);
-    expect(wrapper.find('button.btn.btn-primary').text()).toContain('Configure Load Balancer');
+    expect(container.querySelectorAll('.modal-header')).toHaveLength(1);
+    expect(container.querySelectorAll('.modal-body')).toHaveLength(1);
+    expect(container.querySelectorAll('.modal-footer')).toHaveLength(1);
+    expect(screen.getByRole('button', { name: /Configure Load Balancer/ })).toBeInTheDocument();
   });
 
   it('renders each type card as a native pressed-state button', () => {
-    const wrapper = shallow(<GceLoadBalancerChoiceModal application={application} />);
-    const choices = wrapper.find('button.card');
+    const { container } = render(<GceLoadBalancerChoiceModal application={application} />);
+    const choices = Array.from(container.querySelectorAll<HTMLButtonElement>('button.card'));
 
-    expect(choices).toHaveSize(GCE_LOAD_BALANCER_CHOICES.length);
+    expect(choices).toHaveLength(GCE_LOAD_BALANCER_CHOICES.length);
     choices.forEach((choice, index) => {
-      expect(choice.prop('type')).withContext(GCE_LOAD_BALANCER_CHOICES[index].type).toBe('button');
-      expect(choice.prop('aria-pressed'))
-        .withContext(GCE_LOAD_BALANCER_CHOICES[index].type)
-        .toBe(index === 0);
-      expect(choice.prop('disabled')).withContext(GCE_LOAD_BALANCER_CHOICES[index].type).toBe(false);
+      expect(choice.type, GCE_LOAD_BALANCER_CHOICES[index].type).toBe('button');
+      expect(choice, GCE_LOAD_BALANCER_CHOICES[index].type).toHaveAttribute('aria-pressed', String(index === 0));
+      expect(choice, GCE_LOAD_BALANCER_CHOICES[index].type).not.toBeDisabled();
     });
 
-    choices.at(2).simulate('click');
-    wrapper.update();
+    fireEvent.click(choices[2]);
 
-    expect(wrapper.find('button.card').at(0).prop('aria-pressed')).toBe(false);
-    expect(wrapper.find('button.card').at(2).prop('aria-pressed')).toBe(true);
-    expect(wrapper.find('button.card').at(2).hasClass('active')).toBe(true);
+    expect(choices[0]).toHaveAttribute('aria-pressed', 'false');
+    expect(choices[2]).toHaveAttribute('aria-pressed', 'true');
+    expect(choices[2]).toHaveClass('active');
   });
 
   it('opens every exposed type in create and pipeline modes', () => {
-    spyOn(GceNetworkLoadBalancerModal, 'show').and.returnValue(Promise.resolve() as any);
-    spyOn(GceProxyLoadBalancerModal, 'show').and.returnValue(Promise.resolve() as any);
-    spyOn(GceHttpLoadBalancerModal, 'show').and.returnValue(Promise.resolve() as any);
+    spyOnAllGceLoadBalancerModals();
 
     ([false, true] as const).forEach((forPipelineConfig) => {
       GCE_LOAD_BALANCER_CHOICES.forEach((choice) => {
-        const modal = new GceLoadBalancerChoiceModal({ application, forPipelineConfig } as any);
-        modal.state = { ...modal.state, selectedChoice: choice };
-
-        (modal as any).choose();
-
-        expect(getGceLoadBalancerModal(choice.type).show)
-          .withContext(`${choice.type} ${forPipelineConfig ? 'pipeline' : 'create'}`)
-          .toHaveBeenCalledWith(
-            jasmine.objectContaining({
-              forPipelineConfig,
-              isNew: !forPipelineConfig,
-              loadBalancer: null,
-              loadBalancerType: choice.type,
-              mode: forPipelineConfig ? 'pipeline' : 'create',
-            }),
-          );
+        render(<GceLoadBalancerChoiceModal application={application} forPipelineConfig={forPipelineConfig} />);
+        fireEvent.click(choiceButton(choice.label));
+        fireEvent.click(screen.getByRole('button', { name: /Configure Load Balancer/ }));
+
+        expect(
+          getGceLoadBalancerModal(choice.type).show,
+          `${choice.type} ${forPipelineConfig ? 'pipeline' : 'create'}`,
+        ).toHaveBeenCalledWith(
+          expect.objectContaining({
+            forPipelineConfig,
+            isNew: !forPipelineConfig,
+            loadBalancer: null,
+            loadBalancerType: choice.type,
+            mode: forPipelineConfig ? 'pipeline' : 'create',
+          }),
+        );
+        cleanup();
       });
     });
   });
 
   it('opens a selected type in create mode without persisted data', () => {
-    const closeModal = jasmine.createSpy('closeModal');
+    const closeModal = vi.fn();
     const result = Promise.resolve({ loadBalancerType: 'SSL' });
-    const show = spyOn(GceProxyLoadBalancerModal, 'show').and.returnValue(result as any);
-    const modal = new GceLoadBalancerChoiceModal({ application, closeModal } as any);
+    const show = vi.spyOn(GceProxyLoadBalancerModal, 'show').mockReturnValue(result as any);
+    render(<GceLoadBalancerChoiceModal application={application} closeModal={closeModal} />);
 
-    modal.state = { ...modal.state, selectedChoice: GCE_LOAD_BALANCER_CHOICES[3] };
-    (modal as any).choose();
+    fireEvent.click(choiceButton('SSL'));
+    fireEvent.click(screen.getByRole('button', { name: /Configure Load Balancer/ }));
 
-    expect(show).toHaveBeenCalledOnceWith(
-      jasmine.objectContaining({
+    expect(show).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
         app: application,
         application,
         forPipelineConfig: false,
@@ -128,64 +135,58 @@ describe('GceLoadBalancerChoiceModal', () => {
         mode: 'create',
       }),
     );
-    expect(closeModal).toHaveBeenCalledOnceWith(result);
+    expect(closeModal).toHaveBeenCalledExactlyOnceWith(result);
   });
 
   it('opens a selected type in pipeline mode and propagates its command promise', async () => {
-    const closeModal = jasmine.createSpy('closeModal');
+    const closeModal = vi.fn();
     const command = { loadBalancerType: 'INTERNAL_MANAGED', type: 'upsertLoadBalancer' };
     const result = Promise.resolve(command);
-    const show = spyOn(GceHttpLoadBalancerModal, 'show').and.returnValue(result);
-    const modal = new GceLoadBalancerChoiceModal({ application, closeModal, forPipelineConfig: true } as any);
+    const show = vi.spyOn(GceHttpLoadBalancerModal, 'show').mockReturnValue(result);
+    render(<GceLoadBalancerChoiceModal application={application} closeModal={closeModal} forPipelineConfig={true} />);
 
-    modal.state = { ...modal.state, selectedChoice: GCE_LOAD_BALANCER_CHOICES[5] };
-    (modal as any).choose();
+    fireEvent.click(choiceButton('Internal HTTP(S)'));
+    fireEvent.click(screen.getByRole('button', { name: /Configure Load Balancer/ }));
 
-    expect(show).toHaveBeenCalledOnceWith(
-      jasmine.objectContaining({
+    expect(show).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
         forPipelineConfig: true,
         loadBalancer: null,
         loadBalancerType: 'INTERNAL_MANAGED',
         mode: 'pipeline',
       }),
     );
-    expect(closeModal).toHaveBeenCalledOnceWith(result);
-    await expectAsync(closeModal.calls.mostRecent().args[0]).toBeResolvedTo(command);
+    expect(closeModal).toHaveBeenCalledExactlyOnceWith(result);
+    await expectAsync(closeModal.mock.lastCall[0]).toBeResolvedTo(command);
   });
 
   it('routes every exposed type directly to edit mode with the current load balancer', () => {
-    spyOn(GceNetworkLoadBalancerModal, 'show').and.callFake((props: any) => Promise.resolve(props.loadBalancer) as any);
-    spyOn(GceProxyLoadBalancerModal, 'show').and.callFake((props: any) => Promise.resolve(props.loadBalancer) as any);
-    spyOn(GceHttpLoadBalancerModal, 'show').and.callFake((props: any) => Promise.resolve(props.loadBalancer) as any);
-    const reactModalShow = spyOn(ReactModal, 'show');
+    spyOnAllGceLoadBalancerModals((props: any) => Promise.resolve(props.loadBalancer) as any);
+    const reactModalShow = vi.spyOn(ReactModal, 'show').mockReturnValue(undefined);
 
     GCE_LOAD_BALANCER_CHOICES.forEach((choice) => {
       const current = { account: 'account-a', loadBalancerType: choice.type, name: `fnord-${choice.type}` };
       GceLoadBalancerChoiceModal.show({ application, isNew: false, loadBalancer: current } as any);
 
-      expect(getGceLoadBalancerModal(choice.type).show)
-        .withContext(choice.type)
-        .toHaveBeenCalledWith(
-          jasmine.objectContaining({
-            app: application,
-            application,
-            forPipelineConfig: false,
-            isNew: false,
-            loadBalancer: current,
-            loadBalancerType: choice.type,
-            mode: 'edit',
-          }),
-        );
+      expect(getGceLoadBalancerModal(choice.type).show, choice.type).toHaveBeenCalledWith(
+        expect.objectContaining({
+          app: application,
+          application,
+          forPipelineConfig: false,
+          isNew: false,
+          loadBalancer: current,
+          loadBalancerType: choice.type,
+          mode: 'edit',
+        }),
+      );
     });
 
     expect(reactModalShow).not.toHaveBeenCalled();
   });
 
   it('routes every existing type to pipeline mode when editing pipeline configuration', () => {
-    spyOn(GceNetworkLoadBalancerModal, 'show').and.callFake((props: any) => Promise.resolve(props.loadBalancer) as any);
-    spyOn(GceProxyLoadBalancerModal, 'show').and.callFake((props: any) => Promise.resolve(props.loadBalancer) as any);
-    spyOn(GceHttpLoadBalancerModal, 'show').and.callFake((props: any) => Promise.resolve(props.loadBalancer) as any);
-    const reactModalShow = spyOn(ReactModal, 'show');
+    spyOnAllGceLoadBalancerModals((props: any) => Promise.resolve(props.loadBalancer) as any);
+    const reactModalShow = vi.spyOn(ReactModal, 'show').mockReturnValue(undefined);
 
     GCE_LOAD_BALANCER_CHOICES.forEach((choice) => {
       const current = { account: 'account-a', loadBalancerType: choice.type, name: `fnord-${choice.type}` };
@@ -196,19 +197,17 @@ describe('GceLoadBalancerChoiceModal', () => {
         loadBalancer: current,
       } as any);
 
-      expect(getGceLoadBalancerModal(choice.type).show)
-        .withContext(choice.type)
-        .toHaveBeenCalledWith(
-          jasmine.objectContaining({
-            app: application,
-            application,
-            forPipelineConfig: true,
-            isNew: false,
-            loadBalancer: current,
-            loadBalancerType: choice.type,
-            mode: 'pipeline',
-          }),
-        );
+      expect(getGceLoadBalancerModal(choice.type).show, choice.type).toHaveBeenCalledWith(
+        expect.objectContaining({
+          app: application,
+          application,
+          forPipelineConfig: true,
+          isNew: false,
+          loadBalancer: current,
+          loadBalancerType: choice.type,
+          mode: 'pipeline',
+        }),
+      );
     });
 
     expect(reactModalShow).not.toHaveBeenCalled();
@@ -216,17 +215,20 @@ describe('GceLoadBalancerChoiceModal', () => {
 
   ([undefined, '', 'http', 'UNKNOWN'] as const).forEach((persistedType) => {
     it(`blocks edit routing for unsupported persisted type ${String(persistedType)}`, () => {
-      const networkShow = spyOn(GceNetworkLoadBalancerModal, 'show');
-      const proxyShow = spyOn(GceProxyLoadBalancerModal, 'show');
-      const httpShow = spyOn(GceHttpLoadBalancerModal, 'show');
+      const networkShow = vi.spyOn(GceNetworkLoadBalancerModal, 'show').mockReturnValue(undefined);
+      const proxyShow = vi.spyOn(GceProxyLoadBalancerModal, 'show').mockReturnValue(undefined);
+      const httpShow = vi.spyOn(GceHttpLoadBalancerModal, 'show').mockReturnValue(undefined);
+      const regionalExternalNetworkShow = vi
+        .spyOn(GceRegionalExternalNetworkLoadBalancerModal, 'show')
+        .mockReturnValue(undefined);
       const blockedResult = Promise.resolve();
-      const reactModalShow = spyOn(ReactModal, 'show').and.returnValue(blockedResult);
+      const reactModalShow = vi.spyOn(ReactModal, 'show').mockReturnValue(blockedResult);
       const loadBalancer = { name: 'fnord', loadBalancerType: persistedType };
 
       const result = GceLoadBalancerChoiceModal.show({ application, isNew: false, loadBalancer } as any);
 
       expect(result).toBe(blockedResult);
-      expect(reactModalShow).toHaveBeenCalledOnceWith(
+      expect(reactModalShow).toHaveBeenCalledExactlyOnceWith(
         GceLoadBalancerChoiceModal,
         { application, isNew: false, loadBalancer },
         { dialogClassName: 'create-pipeline-modal-overflow-visible modal-lg' },
@@ -234,12 +236,13 @@ describe('GceLoadBalancerChoiceModal', () => {
       expect(networkShow).not.toHaveBeenCalled();
       expect(proxyShow).not.toHaveBeenCalled();
       expect(httpShow).not.toHaveBeenCalled();
+      expect(regionalExternalNetworkShow).not.toHaveBeenCalled();
     });
   });
 
   ([undefined, 'http', 'UNKNOWN'] as const).forEach((persistedType) => {
     it(`renders a non-submittable blocked pipeline-edit state for ${String(persistedType)}`, () => {
-      const wrapper = shallow(
+      const { container } = render(
         <GceLoadBalancerChoiceModal
           application={application}
           forPipelineConfig={true}
@@ -248,32 +251,70 @@ describe('GceLoadBalancerChoiceModal', () => {
         />,
       );
 
-      expect(wrapper.find('[role="alert"]').text()).toContain('cannot be edited');
-      expect(wrapper.find('[role="alert"]').text()).toContain(persistedType || 'missing');
-      expect(wrapper.find('button.card')).toHaveSize(GCE_LOAD_BALANCER_CHOICES.length);
-      wrapper.find('button.card').forEach((choice) => {
-        expect(choice.prop('disabled')).toBe(true);
-        expect(choice.prop('aria-pressed')).toBe(false);
+      expect(screen.getByRole('alert')).toHaveTextContent('cannot be edited');
+      expect(screen.getByRole('alert')).toHaveTextContent(persistedType || 'missing');
+      const choices = Array.from(container.querySelectorAll<HTMLButtonElement>('button.card'));
+      expect(choices).toHaveLength(GCE_LOAD_BALANCER_CHOICES.length);
+      choices.forEach((choice) => {
+        expect(choice).toBeDisabled();
+        expect(choice).toHaveAttribute('aria-pressed', 'false');
       });
-      expect(wrapper.find('button.btn.btn-primary').prop('disabled')).toBe(true);
+      expect(screen.getByRole('button', { name: /Configure Load Balancer/ })).toBeDisabled();
     });
   });
 
   it('does not open a type modal when blocked submission is invoked programmatically', () => {
-    const networkShow = spyOn(GceNetworkLoadBalancerModal, 'show');
-    const proxyShow = spyOn(GceProxyLoadBalancerModal, 'show');
-    const httpShow = spyOn(GceHttpLoadBalancerModal, 'show');
-    const modal = new GceLoadBalancerChoiceModal({
-      application,
-      forPipelineConfig: true,
-      isNew: false,
-      loadBalancer: { name: 'fnord', loadBalancerType: 'http' },
-    } as any);
-
-    (modal as any).choose();
+    const networkShow = vi.spyOn(GceNetworkLoadBalancerModal, 'show').mockReturnValue(undefined);
+    const proxyShow = vi.spyOn(GceProxyLoadBalancerModal, 'show').mockReturnValue(undefined);
+    const httpShow = vi.spyOn(GceHttpLoadBalancerModal, 'show').mockReturnValue(undefined);
+    const regionalExternalNetworkShow = vi
+      .spyOn(GceRegionalExternalNetworkLoadBalancerModal, 'show')
+      .mockReturnValue(undefined);
+    render(
+      <GceLoadBalancerChoiceModal
+        application={application}
+        forPipelineConfig={true}
+        isNew={false}
+        loadBalancer={{ name: 'fnord', loadBalancerType: 'http' }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /Configure Load Balancer/ }));
 
     expect(networkShow).not.toHaveBeenCalled();
     expect(proxyShow).not.toHaveBeenCalled();
     expect(httpShow).not.toHaveBeenCalled();
+    expect(regionalExternalNetworkShow).not.toHaveBeenCalled();
+  });
+
+  it('exposes EXTERNAL_MANAGED and REGIONAL_EXTERNAL_NETWORK choices', () => {
+    expect(GCE_LOAD_BALANCER_CHOICES.map(({ type }) => type)).toEqual([
+      'NETWORK',
+      'INTERNAL',
+      'TCP',
+      'SSL',
+      'HTTP',
+      'INTERNAL_MANAGED',
+      'EXTERNAL_MANAGED',
+      'REGIONAL_EXTERNAL_NETWORK',
+    ]);
+  });
+
+  it('routes EXTERNAL_MANAGED to the HTTP modal', () => {
+    expect(getGceLoadBalancerModal('EXTERNAL_MANAGED' as any)).toBe(GceHttpLoadBalancerModal);
+  });
+
+  it('routes REGIONAL_EXTERNAL_NETWORK to its dedicated modal', () => {
+    expect(getGceLoadBalancerModal('REGIONAL_EXTERNAL_NETWORK' as any)).toBe(
+      GceRegionalExternalNetworkLoadBalancerModal,
+    );
   });
 });
+
+function choiceButton(label: string): HTMLButtonElement {
+  const button = screen.getByText(label, { selector: '.load-balancer-label' }).closest('button');
+  if (!(button instanceof HTMLButtonElement)) {
+    throw new Error(`No choice button found for ${label}`);
+  }
+  return button;
+}

package/src/loadBalancer/configure/choice/GceLoadBalancerChoiceModal.tsx

@@ -7,6 +7,7 @@ import type { GceLoadBalancerEditorMode, GceLoadBalancerType } from '../common';
 import { GceProxyLoadBalancerModal } from '../common/GceProxyLoadBalancerModal';
 import { GceHttpLoadBalancerModal } from '../http/GceHttpLoadBalancerModal';
 import { GceNetworkLoadBalancerModal } from '../network/GceNetworkLoadBalancerModal';
+import { GceRegionalExternalNetworkLoadBalancerModal } from '../network/GceRegionalExternalNetworkLoadBalancerModal';
 
 import './GceLoadBalancerChoiceModal.less';
 
@@ -31,6 +32,16 @@ export const GCE_LOAD_BALANCER_CHOICES: IGceLoadBalancerChoice[] = [
     label: 'Internal HTTP(S)',
     description: 'Regional internal managed HTTP(S) load balancer.',
   },
+  {
+    type: 'EXTERNAL_MANAGED',
+    label: 'External managed HTTP(S)',
+    description: 'Regional external managed HTTP(S) load balancer.',
+  },
+  {
+    type: 'REGIONAL_EXTERNAL_NETWORK',
+    label: 'Regional external network',
+    description: 'Regional external pass-through network load balancer.',
+  },
 ];
 
 export interface IGceLoadBalancerChoiceModalProps extends IModalComponentProps {
@@ -47,7 +58,8 @@ interface IGceLoadBalancerChoiceModalState {
 
 export function getGceLoadBalancerModal(type: GceLoadBalancerType): IGceLoadBalancerModal {
   if (type === 'NETWORK') return GceNetworkLoadBalancerModal;
-  if (type === 'HTTP' || type === 'INTERNAL_MANAGED') return GceHttpLoadBalancerModal;
+  if (type === 'HTTP' || type === 'INTERNAL_MANAGED' || type === 'EXTERNAL_MANAGED') return GceHttpLoadBalancerModal;
+  if (type === 'REGIONAL_EXTERNAL_NETWORK') return GceRegionalExternalNetworkLoadBalancerModal;
   return GceProxyLoadBalancerModal;
 }
 

package/src/loadBalancer/configure/common/GceProxyLoadBalancerEditor.spec.tsx

@@ -1,7 +1,6 @@
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
-import { normalizeGceLoadBalancerCommand } from './gceLoadBalancerModels';
 import {
   applyGceProxyTypeConstraints,
   GCE_PROXY_TYPE_CONFIG,
@@ -9,6 +8,7 @@ import {
   getGceProxyResourceOptions,
   validateGceProxyLoadBalancerCommand,
 } from './GceProxyLoadBalancerEditor';
+import { normalizeGceLoadBalancerCommand } from './gceLoadBalancerModels';
 
 describe('GceProxyLoadBalancerEditor', () => {
   it('defines frontend and backend protocols that match each Clouddriver proxy contract', () => {
@@ -50,7 +50,7 @@ describe('GceProxyLoadBalancerEditor', () => {
     expect(constrained.listeners[0].protocol).toBe('SSL');
     expect(constrained.listeners[0].certificate).toEqual({ name: 'cert-a' });
     expect(constrained.backendServices[0]).toEqual(
-      jasmine.objectContaining({
+      expect.objectContaining({
         affinityCookieTtlSec: 300,
         connectionDrainingTimeoutSec: 45,
         portName: 'https',
@@ -107,7 +107,10 @@ describe('GceProxyLoadBalancerEditor', () => {
         { name: 'address-b', account: 'account-b', region: 'global' },
       ],
       backendServices: [{ name: 'backend-a', account: 'account-a', region: 'global' }],
-      certificates: [{ name: 'cert-a', account: 'account-a' }],
+      certificates: [
+        { name: 'cert-a', account: 'account-a' },
+        { name: 'regional-cert', account: 'account-a', region: 'us-central1' },
+      ],
       healthChecks: [{ name: 'check-a', account: 'account-a' }],
       networks: [],
       regions: [{ name: 'global' }],
@@ -203,15 +206,15 @@ describe('GceProxyLoadBalancerEditor', () => {
         'create',
       ),
     );
-    const wrapper = shallow(
-      <GceProxyLoadBalancerEditor command={command} data={emptyData()} onChange={jasmine.createSpy('onChange')} />,
+    const { container } = render(
+      <GceProxyLoadBalancerEditor command={command} data={emptyData()} onChange={vi.fn()} />,
     );
 
-    expect(wrapper.find('[data-field="certificate"]').exists()).toBe(true);
-    expect(wrapper.find('[data-field="portName"]').exists()).toBe(true);
-    expect(wrapper.find('[data-field="connectionDrainingTimeoutSec"]').exists()).toBe(true);
-    expect(wrapper.find('[data-field="network"]').exists()).toBe(false);
-    expect(wrapper.find('[data-field="subnet"]').exists()).toBe(false);
+    expect(field(container, 'certificate')).toBeInTheDocument();
+    expect(field(container, 'portName')).toBeInTheDocument();
+    expect(field(container, 'connectionDrainingTimeoutSec')).toBeInTheDocument();
+    expect(field(container, 'network')).not.toBeInTheDocument();
+    expect(field(container, 'subnet')).not.toBeInTheDocument();
   });
 
   it('renders regional network and subnet fields for INTERNAL without unsupported draining controls', () => {
@@ -221,14 +224,14 @@ describe('GceProxyLoadBalancerEditor', () => {
         'create',
       ),
     );
-    const wrapper = shallow(
-      <GceProxyLoadBalancerEditor command={command} data={emptyData()} onChange={jasmine.createSpy('onChange')} />,
+    const { container } = render(
+      <GceProxyLoadBalancerEditor command={command} data={emptyData()} onChange={vi.fn()} />,
     );
 
-    expect(wrapper.find('[data-field="network"]').exists()).toBe(true);
-    expect(wrapper.find('[data-field="subnet"]').exists()).toBe(true);
-    expect(wrapper.find('[data-field="connectionDrainingTimeoutSec"]').exists()).toBe(false);
-    expect(wrapper.find('[data-field="certificate"]').exists()).toBe(false);
+    expect(field(container, 'network')).toBeInTheDocument();
+    expect(field(container, 'subnet')).toBeInTheDocument();
+    expect(field(container, 'connectionDrainingTimeoutSec')).not.toBeInTheDocument();
+    expect(field(container, 'certificate')).not.toBeInTheDocument();
   });
 
   it('keeps generated listener and backend service names aligned when the load balancer name changes', () => {
@@ -238,12 +241,14 @@ describe('GceProxyLoadBalancerEditor', () => {
         'create',
       ),
     );
-    const onChange = jasmine.createSpy('onChange');
-    const wrapper = shallow(<GceProxyLoadBalancerEditor command={command} data={emptyData()} onChange={onChange} />);
+    const onChange = vi.fn();
+    const { container } = render(
+      <GceProxyLoadBalancerEditor command={command} data={emptyData()} onChange={onChange} />,
+    );
 
-    wrapper.find('[data-field="name"] input').simulate('change', { target: { value: 'app-main' } });
+    fireEvent.change(fieldControl(container, 'name'), { target: { value: 'app-main' } });
 
-    const updated = onChange.calls.mostRecent().args[0];
+    const updated = onChange.mock.lastCall[0];
     expect(updated.name).toBe('app-main');
     expect(updated.listeners[0].name).toBe('app-main');
     expect(updated.backendServices[0].name).toBe('app-main');
@@ -256,7 +261,7 @@ describe('GceProxyLoadBalancerEditor', () => {
         'create',
       ),
     );
-    const onChange = jasmine.createSpy('onChange');
+    const onChange = vi.fn();
     const data = {
       ...emptyData(),
       addresses: [
@@ -269,11 +274,11 @@ describe('GceProxyLoadBalancerEditor', () => {
         },
       ],
     };
-    const wrapper = shallow(<GceProxyLoadBalancerEditor command={command} data={data} onChange={onChange} />);
+    const { container } = render(<GceProxyLoadBalancerEditor command={command} data={data} onChange={onChange} />);
 
-    wrapper.find('[data-field="address"] select').simulate('change', { target: { value: 'reserved-address' } });
+    fireEvent.change(fieldControl(container, 'address'), { target: { value: 'reserved-address' } });
 
-    expect(onChange.calls.mostRecent().args[0].listeners[0].address).toEqual(data.addresses[0]);
+    expect(onChange.mock.lastCall[0].listeners[0].address).toEqual(data.addresses[0]);
   });
 
   it('replaces stale inline state with the complete normalized reader health check', () => {
@@ -290,7 +295,7 @@ describe('GceProxyLoadBalancerEditor', () => {
         'edit',
       ),
     );
-    const onChange = jasmine.createSpy('onChange');
+    const onChange = vi.fn();
     const data = {
       ...emptyData(),
       healthChecks: [
@@ -312,17 +317,17 @@ describe('GceProxyLoadBalancerEditor', () => {
         },
       ],
     };
-    const wrapper = shallow(<GceProxyLoadBalancerEditor command={command} data={data} onChange={onChange} />);
+    const { container } = render(<GceProxyLoadBalancerEditor command={command} data={data} onChange={onChange} />);
 
-    wrapper.find('[data-field="healthCheck"] select').simulate('change', { target: { value: 'new-check' } });
+    fireEvent.change(fieldControl(container, 'healthCheck'), { target: { value: 'new-check' } });
 
-    const updated = onChange.calls.mostRecent().args[0];
+    const updated = onChange.mock.lastCall[0];
     expect(updated.backendServices[0].healthCheck).toEqual({
       name: 'new-check',
       selfLink: 'projects/test/global/healthChecks/new-check',
     });
     expect(updated.healthChecks).toEqual([
-      jasmine.objectContaining({
+      expect.objectContaining({
         checkIntervalSec: 15,
         healthCheckType: 'HTTP',
         healthyThreshold: 2,
@@ -351,3 +356,15 @@ function emptyData(): any {
     subnets: [],
   };
 }
+
+function field(container: HTMLElement, name: string): HTMLElement | null {
+  return container.querySelector(`[data-field="${name}"]`);
+}
+
+function fieldControl(container: HTMLElement, name: string): HTMLInputElement | HTMLSelectElement {
+  const control = field(container, name)?.querySelector('input, select');
+  if (!(control instanceof HTMLInputElement || control instanceof HTMLSelectElement)) {
+    throw new Error(`No control found for ${name}`);
+  }
+  return control;
+}

package/src/loadBalancer/configure/common/GceProxyLoadBalancerEditor.tsx

@@ -133,7 +133,8 @@ export function getGceProxyResourceOptions(
       references(backend),
     ),
     certificates: mergeGceResourceOptions(
-      accountScoped(data.certificates as IGceProxyDataItem[]),
+      // Global SSL proxies cannot use the regional certificates cached for regional HTTPS proxies.
+      accountScoped(data.certificates as IGceProxyDataItem[]).filter((item) => !item.region),
       references(listener?.certificate),
     ),
     healthChecks: mergeGceResourceOptions(