feat: new service_account page with crud and listing

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -0,0 +1,142 @@
+.create-sa-modal {
+	max-width: 530px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-family: Inter, sans-serif;
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--bg-base-white);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.create-sa-modal__content {
+			padding: var(--padding-4);
+		}
+	}
+}
+
+.create-sa-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	.ant-form-item {
+		margin-bottom: var(--spacing-4);
+	}
+
+	.ant-form-item-label > label {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		color: var(--l1-foreground);
+		background-color: var(--l2-background);
+		border-color: var(--border);
+		font-size: var(--paragraph-base-400-font-size);
+		border-radius: 2px;
+		width: 100%;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+
+		&:focus {
+			border-color: var(--primary);
+			box-shadow: none;
+		}
+	}
+
+	&__select {
+		width: 100%;
+
+		.ant-select-selector {
+			min-height: 32px;
+			border-radius: 2px;
+			background-color: var(--l2-background) !important;
+			border: 1px solid var(--border) !important;
+			padding: 0 var(--padding-2) !important;
+
+			.ant-select-selection-placeholder {
+				color: var(--l3-foreground);
+				opacity: 0.4;
+				font-size: var(--paragraph-base-400-font-size);
+				letter-spacing: -0.07px;
+				line-height: 32px;
+			}
+
+			.ant-select-selection-item {
+				font-size: var(--paragraph-base-400-font-size);
+				letter-spacing: -0.07px;
+				color: var(--bg-base-white);
+			}
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+
+		&.ant-select-focused .ant-select-selector,
+		&:not(.ant-select-disabled):hover .ant-select-selector {
+			border-color: var(--primary);
+		}
+	}
+
+	&__helper {
+		font-size: var(--paragraph-small-400-font-size);
+		color: var(--l3-foreground);
+		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
+		line-height: var(--paragraph-small-400-line-height);
+	}
+}
+
+.create-sa-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: var(--spacing-4);
+	flex-shrink: 0;
+}
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.create-sa-form {
+		&__select {
+			.ant-select-selector {
+				.ant-select-selection-item {
+					color: var(--bg-base-black);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -0,0 +1,154 @@
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { ChevronDown, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { Form, Input, Select } from 'antd';
+import { useCreateServiceAccount } from 'api/generated/services/serviceaccount';
+
+import './CreateServiceAccountModal.styles.scss';
+
+interface CreateServiceAccountModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+interface FormValues {
+	name: string;
+	email?: string;
+	roles: string[];
+}
+
+function CreateServiceAccountModal({
+	open,
+	onClose,
+	onSuccess,
+}: CreateServiceAccountModalProps): JSX.Element {
+	const [form] = Form.useForm<FormValues>();
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const { mutateAsync: createServiceAccount } = useCreateServiceAccount();
+
+	const handleClose = useCallback((): void => {
+		form.resetFields();
+		onClose();
+	}, [form, onClose]);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+			setIsSubmitting(true);
+			await createServiceAccount({
+				data: {
+					name: values.name.trim(),
+					email: values.email?.trim() ?? '',
+					roles: values.roles ?? [],
+				},
+			});
+			toast.success('Service account created successfully', { richColors: true });
+			form.resetFields();
+			onSuccess();
+			onClose();
+		} catch (err: unknown) {
+			// If it's a form validation error (no message property typical of AntD), skip
+			if (err && typeof err === 'object' && 'errorFields' in err) {
+				return;
+			}
+			const errorMessage =
+				err instanceof Error ? err.message : 'An error occurred';
+			toast.error(`Failed to create service account: ${errorMessage}`, {
+				richColors: true,
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [form, createServiceAccount, onSuccess, onClose]);
+
+	return (
+		<DialogWrapper
+			title="New Service Account"
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			showCloseButton
+			width="narrow"
+			className="create-sa-modal"
+			disableOutsideClick={false}
+		>
+			<div className="create-sa-modal__content">
+				<Form form={form} layout="vertical" className="create-sa-form">
+					<Form.Item
+						name="name"
+						label="Name"
+						rules={[{ required: true, message: 'Name is required' }]}
+						className="create-sa-form__item"
+					>
+						<Input placeholder="Enter a name" className="create-sa-form__input" />
+					</Form.Item>
+
+					<Form.Item
+						name="email"
+						label="Email Address"
+						className="create-sa-form__item"
+					>
+						<Input
+							type="email"
+							placeholder="email@example.com"
+							className="create-sa-form__input"
+						/>
+					</Form.Item>
+					<p className="create-sa-form__helper">
+						Used only for notifications about this service account. It is not used for
+						authentication.
+					</p>
+
+					<Form.Item name="roles" label="Roles" className="create-sa-form__item">
+						<Select
+							mode="multiple"
+							placeholder="Select roles"
+							suffixIcon={<ChevronDown size={14} />}
+							className="create-sa-form__select"
+							getPopupContainer={(triggerNode): HTMLElement =>
+								(triggerNode?.closest('.create-sa-modal') as HTMLElement) ||
+								document.body
+							}
+						>
+							<Select.Option value="VIEWER">Viewer</Select.Option>
+							<Select.Option value="EDITOR">Editor</Select.Option>
+							<Select.Option value="ADMIN">Admin</Select.Option>
+						</Select>
+					</Form.Item>
+				</Form>
+			</div>
+
+			<DialogFooter className="create-sa-modal__footer">
+				<Button
+					type="button"
+					variant="solid"
+					color="secondary"
+					size="sm"
+					onClick={handleClose}
+				>
+					<X size={12} />
+					Cancel
+				</Button>
+
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					onClick={handleSubmit}
+					disabled={isSubmitting}
+				>
+					{isSubmitting ? 'Creating...' : 'Create Service Account'}
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default CreateServiceAccountModal;