Preserve active tabs during navigation

airflow-core/src/airflow/ui/src/components/Graph/TaskLink.tsx

@@ -20,26 +20,26 @@ import { forwardRef } from "react";
 import { useParams, useSearchParams, Link as RouterLink } from "react-router-dom";
 
 import { TaskName, type TaskNameProps } from "src/components/TaskName";
+import { useTaskUrlBuilder } from "src/hooks/useUrlBuilders";
 
 type Props = {
   readonly id: string;
 } & TaskNameProps;
 
 export const TaskLink = forwardRef<HTMLAnchorElement, Props>(({ id, isGroup, isMapped, ...rest }, ref) => {
-  const { dagId = "", groupId, runId, taskId } = useParams();
+  const { runId } = useParams();
   const [searchParams] = useSearchParams();
+  const buildTaskUrl = useTaskUrlBuilder();
 
-  const basePath = `/dags/${dagId}${runId === undefined ? "" : `/runs/${runId}`}`;
-  const taskPath = isGroup
-    ? groupId === id
-      ? ""
-      : `/tasks/group/${id}`
-    : taskId === id
-      ? ""
-      : `/tasks/${id}${isMapped && taskId !== id && runId !== undefined ? "/mapped" : ""}`;
+  const taskPath = buildTaskUrl({
+    isGroup,
+    isMapped,
+    runId,
+    taskId: id,
+  });
 
   return (
-    <RouterLink ref={ref} to={{ pathname: basePath + taskPath, search: searchParams.toString() }}>
+    <RouterLink ref={ref} to={{ pathname: taskPath, search: searchParams.toString() }}>
       <TaskName isGroup={isGroup} isMapped={isMapped} {...rest} />
     </RouterLink>
   );

airflow-core/src/airflow/ui/src/hooks/navigation/useNavigation.ts

@@ -17,11 +17,9 @@
  * under the License.
  */
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
-import type { GridRunsResponse } from "openapi/requests";
-import type { GridTask } from "src/layouts/Details/Grid/utils";
-import { buildTaskInstanceUrl } from "src/utils/links";
+import { useDagRunUrlBuilder, useTaskInstanceUrlBuilder, useTaskUrlBuilder } from "src/hooks/useUrlBuilders";
 
 import type {
   NavigationDirection,
@@ -62,44 +60,17 @@ const isValidDirection = (direction: NavigationDirection, mode: NavigationMode):
 const getNextIndex = (current: number, direction: number, options: { max: number }): number =>
   Math.max(0, Math.min(options.max - 1, current + direction));
 
-const buildPath = (params: {
-  dagId: string;
-  mapIndex?: string;
-  mode: NavigationMode;
-  pathname: string;
-  run: GridRunsResponse;
-  task: GridTask;
-}): string => {
-  const { dagId, mapIndex = "-1", mode, pathname, run, task } = params;
-  const groupPath = task.isGroup ? "group/" : "";
-
-  switch (mode) {
-    case "run":
-      return `/dags/${dagId}/runs/${run.run_id}`;
-    case "task":
-      return `/dags/${dagId}/tasks/${groupPath}${task.id}`;
-    case "TI":
-      return buildTaskInstanceUrl({
-        currentPathname: pathname,
-        dagId,
-        isGroup: task.isGroup,
-        isMapped: task.is_mapped ?? false,
-        mapIndex,
-        runId: run.run_id,
-        taskId: task.id,
-      });
-    default:
-      return `/dags/${dagId}`;
-  }
-};
-
 export const useNavigation = ({ onToggleGroup, runs, tasks }: UseNavigationProps): UseNavigationReturn => {
   const { dagId = "", groupId = "", mapIndex = "-1", runId = "", taskId = "" } = useParams();
   const enabled = Boolean(dagId) && (Boolean(runId) || Boolean(taskId) || Boolean(groupId));
   const navigate = useNavigate();
-  const location = useLocation();
   const [mode, setMode] = useState<NavigationMode>("TI");
 
+  // Use custom hooks for URL building
+  const buildDagRunUrl = useDagRunUrlBuilder();
+  const buildTaskUrl = useTaskUrlBuilder();
+  const buildTaskInstanceUrl = useTaskInstanceUrlBuilder();
+
   useEffect(() => {
     const detectedMode = detectModeFromUrl(globalThis.location.pathname);
 
@@ -170,7 +141,30 @@ export const useNavigation = ({ onToggleGroup, runs, tasks }: UseNavigationProps
       const task = tasks[newTaskIndex];
 
       if (run && task) {
-        const path = buildPath({ dagId, mapIndex, mode, pathname: location.pathname, run, task });
+        let path: string;
+
+        switch (mode) {
+          case "run":
+            path = buildDagRunUrl(run.run_id);
+            break;
+          case "task":
+            path = buildTaskUrl({
+              isGroup: task.isGroup,
+              taskId: task.id,
+            });
+            break;
+          case "TI":
+            path = buildTaskInstanceUrl({
+              isGroup: task.isGroup,
+              isMapped: task.is_mapped ?? false,
+              mapIndex,
+              runId: run.run_id,
+              taskId: task.id,
+            });
+            break;
+          default:
+            path = `/dags/${dagId}`;
+        }
 
         navigate(path, { replace: true });
 
@@ -182,7 +176,19 @@ export const useNavigation = ({ onToggleGroup, runs, tasks }: UseNavigationProps
         }
       }
     },
-    [currentIndices, dagId, enabled, location.pathname, mapIndex, mode, runs, tasks, navigate],
+    [
+      buildDagRunUrl,
+      buildTaskInstanceUrl,
+      buildTaskUrl,
+      currentIndices,
+      dagId,
+      enabled,
+      mapIndex,
+      mode,
+      navigate,
+      runs,
+      tasks,
+    ],
   );
 
   useKeyboardNavigation({

airflow-core/src/airflow/ui/src/hooks/useRequiredActionTabs.ts

@@ -46,7 +46,7 @@ export const useRequiredActionTabs = (
   options: UseRequiredActionTabsOptions = {},
 ) => {
   const { t: translate } = useTranslation("hitl");
-  const { autoRedirect = false, refetchInterval } = options;
+  const { autoRedirect = true, refetchInterval } = options;
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -59,6 +59,9 @@ export const useRequiredActionTabs = (
     if (Boolean(dagId) && Boolean(dagRunId)) {
       return `/dags/${dagId}/runs/${dagRunId}`;
     }
+    if (Boolean(dagId) && Boolean(taskId)) {
+      return `/dags/${dagId}/tasks/${taskId}`;
+    }
     if (Boolean(dagId) && Boolean(taskIdPattern)) {
       return `/dags/${dagId}/tasks/group/${taskIdPattern}`;
     }

airflow-core/src/airflow/ui/src/hooks/useUrlBuilders.ts

@@ -0,0 +1,76 @@
+/*!
+ * 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 { useLocation, useParams } from "react-router-dom";
+
+import { buildDagRunUrl, buildTaskInstanceUrl, buildTaskUrl } from "src/utils/links";
+
+export const useTaskUrlBuilder = () => {
+  const { pathname } = useLocation();
+  const { dagId } = useParams<{ dagId: string }>();
+
+  return (params: { isGroup?: boolean; isMapped?: boolean; runId?: string; taskId: string }): string => {
+    const { isGroup = false, isMapped = false, runId, taskId } = params;
+
+    return buildTaskUrl({
+      currentPathname: pathname,
+      dagId: dagId ?? "",
+      isGroup,
+      isMapped,
+      runId,
+      taskId,
+    });
+  };
+};
+
+export const useDagRunUrlBuilder = () => {
+  const { pathname } = useLocation();
+  const { dagId } = useParams<{ dagId: string }>();
+
+  return (runId: string): string =>
+    buildDagRunUrl({
+      currentPathname: pathname,
+      dagId: dagId ?? "",
+      runId,
+    });
+};
+
+export const useTaskInstanceUrlBuilder = () => {
+  const { pathname } = useLocation();
+  const { dagId } = useParams<{ dagId: string }>();
+
+  return (params: {
+    isGroup?: boolean;
+    isMapped?: boolean;
+    mapIndex?: string;
+    runId: string;
+    taskId: string;
+  }): string => {
+    const { isGroup = false, isMapped = false, mapIndex, runId, taskId } = params;
+
+    return buildTaskInstanceUrl({
+      currentPathname: pathname,
+      dagId: dagId ?? "",
+      isGroup,
+      isMapped,
+      mapIndex,
+      runId,
+      taskId,
+    });
+  };
+};

airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx

@@ -66,7 +66,6 @@ export const Bar = ({ max, nodes, onCellClick, onColumnClick, run }: Props) => {
         <GridButton
           alignItems="center"
           color="fg"
-          dagId={dagId}
           flexDir="column"
           height={`${(run.duration / max) * BAR_HEIGHT}px`}
           justifyContent="flex-end"

airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx

@@ -20,9 +20,9 @@ import { Flex, type FlexProps } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 
 import type { DagRunState, TaskInstanceState } from "openapi/requests/types.gen";
+import { useDagRunUrlBuilder, useTaskInstanceUrlBuilder } from "src/hooks/useUrlBuilders";
 
 type Props = {
-  readonly dagId: string;
   readonly isGroup?: boolean;
   readonly label: string;
   readonly runId: string;
@@ -33,16 +33,18 @@ type Props = {
 
 export const GridButton = ({
   children,
-  dagId,
   isGroup,
   label,
   runId,
   searchParams,
   state,
   taskId,
   ...rest
-}: Props) =>
-  isGroup ? (
+}: Props) => {
+  const buildDagRunUrl = useDagRunUrlBuilder();
+  const buildTaskInstanceUrl = useTaskInstanceUrlBuilder();
+
+  return isGroup ? (
     <Flex
       background={`${state}.solid`}
       borderRadius={2}
@@ -59,7 +61,7 @@ export const GridButton = ({
     <Link
       replace
       to={{
-        pathname: `/dags/${dagId}/runs/${runId}/${taskId === undefined ? "" : `tasks/${taskId}`}`,
+        pathname: taskId === undefined ? buildDagRunUrl(runId) : buildTaskInstanceUrl({ runId, taskId }),
         search: searchParams.toString(),
       }}
     >
@@ -77,3 +79,4 @@ export const GridButton = ({
       </Flex>
     </Link>
   );
+};

airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx

@@ -25,6 +25,7 @@ import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom
 import { TaskName } from "src/components/TaskName";
 import { type HoverContextType, useHover } from "src/context/hover";
 import { useOpenGroups } from "src/context/openGroups";
+import { useTaskUrlBuilder } from "src/hooks/useUrlBuilders";
 
 import type { GridTask } from "./utils";
 
@@ -64,8 +65,9 @@ export const TaskNames = ({ nodes, onRowClick }: Props) => {
   const { t: translate } = useTranslation("dag");
   const { setHoveredTaskId } = useHover();
   const { toggleGroupId } = useOpenGroups();
-  const { dagId = "", groupId, taskId } = useParams();
+  const { groupId, taskId } = useParams();
   const [searchParams] = useSearchParams();
+  const buildTaskUrl = useTaskUrlBuilder();
 
   return nodes.map((node, index) => (
     <Box
@@ -88,7 +90,10 @@ export const TaskNames = ({ nodes, onRowClick }: Props) => {
             replace
             style={{ outline: "none" }}
             to={{
-              pathname: `/dags/${dagId}/tasks/group/${node.id}`,
+              pathname: buildTaskUrl({
+                isGroup: true,
+                taskId: node.id,
+              }),
               search: searchParams.toString(),
             }}
           >
@@ -133,7 +138,10 @@ export const TaskNames = ({ nodes, onRowClick }: Props) => {
             onClick={onRowClick}
             replace
             to={{
-              pathname: `/dags/${dagId}/tasks/${node.id}`,
+              pathname: buildTaskUrl({
+                isGroup: false,
+                taskId: node.id,
+              }),
               search: searchParams.toString(),
             }}
           >

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

@@ -104,7 +104,6 @@ export const TaskInstance = () => {
   }
 
   const { tabs: displayTabs } = useRequiredActionTabs({ dagId, dagRunId: runId, taskId }, newTabs, {
-    autoRedirect: true,
     refetchInterval: isStatePending(taskInstance?.state) ? refetchInterval : false,
   });
 

airflow-core/src/airflow/ui/src/utils/links.test.ts

@@ -117,7 +117,6 @@ describe("getTaskInstanceAdditionalPath", () => {
       "code",
       "details",
       "rendered_templates",
-      "task_instances",
       "asset_events",
       "required_actions",
     ];