choo121600 · Oct 8, 2026 · Oct 7, 2026
@@ -52,7 +52,6 @@
   },
   "close": "إغلاق",
   "configForm": {
-    "advancedOptions": "خيارات متقدمة",
     "configJson": "تكوين JSON",
     "invalidJson": "تنسيق JSON غير صالح: {{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "Tancar",
   "configForm": {
-    "advancedOptions": "Opcions avançades",
     "configJson": "Configuració JSON",
     "invalidJson": "Format JSON no vàlid: {{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "Schließen",
   "configForm": {
-    "advancedOptions": "Erweiterte Optionen",
     "configJson": "JSON der Konfiguration",
     "invalidJson": "Ungültiges JSON Format: {{errorMessage}}"
   },

@@ -41,7 +41,6 @@
   },
   "close": "Κλείσιμο",
   "configForm": {
-    "advancedOptions": "Προχωρημένες Επιλογές",
     "configJson": "Ρυθμίσεις JSON",
     "invalidJson": "Μη έγκυρη μορφή JSON: {{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "Close",
   "configForm": {
-    "advancedOptions": "Advanced Options",
     "configJson": "Configuration JSON",
     "invalidJson": "Invalid JSON format: {{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "Cerrar",
   "configForm": {
-    "advancedOptions": "Opciones Avanzadas",
     "configJson": "Configuración JSON",
     "invalidJson": "Formato JSON inválido: {{errorMessage}}"
   },

@@ -54,7 +54,6 @@
   },
   "close": "Fermer",
   "configForm": {
-    "advancedOptions": "Options avancées",
     "configJson": "Configuration JSON",
     "invalidJson": "Format JSON invalide : {{errorMessage}}"
   },

@@ -42,7 +42,6 @@
   },
   "close": "סגור",
   "configForm": {
-    "advancedOptions": "אפשרויות מתקדמות",
     "configJson": "הגדרות JSON",
     "invalidJson": "מבנה ה-JSON אינו תקין: {{errorMessage}}"
   },

@@ -41,7 +41,6 @@
   },
   "close": "बंद करें",
   "configForm": {
-    "advancedOptions": "उन्नत विकल्प",
     "configJson": "विन्यास JSON",
     "invalidJson": "अमान्य JSON प्रारूप: {{errorMessage}}"
   },

@@ -41,7 +41,6 @@
   },
   "close": "Bezárás",
   "configForm": {
-    "advancedOptions": "Speciális beállítások",
     "configJson": "Konfiguráció JSON",
     "invalidJson": "Érvénytelen JSON formátum: {{errorMessage}}"
   },

@@ -39,7 +39,6 @@
   },
   "close": "Chiudi",
   "configForm": {
-    "advancedOptions": "Opzioni Avanzate",
     "configJson": "Configurazione JSON",
     "invalidJson": "Formato JSON non valido: {{errorMessage}}"
   },

@@ -37,7 +37,6 @@
   },
   "close": "閉じる",
   "configForm": {
-    "advancedOptions": "詳細設定",
     "configJson": "JSON の設定",
     "invalidJson": "無効な JSON 形式: {{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "닫기",
   "configForm": {
-    "advancedOptions": "고급 옵션",
     "configJson": "구성 JSON",
     "invalidJson": "잘못된 JSON 형식: {{errorMessage}}"
   },

@@ -41,7 +41,6 @@
   },
   "close": "Sluiten",
   "configForm": {
-    "advancedOptions": "Geavanceerde opties",
     "configJson": "Configuratie JSON",
     "invalidJson": "Ongeldig JSON formaat: {{errorMessage}}"
   },

@@ -56,7 +56,6 @@
   },
   "close": "Zamknij",
   "configForm": {
-    "advancedOptions": "Zaawansowane opcje",
     "configJson": "Konfiguracja JSON",
     "invalidJson": "Nieprawidłowy format JSON: {{errorMessage}}"
   },

@@ -40,7 +40,6 @@
   },
   "close": "Fechar",
   "configForm": {
-    "advancedOptions": "Opções Avançadas",
     "configJson": "Configuração JSON",
     "invalidJson": "Formato JSON inválido: {{errorMessage}}"
   },

@@ -43,7 +43,6 @@
   },
   "close": "Закрыть",
   "configForm": {
-    "advancedOptions": "Расширенные параметры",
     "configJson": "Конфигурация JSON",
     "invalidJson": "Некорректный формат JSON: {{errorMessage}}"
   },

@@ -37,7 +37,6 @@
   },
   "close": "ปิด",
   "configForm": {
-    "advancedOptions": "ตัวเลือกขั้นสูง",
     "configJson": "การตั้งค่า JSON",
     "invalidJson": "รูปแบบ JSON ไม่ถูกต้อง: {{errorMessage}}"
   },

@@ -41,7 +41,6 @@
   },
   "close": "Kapat",
   "configForm": {
-    "advancedOptions": "Gelişmiş Seçenekler",
     "configJson": "Yapılandırma JSON",
     "invalidJson": "Geçersiz JSON formatı: {{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "关闭",
   "configForm": {
-    "advancedOptions": "高级选项",
     "configJson": "配置 JSON",
     "invalidJson": "无效的 JSON 格式：{{errorMessage}}"
   },

@@ -52,7 +52,6 @@
   },
   "close": "關閉",
   "configForm": {
-    "advancedOptions": "進階選項",
     "configJson": "設定 JSON",
     "invalidJson": "無效的 JSON 格式: {{errorMessage}}"
   },

@@ -16,9 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import type { ChangeEvent } from "react";
-
-import { Box, Editable, Text, VStack } from "@chakra-ui/react";
+import { Box, Field, Heading, Stack, Text, VStack } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 
 import type {
@@ -29,7 +27,7 @@ import type {
 
 import { Accordion } from "src/system-components";
 
-import ReactMarkdown from "src/components/ReactMarkdown";
+import EditableMarkdown from "src/components/TriggerDag/EditableMarkdown";
 
 import { formatNumber } from "src/utils";
 
@@ -97,91 +95,61 @@ const ActionAccordion = ({ affectedTasks, groupByRunId = false, note, selection,
   const shouldGroup = groupByRunId && runGroups !== undefined && runGroups.size > 1;
 
   return (
-    <Accordion.Root
-      collapsible
-      defaultValue={showTaskSection ? ["tasks"] : ["note"]}
-      multiple={false}
-      variant="enclosed"
-    >
+    <VStack align="stretch" gap={4}>
       {showTaskSection ? (
-        <Accordion.Item key="tasks" value="tasks">
-          <Accordion.ItemTrigger>
-            <Text fontWeight="bold">
-              {translate("dags:runAndTaskActions.affectedTasks.title", {
-                count: affectedTasks.total_entries ?? 0,
-              })}
-            </Text>
-          </Accordion.ItemTrigger>
-          <Accordion.ItemContent>
-            <Box maxH="400px" overflowY="scroll">
-              {shouldGroup ? (
-                <Accordion.Root collapsible multiple variant="plain">
-                  {[...runGroups.entries()].map(([runId, tis]) => (
-                    <Accordion.Item key={runId} value={runId}>
-                      <Accordion.ItemTrigger px={2} py={1}>
-                        <Text fontSize="sm" fontWeight="semibold">
-                          {translate("runId")}: {runId}{" "}
-                          <Text as="span" color="fg.subtle" fontWeight="normal">
-                            ({formatNumber(tis.length, i18n.language)})
-                          </Text>
+        <Box>
+          <Heading mb={2} size="lg">
+            {translate("dags:runAndTaskActions.affectedTasks.title", {
+              count: affectedTasks.total_entries ?? 0,
+            })}
+          </Heading>
+          <Box borderRadius="md" borderWidth={1} maxH="400px" overflowY="auto">
+            {shouldGroup ? (
+              <Accordion.Root collapsible defaultValue={[...runGroups.keys()]} multiple variant="plain">
+                {[...runGroups.entries()].map(([runId, tis]) => (
+                  <Accordion.Item key={runId} value={runId}>
+                    <Accordion.ItemTrigger px={2} py={1}>
+                      <Text fontSize="sm" fontWeight="semibold">
+                        {translate("runId")}: {runId}{" "}
+                        <Text as="span" color="fg.subtle" fontWeight="normal">
+                          ({formatNumber(tis.length, i18n.language)})
                         </Text>
-                      </Accordion.ItemTrigger>
-                      <Accordion.ItemContent>
-                        <TasksTable
-                          noRowsMessage={translate("dags:runAndTaskActions.affectedTasks.noItemsFound")}
-                          selection={selection}
-                          tasks={tis}
-                        />
-                      </Accordion.ItemContent>
-                    </Accordion.Item>
-                  ))}
-                </Accordion.Root>
-              ) : (
-                <TasksTable
-                  noRowsMessage={translate("dags:runAndTaskActions.affectedTasks.noItemsFound")}
-                  selection={selection}
-                  tasks={affectedTasks.task_instances}
-                />
-              )}
-            </Box>
-          </Accordion.ItemContent>
-        </Accordion.Item>
+                      </Text>
+                    </Accordion.ItemTrigger>
+                    <Accordion.ItemContent>
+                      <TasksTable
+                        noRowsMessage={translate("dags:runAndTaskActions.affectedTasks.noItemsFound")}
+                        selection={selection}
+                        tasks={tis}
+                      />
+                    </Accordion.ItemContent>
+                  </Accordion.Item>
+                ))}
+              </Accordion.Root>
+            ) : (
+              <TasksTable
+                noRowsMessage={translate("dags:runAndTaskActions.affectedTasks.noItemsFound")}
+                selection={selection}
+                tasks={affectedTasks.task_instances}
+              />
+            )}
+          </Box>
+        </Box>
       ) : undefined}
-      <Accordion.Item key="note" value="note">
-        <Accordion.ItemTrigger>
-          <Text fontWeight="bold">{translate("note.label")}</Text>
-        </Accordion.ItemTrigger>
-        <Accordion.ItemContent>
-          <Editable.Root
-            onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
-            value={note ?? ""}
-          >
-            <Editable.Preview
-              _hover={{ backgroundColor: "transparent" }}
-              alignItems="flex-start"
-              as={VStack}
-              gap="0"
-              height="200px"
-              overflowY="auto"
-              width="100%"
-            >
-              {Boolean(note) ? (
-                <ReactMarkdown>{note}</ReactMarkdown>
-              ) : (
-                <Text color="fg.subtle">{translate("note.placeholder")}</Text>
-              )}
-            </Editable.Preview>
-            <Editable.Textarea
-              data-testid="notes-input"
-              height="200px"
-              overflowY="auto"
-              placeholder={translate("note.placeholder")}
-              resize="none"
-            />
-          </Editable.Root>
-        </Accordion.ItemContent>
-      </Accordion.Item>
-    </Accordion.Root>
+      <Field.Root orientation="horizontal">
+        <Stack>
+          <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
+            {translate("note.label")}
+          </Field.Label>
+        </Stack>
+        <Stack css={{ flexBasis: "70%" }}>
+          <EditableMarkdown
+            field={{ onChange: setNote, value: note ?? "" }}
+            placeholder={translate("note.placeholder")}
+          />
+        </Stack>
+      </Field.Root>
+    </VStack>
   );
 };