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 ff1bd23a19897..4fea751e59960 100644 --- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx +++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Icon, Stack, StackSeparator, Text } from "@chakra-ui/react"; +import { Icon, Stack, StackSeparator, Text } from "@chakra-ui/react"; import { useCallback, useEffect, useState } from "react"; import { MdError } from "react-icons/md"; @@ -39,7 +39,7 @@ export const FlexibleForm = ({ initialParamsDict, setError, }: FlexibleFormProps) => { - const { paramsDict: params, setinitialParamDict, setParamsDict } = useParamStore(); + const { paramsDict: params, setInitialParamDict, setParamsDict } = useParamStore(); const processedSections = new Map(); const [sectionError, setSectionError] = useState>(new Map()); @@ -62,17 +62,17 @@ export const FlexibleForm = ({ const paramsCopy = structuredClone(initialParamsDict.paramsDict); setParamsDict(paramsCopy); - setinitialParamDict(initialParamsDict.paramsDict); + setInitialParamDict(initialParamsDict.paramsDict); } - }, [initialParamsDict, params, setParamsDict, setinitialParamDict]); + }, [initialParamsDict, params, setParamsDict, setInitialParamDict]); useEffect( () => () => { // Clear paramsDict and initialParamDict when the component is unmounted or modal closes setParamsDict({}); - setinitialParamDict({}); + setInitialParamDict({}); }, - [setParamsDict, setinitialParamDict], + [setParamsDict, setInitialParamDict], ); useEffect(() => { @@ -103,17 +103,29 @@ export const FlexibleForm = ({ processedSections.set(currentSection, true); return ( - + :nth-child(2)": { + overflow: "visible", + }, + }} + key={currentSection} + value={currentSection} + > - {currentSection} + + {currentSection} + {sectionError.get(currentSection) ? ( - + ) : undefined} - - + + + }> {Object.entries(params) .filter( @@ -125,7 +137,7 @@ export const FlexibleForm = ({ ))} - + ); diff --git a/airflow-core/src/airflow/ui/src/queries/useParamStore.ts b/airflow-core/src/airflow/ui/src/queries/useParamStore.ts index a68cba2d59459..749bf2b34f4cf 100644 --- a/airflow-core/src/airflow/ui/src/queries/useParamStore.ts +++ b/airflow-core/src/airflow/ui/src/queries/useParamStore.ts @@ -47,7 +47,7 @@ type FormStore = { initialParamDict: ParamsSpec; paramsDict: ParamsSpec; setConf: (confString: string) => void; - setinitialParamDict: (newParamsDict: ParamsSpec) => void; + setInitialParamDict: (newParamsDict: ParamsSpec) => void; setParamsDict: (newParamsDict: ParamsSpec) => void; }; @@ -83,7 +83,7 @@ export const useParamStore = create((set) => ({ return { conf: confString, paramsDict: updatedParamsDict }; }), - setinitialParamDict: (newParamsDict: ParamsSpec) => set(() => ({ initialParamDict: newParamsDict })), + setInitialParamDict: (newParamsDict: ParamsSpec) => set(() => ({ initialParamDict: newParamsDict })), setParamsDict: (newParamsDict: ParamsSpec) => set((state) => {