Add preset filters to persist table filters and sorting

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json

@@ -194,6 +194,23 @@
   },
   "pendingDagRun_one": "{{count}} Pending Dag Run",
   "pendingDagRun_other": "{{count}} Pending Dag Runs",
+  "presetFilters": {
+    "deleteTitle": "Delete preset filter",
+    "deleteWarning": "Preset filters are stored in this browser only.",
+    "duplicate": "The preset filter \"{{name}}\" already saves this exact setup.",
+    "empty": "No preset filters yet",
+    "info": {
+      "default": "Pin a preset filter as the default and it is applied automatically when you land on this page with no filters applied.",
+      "save": "Save the current filters and sorting as a named preset filter, then switch back to it anytime.",
+      "storage": "Preset filters are stored in this browser."
+    },
+    "namePlaceholder": "Preset filter name",
+    "nothingToSave": "Nothing to save. Apply filters or sorting to save a preset filter.",
+    "save": "Save",
+    "setDefault": "Set as default",
+    "title": "Preset Filters",
+    "unsetDefault": "Unset default"
+  },
   "reset": "Reset",
   "runId": "Run ID",
   "runTypes": {

airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.test.tsx

@@ -0,0 +1,49 @@
+/*!
+ * 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 { cleanup, render, screen } from "@testing-library/react";
+import type { PropsWithChildren } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { BaseWrapper } from "src/utils/Wrapper";
+
+import { FilterBar } from "./FilterBar";
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <BaseWrapper>
+    <MemoryRouter initialEntries={["/dags"]}>{children}</MemoryRouter>
+  </BaseWrapper>
+);
+
+afterEach(cleanup);
+
+describe("FilterBar preset filters", () => {
+  it("shows the preset filters control by default", () => {
+    render(<FilterBar configs={[]} onFiltersChange={vi.fn()} />, { wrapper });
+
+    expect(screen.getByTestId("preset-filters-button")).toBeInTheDocument();
+  });
+
+  it("hides the preset filters control when showPresetFilters is false", () => {
+    render(<FilterBar configs={[]} onFiltersChange={vi.fn()} showPresetFilters={false} />, { wrapper });
+
+    expect(screen.queryByTestId("preset-filters-button")).not.toBeInTheDocument();
+  });
+});

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

@@ -16,12 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, HStack } from "@chakra-ui/react";
+import { Button, Flex, HStack } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MdAdd, MdClear } from "react-icons/md";
 import { useDebouncedCallback } from "use-debounce";
 
+import { PresetFiltersMenu } from "src/components/PresetFiltersMenu";
 import { Menu } from "src/components/ui";
 
 import { getDefaultFilterIcon } from "./defaultIcons";
@@ -43,6 +44,7 @@ export const FilterBar = ({
   initialValues = defaultInitialValues,
   maxVisibleFilters = 10,
   onFiltersChange,
+  showPresetFilters = true,
 }: FilterBarProps) => {
   const { t: translate } = useTranslation(["admin", "common"]);
   const [filters, setFilters] = useState<Array<FilterState>>(() =>
@@ -183,40 +185,43 @@ export const FilterBar = ({
   };
 
   return (
-    <HStack gap={2} wrap="wrap">
-      {filters.slice(0, maxVisibleFilters).map(renderFilter)}
-      {availableConfigs.length > 0 && (
-        <Menu.Root>
-          <Menu.Trigger asChild>
-            <Button
-              _hover={{ bg: "colorPalette.subtle" }}
-              bg="gray.muted"
-              borderRadius="full"
-              data-testid="add-filter-button"
-              variant="outline"
-            >
-              <MdAdd />
-              {translate("common:filter")}
-            </Button>
-          </Menu.Trigger>
-          <Menu.Content>
-            {availableConfigs.map((config) => (
-              <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
-                <HStack gap={2}>
-                  {getFilterIcon(config)}
-                  {config.label}
-                </HStack>
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu.Root>
-      )}
-      {filters.length > 0 && (
-        <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} variant="outline">
-          <MdClear />
-          {translate("common:reset")}
-        </Button>
-      )}
-    </HStack>
+    <Flex align="flex-start" gap={2} justify="space-between" width="100%">
+      <HStack flex="1" gap={2} minW={0} wrap="wrap">
+        {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+        {availableConfigs.length > 0 && (
+          <Menu.Root>
+            <Menu.Trigger asChild>
+              <Button
+                _hover={{ bg: "colorPalette.subtle" }}
+                bg="gray.muted"
+                borderRadius="full"
+                data-testid="add-filter-button"
+                variant="outline"
+              >
+                <MdAdd />
+                {translate("common:filter")}
+              </Button>
+            </Menu.Trigger>
+            <Menu.Content>
+              {availableConfigs.map((config) => (
+                <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+                  <HStack gap={2}>
+                    {getFilterIcon(config)}
+                    {config.label}
+                  </HStack>
+                </Menu.Item>
+              ))}
+            </Menu.Content>
+          </Menu.Root>
+        )}
+        {filters.length > 0 && (
+          <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} variant="outline">
+            <MdClear />
+            {translate("common:reset")}
+          </Button>
+        )}
+      </HStack>
+      {showPresetFilters ? <PresetFiltersMenu /> : undefined}
+    </Flex>
   );
 };

airflow-core/src/airflow/ui/src/components/FilterBar/types.ts

@@ -56,6 +56,8 @@ export type FilterBarProps = {
   readonly initialValues?: Record<string, FilterValue>;
   readonly maxVisibleFilters?: number;
   readonly onFiltersChange: (filters: Record<string, FilterValue>) => void;
+  // Hide the Preset Filters control where they aren't useful (e.g. a Dag run's per-run task instances).
+  readonly showPresetFilters?: boolean;
 };
 
 export type FilterPluginProps = {