UI: Highlight selected Grid task square

airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.test.tsx

@@ -0,0 +1,114 @@
+/*!
+ * 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 "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { LightGridTaskInstanceSummary } from "openapi/requests/types.gen";
+import { TimezoneProvider } from "src/context/timezone";
+import { BaseWrapper } from "src/utils/Wrapper";
+
+import { GridTI } from "./GridTI";
+import { SELECTED_TASK_OUTLINE_COLOR } from "./constants";
+
+const colorModeMock = vi.fn<() => { colorMode: "dark" | "light" | undefined }>();
+
+vi.mock("src/context/colorMode", () => ({
+  useColorMode: () => colorModeMock(),
+}));
+
+const taskInstance: LightGridTaskInstanceSummary = {
+  child_states: null,
+  max_end_date: null,
+  min_start_date: null,
+  state: "success",
+  task_display_name: "selected_task",
+  task_id: "selected_task",
+};
+
+const SELECTED_RUN_ID = "manual__2026-04-21T00:00:00+00:00";
+
+const renderGridTI = (route: string, taskId = "selected_task", runId = SELECTED_RUN_ID) =>
+  render(
+    <BaseWrapper>
+      <TimezoneProvider>
+        <MemoryRouter initialEntries={[route]}>
+          <Routes>
+            <Route
+              element={
+                <GridTI
+                  dagId="example_dag"
+                  instance={{ ...taskInstance, task_id: taskId }}
+                  label={taskId}
+                  runId={runId}
+                  taskId={taskId}
+                />
+              }
+              path="/dags/:dagId/runs/:runId/tasks/:taskId"
+            />
+          </Routes>
+        </MemoryRouter>
+      </TimezoneProvider>
+    </BaseWrapper>,
+  );
+
+describe("GridTI", () => {
+  beforeEach(() => {
+    colorModeMock.mockReturnValue({ colorMode: "light" });
+  });
+
+  it("marks the selected task square", () => {
+    renderGridTI(`/dags/example_dag/runs/${SELECTED_RUN_ID}/tasks/selected_task`);
+
+    expect(screen.getByTestId("task-state-badge")).toHaveAttribute("data-selected", "true");
+    expect(screen.getByTestId("task-state-badge").closest("[data-task-id='selected_task']")).toHaveAttribute(
+      "data-selected",
+      "true",
+    );
+  });
+
+  it("uses a lighter outline for the selected task square in dark mode", () => {
+    expect(SELECTED_TASK_OUTLINE_COLOR.dark).toBe("brand.contrast");
+  });
+
+  it("does not mark another task square as selected", () => {
+    renderGridTI(`/dags/example_dag/runs/${SELECTED_RUN_ID}/tasks/selected_task`, "other_task");
+
+    expect(screen.getByTestId("task-state-badge")).not.toHaveAttribute("data-selected");
+    expect(screen.getByTestId("task-state-badge").closest("[data-task-id='other_task']")).toHaveAttribute(
+      "data-selected",
+      "false",
+    );
+  });
+
+  it("keeps the task row selected without marking the same task square in another Dag run as selected", () => {
+    renderGridTI(
+      `/dags/example_dag/runs/${SELECTED_RUN_ID}/tasks/selected_task`,
+      "selected_task",
+      "other_run",
+    );
+
+    expect(screen.getByTestId("task-state-badge")).not.toHaveAttribute("data-selected");
+    expect(screen.getByTestId("task-state-badge").closest("[data-task-id='selected_task']")).toHaveAttribute(
+      "data-selected",
+      "true",
+    );
+  });
+});

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

@@ -22,9 +22,10 @@ import { Link, useLocation, useParams, useSearchParams } from "react-router-dom"
 import type { LightGridTaskInstanceSummary } from "openapi/requests/types.gen";
 import { StateIcon } from "src/components/StateIcon";
 import TaskInstanceTooltip from "src/components/TaskInstanceTooltip";
+import { useColorMode } from "src/context/colorMode";
 import { buildTaskInstanceUrl } from "src/utils/links";
 
-import { NOTE_GRADIENT } from "./constants";
+import { NOTE_GRADIENT, SELECTED_TASK_OUTLINE_COLOR } from "./constants";
 
 type Props = {
   readonly dagId: string;
@@ -48,7 +49,8 @@ export const GridTI = ({
   runId,
   taskId,
 }: Props) => {
-  const { groupId: selectedGroupId, taskId: selectedTaskId } = useParams();
+  const { groupId: selectedGroupId, runId: selectedRunId, taskId: selectedTaskId } = useParams();
+  const { colorMode = "light" } = useColorMode();
   const location = useLocation();
 
   const [searchParams] = useSearchParams();
@@ -68,14 +70,16 @@ export const GridTI = ({
   searchParams.delete("try_number");
   const redirectionSearch = searchParams.toString();
 
-  const isSelected = selectedTaskId === taskId || selectedGroupId === taskId;
+  const isSelectedRow = selectedTaskId === taskId || selectedGroupId === taskId;
+  const isSelectedTaskInstance = selectedRunId === runId && isSelectedRow;
+  const selectedOutlineColor = SELECTED_TASK_OUTLINE_COLOR[colorMode];
 
   return (
     <Flex
       alignItems="center"
-      bg={isSelected ? "brand.emphasized" : undefined}
+      bg={isSelectedRow ? "brand.emphasized" : undefined}
       data-run-id={runId}
-      data-selected={isSelected}
+      data-selected={isSelectedRow}
       data-task-id={taskId}
       height="20px"
       id={`task-${taskId.replaceAll(".", "-")}`}
@@ -107,13 +111,19 @@ export const GridTI = ({
               alignItems="center"
               borderRadius={4}
               colorPalette={instance.state ?? "none"}
+              data-selected={isSelectedTaskInstance || undefined}
               data-testid="task-state-badge"
               display="flex"
               height="14px"
               justifyContent="center"
               minH={0}
+              outlineColor={isSelectedTaskInstance ? selectedOutlineColor : undefined}
+              outlineOffset="1px"
+              outlineStyle={isSelectedTaskInstance ? "solid" : undefined}
+              outlineWidth={isSelectedTaskInstance ? "2px" : undefined}
               p={0}
               style={hasNote ? { background: NOTE_GRADIENT } : undefined}
+              transition="outline-color 0.2s"
               variant="solid"
               width="14px"
             >

airflow-core/src/airflow/ui/src/layouts/Details/Grid/constants.ts

@@ -41,6 +41,10 @@ export const BUNDLE_VERSION_INDICATOR_LEFT = -2; // Position from left for bundl
 export const BUNDLE_VERSION_ICON_SIZE = 15; // Size of the git commit icon
 export const DAG_VERSION_INDICATOR_HEIGHT = 104; // Height of the vertical line indicator
 export const VERSION_INDICATOR_Z_INDEX = 1; // Z-index for version indicators
+export const SELECTED_TASK_OUTLINE_COLOR = {
+  dark: "brand.contrast",
+  light: "brand.solid",
+} as const;
 
 // Render a gradient to indicate a saved note on a Dag run or task instance
 export const NOTE_GRADIENT =