This is an automated email from the ASF dual-hosted git repository.
jscheffl 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 1b68875d6b6 Align layout in trigger form with flexible form (#46596)
1b68875d6b6 is described below
commit 1b68875d6b6c8ae8167c97d8645ec4d0ea922c14
Author: Jens Scheffler <[email protected]>
AuthorDate: Fri Feb 14 22:20:42 2025 +0100
Align layout in trigger form with flexible form (#46596)
* Align layout in trigger form with flexible form
* Align helper text for Run ID as well
* Take out the editable markdown
* Revert extraction of JavaScript
* Fix layout inconsistency after merge with Logical Date upstream
---------
Co-authored-by: shubhamraj-git <[email protected]>
Co-authored-by: Shubham Raj
<[email protected]>
---
airflow/ui/src/components/EditableMarkdown.tsx | 54 ++++++++++++++++++++++
.../src/components/TriggerDag/TriggerDAGForm.tsx | 46 ++++++++++--------
2 files changed, 82 insertions(+), 18 deletions(-)
diff --git a/airflow/ui/src/components/EditableMarkdown.tsx
b/airflow/ui/src/components/EditableMarkdown.tsx
new file mode 100644
index 00000000000..4ced8ad9a9a
--- /dev/null
+++ b/airflow/ui/src/components/EditableMarkdown.tsx
@@ -0,0 +1,54 @@
+/*!
+ * 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 { Editable, Text, VStack } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+
+import ReactMarkdown from "./ReactMarkdown";
+
+type EditableMarkdownProps = {
+ readonly field: {
+ onChange: (value: string) => void;
+ value: string;
+ };
+ readonly placeholder: string;
+};
+
+const EditableMarkdown = ({ field, placeholder }: EditableMarkdownProps) => (
+ <Editable.Root value={field.value}>
+ <Editable.Preview
+ _hover={{ backgroundColor: "transparent" }}
+ alignItems="flex-start"
+ as={VStack}
+ width="100%"
+ >
+ {field.value ? (
+ <ReactMarkdown>{field.value}</ReactMarkdown>
+ ) : (
+ <Text color="fg.subtle">{placeholder}</Text>
+ )}
+ </Editable.Preview>
+ <Editable.Textarea
+ minHeight="150px"
+ onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
field.onChange(event.target.value)}
+ value={field.value}
+ />
+ </Editable.Root>
+);
+
+export default EditableMarkdown;
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 24bd983ebec..1899a33ffbd 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Input, Button, Box, Spacer, HStack, Field } from "@chakra-ui/react";
+import { Input, Button, Box, Spacer, HStack, Field, Stack } from
"@chakra-ui/react";
import { json } from "@codemirror/lang-json";
import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
import CodeMirror from "@uiw/react-codemirror";
@@ -28,6 +28,7 @@ import { useColorMode } from "src/context/colorMode";
import { useDagParams } from "src/queries/useDagParams";
import { useTrigger } from "src/queries/useTrigger";
+import EditableMarkdown from "../EditableMarkdown";
import { ErrorAlert } from "../ErrorAlert";
import { FlexibleForm, flexibleFormDefaultSection } from "../FlexibleForm";
import { Accordion } from "../ui";
@@ -122,15 +123,21 @@ const TriggerDAGForm = ({ dagId, onClose, open }:
TriggerDAGFormProps) => {
control={control}
name="logicalDate"
render={({ field }) => (
- <Field.Root invalid={Boolean(errors.date)}>
- <Field.Label fontSize="md">Logical Date</Field.Label>
- <Input
- {...field}
- onBlur={resetDateError}
- placeholder="yyyy-mm-ddThh:mm"
- size="sm"
- type="datetime-local"
- />
+ <Field.Root invalid={Boolean(errors.date)}
orientation="horizontal">
+ <Stack>
+ <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
+ Logical Date
+ </Field.Label>
+ </Stack>
+ <Stack css={{ flexBasis: "70%" }}>
+ <Input
+ {...field}
+ onBlur={resetDateError}
+ placeholder="yyyy-mm-ddThh:mm"
+ size="sm"
+ type="datetime-local"
+ />
+ </Stack>
</Field.Root>
)}
/>
@@ -139,13 +146,16 @@ const TriggerDAGForm = ({ dagId, onClose, open }:
TriggerDAGFormProps) => {
control={control}
name="dagRunId"
render={({ field }) => (
- <Field.Root mt={6}>
- <Field.Label fontSize="md">Run ID</Field.Label>
- <Input
- {...field}
- placeholder="Run Id, optional - will be generated if not
provided"
- size="sm"
- />
+ <Field.Root mt={6} orientation="horizontal">
+ <Stack>
+ <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
+ Run ID
+ </Field.Label>
+ </Stack>
+ <Stack css={{ flexBasis: "70%" }}>
+ <Input {...field} size="sm" />
+ <Field.HelperText>Optional - will be generated if not
provided</Field.HelperText>
+ </Stack>
</Field.Root>
)}
/>
@@ -189,7 +199,7 @@ const TriggerDAGForm = ({ dagId, onClose, open }:
TriggerDAGFormProps) => {
render={({ field }) => (
<Field.Root mt={6}>
<Field.Label fontSize="md">Dag Run Notes</Field.Label>
- <Input {...field} placeholder="Optional" size="sm" />
+ <EditableMarkdown field={field} placeholder="Click to add
note" />
</Field.Root>
)}
/>
