From 6e63a4f17666c9d6607ec1c1d9ad037b90da8ee9 Mon Sep 17 00:00:00 2001 From: Vamsi-klu Date: Sat, 11 Jul 2026 04:46:16 +0000 Subject: [PATCH 1/2] UI: Preserve raw connection extra JSON Editing a provider connection could serialize untouched provider defaults into extra JSON, overwriting values the user entered manually. --- .../components/FlexibleForm/FlexibleForm.tsx | 35 +++- .../pages/Connections/ConnectionForm.test.tsx | 145 ++++++++++++++ .../src/pages/Connections/ConnectionForm.tsx | 6 +- .../ui/src/queries/useParamStore.test.ts | 155 +++++++++++++++ .../airflow/ui/src/queries/useParamStore.ts | 183 ++++++++++++++---- 5 files changed, 479 insertions(+), 45 deletions(-) create mode 100644 airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.test.tsx create mode 100644 airflow-core/src/airflow/ui/src/queries/useParamStore.test.ts 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 2e1e5c5568a6a..3d84c1b8276db 100644 --- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx +++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx @@ -77,6 +77,7 @@ export type FlexibleFormProps = { readonly key?: string; readonly namespace?: string; readonly noAccordion?: boolean; + readonly preserveRawConf?: boolean; readonly setError: (error: boolean) => void; readonly subHeader?: string; }; @@ -89,31 +90,55 @@ export const FlexibleForm = ({ isHITL, namespace = "default", noAccordion, + preserveRawConf = false, setError, subHeader, }: FlexibleFormProps) => { - const { paramsDict: params, setDisabled, setInitialParamDict, setParamsDict } = useParamStore(namespace); + const { + initParamsDictFromConf, + paramsDict: params, + setDisabled, + setInitialParamDict, + setMergeParamUpdatesIntoConf, + setParamsDict, + } = useParamStore(namespace); const processedSections = new Map(); const [sectionError, setSectionError] = useState>(new Map()); const [hasValidationError, setHasValidationError] = useState(false); + useEffect(() => { + setMergeParamUpdatesIntoConf(preserveRawConf); + }, [preserveRawConf, setMergeParamUpdatesIntoConf]); + useEffect(() => { // Initialize paramsDict and initialParamDict when modal opens if (Object.keys(initialParamsDict.paramsDict).length > 0 && Object.keys(params).length === 0) { const paramsCopy = structuredClone(initialParamsDict.paramsDict); - setParamsDict(paramsCopy); - setInitialParamDict(initialParamsDict.paramsDict); + if (preserveRawConf) { + initParamsDictFromConf(paramsCopy); + } else { + setParamsDict(paramsCopy); + setInitialParamDict(initialParamsDict.paramsDict); + } } - }, [initialParamsDict, params, setParamsDict, setInitialParamDict]); + }, [ + initParamsDictFromConf, + initialParamsDict, + params, + preserveRawConf, + setParamsDict, + setInitialParamDict, + ]); useEffect( () => () => { // Clear paramsDict and initialParamDict when the component is unmounted or modal closes setParamsDict({}); setInitialParamDict({}); + setMergeParamUpdatesIntoConf(false); }, - [setParamsDict, setInitialParamDict], + [setParamsDict, setInitialParamDict, setMergeParamUpdatesIntoConf], ); useEffect(() => { diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.test.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.test.tsx new file mode 100644 index 0000000000000..20571006044ca --- /dev/null +++ b/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.test.tsx @@ -0,0 +1,145 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { render, screen, waitFor } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; + +import type { ParamsSpec } from "src/queries/useDagParams"; +import { Wrapper } from "src/utils/Wrapper"; + +import ConnectionForm from "./ConnectionForm"; +import type { ConnectionBody } from "./Connections"; + +const { snowflakeExtraFields } = vi.hoisted(() => ({ + snowflakeExtraFields: { + account: { + description: null, + schema: { + const: undefined, + description_md: undefined, + enum: undefined, + examples: undefined, + format: undefined, + items: undefined, + maximum: undefined, + maxLength: undefined, + minimum: undefined, + minLength: undefined, + section: undefined, + title: "Account", + type: ["string", "null"], + values_display: undefined, + }, + value: undefined, + }, + insecure_mode: { + description: "Turns off OCSP certificate checks", + schema: { + const: undefined, + description_md: undefined, + enum: undefined, + examples: undefined, + format: undefined, + items: undefined, + maximum: undefined, + maxLength: undefined, + minimum: undefined, + minLength: undefined, + section: undefined, + title: "Insecure Mode", + type: ["boolean", "null"], + values_display: undefined, + }, + value: false, + }, + } satisfies ParamsSpec, +})); + +vi.mock("src/components/JsonEditor", () => ({ + JsonEditor: ({ + onBlur, + onChange, + value, + }: { + readonly onBlur?: () => void; + readonly onChange?: (value: string) => void; + readonly value?: string; + }) => ( +