fix: clear destination UI issues

ui/src/api/services/jobService.ts

@@ -1,7 +1,6 @@
 import api from "../axios"
 import { API_CONFIG } from "../config"
 import {
-	APIResponse,
 	Job,
 	JobBase,
 	JobTask,
@@ -151,11 +150,23 @@ export const jobService = {
 		}
 	},
 
-	clearDestination: async (
+	clearDestination: async (jobId: string): Promise<{ message: string }> => {
+		try {
+			const response = await api.post<{ message: string }>(
+				`${API_CONFIG.ENDPOINTS.JOBS(API_CONFIG.PROJECT_ID)}/${jobId}/clear-destination`,
+			)
+
+			return response.data
+		} catch (error) {
+			console.error("Error clearing destination:", error)
+			throw error
+		}
+	},
+	getClearDestinationStatus: async (
 		jobId: string,
-	): Promise<APIResponse<{ message: string }>> => {
+	): Promise<{ running: boolean }> => {
 		try {
-			const response = await api.post<APIResponse<{ message: string }>>(
+			const response = await api.get<{ running: boolean }>(
 				`${API_CONFIG.ENDPOINTS.JOBS(API_CONFIG.PROJECT_ID)}/${jobId}/clear-destination`,
 			)
 
@@ -175,7 +186,7 @@ export const jobService = {
 			}>(
 				`${API_CONFIG.ENDPOINTS.JOBS(API_CONFIG.PROJECT_ID)}/${jobId}/stream-difference`,
 				{ updated_streams_config: streamsConfig },
-				{timeout: 30000}
+				{ timeout: 30000 },
 			)
 			return response.data
 		} catch (error) {

ui/src/api/services/notificationService.ts

@@ -3,6 +3,9 @@ import { message } from "antd"
 /**
  * A decoupled service for showing UI notifications.
  */
+
+const ERROR_MESSAGE_DURATION = 6 // seconds
+
 export const notificationService = {
 	success: (msg: string) => {
 		if (msg) {
@@ -13,7 +16,7 @@ export const notificationService = {
 	error: (msg: string) => {
 		if (msg) {
 			message.destroy()
-			message.error(msg)
+			message.error(msg, ERROR_MESSAGE_DURATION)
 		}
 	},
 }

ui/src/modules/common/Modals/StreamDifferenceModal.tsx

@@ -2,20 +2,26 @@ import { InfoIcon, WarningIcon } from "@phosphor-icons/react"
 import { Button, Modal } from "antd"
 import { useAppStore } from "../../../store"
 import { StreamDifferenceModalProps } from "../../../types/modalTypes"
+import { useState } from "react"
 
 const StreamDifferenceModal = ({
 	streamDifference,
 	onConfirm,
 }: StreamDifferenceModalProps) => {
+	const [isLoading, setIsLoading] = useState(false)
+
 	const { showStreamDifferenceModal, setShowStreamDifferenceModal } =
 		useAppStore()
 
 	const handleCloseModal = () => {
 		setShowStreamDifferenceModal(false)
 	}
 
-	const handleFinish = () => {
-		onConfirm()
+	const handleFinish = async () => {
+		setIsLoading(true)
+		await onConfirm()
+		setIsLoading(false)
+
 		setShowStreamDifferenceModal(false)
 	}
 
@@ -74,6 +80,7 @@ const StreamDifferenceModal = ({
 						key="edit"
 						type="primary"
 						onClick={handleFinish}
+						loading={isLoading}
 						className="bg-primary hover:bg-primary-600"
 					>
 						Confirm and Finish

ui/src/modules/common/Modals/StreamEditDisabledModal.tsx

@@ -10,8 +10,8 @@ const StreamEditDisabledModal = ({ from }: StreamEditDisabledModalProps) => {
 		useAppStore()
 
 	const handleCloseModal = () => {
-		navigate("/jobs")
 		setShowStreamEditDisabledModal(false)
+		navigate("/jobs")
 	}
 
 	return (

ui/src/modules/jobs/components/JobTable.tsx

@@ -24,6 +24,7 @@ import {
 } from "../../../utils/utils"
 import { getStatusIcon } from "../../../utils/statusIcons"
 import { PAGE_SIZE } from "../../../utils/constants"
+import { useAppStore } from "../../../store"
 
 const formatLastSyncTime = (text?: string) => {
 	if (!text) return <div className="pl-4">-</div>
@@ -49,12 +50,14 @@ const JobTable: React.FC<JobTableProps> = ({
 	const [searchText, setSearchText] = useState("")
 	const [currentPage, setCurrentPage] = useState(1)
 	const navigate = useNavigate()
+	const { setSelectedJobId } = useAppStore()
 
 	const handleViewHistory = (jobId: string) => {
 		navigate(`/jobs/${jobId}/history`)
 	}
 
 	const handleViewSettings = (jobId: string) => {
+		setSelectedJobId(jobId)
 		navigate(`/jobs/${jobId}/settings`)
 	}
 
@@ -265,15 +268,18 @@ const JobTable: React.FC<JobTableProps> = ({
 					/>
 				</div>
 
-				<Table
-					dataSource={currentPageData}
-					columns={getTableColumns()}
-					rowKey="id"
-					loading={loading}
-					pagination={false}
-					className="overflow-hidden rounded-xl"
-					rowClassName="no-hover"
-				/>
+				<div className="overflow-x-auto">
+					<Table
+						dataSource={currentPageData}
+						columns={getTableColumns()}
+						rowKey="id"
+						loading={loading}
+						pagination={false}
+						className="min-w-[1200px] overflow-hidden"
+						rowClassName="no-hover"
+						scroll={{ x: 1200 }}
+					/>
+				</div>
 			</div>
 
 			<div className="z-100 fixed bottom-[60px] right-[40px] flex justify-end bg-white p-2">

ui/src/modules/jobs/pages/JobEdit.tsx

@@ -14,7 +14,6 @@ import {
 	SourceData,
 	DestinationData,
 	StreamsDataStructure,
-	JobType,
 } from "../../../types"
 import JobConfiguration from "../components/JobConfiguration"
 import StepProgress from "../components/StepIndicator"
@@ -131,12 +130,13 @@ const JobEdit: React.FC = () => {
 	const { jobId } = useParams<{ jobId: string }>()
 	const {
 		jobs,
+		selectedJobId,
 		fetchJobs,
 		fetchSources,
 		fetchDestinations,
+		fetchSelectedClearDestinationStatus,
 		setShowResetStreamsModal,
 		setShowStreamDifferenceModal,
-		setShowStreamEditDisabledModal,
 	} = useAppStore()
 
 	const [currentStep, setCurrentStep] = useState<JobCreationSteps>(
@@ -172,15 +172,9 @@ const JobEdit: React.FC = () => {
 		fetchDestinations()
 	}, [])
 
-	// Disable stream editing if clear destination is running
 	useEffect(() => {
-		if (
-			job?.last_run_type === JobType.ClearDestination &&
-			job?.last_run_state.toLowerCase() === "running"
-		) {
-			setShowStreamEditDisabledModal(true)
-		}
-	}, [job])
+		fetchSelectedClearDestinationStatus()
+	}, [selectedJobId])
 
 	const initializeFromExistingJob = (job: Job) => {
 		setJobName(job.name)

ui/src/modules/jobs/pages/JobSettings.tsx

@@ -1,6 +1,15 @@
 import { useState, useEffect } from "react"
 import { useParams, Link, useNavigate } from "react-router-dom"
-import { Input, Button, Switch, message, Select, Radio, Tooltip } from "antd"
+import {
+	Input,
+	Button,
+	Switch,
+	message,
+	Select,
+	Radio,
+	Tooltip,
+	Spin,
+} from "antd"
 import { InfoIcon, ArrowLeftIcon } from "@phosphor-icons/react"
 import parser from "cron-parser"
 
@@ -17,7 +26,6 @@ import { DAYS, FREQUENCY_OPTIONS } from "../../../utils/constants"
 import DeleteJobModal from "../../common/Modals/DeleteJobModal"
 import ClearDataModal from "../../common/Modals/ClearDataModal"
 import ClearDestinationModal from "../../common/Modals/ClearDestinationModal"
-import { JobType } from "../../../types/jobTypes"
 import StreamEditDisabledModal from "../../common/Modals/StreamEditDisabledModal"
 
 const JobSettings: React.FC = () => {
@@ -45,12 +53,15 @@ const JobSettings: React.FC = () => {
 	}
 
 	const {
+		selectedJobId,
 		jobs,
+		isClearDestinationStatusLoading,
 		fetchJobs,
+		fetchSelectedClearDestinationStatus,
+		selectedClearDestinationRunning,
 		setShowDeleteJobModal,
 		setSelectedJobId,
 		setShowClearDestinationModal,
-		setShowStreamEditDisabledModal,
 	} = useAppStore()
 
 	useEffect(() => {
@@ -70,9 +81,9 @@ const JobSettings: React.FC = () => {
 		}
 	}, [job])
 
-	const isClearDestinationRunning =
-		job?.last_run_type === JobType.ClearDestination &&
-		job?.last_run_state.toLowerCase() === "running"
+	useEffect(() => {
+		fetchSelectedClearDestinationStatus()
+	}, [selectedJobId])
 
 	const getParsedDate = (value: Date) => value.toUTCString()
 
@@ -219,12 +230,6 @@ const JobSettings: React.FC = () => {
 		setShowClearDestinationModal(true)
 	}
 
-	useEffect(() => {
-		if (isClearDestinationRunning) {
-			setShowStreamEditDisabledModal(true)
-		}
-	}, [isClearDestinationRunning])
-
 	// Helper to determine if time selection should be shown
 	const isTimeSelectionFrequency = (freq: string): boolean => {
 		return freq === "days" || freq === "weeks"
@@ -282,6 +287,17 @@ const JobSettings: React.FC = () => {
 		}
 	}
 
+	if (isClearDestinationStatusLoading) {
+		return (
+			<div className="flex h-screen w-full items-center justify-center">
+				<Spin
+					size="large"
+					tip="Loading Settings..."
+				/>
+			</div>
+		)
+	}
+
 	return (
 		<>
 			<div className="flex h-screen flex-col">
@@ -467,7 +483,9 @@ const JobSettings: React.FC = () => {
 										<button
 											onClick={handleClearDestination}
 											className="rounded-md border px-4 py-1 font-light disabled:cursor-not-allowed disabled:opacity-50"
-											disabled={isClearDestinationRunning || !job?.activate}
+											disabled={
+												selectedClearDestinationRunning || !job?.activate
+											}
 										>
 											Clear Destination
 										</button>