diff --git a/airflow-core/newsfragments/67852.bugfix.rst b/airflow-core/newsfragments/67852.bugfix.rst new file mode 100644 index 0000000000000..7f8d51498b323 --- /dev/null +++ b/airflow-core/newsfragments/67852.bugfix.rst @@ -0,0 +1 @@ +Boolean params in the Trigger Dag form now right-align their toggle within the control column, instead of the toggle sitting immediately after the label. This matches the label-left/control-right layout of the other params in the form. diff --git a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.test.tsx b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.test.tsx new file mode 100644 index 0000000000000..07591de4dc930 --- /dev/null +++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.test.tsx @@ -0,0 +1,57 @@ +/*! + * 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 } from "@testing-library/react"; +import { describe, it, expect, vi } from "vitest"; + +import { Wrapper } from "src/utils/Wrapper"; + +import { FieldBool } from "./FieldBool"; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const mockParamsDict: Record = {}; + +vi.mock("src/queries/useParamStore", () => ({ + paramPlaceholder: { + schema: {}, + value: null, + }, + useParamStore: () => ({ + disabled: false, + paramsDict: mockParamsDict, + setParamsDict: vi.fn(), + }), +})); + +describe("FieldBool (issue #67852)", () => { + it("right-aligns the toggle within its control column", () => { + mockParamsDict.run_tests = { + schema: { title: "A rather long boolean parameter label", type: "boolean" }, + value: true, + }; + + render(, { wrapper: Wrapper }); + + const switchRoot = document.querySelector('[data-scope="switch"][data-part="root"]'); + + expect(switchRoot).not.toBeNull(); + const style = getComputedStyle(switchRoot as Element); + + expect(style.justifyContent).toBe("flex-end"); + }); +}); diff --git a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.tsx b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.tsx index 39921fa80f2ef..b17ab9b77c134 100644 --- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.tsx +++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.tsx @@ -37,8 +37,10 @@ export const FieldBool = ({ name, namespace = "default" }: FlexibleFormElementPr checked={Boolean(param.value)} disabled={disabled} id={`element_${name}`} + justifyContent="flex-end" name={`element_${name}`} onCheckedChange={(event) => onCheck(event.checked)} + width="full" /> ); };