Add import error to deactivated dag

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

@@ -0,0 +1,87 @@
+/*!
+ * 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, ClipboardRoot, HStack, Text } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { LuFileWarning } from "react-icons/lu";
+import { PiFilePy } from "react-icons/pi";
+
+import type { ImportErrorResponse } from "openapi/requests/types.gen";
+import { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { Accordion, ClipboardIconButton } from "src/components/ui";
+
+type Props = {
+  readonly defaultValue?: Array<string>;
+  readonly importErrors: ReadonlyArray<ImportErrorResponse>;
+  readonly showFileErrorIndicator?: boolean;
+};
+
+export const DagImportErrorAccordion = ({
+  defaultValue,
+  importErrors,
+  showFileErrorIndicator = false,
+}: Props) => {
+  const { t: translate } = useTranslation(["dashboard", "components"]);
+
+  if (importErrors.length === 0) {
+    return undefined;
+  }
+
+  return (
+    <Accordion.Root collapsible defaultValue={defaultValue} multiple size="md" variant="enclosed">
+      {importErrors.map((importError) => (
+        <Accordion.Item key={importError.import_error_id} value={String(importError.import_error_id)}>
+          <HStack align="stretch" gap={0} w="100%">
+            <Accordion.ItemTrigger cursor="pointer" flex="1">
+              <HStack alignItems="center" flexWrap="wrap" gap={2} w="100%">
+                {showFileErrorIndicator ? (
+                  <StateBadge borderRadius="full" colorPalette="failed" fontSize="lg" py={1}>
+                    <LuFileWarning />
+                  </StateBadge>
+                ) : undefined}
+                <Text display="flex" fontWeight="bold">
+                  {translate("components:versionDetails.bundleName")}
+                  {": "}
+                  {importError.bundle_name}
+                </Text>
+                <PiFilePy />
+                {importError.filename}
+              </HStack>
+            </Accordion.ItemTrigger>
+            <Box alignItems="center" display="flex" flexShrink={0} pr={2}>
+              <ClipboardRoot value={importError.filename}>
+                <ClipboardIconButton variant="outline" />
+              </ClipboardRoot>
+            </Box>
+          </HStack>
+          <Accordion.ItemContent>
+            <Text color="fg.muted" fontSize="sm" mb={1}>
+              {translate("importErrors.timestamp")}
+              {": "}
+              <Time datetime={importError.timestamp} />
+            </Text>
+            <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
+              <code>{importError.stack_trace}</code>
+            </Text>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  );
+};

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

@@ -0,0 +1,51 @@
+/*!
+ * 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 } from "@chakra-ui/react";
+import { LuFileWarning } from "react-icons/lu";
+
+import { StateBadge } from "src/components/StateBadge";
+
+export type DagImportErrorsIconBadgeProps = {
+  readonly "aria-label"?: string | undefined;
+  readonly count?: number;
+  readonly "data-testid"?: string | undefined;
+  readonly onClick: () => void;
+  readonly title: string;
+};
+
+export const DagImportErrorsIconBadge = ({
+  "aria-label": ariaLabel,
+  count,
+  "data-testid": dataTestId,
+  onClick,
+  title,
+}: DagImportErrorsIconBadgeProps) => (
+  <StateBadge
+    aria-label={ariaLabel ?? title}
+    as={Button}
+    colorPalette="failed"
+    {...(dataTestId === undefined ? {} : { "data-testid": dataTestId })}
+    height={7}
+    onClick={onClick}
+    title={title}
+  >
+    <LuFileWarning size={8} />
+    {count ?? undefined}
+  </StateBadge>
+);

airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx

@@ -53,6 +53,7 @@ import { SearchParamsKeys } from "src/constants/searchParams";
 import { VersionIndicatorOptions } from "src/constants/showVersionIndicatorOptions";
 import { HoverProvider, useHover } from "src/context/hover";
 import { OpenGroupsProvider } from "src/context/openGroups";
+import { DagImportError } from "src/pages/Dag/DagImportError";
 import { useGridRuns } from "src/queries/useGridRuns.ts";
 
 import { DagBreadcrumb } from "./DagBreadcrumb";
@@ -218,9 +219,12 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
   return (
     <HoverProvider>
       <OpenGroupsProvider dagId={dagId}>
-        <HStack justifyContent="space-between" mb={2}>
-          <DagBreadcrumb />
-          <Flex gap={1}>
+        <HStack alignItems="center" gap={2} justifyContent="space-between" mb={2}>
+          <Flex alignItems="center" gap={2}>
+            {dag === undefined ? undefined : <DagImportError dag={dag} />}
+            <DagBreadcrumb />
+          </Flex>
+          <Flex flexShrink={0} gap={1}>
             <SearchDagsButton />
             {dag === undefined ? undefined : (
               <TriggerDAGButton

airflow-core/src/airflow/ui/src/pages/Dag/DagImportError.test.tsx

@@ -0,0 +1,166 @@
+/*!
+ * 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 { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import i18n from "src/i18n/config";
+import { Wrapper } from "src/utils/Wrapper";
+
+import dashboardLocale from "../../../public/i18n/locales/en/dashboard.json";
+import { DagImportError } from "./DagImportError";
+
+const { mockUseImportErrorServiceGetImportErrors } = vi.hoisted(() => ({
+  mockUseImportErrorServiceGetImportErrors: vi.fn(),
+}));
+
+vi.mock("openapi/queries", async (importOriginal) => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- `import()` type is the standard pattern for typing `importOriginal` in Vitest mocks.
+  const actual = await importOriginal<typeof import("openapi/queries")>();
+
+  return {
+    ...actual,
+    useImportErrorServiceGetImportErrors: mockUseImportErrorServiceGetImportErrors,
+  };
+});
+
+const emptyImportErrorsQuery = {
+  data: { import_errors: [], total_entries: 0 },
+  error: null,
+  isError: false,
+  isLoading: false,
+  isPending: false,
+};
+
+const staleDagFields = {
+  bundle_name: "dags-folder",
+  is_stale: true,
+  relative_fileloc: "stale_dag.py",
+} as const;
+
+describe("DagImportError", () => {
+  beforeEach(() => {
+    i18n.addResourceBundle("en", "dashboard", dashboardLocale, true, true);
+    mockUseImportErrorServiceGetImportErrors.mockReturnValue(emptyImportErrorsQuery);
+  });
+
+  it("does not render when there is no matching import error", () => {
+    render(
+      <Wrapper>
+        <DagImportError dag={staleDagFields} />
+      </Wrapper>,
+    );
+
+    expect(screen.queryByTestId("dag-import-error")).not.toBeInTheDocument();
+  });
+
+  it("shows a matching import error when the API returns a file-scoped error", async () => {
+    mockUseImportErrorServiceGetImportErrors.mockReturnValue({
+      ...emptyImportErrorsQuery,
+      data: {
+        import_errors: [
+          {
+            bundle_name: "dags-folder",
+            filename: "stale_dag.py",
+            import_error_id: 42,
+            stack_trace: "Traceback (most recent call last):\nSyntaxError: invalid syntax",
+            timestamp: "2025-02-01T12:00:00Z",
+          },
+        ],
+        total_entries: 1,
+      },
+    });
+
+    render(
+      <Wrapper>
+        <DagImportError dag={staleDagFields} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByTestId("dag-import-error")).toBeInTheDocument();
+    const openButton = screen.getByRole("button", {
+      name: i18n.t("importErrors.dagImportError", { count: 1, ns: "dashboard" }),
+    });
+
+    expect(openButton).toBeInTheDocument();
+    expect(screen.queryByText(/SyntaxError: invalid syntax/u)).not.toBeInTheDocument();
+
+    fireEvent.click(openButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(i18n.t("importErrors.dagImportError", { count: 1, ns: "dashboard" })),
+      ).toBeInTheDocument();
+    });
+    expect(screen.getByText("stale_dag.py")).toBeInTheDocument();
+    expect(screen.getByText(/SyntaxError: invalid syntax/u)).toBeInTheDocument();
+  });
+
+  it("does not render when the dag is not stale", () => {
+    mockUseImportErrorServiceGetImportErrors.mockReturnValue({
+      ...emptyImportErrorsQuery,
+      data: {
+        import_errors: [
+          {
+            bundle_name: "dags-folder",
+            filename: "stale_dag.py",
+            import_error_id: 1,
+            stack_trace: "would match if stale",
+            timestamp: "2025-02-01T12:00:00Z",
+          },
+        ],
+        total_entries: 1,
+      },
+    });
+
+    render(
+      <Wrapper>
+        <DagImportError dag={{ ...staleDagFields, is_stale: false }} />
+      </Wrapper>,
+    );
+
+    expect(screen.queryByTestId("dag-import-error")).not.toBeInTheDocument();
+  });
+
+  it("does not render when bundle_name does not match", () => {
+    mockUseImportErrorServiceGetImportErrors.mockReturnValue({
+      ...emptyImportErrorsQuery,
+      data: {
+        import_errors: [
+          {
+            bundle_name: "other-bundle",
+            filename: "stale_dag.py",
+            import_error_id: 1,
+            stack_trace: "wrong bundle",
+            timestamp: "2025-02-01T12:00:00Z",
+          },
+        ],
+        total_entries: 1,
+      },
+    });
+
+    render(
+      <Wrapper>
+        <DagImportError dag={staleDagFields} />
+      </Wrapper>,
+    );
+
+    expect(screen.queryByTestId("dag-import-error")).not.toBeInTheDocument();
+  });
+});