refactor: use the IntegrateNowFormSections inside RegionForm

SigNoz · Jan 30, 2025 · c1780f0 · c1780f0
1 parent 9beba42
commit c1780f0
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 99 deletions.
diff --git a/...nd/src/container/CloudIntegrationPage/HeroSection/components/IntegrateNowFormSections.tsx b/...nd/src/container/CloudIntegrationPage/HeroSection/components/IntegrateNowFormSections.tsx
@@ -6,8 +6,14 @@ import { Region } from 'utils/regions';
 // Form section components
 function RegionDeploymentSection({
 	regions,
+	selectedDeploymentRegion,
+	handleRegionChange,
+	isFormDisabled,
 }: {
 	regions: Region[];
+	selectedDeploymentRegion: string | undefined;
+	handleRegionChange: (value: string) => void;
+	isFormDisabled: boolean;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -23,10 +29,13 @@ function RegionDeploymentSection({
 				className="cloud-account-setup-form__form-item"
 			>
 				<Select
-					placeholder="US East (N. Virginia)"
+					placeholder="e.g. US East (N. Virginia)"
 					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 					style={{ height: '44px' }}
 					className="cloud-account-setup-form__select"
+					onChange={handleRegionChange}
+					value={selectedDeploymentRegion}
+					disabled={isFormDisabled}
 				>
 					{regions.flatMap((region) =>
 						region.subRegions.map((subRegion) => (
@@ -47,12 +56,14 @@ function MonitoringRegionsSection({
 	onIncludeAllRegionsChange,
 	getRegionPreviewText,
 	onRegionSelect,
+	isFormDisabled,
 }: {
 	includeAllRegions: boolean;
 	selectedRegions: string[];
 	onIncludeAllRegionsChange: (checked: boolean) => void;
 	getRegionPreviewText: (regions: string[]) => string[];
 	onRegionSelect: () => void;
+	isFormDisabled: boolean;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -83,11 +94,16 @@ function MonitoringRegionsSection({
 						size="small"
 						checked={includeAllRegions}
 						onChange={onIncludeAllRegionsChange}
+						disabled={isFormDisabled}
 					/>
 					<button
 						className="cloud-account-setup-form__include-all-regions-switch-label"
 						type="button"
-						onClick={(): void => onIncludeAllRegionsChange(!includeAllRegions)}
+						onClick={(): void =>
+							!isFormDisabled
+								? onIncludeAllRegionsChange(!includeAllRegions)
+								: undefined
+						}
 					>
 						Include all regions
 					</button>
@@ -96,11 +112,11 @@ function MonitoringRegionsSection({
 					suffixIcon={null}
 					placeholder="Select Region(s)"
 					className="cloud-account-setup-form__select monitor-regions"
-					onClick={onRegionSelect}
+					onClick={!isFormDisabled ? onRegionSelect : undefined}
 					mode="multiple"
 					maxTagCount={3}
 					value={getRegionPreviewText(selectedRegions)}
-					disabled
+					open={false}
 				/>
 			</Form.Item>
 		</div>

diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx
@@ -1,14 +1,17 @@
-import { Color } from '@signozhq/design-tokens';
-import { Form, Select, Switch } from 'antd';
+import { Form } from 'antd';
 import cx from 'classnames';
 import { useAccountStatus } from 'hooks/integrations/aws/useAccountStatus';
-import { ChevronDown } from 'lucide-react';
 import { useRef } from 'react';
 import { AccountStatusResponse } from 'types/api/integrations/aws';
 import { regions } from 'utils/regions';
 
 import { ModalStateEnum, RegionFormProps } from '../types';
 import AlertMessage from './AlertMessage';
+import {
+	ComplianceNote,
+	MonitoringRegionsSection,
+	RegionDeploymentSection,
+} from './IntegrateNowFormSections';
 
 const allRegions = (): string[] =>
 	regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
@@ -70,98 +73,21 @@ export function RegionForm({
 					disabled: isFormDisabled,
 				})}
 			>
-				<div className="cloud-account-setup-form__form-group">
-					<div className="cloud-account-setup-form__title">
-						Where should we deploy the SigNoz Cloud stack?
-					</div>
-					<div className="cloud-account-setup-form__description">
-						Choose the AWS region for CloudFormation stack deployment
-					</div>
-					<Form.Item
-						name="region"
-						rules={[{ required: true, message: 'Please select a region' }]}
-						className="cloud-account-setup-form__form-item"
-					>
-						<Select
-							placeholder="e.g. US East (N. Virginia)"
-							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-							style={{ height: '44px' }}
-							className="cloud-account-setup-form__select"
-							onChange={handleRegionChange}
-							value={selectedDeploymentRegion}
-							disabled={isFormDisabled}
-						>
-							{regions.flatMap((region) =>
-								region.subRegions.map((subRegion) => (
-									<Select.Option key={subRegion.id} value={subRegion.id}>
-										{subRegion.displayName}
-									</Select.Option>
-								)),
-							)}
-						</Select>
-					</Form.Item>
-				</div>
-				<div className="cloud-account-setup-form__form-group">
-					<div className="cloud-account-setup-form__title">
-						Which regions do you want to monitor?
-					</div>
-					<div className="cloud-account-setup-form__description">
-						Choose only the regions you want SigNoz to monitor. You can enable all at
-						once, or pick specific ones:
-					</div>
-					<Form.Item
-						name="monitorRegions"
-						rules={[
-							{
-								validator: async (): Promise<void> => {
-									if (selectedRegions.length === 0) {
-										throw new Error('Please select at least one region to monitor');
-									}
-								},
-								message: 'Please select at least one region to monitor',
-							},
-						]}
-						className="cloud-account-setup-form__form-item"
-					>
-						<div className="cloud-account-setup-form__include-all-regions-switch">
-							<Switch
-								size="small"
-								checked={includeAllRegions}
-								onChange={onIncludeAllRegionsChange}
-								disabled={isFormDisabled}
-							/>
-							<button
-								className="cloud-account-setup-form__include-all-regions-switch-label"
-								type="button"
-								onClick={(): void =>
-									!isFormDisabled
-										? onIncludeAllRegionsChange(!includeAllRegions)
-										: undefined
-								}
-							>
-								Include all regions
-							</button>
-						</div>
-						<Select
-							style={{ height: '44px' }}
-							suffixIcon={null}
-							placeholder="Select Region(s)"
-							className="cloud-account-setup-form__select monitor-regions"
-							onClick={!isFormDisabled ? onRegionSelect : undefined}
-							mode="multiple"
-							maxTagCount={3}
-							value={getRegionPreviewText(selectedRegions)}
-							open={false}
-						/>
-					</Form.Item>
-				</div>
-				<div className="cloud-account-setup-form__form-group">
-					<div className="cloud-account-setup-form__note">
-						Note: Some organizations may require the CloudFormation stack to be
-						deployed in the same region as their primary infrastructure for compliance
-						or latency reasons.
-					</div>
-				</div>
+				<RegionDeploymentSection
+					regions={regions}
+					handleRegionChange={handleRegionChange}
+					isFormDisabled={isFormDisabled}
+					selectedDeploymentRegion={selectedDeploymentRegion}
+				/>
+				<MonitoringRegionsSection
+					includeAllRegions={includeAllRegions}
+					selectedRegions={selectedRegions}
+					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
+					getRegionPreviewText={getRegionPreviewText}
+					onRegionSelect={onRegionSelect}
+					isFormDisabled={isFormDisabled}
+				/>
+				<ComplianceNote />
 			</div>
 		</Form>
 	);