Skip to content

Commit df38229

Browse files
jscheffljscheffl
authored
Make notes in UI visible directly in header (#51764)
1 parent ce04f99 commit df38229

File tree

4 files changed

+108
-53
lines changed

4 files changed

+108
-53
lines changed

‎airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import { Box, VStack, Editable, Text } from "@chakra-ui/react";
20+
import type { ChangeEvent } from "react";
21+
22+
import ReactMarkdown from "./ReactMarkdown";
23+
24+
const EditableMarkdownArea = ({
25+
mdContent,
26+
onBlur,
27+
placeholder,
28+
setMdContent,
29+
}: {
30+
readonly mdContent?: string | null;
31+
readonly onBlur?: () => void;
32+
readonly placeholder?: string | null;
33+
readonly setMdContent: (value: string) => void;
34+
}) => (
35+
<Box mt={4} px={4} width="100%">
36+
<Editable.Root
37+
onBlur={onBlur}
38+
onChange={(event: ChangeEvent<HTMLInputElement>) => setMdContent(event.target.value)}
39+
value={mdContent ?? ""}
40+
>
41+
<Editable.Preview
42+
_hover={{ backgroundColor: "transparent" }}
43+
alignItems="flex-start"
44+
as={VStack}
45+
gap="0"
46+
overflowY="auto"
47+
width="100%"
48+
>
49+
{Boolean(mdContent) ? (
50+
<ReactMarkdown>{mdContent}</ReactMarkdown>
51+
) : (
52+
<Text color="fg.subtle">{placeholder}</Text>
53+
)}
54+
</Editable.Preview>
55+
<Editable.Textarea
56+
data-testid="markdown-input"
57+
height="200px"
58+
overflowY="auto"
59+
placeholder={placeholder ?? ""}
60+
resize="none"
61+
/>
62+
</Editable.Root>
63+
</Box>
64+
);
65+
66+
export default EditableMarkdownArea;

‎airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
import { Box, Heading, VStack, Editable, Text, Flex } from "@chakra-ui/react";
20-
import { type ChangeEvent, type ReactElement, useState } from "react";
19+
import { Box, Heading, VStack, Flex } from "@chakra-ui/react";
20+
import { type ReactElement, useState } from "react";
2121
import { useTranslation } from "react-i18next";
2222

2323
import { Button, Dialog } from "src/components/ui";
2424

25-
import ReactMarkdown from "./ReactMarkdown";
25+
import EditableMarkdownArea from "./EditableMarkdownArea";
2626
import ActionButton from "./ui/ActionButton";
2727

2828
const EditableMarkdownButton = ({
@@ -71,34 +71,11 @@ const EditableMarkdownButton = ({
7171
<Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
7272
</Dialog.Header>
7373
<Dialog.Body alignItems="flex-start" as={VStack} gap="0">
74-
<Editable.Root
75-
onChange={(event: ChangeEvent<HTMLInputElement>) => setMdContent(event.target.value)}
76-
value={mdContent ?? ""}
77-
>
78-
<Editable.Preview
79-
_hover={{ backgroundColor: "transparent" }}
80-
alignItems="flex-start"
81-
as={VStack}
82-
gap="0"
83-
height="200px"
84-
overflowY="auto"
85-
width="100%"
86-
>
87-
{Boolean(mdContent) ? (
88-
<ReactMarkdown>{mdContent}</ReactMarkdown>
89-
) : (
90-
<Text color="fg.subtle">{placeholder}</Text>
91-
)}
92-
</Editable.Preview>
93-
<Editable.Textarea
94-
data-testid="markdown-input"
95-
height="200px"
96-
overflowY="auto"
97-
placeholder={placeholder}
98-
resize="none"
99-
/>
100-
</Editable.Root>
101-
74+
<EditableMarkdownArea
75+
mdContent={mdContent}
76+
placeholder={placeholder}
77+
setMdContent={setMdContent}
78+
/>
10279
<Flex justifyContent="end" mt={3} width="100%">
10380
<Button
10481
colorPalette="blue"

‎airflow-core/src/airflow/ui/src/pages/Run/Header.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { FiBarChart, FiMessageSquare } from "react-icons/fi";
2424
import type { DAGRunResponse } from "openapi/requests/types.gen";
2525
import { ClearRunButton } from "src/components/Clear";
2626
import { DagVersion } from "src/components/DagVersion";
27+
import EditableMarkdownArea from "src/components/EditableMarkdownArea";
2728
import EditableMarkdownButton from "src/components/EditableMarkdownButton";
2829
import { HeaderCard } from "src/components/HeaderCard";
2930
import { LimitedItemsList } from "src/components/LimitedItemsList";
@@ -68,17 +69,19 @@ export const Header = ({
6869
<HeaderCard
6970
actions={
7071
<>
71-
<EditableMarkdownButton
72-
header={translate("note.dagRun")}
73-
icon={<FiMessageSquare />}
74-
isPending={isPending}
75-
mdContent={note}
76-
onConfirm={onConfirm}
77-
placeholder={translate("note.placeholder")}
78-
setMdContent={setNote}
79-
text={Boolean(dagRun.note) ? translate("note.label") : translate("note.add")}
80-
withText={containerWidth > 700}
81-
/>
72+
{!Boolean(dagRun.note) && (
73+
<EditableMarkdownButton
74+
header={translate("note.dagRun")}
75+
icon={<FiMessageSquare />}
76+
isPending={isPending}
77+
mdContent={note}
78+
onConfirm={onConfirm}
79+
placeholder={translate("note.placeholder")}
80+
setMdContent={setNote}
81+
text={translate("note.add")}
82+
withText={containerWidth > 700}
83+
/>
84+
)}
8285
<ClearRunButton dagRun={dagRun} isHotkeyEnabled withText={containerWidth > 700} />
8386
<MarkRunAsButton dagRun={dagRun} isHotkeyEnabled withText={containerWidth > 700} />
8487
</>
@@ -121,6 +124,9 @@ export const Header = ({
121124
]}
122125
title={<Time datetime={dagRun.run_after} />}
123126
/>
127+
{Boolean(dagRun.note) && (
128+
<EditableMarkdownArea mdContent={note} onBlur={onConfirm} setMdContent={setNote} />
129+
)}
124130
</Box>
125131
);
126132
};

‎airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { MdOutlineTask } from "react-icons/md";
2525
import type { TaskInstanceResponse } from "openapi/requests/types.gen";
2626
import { ClearTaskInstanceButton } from "src/components/Clear";
2727
import { DagVersion } from "src/components/DagVersion";
28+
import EditableMarkdownArea from "src/components/EditableMarkdownArea";
2829
import EditableMarkdownButton from "src/components/EditableMarkdownButton";
2930
import { HeaderCard } from "src/components/HeaderCard";
3031
import { MarkTaskInstanceAsButton } from "src/components/MarkAs";
@@ -93,17 +94,19 @@ export const Header = ({
9394
<HeaderCard
9495
actions={
9596
<>
96-
<EditableMarkdownButton
97-
header={translate("note.taskInstance")}
98-
icon={<FiMessageSquare />}
99-
isPending={isPending}
100-
mdContent={note}
101-
onConfirm={onConfirm}
102-
placeholder={translate("note.placeholder")}
103-
setMdContent={setNote}
104-
text={Boolean(taskInstance.note) ? translate("note.label") : translate("note.add")}
105-
withText={containerWidth > 700}
106-
/>
97+
{!Boolean(taskInstance.note) && (
98+
<EditableMarkdownButton
99+
header={translate("note.taskInstance")}
100+
icon={<FiMessageSquare />}
101+
isPending={isPending}
102+
mdContent={note}
103+
onConfirm={onConfirm}
104+
placeholder={translate("note.placeholder")}
105+
setMdContent={setNote}
106+
text={translate("note.add")}
107+
withText={containerWidth > 700}
108+
/>
109+
)}
107110
<ClearTaskInstanceButton
108111
isHotkeyEnabled
109112
taskInstance={taskInstance}
@@ -123,6 +126,9 @@ export const Header = ({
123126
subTitle={<Time datetime={taskInstance.start_date} />}
124127
title={`${taskInstance.task_display_name}${taskInstance.map_index > -1 ? ` [${taskInstance.rendered_map_index ?? taskInstance.map_index}]` : ""}`}
125128
/>
129+
{Boolean(taskInstance.note) && (
130+
<EditableMarkdownArea mdContent={note} onBlur={onConfirm} setMdContent={setNote} />
131+
)}
126132
</Box>
127133
);
128134
};

0 commit comments

Comments
 (0)