(airflow) branch main updated: Remove minimum height on elements in Flexible Form (#46591)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new f4165fe5ccd Remove minimum height on elements in Flexible Form (#46591)
f4165fe5ccd is described below

commit f4165fe5ccd4cad26a8404492ac3f8100f5e1892
Author: Jens Scheffler <95105677+jsche...@users.noreply.github.com>
AuthorDate: Wed Feb 12 11:18:31 2025 +0100

    Remove minimum height on elements in Flexible Form (#46591)
    
    * Remove minimum height on elements in Flexible Form
    
    * Fix helper description consistency in display
---
 airflow/ui/src/components/FlexibleForm/FieldRow.tsx   | 18 +++++++++++-------
 airflow/ui/src/components/TriggerDag/useParamStore.ts |  6 ++++--
 airflow/ui/src/queries/useDagParams.ts                |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/airflow/ui/src/components/FlexibleForm/FieldRow.tsx 
b/airflow/ui/src/components/FlexibleForm/FieldRow.tsx
index eb4de973a3a..0c1e979aa88 100644
--- a/airflow/ui/src/components/FlexibleForm/FieldRow.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FieldRow.tsx
@@ -40,17 +40,21 @@ export const FieldRow = ({ name }: 
FlexibleFormElementProps) => {
   return (
     <Field.Root orientation="horizontal" required={isRequired(param)}>
       <Stack>
-        <Field.Label fontSize="md">
+        <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
           {param.schema.title ?? name} <Field.RequiredIndicator />
         </Field.Label>
       </Stack>
-      <Stack css={{ "flex-basis": "70%" }}>
+      <Stack css={{ flexBasis: "70%" }}>
         <FieldSelector name={name} />
-        <Field.HelperText>
-          {param.description ?? (
-            <Markdown 
remarkPlugins={[remarkGfm]}>{param.schema.description_md}</Markdown>
-          )}
-        </Field.HelperText>
+        {param.description === null ? (
+          param.schema.description_md === undefined ? undefined : (
+            <Field.HelperText>
+              <Markdown 
remarkPlugins={[remarkGfm]}>{param.schema.description_md}</Markdown>
+            </Field.HelperText>
+          )
+        ) : (
+          <Field.HelperText>{param.description}</Field.HelperText>
+        )}
       </Stack>
     </Field.Root>
   );
diff --git a/airflow/ui/src/components/TriggerDag/useParamStore.ts 
b/airflow/ui/src/components/TriggerDag/useParamStore.ts
index 6e6caf5ce41..6b5e006b2d7 100644
--- a/airflow/ui/src/components/TriggerDag/useParamStore.ts
+++ b/airflow/ui/src/components/TriggerDag/useParamStore.ts
@@ -21,7 +21,8 @@ import { create } from "zustand";
 import type { DagParamsSpec, ParamSpec } from "src/queries/useDagParams";
 
 export const paramPlaceholder: ParamSpec = {
-  description: undefined,
+  // eslint-disable-next-line unicorn/no-null
+  description: null,
   schema: {
     const: undefined,
     description_md: undefined,
@@ -70,7 +71,8 @@ export const useParamStore = create<FormStore>((set) => ({
           return [
             key,
             {
-              description: existingParam?.description,
+              // eslint-disable-next-line unicorn/no-null
+              description: existingParam?.description ?? null,
               schema: existingParam?.schema ?? paramPlaceholder.schema,
               value: value as unknown,
             },
diff --git a/airflow/ui/src/queries/useDagParams.ts 
b/airflow/ui/src/queries/useDagParams.ts
index 91b221cad76..da9ba18685b 100644
--- a/airflow/ui/src/queries/useDagParams.ts
+++ b/airflow/ui/src/queries/useDagParams.ts
@@ -22,7 +22,7 @@ import { toaster } from "src/components/ui";
 export type DagParamsSpec = Record<string, ParamSpec>;
 
 export type ParamSpec = {
-  description: string | undefined;
+  description: string | null;
   schema: ParamSchema;
   value: unknown;
 };