From c6139066fc95291983f0ed17a651a796196235b4 Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 27 Dec 2024 01:09:28 +0530 Subject: [PATCH 1/5] throw error instead of replacing --- .../components/TriggerDag/TriggerDAGForm.tsx | 35 ++---------------- airflow/ui/src/queries/useTrigger.ts | 37 +++++++++++++++++-- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx index 8288849ecf1f1..6da31b3bbc009 100644 --- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx +++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx @@ -55,7 +55,6 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { formState: { isDirty }, handleSubmit, reset, - setValue, watch, } = useForm({ defaultValues: { @@ -83,19 +82,6 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { }; const onSubmit = (data: DagRunTriggerParams) => { - if (Boolean(data.dataIntervalStart) !== Boolean(data.dataIntervalEnd)) { - setErrors((prev) => ({ - ...prev, - date: { - body: { - detail: - "Either both Data Interval Start and End must be provided, or both must be empty.", - }, - }, - })); - - return; - } triggerDagRun(dagId, data); }; @@ -119,23 +105,8 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { } }; - const validateDates = ( - fieldName: "dataIntervalEnd" | "dataIntervalStart", - ) => { - const startDate = dataIntervalStart - ? new Date(dataIntervalStart) - : undefined; - const endDate = dataIntervalEnd ? new Date(dataIntervalEnd) : undefined; - + const resetDateError = () => { setErrors((prev) => ({ ...prev, date: undefined })); - - if (startDate && endDate) { - if (fieldName === "dataIntervalStart" && startDate > endDate) { - setValue("dataIntervalStart", dataIntervalEnd); - } else if (fieldName === "dataIntervalEnd" && endDate < startDate) { - setValue("dataIntervalEnd", dataIntervalStart); - } - } }; const { colorMode } = useColorMode(); @@ -160,7 +131,7 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { validateDates("dataIntervalStart")} + onBlur={resetDateError} placeholder="yyyy-mm-ddThh:mm" size="sm" type="datetime-local" @@ -180,7 +151,7 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { validateDates("dataIntervalEnd")} + onBlur={resetDateError} placeholder="yyyy-mm-ddThh:mm" size="sm" type="datetime-local" diff --git a/airflow/ui/src/queries/useTrigger.ts b/airflow/ui/src/queries/useTrigger.ts index b454d0176a78f..1371662d2b5cc 100644 --- a/airflow/ui/src/queries/useTrigger.ts +++ b/airflow/ui/src/queries/useTrigger.ts @@ -71,13 +71,42 @@ export const useTrigger = (onClose: () => void) => { unknown >; - const formattedDataIntervalStart = dagRunRequestBody.dataIntervalStart - ? new Date(dagRunRequestBody.dataIntervalStart).toISOString() + const DataIntervalStart = dagRunRequestBody.dataIntervalStart + ? new Date(dagRunRequestBody.dataIntervalStart) : undefined; - const formattedDataIntervalEnd = dagRunRequestBody.dataIntervalEnd - ? new Date(dagRunRequestBody.dataIntervalEnd).toISOString() + const DataIntervalEnd = dagRunRequestBody.dataIntervalEnd + ? new Date(dagRunRequestBody.dataIntervalEnd) : undefined; + if (Boolean(DataIntervalStart) !== Boolean(DataIntervalEnd)) { + setError({ + body: { + detail: + "Either both Data Interval Start Date and End Date must be provided, or both must be empty.", + }, + }); + + return; + } + + if (DataIntervalStart && DataIntervalEnd) { + if (DataIntervalStart > DataIntervalEnd) { + setError({ + body: { + detail: + "Data Interval Start Date must be less than or equal to Data Interval End Date.", + }, + }); + + return; + } + } + + const formattedDataIntervalStart = + DataIntervalStart?.toISOString() ?? undefined; + const formattedDataIntervalEnd = + DataIntervalEnd?.toISOString() ?? undefined; + const checkDagRunId = dagRunRequestBody.dagRunId === "" ? undefined From 4ea0015022076f0c4c5e0037ccbf5d33bab0b486 Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 27 Dec 2024 02:06:48 +0530 Subject: [PATCH 2/5] manage error --- .../ui/src/components/TriggerDag/TriggerDAGForm.tsx | 13 ++++++++++++- airflow/ui/src/queries/useTrigger.ts | 9 ++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx index 6da31b3bbc009..3e991faffcab9 100644 --- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx +++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx @@ -48,7 +48,12 @@ export type DagRunTriggerParams = { const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { const [errors, setErrors] = useState<{ conf?: string; date?: unknown }>({}); const conf = useDagParams(dagId, open); - const { error: errorTrigger, isPending, triggerDagRun } = useTrigger(onClose); + const { + dateValidationError, + error: errorTrigger, + isPending, + triggerDagRun, + } = useTrigger(onClose); const { control, @@ -73,6 +78,12 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { } }, [conf, reset]); + useEffect(() => { + if (Boolean(dateValidationError)) { + setErrors((prev) => ({ ...prev, date: dateValidationError })); + } + }, [dateValidationError]); + const dataIntervalStart = watch("dataIntervalStart"); const dataIntervalEnd = watch("dataIntervalEnd"); diff --git a/airflow/ui/src/queries/useTrigger.ts b/airflow/ui/src/queries/useTrigger.ts index 1371662d2b5cc..2318ef4073c55 100644 --- a/airflow/ui/src/queries/useTrigger.ts +++ b/airflow/ui/src/queries/useTrigger.ts @@ -32,6 +32,9 @@ export const useTrigger = (onClose: () => void) => { const queryClient = useQueryClient(); const [error, setError] = useState(undefined); + const [dateValidationError, setDateValidationError] = + useState(undefined); + const onSuccess = async () => { const queryKeys = [ useDagServiceGetDagsKey, @@ -79,7 +82,7 @@ export const useTrigger = (onClose: () => void) => { : undefined; if (Boolean(DataIntervalStart) !== Boolean(DataIntervalEnd)) { - setError({ + setDateValidationError({ body: { detail: "Either both Data Interval Start Date and End Date must be provided, or both must be empty.", @@ -91,7 +94,7 @@ export const useTrigger = (onClose: () => void) => { if (DataIntervalStart && DataIntervalEnd) { if (DataIntervalStart > DataIntervalEnd) { - setError({ + setDateValidationError({ body: { detail: "Data Interval Start Date must be less than or equal to Data Interval End Date.", @@ -126,5 +129,5 @@ export const useTrigger = (onClose: () => void) => { }); }; - return { error, isPending, triggerDagRun }; + return { dateValidationError, error, isPending, triggerDagRun }; }; From 1bbec345aba8abdbb37a95c45a5c3f6242b105c8 Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 27 Dec 2024 02:38:49 +0530 Subject: [PATCH 3/5] reset --- airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx index 3e991faffcab9..8a719d1e70593 100644 --- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx +++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx @@ -89,7 +89,13 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { const handleReset = () => { setErrors({ conf: undefined, date: undefined }); - reset(); + reset({ + conf, + dagRunId: "", + dataIntervalEnd: "", + dataIntervalStart: "", + note: "", + }); }; const onSubmit = (data: DagRunTriggerParams) => { From 973fb113f9edbb7d1b3d1cd4d7cdd80626b61123 Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 27 Dec 2024 03:30:59 +0530 Subject: [PATCH 4/5] handle close --- airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx | 2 +- airflow/ui/src/queries/useTrigger.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx index 8a719d1e70593..19f1aedbd0125 100644 --- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx +++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx @@ -53,7 +53,7 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => { error: errorTrigger, isPending, triggerDagRun, - } = useTrigger(onClose); + } = useTrigger({ onSuccessConfirm: onClose }); const { control, diff --git a/airflow/ui/src/queries/useTrigger.ts b/airflow/ui/src/queries/useTrigger.ts index 2318ef4073c55..e5471664d19e0 100644 --- a/airflow/ui/src/queries/useTrigger.ts +++ b/airflow/ui/src/queries/useTrigger.ts @@ -28,7 +28,11 @@ import { import type { DagRunTriggerParams } from "src/components/TriggerDag/TriggerDAGForm"; import { toaster } from "src/components/ui"; -export const useTrigger = (onClose: () => void) => { +export const useTrigger = ({ + onSuccessConfirm, +}: { + onSuccessConfirm: () => void; +}) => { const queryClient = useQueryClient(); const [error, setError] = useState(undefined); @@ -52,7 +56,7 @@ export const useTrigger = (onClose: () => void) => { title: "DAG Run Request Submitted", type: "success", }); - onClose(); + onSuccessConfirm(); }); }; From 14350632eba8a28a17f239c955b1f95577c8a08a Mon Sep 17 00:00:00 2001 From: Shubham Date: Fri, 27 Dec 2024 03:38:06 +0530 Subject: [PATCH 5/5] remove then --- airflow/ui/src/queries/useTrigger.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/airflow/ui/src/queries/useTrigger.ts b/airflow/ui/src/queries/useTrigger.ts index e5471664d19e0..d70efc8aeffb2 100644 --- a/airflow/ui/src/queries/useTrigger.ts +++ b/airflow/ui/src/queries/useTrigger.ts @@ -50,14 +50,13 @@ export const useTrigger = ({ queryKeys.map((key) => queryClient.invalidateQueries({ queryKey: [key] }), ), - ).then(() => { - toaster.create({ - description: "DAG run has been successfully triggered.", - title: "DAG Run Request Submitted", - type: "success", - }); - onSuccessConfirm(); + ); + toaster.create({ + description: "DAG run has been successfully triggered.", + title: "DAG Run Request Submitted", + type: "success", }); + onSuccessConfirm(); }; const onError = (_error: unknown) => {