refactor: convert constants to TypeScript enums

ritoban23 · ritoban23 · commit b962dff2e376 · 2025-10-17T20:14:09.000+05:30
diff --git a/ui/src/enums/connectorEnum.ts b/ui/src/enums/connectorEnum.ts
@@ -0,0 +1,11 @@
+export enum SourceConnector {
+	MONGODB = "MongoDB",
+	POSTGRES = "Postgres",
+	MYSQL = "MySQL",
+	ORACLE = "Oracle",
+}
+
+export enum DestinationConnector {
+	AMAZON_S3 = "Amazon S3",
+	APACHE_ICEBERG = "Apache Iceberg",
+}
diff --git a/ui/src/enums/index.ts b/ui/src/enums/index.ts
@@ -0,0 +1,4 @@
+export { SourceConnector, DestinationConnector } from "./connectorEnum"
+export { StreamFilter } from "./streamFilterEnum"
+export { TabType } from "./tabTypeEnum"
+export { StatusValue } from "./statusValueEnum"
diff --git a/ui/src/enums/statusValueEnum.ts b/ui/src/enums/statusValueEnum.ts
@@ -0,0 +1,10 @@
+export enum StatusValue {
+	ACTIVE = "active",
+	INACTIVE = "inactive",
+	PENDING = "pending",
+	FAILED = "failed",
+	RUNNING = "running",
+	SUCCESS = "success",
+	COMPLETED = "completed",
+	CANCELLED = "cancelled",
+}
diff --git a/ui/src/enums/streamFilterEnum.ts b/ui/src/enums/streamFilterEnum.ts
@@ -0,0 +1,5 @@
+export enum StreamFilter {
+	ALL_TABLES = "All tables",
+	SELECTED = "Selected",
+	NOT_SELECTED = "Not Selected",
+}
diff --git a/ui/src/enums/tabTypeEnum.ts b/ui/src/enums/tabTypeEnum.ts
@@ -0,0 +1,6 @@
+export enum TabType {
+	CONFIG = "config",
+	SCHEMA = "schema",
+	JOBS = "jobs",
+	PARTITIONING = "partitioning",
+}
diff --git a/ui/src/modules/destinations/components/connectorOptions.tsx b/ui/src/modules/destinations/components/connectorOptions.tsx
@@ -2,10 +2,11 @@ import { ConnectorOption } from "../../../types"
 import AWSS3 from "../../../assets/AWSS3.svg"
 import ApacheIceBerg from "../../../assets/ApacheIceBerg.svg"
 import { CONNECTOR_TYPES } from "../../../utils/constants"
+import { DestinationConnector } from "../../../enums"
 
 export const connectorOptions: ConnectorOption[] = [
 	{
-		value: CONNECTOR_TYPES.AMAZON_S3,
+		value: DestinationConnector.AMAZON_S3,
 		label: (
 			<div className="flex items-center">
 				<img
@@ -18,7 +19,7 @@ export const connectorOptions: ConnectorOption[] = [
 		),
 	},
 	{
-		value: CONNECTOR_TYPES.APACHE_ICEBERG,
+		value: DestinationConnector.APACHE_ICEBERG,
 		label: (
 			<div className="flex items-center">
 				<img
diff --git a/ui/src/modules/jobs/components/FilterButton.tsx b/ui/src/modules/jobs/components/FilterButton.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx"
 
-import { COLORS, STREAM_FILTERS } from "../../../utils/constants"
+import { COLORS } from "../../../utils/constants"
+import { StreamFilter } from "../../../enums"
 import { FilterButtonProps } from "../../../types"
 
 const FilterButton: React.FC<FilterButtonProps> = ({
@@ -11,9 +12,8 @@ const FilterButton: React.FC<FilterButtonProps> = ({
 	const isFilterSelected = selectedFilters.includes(filter)
 
 	const handleFilterSelect = (filter: string) => {
-		if (filter === STREAM_FILTERS[0]) {
-			// "All tables"
-			setSelectedFilters([STREAM_FILTERS[0]])
+		if (filter === StreamFilter.ALL_TABLES) {
+			setSelectedFilters([StreamFilter.ALL_TABLES])
 			return
 		}
 
@@ -24,7 +24,7 @@ const FilterButton: React.FC<FilterButtonProps> = ({
 
 		setSelectedFilters([
 			...selectedFilters.filter(
-				(selectedFilter: string) => selectedFilter !== STREAM_FILTERS[0], // "All tables"
+				(selectedFilter: string) => selectedFilter !== StreamFilter.ALL_TABLES,
 			),
 			filter,
 		])
diff --git a/ui/src/modules/jobs/pages/JobCreation.tsx b/ui/src/modules/jobs/pages/JobCreation.tsx
@@ -19,8 +19,8 @@ import {
 	JOB_CREATION_STEPS,
 	JOB_STEP_NUMBERS,
 	TEST_CONNECTION_STATUS,
-	DEFAULT_CONNECTORS,
 } from "../../../utils/constants"
+import { SourceConnector } from "../../../enums"
 
 // Internal imports from components
 import JobConfiguration from "../components/JobConfiguration"
@@ -48,7 +48,7 @@ const JobCreation: React.FC = () => {
 	const [docsMinimized, setDocsMinimized] = useState(false)
 	const [sourceName, setSourceName] = useState(initialData.sourceName || "")
 	const [sourceConnector, setSourceConnector] = useState(
-		initialData.sourceConnector || DEFAULT_CONNECTORS.SOURCE,
+		initialData.sourceConnector || SourceConnector.MONGODB,
 	)
 	const [sourceFormData, setSourceFormData] = useState<any>(
 		initialData.sourceFormData || {},
diff --git a/ui/src/modules/jobs/pages/JobEdit.tsx b/ui/src/modules/jobs/pages/JobEdit.tsx
@@ -33,8 +33,8 @@ import {
 	DESTINATION_INTERNAL_TYPES,
 	JOB_CREATION_STEPS,
 	JOB_STEP_NUMBERS,
-	DEFAULT_CONNECTORS,
 } from "../../../utils/constants"
+import { SourceConnector } from "../../../enums"
 import ResetStreamsModal from "../../common/Modals/ResetStreamsModal"
 
 // Custom wrapper component for SourceEdit to use in job flow
@@ -228,7 +228,7 @@ const JobEdit: React.FC = () => {
 	const initializeForNewJob = () => {
 		setSourceData({
 			name: "New Source",
-			type: DEFAULT_CONNECTORS.SOURCE,
+			type: SourceConnector.MONGODB,
 			config: {
 				hosts: [],
 				username: "",
diff --git a/ui/src/modules/jobs/pages/SchemaConfiguration.tsx b/ui/src/modules/jobs/pages/SchemaConfiguration.tsx
@@ -18,8 +18,8 @@ import { ArrowSquareOut, Info, PencilSimple } from "@phosphor-icons/react"
 import {
 	DESTINATION_INTERNAL_TYPES,
 	DESTINATATION_DATABASE_TOOLTIP_TEXT,
-	STREAM_FILTERS,
 } from "../../../utils/constants"
+import { StreamFilter } from "../../../enums"
 import { extractNamespaceFromDestination } from "../../../utils/destination-database"
 import DestinationDatabaseModal from "../../common/Modals/DestinationDatabaseModal"
 
@@ -647,7 +647,7 @@ const SchemaConfiguration: React.FC<SchemaConfigurationProps> = ({
 					<div
 						className={`flex w-1/2 flex-wrap ${destinationDatabase ? "justify-end" : "justify-start"} gap-2`}
 					>
-						{STREAM_FILTERS.map(filter => (
+						{Object.values(StreamFilter).map(filter => (
 							<FilterButton
 								key={filter}
 								filter={filter}
diff --git a/ui/src/modules/jobs/pages/streams/StreamConfiguration.tsx b/ui/src/modules/jobs/pages/streams/StreamConfiguration.tsx
@@ -39,8 +39,8 @@ import {
 	PartitioningRegexTooltip,
 	SYNC_MODE_MAP,
 	TAB_STYLES,
-	TAB_TYPE_VALUES,
 } from "../../../../utils/constants"
+import { TabType } from "../../../../enums"
 import { operatorOptions } from "../../../../utils/utils"
 
 import StreamsSchema from "./StreamsSchema"
@@ -59,9 +59,7 @@ const StreamConfiguration = ({
 	initialSelectedStreams,
 	destinationType = DESTINATION_INTERNAL_TYPES.S3,
 }: ExtendedStreamConfigurationProps) => {
-	const [activeTab, setActiveTab] = useState<
-		(typeof TAB_TYPE_VALUES)[keyof typeof TAB_TYPE_VALUES]
-	>(TAB_TYPE_VALUES.CONFIG)
+	const [activeTab, setActiveTab] = useState<TabType>(TabType.CONFIG)
 	const [syncMode, setSyncMode] = useState(stream.stream.sync_mode)
 	const [normalization, setNormalization] =
 		useState<boolean>(initialNormalization)
@@ -116,7 +114,7 @@ const StreamConfiguration = ({
 		)
 
 	useEffect(() => {
-		setActiveTab(TAB_TYPE_VALUES.CONFIG)
+		setActiveTab(TabType.CONFIG)
 		const initialApiSyncMode = stream.stream.sync_mode
 
 		// Parse cursor field for default value
@@ -571,11 +569,7 @@ const StreamConfiguration = ({
 					"flex items-center justify-center gap-1 text-xs",
 				)}
 				style={{ fontWeight: 500, height: "28px", width: "100%" }}
-				onClick={() =>
-					setActiveTab(
-						id as (typeof TAB_TYPE_VALUES)[keyof typeof TAB_TYPE_VALUES],
-					)
-				}
+				onClick={() => setActiveTab(id as TabType)}
 				type="button"
 			>
 				<span className="flex items-center">{icon}</span>
@@ -1024,29 +1018,26 @@ const StreamConfiguration = ({
 			<div className="mb-4 w-full">
 				<div className="grid grid-cols-3 gap-1 rounded-md bg-background-primary p-1">
 					<TabButton
-						id={TAB_TYPE_VALUES.CONFIG}
+						id={TabType.CONFIG}
 						label="Config"
 						icon={<SlidersHorizontal className="size-3.5" />}
 					/>
 					<TabButton
-						id={TAB_TYPE_VALUES.SCHEMA}
+						id={TabType.SCHEMA}
 						label="Schema"
 						icon={<ColumnsPlusRight className="size-3.5" />}
 					/>
 					<TabButton
-						id={TAB_TYPE_VALUES.PARTITIONING}
+						id={TabType.PARTITIONING}
 						label="Partitioning"
 						icon={<GridFour className="size-3.5" />}
 					/>
 				</div>
 			</div>
 
-			{activeTab === TAB_TYPE_VALUES.CONFIG && renderConfigContent()}
-			{activeTab === TAB_TYPE_VALUES.SCHEMA && (
-				<StreamsSchema initialData={stream} />
-			)}
-			{activeTab === TAB_TYPE_VALUES.PARTITIONING &&
-				renderPartitioningContent()}
+			{activeTab === TabType.CONFIG && renderConfigContent()}
+			{activeTab === TabType.SCHEMA && <StreamsSchema initialData={stream} />}
+			{activeTab === TabType.PARTITIONING && renderPartitioningContent()}
 		</div>
 	)
 }
diff --git a/ui/src/modules/sources/components/connectorOptions.tsx b/ui/src/modules/sources/components/connectorOptions.tsx
@@ -1,10 +1,11 @@
 import { ConnectorOption } from "../../../types"
 import { getConnectorImage } from "../../../utils/utils"
 import { CONNECTOR_TYPES } from "../../../utils/constants"
+import { SourceConnector } from "../../../enums"
 
 export const connectorOptions: ConnectorOption[] = [
 	{
-		value: CONNECTOR_TYPES.MONGODB,
+		value: SourceConnector.MONGODB,
 		label: (
 			<div className="flex items-center">
 				<img
@@ -17,7 +18,7 @@ export const connectorOptions: ConnectorOption[] = [
 		),
 	},
 	{
-		value: CONNECTOR_TYPES.POSTGRES,
+		value: SourceConnector.POSTGRES,
 		label: (
 			<div className="flex items-center">
 				<img
@@ -30,7 +31,7 @@ export const connectorOptions: ConnectorOption[] = [
 		),
 	},
 	{
-		value: CONNECTOR_TYPES.MYSQL,
+		value: SourceConnector.MYSQL,
 		label: (
 			<div className="flex items-center">
 				<img
@@ -43,7 +44,7 @@ export const connectorOptions: ConnectorOption[] = [
 		),
 	},
 	{
-		value: CONNECTOR_TYPES.ORACLE,
+		value: SourceConnector.ORACLE,
 		label: (
 			<div className="flex items-center">
 				<img
diff --git a/ui/src/modules/sources/pages/CreateSource.tsx b/ui/src/modules/sources/pages/CreateSource.tsx
@@ -30,8 +30,8 @@ import {
 	OLAKE_LATEST_VERSION_URL,
 	transformErrors,
 	TEST_CONNECTION_STATUS,
-	DEFAULT_CONNECTORS,
 } from "../../../utils/constants"
+import { SourceConnector } from "../../../enums"
 import EndpointTitle from "../../../utils/EndpointTitle"
 import FormField from "../../../utils/FormField"
 import DocumentationPanel from "../../common/components/DocumentationPanel"
@@ -77,7 +77,7 @@ const CreateSource = forwardRef<CreateSourceHandle, CreateSourceProps>(
 		const formRef = useRef<any>(null)
 		const [setupType, setSetupType] = useState<SetupType>("new")
 		const [connector, setConnector] = useState(
-			initialConnector || DEFAULT_CONNECTORS.SOURCE,
+			initialConnector || SourceConnector.MONGODB,
 		)
 		const [sourceName, setSourceName] = useState(initialName || "")
 		const [selectedVersion, setSelectedVersion] = useState(initialVersion || "")
diff --git a/ui/src/modules/sources/pages/SourceEdit.tsx b/ui/src/modules/sources/pages/SourceEdit.tsx
@@ -49,11 +49,8 @@ import {
 	OLAKE_LATEST_VERSION_URL,
 	transformErrors,
 	TEST_CONNECTION_STATUS,
-	STATUS_VALUES,
-	CONNECTOR_TYPE_MAP,
-	TAB_TYPE_VALUES,
-	DEFAULT_CONNECTORS,
 } from "../../../utils/constants"
+import { SourceConnector, StatusValue, TabType } from "../../../enums"
 import ObjectFieldTemplate from "../../common/components/Form/ObjectFieldTemplate"
 import CustomFieldTemplate from "../../common/components/Form/CustomFieldTemplate"
 import ArrayFieldTemplate from "../../common/components/Form/ArrayFieldTemplate"
@@ -73,9 +70,7 @@ const SourceEdit: React.FC<SourceEditProps> = ({
 	const formRef = useRef<any>(null)
 	const { sourceId } = useParams<{ sourceId: string }>()
 	const navigate = useNavigate()
-	const [activeTab, setActiveTab] = useState<
-		(typeof TAB_TYPE_VALUES)[keyof typeof TAB_TYPE_VALUES]
-	>(TAB_TYPE_VALUES.CONFIG)
+	const [activeTab, setActiveTab] = useState<TabType>(TabType.CONFIG)
 	const [connector, setConnector] = useState<string | null>(null)
 	const [selectedVersion, setSelectedVersion] = useState("")
 	const [availableVersions, setAvailableVersions] = useState<
@@ -130,7 +125,12 @@ const SourceEdit: React.FC<SourceEditProps> = ({
 	useEffect(() => {
 		if (initialData) {
 			setSourceName(initialData.name || "")
-			const connectorTypeMap: Record<string, string> = CONNECTOR_TYPE_MAP
+			const connectorTypeMap: Record<string, string> = {
+				[SourceConnector.MONGODB.toLowerCase()]: SourceConnector.MONGODB,
+				[SourceConnector.POSTGRES.toLowerCase()]: SourceConnector.POSTGRES,
+				[SourceConnector.MYSQL.toLowerCase()]: SourceConnector.MYSQL,
+				[SourceConnector.ORACLE.toLowerCase()]: SourceConnector.ORACLE,
+			}
 			let normalizedType =
 				connectorTypeMap[initialData.type.toLowerCase()] || initialData.type
 
@@ -262,9 +262,9 @@ const SourceEdit: React.FC<SourceEditProps> = ({
 		const sourceData = {
 			id: source?.id || 0,
 			name: sourceName,
-			type: connector || DEFAULT_CONNECTORS.SOURCE,
+			type: connector || SourceConnector.MONGODB,
 			version: selectedVersion,
-			status: STATUS_VALUES.ACTIVE,
+			status: StatusValue.ACTIVE,
 			config: configStr,
 			created_at: source?.created_at || new Date().toISOString(),
 			updated_at: source?.updated_at || new Date().toISOString(),
@@ -497,30 +497,30 @@ const SourceEdit: React.FC<SourceEditProps> = ({
 									<div className="mt-2 flex w-fit rounded-md bg-background-primary p-1">
 										<button
 											className={`mr-1 w-56 rounded-md px-3 py-1.5 text-center text-sm font-normal ${
-												activeTab === TAB_TYPE_VALUES.CONFIG
+												activeTab === TabType.CONFIG
 													? "bg-primary text-neutral-light"
 													: "bg-background-primary text-text-primary"
 											}`}
-											onClick={() => setActiveTab(TAB_TYPE_VALUES.CONFIG)}
+											onClick={() => setActiveTab(TabType.CONFIG)}
 										>
 											Config
 										</button>
 
 										<button
 											className={`mr-1 w-56 rounded-md px-3 py-1.5 text-center text-sm font-normal ${
-												activeTab === TAB_TYPE_VALUES.JOBS
+												activeTab === TabType.JOBS
 													? "bg-primary text-neutral-light"
 													: "bg-background-primary text-text-primary"
 											}`}
-											onClick={() => setActiveTab(TAB_TYPE_VALUES.JOBS)}
+											onClick={() => setActiveTab(TabType.JOBS)}
 										>
 											Associated jobs
 										</button>
 									</div>
 								</div>
 							)}
 
-							{activeTab === TAB_TYPE_VALUES.CONFIG ? (
+							{activeTab === TabType.CONFIG ? (
 								<div className="bg-white">
 									<div className="mb-6 rounded-xl border border-[#D9D9D9] p-6">
 										<div className="mb-4 flex items-center gap-1 text-lg font-medium">
diff --git a/ui/src/modules/sources/pages/Sources.tsx b/ui/src/modules/sources/pages/Sources.tsx
diff --git a/ui/src/utils/constants.ts b/ui/src/utils/constants.ts
