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 1fa624d0aa1 Fix RenderedJsonField collapse behavior (#63831)
1fa624d0aa1 is described below
commit 1fa624d0aa170ae6f337241d1f21d8e8e33eec35
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Wed Mar 18 16:27:48 2026 +0100
Fix RenderedJsonField collapse behavior (#63831)
* Fix RenderedJsonField collapse behavior
* Fix renderedjson field collapase
* Keep monaco editor always
---
.../ui/src/components/RenderedJsonField.tsx | 68 ++++++++++++----------
1 file changed, 37 insertions(+), 31 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
index 5a9095172ef..66914f995de 100644
--- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
+++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
@@ -16,13 +16,16 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, type FlexProps } from "@chakra-ui/react";
+import { Flex, type FlexProps } from "@chakra-ui/react";
import Editor, { type OnMount } from "@monaco-editor/react";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
import { ClipboardRoot, ClipboardIconButton } from "src/components/ui";
import { useColorMode } from "src/context/colorMode";
+const MAX_HEIGHT = 300;
+const MIN_HEIGHT = 40;
+
type Props = {
readonly collapsed?: boolean;
readonly content: object;
@@ -33,11 +36,18 @@ const RenderedJsonField = ({ collapsed = false, content,
enableClipboard = true,
const contentFormatted = JSON.stringify(content, undefined, 2);
const { colorMode } = useColorMode();
const lineCount = contentFormatted.split("\n").length;
- const height = `${Math.min(Math.max(lineCount * 19 + 10, 40), 300)}px`;
+ const initialHeight = Math.min(Math.max(lineCount * 19 + 10, MIN_HEIGHT),
MAX_HEIGHT);
+ const [editorHeight, setEditorHeight] = useState(initialHeight);
const theme = colorMode === "dark" ? "vs-dark" : "vs-light";
const handleMount: OnMount = useCallback(
(editorInstance) => {
+ editorInstance.onDidContentSizeChange(() => {
+ const contentHeight = editorInstance.getContentHeight();
+
+ setEditorHeight(Math.min(Math.max(contentHeight, MIN_HEIGHT),
MAX_HEIGHT));
+ });
+
if (collapsed) {
void editorInstance.getAction("editor.foldAll")?.run();
}
@@ -46,34 +56,30 @@ const RenderedJsonField = ({ collapsed = false, content,
enableClipboard = true,
);
return (
- <Flex flex={1} minW={200} {...rest}>
- <Box h={height} minW={0} position="relative" w="100%">
- <Box bottom={0} left={0} position="absolute" right={0} top={0}>
- <Editor
- height={height}
- language="json"
- onMount={handleMount}
- options={{
- automaticLayout: true,
- contextmenu: false,
- folding: true,
- fontSize: 13,
- glyphMargin: false,
- lineDecorationsWidth: 0,
- lineNumbers: "off",
- minimap: { enabled: false },
- overviewRulerLanes: 0,
- readOnly: true,
- renderLineHighlight: "none",
- scrollbar: { vertical: "hidden", verticalScrollbarSize: 0 },
- scrollBeyondLastLine: false,
- wordWrap: "on",
- }}
- theme={theme}
- value={contentFormatted}
- />
- </Box>
- </Box>
+ <Flex flex={1} gap={2} minW={200} {...rest}>
+ <Editor
+ height={`${editorHeight}px`}
+ language="json"
+ onMount={handleMount}
+ options={{
+ automaticLayout: true,
+ contextmenu: false,
+ folding: true,
+ fontSize: 13,
+ glyphMargin: false,
+ lineDecorationsWidth: 0,
+ lineNumbers: "off",
+ minimap: { enabled: false },
+ overviewRulerLanes: 0,
+ readOnly: true,
+ renderLineHighlight: "none",
+ scrollbar: { vertical: "hidden", verticalScrollbarSize: 0 },
+ scrollBeyondLastLine: false,
+ wordWrap: "on",
+ }}
+ theme={theme}
+ value={contentFormatted}
+ />
{enableClipboard ? (
<ClipboardRoot value={contentFormatted}>
<ClipboardIconButton h={7} minW={7} />
