@spinnaker/google 2026.3.2 → 2026.4.0

package/src/loadBalancer/configure/network/GceRegionalExternalNetworkLoadBalancerModal.spec.tsx

@@ -0,0 +1,330 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { validateGceRegionalExternalNetworkLoadBalancerCommand } from './GceRegionalExternalNetworkLoadBalancerEditor';
+import {
+  GceRegionalExternalNetworkLoadBalancerModal,
+  normalizeGceRegionalExternalNetworkLoadBalancerCommand,
+  serializeGceRegionalExternalNetworkLoadBalancerCommand,
+  submitGceRegionalExternalNetworkLoadBalancerCommand,
+} from './GceRegionalExternalNetworkLoadBalancerModal';
+
+describe('GceRegionalExternalNetworkLoadBalancerModal', () => {
+  const application = { name: 'app' } as any;
+
+  it('materializes the same valid defaults for create and pipeline modes', () => {
+    const defaults = { credentials: 'account-a', region: 'europe-west1' };
+    const create = normalizeGceRegionalExternalNetworkLoadBalancerCommand({}, 'create', 'app-main', defaults);
+    const pipeline = normalizeGceRegionalExternalNetworkLoadBalancerCommand({}, 'pipeline', 'app-main', defaults);
+
+    expect({ ...create, mode: undefined }).toEqual({ ...pipeline, mode: undefined });
+    expect(create).toEqual(
+      expect.objectContaining({
+        credentials: 'account-a',
+        name: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['80'],
+        region: 'europe-west1',
+      }),
+    );
+    expect(create.listeners).toEqual([{ name: 'app-main', portRange: '80', protocol: 'TCP' }]);
+    expect(validateGceRegionalExternalNetworkLoadBalancerCommand(create)).toEqual([]);
+  });
+
+  it('normalizes persisted REGIONAL_EXTERNAL_NETWORK details for edit', () => {
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: {
+            healthCheckType: 'TCP',
+            name: 'tcp-check',
+            port: 80,
+            selfLink: 'projects/test/regions/europe-west1/healthChecks/tcp-check',
+          },
+          name: 'app-main',
+          sessionAffinity: 'CLIENT_IP',
+        },
+        ipAddress: '35.1.2.3',
+        ipProtocol: 'tcp',
+        loadBalancerName: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['80', '443'],
+        region: 'europe-west1',
+      },
+      'edit',
+    );
+
+    expect(command).toEqual(
+      expect.objectContaining({
+        credentials: 'account-a',
+        loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+        mode: 'edit',
+        name: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['80', '443'],
+        region: 'europe-west1',
+      }),
+    );
+    expect(command.listeners).toEqual([
+      {
+        address: { name: '35.1.2.3' },
+        name: 'app-main',
+        portRange: '80,443',
+        protocol: 'TCP',
+      },
+    ]);
+    expect(command.backendServices[0]).toEqual(
+      expect.objectContaining({
+        healthCheck: expect.objectContaining({ name: 'tcp-check', port: 80 }),
+        name: 'app-main',
+        sessionAffinity: 'CLIENT_IP',
+      }),
+    );
+  });
+
+  it('serializes the exact Clouddriver REGIONAL_EXTERNAL_NETWORK contract', () => {
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: { healthCheckType: 'TCP', name: 'tcp-check', port: 80 },
+          name: 'app-main',
+          sessionAffinity: 'CLIENT_IP',
+        },
+        ipAddress: '35.1.2.3',
+        ipProtocol: 'TCP',
+        loadBalancerName: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['80', '443'],
+        region: 'europe-west1',
+      },
+      'pipeline',
+    );
+
+    const payload = serializeGceRegionalExternalNetworkLoadBalancerCommand(command);
+
+    expect(payload).toEqual({
+      backendService: {
+        healthCheck: { healthCheckType: 'TCP', name: 'tcp-check', port: 80 },
+        name: 'app-main',
+        sessionAffinity: 'CLIENT_IP',
+      },
+      cloudProvider: 'gce',
+      credentials: 'account-a',
+      ipAddress: '35.1.2.3',
+      ipProtocol: 'TCP',
+      loadBalancerName: 'app-main',
+      loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+      name: 'app-main',
+      networkTier: 'PREMIUM',
+      ports: ['80', '443'],
+      provider: 'gce',
+      region: 'europe-west1',
+      type: 'upsertLoadBalancer',
+    });
+    expect((payload as any).portRange).toBeUndefined();
+    expect((payload as any).backendServices).toBeUndefined();
+    expect((payload as any).healthChecks).toBeUndefined();
+    expect((payload as any).listeners).toBeUndefined();
+  });
+
+  it('returns a named health check in pipeline mode when the persisted name is omitted', () => {
+    const executeTask = vi.fn();
+    const persisted = {
+      account: 'account-a',
+      backendService: {
+        healthCheck: { healthCheckType: 'TCP', port: 80 },
+        name: 'app-main',
+        sessionAffinity: 'NONE',
+      },
+      ipProtocol: 'TCP',
+      loadBalancerName: 'app-main',
+      ports: ['80'],
+      region: 'europe-west1',
+    };
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(persisted, 'pipeline');
+
+    const result = submitGceRegionalExternalNetworkLoadBalancerCommand(command, { application, executeTask });
+
+    expect(result).toEqual(serializeGceRegionalExternalNetworkLoadBalancerCommand(command));
+    expect((result as any).backendService.healthCheck.name).toBe('app-main');
+    expect(command.backendServices[0].healthCheck).toBe(command.healthChecks[0]);
+    expect(persisted.backendService.healthCheck).toEqual({ healthCheckType: 'TCP', port: 80 });
+    expect(executeTask).not.toHaveBeenCalled();
+  });
+
+  it('serializes the referenced pipeline health check through the backend service', () => {
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: 'tcp-check',
+          name: 'app-main',
+          sessionAffinity: 'NONE',
+        },
+        healthChecks: [{ healthCheckType: 'TCP', name: 'tcp-check', port: 80 }],
+        ipProtocol: 'TCP',
+        loadBalancerName: 'app-main',
+        ports: ['80'],
+        region: 'europe-west1',
+      },
+      'pipeline',
+    );
+
+    const payload = serializeGceRegionalExternalNetworkLoadBalancerCommand(command);
+
+    expect(command.backendServices[0].healthCheck).toBe(command.healthChecks[0]);
+    expect(payload.backendService.healthCheck).toEqual({
+      healthCheckType: 'TCP',
+      name: 'tcp-check',
+      port: 80,
+    });
+  });
+
+  it('serializes a named health check for direct edit when the persisted name is omitted', () => {
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: { healthCheckType: 'TCP', port: 80 },
+          name: 'app-main',
+          sessionAffinity: 'NONE',
+        },
+        ipProtocol: 'TCP',
+        loadBalancerName: 'app-main',
+        ports: ['80'],
+        region: 'europe-west1',
+      },
+      'edit',
+    );
+
+    const payload = serializeGceRegionalExternalNetworkLoadBalancerCommand(command);
+
+    expect(payload.backendService.healthCheck.name).toBe('app-main');
+  });
+
+  it('preserves ipAddress and networkTier during edit serialization', () => {
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: { healthCheckType: 'UDP', name: 'udp-check', port: 53 },
+          name: 'app-main',
+          sessionAffinity: 'CLIENT_IP_PROTO',
+        },
+        ipAddress: '35.1.2.3',
+        ipProtocol: 'UDP',
+        loadBalancerName: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['53'],
+        region: 'europe-west1',
+      },
+      'edit',
+    );
+
+    const payload = serializeGceRegionalExternalNetworkLoadBalancerCommand(command);
+
+    expect(payload.ipAddress).toBe('35.1.2.3');
+    expect(payload.networkTier).toBe('PREMIUM');
+    expect(payload.ipProtocol).toBe('UDP');
+  });
+
+  it('rejects a destructive TCP to UDP protocol edit', () => {
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: { healthCheckType: 'TCP', name: 'tcp-check', port: 80 },
+          name: 'app-main',
+          sessionAffinity: 'NONE',
+        },
+        ipAddress: '35.1.2.3',
+        ipProtocol: 'TCP',
+        loadBalancerName: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['80'],
+        region: 'europe-west1',
+      },
+      'edit',
+    );
+    command.listeners[0] = {
+      ...command.listeners[0],
+      portRange: '53',
+      protocol: 'UDP',
+    };
+    command.ports = ['53'];
+
+    expect(validateGceRegionalExternalNetworkLoadBalancerCommand(command)).toContain(
+      'Protocol and ports cannot be changed while editing a REGIONAL_EXTERNAL_NETWORK load balancer.',
+    );
+  });
+
+  it('executes the direct normalized job in infrastructure create mode', () => {
+    const task = Promise.resolve({ id: 'task' });
+    const executeTask = vi.fn().mockReturnValue(task);
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendService: {
+          healthCheck: { healthCheckType: 'TCP', port: 80 },
+          name: 'app-main',
+          sessionAffinity: 'NONE',
+        },
+        ipAddress: '35.1.2.3',
+        ipProtocol: 'TCP',
+        loadBalancerName: 'app-main',
+        networkTier: 'PREMIUM',
+        ports: ['80'],
+        region: 'europe-west1',
+      },
+      'create',
+    );
+
+    const result = submitGceRegionalExternalNetworkLoadBalancerCommand(command, { application, executeTask });
+
+    expect(command.backendServices[0].healthCheck).toBe(command.healthChecks[0]);
+    expect((command.backendServices[0].healthCheck as any).name).toBe('app-main');
+    expect(result).toBe(task);
+    expect(executeTask).toHaveBeenCalledExactlyOnceWith({
+      application,
+      description: 'Create Load Balancer: app-main',
+      job: [serializeGceRegionalExternalNetworkLoadBalancerCommand(command)],
+    });
+  });
+
+  it('exposes pipeline support and passes edit mode to the editor', () => {
+    expect(GceRegionalExternalNetworkLoadBalancerModal.supportsPipelineConfig).toBe(true);
+    render(
+      <GceRegionalExternalNetworkLoadBalancerModal
+        app={application}
+        closeModal={vi.fn()}
+        data={emptyData()}
+        dismissModal={vi.fn()}
+        isNew={false}
+        loadBalancer={{ account: 'account-a', name: 'app-main', region: 'europe-west1' } as any}
+      />,
+    );
+
+    expect(screen.getByRole('heading', { name: 'Edit app-main' })).toBeInTheDocument();
+    ['Account', 'Region', 'IP address', 'Network tier', 'Protocol', 'Ports'].forEach((label) =>
+      expect(screen.getByLabelText(label), label).toBeDisabled(),
+    );
+    expect(screen.getAllByLabelText('Name')[0]).toBeDisabled();
+    expect(screen.getByLabelText('Session affinity')).toBeEnabled();
+    expect(screen.getByRole('button', { name: /Update/ })).toBeInTheDocument();
+  });
+});
+
+function emptyData(): any {
+  return {
+    accounts: [],
+    addresses: [],
+    backendServices: [],
+    certificates: [],
+    healthChecks: [],
+    networks: [],
+    regions: [],
+    subnets: [],
+  };
+}

package/src/loadBalancer/configure/network/GceRegionalExternalNetworkLoadBalancerModal.tsx

@@ -0,0 +1,348 @@
+import React from 'react';
+
+import type { Application, IModalComponentProps, ITask, ITaskCommand } from '@spinnaker/core';
+import {
+  InfrastructureCaches,
+  ModalClose,
+  ReactModal,
+  SubmitButton,
+  TaskExecutor,
+  TaskMonitor,
+  TaskMonitorWrapper,
+} from '@spinnaker/core';
+
+import type { IGceRegionalExternalNetworkLoadBalancerCommand } from './GceRegionalExternalNetworkLoadBalancerEditor';
+import {
+  createGceRegionalExternalNetworkHealthCheck,
+  GceRegionalExternalNetworkLoadBalancerEditor,
+  validateGceRegionalExternalNetworkLoadBalancerCommand,
+} from './GceRegionalExternalNetworkLoadBalancerEditor';
+import type {
+  GceLoadBalancerEditorMode,
+  IGceLoadBalancerData,
+  IGceLoadBalancerDataReaders,
+  IGceLoadBalancerDataState,
+  IGceLoadBalancerHealthCheck,
+  IGceResourceReference,
+  IGceSerializedLoadBalancerCommand,
+} from '../common';
+import {
+  GceLoadBalancerDataController,
+  normalizeGceLoadBalancerCommand,
+  serializeGceLoadBalancerCommand,
+} from '../common';
+import { GCEProviderSettings } from '../../../gce.settings';
+
+type UnknownRecord = Record<string, any>;
+
+const EMPTY_DATA: IGceLoadBalancerData = {
+  accounts: [],
+  addresses: [],
+  backendServices: [],
+  certificates: [],
+  healthChecks: [],
+  networks: [],
+  regions: [],
+  subnets: [],
+};
+
+export interface IGceRegionalExternalNetworkLoadBalancerPayload extends IGceSerializedLoadBalancerCommand {
+  backendService: UnknownRecord;
+  ipAddress?: string;
+  ipProtocol: string;
+  networkTier?: string;
+  ports: string[];
+}
+
+export interface IGceRegionalExternalNetworkLoadBalancerModalProps extends IModalComponentProps {
+  app?: Application;
+  application?: Application;
+  credentials?: string;
+  data?: IGceLoadBalancerData;
+  dataReaders?: IGceLoadBalancerDataReaders;
+  executeTask?: (taskCommand: ITaskCommand) => PromiseLike<ITask>;
+  forPipelineConfig?: boolean;
+  isNew?: boolean;
+  loadBalancer?: UnknownRecord;
+  mode?: GceLoadBalancerEditorMode;
+}
+
+interface IGceRegionalExternalNetworkLoadBalancerModalState extends IGceLoadBalancerDataState {
+  command: IGceRegionalExternalNetworkLoadBalancerCommand;
+  taskMonitor: TaskMonitor;
+}
+
+interface IGceRegionalExternalNetworkSubmissionDependencies {
+  application: Application;
+  executeTask?: (taskCommand: ITaskCommand) => PromiseLike<ITask>;
+}
+
+export function normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+  persisted: UnknownRecord | null | undefined = {},
+  mode: GceLoadBalancerEditorMode,
+  applicationName = '',
+  defaults: Partial<Record<'credentials' | 'region', unknown>> = {},
+): IGceRegionalExternalNetworkLoadBalancerCommand {
+  const source = persisted || {};
+  const backendService = source.backendService || source.backendServices?.[0];
+  const materializeDefaults = mode !== 'edit';
+  const normalizedSource: UnknownRecord = {
+    ...defaults,
+    ...source,
+    backendServices: backendService ? [{ ...backendService }] : source.backendServices,
+    credentials: source.credentials || source.account || defaults.credentials,
+    ipProtocol: source.ipProtocol || (materializeDefaults ? 'TCP' : undefined),
+    loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+    name: source.name || source.loadBalancerName || applicationName,
+    networkTier: source.networkTier || (materializeDefaults ? 'PREMIUM' : undefined),
+    ports: source.ports ?? source.portRange ?? (materializeDefaults ? ['80'] : undefined),
+  };
+
+  const command = normalizeGceLoadBalancerCommand(
+    normalizedSource,
+    mode,
+  ) as IGceRegionalExternalNetworkLoadBalancerCommand;
+  const listener = command.listeners[0];
+  const ports = splitPorts(listener?.portRange);
+  let backendServices = command.backendServices;
+  let healthChecks = command.healthChecks;
+
+  if (materializeDefaults) {
+    if (backendService && !backendServices.length) {
+      backendServices = [
+        {
+          name: String(backendService.name || ''),
+          sessionAffinity: backendService.sessionAffinity || 'NONE',
+          ...(backendService.healthCheck ? { healthCheck: backendService.healthCheck } : {}),
+        },
+      ];
+    } else if (!backendServices.length) {
+      const defaultHealthCheck = createGceRegionalExternalNetworkHealthCheck(command.name);
+      backendServices = [
+        {
+          healthCheck: (defaultHealthCheck as unknown) as IGceResourceReference,
+          name: command.name,
+          sessionAffinity: 'NONE',
+        },
+      ];
+      healthChecks = [defaultHealthCheck];
+    }
+  }
+
+  const backend = backendServices[0];
+  const backendHealthCheck =
+    typeof backend?.healthCheck === 'object' ? (backend.healthCheck as IGceLoadBalancerHealthCheck) : undefined;
+  const referencedHealthCheck = backendHealthCheck?.name
+    ? healthChecks.find(({ name }) => name === backendHealthCheck.name)
+    : undefined;
+  const healthCheck =
+    (backendHealthCheck && Object.keys(backendHealthCheck).some((key) => key !== 'name' && key !== 'selfLink')
+      ? backendHealthCheck
+      : referencedHealthCheck || backendHealthCheck || healthChecks[0]) || undefined;
+  if (backend && healthCheck) {
+    const namedHealthCheck = {
+      ...healthCheck,
+      name: healthCheck.name?.trim() || command.name,
+    };
+    backendServices = [
+      {
+        ...backend,
+        healthCheck: (namedHealthCheck as unknown) as IGceResourceReference,
+      },
+    ];
+    healthChecks = [namedHealthCheck];
+  }
+
+  return {
+    ...command,
+    backendServices,
+    healthChecks,
+    loadBalancerType: 'REGIONAL_EXTERNAL_NETWORK',
+    ports,
+  };
+}
+
+export function serializeGceRegionalExternalNetworkLoadBalancerCommand(
+  command: IGceRegionalExternalNetworkLoadBalancerCommand,
+): IGceRegionalExternalNetworkLoadBalancerPayload {
+  const syncedCommand: IGceRegionalExternalNetworkLoadBalancerCommand = {
+    ...command,
+    listeners: [
+      {
+        ...(command.listeners[0] || { name: command.name, portRange: '', protocol: 'TCP' }),
+        portRange: (command.ports?.length ? command.ports : splitPorts(command.listeners[0]?.portRange)).join(','),
+      },
+    ],
+  };
+
+  return serializeGceLoadBalancerCommand(syncedCommand) as IGceRegionalExternalNetworkLoadBalancerPayload;
+}
+
+export function submitGceRegionalExternalNetworkLoadBalancerCommand(
+  command: IGceRegionalExternalNetworkLoadBalancerCommand,
+  { application, executeTask = TaskExecutor.executeTask }: IGceRegionalExternalNetworkSubmissionDependencies,
+): IGceRegionalExternalNetworkLoadBalancerPayload | Promise<ITask> {
+  const payload = serializeGceRegionalExternalNetworkLoadBalancerCommand(command);
+  if (command.mode === 'pipeline') {
+    return payload;
+  }
+
+  return Promise.resolve(
+    executeTask({
+      application,
+      description: `${command.mode === 'edit' ? 'Update' : 'Create'} Load Balancer: ${command.name}`,
+      job: [payload],
+    }),
+  );
+}
+
+class GceRegionalExternalNetworkLoadBalancerModalComponent extends React.Component<
+  IGceRegionalExternalNetworkLoadBalancerModalProps,
+  IGceRegionalExternalNetworkLoadBalancerModalState
+> {
+  private dataController?: GceLoadBalancerDataController;
+  private unsubscribe?: () => void;
+
+  public constructor(props: IGceRegionalExternalNetworkLoadBalancerModalProps) {
+    super(props);
+    const application = this.application(props);
+    const mode = this.mode(props);
+    const command = normalizeGceRegionalExternalNetworkLoadBalancerCommand(
+      props.loadBalancer,
+      mode,
+      application?.name,
+      {
+        credentials: props.credentials || GCEProviderSettings.defaults.account,
+        region: GCEProviderSettings.defaults.region,
+      },
+    );
+    this.state = {
+      command,
+      data: props.data || EMPTY_DATA,
+      status: props.data ? 'ready' : 'idle',
+      taskMonitor: new TaskMonitor({
+        application,
+        title: `${mode === 'edit' ? 'Updating' : 'Creating'} your load balancer`,
+        onDismiss: () => props.dismissModal?.(),
+        onTaskComplete: () => {
+          InfrastructureCaches.clearCache('healthChecks');
+          application?.loadBalancers?.refresh?.();
+          props.closeModal?.();
+        },
+      }),
+    };
+  }
+
+  public componentDidMount(): void {
+    if (this.props.data) return;
+    this.dataController = new GceLoadBalancerDataController(this.props.dataReaders);
+    this.unsubscribe = this.dataController.subscribe((state) => this.setState(state));
+    this.dataController.load(this.state.command.credentials);
+  }
+
+  public componentWillUnmount(): void {
+    this.unsubscribe?.();
+    this.dataController?.dispose();
+  }
+
+  public render(): JSX.Element {
+    const { command, data, status, taskMonitor } = this.state;
+    const errors = validateGceRegionalExternalNetworkLoadBalancerCommand(command);
+    const heading =
+      command.mode === 'create'
+        ? 'Create Regional External Network Load Balancer'
+        : command.mode === 'pipeline'
+        ? 'Configure Regional External Network Load Balancer'
+        : `Edit ${command.name}`;
+
+    return (
+      <div className="modal-content">
+        <TaskMonitorWrapper monitor={taskMonitor} />
+        <ModalClose dismiss={this.props.dismissModal} />
+        <div className="modal-header">
+          <h3>{heading}</h3>
+        </div>
+        <div className="modal-body">
+          {status === 'loading' && <div className="horizontal center middle">Loading...</div>}
+          {status === 'error' && <div className="alert alert-danger">Unable to load GCE resources.</div>}
+          <GceRegionalExternalNetworkLoadBalancerEditor command={command} data={data} onChange={this.updateCommand} />
+          {!!errors.length && (
+            <div className="alert alert-danger gce-regional-external-network-validation-errors">
+              {errors.map((error) => (
+                <div key={error}>{error}</div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="modal-footer">
+          <button
+            className="btn btn-default"
+            disabled={taskMonitor.submitting}
+            onClick={this.props.dismissModal}
+            type="button"
+          >
+            Cancel
+          </button>
+          <SubmitButton
+            isDisabled={!!errors.length || status === 'loading' || taskMonitor.submitting}
+            isFormSubmit={false}
+            label={command.mode === 'pipeline' ? 'Done' : command.mode === 'edit' ? 'Update' : 'Create'}
+            onClick={this.submit}
+            submitting={taskMonitor.submitting}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  private application(props = this.props): Application {
+    return (props.application || props.app) as Application;
+  }
+
+  private mode(props = this.props): GceLoadBalancerEditorMode {
+    if (props.forPipelineConfig) return 'pipeline';
+    if (props.mode) return props.mode;
+    return props.isNew === false || props.loadBalancer ? 'edit' : 'create';
+  }
+
+  private updateCommand = (command: IGceRegionalExternalNetworkLoadBalancerCommand): void => {
+    const accountChanged = command.credentials !== this.state.command.credentials;
+    this.setState({ command });
+    if (accountChanged) this.dataController?.load(command.credentials);
+  };
+
+  private submit = (): void => {
+    if (validateGceRegionalExternalNetworkLoadBalancerCommand(this.state.command).length) {
+      return;
+    }
+    if (this.state.command.mode === 'pipeline') {
+      this.props.closeModal?.(
+        submitGceRegionalExternalNetworkLoadBalancerCommand(this.state.command, {
+          application: this.application(),
+          executeTask: this.props.executeTask,
+        }),
+      );
+      return;
+    }
+    this.state.taskMonitor.submit(
+      () =>
+        submitGceRegionalExternalNetworkLoadBalancerCommand(this.state.command, {
+          application: this.application(),
+          executeTask: this.props.executeTask,
+        }) as PromiseLike<ITask>,
+    );
+  };
+}
+
+export const GceRegionalExternalNetworkLoadBalancerModal = Object.assign(
+  GceRegionalExternalNetworkLoadBalancerModalComponent,
+  {
+    show: (props: IGceRegionalExternalNetworkLoadBalancerModalProps) =>
+      ReactModal.show(GceRegionalExternalNetworkLoadBalancerModalComponent, props, { dialogClassName: 'modal-lg' }),
+    supportsPipelineConfig: true,
+  },
+);
+
+function splitPorts(value: string | undefined): string[] {
+  return String(value || '').split(',');
+}