[v3-1-test] Popup is getting automatically closed when there is a DAG…

airflow-core/src/airflow/ui/src/components/ActionAccordion/ActionAccordion.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Editable, Text, VStack } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { DAGRunResponse, TaskInstanceCollectionResponse } from "openapi/requests/types.gen";
@@ -39,6 +40,8 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
   const showTaskSection = affectedTasks !== undefined;
   const { t: translate } = useTranslation();
 
+  const columns = useMemo(() => getColumns(translate), [translate]);
+
   return (
     <Accordion.Root
       collapsible
@@ -58,7 +61,7 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
           <Accordion.ItemContent>
             <Box maxH="400px" overflowY="scroll">
               <DataTable
-                columns={getColumns(translate)}
+                columns={columns}
                 data={affectedTasks.task_instances}
                 displayMode="table"
                 modelName={translate("common:taskInstance_other")}

airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx

@@ -31,24 +31,34 @@ import ClearTaskInstanceDialog from "./ClearTaskInstanceDialog";
 type Props = {
   readonly groupTaskInstance?: LightGridTaskInstanceSummary;
   readonly isHotkeyEnabled?: boolean;
+  // Optional: allow parent to handle opening a stable, page-level dialog
+  readonly onOpen?: (ti: LightGridTaskInstanceSummary | TaskInstanceResponse) => void;
   readonly taskInstance?: TaskInstanceResponse;
   readonly withText?: boolean;
 };
 
 const ClearTaskInstanceButton = ({
   groupTaskInstance,
   isHotkeyEnabled = false,
+  onOpen,
   taskInstance,
   withText = true,
 }: Props) => {
-  const { onClose, onOpen, open } = useDisclosure();
+  const { onClose, onOpen: onOpenInternal, open } = useDisclosure();
   const { t: translate } = useTranslation();
   const isGroup = groupTaskInstance && !taskInstance;
+  const useInternalDialog = !Boolean(onOpen);
+
+  const selectedInstance = taskInstance ?? groupTaskInstance;
 
   useHotkeys(
     "shift+c",
     () => {
-      onOpen();
+      if (onOpen && selectedInstance) {
+        onOpen(selectedInstance);
+      } else {
+        onOpenInternal();
+      }
     },
     { enabled: isHotkeyEnabled },
   );
@@ -66,18 +76,18 @@ const ClearTaskInstanceButton = ({
             type: translate("taskInstance_one"),
           })}
           icon={<CgRedo />}
-          onClick={onOpen}
+          onClick={() => (onOpen && selectedInstance ? onOpen(selectedInstance) : onOpenInternal())}
           text={translate("dags:runAndTaskActions.clear.button", {
             type: translate(isGroup ? "taskGroup" : "taskInstance_one"),
           })}
           withText={withText}
         />
 
-        {open && isGroup ? (
+        {useInternalDialog && open && isGroup ? (
           <ClearGroupTaskInstanceDialog onClose={onClose} open={open} taskInstance={groupTaskInstance} />
         ) : undefined}
 
-        {open && !isGroup && taskInstance ? (
+        {useInternalDialog && open && !isGroup && taskInstance ? (
           <ClearTaskInstanceDialog onClose={onClose} open={open} taskInstance={taskInstance} />
         ) : undefined}
       </Box>

airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Heading, Link, VStack } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams, Link as RouterLink } from "react-router-dom";
 
@@ -111,6 +112,8 @@ export const AssetsList = () => {
     orderBy,
   });
 
+  const columns = useMemo(() => createColumns(translate), [translate]);
+
   const handleSearchChange = (value: string) => {
     setTableURLState({
       pagination: { ...pagination, pageIndex: 0 },
@@ -140,7 +143,7 @@ export const AssetsList = () => {
       </VStack>
       <Box overflow="auto">
         <DataTable
-          columns={createColumns(translate)}
+          columns={columns}
           data={data?.assets ?? []}
           errorMessage={<ErrorAlert error={error} />}
           initialState={tableURLState}

airflow-core/src/airflow/ui/src/pages/Dag/Backfills/Backfills.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Heading, Text } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
@@ -117,14 +118,16 @@ export const Backfills = () => {
     offset: pagination.pageIndex * pagination.pageSize,
   });
 
+  const columns = useMemo(() => getColumns(translate), [translate]);
+
   return (
     <Box>
       <ErrorAlert error={error} />
       <Heading my={1} size="md">
         {translate("backfill", { count: data ? data.total_entries : 0 })}
       </Heading>
       <DataTable
-        columns={getColumns(translate)}
+        columns={columns}
         data={data ? data.backfills : []}
         isFetching={isFetching}
         isLoading={isLoading}

airflow-core/src/airflow/ui/src/pages/DagRuns.tsx

@@ -21,7 +21,7 @@
 import { Flex, HStack, Link, type SelectValueChangeDetails, Text, Box } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
@@ -287,6 +287,7 @@ export const DagRuns = () => {
     },
     [pagination, searchParams, setSearchParams, setTableURLState, sorting],
   );
+  const columns = useMemo(() => runColumns(translate, dagId), [translate, dagId]);
 
   return (
     <>
@@ -378,7 +379,7 @@ export const DagRuns = () => {
         </Select.Root>
       </HStack>
       <DataTable
-        columns={runColumns(translate, dagId)}
+        columns={columns}
         data={data?.dag_runs ?? []}
         errorMessage={<ErrorAlert error={error} />}
         initialState={tableURLState}

airflow-core/src/airflow/ui/src/pages/Events/Events.tsx

@@ -19,6 +19,7 @@
 import { Code, Flex, Heading, useDisclosure, VStack } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import dayjs from "dayjs";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams, useSearchParams } from "react-router-dom";
 
@@ -207,6 +208,11 @@ export const Events = () => {
     undefined,
   );
 
+  const columns = useMemo(
+    () => eventsColumn({ dagId, open, runId, taskId }, translate),
+    [dagId, open, runId, taskId, translate],
+  );
+
   return (
     <VStack alignItems="stretch">
       {dagId === undefined && runId === undefined && taskId === undefined ? (
@@ -224,7 +230,7 @@ export const Events = () => {
 
       <ErrorAlert error={error} />
       <DataTable
-        columns={eventsColumn({ dagId, open, runId, taskId }, translate)}
+        columns={columns}
         data={data?.event_logs ?? []}
         displayMode="table"
         initialState={tableURLState}

airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLTaskInstances.tsx

@@ -19,7 +19,7 @@
 import { Heading, Link, VStack } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
@@ -179,6 +179,17 @@ export const HITLTaskInstances = () => {
     setSearchParams(searchParams);
   }, [pagination, searchParams, setSearchParams, setTableURLState, sorting]);
 
+  const columns = useMemo(
+    () =>
+      taskInstanceColumns({
+        dagId,
+        runId,
+        taskId,
+        translate,
+      }),
+    [dagId, runId, taskId, translate],
+  );
+
   return (
     <VStack align="start">
       {!Boolean(dagId) && !Boolean(runId) && !Boolean(taskId) ? (
@@ -188,12 +199,7 @@ export const HITLTaskInstances = () => {
       ) : undefined}
       <HITLFilters onResponseChange={handleResponseChange} />
       <DataTable
-        columns={taskInstanceColumns({
-          dagId,
-          runId,
-          taskId,
-          translate,
-        })}
+        columns={columns}
         data={data?.hitl_details ?? []}
         errorMessage={<ErrorAlert error={error} />}
         initialState={tableURLState}

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

@@ -23,6 +23,7 @@ import { MdOutlineTask } from "react-icons/md";
 
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ClearTaskInstanceButton } from "src/components/Clear";
+import ClearTaskInstanceDialog from "src/components/Clear/TaskInstance/ClearTaskInstanceDialog";
 import { DagVersion } from "src/components/DagVersion";
 import EditableMarkdownButton from "src/components/EditableMarkdownButton";
 import { HeaderCard } from "src/components/HeaderCard";
@@ -93,6 +94,9 @@ export const Header = ({
     setNote(taskInstance.note ?? "");
   };
 
+  // Stable dialog state at header/page level
+  const [clearOpen, setClearOpen] = useState(false);
+
   return (
     <Box ref={containerRef}>
       <HeaderCard
@@ -111,6 +115,7 @@ export const Header = ({
             />
             <ClearTaskInstanceButton
               isHotkeyEnabled
+              onOpen={() => setClearOpen(true)}
               taskInstance={taskInstance}
               withText={containerWidth > 700}
             />
@@ -127,6 +132,13 @@ export const Header = ({
         stats={stats}
         title={`${taskInstance.task_display_name}${taskInstance.map_index > -1 ? ` [${taskInstance.rendered_map_index ?? taskInstance.map_index}]` : ""}`}
       />
+      {clearOpen ? (
+        <ClearTaskInstanceDialog
+          onClose={() => setClearOpen(false)}
+          open={clearOpen}
+          taskInstance={taskInstance}
+        />
+      ) : undefined}
     </Box>
   );
 };

airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx

@@ -21,7 +21,7 @@
 import { Flex, Link } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
@@ -261,19 +261,25 @@ export const TaskInstances = () => {
     },
   );
 
+  const columns = useMemo(
+    () =>
+      taskInstanceColumns({
+        dagId,
+        runId,
+        taskId: Boolean(groupId) ? undefined : taskId,
+        translate,
+      }),
+    [dagId, runId, groupId, taskId, translate],
+  );
+
   return (
     <>
       <TaskInstancesFilter
         setTaskDisplayNamePattern={setTaskDisplayNamePattern}
         taskDisplayNamePattern={taskDisplayNamePattern}
       />
       <DataTable
-        columns={taskInstanceColumns({
-          dagId,
-          runId,
-          taskId: Boolean(groupId) ? undefined : taskId,
-          translate,
-        })}
+        columns={columns}
         data={data?.task_instances ?? []}
         errorMessage={<ErrorAlert error={error} />}
         initialState={tableURLState}

airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Heading, Link, Flex, useDisclosure } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
@@ -161,6 +162,8 @@ export const XCom = () => {
 
   const { data, error, isFetching, isLoading } = useXcomServiceGetXcomEntries(apiParams, undefined);
 
+  const memoizedColumns = useMemo(() => columns(translate, open), [translate, open]);
+
   return (
     <Box>
       {dagId === "~" && runId === "~" && taskId === "~" ? (
@@ -179,7 +182,7 @@ export const XCom = () => {
 
       <ErrorAlert error={error} />
       <DataTable
-        columns={columns(translate, open)}
+        columns={memoizedColumns}
         data={data ? data.xcom_entries : []}
         displayMode="table"
         initialState={tableURLState}