Attempt to add ReactJSON view to rendered templates

airflow/www/static/js/api/useGridData.test.ts

@@ -34,7 +34,6 @@ const commonDagRunParams = {
   lastSchedulingDecision: null,
   externalTrigger: false,
   conf: null,
-  confIsJson: false,
   note: "",
 };
 

airflow/www/static/js/components/RenderedJsonField.tsx

@@ -0,0 +1,70 @@
+/*!
+ * 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 React from "react";
+
+import ReactJson from "react-json-view";
+
+import { Flex, Button, Code, Spacer, useClipboard } from "@chakra-ui/react";
+
+interface Props {
+  content: string;
+}
+
+const JsonParse = (content: string) => {
+  let contentJson = null;
+  let contentFormatted = "";
+  let isJson = false;
+  try {
+    contentJson = JSON.parse(content);
+    contentFormatted = JSON.stringify(contentJson, null, 4);
+    isJson = true;
+  } catch (e) {
+    // skip
+  }
+  return [isJson, contentJson, contentFormatted];
+};
+
+const RenderedJsonField = ({ content }: Props) => {
+  const [isJson, contentJson, contentFormatted] = JsonParse(content);
+  const { onCopy, hasCopied } = useClipboard(contentFormatted);
+
+  return isJson ? (
+    <Flex>
+      <ReactJson
+        src={contentJson}
+        name={false}
+        theme="rjv-default"
+        iconStyle="triangle"
+        indentWidth={2}
+        displayDataTypes={false}
+        enableClipboard={false}
+        style={{ backgroundColor: "inherit" }}
+      />
+      <Spacer />
+      <Button aria-label="Copy" onClick={onCopy}>
+        {hasCopied ? "Copied!" : "Copy"}
+      </Button>
+    </Flex>
+  ) : (
+    <Code fontSize="md">{content}</Code>
+  );
+};
+
+export default RenderedJsonField;

airflow/www/static/js/dag/details/dagRun/Details.tsx

@@ -16,47 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect } from "react";
-import {
-  Flex,
-  Box,
-  Button,
-  Spacer,
-  Table,
-  Tbody,
-  Tr,
-  Td,
-  useClipboard,
-  Text,
-} from "@chakra-ui/react";
-
-import ReactJson from "react-json-view";
+import React from "react";
+import { Flex, Box, Table, Tbody, Tr, Td, Text } from "@chakra-ui/react";
 
 import type { DagRun as DagRunType } from "src/types";
 import { SimpleStatus } from "src/dag/StatusBox";
 import { ClipboardText } from "src/components/Clipboard";
 import { formatDuration, getDuration } from "src/datetime_utils";
 import Time from "src/components/Time";
 import RunTypeIcon from "src/components/RunTypeIcon";
+import RenderedJsonField from "src/components/RenderedJsonField";
 
 interface Props {
   run: DagRunType;
 }
 
-const formatConf = (conf: string | null | undefined): string => {
-  if (!conf) {
-    return "";
-  }
-  return JSON.stringify(JSON.parse(conf), null, 4);
-};
-
 const DagRunDetails = ({ run }: Props) => {
-  const { onCopy, setValue, hasCopied } = useClipboard(formatConf(run?.conf));
-
-  useEffect(() => {
-    setValue(formatConf(run?.conf));
-  }, [run, setValue]);
-
   if (!run) return null;
   const {
     state,
@@ -69,7 +44,6 @@ const DagRunDetails = ({ run }: Props) => {
     queuedAt,
     externalTrigger,
     conf,
-    confIsJson,
   } = run;
 
   return (
@@ -161,28 +135,9 @@ const DagRunDetails = ({ run }: Props) => {
           </Tr>
           <Tr>
             <Td>Run config</Td>
-            {confIsJson ? (
-              <Td>
-                <Flex>
-                  <ReactJson
-                    src={JSON.parse(conf ?? "")}
-                    name={false}
-                    theme="rjv-default"
-                    iconStyle="triangle"
-                    indentWidth={2}
-                    displayDataTypes={false}
-                    enableClipboard={false}
-                    style={{ backgroundColor: "inherit" }}
-                  />
-                  <Spacer />
-                  <Button aria-label="Copy" onClick={onCopy}>
-                    {hasCopied ? "Copied!" : "Copy"}
-                  </Button>
-                </Flex>
-              </Td>
-            ) : (
-              <Td>{conf ?? "None"}</Td>
-            )}
+            <Td>
+              <RenderedJsonField content={conf ?? "None"} />
+            </Td>
           </Tr>
         </Tbody>
       </Table>

airflow/www/static/js/dag/details/taskInstance/Details.tsx

@@ -33,6 +33,7 @@ import type {
   TaskInstance as GridTaskInstance,
   TaskState,
 } from "src/types";
+import RenderedJsonField from "src/components/RenderedJsonField";
 import TrySelector from "./TrySelector";
 
 interface Props {
@@ -319,7 +320,7 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
           <Text as="strong" mb={3}>
             Rendered Templates
           </Text>
-          <Table>
+          <Table variant="striped">
             <Tbody>
               {Object.keys(instance.renderedFields).map((key) => {
                 const renderedFields = instance.renderedFields as Record<
@@ -339,7 +340,7 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
                     <Tr key={key}>
                       <Td>{key}</Td>
                       <Td>
-                        <Code fontSize="md">{field as string}</Code>
+                        <RenderedJsonField content={field as string} />
                       </Td>
                     </Tr>
                   );

airflow/www/static/js/dag/grid/dagRuns/index.test.tsx

@@ -43,7 +43,6 @@ const generateRuns = (length: number): DagRun[] =>
     executionDate: datestring,
     externalTrigger: false,
     conf: null,
-    confIsJson: false,
     note: "someRandomValue",
   }));
 
@@ -64,7 +63,6 @@ describe("Test DagRuns", () => {
         lastSchedulingDecision: datestring,
         externalTrigger: false,
         conf: null,
-        confIsJson: false,
         note: "someRandomValue",
       },
       {
@@ -80,7 +78,6 @@ describe("Test DagRuns", () => {
         lastSchedulingDecision: datestring,
         externalTrigger: false,
         conf: null,
-        confIsJson: false,
         note: "someRandomValue",
       },
     ];

airflow/www/static/js/dag/grid/index.test.tsx

@@ -153,7 +153,6 @@ const mockGridData = {
       note: "myCoolDagRun",
       externalTrigger: false,
       conf: null,
-      confIsJson: false,
     },
   ],
   ordering: ["dataIntervalStart"],

airflow/www/static/js/types/index.ts

@@ -65,7 +65,6 @@ interface DagRun {
   lastSchedulingDecision: string | null;
   externalTrigger: boolean;
   conf: string | null;
-  confIsJson: boolean;
   note: string | null;
 }
 

airflow/www/static/js/utils/index.test.ts

@@ -139,7 +139,6 @@ describe("Test getDagRunLabel", () => {
     lastSchedulingDecision: "2021-11-08T21:14:19.704433+00:00",
     externalTrigger: false,
     conf: null,
-    confIsJson: false,
     note: "someRandomValue",
   } as DagRun;