feat(hybrid-cloud): Adds region selector dropdown behind feature flag

[GabeVillalobos]

Implements a simple dropdown with default region mapping for our two expected regions, guarded behind a feature flag.

Automatically routes the provision request to the correct region when one is selected via the dropdown.

Without the feature flag enabled, or with it enabled in monolith mode:

With the feature flag enabled and with multiple regions:

[github-actions]

🚨 Warning: This pull request contains Frontend and Backend changes!

It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently.

Have questions? Please ask in the #discuss-dev-infra channel.

[codecov]

Codecov Report

Merging #59164 (8956d30) into master (3a76704) will increase coverage by 0.35%.
Report is 57 commits behind head on master.
The diff coverage is 33.33%.

@@            Coverage Diff             @@
##           master   #59164      +/-   ##
==========================================
+ Coverage   80.39%   80.75%   +0.35%     
==========================================
  Files        5165     5164       -1     
  Lines      225901   225928      +27     
  Branches    38021    38022       +1     
==========================================
+ Hits       181613   182448     +835     
+ Misses      38645    37948     -697     
+ Partials     5643     5532     -111     

Files	Coverage Δ
src/sentry/options/defaults.py	100.00% <100.00%> (ø)
static/app/components/forms/apiForm.tsx	72.72% <ø> (-4.20%)	⬇️
static/app/views/organizationCreate/index.tsx	83.33% <ø> (ø)
src/sentry/web/client_config.py	84.61% <0.00%> (+3.78%)	⬆️

... and 131 files with indirect coverage changes

[markstory]

Suggested change

	const request_options: RequestOptions = {
	const requestOptions: RequestOptions = {

[markstory]

Suggested change

	request_options.host = hostOverride;
	}
	api.request(apiEndpoint, request_options);
	requestOptions.host = hostOverride;
	}
	api.request(apiEndpoint, requestOptions);

To align better with naming conventions elsewhere in our JS code.

[markstory]

You might be leaking state here. Should we backup state at the beginning of beforeEach() and restore in an afterEach?

[GabeVillalobos]

Good point, I'll go ahead and add that. Do we have global setup/teardown fixtures for ConfigStore by chance?

[markstory]

Do we have global setup/teardown fixtures for ConfigStore by chance?

I don't think we have global setup/teardown on any of our reflux stores.

[markstory]

If we're sending the host name for the region in the request, do we parse the URL in the server side? Should we be sending the region name instead so that we don't have to parse URLs from user data?

[GabeVillalobos]

As far as I know, the region is unused/extraneous in the request body, but I couldn't figure out how to omit it from the form data 😅 Ideally we wouldn't send this at all.

[markstory]

We could supply a model to ApiForm that omits the region field from the serialized request data via the transformData method.

sentry/static/app/components/forms/model.tsx

Lines 324 to 334 in 563e619

	getTransformedData() {
	const form = this.getData();
	const data = Object.keys(form)
	.map(id => [id, this.getTransformedValue(id)])
	.reduce<Record<string, any>>((acc, [id, value]) => {
	acc[id] = value;
	return acc;
	}, {});
	return this.options.transformData ? this.options.transformData(data, this) : data;

is the signature for FormModel.transformData and an existing usage can be found here

sentry/static/app/components/modals/sentryAppPublishRequestModal.tsx

Lines 44 to 61 in 563e619

	function transformData(data: Record<string, any>, model: FormModel) {
	// map object to list of questions
	const questionnaire = Array.from(model.fieldDescriptor.values()).map(field =>
	// we read the meta for the question that has a react node for the label
	({
	question: field.meta || field.label,
	answer: data[field.name],
	})
	);
	return {questionnaire};
	}
	type Props = ModalRenderProps & {
	app: SentryApp;
	};
	export default class SentryAppPublishRequestModal extends Component<Props> {
	form = new FormModel({transformData});