[v3-3-test] UI: Fix copied SQL from Rendered Templates breaking at every token (#73633) (#73640)

* [v3-3-test] UI: Fix copied SQL from Rendered Templates breaking at every token (#73633)

Combining `wrapLongLines` with `showLineNumbers` makes react-syntax-highlighter
lay each line out as a flex container, so every highlighted token becomes a
block-level box and the browser emits a newline after each one when it
serializes a selection. Selecting a rendered SQL field and copying it therefore
produced something that no longer parsed. The copy button kept working because
it copies the raw string rather than the DOM, which is why this went unnoticed.

The prism theme also hard-codes `white-space: pre` on the code tag and the
library merges that over its own `pre-wrap`, so `wrapLongLines` has never
actually wrapped anything.

The copy button was pulled back over the code block with a fixed negative
margin, so where it landed depended on the block's height.
(cherry picked from commit ffa19c3)

Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Closes: #73537

* Apply v3-3-test UI import grouping to the RenderedTemplates test

Generated-by: Claude Opus 5

---------

Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Co-authored-by: Jarek Potiuk <jarek@potiuk.com>

Author: 3 people

airflow-core/src/airflow/ui/src/pages/TaskInstance/RenderedTemplates.test.tsx

@@ -0,0 +1,83 @@
+/*!
+ * 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 "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { useParams } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import * as queries from "openapi/queries";
+import { Wrapper } from "src/utils/Wrapper";
+
+import { RenderedTemplates } from "./RenderedTemplates";
+
+vi.mock("openapi/queries");
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+
+  return { ...actual, useParams: vi.fn() };
+});
+
+const SQL = `select
+    count(*) as total_rows,
+    nvl(count_if(m.a is null), 0) as nulls_count
+from my_table as m`;
+
+describe("RenderedTemplates", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useParams).mockReturnValue({
+      dagId: "test-dag",
+      mapIndex: "-1",
+      runId: "test-run",
+      taskId: "test-task",
+    });
+    vi.mocked(queries.useTaskInstanceServiceGetMappedTaskInstance).mockReturnValue({
+      data: { rendered_fields: { sql: SQL } },
+    } as unknown as ReturnType<typeof queries.useTaskInstanceServiceGetMappedTaskInstance>);
+  });
+
+  it("lays out highlighted lines as blocks so copied text keeps its tokens on one line", async () => {
+    const { container } = render(
+      <Wrapper>
+        <RenderedTemplates />
+      </Wrapper>,
+    );
+
+    await screen.findByText("sql");
+
+    const lines = container.querySelectorAll("code > span");
+
+    expect(lines.length).toBeGreaterThan(0);
+    lines.forEach((line) => {
+      expect(line).toHaveStyle({ display: "block" });
+    });
+  });
+
+  it("overrides the theme's white-space so long lines actually wrap", async () => {
+    const { container } = render(
+      <Wrapper>
+        <RenderedTemplates />
+      </Wrapper>,
+    );
+
+    await screen.findByText("sql");
+
+    expect(container.querySelector("code")).toHaveStyle({ whiteSpace: "pre-wrap" });
+  });
+});

airflow-core/src/airflow/ui/src/pages/TaskInstance/RenderedTemplates.tsx

@@ -61,10 +61,22 @@ const RenderedTemplatesContent = () => {
                           opacity: 1,
                         },
                       }}
+                      position="relative"
                     >
                       <Box borderRadius="md" fontSize="sm" m={0} overflowX="auto" p={2}>
                         <SyntaxHighlighter
+                          // The prism theme hard-codes `white-space: pre` on the code tag, which
+                          // silently defeats `wrapLongLines` unless we override it here.
+                          codeTagProps={{ style: { whiteSpace: "pre-wrap", wordBreak: "break-word" } }}
                           language={language}
+                          lineNumberStyle={{ minWidth: "2.5em" }}
+                          // Combining `wrapLongLines` with `showLineNumbers` makes the library lay
+                          // each line out as a flex container, so every highlighted token becomes a
+                          // block-level flex item and copied text breaks after each one. The hanging
+                          // indent keeps wrapped lines clear of the gutter (2.5em number + 1em pad).
+                          lineProps={{
+                            style: { display: "block", paddingLeft: "3.5em", textIndent: "-3.5em" },
+                          }}
                           PreTag="pre"
                           showLineNumbers
                           style={style}
@@ -75,11 +87,10 @@ const RenderedTemplatesContent = () => {
                       </Box>
                       <ClipboardRoot
                         className="copy-button"
-                        float="right"
-                        marginTop="-3.5rem"
                         opacity={0}
-                        position="sticky"
+                        position="absolute"
                         right={4}
+                        top={6}
                         transition="opacity 0.2s ease-in-out"
                         value={renderedValue}
                       >