This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch v3-0-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 5ad8cb83b37d715cf0bf249650561f40fa5717e9 Author: Aritra Basu <[email protected]> AuthorDate: Sat May 3 03:11:36 2025 +0530 Fixes validation error and adds error indicator (#50127) * Fixes validation error and adds error indicator Fixes validation failing on first load and adds a textual indicator of error * Update error indicator to icon for trigger dag (cherry picked from commit 22af7027b69c593c5daebcf195634385e8e8d08d) --- .../src/components/FlexibleForm/FlexibleForm.tsx | 29 +++++++++++++--------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx index 6f5562747fe..ff1bd23a198 100644 --- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx +++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx @@ -16,8 +16,9 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Stack, StackSeparator } from "@chakra-ui/react"; +import { Box, Icon, Stack, StackSeparator, Text } from "@chakra-ui/react"; import { useCallback, useEffect, useState } from "react"; +import { MdError } from "react-icons/md"; import type { ParamsSpec } from "src/queries/useDagParams"; import { useParamStore } from "src/queries/useParamStore"; @@ -74,12 +75,14 @@ export const FlexibleForm = ({ [setParamsDict, setinitialParamDict], ); - useEffect( - () => () => { - recheckSection(); - }, - [params, recheckSection], - ); + useEffect(() => { + recheckSection(); + if (sectionError.size === 0) { + setError(false); + } else { + setError(true); + } + }, [params, setError, recheckSection, sectionError]); const onUpdate = (_value?: string, error?: unknown) => { recheckSection(); @@ -101,11 +104,13 @@ export const FlexibleForm = ({ return ( <Accordion.Item key={currentSection} value={currentSection}> - <Accordion.ItemTrigger - color={sectionError.get(currentSection) ? "red" : undefined} - cursor="button" - > - {currentSection} + <Accordion.ItemTrigger cursor="button"> + <Text color={sectionError.get(currentSection) ? "red" : undefined}>{currentSection}</Text> + {sectionError.get(currentSection) ? ( + <Icon color="red" margin="-1"> + <MdError /> + </Icon> + ) : undefined} </Accordion.ItemTrigger> <Accordion.ItemContent paddingTop={0}> <Box p={5}>
