From 4ed4f027ea30f3dada65dca150236d588f308060 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 24 Oct 2024 02:45:00 +0530
Subject: [PATCH 01/39] Initial draft

---
 .../ui/src/components/DataTable/TriggerDAG.ts |  30 ++++
 .../components/DataTable/TriggerDAGForm.tsx   | 170 ++++++++++++++++++
 .../components/DataTable/TriggerDAGModal.tsx  | 107 +++++++++++
 airflow/ui/src/pages/DagsList/DagCard.tsx     |   5 +
 airflow/ui/src/pages/DagsList/DagsList.tsx    |  12 ++
 5 files changed, 324 insertions(+)
 create mode 100644 airflow/ui/src/components/DataTable/TriggerDAG.ts
 create mode 100644 airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
 create mode 100644 airflow/ui/src/components/DataTable/TriggerDAGModal.tsx

diff --git a/airflow/ui/src/components/DataTable/TriggerDAG.ts b/airflow/ui/src/components/DataTable/TriggerDAG.ts
new file mode 100644
index 0000000000000..1147ededb6438
--- /dev/null
+++ b/airflow/ui/src/components/DataTable/TriggerDAG.ts
@@ -0,0 +1,30 @@
+/*!
+ * 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.
+ */
+
+type DagParams = {
+  configJson: string;
+  dagId: string;
+  logicalDate: string;
+  runId?: string;
+};
+
+export const TriggerDAG = (dagParams: DagParams) => {
+  // TODO triggering logic
+  console.log("Triggering DAG with parameters:", dagParams);
+};
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
new file mode 100644
index 0000000000000..e9b7f3573132e
--- /dev/null
+++ b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
@@ -0,0 +1,170 @@
+/*!
+ * 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 {
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+  VStack,
+  ModalCloseButton,
+  Button,
+  ModalFooter,
+  Checkbox,
+  Box,
+  Text,
+  Spacer,
+  HStack,
+} from "@chakra-ui/react";
+import React, { useState, useEffect } from "react";
+
+type DagParams = {
+  configJson: string;
+  dagId: string;
+  logicalDate: string;
+  runId?: string;
+};
+
+type TriggerDAGFormProps = {
+  dagParams: DagParams;
+  onClose: () => void;
+  onTrigger: () => void;
+  setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
+};
+
+const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
+  dagParams,
+  onClose,
+  onTrigger,
+  setDagParams,
+}) => {
+  const [validateJson, setValidateJson] = useState(false); // State to track checkbox
+
+  // Format the JSON in a pretty way whenever the configJson changes
+  useEffect(() => {
+    if (validateJson && dagParams.configJson) {
+      try {
+        const prettyJson = JSON.stringify(
+          JSON.parse(dagParams.configJson),
+          null,
+          2,
+        ); // Pretty JSON formatting
+
+        setDagParams((prev) => ({ ...prev, configJson: prettyJson }));
+      } catch {
+        // Do nothing if it's invalid; handle validation separately
+      }
+    }
+  }, [dagParams.configJson, validateJson, setDagParams]);
+
+  const handleChange = (
+    ele: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = ele.target;
+
+    setDagParams((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleCheckboxChange = (ele: React.ChangeEvent<HTMLInputElement>) => {
+    setValidateJson(ele.target.checked);
+  };
+
+  const isValidJson = () => {
+    try {
+      JSON.parse(dagParams.configJson);
+
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  return (
+    <>
+      <ModalCloseButton />
+
+      <VStack align="stretch" p={4} spacing={4}>
+        <FormControl isRequired>
+          <FormLabel>Logical date</FormLabel>
+          <Input
+            boxShadow="md" // Shadow effect on input
+            name="logicalDate"
+            onChange={handleChange}
+            placeholder="mm / dd / yyyy"
+            type="date"
+            value={dagParams.logicalDate}
+          />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel>Run ID (Optional)</FormLabel>
+          <Input
+            boxShadow="md" // Shadow effect on input
+            name="runId"
+            onChange={handleChange}
+            opacity={0.7} // Slightly faded to indicate it's optional
+            placeholder="Run ID (Optional - autogenerated if left empty)"
+            value={dagParams.runId}
+          />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel>Configuration JSON</FormLabel>
+          <Textarea
+            boxShadow="md" // Shadow effect on input
+            name="configJson"
+            onChange={handleChange}
+            rows={6}
+            value={dagParams.configJson}
+            whiteSpace="pre-wrap" // Preserve whitespace to show pretty JSON formatting
+          />
+          {validateJson && !isValidJson() ? (
+            <Box color="red.500" mt={2}>
+              <Text fontSize="sm">Invalid JSON format</Text>
+            </Box>
+          ) : null}
+        </FormControl>
+
+        {/* Checkbox for JSON validation */}
+        <Checkbox isChecked={validateJson} onChange={handleCheckboxChange}>
+          Validate JSON
+        </Checkbox>
+      </VStack>
+
+      <ModalFooter>
+        <HStack w="full">
+          {/* Cancel button in red */}
+          <Button colorScheme="red" onClick={onClose}>
+            Cancel
+          </Button>
+          <Spacer />
+          {/* Trigger button in green */}
+          <Button
+            colorScheme="green" // Green color for trigger button
+            isDisabled={validateJson ? !isValidJson() : undefined} // Disable if JSON is invalid
+            onClick={onTrigger}
+          >
+            Trigger
+          </Button>
+        </HStack>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default TriggerDAGForm;
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx b/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
new file mode 100644
index 0000000000000..0317e737e5c1c
--- /dev/null
+++ b/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
@@ -0,0 +1,107 @@
+/*!
+ * 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 {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  useDisclosure,
+  Box,
+  Text,
+  Heading,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { FiPlay } from "react-icons/fi";
+
+import { TriggerDAG } from "./TriggerDAG";
+import TriggerDAGForm from "./TriggerDAGForm";
+
+type DagParams = {
+  configJson: string;
+  dagId: string;
+  logicalDate: string;
+  runId?: string;
+};
+
+type TriggerDAGModalProps = {
+  dagDisplayName: string;
+  dagId: string;
+};
+
+const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
+  dagDisplayName,
+  dagId,
+}) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const [dagParams, setDagParams] = useState<DagParams>({
+    configJson: "{}",
+    dagId, // Assigning passed dagId
+    logicalDate: "",
+    runId: "",
+  });
+
+  const handleTrigger = () => {
+    TriggerDAG(dagParams); // Calls the trigger functionality
+    onClose(); // Close the modal after triggering
+  };
+
+  return (
+    <Box>
+      <Button
+        alignSelf="center"
+        boxSize={4}
+        colorScheme="blue"
+        onClick={onOpen}
+      >
+        <FiPlay />
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} size="2xl">
+        <ModalOverlay />
+        <ModalContent>
+          <VStack align="start" p={4} spacing={4}>
+            {/* Display title "Trigger DAG" */}
+            <Heading size="lg">Trigger DAG</Heading>
+
+            {/* Display DAG Name and DAG ID */}
+            <Box>
+              <Heading mb={1} size="md">
+                {dagDisplayName}
+              </Heading>
+              <Text color="gray.500" fontSize="sm">
+                DAG ID: {dagId}
+              </Text>
+            </Box>
+          </VStack>
+
+          {/* Include the form */}
+          <TriggerDAGForm
+            dagParams={dagParams}
+            onClose={onClose}
+            onTrigger={handleTrigger}
+            setDagParams={setDagParams}
+          />
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default TriggerDAGModal;
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index 3c16fb35f8ae5..9790ff4a50cd7 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -28,6 +28,7 @@ import {
 import { Link as RouterLink } from "react-router-dom";
 
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import TriggerDAGModal from "src/components/DataTable/TriggerDAGModal";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
 import { Tooltip } from "src/components/ui";
@@ -71,6 +72,10 @@ export const DagCard = ({ dag }: Props) => (
       </HStack>
       <HStack>
         <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
+        <TriggerDAGModal
+            dagDisplayName={dag.dag_display_name}
+            dagId={dag.dag_id}
+          />
       </HStack>
     </Flex>
     <SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index 1c3fe5b3c0ae2..ecc6671cd7805 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -36,6 +36,7 @@ import type {
 } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
 import { ToggleTableDisplay } from "src/components/DataTable/ToggleTableDisplay";
+import TriggerDAGModal from "src/components/DataTable/TriggerDAGModal";
 import type { CardDef } from "src/components/DataTable/types";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
@@ -112,6 +113,17 @@ const columns: Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
     enableSorting: false,
     header: () => "Tags",
   },
+  {
+    accessorKey: "trigger",
+    cell: ({ row }) => (
+      <TriggerDAGModal
+        dagDisplayName={row.original.dag_display_name}
+        dagId={row.original.dag_id}
+      />
+    ),
+    enableSorting: false,
+    header: "",
+  },
 ];
 
 const {

From fd30080a6373ef31bb44d3d9a30f0ceb7155fde3 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Fri, 25 Oct 2024 00:03:18 +0530
Subject: [PATCH 02/39] some modifications

---
 airflow/ui/package.json                       |   4 +
 .../components/DataTable/TriggerDAGForm.tsx   | 291 +++++++++---------
 2 files changed, 154 insertions(+), 141 deletions(-)

diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index a048b1cf359de..89c398a654814 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -18,9 +18,13 @@
   "dependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^3.0.2",
+    "@codemirror/lang-json": "^6.0.1", 
+    "@codemirror/theme-one-dark": "^6.0.0",
+    "@codemirror/autocomplete": "^6.1.1",
     "@emotion/react": "^11.13.3",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
+    "@uiw/react-codemirror": "^4.23.5",
     "axios": "^1.7.7",
     "chakra-react-select": "6.0.0-next.2",
     "dayjs": "^1.11.13",
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
index e9b7f3573132e..8110abe8f9caa 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
@@ -17,154 +17,163 @@
  * under the License.
  */
 import {
-  FormControl,
-  FormLabel,
-  Input,
-  Textarea,
-  VStack,
-  ModalCloseButton,
-  Button,
-  ModalFooter,
-  Checkbox,
-  Box,
-  Text,
-  Spacer,
-  HStack,
-} from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
-
-type DagParams = {
-  configJson: string;
-  dagId: string;
-  logicalDate: string;
-  runId?: string;
-};
-
-type TriggerDAGFormProps = {
-  dagParams: DagParams;
-  onClose: () => void;
-  onTrigger: () => void;
-  setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
-};
-
-const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
-  dagParams,
-  onClose,
-  onTrigger,
-  setDagParams,
-}) => {
-  const [validateJson, setValidateJson] = useState(false); // State to track checkbox
-
-  // Format the JSON in a pretty way whenever the configJson changes
-  useEffect(() => {
-    if (validateJson && dagParams.configJson) {
+    FormControl,
+    FormLabel,
+    Input,
+    VStack,
+    ModalCloseButton,
+    Button,
+    ModalFooter,
+    Box,
+    Text,
+    Spacer,
+    HStack,
+    Collapse,
+  } from "@chakra-ui/react";
+  import React, { useState, useEffect } from "react";
+  import CodeMirror from "@uiw/react-codemirror";
+  import { json } from "@codemirror/lang-json";
+  import { autocompletion } from "@codemirror/autocomplete";
+  import { oneDark } from "@codemirror/theme-one-dark";
+  
+  type DagParams = {
+    configJson: string;
+    dagId: string;
+    logicalDate: string;
+    runId?: string;
+  };
+  
+  type TriggerDAGFormProps = {
+    dagParams: DagParams;
+    onClose: () => void;
+    onTrigger: () => void;
+    setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
+  };
+  
+  const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
+    dagParams,
+    onClose,
+    onTrigger,
+    setDagParams,
+  }) => {
+    const [showDetails, setShowDetails] = useState(false); // State to show/hide all details
+  
+    // Automatically format JSON whenever the configJson changes
+    useEffect(() => {
       try {
         const prettyJson = JSON.stringify(
           JSON.parse(dagParams.configJson),
           null,
-          2,
-        ); // Pretty JSON formatting
-
+          2
+        );
         setDagParams((prev) => ({ ...prev, configJson: prettyJson }));
       } catch {
-        // Do nothing if it's invalid; handle validation separately
+        // Invalid JSON handling can go here (e.g., highlight or notification)
       }
-    }
-  }, [dagParams.configJson, validateJson, setDagParams]);
-
-  const handleChange = (
-    ele: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { name, value } = ele.target;
-
-    setDagParams((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleCheckboxChange = (ele: React.ChangeEvent<HTMLInputElement>) => {
-    setValidateJson(ele.target.checked);
-  };
-
-  const isValidJson = () => {
-    try {
-      JSON.parse(dagParams.configJson);
-
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
-  return (
-    <>
-      <ModalCloseButton />
-
-      <VStack align="stretch" p={4} spacing={4}>
-        <FormControl isRequired>
-          <FormLabel>Logical date</FormLabel>
-          <Input
-            boxShadow="md" // Shadow effect on input
-            name="logicalDate"
-            onChange={handleChange}
-            placeholder="mm / dd / yyyy"
-            type="date"
-            value={dagParams.logicalDate}
-          />
-        </FormControl>
-
-        <FormControl>
-          <FormLabel>Run ID (Optional)</FormLabel>
-          <Input
-            boxShadow="md" // Shadow effect on input
-            name="runId"
-            onChange={handleChange}
-            opacity={0.7} // Slightly faded to indicate it's optional
-            placeholder="Run ID (Optional - autogenerated if left empty)"
-            value={dagParams.runId}
-          />
-        </FormControl>
-
-        <FormControl>
-          <FormLabel>Configuration JSON</FormLabel>
-          <Textarea
-            boxShadow="md" // Shadow effect on input
-            name="configJson"
-            onChange={handleChange}
-            rows={6}
-            value={dagParams.configJson}
-            whiteSpace="pre-wrap" // Preserve whitespace to show pretty JSON formatting
-          />
-          {validateJson && !isValidJson() ? (
-            <Box color="red.500" mt={2}>
-              <Text fontSize="sm">Invalid JSON format</Text>
-            </Box>
-          ) : null}
-        </FormControl>
-
-        {/* Checkbox for JSON validation */}
-        <Checkbox isChecked={validateJson} onChange={handleCheckboxChange}>
-          Validate JSON
-        </Checkbox>
-      </VStack>
-
-      <ModalFooter>
-        <HStack w="full">
-          {/* Cancel button in red */}
-          <Button colorScheme="red" onClick={onClose}>
-            Cancel
-          </Button>
-          <Spacer />
-          {/* Trigger button in green */}
+    }, [dagParams.configJson, setDagParams]);
+  
+    const handleChange = (
+      ele: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+      const { name, value } = ele.target;
+      setDagParams((prev) => ({ ...prev, [name]: value }));
+    };
+  
+    const handleJsonChange = (value: string) => {
+      setDagParams((prev) => ({ ...prev, configJson: value }));
+    };
+  
+    const isValidJson = () => {
+      try {
+        JSON.parse(dagParams.configJson);
+        return true;
+      } catch {
+        return false;
+      }
+    };
+  
+    return (
+      <>
+        <ModalCloseButton />
+  
+        {/* Toggle show/hide for all details */}
+        <VStack align="stretch" p={4} spacing={4}>
           <Button
-            colorScheme="green" // Green color for trigger button
-            isDisabled={validateJson ? !isValidJson() : undefined} // Disable if JSON is invalid
-            onClick={onTrigger}
+            variant="outline"
+            onClick={() => setShowDetails(!showDetails)}
+            width="full"
           >
-            Trigger
+            {showDetails ? "Hide Details" : "Show Details"}
           </Button>
-        </HStack>
-      </ModalFooter>
-    </>
-  );
-};
-
-export default TriggerDAGForm;
+  
+          <Collapse in={showDetails}>
+            <VStack align="stretch" spacing={4}>
+              {/* Logical date/time input with timezone */}
+              <FormControl>
+                <FormLabel>Logical date (with time)</FormLabel>
+                <Input
+                  boxShadow="md"
+                  name="logicalDate"
+                  onChange={handleChange}
+                  placeholder="yyyy-mm-ddThh:mm"
+                  type="datetime-local" // Allows date and time selection
+                  value={dagParams.logicalDate}
+                />
+              </FormControl>
+  
+              {/* Run ID input */}
+              <FormControl>
+                <FormLabel>Run ID (Optional)</FormLabel>
+                <Input
+                  boxShadow="md"
+                  name="runId"
+                  onChange={handleChange}
+                  placeholder="Run ID (Optional - autogenerated if left empty)"
+                  value={dagParams.runId}
+                />
+              </FormControl>
+  
+              {/* JSON Configuration with CodeMirror */}
+              <FormControl>
+                <FormLabel>Configuration JSON</FormLabel>
+                <Box border="1px" borderColor="gray.300" borderRadius="md">
+                  <CodeMirror
+                    value={dagParams.configJson}
+                    height="200px"
+                    extensions={[json(), autocompletion()]}
+                    theme={oneDark}
+                    onChange={handleJsonChange}
+                  />
+                </Box>
+                {!isValidJson() ? (
+                  <Box color="red.500" mt={2}>
+                    <Text fontSize="sm">Invalid JSON format</Text>
+                  </Box>
+                ) : null}
+              </FormControl>
+            </VStack>
+          </Collapse>
+        </VStack>
+  
+        <ModalFooter>
+          <HStack w="full">
+            {/* Cancel button in red */}
+            <Button colorScheme="red" onClick={onClose}>
+              Cancel
+            </Button>
+            <Spacer />
+            {/* Trigger button in green */}
+            <Button
+              colorScheme="green"
+              isDisabled={!isValidJson()} // Disable if JSON is invalid
+              onClick={onTrigger}
+            >
+              Trigger
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </>
+    );
+  };
+  
+  export default TriggerDAGForm;  
\ No newline at end of file

From 922ec5e54ffa15688aa8105ebbafa04e215d0a8a Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Fri, 25 Oct 2024 02:16:02 +0530
Subject: [PATCH 03/39] rectifications

---
 airflow/ui/pnpm-lock.yaml                     | 208 +++++++++++-
 .../components/DataTable/TriggerDAGForm.tsx   | 319 +++++++++---------
 .../components/DataTable/TriggerDAGModal.tsx  |  29 +-
 3 files changed, 381 insertions(+), 175 deletions(-)

diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index 1b2b82cd3e9f9..1a5547e731b97 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -14,6 +14,15 @@ importers:
       '@chakra-ui/react':
         specifier: ^3.0.2
         version: 3.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@internationalized/date@3.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@codemirror/autocomplete':
+        specifier: ^6.1.1
+        version: 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/theme-one-dark':
+        specifier: ^6.0.0
+        version: 6.1.2
       '@emotion/react':
         specifier: ^11.13.3
         version: 11.13.3(@types/react@18.3.5)(react@18.3.1)
@@ -23,6 +32,9 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.20.1
         version: 8.20.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uiw/react-codemirror':
+        specifier: ^4.23.5
+        version: 4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       axios:
         specifier: ^1.7.7
         version: 1.7.7
@@ -273,6 +285,38 @@ packages:
       react: '>=18'
       react-dom: '>=18'
 
+  '@codemirror/autocomplete@6.18.1':
+    resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+
+  '@codemirror/commands@6.7.1':
+    resolution: {integrity: sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==}
+
+  '@codemirror/lang-json@6.0.1':
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+
+  '@codemirror/language@6.10.3':
+    resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==}
+
+  '@codemirror/lint@6.8.2':
+    resolution: {integrity: sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==}
+
+  '@codemirror/search@6.5.6':
+    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+
+  '@codemirror/state@6.4.1':
+    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+
+  '@codemirror/view@6.34.1':
+    resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
+
   '@emotion/babel-plugin@11.12.0':
     resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
 
@@ -563,6 +607,18 @@ packages:
   '@jsdevtools/ono@7.1.3':
     resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
 
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/json@1.0.2':
+    resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -927,6 +983,28 @@ packages:
     resolution: {integrity: sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@uiw/codemirror-extensions-basic-setup@4.23.5':
+    resolution: {integrity: sha512-eTMfT8TejVN/D5vvuz9Lab+MIoRYdtqa2ftZZmU3JpcDIXf9KaExPo+G2Rl9HqySzaasgGXOOG164MAnj3MSIw==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
+  '@uiw/react-codemirror@4.23.5':
+    resolution: {integrity: sha512-2zzGpx61L4mq9zDG/hfsO4wAH209TBE8VVsoj/qrccRe6KfcneCwKgRxtQjxBCCnO0Q5S+IP+uwCx5bXRzgQFQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@vitejs/plugin-react-swc@3.7.0':
     resolution: {integrity: sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==}
     peerDependencies:
@@ -1581,6 +1659,9 @@ packages:
   code-block-writer@13.0.2:
     resolution: {integrity: sha512-XfXzAGiStXSmCIwrkdfvc7FS5Dtj8yelCtyOf2p2skCAfvLd6zu0rGzuS9NSCO3bq1JKpFZ7tbKdKlcd5occQA==}
 
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -1622,6 +1703,9 @@ packages:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2944,6 +3028,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
@@ -3168,6 +3255,9 @@ packages:
       jsdom:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   webidl-conversions@7.0.0:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
@@ -3488,6 +3578,61 @@ snapshots:
     transitivePeerDependencies:
       - '@internationalized/date'
 
+  '@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.7.1':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-json@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@lezer/json': 1.0.2
+
+  '@codemirror/language@6.10.3':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.2':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.6':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      crelt: 1.0.6
+
+  '@codemirror/state@6.4.1': {}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/highlight': 1.2.1
+
+  '@codemirror/view@6.34.1':
+    dependencies:
+      '@codemirror/state': 6.4.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@emotion/babel-plugin@11.12.0':
     dependencies:
       '@babel/helper-module-imports': 7.24.7
@@ -3686,7 +3831,7 @@ snapshots:
   '@floating-ui/dom@1.6.8':
     dependencies:
       '@floating-ui/core': 1.6.7
-      '@floating-ui/utils': 0.2.7
+      '@floating-ui/utils': 0.2.8
 
   '@floating-ui/utils@0.2.7': {}
 
@@ -3749,6 +3894,22 @@ snapshots:
 
   '@jsdevtools/ono@7.1.3': {}
 
+  '@lezer/common@1.2.3': {}
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/json@1.0.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4109,6 +4270,33 @@ snapshots:
       '@typescript-eslint/types': 8.5.0
       eslint-visitor-keys: 3.4.3
 
+  '@uiw/codemirror-extensions-basic-setup@4.23.5(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/commands': 6.7.1
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.2
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+
+  '@uiw/react-codemirror@4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.25.6
+      '@codemirror/commands': 6.7.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/theme-one-dark': 6.1.2
+      '@codemirror/view': 6.34.1
+      '@uiw/codemirror-extensions-basic-setup': 4.23.5(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      codemirror: 6.0.1(@lezer/common@1.2.3)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+
   '@vitejs/plugin-react-swc@3.7.0(@swc/helpers@0.5.13)(vite@5.4.6(@types/node@22.5.4))':
     dependencies:
       '@swc/core': 1.7.14(@swc/helpers@0.5.13)
@@ -5384,6 +5572,18 @@ snapshots:
 
   code-block-writer@13.0.2: {}
 
+  codemirror@6.0.1(@lezer/common@1.2.3):
+    dependencies:
+      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/commands': 6.7.1
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.2
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+    transitivePeerDependencies:
+      - '@lezer/common'
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -5422,6 +5622,8 @@ snapshots:
       path-type: 4.0.0
       yaml: 1.10.2
 
+  crelt@1.0.6: {}
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -6914,6 +7116,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-mod@4.1.2: {}
+
   stylis@4.2.0: {}
 
   supports-color@5.5.0:
@@ -7137,6 +7341,8 @@ snapshots:
       - supports-color
       - terser
 
+  w3c-keyname@2.2.8: {}
+
   webidl-conversions@7.0.0: {}
 
   whatwg-mimetype@3.0.0: {}
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
index 8110abe8f9caa..c459c1a77ac5f 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
@@ -17,163 +17,172 @@
  * under the License.
  */
 import {
-    FormControl,
-    FormLabel,
-    Input,
-    VStack,
-    ModalCloseButton,
-    Button,
-    ModalFooter,
-    Box,
-    Text,
-    Spacer,
-    HStack,
-    Collapse,
-  } from "@chakra-ui/react";
-  import React, { useState, useEffect } from "react";
-  import CodeMirror from "@uiw/react-codemirror";
-  import { json } from "@codemirror/lang-json";
-  import { autocompletion } from "@codemirror/autocomplete";
-  import { oneDark } from "@codemirror/theme-one-dark";
-  
-  type DagParams = {
-    configJson: string;
-    dagId: string;
-    logicalDate: string;
-    runId?: string;
+  FormControl,
+  FormLabel,
+  Input,
+  VStack,
+  ModalCloseButton,
+  Button,
+  ModalFooter,
+  Box,
+  Text,
+  Spacer,
+  HStack,
+  Collapse,
+} from "@chakra-ui/react";
+import { autocompletion } from "@codemirror/autocomplete";
+import { json } from "@codemirror/lang-json";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
+import React, { useState, useEffect } from "react";
+
+type DagParams = {
+  configJson: string;
+  dagId: string;
+  logicalDate: string;
+  runId?: string;
+};
+
+type TriggerDAGFormProps = {
+  dagParams: DagParams;
+  onClose: () => void;
+  onTrigger: () => void;
+  setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
+};
+
+const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
+  dagParams,
+  onTrigger,
+  setDagParams,
+}) => {
+  const [showDetails, setShowDetails] = useState(false);
+
+  useEffect(() => {
+    try {
+      const prettyJson = JSON.stringify(
+        JSON.parse(dagParams.configJson),
+        undefined,
+        2,
+      );
+
+      setDagParams((prev) => ({ ...prev, configJson: prettyJson }));
+    } catch {
+      // Invalid JSON handling
+    }
+  }, [dagParams.configJson, setDagParams]);
+
+  const handleChange = (
+    ele: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = ele.target;
+
+    setDagParams((prev) => ({ ...prev, [name]: value }));
   };
-  
-  type TriggerDAGFormProps = {
-    dagParams: DagParams;
-    onClose: () => void;
-    onTrigger: () => void;
-    setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
+
+  const handleReset = () => {
+    setDagParams({
+      configJson: "{}",
+      dagId: dagParams.dagId,
+      logicalDate: "",
+      runId: "",
+    });
   };
-  
-  const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
-    dagParams,
-    onClose,
-    onTrigger,
-    setDagParams,
-  }) => {
-    const [showDetails, setShowDetails] = useState(false); // State to show/hide all details
-  
-    // Automatically format JSON whenever the configJson changes
-    useEffect(() => {
-      try {
-        const prettyJson = JSON.stringify(
-          JSON.parse(dagParams.configJson),
-          null,
-          2
-        );
-        setDagParams((prev) => ({ ...prev, configJson: prettyJson }));
-      } catch {
-        // Invalid JSON handling can go here (e.g., highlight or notification)
-      }
-    }, [dagParams.configJson, setDagParams]);
-  
-    const handleChange = (
-      ele: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-      const { name, value } = ele.target;
-      setDagParams((prev) => ({ ...prev, [name]: value }));
-    };
-  
-    const handleJsonChange = (value: string) => {
-      setDagParams((prev) => ({ ...prev, configJson: value }));
-    };
-  
-    const isValidJson = () => {
-      try {
-        JSON.parse(dagParams.configJson);
-        return true;
-      } catch {
-        return false;
-      }
-    };
-  
-    return (
-      <>
-        <ModalCloseButton />
-  
-        {/* Toggle show/hide for all details */}
-        <VStack align="stretch" p={4} spacing={4}>
+
+  const handleJsonChange = (value: string) => {
+    setDagParams((prev) => ({ ...prev, configJson: value }));
+  };
+
+  const isValidJson = () => {
+    try {
+      JSON.parse(dagParams.configJson);
+
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  return (
+    <>
+      <ModalCloseButton />
+
+      <VStack align="stretch" p={5} spacing={2}>
+        <Button
+          onClick={() => setShowDetails(!showDetails)}
+          variant="outline"
+          width="full"
+        >
+          {showDetails ? "Hide Advance Options" : "Show Advance Options"}
+        </Button>
+
+        <Collapse in={showDetails}>
+          <VStack align="stretch" spacing={3}>
+            <FormControl>
+              <FormLabel size="sm">Logical date</FormLabel>
+              <Input
+                name="logicalDate"
+                onChange={handleChange}
+                placeholder="yyyy-mm-ddThh:mm"
+                size="sm"
+                type="datetime-local"
+                value={dagParams.logicalDate}
+              />
+            </FormControl>
+
+            <FormControl>
+              <FormLabel size="sm">Run ID (Optional)</FormLabel>
+              <Input
+                name="runId"
+                onChange={handleChange}
+                placeholder="Autogenerated if left empty"
+                size="sm"
+                value={dagParams.runId}
+              />
+            </FormControl>
+
+            <FormControl>
+              <FormLabel size="sm">Configuration JSON</FormLabel>
+              <CodeMirror
+                extensions={[json(), autocompletion(), lineNumbers()]}
+                height="200px"
+                onChange={handleJsonChange}
+                style={{
+                  border: "1px solid #CBD5E0",
+                  borderRadius: "8px",
+                  outline: "none",
+                  padding: "2px",
+                }}
+                theme={oneDark}
+                value={dagParams.configJson}
+              />
+              {isValidJson() ? undefined : (
+                <Box color="red.500" mt={2}>
+                  <Text fontSize="sm">Invalid JSON format</Text>
+                </Box>
+              )}
+            </FormControl>
+          </VStack>
+        </Collapse>
+      </VStack>
+
+      <ModalFooter>
+        <HStack w="full">
+          <Button colorScheme="red" onClick={handleReset}>
+            Reset
+          </Button>
+          <Spacer />
+          <Spacer />
           <Button
-            variant="outline"
-            onClick={() => setShowDetails(!showDetails)}
-            width="full"
+            colorScheme="green"
+            isDisabled={!isValidJson()}
+            onClick={onTrigger}
           >
-            {showDetails ? "Hide Details" : "Show Details"}
+            Trigger
           </Button>
-  
-          <Collapse in={showDetails}>
-            <VStack align="stretch" spacing={4}>
-              {/* Logical date/time input with timezone */}
-              <FormControl>
-                <FormLabel>Logical date (with time)</FormLabel>
-                <Input
-                  boxShadow="md"
-                  name="logicalDate"
-                  onChange={handleChange}
-                  placeholder="yyyy-mm-ddThh:mm"
-                  type="datetime-local" // Allows date and time selection
-                  value={dagParams.logicalDate}
-                />
-              </FormControl>
-  
-              {/* Run ID input */}
-              <FormControl>
-                <FormLabel>Run ID (Optional)</FormLabel>
-                <Input
-                  boxShadow="md"
-                  name="runId"
-                  onChange={handleChange}
-                  placeholder="Run ID (Optional - autogenerated if left empty)"
-                  value={dagParams.runId}
-                />
-              </FormControl>
-  
-              {/* JSON Configuration with CodeMirror */}
-              <FormControl>
-                <FormLabel>Configuration JSON</FormLabel>
-                <Box border="1px" borderColor="gray.300" borderRadius="md">
-                  <CodeMirror
-                    value={dagParams.configJson}
-                    height="200px"
-                    extensions={[json(), autocompletion()]}
-                    theme={oneDark}
-                    onChange={handleJsonChange}
-                  />
-                </Box>
-                {!isValidJson() ? (
-                  <Box color="red.500" mt={2}>
-                    <Text fontSize="sm">Invalid JSON format</Text>
-                  </Box>
-                ) : null}
-              </FormControl>
-            </VStack>
-          </Collapse>
-        </VStack>
-  
-        <ModalFooter>
-          <HStack w="full">
-            {/* Cancel button in red */}
-            <Button colorScheme="red" onClick={onClose}>
-              Cancel
-            </Button>
-            <Spacer />
-            {/* Trigger button in green */}
-            <Button
-              colorScheme="green"
-              isDisabled={!isValidJson()} // Disable if JSON is invalid
-              onClick={onTrigger}
-            >
-              Trigger
-            </Button>
-          </HStack>
-        </ModalFooter>
-      </>
-    );
-  };
-  
-  export default TriggerDAGForm;  
\ No newline at end of file
+        </HStack>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default TriggerDAGForm;
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx b/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
index 0317e737e5c1c..ba60f139131e1 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 import {
-  Button,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -52,46 +51,38 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [dagParams, setDagParams] = useState<DagParams>({
     configJson: "{}",
-    dagId, // Assigning passed dagId
+    dagId,
     logicalDate: "",
     runId: "",
   });
 
   const handleTrigger = () => {
-    TriggerDAG(dagParams); // Calls the trigger functionality
-    onClose(); // Close the modal after triggering
+    TriggerDAG(dagParams);
+    onClose();
   };
 
   return (
     <Box>
-      <Button
-        alignSelf="center"
-        boxSize={4}
-        colorScheme="blue"
-        onClick={onOpen}
-      >
+      <Box alignSelf="center" cursor="pointer" onClick={onOpen}>
         <FiPlay />
-      </Button>
+      </Box>
 
-      <Modal isOpen={isOpen} onClose={onClose} size="2xl">
+      <Modal isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />
         <ModalContent>
-          <VStack align="start" p={4} spacing={4}>
-            {/* Display title "Trigger DAG" */}
-            <Heading size="lg">Trigger DAG</Heading>
+          <VStack align="start" p={5} spacing={2}>
+            <Heading size="md">Trigger DAG</Heading>
 
-            {/* Display DAG Name and DAG ID */}
             <Box>
-              <Heading mb={1} size="md">
+              <Heading mb={1} size="sm">
                 {dagDisplayName}
               </Heading>
-              <Text color="gray.500" fontSize="sm">
+              <Text color="gray.500" fontSize="xs">
                 DAG ID: {dagId}
               </Text>
             </Box>
           </VStack>
 
-          {/* Include the form */}
           <TriggerDAGForm
             dagParams={dagParams}
             onClose={onClose}

From 63e20cba48d3a6d85555c6b70c52a140be23a616 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sun, 27 Oct 2024 02:25:35 +0530
Subject: [PATCH 04/39] initial react hook

---
 airflow/ui/package.json                       |   1 +
 airflow/ui/pnpm-lock.yaml                     |  39 ++++++
 .../components/DataTable/TriggerDAGForm.tsx   | 128 +++++++++++-------
 airflow/ui/src/pages/DagsList/DagCard.tsx     |   6 +-
 4 files changed, 120 insertions(+), 54 deletions(-)

diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index 89c398a654814..faf047b9ece74 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -31,6 +31,7 @@
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.20.0",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
     "use-debounce": "^10.0.3",
diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index 1a5547e731b97..1926fb500c0bd 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.20.0
+        version: 7.53.1(react@18.3.1)
       react-icons:
         specifier: ^5.3.0
         version: 5.3.0(react@18.3.1)
@@ -2791,6 +2794,24 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
+  react-focus-lock@2.12.1:
+    resolution: {integrity: sha512-lfp8Dve4yJagkHiFrC1bGtib3mF2ktqwPJw4/WGcgPW+pJ/AVQA5X2vI7xgp13FcxFEpYBBHpXai/N2DBNC0Jw==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-hook-form@7.53.1:
+    resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-icons@5.3.0:
     resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
     peerDependencies:
@@ -6819,6 +6840,24 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-fast-compare@3.2.2: {}
+
+  react-focus-lock@2.12.1(@types/react@18.3.5)(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.4
+      focus-lock: 1.3.5
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-clientside-effect: 1.2.6(react@18.3.1)
+      use-callback-ref: 1.3.2(@types/react@18.3.5)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.5)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.5
+
+  react-hook-form@7.53.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-icons@5.3.0(react@18.3.1):
     dependencies:
       react: 18.3.1
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
index c459c1a77ac5f..a7b8c3569042c 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
@@ -34,7 +34,8 @@ import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { oneDark } from "@codemirror/theme-one-dark";
 import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
+import { useForm, Controller } from "react-hook-form";
 
 type DagParams = {
   configJson: string;
@@ -55,29 +56,28 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   onTrigger,
   setDagParams,
 }) => {
-  const [showDetails, setShowDetails] = useState(false);
+  const [showDetails, setShowDetails] = React.useState(false);
+  const { control, handleSubmit, setValue, watch } = useForm({
+    defaultValues: {
+      configJson: dagParams.configJson,
+      logicalDate: dagParams.logicalDate,
+      runId: dagParams.runId,
+    },
+  });
 
   useEffect(() => {
-    try {
-      const prettyJson = JSON.stringify(
-        JSON.parse(dagParams.configJson),
-        undefined,
-        2,
-      );
-
-      setDagParams((prev) => ({ ...prev, configJson: prettyJson }));
-    } catch {
-      // Invalid JSON handling
-    }
-  }, [dagParams.configJson, setDagParams]);
-
-  const handleChange = (
-    ele: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { name, value } = ele.target;
-
-    setDagParams((prev) => ({ ...prev, [name]: value }));
-  };
+    // Update default values if dagParams change
+    setValue("logicalDate", dagParams.logicalDate);
+    setValue("runId", dagParams.runId);
+    setValue("configJson", dagParams.configJson);
+  }, [dagParams, setValue]);
+
+  const handleChange = useCallback(
+    (name: string, value: string) => {
+      setDagParams((prev) => ({ ...prev, [name]: value }));
+    },
+    [setDagParams],
+  );
 
   const handleReset = () => {
     setDagParams({
@@ -86,15 +86,19 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
       logicalDate: "",
       runId: "",
     });
+    setValue("logicalDate", "");
+    setValue("runId", "");
+    setValue("configJson", "{}");
   };
 
   const handleJsonChange = (value: string) => {
-    setDagParams((prev) => ({ ...prev, configJson: value }));
+    setValue("configJson", value);
+    handleChange("configJson", value);
   };
 
   const isValidJson = () => {
     try {
-      JSON.parse(dagParams.configJson);
+      JSON.parse(watch("configJson"));
 
       return true;
     } catch {
@@ -102,6 +106,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     }
   };
 
+  const onSubmit = () => {
+    onTrigger();
+  };
+
   return (
     <>
       <ModalCloseButton />
@@ -112,50 +120,67 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           variant="outline"
           width="full"
         >
-          {showDetails ? "Hide Advance Options" : "Show Advance Options"}
+          {showDetails ? "Hide Advanced Options" : "Show Advanced Options"}
         </Button>
 
         <Collapse in={showDetails}>
           <VStack align="stretch" spacing={3}>
             <FormControl>
               <FormLabel size="sm">Logical date</FormLabel>
-              <Input
+              <Controller
+                control={control}
                 name="logicalDate"
-                onChange={handleChange}
-                placeholder="yyyy-mm-ddThh:mm"
-                size="sm"
-                type="datetime-local"
-                value={dagParams.logicalDate}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    placeholder="yyyy-mm-ddThh:mm"
+                    size="sm"
+                    type="datetime-local"
+                  />
+                )}
               />
             </FormControl>
 
             <FormControl>
               <FormLabel size="sm">Run ID (Optional)</FormLabel>
-              <Input
+              <Controller
+                control={control}
                 name="runId"
-                onChange={handleChange}
-                placeholder="Autogenerated if left empty"
-                size="sm"
-                value={dagParams.runId}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    placeholder="Autogenerated if left empty"
+                    size="sm"
+                  />
+                )}
               />
             </FormControl>
 
             <FormControl>
               <FormLabel size="sm">Configuration JSON</FormLabel>
-              <CodeMirror
-                extensions={[json(), autocompletion(), lineNumbers()]}
-                height="200px"
-                onChange={handleJsonChange}
-                style={{
-                  border: "1px solid #CBD5E0",
-                  borderRadius: "8px",
-                  outline: "none",
-                  padding: "2px",
-                }}
-                theme={oneDark}
-                value={dagParams.configJson}
+              <Controller
+                control={control}
+                name="configJson"
+                render={({ field }) => (
+                  <CodeMirror
+                    {...field}
+                    extensions={[json(), autocompletion(), lineNumbers()]}
+                    height="200px"
+                    onChange={(value) => {
+                      handleJsonChange(value);
+                      field.onChange(value); // Update the field value
+                    }}
+                    style={{
+                      border: "1px solid #CBD5E0",
+                      borderRadius: "8px",
+                      outline: "none",
+                      padding: "2px",
+                    }}
+                    theme={oneDark}
+                  />
+                )}
               />
-              {isValidJson() ? undefined : (
+              {!isValidJson() && (
                 <Box color="red.500" mt={2}>
                   <Text fontSize="sm">Invalid JSON format</Text>
                 </Box>
@@ -171,11 +196,12 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
             Reset
           </Button>
           <Spacer />
-          <Spacer />
           <Button
             colorScheme="green"
             isDisabled={!isValidJson()}
-            onClick={onTrigger}
+            onClick={() => {
+              void handleSubmit(onSubmit)();
+            }}
           >
             Trigger
           </Button>
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index 9790ff4a50cd7..7752b8b7af377 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -73,9 +73,9 @@ export const DagCard = ({ dag }: Props) => (
       <HStack>
         <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
         <TriggerDAGModal
-            dagDisplayName={dag.dag_display_name}
-            dagId={dag.dag_id}
-          />
+        dagDisplayName={dag.dag_display_name}
+        dagId={dag.dag_id}
+      />
       </HStack>
     </Flex>
     <SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>

From ba35a534a49e135eeb7e70f647dcf0036ab0ebca Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sun, 27 Oct 2024 02:52:25 +0530
Subject: [PATCH 05/39] reset only on form change

---
 .../components/DataTable/TriggerDAGForm.tsx   | 94 ++++++++++++-------
 1 file changed, 58 insertions(+), 36 deletions(-)

diff --git a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
index a7b8c3569042c..35c526c735d89 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
@@ -34,14 +34,14 @@ import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { oneDark } from "@codemirror/theme-one-dark";
 import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
-import React, { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 
 type DagParams = {
   configJson: string;
   dagId: string;
   logicalDate: string;
-  runId?: string;
+  runId: string;
 };
 
 type TriggerDAGFormProps = {
@@ -56,7 +56,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   onTrigger,
   setDagParams,
 }) => {
-  const [showDetails, setShowDetails] = React.useState(false);
+  const [showDetails, setShowDetails] = useState(false);
   const { control, handleSubmit, setValue, watch } = useForm({
     defaultValues: {
       configJson: dagParams.configJson,
@@ -65,8 +65,14 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     },
   });
 
+  // Store initial values to compare later
+  const initialValues = {
+    configJson: dagParams.configJson,
+    logicalDate: dagParams.logicalDate,
+    runId: dagParams.runId,
+  };
+
   useEffect(() => {
-    // Update default values if dagParams change
     setValue("logicalDate", dagParams.logicalDate);
     setValue("runId", dagParams.runId);
     setValue("configJson", dagParams.configJson);
@@ -91,11 +97,26 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     setValue("configJson", "{}");
   };
 
-  const handleJsonChange = (value: string) => {
-    setValue("configJson", value);
-    handleChange("configJson", value);
+  const onSubmit = () => {
+    onTrigger();
   };
 
+  // Function to check if the form has been modified
+  const hasFormChanged = () => {
+    const currentValues = {
+      configJson: watch("configJson"),
+      logicalDate: watch("logicalDate"),
+      runId: watch("runId"),
+    };
+
+    return (
+      currentValues.configJson !== initialValues.configJson ||
+      currentValues.logicalDate !== initialValues.logicalDate ||
+      currentValues.runId !== initialValues.runId
+    );
+  };
+
+  // Check for valid JSON
   const isValidJson = () => {
     try {
       JSON.parse(watch("configJson"));
@@ -106,10 +127,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     }
   };
 
-  const onSubmit = () => {
-    onTrigger();
-  };
-
   return (
     <>
       <ModalCloseButton />
@@ -162,29 +179,32 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 control={control}
                 name="configJson"
                 render={({ field }) => (
-                  <CodeMirror
-                    {...field}
-                    extensions={[json(), autocompletion(), lineNumbers()]}
-                    height="200px"
-                    onChange={(value) => {
-                      handleJsonChange(value);
-                      field.onChange(value); // Update the field value
-                    }}
-                    style={{
-                      border: "1px solid #CBD5E0",
-                      borderRadius: "8px",
-                      outline: "none",
-                      padding: "2px",
-                    }}
-                    theme={oneDark}
-                  />
+                  <Box>
+                    <CodeMirror
+                      {...field}
+                      basicSetup
+                      extensions={[json(), autocompletion(), lineNumbers()]}
+                      height="200px"
+                      onChange={(value) => {
+                        field.onChange(value); // Directly use field.onChange
+                      }}
+                      style={{
+                        border: "1px solid #CBD5E0",
+                        borderRadius: "8px",
+                        outline: "none",
+                        padding: "2px",
+                      }}
+                      theme={oneDark}
+                    />
+                    {/* Show warning if JSON is invalid */}
+                    {!isValidJson() && (
+                      <Box color="red.500" mt={2}>
+                        <Text fontSize="sm">Invalid JSON format.</Text>
+                      </Box>
+                    )}
+                  </Box>
                 )}
               />
-              {!isValidJson() && (
-                <Box color="red.500" mt={2}>
-                  <Text fontSize="sm">Invalid JSON format</Text>
-                </Box>
-              )}
             </FormControl>
           </VStack>
         </Collapse>
@@ -192,13 +212,15 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
       <ModalFooter>
         <HStack w="full">
-          <Button colorScheme="red" onClick={handleReset}>
-            Reset
-          </Button>
+          {hasFormChanged() && (
+            <Button colorScheme="red" onClick={handleReset}>
+              Reset
+            </Button>
+          )}
           <Spacer />
           <Button
             colorScheme="green"
-            isDisabled={!isValidJson()}
+            isDisabled={!isValidJson()} // Disable if JSON is invalid
             onClick={() => {
               void handleSubmit(onSubmit)();
             }}

From 7aa4e098e4ee3d2f4d6853e7678d1dc6f17717ac Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Mon, 4 Nov 2024 18:38:04 +0530
Subject: [PATCH 06/39] moving to diff componnent

---
 airflow/ui/pnpm-lock.yaml                     | 99 +++++++++++--------
 .../TriggerDAGForm.tsx                        |  0
 .../TriggerDAGModal.tsx                       | 10 +-
 .../TriggerDag.tsx}                           |  2 +-
 airflow/ui/src/components/TriggerDag/index.ts | 20 ++++
 airflow/ui/src/pages/DagsList/DagCard.tsx     |  2 +-
 airflow/ui/src/pages/DagsList/DagsList.tsx    |  2 +-
 7 files changed, 84 insertions(+), 51 deletions(-)
 rename airflow/ui/src/components/{DataTable => TriggerDag}/TriggerDAGForm.tsx (100%)
 rename airflow/ui/src/components/{DataTable => TriggerDag}/TriggerDAGModal.tsx (93%)
 rename airflow/ui/src/components/{DataTable/TriggerDAG.ts => TriggerDag/TriggerDag.tsx} (94%)
 create mode 100644 airflow/ui/src/components/TriggerDag/index.ts

diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index 1926fb500c0bd..d6ba8453d16d5 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -193,6 +193,10 @@ packages:
     resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/generator@7.17.7':
     resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==}
     engines: {node: '>=6.9.0'}
@@ -229,6 +233,10 @@ packages:
     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/highlight@7.24.7':
     resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
     engines: {node: '>=6.9.0'}
@@ -296,6 +304,14 @@ packages:
       '@codemirror/view': ^6.0.0
       '@lezer/common': ^1.0.0
 
+  '@codemirror/autocomplete@6.18.2':
+    resolution: {integrity: sha512-wJGylKtMFR/Ds6Gh01+OovXE/pncPiKZNNBKuC39pKnH+XK5d9+WsNqcrdxPjFPFTigRBqse0rfxw9UxrfyhPg==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+
   '@codemirror/commands@6.7.1':
     resolution: {integrity: sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==}
 
@@ -1659,8 +1675,8 @@ packages:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
 
-  code-block-writer@13.0.2:
-    resolution: {integrity: sha512-XfXzAGiStXSmCIwrkdfvc7FS5Dtj8yelCtyOf2p2skCAfvLd6zu0rGzuS9NSCO3bq1JKpFZ7tbKdKlcd5occQA==}
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
 
   codemirror@6.0.1:
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
@@ -2372,8 +2388,8 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jackspeak@4.0.1:
-    resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==}
+  jackspeak@4.0.2:
+    resolution: {integrity: sha512-bZsjR/iRjl1Nk1UkjGpAzLNfQtzuijhn2g+pbZb98HQ1Gk8vM9hfbxeMBP+M2/UUdwj0RqGG3mlvk2MsAqwvEw==}
     engines: {node: 20 || >=22}
 
   javascript-natural-sort@0.7.1:
@@ -2468,8 +2484,8 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.0.1:
-    resolution: {integrity: sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==}
+  lru-cache@11.0.2:
+    resolution: {integrity: sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==}
     engines: {node: 20 || >=22}
 
   lz-string@1.5.0:
@@ -2673,6 +2689,9 @@ packages:
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2727,6 +2746,9 @@ packages:
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -2794,18 +2816,6 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
-  react-fast-compare@3.2.2:
-    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
-
-  react-focus-lock@2.12.1:
-    resolution: {integrity: sha512-lfp8Dve4yJagkHiFrC1bGtib3mF2ktqwPJw4/WGcgPW+pJ/AVQA5X2vI7xgp13FcxFEpYBBHpXai/N2DBNC0Jw==}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-hook-form@7.53.1:
     resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==}
     engines: {node: '>=18.0.0'}
@@ -3465,6 +3475,12 @@ snapshots:
       '@babel/highlight': 7.24.7
       picocolors: 1.1.0
 
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/generator@7.17.7':
     dependencies:
       '@babel/types': 7.25.4
@@ -3506,6 +3522,8 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.24.7': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/highlight@7.24.7':
     dependencies:
       '@babel/helper-validator-identifier': 7.24.7
@@ -3606,6 +3624,13 @@ snapshots:
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.3
 
+  '@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+      '@lezer/common': 1.2.3
+
   '@codemirror/commands@6.7.1':
     dependencies:
       '@codemirror/language': 6.10.3
@@ -4094,7 +4119,7 @@ snapshots:
 
   '@testing-library/dom@10.4.0':
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.26.2
       '@babel/runtime': 7.25.6
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
@@ -5591,11 +5616,11 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
-  code-block-writer@13.0.2: {}
+  code-block-writer@13.0.3: {}
 
   codemirror@6.0.1(@lezer/common@1.2.3):
     dependencies:
-      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/autocomplete': 6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
       '@codemirror/commands': 6.7.1
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
@@ -6216,10 +6241,10 @@ snapshots:
   glob@11.0.0:
     dependencies:
       foreground-child: 3.3.0
-      jackspeak: 4.0.1
+      jackspeak: 4.0.2
       minimatch: 10.0.1
       minipass: 7.1.2
-      package-json-from-dist: 1.0.0
+      package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
 
   globals@11.12.0: {}
@@ -6462,11 +6487,9 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jackspeak@4.0.1:
+  jackspeak@4.0.2:
     dependencies:
       '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
 
   javascript-natural-sort@0.7.1: {}
 
@@ -6542,7 +6565,7 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@11.0.1: {}
+  lru-cache@11.0.2: {}
 
   lz-string@1.5.0: {}
 
@@ -6734,6 +6757,8 @@ snapshots:
 
   package-json-from-dist@1.0.0: {}
 
+  package-json-from-dist@1.0.1: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -6762,7 +6787,7 @@ snapshots:
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.0.1
+      lru-cache: 11.0.2
       minipass: 7.1.2
 
   path-type@4.0.0: {}
@@ -6777,6 +6802,8 @@ snapshots:
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   picomatch@4.0.2: {}
@@ -6840,20 +6867,6 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-fast-compare@3.2.2: {}
-
-  react-focus-lock@2.12.1(@types/react@18.3.5)(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.25.4
-      focus-lock: 1.3.5
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-clientside-effect: 1.2.6(react@18.3.1)
-      use-callback-ref: 1.3.2(@types/react@18.3.5)(react@18.3.1)
-      use-sidecar: 1.1.2(@types/react@18.3.5)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.5
-
   react-hook-form@7.53.1(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -7216,7 +7229,7 @@ snapshots:
   ts-morph@23.0.0:
     dependencies:
       '@ts-morph/common': 0.24.0
-      code-block-writer: 13.0.2
+      code-block-writer: 13.0.3
 
   tslib@2.6.3: {}
 
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
similarity index 100%
rename from airflow/ui/src/components/DataTable/TriggerDAGForm.tsx
rename to airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
diff --git a/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
similarity index 93%
rename from airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
rename to airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index ba60f139131e1..0877b6216ba8a 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import {
-  Modal,
+  Dialog,
   ModalOverlay,
   ModalContent,
   useDisclosure,
@@ -29,7 +29,7 @@ import {
 import React, { useState } from "react";
 import { FiPlay } from "react-icons/fi";
 
-import { TriggerDAG } from "./TriggerDAG";
+import { TriggerDag } from "./TriggerDag";
 import TriggerDAGForm from "./TriggerDAGForm";
 
 type DagParams = {
@@ -57,7 +57,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   });
 
   const handleTrigger = () => {
-    TriggerDAG(dagParams);
+    TriggerDag(dagParams);
     onClose();
   };
 
@@ -67,7 +67,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
         <FiPlay />
       </Box>
 
-      <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <Dialog isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />
         <ModalContent>
           <VStack align="start" p={5} spacing={2}>
@@ -90,7 +90,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             setDagParams={setDagParams}
           />
         </ModalContent>
-      </Modal>
+      </Dialog>
     </Box>
   );
 };
diff --git a/airflow/ui/src/components/DataTable/TriggerDAG.ts b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
similarity index 94%
rename from airflow/ui/src/components/DataTable/TriggerDAG.ts
rename to airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index 1147ededb6438..be7a4e3a4e1dc 100644
--- a/airflow/ui/src/components/DataTable/TriggerDAG.ts
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -24,7 +24,7 @@ type DagParams = {
   runId?: string;
 };
 
-export const TriggerDAG = (dagParams: DagParams) => {
+export const TriggerDag = (dagParams: DagParams) => {
   // TODO triggering logic
   console.log("Triggering DAG with parameters:", dagParams);
 };
diff --git a/airflow/ui/src/components/TriggerDag/index.ts b/airflow/ui/src/components/TriggerDag/index.ts
new file mode 100644
index 0000000000000..19e3b74eadd5d
--- /dev/null
+++ b/airflow/ui/src/components/TriggerDag/index.ts
@@ -0,0 +1,20 @@
+/*!
+ * 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.
+ */
+
+export { TriggerDag } from "./TriggerDag";
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index 7752b8b7af377..acfcfbcb15f11 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -28,7 +28,7 @@ import {
 import { Link as RouterLink } from "react-router-dom";
 
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
-import TriggerDAGModal from "src/components/DataTable/TriggerDAGModal";
+import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
 import { Tooltip } from "src/components/ui";
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index ecc6671cd7805..2d77d3a6caecb 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -36,7 +36,7 @@ import type {
 } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
 import { ToggleTableDisplay } from "src/components/DataTable/ToggleTableDisplay";
-import TriggerDAGModal from "src/components/DataTable/TriggerDAGModal";
+import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
 import type { CardDef } from "src/components/DataTable/types";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";

From db533b32871c3af8af5e53db02920f936182d0fd Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Mon, 4 Nov 2024 23:49:24 +0530
Subject: [PATCH 07/39] upgrading chakra ui 3.0 for TriggerDagForm.tsx

---
 airflow/ui/package.json                       |   2 +-
 .../components/TriggerDag/TriggerDAGForm.tsx  | 191 ++++++++----------
 .../components/TriggerDag/TriggerDAGModal.tsx |   2 +-
 airflow/ui/src/pages/DagsList/DagCard.tsx     |   8 +-
 airflow/ui/src/pages/DagsList/DagsList.tsx    |   2 +-
 5 files changed, 95 insertions(+), 110 deletions(-)

diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index faf047b9ece74..e4fdac9fbfa35 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -18,7 +18,7 @@
   "dependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^3.0.2",
-    "@codemirror/lang-json": "^6.0.1", 
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.0.0",
     "@codemirror/autocomplete": "^6.1.1",
     "@emotion/react": "^11.13.3",
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 35c526c735d89..2d424298377ac 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -17,24 +17,20 @@
  * under the License.
  */
 import {
-  FormControl,
-  FormLabel,
   Input,
   VStack,
-  ModalCloseButton,
+  Dialog,
   Button,
-  ModalFooter,
   Box,
   Text,
   Spacer,
-  HStack,
-  Collapse,
+  HStack
 } from "@chakra-ui/react";
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { oneDark } from "@codemirror/theme-one-dark";
 import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 
 type DagParams = {
@@ -65,7 +61,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     },
   });
 
-  // Store initial values to compare later
   const initialValues = {
     configJson: dagParams.configJson,
     logicalDate: dagParams.logicalDate,
@@ -78,13 +73,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     setValue("configJson", dagParams.configJson);
   }, [dagParams, setValue]);
 
-  const handleChange = useCallback(
-    (name: string, value: string) => {
-      setDagParams((prev) => ({ ...prev, [name]: value }));
-    },
-    [setDagParams],
-  );
-
   const handleReset = () => {
     setDagParams({
       configJson: "{}",
@@ -101,7 +89,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     onTrigger();
   };
 
-  // Function to check if the form has been modified
   const hasFormChanged = () => {
     const currentValues = {
       configJson: watch("configJson"),
@@ -116,7 +103,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     );
   };
 
-  // Check for valid JSON
   const isValidJson = () => {
     try {
       JSON.parse(watch("configJson"));
@@ -129,88 +115,89 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
   return (
     <>
-      <ModalCloseButton />
-
-      <VStack align="stretch" p={5} spacing={2}>
-        <Button
-          onClick={() => setShowDetails(!showDetails)}
-          variant="outline"
-          width="full"
-        >
-          {showDetails ? "Hide Advanced Options" : "Show Advanced Options"}
-        </Button>
-
-        <Collapse in={showDetails}>
-          <VStack align="stretch" spacing={3}>
-            <FormControl>
-              <FormLabel size="sm">Logical date</FormLabel>
-              <Controller
-                control={control}
-                name="logicalDate"
-                render={({ field }) => (
-                  <Input
-                    {...field}
-                    placeholder="yyyy-mm-ddThh:mm"
-                    size="sm"
-                    type="datetime-local"
-                  />
-                )}
-              />
-            </FormControl>
-
-            <FormControl>
-              <FormLabel size="sm">Run ID (Optional)</FormLabel>
-              <Controller
-                control={control}
-                name="runId"
-                render={({ field }) => (
-                  <Input
+      <Dialog.CloseTrigger />
+
+      <VStack align="stretch" gap={2} p={5}>
+      <Button
+        onClick={() => setShowDetails(!showDetails)}
+        variant="outline"
+        width="full"
+      >
+        {showDetails ? "Hide Advanced Options" : "Show Advanced Options"}
+      </Button>
+
+      {showDetails ? <VStack align="stretch" gap={3}>
+          <Box>
+            <Text fontSize="sm" mb={1}>Logical date</Text>
+            <Controller
+              control={control}
+              name="logicalDate"
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  placeholder="yyyy-mm-ddThh:mm"
+                  size="sm"
+                  type="datetime-local"
+                />
+              )}
+            />
+          </Box>
+
+          <Box>
+            <Text fontSize="sm" mb={1}>Run ID (Optional)</Text>
+            <Controller
+              control={control}
+              name="runId"
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  placeholder="Autogenerated if left empty"
+                  size="sm"
+                />
+              )}
+            />
+          </Box>
+
+          <Box>
+            <Text fontSize="sm" mb={1}>Configuration JSON</Text>
+            <Controller
+              control={control}
+              name="configJson"
+              render={({ field }) => (
+                <Box>
+                  <CodeMirror
                     {...field}
-                    placeholder="Autogenerated if left empty"
-                    size="sm"
+                    basicSetup
+                    extensions={[json(), autocompletion(), lineNumbers()]}
+                    height="200px"
+                    onChange={(value) => field.onChange(value)}
+                    style={{
+                      border: "1px solid #CBD5E0",
+                      borderRadius: "8px",
+                      outline: "none",
+                      padding: "2px",
+                    }}
+                    theme={oneDark}
                   />
-                )}
-              />
-            </FormControl>
-
-            <FormControl>
-              <FormLabel size="sm">Configuration JSON</FormLabel>
-              <Controller
-                control={control}
-                name="configJson"
-                render={({ field }) => (
-                  <Box>
-                    <CodeMirror
-                      {...field}
-                      basicSetup
-                      extensions={[json(), autocompletion(), lineNumbers()]}
-                      height="200px"
-                      onChange={(value) => {
-                        field.onChange(value); // Directly use field.onChange
-                      }}
-                      style={{
-                        border: "1px solid #CBD5E0",
-                        borderRadius: "8px",
-                        outline: "none",
-                        padding: "2px",
-                      }}
-                      theme={oneDark}
-                    />
-                    {/* Show warning if JSON is invalid */}
-                    {!isValidJson() && (
-                      <Box color="red.500" mt={2}>
-                        <Text fontSize="sm">Invalid JSON format.</Text>
-                      </Box>
-                    )}
-                  </Box>
-                )}
-              />
-            </FormControl>
-          </VStack>
-        </Collapse>
-      </VStack>
-
-      <ModalFooter>
+                  {!isValidJson() && (
+                    <Box color="red.500" mt={2}>
+                      <Text fontSize="sm">Invalid JSON format.</Text>
+                    </Box>
+                  )}
+                </Box>
+              )}
+            />
+          </Box>
+        </VStack> : undefined}
+    </VStack>
+
+      <Box
+        as="footer"
+        borderTopWidth="1px"
+        display="flex"
+        justifyContent="flex-end"
+        p={4}
+      >
         <HStack w="full">
           {hasFormChanged() && (
             <Button colorScheme="red" onClick={handleReset}>
@@ -220,17 +207,15 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           <Spacer />
           <Button
             colorScheme="green"
-            isDisabled={!isValidJson()} // Disable if JSON is invalid
-            onClick={() => {
-              void handleSubmit(onSubmit)();
-            }}
+            disabled={!isValidJson()}
+            onClick={() => void handleSubmit(onSubmit)()}
           >
             Trigger
           </Button>
         </HStack>
-      </ModalFooter>
+      </Box>
     </>
   );
 };
 
-export default TriggerDAGForm;
+export default TriggerDAGForm;
\ No newline at end of file
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 0877b6216ba8a..1a6cce620a631 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -29,8 +29,8 @@ import {
 import React, { useState } from "react";
 import { FiPlay } from "react-icons/fi";
 
-import { TriggerDag } from "./TriggerDag";
 import TriggerDAGForm from "./TriggerDAGForm";
+import { TriggerDag } from "./TriggerDag";
 
 type DagParams = {
   configJson: string;
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index acfcfbcb15f11..8d5e0f07b4ac9 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -28,9 +28,9 @@ import {
 import { Link as RouterLink } from "react-router-dom";
 
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
-import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
+import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
 import { Tooltip } from "src/components/ui";
 
 import { DagTags } from "./DagTags";
@@ -73,9 +73,9 @@ export const DagCard = ({ dag }: Props) => (
       <HStack>
         <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
         <TriggerDAGModal
-        dagDisplayName={dag.dag_display_name}
-        dagId={dag.dag_id}
-      />
+          dagDisplayName={dag.dag_display_name}
+          dagId={dag.dag_id}
+        />
       </HStack>
     </Flex>
     <SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index 2d77d3a6caecb..6336b8c068b32 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -36,13 +36,13 @@ import type {
 } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
 import { ToggleTableDisplay } from "src/components/DataTable/ToggleTableDisplay";
-import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
 import type { CardDef } from "src/components/DataTable/types";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import { SearchBar } from "src/components/SearchBar";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
+import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
 import { Select } from "src/components/ui";
 import {
   SearchParamsKeys,

From b363542101ed76e9d51da6a5c4cb35bea5df59d6 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Tue, 5 Nov 2024 00:08:21 +0530
Subject: [PATCH 08/39] upgrading chakra ui 3.0 for TriggerDagModal.tsx

---
 .../components/TriggerDag/TriggerDAGModal.tsx | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 1a6cce620a631..41b278fc5fa5a 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -16,10 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Dialog } from "src/components/ui";
 import {
-  Dialog,
-  ModalOverlay,
-  ModalContent,
   useDisclosure,
   Box,
   Text,
@@ -48,7 +46,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   dagDisplayName,
   dagId,
 }) => {
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { onClose, onOpen, open} = useDisclosure();
   const [dagParams, setDagParams] = useState<DagParams>({
     configJson: "{}",
     dagId,
@@ -67,30 +65,31 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
         <FiPlay />
       </Box>
 
-      <Dialog isOpen={isOpen} onClose={onClose} size="xl">
-        <ModalOverlay />
-        <ModalContent>
-          <VStack align="start" p={5} spacing={2}>
-            <Heading size="md">Trigger DAG</Heading>
+      <Dialog.Root onOpenChange={onClose} open={open} size="xl">
+        <Dialog.Content backdrop>
+          <Dialog.Header>
+            <VStack align="start" gap={2} p={5}>
+              <Heading size="md">Trigger DAG</Heading>
 
-            <Box>
-              <Heading mb={1} size="sm">
-                {dagDisplayName}
-              </Heading>
-              <Text color="gray.500" fontSize="xs">
-                DAG ID: {dagId}
-              </Text>
-            </Box>
-          </VStack>
+                <Heading mb={1} size="sm">
+                  {dagDisplayName}
+                </Heading>
+                <Text color="gray.500" fontSize="xs">
+                  DAG ID: {dagId}
+                </Text>
+            </VStack>
+          </Dialog.Header>
 
-          <TriggerDAGForm
-            dagParams={dagParams}
-            onClose={onClose}
-            onTrigger={handleTrigger}
-            setDagParams={setDagParams}
-          />
-        </ModalContent>
-      </Dialog>
+          <Dialog.Body>
+            <TriggerDAGForm
+              dagParams={dagParams}
+              onClose={onClose}
+              onTrigger={handleTrigger}
+              setDagParams={setDagParams}
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Root>
     </Box>
   );
 };

From 2c999fd75ce3f7e0f5726cbfcd5d5e0c5d3caf16 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Tue, 5 Nov 2024 00:14:05 +0530
Subject: [PATCH 09/39] fix lint

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 152 +++++++++---------
 .../components/TriggerDag/TriggerDAGModal.tsx |  27 ++--
 2 files changed, 91 insertions(+), 88 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 2d424298377ac..955aa68cf8959 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -24,7 +24,7 @@ import {
   Box,
   Text,
   Spacer,
-  HStack
+  HStack,
 } from "@chakra-ui/react";
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
@@ -118,78 +118,86 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
       <Dialog.CloseTrigger />
 
       <VStack align="stretch" gap={2} p={5}>
-      <Button
-        onClick={() => setShowDetails(!showDetails)}
-        variant="outline"
-        width="full"
-      >
-        {showDetails ? "Hide Advanced Options" : "Show Advanced Options"}
-      </Button>
-
-      {showDetails ? <VStack align="stretch" gap={3}>
-          <Box>
-            <Text fontSize="sm" mb={1}>Logical date</Text>
-            <Controller
-              control={control}
-              name="logicalDate"
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  placeholder="yyyy-mm-ddThh:mm"
-                  size="sm"
-                  type="datetime-local"
-                />
-              )}
-            />
-          </Box>
-
-          <Box>
-            <Text fontSize="sm" mb={1}>Run ID (Optional)</Text>
-            <Controller
-              control={control}
-              name="runId"
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  placeholder="Autogenerated if left empty"
-                  size="sm"
-                />
-              )}
-            />
-          </Box>
-
-          <Box>
-            <Text fontSize="sm" mb={1}>Configuration JSON</Text>
-            <Controller
-              control={control}
-              name="configJson"
-              render={({ field }) => (
-                <Box>
-                  <CodeMirror
+        <Button
+          onClick={() => setShowDetails(!showDetails)}
+          variant="outline"
+          width="full"
+        >
+          {showDetails ? "Hide Advanced Options" : "Show Advanced Options"}
+        </Button>
+
+        {showDetails ? (
+          <VStack align="stretch" gap={3}>
+            <Box>
+              <Text fontSize="sm" mb={1}>
+                Logical date
+              </Text>
+              <Controller
+                control={control}
+                name="logicalDate"
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    placeholder="yyyy-mm-ddThh:mm"
+                    size="sm"
+                    type="datetime-local"
+                  />
+                )}
+              />
+            </Box>
+
+            <Box>
+              <Text fontSize="sm" mb={1}>
+                Run ID (Optional)
+              </Text>
+              <Controller
+                control={control}
+                name="runId"
+                render={({ field }) => (
+                  <Input
                     {...field}
-                    basicSetup
-                    extensions={[json(), autocompletion(), lineNumbers()]}
-                    height="200px"
-                    onChange={(value) => field.onChange(value)}
-                    style={{
-                      border: "1px solid #CBD5E0",
-                      borderRadius: "8px",
-                      outline: "none",
-                      padding: "2px",
-                    }}
-                    theme={oneDark}
+                    placeholder="Autogenerated if left empty"
+                    size="sm"
                   />
-                  {!isValidJson() && (
-                    <Box color="red.500" mt={2}>
-                      <Text fontSize="sm">Invalid JSON format.</Text>
-                    </Box>
-                  )}
-                </Box>
-              )}
-            />
-          </Box>
-        </VStack> : undefined}
-    </VStack>
+                )}
+              />
+            </Box>
+
+            <Box>
+              <Text fontSize="sm" mb={1}>
+                Configuration JSON
+              </Text>
+              <Controller
+                control={control}
+                name="configJson"
+                render={({ field }) => (
+                  <Box>
+                    <CodeMirror
+                      {...field}
+                      basicSetup
+                      extensions={[json(), autocompletion(), lineNumbers()]}
+                      height="200px"
+                      onChange={(value) => field.onChange(value)}
+                      style={{
+                        border: "1px solid #CBD5E0",
+                        borderRadius: "8px",
+                        outline: "none",
+                        padding: "2px",
+                      }}
+                      theme={oneDark}
+                    />
+                    {!isValidJson() && (
+                      <Box color="red.500" mt={2}>
+                        <Text fontSize="sm">Invalid JSON format.</Text>
+                      </Box>
+                    )}
+                  </Box>
+                )}
+              />
+            </Box>
+          </VStack>
+        ) : undefined}
+      </VStack>
 
       <Box
         as="footer"
@@ -218,4 +226,4 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   );
 };
 
-export default TriggerDAGForm;
\ No newline at end of file
+export default TriggerDAGForm;
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 41b278fc5fa5a..573fcf01258cd 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -16,17 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Dialog } from "src/components/ui";
-import {
-  useDisclosure,
-  Box,
-  Text,
-  Heading,
-  VStack,
-} from "@chakra-ui/react";
+import { useDisclosure, Box, Text, Heading, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { FiPlay } from "react-icons/fi";
 
+import { Dialog } from "src/components/ui";
+
 import TriggerDAGForm from "./TriggerDAGForm";
 import { TriggerDag } from "./TriggerDag";
 
@@ -34,7 +29,7 @@ type DagParams = {
   configJson: string;
   dagId: string;
   logicalDate: string;
-  runId?: string;
+  runId: string;
 };
 
 type TriggerDAGModalProps = {
@@ -46,7 +41,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   dagDisplayName,
   dagId,
 }) => {
-  const { onClose, onOpen, open} = useDisclosure();
+  const { onClose, onOpen, open } = useDisclosure();
   const [dagParams, setDagParams] = useState<DagParams>({
     configJson: "{}",
     dagId,
@@ -71,12 +66,12 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             <VStack align="start" gap={2} p={5}>
               <Heading size="md">Trigger DAG</Heading>
 
-                <Heading mb={1} size="sm">
-                  {dagDisplayName}
-                </Heading>
-                <Text color="gray.500" fontSize="xs">
-                  DAG ID: {dagId}
-                </Text>
+              <Heading mb={1} size="sm">
+                {dagDisplayName}
+              </Heading>
+              <Text color="gray.500" fontSize="xs">
+                DAG ID: {dagId}
+              </Text>
             </VStack>
           </Dialog.Header>
 

From 91b87dacaa8694782f6717675ab6773c62cb7ea4 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Tue, 5 Nov 2024 00:52:41 +0530
Subject: [PATCH 10/39] fix css

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 19 +++++++------------
 .../components/TriggerDag/TriggerDAGModal.tsx | 10 ++++------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 955aa68cf8959..8e1a71e42f47d 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -117,8 +117,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     <>
       <Dialog.CloseTrigger />
 
-      <VStack align="stretch" gap={2} p={5}>
+      <VStack align="stretch" gap={2}>
         <Button
+          mb={9}
           onClick={() => setShowDetails(!showDetails)}
           variant="outline"
           width="full"
@@ -129,7 +130,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
         {showDetails ? (
           <VStack align="stretch" gap={3}>
             <Box>
-              <Text fontSize="sm" mb={1}>
+              <Text fontSize="md" mb={2}>
                 Logical date
               </Text>
               <Controller
@@ -147,7 +148,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
             </Box>
 
             <Box>
-              <Text fontSize="sm" mb={1}>
+              <Text fontSize="md" mb={2}>
                 Run ID (Optional)
               </Text>
               <Controller
@@ -163,8 +164,8 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
               />
             </Box>
 
-            <Box>
-              <Text fontSize="sm" mb={1}>
+            <Box mb={9}>
+              <Text fontSize="md" mb={2}>
                 Configuration JSON
               </Text>
               <Controller
@@ -199,13 +200,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
         ) : undefined}
       </VStack>
 
-      <Box
-        as="footer"
-        borderTopWidth="1px"
-        display="flex"
-        justifyContent="flex-end"
-        p={4}
-      >
+      <Box as="footer" display="flex" justifyContent="flex-end">
         <HStack w="full">
           {hasFormChanged() && (
             <Button colorScheme="red" onClick={handleReset}>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 573fcf01258cd..4f9154fe13a08 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -63,13 +63,11 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
       <Dialog.Root onOpenChange={onClose} open={open} size="xl">
         <Dialog.Content backdrop>
           <Dialog.Header>
-            <VStack align="start" gap={2} p={5}>
-              <Heading size="md">Trigger DAG</Heading>
+            <VStack align="start" gap={2}>
+              <Heading size="xl">Trigger DAG</Heading>
 
-              <Heading mb={1} size="sm">
-                {dagDisplayName}
-              </Heading>
-              <Text color="gray.500" fontSize="xs">
+              <Heading size="md">{dagDisplayName}</Heading>
+              <Text color="gray.500" fontSize="sm">
                 DAG ID: {dagId}
               </Text>
             </VStack>

From 144f39b44eb943355b8fcf1d7f59998cb735f185 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Tue, 5 Nov 2024 01:04:11 +0530
Subject: [PATCH 11/39] add close

---
 airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 4f9154fe13a08..ec00f819cef21 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -73,6 +73,8 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             </VStack>
           </Dialog.Header>
 
+          <Dialog.CloseTrigger />
+
           <Dialog.Body>
             <TriggerDAGForm
               dagParams={dagParams}

From da9e4176ae91d3a68862c7839fca3ccd8d431b62 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 6 Nov 2024 00:33:35 +0530
Subject: [PATCH 12/39] dynamic theme for json

---
 airflow/ui/package.json                       |   3 +
 airflow/ui/pnpm-lock.yaml                     | 628 ++++++++++++++++++
 .../components/TriggerDag/TriggerDAGForm.tsx  |   9 +-
 3 files changed, 638 insertions(+), 2 deletions(-)

diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index e4fdac9fbfa35..942c085c56529 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -25,6 +25,7 @@
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
     "@uiw/react-codemirror": "^4.23.5",
+    "@uiw/codemirror-themes-all": "^4.23.5",
     "axios": "^1.7.7",
     "chakra-react-select": "6.0.0-next.2",
     "dayjs": "^1.11.13",
@@ -34,6 +35,7 @@
     "react-hook-form": "^7.20.0",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
+    "react-syntax-highlighter": "^15.5.6",
     "use-debounce": "^10.0.3",
     "usehooks-ts": "^3.1.0"
   },
@@ -49,6 +51,7 @@
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/coverage-v8": "^2.1.1",
     "eslint": "^9.10.0",
diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index d6ba8453d16d5..a58682d51fc2f 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.20.1
         version: 8.20.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uiw/codemirror-themes-all':
+        specifier: ^4.23.5
+        version: 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@uiw/react-codemirror':
         specifier: ^4.23.5
         version: 4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -62,6 +65,9 @@ importers:
       react-router-dom:
         specifier: ^6.26.2
         version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-syntax-highlighter:
+        specifier: ^15.5.6
+        version: 15.6.1(react@18.3.1)
       use-debounce:
         specifier: ^10.0.3
         version: 10.0.3(react@18.3.1)
@@ -102,6 +108,9 @@ importers:
       '@types/react-dom':
         specifier: ^18.3.0
         version: 18.3.0
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.0
         version: 3.7.0(@swc/helpers@0.5.13)(vite@5.4.6(@types/node@22.5.4))
@@ -894,6 +903,9 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -912,12 +924,18 @@ packages:
   '@types/react-dom@18.3.0':
     resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
 
+  '@types/react-syntax-highlighter@15.5.13':
+    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
+
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
 
   '@types/react@18.3.5':
     resolution: {integrity: sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
   '@typescript-eslint/eslint-plugin@8.5.0':
     resolution: {integrity: sha512-lHS5hvz33iUFQKuPFGheAB84LwcJ60G8vKnEhnfcK1l8kGVLro2SFYW6K0/tj8FUhRJ0VHyg1oAfg50QGbPPHw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1013,6 +1031,121 @@ packages:
       '@codemirror/state': '>=6.0.0'
       '@codemirror/view': '>=6.0.0'
 
+  '@uiw/codemirror-theme-abcdef@4.23.6':
+    resolution: {integrity: sha512-0RIwTzU4E0duFQcbWfPRm0cgsYbh/F5hJQlTW8BQc+keAIHD+Xsu8BQ7CEMQ6GCReQ2q2BkAhXhd2sPjxmuNsg==}
+
+  '@uiw/codemirror-theme-abyss@4.23.6':
+    resolution: {integrity: sha512-ds7zpQp1dRrtw95sAYCH/Nzv6wNIxrZgV2phQBNKI21cvDtwO9wPKOE/FJ0HXZJw/2mETU4SDArSyx0qSu7AuA==}
+
+  '@uiw/codemirror-theme-androidstudio@4.23.6':
+    resolution: {integrity: sha512-F6cwQFCGmUdnD6KWkH2FtPkk8etqtAbXfYrzz7LNJz0jF6oKmP4V0QNLUamWRoTSz6/ajxGDIM+XqUUDch8NBg==}
+
+  '@uiw/codemirror-theme-andromeda@4.23.6':
+    resolution: {integrity: sha512-hBuFqye+jy6yA5rqa/K/mUqoE/gApyAN1q2jtio1wjqaz/Zr/uXBDhF9q0BrEvCzO1FguOwkXxnNC497dSsV2g==}
+
+  '@uiw/codemirror-theme-atomone@4.23.6':
+    resolution: {integrity: sha512-ANshtKtQ9xbX66V0gzZ3pO+ewUWpVzqPAhOdN0Rl4gzkpyysUxHNsrzXkVbJLtXD15ZoAGuNdwPRMsrrEUnmwg==}
+
+  '@uiw/codemirror-theme-aura@4.23.6':
+    resolution: {integrity: sha512-YfReFeT49tjAF1Mxl99xJwMVJGPpQql3zP5Qei64q8Ud8YLbg8fvtAdlxxICA9QlNfu1lHYxyi7oxOA4Zj8G7g==}
+
+  '@uiw/codemirror-theme-basic@4.23.6':
+    resolution: {integrity: sha512-davfdPZV5xRIRSxM1Z1CQmR/rRfWyqdv9WS2hzIcwgjdeH7018I88+mGKyx5tWvgjHhjyTTTkLzDVo4+ygarVQ==}
+
+  '@uiw/codemirror-theme-bbedit@4.23.6':
+    resolution: {integrity: sha512-hyUJbLMt/TZ4iptffDPGI796taU1oJqUgFrKOpaC/Sjrun4sJllufOkfcQ3sEIYsY0rHb7G5dngzGLAv1vJw+g==}
+
+  '@uiw/codemirror-theme-bespin@4.23.6':
+    resolution: {integrity: sha512-xyNXOQtBAqO6YNJ3eCVgFSnUXdfvb3pjhOp1uegpEopaY89dPJ01x5DiFY5Za9X5wl0kmVzAowrGHOIOWKzT3Q==}
+
+  '@uiw/codemirror-theme-console@4.23.6':
+    resolution: {integrity: sha512-MCfhHFcbQGX92zJqGimTa2uPFbRMSjynfriWCgs5/JzhNcTGDjYLWF5N5jkglVv6bgcbKkpBfkLythrbgMg6Ew==}
+
+  '@uiw/codemirror-theme-copilot@4.23.6':
+    resolution: {integrity: sha512-XtZxiu7IuLu2aTCMxayA14ZSQdJ0cgxh2BRl0Ve0hJAmfNyKmUeAVEgMbrukVguZQDvncLNuJve349ZEWvntkA==}
+
+  '@uiw/codemirror-theme-darcula@4.23.6':
+    resolution: {integrity: sha512-UiTp3XIxzXtne3vL2A+8ekw7M4+7K5bnoDnm00Gqw1eg1eiGmXflFvU0t1JO8xqVgXQ3iKFG5GJgfjWxkxXXXQ==}
+
+  '@uiw/codemirror-theme-dracula@4.23.6':
+    resolution: {integrity: sha512-G6XMgumD5ccbwgW/hATZtG3mAGwTA4pHaFQFIXOvbrTmqKeJyDyDFW6POtTjkQDk2221lsL1M4AXnrO/4WyyEQ==}
+
+  '@uiw/codemirror-theme-duotone@4.23.6':
+    resolution: {integrity: sha512-dUFTdSIAipLbo4pqVpMPhRaty9uIQCz2AdKLCJ6QA1BV8gu733v/7zNUjAvVEcS3lJiDhPT3rHpQ0Cg+AhoHgA==}
+
+  '@uiw/codemirror-theme-eclipse@4.23.6':
+    resolution: {integrity: sha512-vZZgmzNNVcKxNeLaYugiO3KUa8k4wUJ1iZDOex4UpYtCy6LJT+gw/yjQDyKyMOPQ4ec5hblnlU/2HEpbt/bHFA==}
+
+  '@uiw/codemirror-theme-github@4.23.6':
+    resolution: {integrity: sha512-p74sbyuDo7JsYlGWNtyNyJSyr9N4niCPGqYreQhoAk2C6c4JXi0sGwZRlHd8KyynsxCdSA9L727SADOuukD1Ug==}
+
+  '@uiw/codemirror-theme-gruvbox-dark@4.23.6':
+    resolution: {integrity: sha512-JewBdHLmFNInkIgP7rjDCuZaMXoX8Ez6JpPSwPE9F37JWTVInIOz/7lgw87DoSBCoYGIAhzqB4t4CSgMegQefQ==}
+
+  '@uiw/codemirror-theme-kimbie@4.23.6':
+    resolution: {integrity: sha512-xt6ep5/p/s3ru7da9gFz9vwEwGItZYja3C9rUoD7U/1cpZahWZD4WnGLr4e32bWL626NJRay9loo5c2189j67Q==}
+
+  '@uiw/codemirror-theme-material@4.23.6':
+    resolution: {integrity: sha512-QmFXWseYRPXPJZXG7bNxCIfGhIUQr7OmaBC41uBKttFMNWo09R+xjo7vtkdNeJwGBXySC7ZC4k0FS13jjrPTZw==}
+
+  '@uiw/codemirror-theme-monokai-dimmed@4.23.6':
+    resolution: {integrity: sha512-vBU/qkZGO33XV3L906XycFinNuEtbdAVoykIEv1bvOwtWTBkKT9O9UvsmMGgTgexmsj0Cud/z8OIw9Gc6ver0Q==}
+
+  '@uiw/codemirror-theme-monokai@4.23.6':
+    resolution: {integrity: sha512-Uppctg7VkZR9UlVrWLqCtS7IQVC6s+tHrwyXvptgxJ3xl2+d/ZE1B6GpY0bDb0bfZgXTEHnTif5FRPoRPxSmgg==}
+
+  '@uiw/codemirror-theme-noctis-lilac@4.23.6':
+    resolution: {integrity: sha512-CCcZ2kunWFa0DY/V8SsAOx1f/pJYU5tUWAfj3EEQ/p6ToBYGecIZwDpMkPK7FFbIVJBMY4Zk2bN3vpEkn6yZog==}
+
+  '@uiw/codemirror-theme-nord@4.23.6':
+    resolution: {integrity: sha512-FVEKU5yqFzeydTVX8mfBQ84drAf3Fk+HvUg4RV6ZGgg+gGIp9hOhvq8z6NhGU3hLyskV+unXLzjOO4BA0hnCUQ==}
+
+  '@uiw/codemirror-theme-okaidia@4.23.6':
+    resolution: {integrity: sha512-naQ8MqA4lkKPadS+RjZeTVvwfLT3QgpAXgco6Rh7HwL0lpqXheshANHl996/RV1c1udXbrhpBX8DoepYwNlMgg==}
+
+  '@uiw/codemirror-theme-quietlight@4.23.6':
+    resolution: {integrity: sha512-IVSmXAU/E+VB1nlD46mSa2QtX1pUKLWdUtxGZBskPMTRUHsYHX2C9a7uuT1ckFy5NrheMy2Z60zicMWxWknvDg==}
+
+  '@uiw/codemirror-theme-red@4.23.6':
+    resolution: {integrity: sha512-7rkE+AxlXNzO/DESIVo5AyP+kV8154DTxLzbF7ypeZasmFK9FCq0uOThJcfahhJQmTwqIf4C5ue5/0qmkAbjaw==}
+
+  '@uiw/codemirror-theme-solarized@4.23.6':
+    resolution: {integrity: sha512-6iHNePJEtbZeJcEaMeMQExz9nfC9nZ0UlxBHuT7aqTqmvE/iztrtzAoyJftES5iOCIg787H98m9BRzIyjDvPyQ==}
+
+  '@uiw/codemirror-theme-sublime@4.23.6':
+    resolution: {integrity: sha512-WGiYF9n7B1UMtVygTYvZ3ukaW98n7Xakj3kFplG9vhT7KUsHGZnExaTKXy/8eHPfMoe5rONQc7KJOiJzq789qA==}
+
+  '@uiw/codemirror-theme-tokyo-night-day@4.23.6':
+    resolution: {integrity: sha512-9qVLLd/gUn6eAqSQwctgxsDKr6aNs4nZ5Sac+aQN7L92NKg5tpnfHaCWot323a0FUTc6jKC52TeUyxJGJlp6AA==}
+
+  '@uiw/codemirror-theme-tokyo-night-storm@4.23.6':
+    resolution: {integrity: sha512-vn2GrMCnqrnbMfVT0AMUhG3J71f2rlin0IDVIEuByDD9PMeackdQDvGWz8z3AK3ZVdimZOZA0hr7Pwg1du1qAw==}
+
+  '@uiw/codemirror-theme-tokyo-night@4.23.6':
+    resolution: {integrity: sha512-AS7dwUEVPUo31W36eoABz3S8Y6e0bpqpprAeZ3J5JqTKwPgA9M66l3pfilZnoNHZm5KZIasH/a7guFWfUmG3Rw==}
+
+  '@uiw/codemirror-theme-tomorrow-night-blue@4.23.6':
+    resolution: {integrity: sha512-yfgz2vE5w8e5gTSFgpfelAqOrTRlouVkmFzh6QD+sGQLNiQhq0F5x/20vyZ1a6HFnwuqGXoaiddAz8Rv9dyT9A==}
+
+  '@uiw/codemirror-theme-vscode@4.23.6':
+    resolution: {integrity: sha512-xUo1ic+Kk5hnv5gy+cXU12GZVSnDjic8s8weKq8loPHF1dSR1e6gkKVIKZRnvoOZ302taKRk7phWpBUaWIuKQg==}
+
+  '@uiw/codemirror-theme-white@4.23.6':
+    resolution: {integrity: sha512-plBzEU7QOh8pm3JIxJLJ4YWxIB8t0DPOQrTABzMfFxjdGoGIMe+a/J4zhYdVslSVmwGBXbKDAj5TFqnS/1wrzQ==}
+
+  '@uiw/codemirror-theme-xcode@4.23.6':
+    resolution: {integrity: sha512-t4shD5Cq6e1mqzG6w/+oMCw3oXn6QSbYZbCHDZ7GrbN51f6ZttKVOSZgUInlNeh9Spbvag8ZE5osMFFv6+twcQ==}
+
+  '@uiw/codemirror-themes-all@4.23.6':
+    resolution: {integrity: sha512-fWIJURMecjBFuP2KfPrEHv9WeDLVnihVJC30WEUs/w0e5Npc4dbEMFzL5i2KMf2C41Kftp3hGblftYS4YaZ8fw==}
+
+  '@uiw/codemirror-themes@4.23.6':
+    resolution: {integrity: sha512-0dpuLQW+V6zrKvfvor/eo71V3tpr2L2Hsu8QZAdtSzksjWABxTOzH3ShaBRxCEsrz6sU9sa9o7ShwBMMDz59bQ==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
   '@uiw/react-codemirror@4.23.5':
     resolution: {integrity: sha512-2zzGpx61L4mq9zDG/hfsO4wAH209TBE8VVsoj/qrccRe6KfcneCwKgRxtQjxBCCnO0Q5S+IP+uwCx5bXRzgQFQ==}
     peerDependencies:
@@ -1652,6 +1785,15 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+
+  character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+
+  character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
@@ -1698,6 +1840,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
@@ -2031,6 +2176,9 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -2083,6 +2231,10 @@ packages:
     resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
     engines: {node: '>= 6'}
 
+  format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+
   fs-minipass@2.1.0:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
     engines: {node: '>= 8'}
@@ -2203,6 +2355,18 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-parse-selector@2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+
+  hastscript@6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
+  highlightjs-vue@1.0.0:
+    resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
+
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
@@ -2236,6 +2400,12 @@ packages:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
 
+  is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+
+  is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+
   is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -2282,6 +2452,9 @@ packages:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2301,6 +2474,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -2481,6 +2657,9 @@ packages:
   loupe@3.1.1:
     resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
 
+  lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -2696,6 +2875,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -2789,9 +2971,20 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+
   proxy-compare@3.0.0:
     resolution: {integrity: sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w==}
 
@@ -2852,6 +3045,11 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  react-syntax-highlighter@15.6.1:
+    resolution: {integrity: sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -2882,6 +3080,9 @@ packages:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
 
+  refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -2988,6 +3189,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -3337,6 +3541,10 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -4172,6 +4380,10 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/hast@2.3.10':
+    dependencies:
+      '@types/unist': 2.0.11
+
   '@types/json-schema@7.0.15': {}
 
   '@types/node@22.5.4':
@@ -4188,6 +4400,10 @@ snapshots:
     dependencies:
       '@types/react': 18.3.5
 
+  '@types/react-syntax-highlighter@15.5.13':
+    dependencies:
+      '@types/react': 18.3.5
+
   '@types/react-transition-group@4.4.11':
     dependencies:
       '@types/react': 18.3.5
@@ -4197,6 +4413,8 @@ snapshots:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
 
+  '@types/unist@2.0.11': {}
+
   '@typescript-eslint/eslint-plugin@8.5.0(@typescript-eslint/parser@8.5.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4))(eslint@9.10.0(jiti@1.21.6))(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -4326,6 +4544,335 @@ snapshots:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
 
+  '@uiw/codemirror-theme-abcdef@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-abyss@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-androidstudio@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-andromeda@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-atomone@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-aura@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-basic@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-bbedit@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-bespin@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-console@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-copilot@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-darcula@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-dracula@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-duotone@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-eclipse@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-github@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-gruvbox-dark@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-kimbie@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-material@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-monokai-dimmed@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-monokai@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-noctis-lilac@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-nord@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-okaidia@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-quietlight@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-red@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-solarized@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-sublime@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-tokyo-night-day@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-tokyo-night-storm@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-tokyo-night@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-tomorrow-night-blue@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-vscode@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-white@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-xcode@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-themes-all@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@uiw/codemirror-theme-abcdef': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-abyss': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-androidstudio': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-andromeda': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-atomone': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-aura': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-basic': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-bbedit': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-bespin': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-console': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-copilot': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-darcula': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-dracula': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-duotone': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-eclipse': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-github': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-gruvbox-dark': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-kimbie': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-material': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-monokai': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-monokai-dimmed': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-noctis-lilac': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-nord': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-okaidia': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-quietlight': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-red': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-solarized': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-sublime': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-tokyo-night': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-tokyo-night-day': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-tokyo-night-storm': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-tomorrow-night-blue': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-vscode': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-white': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-theme-xcode': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-themes': 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-themes@4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.34.1
+
   '@uiw/react-codemirror@4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
@@ -5590,6 +6137,12 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-legacy@1.1.4: {}
+
+  character-entities@1.2.4: {}
+
+  character-reference-invalid@1.1.4: {}
+
   check-error@2.1.1: {}
 
   chokidar@3.6.0:
@@ -5646,6 +6199,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@1.0.8: {}
+
   commander@12.1.0: {}
 
   concat-map@0.0.1: {}
@@ -6122,6 +6677,10 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fault@1.0.4:
+    dependencies:
+      format: 0.2.2
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -6174,6 +6733,8 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  format@0.2.2: {}
+
   fs-minipass@2.1.0:
     dependencies:
       minipass: 3.3.6
@@ -6310,6 +6871,20 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-parse-selector@2.2.5: {}
+
+  hastscript@6.0.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+
+  highlight.js@10.7.3: {}
+
+  highlightjs-vue@1.0.0: {}
+
   hoist-non-react-statics@3.3.2:
     dependencies:
       react-is: 16.13.1
@@ -6337,6 +6912,13 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.0.6
 
+  is-alphabetical@1.0.4: {}
+
+  is-alphanumerical@1.0.4:
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+
   is-arguments@1.1.1:
     dependencies:
       call-bind: 1.0.7
@@ -6384,6 +6966,8 @@ snapshots:
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-decimal@1.0.4: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.0.2:
@@ -6400,6 +6984,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@1.0.4: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
@@ -6563,6 +7149,11 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
+  lowlight@1.20.0:
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+
   lru-cache@10.4.3: {}
 
   lru-cache@11.0.2: {}
@@ -6763,6 +7354,15 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-entities@2.0.0:
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -6838,12 +7438,20 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  prismjs@1.27.0: {}
+
+  prismjs@1.29.0: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@5.6.0:
+    dependencies:
+      xtend: 4.0.2
+
   proxy-compare@3.0.0: {}
 
   proxy-from-env@1.1.0: {}
@@ -6908,6 +7516,16 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  react-syntax-highlighter@15.6.1(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.6
+      highlight.js: 10.7.3
+      highlightjs-vue: 1.0.0
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.3.1
+      refractor: 3.6.0
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.25.6
@@ -6953,6 +7571,12 @@ snapshots:
       globalthis: 1.0.4
       which-builtin-type: 1.1.4
 
+  refractor@3.6.0:
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+
   regenerator-runtime@0.14.1: {}
 
   regexp-tree@0.1.27: {}
@@ -7074,6 +7698,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@1.1.5: {}
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
@@ -7462,6 +8088,8 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.0
 
+  xtend@4.0.2: {}
+
   yallist@4.0.0: {}
 
   yaml@1.10.2: {}
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 8e1a71e42f47d..39bd739c0d6a3 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -28,11 +28,13 @@ import {
 } from "@chakra-ui/react";
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
-import { oneDark } from "@codemirror/theme-one-dark";
+import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 
+import { useColorMode } from "src/context/colorMode";
+
 type DagParams = {
   configJson: string;
   dagId: string;
@@ -113,6 +115,8 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     }
   };
 
+  const { colorMode } = useColorMode();
+
   return (
     <>
       <Dialog.CloseTrigger />
@@ -185,7 +189,8 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         outline: "none",
                         padding: "2px",
                       }}
-                      theme={oneDark}
+                       
+                      theme={colorMode === "dark" ? githubDark : githubLight}
                     />
                     {!isValidJson() && (
                       <Box color="red.500" mt={2}>

From 9e1e64f38f5f4b306cc9c0bdba8e3e3629b1dd56 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 6 Nov 2024 02:15:55 +0530
Subject: [PATCH 13/39] lint fix

---
 airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx | 6 +++---
 airflow/ui/src/components/TriggerDag/TriggerDag.tsx     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 39bd739c0d6a3..3dbc9dbf15de8 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -29,7 +29,7 @@ import {
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
-import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
+import CodeMirror, { type Extension, lineNumbers } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 
@@ -189,8 +189,8 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         outline: "none",
                         padding: "2px",
                       }}
-                       
-                      theme={colorMode === "dark" ? githubDark : githubLight}
+
+                      theme={colorMode === "dark" ? githubDark as Extension : githubLight as Extension}
                     />
                     {!isValidJson() && (
                       <Box color="red.500" mt={2}>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index be7a4e3a4e1dc..f2400b4c05b72 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -21,7 +21,7 @@ type DagParams = {
   configJson: string;
   dagId: string;
   logicalDate: string;
-  runId?: string;
+  runId: string;
 };
 
 export const TriggerDag = (dagParams: DagParams) => {

From 4dbefc5302f1ec381c1badd4fce8456b0179a990 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 6 Nov 2024 02:18:15 +0530
Subject: [PATCH 14/39] simplify reset

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 40 +++++--------------
 1 file changed, 11 insertions(+), 29 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 3dbc9dbf15de8..4530a6c2bc839 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -51,11 +51,10 @@ type TriggerDAGFormProps = {
 
 const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   dagParams,
-  onTrigger,
-  setDagParams,
+  onTrigger
 }) => {
   const [showDetails, setShowDetails] = useState(false);
-  const { control, handleSubmit, setValue, watch } = useForm({
+  const { control, handleSubmit, reset, watch } = useForm({
     defaultValues: {
       configJson: dagParams.configJson,
       logicalDate: dagParams.logicalDate,
@@ -63,29 +62,13 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     },
   });
 
-  const initialValues = {
-    configJson: dagParams.configJson,
-    logicalDate: dagParams.logicalDate,
-    runId: dagParams.runId,
-  };
-
   useEffect(() => {
-    setValue("logicalDate", dagParams.logicalDate);
-    setValue("runId", dagParams.runId);
-    setValue("configJson", dagParams.configJson);
-  }, [dagParams, setValue]);
-
-  const handleReset = () => {
-    setDagParams({
-      configJson: "{}",
-      dagId: dagParams.dagId,
-      logicalDate: "",
-      runId: "",
+    reset({
+      configJson: dagParams.configJson,
+      logicalDate: dagParams.logicalDate,
+      runId: dagParams.runId,
     });
-    setValue("logicalDate", "");
-    setValue("runId", "");
-    setValue("configJson", "{}");
-  };
+  }, [dagParams, reset]);
 
   const onSubmit = () => {
     onTrigger();
@@ -99,9 +82,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     };
 
     return (
-      currentValues.configJson !== initialValues.configJson ||
-      currentValues.logicalDate !== initialValues.logicalDate ||
-      currentValues.runId !== initialValues.runId
+      currentValues.configJson !== dagParams.configJson ||
+      currentValues.logicalDate !== dagParams.logicalDate ||
+      currentValues.runId !== dagParams.runId
     );
   };
 
@@ -189,7 +172,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         outline: "none",
                         padding: "2px",
                       }}
-
                       theme={colorMode === "dark" ? githubDark as Extension : githubLight as Extension}
                     />
                     {!isValidJson() && (
@@ -208,7 +190,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
       <Box as="footer" display="flex" justifyContent="flex-end">
         <HStack w="full">
           {hasFormChanged() && (
-            <Button colorScheme="red" onClick={handleReset}>
+            <Button colorScheme="red" onClick={() => reset()}>
               Reset
             </Button>
           )}

From 29eb4dea2aa01fbd3121a7cdbb3339c0c4aab62a Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 6 Nov 2024 02:49:19 +0530
Subject: [PATCH 15/39] reviews

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 20 +++++++------------
 .../components/TriggerDag/TriggerDAGModal.tsx | 11 ++--------
 .../src/components/TriggerDag/TriggerDag.tsx  |  4 ++--
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 4530a6c2bc839..9898e59abd364 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -32,16 +32,9 @@ import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror, { type Extension, lineNumbers } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
-
+import type { DagParams } from "./TriggerDag";
 import { useColorMode } from "src/context/colorMode";
 
-type DagParams = {
-  configJson: string;
-  dagId: string;
-  logicalDate: string;
-  runId: string;
-};
-
 type TriggerDAGFormProps = {
   dagParams: DagParams;
   onClose: () => void;
@@ -54,9 +47,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   onTrigger
 }) => {
   const [showDetails, setShowDetails] = useState(false);
+  
   const { control, handleSubmit, reset, watch } = useForm({
     defaultValues: {
-      configJson: dagParams.configJson,
+      configJson: JSON.stringify(dagParams.configJson),
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
     },
@@ -64,7 +58,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
   useEffect(() => {
     reset({
-      configJson: dagParams.configJson,
+      configJson: JSON.stringify(dagParams.configJson),
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
     });
@@ -82,7 +76,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     };
 
     return (
-      currentValues.configJson !== dagParams.configJson ||
+      currentValues.configJson !== JSON.stringify(dagParams.configJson) ||
       currentValues.logicalDate !== dagParams.logicalDate ||
       currentValues.runId !== dagParams.runId
     );
@@ -136,7 +130,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
             <Box>
               <Text fontSize="md" mb={2}>
-                Run ID (Optional)
+                Run ID
               </Text>
               <Controller
                 control={control}
@@ -144,7 +138,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 render={({ field }) => (
                   <Input
                     {...field}
-                    placeholder="Autogenerated if left empty"
+                    placeholder="Run id, optional - will be generated if not provided"
                     size="sm"
                   />
                 )}
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index ec00f819cef21..3c6edc34d7afd 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -19,19 +19,12 @@
 import { useDisclosure, Box, Text, Heading, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { FiPlay } from "react-icons/fi";
-
+import type { DagParams } from "./TriggerDag";
 import { Dialog } from "src/components/ui";
 
 import TriggerDAGForm from "./TriggerDAGForm";
 import { TriggerDag } from "./TriggerDag";
 
-type DagParams = {
-  configJson: string;
-  dagId: string;
-  logicalDate: string;
-  runId: string;
-};
-
 type TriggerDAGModalProps = {
   dagDisplayName: string;
   dagId: string;
@@ -43,7 +36,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
 }) => {
   const { onClose, onOpen, open } = useDisclosure();
   const [dagParams, setDagParams] = useState<DagParams>({
-    configJson: "{}",
+    configJson: {},
     dagId,
     logicalDate: "",
     runId: "",
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index f2400b4c05b72..af381ee11c404 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-type DagParams = {
-  configJson: string;
+export type DagParams = {
+  configJson: Record<string, string>;
   dagId: string;
   logicalDate: string;
   runId: string;

From 7f2ada01d498e75c1e81b9e992d2a0b0ca97c590 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 6 Nov 2024 02:53:59 +0530
Subject: [PATCH 16/39] json validation

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 9898e59abd364..0418eb4e7d4e8 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -47,10 +47,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   onTrigger
 }) => {
   const [showDetails, setShowDetails] = useState(false);
-  
+  const [jsonError, setJsonError] = useState<string | undefined>(undefined);  // Track JSON error
   const { control, handleSubmit, reset, watch } = useForm({
     defaultValues: {
-      configJson: JSON.stringify(dagParams.configJson),
+      configJson: JSON.stringify(dagParams.configJson), // Ensure it's a string in the form control
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
     },
@@ -82,16 +82,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     );
   };
 
-  const isValidJson = () => {
-    try {
-      JSON.parse(watch("configJson"));
-
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
   const { colorMode } = useColorMode();
 
   return (
@@ -159,7 +149,16 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       basicSetup
                       extensions={[json(), autocompletion(), lineNumbers()]}
                       height="200px"
-                      onChange={(value) => field.onChange(value)}
+                      onChange={(value) => {
+                        field.onChange(value);  // Update the form state
+                        try {
+                          // Attempt to parse the value as JSON
+                          JSON.parse(value);
+                          setJsonError(undefined);  // Clear error if JSON is valid
+                        } catch {
+                          setJsonError("Invalid JSON format.");  // Set error message if invalid
+                        }
+                      }}
                       style={{
                         border: "1px solid #CBD5E0",
                         borderRadius: "8px",
@@ -168,11 +167,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       }}
                       theme={colorMode === "dark" ? githubDark as Extension : githubLight as Extension}
                     />
-                    {!isValidJson() && (
-                      <Box color="red.500" mt={2}>
-                        <Text fontSize="sm">Invalid JSON format.</Text>
-                      </Box>
-                    )}
+                    {jsonError! ? <Box color="red.500" mt={2}>
+                        <Text fontSize="sm">{jsonError}</Text>
+                      </Box> : undefined}
                   </Box>
                 )}
               />
@@ -191,7 +188,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           <Spacer />
           <Button
             colorScheme="green"
-            disabled={!isValidJson()}
+            disabled={Boolean(jsonError)}  // Disable if there's an error
             onClick={() => void handleSubmit(onSubmit)()}
           >
             Trigger

From 2f5e7d9ffeef06318bf38a6487361e368863fc1d Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 6 Nov 2024 02:58:24 +0530
Subject: [PATCH 17/39] remove color schema

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 35 ++++++++++---------
 .../components/TriggerDag/TriggerDAGModal.tsx |  3 +-
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 0418eb4e7d4e8..854fbc834938b 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -32,9 +32,11 @@ import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror, { type Extension, lineNumbers } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
-import type { DagParams } from "./TriggerDag";
+
 import { useColorMode } from "src/context/colorMode";
 
+import type { DagParams } from "./TriggerDag";
+
 type TriggerDAGFormProps = {
   dagParams: DagParams;
   onClose: () => void;
@@ -44,10 +46,10 @@ type TriggerDAGFormProps = {
 
 const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   dagParams,
-  onTrigger
+  onTrigger,
 }) => {
   const [showDetails, setShowDetails] = useState(false);
-  const [jsonError, setJsonError] = useState<string | undefined>(undefined);  // Track JSON error
+  const [jsonError, setJsonError] = useState<string | undefined>(undefined); // Track JSON error
   const { control, handleSubmit, reset, watch } = useForm({
     defaultValues: {
       configJson: JSON.stringify(dagParams.configJson), // Ensure it's a string in the form control
@@ -150,13 +152,13 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       extensions={[json(), autocompletion(), lineNumbers()]}
                       height="200px"
                       onChange={(value) => {
-                        field.onChange(value);  // Update the form state
+                        field.onChange(value); // Update the form state
                         try {
                           // Attempt to parse the value as JSON
                           JSON.parse(value);
-                          setJsonError(undefined);  // Clear error if JSON is valid
+                          setJsonError(undefined); // Clear error if JSON is valid
                         } catch {
-                          setJsonError("Invalid JSON format.");  // Set error message if invalid
+                          setJsonError("Invalid JSON format."); // Set error message if invalid
                         }
                       }}
                       style={{
@@ -165,11 +167,17 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         outline: "none",
                         padding: "2px",
                       }}
-                      theme={colorMode === "dark" ? githubDark as Extension : githubLight as Extension}
+                      theme={
+                        colorMode === "dark"
+                          ? (githubDark as Extension)
+                          : (githubLight as Extension)
+                      }
                     />
-                    {jsonError! ? <Box color="red.500" mt={2}>
+                    {jsonError! ? (
+                      <Box color="red.500" mt={2}>
                         <Text fontSize="sm">{jsonError}</Text>
-                      </Box> : undefined}
+                      </Box>
+                    ) : undefined}
                   </Box>
                 )}
               />
@@ -180,15 +188,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
       <Box as="footer" display="flex" justifyContent="flex-end">
         <HStack w="full">
-          {hasFormChanged() && (
-            <Button colorScheme="red" onClick={() => reset()}>
-              Reset
-            </Button>
-          )}
+          {hasFormChanged() && <Button onClick={() => reset()}>Reset</Button>}
           <Spacer />
           <Button
-            colorScheme="green"
-            disabled={Boolean(jsonError)}  // Disable if there's an error
+            disabled={Boolean(jsonError)} // Disable if there's an error
             onClick={() => void handleSubmit(onSubmit)()}
           >
             Trigger
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 3c6edc34d7afd..3c0a51d2d282b 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -19,10 +19,11 @@
 import { useDisclosure, Box, Text, Heading, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { FiPlay } from "react-icons/fi";
-import type { DagParams } from "./TriggerDag";
+
 import { Dialog } from "src/components/ui";
 
 import TriggerDAGForm from "./TriggerDAGForm";
+import type { DagParams } from "./TriggerDag";
 import { TriggerDag } from "./TriggerDag";
 
 type TriggerDAGModalProps = {

From ce7708360fc128baa5fc34fce493288b840494ae Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 7 Nov 2024 01:18:32 +0530
Subject: [PATCH 18/39] use accordion

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 79 +++++++------------
 1 file changed, 29 insertions(+), 50 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 854fbc834938b..263b190ff414c 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -17,14 +17,16 @@
  * under the License.
  */
 import {
+  AccordionRoot,
+  AccordionItem,
+  AccordionItemTrigger,
+  AccordionItemContent,
   Input,
-  VStack,
-  Dialog,
   Button,
   Box,
   Text,
   Spacer,
-  HStack,
+  HStack
 } from "@chakra-ui/react";
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
@@ -32,7 +34,6 @@ import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror, { type Extension, lineNumbers } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
-
 import { useColorMode } from "src/context/colorMode";
 
 import type { DagParams } from "./TriggerDag";
@@ -48,11 +49,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   dagParams,
   onTrigger,
 }) => {
-  const [showDetails, setShowDetails] = useState(false);
-  const [jsonError, setJsonError] = useState<string | undefined>(undefined); // Track JSON error
+  const [jsonError, setJsonError] = useState<string | undefined>(undefined);
   const { control, handleSubmit, reset, watch } = useForm({
     defaultValues: {
-      configJson: JSON.stringify(dagParams.configJson), // Ensure it's a string in the form control
+      configJson: JSON.stringify(dagParams.configJson),
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
     },
@@ -88,24 +88,14 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
   return (
     <>
-      <Dialog.CloseTrigger />
-
-      <VStack align="stretch" gap={2}>
-        <Button
-          mb={9}
-          onClick={() => setShowDetails(!showDetails)}
-          variant="outline"
-          width="full"
-        >
-          {showDetails ? "Hide Advanced Options" : "Show Advanced Options"}
-        </Button>
-
-        {showDetails ? (
-          <VStack align="stretch" gap={3}>
-            <Box>
-              <Text fontSize="md" mb={2}>
-                Logical date
-              </Text>
+      <AccordionRoot collapsible size="lg" variant="enclosed">
+        <AccordionItem key="advancedOptions" value="advancedOptions">
+          <AccordionItemTrigger>
+                Advance Options
+          </AccordionItemTrigger>
+          <AccordionItemContent>
+            <Box p={5}>
+              <Text fontSize="md" mb={2}>Logical date</Text>
               <Controller
                 control={control}
                 name="logicalDate"
@@ -118,12 +108,8 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                   />
                 )}
               />
-            </Box>
 
-            <Box>
-              <Text fontSize="md" mb={2}>
-                Run ID
-              </Text>
+              <Text fontSize="md" mb={2} mt={6}>Run ID</Text>
               <Controller
                 control={control}
                 name="runId"
@@ -135,17 +121,13 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                   />
                 )}
               />
-            </Box>
 
-            <Box mb={9}>
-              <Text fontSize="md" mb={2}>
-                Configuration JSON
-              </Text>
+              <Text fontSize="md" mb={2} mt={6}>Configuration JSON</Text>
               <Controller
                 control={control}
                 name="configJson"
                 render={({ field }) => (
-                  <Box>
+                  <Box mb={4}>
                     <CodeMirror
                       {...field}
                       basicSetup
@@ -154,11 +136,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       onChange={(value) => {
                         field.onChange(value); // Update the form state
                         try {
-                          // Attempt to parse the value as JSON
                           JSON.parse(value);
                           setJsonError(undefined); // Clear error if JSON is valid
                         } catch {
-                          setJsonError("Invalid JSON format."); // Set error message if invalid
+                          setJsonError("Invalid JSON format.");
                         }
                       }}
                       style={{
@@ -169,29 +150,27 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       }}
                       theme={
                         colorMode === "dark"
-                          ? (githubDark as Extension)
-                          : (githubLight as Extension)
+                          ? (githubDark)
+                          : (githubLight)
                       }
                     />
-                    {jsonError! ? (
-                      <Box color="red.500" mt={2}>
-                        <Text fontSize="sm">{jsonError}</Text>
-                      </Box>
-                    ) : undefined}
+                    {Boolean(jsonError) ? <Text color="red.500" fontSize="sm" mt={2}>
+                        {jsonError}
+                      </Text> : undefined}
                   </Box>
                 )}
               />
             </Box>
-          </VStack>
-        ) : undefined}
-      </VStack>
+          </AccordionItemContent>
+        </AccordionItem>
+      </AccordionRoot>
 
-      <Box as="footer" display="flex" justifyContent="flex-end">
+      <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">
           {hasFormChanged() && <Button onClick={() => reset()}>Reset</Button>}
           <Spacer />
           <Button
-            disabled={Boolean(jsonError)} // Disable if there's an error
+            disabled={Boolean(jsonError)}
             onClick={() => void handleSubmit(onSubmit)()}
           >
             Trigger

From 396fa5d9b9a80f21d55c16909165aef6b33693d8 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 6 Nov 2024 14:58:22 -0500
Subject: [PATCH 19/39] Add Accordion component

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 33 ++++++------
 .../components/ui/Accordion/ItemContent.tsx   | 31 ++++++++++++
 .../components/ui/Accordion/ItemTrigger.tsx   | 50 +++++++++++++++++++
 .../ui/src/components/ui/Accordion/index.tsx  | 28 +++++++++++
 airflow/ui/src/components/ui/index.ts         |  1 +
 5 files changed, 128 insertions(+), 15 deletions(-)
 create mode 100644 airflow/ui/src/components/ui/Accordion/ItemContent.tsx
 create mode 100644 airflow/ui/src/components/ui/Accordion/ItemTrigger.tsx
 create mode 100644 airflow/ui/src/components/ui/Accordion/index.tsx

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 263b190ff414c..ab35142bc36a6 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -26,14 +26,15 @@ import {
   Box,
   Text,
   Spacer,
-  HStack
+  HStack,
 } from "@chakra-ui/react";
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
-import CodeMirror, { type Extension, lineNumbers } from "@uiw/react-codemirror";
+import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
+
 import { useColorMode } from "src/context/colorMode";
 
 import type { DagParams } from "./TriggerDag";
@@ -90,12 +91,12 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     <>
       <AccordionRoot collapsible size="lg" variant="enclosed">
         <AccordionItem key="advancedOptions" value="advancedOptions">
-          <AccordionItemTrigger>
-                Advance Options
-          </AccordionItemTrigger>
+          <AccordionItemTrigger>Advanced Options</AccordionItemTrigger>
           <AccordionItemContent>
             <Box p={5}>
-              <Text fontSize="md" mb={2}>Logical date</Text>
+              <Text fontSize="md" mb={2}>
+                Logical date
+              </Text>
               <Controller
                 control={control}
                 name="logicalDate"
@@ -109,7 +110,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 )}
               />
 
-              <Text fontSize="md" mb={2} mt={6}>Run ID</Text>
+              <Text fontSize="md" mb={2} mt={6}>
+                Run ID
+              </Text>
               <Controller
                 control={control}
                 name="runId"
@@ -122,7 +125,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 )}
               />
 
-              <Text fontSize="md" mb={2} mt={6}>Configuration JSON</Text>
+              <Text fontSize="md" mb={2} mt={6}>
+                Configuration JSON
+              </Text>
               <Controller
                 control={control}
                 name="configJson"
@@ -148,15 +153,13 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         outline: "none",
                         padding: "2px",
                       }}
-                      theme={
-                        colorMode === "dark"
-                          ? (githubDark)
-                          : (githubLight)
-                      }
+                      theme={colorMode === "dark" ? githubDark : githubLight}
                     />
-                    {Boolean(jsonError) ? <Text color="red.500" fontSize="sm" mt={2}>
+                    {Boolean(jsonError) ? (
+                      <Text color="red.500" fontSize="sm" mt={2}>
                         {jsonError}
-                      </Text> : undefined}
+                      </Text>
+                    ) : undefined}
                   </Box>
                 )}
               />
diff --git a/airflow/ui/src/components/ui/Accordion/ItemContent.tsx b/airflow/ui/src/components/ui/Accordion/ItemContent.tsx
new file mode 100644
index 0000000000000..a677d266d5f14
--- /dev/null
+++ b/airflow/ui/src/components/ui/Accordion/ItemContent.tsx
@@ -0,0 +1,31 @@
+/*!
+ * 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 { Accordion } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+type AccordionItemContentProps = {} & Accordion.ItemContentProps;
+
+export const ItemContent = forwardRef<
+  HTMLDivElement,
+  AccordionItemContentProps
+>((props, ref) => (
+  <Accordion.ItemContent>
+    <Accordion.ItemBody {...props} ref={ref} />
+  </Accordion.ItemContent>
+));
diff --git a/airflow/ui/src/components/ui/Accordion/ItemTrigger.tsx b/airflow/ui/src/components/ui/Accordion/ItemTrigger.tsx
new file mode 100644
index 0000000000000..8cdd044fa5012
--- /dev/null
+++ b/airflow/ui/src/components/ui/Accordion/ItemTrigger.tsx
@@ -0,0 +1,50 @@
+/*!
+ * 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 { Accordion, HStack } from "@chakra-ui/react";
+import { forwardRef } from "react";
+import { LuChevronDown } from "react-icons/lu";
+
+type AccordionItemTriggerProps = {
+  indicatorPlacement?: "end" | "start";
+} & Accordion.ItemTriggerProps;
+
+export const ItemTrigger = forwardRef<
+  HTMLButtonElement,
+  AccordionItemTriggerProps
+>((props, ref) => {
+  const { children, indicatorPlacement = "end", ...rest } = props;
+
+  return (
+    <Accordion.ItemTrigger {...rest} ref={ref}>
+      {indicatorPlacement === "start" && (
+        <Accordion.ItemIndicator rotate={{ _open: "0deg", base: "-90deg" }}>
+          <LuChevronDown />
+        </Accordion.ItemIndicator>
+      )}
+      <HStack flex="1" gap="4" textAlign="start" width="full">
+        {children}
+      </HStack>
+      {indicatorPlacement === "end" && (
+        <Accordion.ItemIndicator>
+          <LuChevronDown />
+        </Accordion.ItemIndicator>
+      )}
+    </Accordion.ItemTrigger>
+  );
+});
diff --git a/airflow/ui/src/components/ui/Accordion/index.tsx b/airflow/ui/src/components/ui/Accordion/index.tsx
new file mode 100644
index 0000000000000..7f47046b23b45
--- /dev/null
+++ b/airflow/ui/src/components/ui/Accordion/index.tsx
@@ -0,0 +1,28 @@
+/*!
+ * 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 { Accordion as ChakraAccordion } from "@chakra-ui/react";
+
+import { ItemContent } from "./ItemContent";
+import { ItemTrigger } from "./ItemTrigger";
+
+export const Accordion = {
+  ...ChakraAccordion,
+  ItemContent,
+  ItemTrigger,
+};
diff --git a/airflow/ui/src/components/ui/index.ts b/airflow/ui/src/components/ui/index.ts
index 1c0922b06e8a2..f596effa12a93 100644
--- a/airflow/ui/src/components/ui/index.ts
+++ b/airflow/ui/src/components/ui/index.ts
@@ -30,3 +30,4 @@ export * from "./Tooltip";
 
 export * from "./ProgressBar";
 export * from "./Menu";
+export * from "./Accordion";

From 92f82b0be6fc7b370332911a7299a99eea784e04 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 6 Nov 2024 15:05:44 -0500
Subject: [PATCH 20/39] Use accordion component in triggeer form

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index ab35142bc36a6..b3151ebb61a04 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -16,18 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionItemTrigger,
-  AccordionItemContent,
-  Input,
-  Button,
-  Box,
-  Text,
-  Spacer,
-  HStack,
-} from "@chakra-ui/react";
+import { Input, Button, Box, Text, Spacer, HStack } from "@chakra-ui/react";
 import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
@@ -37,6 +26,7 @@ import { useForm, Controller } from "react-hook-form";
 
 import { useColorMode } from "src/context/colorMode";
 
+import { Accordion } from "../ui";
 import type { DagParams } from "./TriggerDag";
 
 type TriggerDAGFormProps = {
@@ -89,10 +79,10 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
   return (
     <>
-      <AccordionRoot collapsible size="lg" variant="enclosed">
-        <AccordionItem key="advancedOptions" value="advancedOptions">
-          <AccordionItemTrigger>Advanced Options</AccordionItemTrigger>
-          <AccordionItemContent>
+      <Accordion.Root collapsible size="lg" variant="enclosed">
+        <Accordion.Item key="advancedOptions" value="advancedOptions">
+          <Accordion.ItemTrigger>Advanced Options</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
             <Box p={5}>
               <Text fontSize="md" mb={2}>
                 Logical date
@@ -164,9 +154,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 )}
               />
             </Box>
-          </AccordionItemContent>
-        </AccordionItem>
-      </AccordionRoot>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
 
       <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">

From f52b78df16d23a7ab9996024613aee0d50cc6136 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 7 Nov 2024 16:41:54 +0530
Subject: [PATCH 21/39] remove dag id from title

---
 .../ui/src/components/TriggerDag/TriggerDAGModal.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 3c0a51d2d282b..71d061cccd214 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -58,12 +58,12 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
         <Dialog.Content backdrop>
           <Dialog.Header>
             <VStack align="start" gap={2}>
-              <Heading size="xl">Trigger DAG</Heading>
-
-              <Heading size="md">{dagDisplayName}</Heading>
-              <Text color="gray.500" fontSize="sm">
-                DAG ID: {dagId}
-              </Text>
+              <Heading size="xl">Trigger DAG {dagDisplayName !== "" && (<span>- {dagDisplayName}</span>)}</Heading>
+              {dagDisplayName === "" && (
+                <Text color="gray.500" fontSize="md">
+                  DAG ID: {dagId}
+                </Text>
+              )}
             </VStack>
           </Dialog.Header>
 

From 9ddcd721bc87269eb1eac0adf709848db7990846 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 7 Nov 2024 22:42:12 +0530
Subject: [PATCH 22/39] fix response tracking

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 46 ++++++++-----------
 .../components/TriggerDag/TriggerDAGModal.tsx |  6 +--
 .../src/components/TriggerDag/TriggerDag.tsx  | 18 ++++++--
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index b3151ebb61a04..553f254dbff91 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -32,49 +32,38 @@ import type { DagParams } from "./TriggerDag";
 type TriggerDAGFormProps = {
   dagParams: DagParams;
   onClose: () => void;
-  onTrigger: () => void;
+  onTrigger: (updatedDagParams: DagParams) => void;
   setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
 };
 
 const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   dagParams,
   onTrigger,
+  setDagParams,
 }) => {
   const [jsonError, setJsonError] = useState<string | undefined>(undefined);
-  const { control, handleSubmit, reset, watch } = useForm({
+  const { control, formState: { isDirty }, handleSubmit, reset } = useForm<DagParams>({
     defaultValues: {
-      configJson: JSON.stringify(dagParams.configJson),
+      configJson: dagParams.configJson,
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
-    },
-  });
+    }
+});
 
   useEffect(() => {
     reset({
-      configJson: JSON.stringify(dagParams.configJson),
+      configJson: dagParams.configJson, 
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
     });
   }, [dagParams, reset]);
 
-  const onSubmit = () => {
-    onTrigger();
+  const onSubmit = (data: DagParams) => {
+      onTrigger(data);
+      setDagParams(data); 
+      setJsonError(undefined); 
   };
-
-  const hasFormChanged = () => {
-    const currentValues = {
-      configJson: watch("configJson"),
-      logicalDate: watch("logicalDate"),
-      runId: watch("runId"),
-    };
-
-    return (
-      currentValues.configJson !== JSON.stringify(dagParams.configJson) ||
-      currentValues.logicalDate !== dagParams.logicalDate ||
-      currentValues.runId !== dagParams.runId
-    );
-  };
-
+  
   const { colorMode } = useColorMode();
 
   return (
@@ -124,15 +113,15 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 render={({ field }) => (
                   <Box mb={4}>
                     <CodeMirror
-                      {...field}
                       basicSetup
                       extensions={[json(), autocompletion(), lineNumbers()]}
                       height="200px"
                       onChange={(value) => {
-                        field.onChange(value); // Update the form state
                         try {
-                          JSON.parse(value);
-                          setJsonError(undefined); // Clear error if JSON is valid
+                          const parsedConfigJson = JSON.parse(value) as Record<string, unknown>;
+                          
+                          field.onChange(parsedConfigJson); // Update react-hook-form value
+                          setJsonError(undefined);
                         } catch {
                           setJsonError("Invalid JSON format.");
                         }
@@ -144,6 +133,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         padding: "2px",
                       }}
                       theme={colorMode === "dark" ? githubDark : githubLight}
+                      value={JSON.stringify(field.value)}
                     />
                     {Boolean(jsonError) ? (
                       <Text color="red.500" fontSize="sm" mt={2}>
@@ -160,7 +150,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
       <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">
-          {hasFormChanged() && <Button onClick={() => reset()}>Reset</Button>}
+          {isDirty ? <Button onClick={() => reset()}>Reset</Button> : undefined}
           <Spacer />
           <Button
             disabled={Boolean(jsonError)}
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 71d061cccd214..81b762caa02c8 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -43,8 +43,8 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
     runId: "",
   });
 
-  const handleTrigger = () => {
-    TriggerDag(dagParams);
+  const handleTrigger = (updatedDagParams: DagParams) => {
+    TriggerDag(updatedDagParams);
     onClose();
   };
 
@@ -73,7 +73,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             <TriggerDAGForm
               dagParams={dagParams}
               onClose={onClose}
-              onTrigger={handleTrigger}
+              onTrigger={handleTrigger} 
               setDagParams={setDagParams}
             />
           </Dialog.Body>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index af381ee11c404..db7501bd47974 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -18,13 +18,25 @@
  */
 
 export type DagParams = {
-  configJson: Record<string, string>;
+  configJson: Record<string, unknown>;
   dagId: string;
   logicalDate: string;
   runId: string;
 };
 
 export const TriggerDag = (dagParams: DagParams) => {
-  // TODO triggering logic
+  // eslint-disable-next-line no-alert
+  alert(`
+    Triggering DAG with the following parameters:
+    
+    Config JSON: ${JSON.stringify(dagParams.configJson)}
+    Logical Date: ${dagParams.logicalDate}
+    Run ID: ${dagParams.runId}
+
+    TODO: This trigger button is under progress. 
+    The values you have entered are shown above.
+  `);
+
+  // TODO triggering logic (would be placed here once the FAST API is available)
   console.log("Triggering DAG with parameters:", dagParams);
-};
+};
\ No newline at end of file

From 5107d5e55da78d9dc23e1a6fcbea9cb89a29088e Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 7 Nov 2024 23:00:00 +0530
Subject: [PATCH 23/39] add blue button

---
 airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 553f254dbff91..15736aa5bff55 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -153,6 +153,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           {isDirty ? <Button onClick={() => reset()}>Reset</Button> : undefined}
           <Spacer />
           <Button
+            colorPalette="blue"
             disabled={Boolean(jsonError)}
             onClick={() => void handleSubmit(onSubmit)()}
           >

From e3fd9f116090fdec02530c0eb068c2e9c03d0472 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 7 Nov 2024 23:42:04 +0530
Subject: [PATCH 24/39] making diff components for diff buttons

---
 .../TriggerDag/TriggerDAGIconButton.tsx       | 26 ++++++++
 .../components/TriggerDag/TriggerDAGModal.tsx | 60 +++++++++----------
 .../TriggerDag/TriggerDAGTextButton.tsx       | 27 +++++++++
 .../src/components/TriggerDag/TriggerDag.tsx  |  5 ++
 airflow/ui/src/pages/DagsList/Dag/Header.tsx  | 10 ++--
 airflow/ui/src/pages/DagsList/DagCard.tsx     |  4 +-
 airflow/ui/src/pages/DagsList/DagsList.tsx    |  4 +-
 7 files changed, 95 insertions(+), 41 deletions(-)
 create mode 100644 airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
 create mode 100644 airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
new file mode 100644
index 0000000000000..ddae705a3880d
--- /dev/null
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
@@ -0,0 +1,26 @@
+import { Box } from "@chakra-ui/react";
+import { FiPlay } from "react-icons/fi";
+import { useDisclosure } from "@chakra-ui/react";
+import TriggerDAGModal from "./TriggerDAGModal";
+import type { TriggerDAGButtonProps } from "./TriggerDag";
+
+const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({ dagDisplayName, dagId }) => {
+  const { onClose, onOpen, open } = useDisclosure();  
+
+  return (
+    <Box>
+      <Box alignSelf="center" cursor="pointer" onClick={onOpen}>
+        <FiPlay />
+      </Box>
+
+      <TriggerDAGModal
+        dagDisplayName={dagDisplayName}
+        dagId={dagId}
+        onClose={onClose}
+        open={open}
+      />
+    </Box>
+  );
+};
+
+export default TriggerDAGIconButton;
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 81b762caa02c8..dd09a10a29dfb 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -16,9 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useDisclosure, Box, Text, Heading, VStack } from "@chakra-ui/react";
+import { Text, Heading, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
-import { FiPlay } from "react-icons/fi";
 
 import { Dialog } from "src/components/ui";
 
@@ -29,13 +28,16 @@ import { TriggerDag } from "./TriggerDag";
 type TriggerDAGModalProps = {
   dagDisplayName: string;
   dagId: string;
+  onClose: () => void;
+  open: boolean;
 };
 
 const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   dagDisplayName,
   dagId,
+  onClose,
+  open
 }) => {
-  const { onClose, onOpen, open } = useDisclosure();
   const [dagParams, setDagParams] = useState<DagParams>({
     configJson: {},
     dagId,
@@ -49,37 +51,31 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   };
 
   return (
-    <Box>
-      <Box alignSelf="center" cursor="pointer" onClick={onOpen}>
-        <FiPlay />
-      </Box>
+    <Dialog.Root onOpenChange={onClose} open={open} size="xl">
+      <Dialog.Content backdrop>
+        <Dialog.Header>
+          <VStack align="start" gap={2}>
+            <Heading size="xl">Trigger DAG {dagDisplayName !== "" && (<span>- {dagDisplayName}</span>)}</Heading>
+            {dagDisplayName === "" && (
+              <Text color="gray.500" fontSize="md">
+                DAG ID: {dagId}
+              </Text>
+            )}
+          </VStack>
+        </Dialog.Header>
 
-      <Dialog.Root onOpenChange={onClose} open={open} size="xl">
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={2}>
-              <Heading size="xl">Trigger DAG {dagDisplayName !== "" && (<span>- {dagDisplayName}</span>)}</Heading>
-              {dagDisplayName === "" && (
-                <Text color="gray.500" fontSize="md">
-                  DAG ID: {dagId}
-                </Text>
-              )}
-            </VStack>
-          </Dialog.Header>
+        <Dialog.CloseTrigger />
 
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <TriggerDAGForm
-              dagParams={dagParams}
-              onClose={onClose}
-              onTrigger={handleTrigger} 
-              setDagParams={setDagParams}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
-    </Box>
+        <Dialog.Body>
+          <TriggerDAGForm
+            dagParams={dagParams}
+            onClose={onClose}
+            onTrigger={handleTrigger} 
+            setDagParams={setDagParams}
+          />
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog.Root>
   );
 };
 
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
new file mode 100644
index 0000000000000..965821b9d110e
--- /dev/null
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
@@ -0,0 +1,27 @@
+import { Box, Button } from "@chakra-ui/react";
+import { FiPlay } from "react-icons/fi";
+import { useDisclosure } from "@chakra-ui/react";
+import TriggerDAGModal from "./TriggerDAGModal";
+import type { TriggerDAGButtonProps } from "./TriggerDag";
+
+const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({ dagDisplayName, dagId }) => {
+  const { onClose, onOpen, open } = useDisclosure();  
+
+  return (
+    <Box>
+        <Button colorPalette="blue" onClick={onOpen}>
+            <FiPlay />
+            Trigger
+        </Button>
+
+      <TriggerDAGModal
+        dagDisplayName={dagDisplayName}
+        dagId={dagId}
+        onClose={onClose}
+        open={open}
+      />
+    </Box>
+  );
+};
+
+export default TriggerDAGIconButton;
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index db7501bd47974..671b20435740b 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -24,6 +24,11 @@ export type DagParams = {
   runId: string;
 };
 
+export type TriggerDAGButtonProps = {
+  dagDisplayName: string;
+  dagId: string;
+};
+
 export const TriggerDag = (dagParams: DagParams) => {
   // eslint-disable-next-line no-alert
   alert(`
diff --git a/airflow/ui/src/pages/DagsList/Dag/Header.tsx b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
index 81c48eb28bcf3..5b2be3052752e 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
@@ -18,7 +18,6 @@
  */
 import {
   Box,
-  Button,
   Flex,
   Heading,
   HStack,
@@ -33,6 +32,7 @@ import { DagIcon } from "src/assets/DagIcon";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
 import { Tooltip } from "src/components/ui";
+import TriggerDAGTextButton from "src/components/TriggerDag/TriggerDAGTextButton";
 
 import { DagTags } from "../DagTags";
 import { LatestRun } from "../LatestRun";
@@ -57,10 +57,10 @@ export const Header = ({
           )}
         </HStack>
         <Flex>
-          <Button colorPalette="blue" disabled>
-            <FiPlay />
-            Trigger
-          </Button>
+          <TriggerDAGTextButton
+            dagDisplayName={dag?.dag_display_name ?? ""}
+            dagId={dag?.dag_id ?? ""}
+          />
         </Flex>
       </Flex>
       <SimpleGrid columns={4} gap={4} my={2}>
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index 8d5e0f07b4ac9..3bfbcf35fa0b5 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -30,7 +30,7 @@ import { Link as RouterLink } from "react-router-dom";
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
-import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
+import TriggerDAGIconButton from "src/components/TriggerDag/TriggerDAGIconButton";
 import { Tooltip } from "src/components/ui";
 
 import { DagTags } from "./DagTags";
@@ -72,7 +72,7 @@ export const DagCard = ({ dag }: Props) => (
       </HStack>
       <HStack>
         <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
-        <TriggerDAGModal
+        <TriggerDAGIconButton
           dagDisplayName={dag.dag_display_name}
           dagId={dag.dag_id}
         />
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index 6336b8c068b32..89df4723cfb17 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -42,7 +42,7 @@ import { ErrorAlert } from "src/components/ErrorAlert";
 import { SearchBar } from "src/components/SearchBar";
 import Time from "src/components/Time";
 import { TogglePause } from "src/components/TogglePause";
-import TriggerDAGModal from "src/components/TriggerDag/TriggerDAGModal";
+import TriggerDAGIconButton from "src/components/TriggerDag/TriggerDAGIconButton";
 import { Select } from "src/components/ui";
 import {
   SearchParamsKeys,
@@ -116,7 +116,7 @@ const columns: Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
   {
     accessorKey: "trigger",
     cell: ({ row }) => (
-      <TriggerDAGModal
+      <TriggerDAGIconButton
         dagDisplayName={row.original.dag_display_name}
         dagId={row.original.dag_id}
       />

From a8515569a80d62e6b8c33e2881de0bf7207d4496 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Thu, 7 Nov 2024 23:48:10 +0530
Subject: [PATCH 25/39] lints

---
 airflow/ui/src/components/TriggerDag/index.ts | 20 -------------------
 airflow/ui/src/pages/DagsList/Dag/Header.tsx  |  2 +-
 2 files changed, 1 insertion(+), 21 deletions(-)
 delete mode 100644 airflow/ui/src/components/TriggerDag/index.ts

diff --git a/airflow/ui/src/components/TriggerDag/index.ts b/airflow/ui/src/components/TriggerDag/index.ts
deleted file mode 100644
index 19e3b74eadd5d..0000000000000
--- a/airflow/ui/src/components/TriggerDag/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*!
- * 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.
- */
-
-export { TriggerDag } from "./TriggerDag";
diff --git a/airflow/ui/src/pages/DagsList/Dag/Header.tsx b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
index 5b2be3052752e..ba7864dbfd3b0 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
@@ -25,7 +25,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { FiCalendar, FiPlay } from "react-icons/fi";
+import { FiCalendar } from "react-icons/fi";
 
 import type { DAGResponse, DAGRunResponse } from "openapi/requests/types.gen";
 import { DagIcon } from "src/assets/DagIcon";

From c581110808654b4493e427ac122cc5af132cdd30 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Fri, 8 Nov 2024 00:24:49 +0530
Subject: [PATCH 26/39] lints fix

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 28 +++++++++------
 .../TriggerDag/TriggerDAGIconButton.tsx       | 28 +++++++++++++--
 .../components/TriggerDag/TriggerDAGModal.tsx |  9 +++--
 .../TriggerDag/TriggerDAGTextButton.tsx       | 36 +++++++++++++++----
 .../src/components/TriggerDag/TriggerDag.tsx  |  6 ++--
 airflow/ui/src/pages/DagsList/Dag/Header.tsx  |  2 +-
 6 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 15736aa5bff55..bcd49fa442516 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -42,28 +42,33 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   setDagParams,
 }) => {
   const [jsonError, setJsonError] = useState<string | undefined>(undefined);
-  const { control, formState: { isDirty }, handleSubmit, reset } = useForm<DagParams>({
+  const {
+    control,
+    formState: { isDirty },
+    handleSubmit,
+    reset,
+  } = useForm<DagParams>({
     defaultValues: {
       configJson: dagParams.configJson,
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
-    }
-});
+    },
+  });
 
   useEffect(() => {
     reset({
-      configJson: dagParams.configJson, 
+      configJson: dagParams.configJson,
       logicalDate: dagParams.logicalDate,
       runId: dagParams.runId,
     });
   }, [dagParams, reset]);
 
   const onSubmit = (data: DagParams) => {
-      onTrigger(data);
-      setDagParams(data); 
-      setJsonError(undefined); 
+    onTrigger(data);
+    setDagParams(data);
+    setJsonError(undefined);
   };
-  
+
   const { colorMode } = useColorMode();
 
   return (
@@ -118,8 +123,11 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       height="200px"
                       onChange={(value) => {
                         try {
-                          const parsedConfigJson = JSON.parse(value) as Record<string, unknown>;
-                          
+                          const parsedConfigJson = JSON.parse(value) as Record<
+                            string,
+                            unknown
+                          >;
+
                           field.onChange(parsedConfigJson); // Update react-hook-form value
                           setJsonError(undefined);
                         } catch {
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
index ddae705a3880d..32897d16efec9 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
@@ -1,11 +1,33 @@
+/*!
+ * 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 { Box } from "@chakra-ui/react";
-import { FiPlay } from "react-icons/fi";
 import { useDisclosure } from "@chakra-ui/react";
+import { FiPlay } from "react-icons/fi";
+
 import TriggerDAGModal from "./TriggerDAGModal";
 import type { TriggerDAGButtonProps } from "./TriggerDag";
 
-const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({ dagDisplayName, dagId }) => {
-  const { onClose, onOpen, open } = useDisclosure();  
+const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
+  dagDisplayName,
+  dagId,
+}) => {
+  const { onClose, onOpen, open } = useDisclosure();
 
   return (
     <Box>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index dd09a10a29dfb..c662f57770bbf 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -36,7 +36,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   dagDisplayName,
   dagId,
   onClose,
-  open
+  open,
 }) => {
   const [dagParams, setDagParams] = useState<DagParams>({
     configJson: {},
@@ -55,7 +55,10 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
       <Dialog.Content backdrop>
         <Dialog.Header>
           <VStack align="start" gap={2}>
-            <Heading size="xl">Trigger DAG {dagDisplayName !== "" && (<span>- {dagDisplayName}</span>)}</Heading>
+            <Heading size="xl">
+              Trigger DAG{" "}
+              {dagDisplayName !== "" && <span>- {dagDisplayName}</span>}
+            </Heading>
             {dagDisplayName === "" && (
               <Text color="gray.500" fontSize="md">
                 DAG ID: {dagId}
@@ -70,7 +73,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
           <TriggerDAGForm
             dagParams={dagParams}
             onClose={onClose}
-            onTrigger={handleTrigger} 
+            onTrigger={handleTrigger}
             setDagParams={setDagParams}
           />
         </Dialog.Body>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
index 965821b9d110e..2efa1eda50f10 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
@@ -1,18 +1,40 @@
+/*!
+ * 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 { Box, Button } from "@chakra-ui/react";
-import { FiPlay } from "react-icons/fi";
 import { useDisclosure } from "@chakra-ui/react";
+import { FiPlay } from "react-icons/fi";
+
 import TriggerDAGModal from "./TriggerDAGModal";
 import type { TriggerDAGButtonProps } from "./TriggerDag";
 
-const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({ dagDisplayName, dagId }) => {
-  const { onClose, onOpen, open } = useDisclosure();  
+const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
+  dagDisplayName,
+  dagId,
+}) => {
+  const { onClose, onOpen, open } = useDisclosure();
 
   return (
     <Box>
-        <Button colorPalette="blue" onClick={onOpen}>
-            <FiPlay />
-            Trigger
-        </Button>
+      <Button colorPalette="blue" onClick={onOpen}>
+        <FiPlay />
+        Trigger
+      </Button>
 
       <TriggerDAGModal
         dagDisplayName={dagDisplayName}
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index 671b20435740b..d9a92be1dc871 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -33,15 +33,15 @@ export const TriggerDag = (dagParams: DagParams) => {
   // eslint-disable-next-line no-alert
   alert(`
     Triggering DAG with the following parameters:
-    
+
     Config JSON: ${JSON.stringify(dagParams.configJson)}
     Logical Date: ${dagParams.logicalDate}
     Run ID: ${dagParams.runId}
 
-    TODO: This trigger button is under progress. 
+    TODO: This trigger button is under progress.
     The values you have entered are shown above.
   `);
 
   // TODO triggering logic (would be placed here once the FAST API is available)
   console.log("Triggering DAG with parameters:", dagParams);
-};
\ No newline at end of file
+};
diff --git a/airflow/ui/src/pages/DagsList/Dag/Header.tsx b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
index f98d014953eb1..65a9de3b6abf7 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
@@ -31,8 +31,8 @@ import type { DAGResponse, DAGRunResponse } from "openapi/requests/types.gen";
 import { DagIcon } from "src/assets/DagIcon";
 import DagRunInfo from "src/components/DagRunInfo";
 import { TogglePause } from "src/components/TogglePause";
-import { Tooltip } from "src/components/ui";
 import TriggerDAGTextButton from "src/components/TriggerDag/TriggerDAGTextButton";
+import { Tooltip } from "src/components/ui";
 
 import { DagTags } from "../DagTags";
 

From d64b0ae523b456ec93497a81f769e9481676059b Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Fri, 8 Nov 2024 01:10:06 +0530
Subject: [PATCH 27/39] variant add

---
 airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index bcd49fa442516..eae4ad8a80d1e 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -158,7 +158,11 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
 
       <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">
-          {isDirty ? <Button onClick={() => reset()}>Reset</Button> : undefined}
+          {isDirty ? (
+            <Button onClick={() => reset()} variant="outline">
+              Reset
+            </Button>
+          ) : undefined}
           <Spacer />
           <Button
             colorPalette="blue"

From a3279592f8dc4f6be5da1600c8a7f95e7ea226b0 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sat, 9 Nov 2024 22:44:05 +0530
Subject: [PATCH 28/39] reset the form on close

---
 .../components/TriggerDag/TriggerDAGModal.tsx | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index c662f57770bbf..188a07099afa0 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Text, Heading, VStack } from "@chakra-ui/react";
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { Dialog } from "src/components/ui";
 
@@ -38,18 +38,29 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   onClose,
   open,
 }) => {
-  const [dagParams, setDagParams] = useState<DagParams>({
-    configJson: {},
-    dagId,
-    logicalDate: "",
-    runId: "",
-  });
+  const initialDagParams = useMemo(
+    () => ({
+      configJson: {},
+      dagId,
+      logicalDate: "",
+      runId: "",
+    }),
+    [dagId],
+  );
+
+  const [dagParams, setDagParams] = useState<DagParams>(initialDagParams);
 
   const handleTrigger = (updatedDagParams: DagParams) => {
     TriggerDag(updatedDagParams);
     onClose();
   };
 
+  useEffect(() => {
+    if (!open) {
+      setDagParams(initialDagParams);
+    }
+  }, [open, initialDagParams]);
+
   return (
     <Dialog.Root onOpenChange={onClose} open={open} size="xl">
       <Dialog.Content backdrop>

From 0b965a749b543642643ddf57c40481983f1dffb6 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sun, 10 Nov 2024 03:33:49 +0530
Subject: [PATCH 29/39] change type to string

---
 airflow/ui/package.json                       |  2 --
 airflow/ui/pnpm-lock.yaml                     | 31 +++----------------
 .../components/TriggerDag/TriggerDAGForm.tsx  | 22 ++++++-------
 .../components/TriggerDag/TriggerDAGModal.tsx |  2 +-
 .../src/components/TriggerDag/TriggerDag.tsx  |  2 +-
 5 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index 0d5a4477c9edf..390b575c45d4b 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -19,8 +19,6 @@
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^3.0.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/theme-one-dark": "^6.0.0",
-    "@codemirror/autocomplete": "^6.1.1",
     "@emotion/react": "^11.13.3",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index e97bc891e4865..dcbb72a466f3e 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -14,15 +14,9 @@ importers:
       '@chakra-ui/react':
         specifier: ^3.0.2
         version: 3.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@internationalized/date@3.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@codemirror/autocomplete':
-        specifier: ^6.1.1
-        version: 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
       '@codemirror/lang-json':
         specifier: ^6.0.1
         version: 6.0.1
-      '@codemirror/theme-one-dark':
-        specifier: ^6.0.0
-        version: 6.1.2
       '@emotion/react':
         specifier: ^11.13.3
         version: 11.13.3(@types/react@18.3.5)(react@18.3.1)
@@ -37,7 +31,7 @@ importers:
         version: 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       '@uiw/react-codemirror':
         specifier: ^4.23.5
-        version: 4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       axios:
         specifier: ^1.7.7
         version: 1.7.7
@@ -305,14 +299,6 @@ packages:
       react: '>=18'
       react-dom: '>=18'
 
-  '@codemirror/autocomplete@6.18.1':
-    resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==}
-    peerDependencies:
-      '@codemirror/language': ^6.0.0
-      '@codemirror/state': ^6.0.0
-      '@codemirror/view': ^6.0.0
-      '@lezer/common': ^1.0.0
-
   '@codemirror/autocomplete@6.18.2':
     resolution: {integrity: sha512-wJGylKtMFR/Ds6Gh01+OovXE/pncPiKZNNBKuC39pKnH+XK5d9+WsNqcrdxPjFPFTigRBqse0rfxw9UxrfyhPg==}
     peerDependencies:
@@ -3825,13 +3811,6 @@ snapshots:
     transitivePeerDependencies:
       - '@internationalized/date'
 
-  '@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)':
-    dependencies:
-      '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
-      '@lezer/common': 1.2.3
-
   '@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)':
     dependencies:
       '@codemirror/language': 6.10.3
@@ -4534,9 +4513,9 @@ snapshots:
       '@typescript-eslint/types': 8.5.0
       eslint-visitor-keys: 3.4.3
 
-  '@uiw/codemirror-extensions-basic-setup@4.23.5(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
+  '@uiw/codemirror-extensions-basic-setup@4.23.5(@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)':
     dependencies:
-      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/autocomplete': 6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
       '@codemirror/commands': 6.7.1
       '@codemirror/language': 6.10.3
       '@codemirror/lint': 6.8.2
@@ -4873,14 +4852,14 @@ snapshots:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
 
-  '@uiw/react-codemirror@4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@uiw/react-codemirror@4.23.5(@babel/runtime@7.25.6)(@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
       '@codemirror/commands': 6.7.1
       '@codemirror/state': 6.4.1
       '@codemirror/theme-one-dark': 6.1.2
       '@codemirror/view': 6.34.1
-      '@uiw/codemirror-extensions-basic-setup': 4.23.5(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
+      '@uiw/codemirror-extensions-basic-setup': 4.23.5(@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3))(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
       codemirror: 6.0.1(@lezer/common@1.2.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index eae4ad8a80d1e..fe1d0836dc91c 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -17,10 +17,9 @@
  * under the License.
  */
 import { Input, Button, Box, Text, Spacer, HStack } from "@chakra-ui/react";
-import { autocompletion } from "@codemirror/autocomplete";
 import { json } from "@codemirror/lang-json";
 import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
-import CodeMirror, { lineNumbers } from "@uiw/react-codemirror";
+import CodeMirror from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 
@@ -118,17 +117,19 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                 render={({ field }) => (
                   <Box mb={4}>
                     <CodeMirror
-                      basicSetup
-                      extensions={[json(), autocompletion(), lineNumbers()]}
+                      {...field}
+                      basicSetup={{
+                        autocompletion: true,
+                        bracketMatching: true,
+                        foldGutter: true,
+                        lineNumbers: true,
+                      }}
+                      extensions={[json()]}
                       height="200px"
                       onChange={(value) => {
+                        field.onChange(value);
                         try {
-                          const parsedConfigJson = JSON.parse(value) as Record<
-                            string,
-                            unknown
-                          >;
-
-                          field.onChange(parsedConfigJson); // Update react-hook-form value
+                          JSON.parse(value);
                           setJsonError(undefined);
                         } catch {
                           setJsonError("Invalid JSON format.");
@@ -141,7 +142,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                         padding: "2px",
                       }}
                       theme={colorMode === "dark" ? githubDark : githubLight}
-                      value={JSON.stringify(field.value)}
                     />
                     {Boolean(jsonError) ? (
                       <Text color="red.500" fontSize="sm" mt={2}>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 188a07099afa0..9399860b67f62 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -40,7 +40,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
 }) => {
   const initialDagParams = useMemo(
     () => ({
-      configJson: {},
+      configJson: "{}",
       dagId,
       logicalDate: "",
       runId: "",
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index d9a92be1dc871..8bce74add45e2 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -18,7 +18,7 @@
  */
 
 export type DagParams = {
-  configJson: Record<string, unknown>;
+  configJson: string;
   dagId: string;
   logicalDate: string;
   runId: string;

From 14db6b10d136c88a803e7e3cce78e23c71c75306 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sun, 10 Nov 2024 15:18:35 +0530
Subject: [PATCH 30/39] optimise

---
 .../components/TriggerDag/TriggerDAGForm.tsx   | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index fe1d0836dc91c..3e002a585d3c2 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -40,26 +40,18 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   onTrigger,
   setDagParams,
 }) => {
-  const [jsonError, setJsonError] = useState<string | undefined>(undefined);
+  const [jsonError, setJsonError] = useState<string | undefined>();
   const {
     control,
     formState: { isDirty },
     handleSubmit,
     reset,
   } = useForm<DagParams>({
-    defaultValues: {
-      configJson: dagParams.configJson,
-      logicalDate: dagParams.logicalDate,
-      runId: dagParams.runId,
-    },
+    defaultValues: dagParams,
   });
 
   useEffect(() => {
-    reset({
-      configJson: dagParams.configJson,
-      logicalDate: dagParams.logicalDate,
-      runId: dagParams.runId,
-    });
+    reset(dagParams);
   }, [dagParams, reset]);
 
   const onSubmit = (data: DagParams) => {
@@ -143,11 +135,11 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       }}
                       theme={colorMode === "dark" ? githubDark : githubLight}
                     />
-                    {Boolean(jsonError) ? (
+                    {Boolean(jsonError) && (
                       <Text color="red.500" fontSize="sm" mt={2}>
                         {jsonError}
                       </Text>
-                    ) : undefined}
+                    )}
                   </Box>
                 )}
               />

From 348b7c647567367dc442f0189bd9c4c73802194c Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sun, 10 Nov 2024 15:37:24 +0530
Subject: [PATCH 31/39] post input validation and pretiffy for json

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 3e002a585d3c2..62c8e94c28042 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -60,6 +60,20 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     setJsonError(undefined);
   };
 
+  const validateAndPrettifyJson = (value: string) => {
+    try {
+      const parsedJson = JSON.parse(value) as JSON;
+
+      setJsonError(undefined);
+
+      return JSON.stringify(parsedJson, undefined, 2);
+    } catch {
+      setJsonError("Invalid JSON format.");
+
+      return value;
+    }
+  };
+
   const { colorMode } = useColorMode();
 
   return (
@@ -118,14 +132,12 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       }}
                       extensions={[json()]}
                       height="200px"
-                      onChange={(value) => {
-                        field.onChange(value);
-                        try {
-                          JSON.parse(value);
-                          setJsonError(undefined);
-                        } catch {
-                          setJsonError("Invalid JSON format.");
-                        }
+                      onBlur={() => {
+                        const prettifiedJson = validateAndPrettifyJson(
+                          field.value,
+                        );
+
+                        field.onChange(prettifiedJson);
                       }}
                       style={{
                         border: "1px solid #CBD5E0",

From a5bee546863a2f3b4e1414c85ae74819f251002b Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Sun, 10 Nov 2024 15:46:42 +0530
Subject: [PATCH 32/39] modal refactor

---
 .../components/TriggerDag/TriggerDAGModal.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 9399860b67f62..34f34091034eb 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 import { Text, Heading, VStack } from "@chakra-ui/react";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Dialog } from "src/components/ui";
 
 import TriggerDAGForm from "./TriggerDAGForm";
 import type { DagParams } from "./TriggerDag";
-import { TriggerDag } from "./TriggerDag";
+import { TriggerDag as triggerDag } from "./TriggerDag";
 
 type TriggerDAGModalProps = {
   dagDisplayName: string;
@@ -50,10 +50,13 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
 
   const [dagParams, setDagParams] = useState<DagParams>(initialDagParams);
 
-  const handleTrigger = (updatedDagParams: DagParams) => {
-    TriggerDag(updatedDagParams);
-    onClose();
-  };
+  const handleTrigger = useCallback(
+    (updatedDagParams: DagParams) => {
+      triggerDag(updatedDagParams);
+      onClose();
+    },
+    [onClose],
+  );
 
   useEffect(() => {
     if (!open) {
@@ -68,9 +71,9 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
           <VStack align="start" gap={2}>
             <Heading size="xl">
               Trigger DAG{" "}
-              {dagDisplayName !== "" && <span>- {dagDisplayName}</span>}
+              {dagDisplayName ? <span>- {dagDisplayName}</span> : undefined}
             </Heading>
-            {dagDisplayName === "" && (
+            {!dagDisplayName && (
               <Text color="gray.500" fontSize="md">
                 DAG ID: {dagId}
               </Text>

From 20a7617a837e12742564b9a2898661e71b8128f0 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Mon, 11 Nov 2024 14:12:07 +0530
Subject: [PATCH 33/39] reviews

---
 airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx  | 7 +++++--
 airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 62c8e94c28042..9277a23ca8fd7 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -67,8 +67,11 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
       setJsonError(undefined);
 
       return JSON.stringify(parsedJson, undefined, 2);
-    } catch {
-      setJsonError("Invalid JSON format.");
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error occurred.";
+
+      setJsonError(`Invalid JSON format: ${errorMessage}`);
 
       return value;
     }
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 34f34091034eb..53497544744cf 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -73,7 +73,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
               Trigger DAG{" "}
               {dagDisplayName ? <span>- {dagDisplayName}</span> : undefined}
             </Heading>
-            {!dagDisplayName && (
+            {dagDisplayName !== dagId && (
               <Text color="gray.500" fontSize="md">
                 DAG ID: {dagId}
               </Text>

From b0c95cc604d29645625c640c8b1be29a479f55d6 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Tue, 12 Nov 2024 09:47:02 +0530
Subject: [PATCH 34/39] add fiplay button

---
 airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx     | 3 ++-
 .../ui/src/components/TriggerDag/TriggerDAGIconButton.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 9277a23ca8fd7..b3cf338d4a824 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -22,6 +22,7 @@ import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
+import { FiPlay } from "react-icons/fi";
 
 import { useColorMode } from "src/context/colorMode";
 
@@ -176,7 +177,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
             disabled={Boolean(jsonError)}
             onClick={() => void handleSubmit(onSubmit)()}
           >
-            Trigger
+            <FiPlay /> Trigger
           </Button>
         </HStack>
       </Box>
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
index 32897d16efec9..695ea4ef280d0 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
+import { Box, Button } from "@chakra-ui/react";
 import { useDisclosure } from "@chakra-ui/react";
 import { FiPlay } from "react-icons/fi";
 
@@ -31,9 +31,9 @@ const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
 
   return (
     <Box>
-      <Box alignSelf="center" cursor="pointer" onClick={onOpen}>
+      <Button onClick={onOpen} variant="ghost">
         <FiPlay />
-      </Box>
+      </Button>
 
       <TriggerDAGModal
         dagDisplayName={dagDisplayName}

From a9e32ed14beb22ab60d5e906e0b1c282147cd017 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Tue, 12 Nov 2024 21:11:18 +0530
Subject: [PATCH 35/39] replace logical with data interval

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 51 +++++++++++++++++--
 .../components/TriggerDag/TriggerDAGModal.tsx |  3 +-
 .../src/components/TriggerDag/TriggerDag.tsx  |  6 ++-
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index b3cf338d4a824..5b1f4cfeb290a 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -42,15 +42,22 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   setDagParams,
 }) => {
   const [jsonError, setJsonError] = useState<string | undefined>();
+
   const {
     control,
     formState: { isDirty },
     handleSubmit,
     reset,
+    setValue,
+    watch,
   } = useForm<DagParams>({
     defaultValues: dagParams,
   });
 
+  // Watch the date fields for dynamic min/max constraints
+  const dataIntervalStart = watch("dataIntervalStart");
+  const dataIntervalEnd = watch("dataIntervalEnd");
+
   useEffect(() => {
     reset(dagParams);
   }, [dagParams, reset]);
@@ -78,6 +85,22 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     }
   };
 
+  // Function to validate and enforce date constraints based on which field is edited
+  const validateDates = (
+    fieldName: "dataIntervalEnd" | "dataIntervalStart",
+  ) => {
+    const startDate = dataIntervalStart ? new Date(dataIntervalStart) : null;
+    const endDate = dataIntervalEnd ? new Date(dataIntervalEnd) : null;
+
+    if (startDate && endDate) {
+      if (fieldName === "dataIntervalStart" && startDate > endDate) {
+        setValue("dataIntervalStart", dataIntervalEnd); // Adjust start to match end if invalid
+      } else if (fieldName === "dataIntervalEnd" && endDate < startDate) {
+        setValue("dataIntervalEnd", dataIntervalStart); // Adjust end to match start if invalid
+      }
+    }
+  };
+
   const { colorMode } = useColorMode();
 
   return (
@@ -88,14 +111,34 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           <Accordion.ItemContent>
             <Box p={5}>
               <Text fontSize="md" mb={2}>
-                Logical date
+                Data Interval Start Date
+              </Text>
+              <Controller
+                control={control}
+                name="dataIntervalStart"
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    max={dataIntervalEnd || undefined}
+                    onBlur={() => validateDates("dataIntervalStart")}
+                    placeholder="yyyy-mm-ddThh:mm"
+                    size="sm"
+                    type="datetime-local"
+                  />
+                )}
+              />
+
+              <Text fontSize="md" mb={2} mt={6}>
+                Data Interval End Date
               </Text>
               <Controller
                 control={control}
-                name="logicalDate"
+                name="dataIntervalEnd"
                 render={({ field }) => (
                   <Input
                     {...field}
+                    min={dataIntervalStart || undefined}
+                    onBlur={() => validateDates("dataIntervalEnd")}
                     placeholder="yyyy-mm-ddThh:mm"
                     size="sm"
                     type="datetime-local"
@@ -151,11 +194,11 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
                       }}
                       theme={colorMode === "dark" ? githubDark : githubLight}
                     />
-                    {Boolean(jsonError) && (
+                    {Boolean(jsonError) ? (
                       <Text color="red.500" fontSize="sm" mt={2}>
                         {jsonError}
                       </Text>
-                    )}
+                    ) : undefined}
                   </Box>
                 )}
               />
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 53497544744cf..b221a25634590 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -42,7 +42,8 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
     () => ({
       configJson: "{}",
       dagId,
-      logicalDate: "",
+      dataIntervalEnd: "",
+      dataIntervalStart: "",
       runId: "",
     }),
     [dagId],
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index 8bce74add45e2..8dd16f85e057d 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -20,7 +20,8 @@
 export type DagParams = {
   configJson: string;
   dagId: string;
-  logicalDate: string;
+  dataIntervalEnd: string;
+  dataIntervalStart: string;
   runId: string;
 };
 
@@ -35,7 +36,8 @@ export const TriggerDag = (dagParams: DagParams) => {
     Triggering DAG with the following parameters:
 
     Config JSON: ${JSON.stringify(dagParams.configJson)}
-    Logical Date: ${dagParams.logicalDate}
+    Data Interval Start Date: ${dagParams.dataIntervalStart}
+    Data Interval End Date: ${dagParams.dataIntervalEnd}
     Run ID: ${dagParams.runId}
 
     TODO: This trigger button is under progress.

From e2a217b8ecf43b824fca37e23fb48246cab9bfdc Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 13 Nov 2024 00:31:59 +0530
Subject: [PATCH 36/39] add dag pause-upause toggle

---
 .../components/TriggerDag/TriggerDAGForm.tsx  | 20 +++++++++-------
 .../TriggerDag/TriggerDAGIconButton.tsx       | 17 +++++++------
 .../components/TriggerDag/TriggerDAGModal.tsx | 24 +++++++++++--------
 .../TriggerDag/TriggerDAGTextButton.tsx       | 17 +++++++------
 .../src/components/TriggerDag/TriggerDag.tsx  |  5 ----
 airflow/ui/src/pages/DagsList/Dag/Header.tsx  |  7 +-----
 airflow/ui/src/pages/DagsList/DagCard.tsx     |  5 +---
 airflow/ui/src/pages/DagsList/DagsList.tsx    |  7 +-----
 8 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index 5b1f4cfeb290a..bb601b5453d9c 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -31,6 +31,7 @@ import type { DagParams } from "./TriggerDag";
 
 type TriggerDAGFormProps = {
   dagParams: DagParams;
+  isPaused: boolean;
   onClose: () => void;
   onTrigger: (updatedDagParams: DagParams) => void;
   setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
@@ -38,6 +39,7 @@ type TriggerDAGFormProps = {
 
 const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   dagParams,
+  isPaused,
   onTrigger,
   setDagParams,
 }) => {
@@ -54,7 +56,6 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     defaultValues: dagParams,
   });
 
-  // Watch the date fields for dynamic min/max constraints
   const dataIntervalStart = watch("dataIntervalStart");
   const dataIntervalEnd = watch("dataIntervalEnd");
 
@@ -85,18 +86,19 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     }
   };
 
-  // Function to validate and enforce date constraints based on which field is edited
   const validateDates = (
     fieldName: "dataIntervalEnd" | "dataIntervalStart",
   ) => {
-    const startDate = dataIntervalStart ? new Date(dataIntervalStart) : null;
-    const endDate = dataIntervalEnd ? new Date(dataIntervalEnd) : null;
+    const startDate = dataIntervalStart
+      ? new Date(dataIntervalStart)
+      : undefined;
+    const endDate = dataIntervalEnd ? new Date(dataIntervalEnd) : undefined;
 
     if (startDate && endDate) {
       if (fieldName === "dataIntervalStart" && startDate > endDate) {
-        setValue("dataIntervalStart", dataIntervalEnd); // Adjust start to match end if invalid
+        setValue("dataIntervalStart", dataIntervalEnd);
       } else if (fieldName === "dataIntervalEnd" && endDate < startDate) {
-        setValue("dataIntervalEnd", dataIntervalStart); // Adjust end to match start if invalid
+        setValue("dataIntervalEnd", dataIntervalStart);
       }
     }
   };
@@ -107,7 +109,9 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
     <>
       <Accordion.Root collapsible size="lg" variant="enclosed">
         <Accordion.Item key="advancedOptions" value="advancedOptions">
-          <Accordion.ItemTrigger>Advanced Options</Accordion.ItemTrigger>
+          <Accordion.ItemTrigger cursor="button">
+            Advanced Options
+          </Accordion.ItemTrigger>
           <Accordion.ItemContent>
             <Box p={5}>
               <Text fontSize="md" mb={2}>
@@ -217,7 +221,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           <Spacer />
           <Button
             colorPalette="blue"
-            disabled={Boolean(jsonError)}
+            disabled={Boolean(jsonError) || isPaused}
             onClick={() => void handleSubmit(onSubmit)()}
           >
             <FiPlay /> Trigger
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
index 695ea4ef280d0..7055e8f77cc0b 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
@@ -20,13 +20,15 @@ import { Box, Button } from "@chakra-ui/react";
 import { useDisclosure } from "@chakra-ui/react";
 import { FiPlay } from "react-icons/fi";
 
+import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+
 import TriggerDAGModal from "./TriggerDAGModal";
-import type { TriggerDAGButtonProps } from "./TriggerDag";
 
-const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
-  dagDisplayName,
-  dagId,
-}) => {
+type Props = {
+  readonly dag: DAGWithLatestDagRunsResponse;
+};
+
+const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
   const { onClose, onOpen, open } = useDisclosure();
 
   return (
@@ -36,8 +38,9 @@ const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
       </Button>
 
       <TriggerDAGModal
-        dagDisplayName={dagDisplayName}
-        dagId={dagId}
+        dagDisplayName={dag.dag_display_name}
+        dagId={dag.dag_id}
+        isPaused={dag.is_paused}
         onClose={onClose}
         open={open}
       />
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index b221a25634590..790499ec248c0 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -16,11 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Text, Heading, VStack } from "@chakra-ui/react";
+import { Heading, VStack } from "@chakra-ui/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Dialog } from "src/components/ui";
+import { Alert, Dialog } from "src/components/ui";
 
+import { TogglePause } from "../TogglePause";
 import TriggerDAGForm from "./TriggerDAGForm";
 import type { DagParams } from "./TriggerDag";
 import { TriggerDag as triggerDag } from "./TriggerDag";
@@ -28,6 +29,7 @@ import { TriggerDag as triggerDag } from "./TriggerDag";
 type TriggerDAGModalProps = {
   dagDisplayName: string;
   dagId: string;
+  isPaused: boolean;
   onClose: () => void;
   open: boolean;
 };
@@ -35,6 +37,7 @@ type TriggerDAGModalProps = {
 const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
   dagDisplayName,
   dagId,
+  isPaused,
   onClose,
   open,
 }) => {
@@ -69,16 +72,16 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
     <Dialog.Root onOpenChange={onClose} open={open} size="xl">
       <Dialog.Content backdrop>
         <Dialog.Header>
-          <VStack align="start" gap={2}>
+          <VStack align="start" gap={4}>
             <Heading size="xl">
-              Trigger DAG{" "}
-              {dagDisplayName ? <span>- {dagDisplayName}</span> : undefined}
+              Trigger DAG - {dagDisplayName}{" "}
+              <TogglePause dagId={dagParams.dagId} isPaused={isPaused} />
             </Heading>
-            {dagDisplayName !== dagId && (
-              <Text color="gray.500" fontSize="md">
-                DAG ID: {dagId}
-              </Text>
-            )}
+            {isPaused ? (
+              <Alert status="warning" title="Paused DAG">
+                You can not trigger a paused DAG, Unpause DAG to trigger
+              </Alert>
+            ) : undefined}
           </VStack>
         </Dialog.Header>
 
@@ -87,6 +90,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
         <Dialog.Body>
           <TriggerDAGForm
             dagParams={dagParams}
+            isPaused={isPaused}
             onClose={onClose}
             onTrigger={handleTrigger}
             setDagParams={setDagParams}
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
index 2efa1eda50f10..663155bf0926f 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
@@ -20,13 +20,15 @@ import { Box, Button } from "@chakra-ui/react";
 import { useDisclosure } from "@chakra-ui/react";
 import { FiPlay } from "react-icons/fi";
 
+import type { DAGResponse } from "openapi/requests/types.gen";
+
 import TriggerDAGModal from "./TriggerDAGModal";
-import type { TriggerDAGButtonProps } from "./TriggerDag";
 
-const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
-  dagDisplayName,
-  dagId,
-}) => {
+type Props = {
+  readonly dag: DAGResponse;
+};
+
+const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
   const { onClose, onOpen, open } = useDisclosure();
 
   return (
@@ -37,8 +39,9 @@ const TriggerDAGIconButton: React.FC<TriggerDAGButtonProps> = ({
       </Button>
 
       <TriggerDAGModal
-        dagDisplayName={dagDisplayName}
-        dagId={dagId}
+        dagDisplayName={dag.dag_display_name}
+        dagId={dag.dag_id}
+        isPaused={dag.is_paused}
         onClose={onClose}
         open={open}
       />
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
index 8dd16f85e057d..a9bb518ea5a79 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDag.tsx
@@ -25,11 +25,6 @@ export type DagParams = {
   runId: string;
 };
 
-export type TriggerDAGButtonProps = {
-  dagDisplayName: string;
-  dagId: string;
-};
-
 export const TriggerDag = (dagParams: DagParams) => {
   // eslint-disable-next-line no-alert
   alert(`
diff --git a/airflow/ui/src/pages/DagsList/Dag/Header.tsx b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
index 65a9de3b6abf7..2aabfb69c24f8 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Header.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Header.tsx
@@ -55,12 +55,7 @@ export const Header = ({
             <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
           )}
         </HStack>
-        <Flex>
-          <TriggerDAGTextButton
-            dagDisplayName={dag?.dag_display_name ?? ""}
-            dagId={dag?.dag_id ?? ""}
-          />
-        </Flex>
+        <Flex>{dag ? <TriggerDAGTextButton dag={dag} /> : undefined}</Flex>
       </Flex>
       <SimpleGrid columns={4} gap={4} my={2}>
         <VStack align="flex-start" gap={1}>
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx
index f5b2da3b4ac8c..614f7bd469219 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -74,10 +74,7 @@ export const DagCard = ({ dag }: Props) => {
         </HStack>
         <HStack>
           <TogglePause dagId={dag.dag_id} isPaused={dag.is_paused} />
-          <TriggerDAGIconButton
-            dagDisplayName={dag.dag_display_name}
-            dagId={dag.dag_id}
-          />
+          <TriggerDAGIconButton dag={dag} />
         </HStack>
       </Flex>
       <SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index 272055c905b01..44581b75634b1 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -126,12 +126,7 @@ const columns: Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
   },
   {
     accessorKey: "trigger",
-    cell: ({ row }) => (
-      <TriggerDAGIconButton
-        dagDisplayName={row.original.dag_display_name}
-        dagId={row.original.dag_id}
-      />
-    ),
+    cell: ({ row }) => <TriggerDAGIconButton dag={row.original} />,
     enableSorting: false,
     header: "",
   },

From 0c323fde125355e679cc3d6829dd5319826d6d51 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 13 Nov 2024 11:09:55 +0530
Subject: [PATCH 37/39] enable trigger for pause dag

---
 airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx  | 4 +---
 airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
index bb601b5453d9c..0844294f8b385 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -31,7 +31,6 @@ import type { DagParams } from "./TriggerDag";
 
 type TriggerDAGFormProps = {
   dagParams: DagParams;
-  isPaused: boolean;
   onClose: () => void;
   onTrigger: (updatedDagParams: DagParams) => void;
   setDagParams: React.Dispatch<React.SetStateAction<DagParams>>;
@@ -39,7 +38,6 @@ type TriggerDAGFormProps = {
 
 const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
   dagParams,
-  isPaused,
   onTrigger,
   setDagParams,
 }) => {
@@ -221,7 +219,7 @@ const TriggerDAGForm: React.FC<TriggerDAGFormProps> = ({
           <Spacer />
           <Button
             colorPalette="blue"
-            disabled={Boolean(jsonError) || isPaused}
+            disabled={Boolean(jsonError)}
             onClick={() => void handleSubmit(onSubmit)()}
           >
             <FiPlay /> Trigger
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index 790499ec248c0..d90867304e31f 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -79,7 +79,8 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             </Heading>
             {isPaused ? (
               <Alert status="warning" title="Paused DAG">
-                You can not trigger a paused DAG, Unpause DAG to trigger
+                Triggering will create a Dag run but it will not start until the
+                Dag is unpaused.
               </Alert>
             ) : undefined}
           </VStack>
@@ -90,7 +91,6 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
         <Dialog.Body>
           <TriggerDAGForm
             dagParams={dagParams}
-            isPaused={isPaused}
             onClose={onClose}
             onTrigger={handleTrigger}
             setDagParams={setDagParams}

From 6e13965fb26146303371c4897304dfffb732ecd3 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 13 Nov 2024 11:18:34 +0530
Subject: [PATCH 38/39] refactor

---
 airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index d90867304e31f..d68b900bdf533 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -79,8 +79,8 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             </Heading>
             {isPaused ? (
               <Alert status="warning" title="Paused DAG">
-                Triggering will create a Dag run but it will not start until the
-                Dag is unpaused.
+                Triggering will create a Dag run, but it will not start until
+                the Dag is unpaused.
               </Alert>
             ) : undefined}
           </VStack>

From c8c011925305cb5206f45f5c4f991ddbab3fc130 Mon Sep 17 00:00:00 2001
From: shubhamraj-git <shubhamraj.cs@gmail.com>
Date: Wed, 13 Nov 2024 19:19:21 +0530
Subject: [PATCH 39/39] DAG

---
 airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index d68b900bdf533..32edfd57e4bff 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -79,8 +79,8 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
             </Heading>
             {isPaused ? (
               <Alert status="warning" title="Paused DAG">
-                Triggering will create a Dag run, but it will not start until
-                the Dag is unpaused.
+                Triggering will create a DAG run, but it will not start until
+                the DAG is unpaused.
               </Alert>
             ) : undefined}
           </VStack>