AIP-38 - feat(pages/DagsList): add tags filter to dags list

airflow/ui/src/constants/searchParams.ts

@@ -23,6 +23,7 @@ export enum SearchParamsKeys {
   OFFSET = "offset",
   PAUSED = "paused",
   SORT = "sort",
+  TAGS = "tags",
 }
 
 export type SearchParamsKeysType = Record<

airflow/ui/src/pages/DagsList/DagsFilters.tsx

@@ -18,9 +18,11 @@
  */
 import { HStack, Select, Text, Box } from "@chakra-ui/react";
 import { Select as ReactSelect } from "chakra-react-select";
+import type { MultiValue } from "chakra-react-select";
 import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 
+import { useDagServiceGetDagTags } from "openapi/queries";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { QuickFilterButton } from "src/components/QuickFilterButton";
 import {
@@ -31,18 +33,24 @@ import {
 const {
   LAST_DAG_RUN_STATE: LAST_DAG_RUN_STATE_PARAM,
   PAUSED: PAUSED_PARAM,
+  TAGS: TAGS_PARAM,
 }: SearchParamsKeysType = SearchParamsKeys;
 
 export const DagsFilters = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const showPaused = searchParams.get(PAUSED_PARAM);
   const state = searchParams.get(LAST_DAG_RUN_STATE_PARAM);
+  const selectedTags = searchParams.getAll(TAGS_PARAM);
   const isAll = state === null;
   const isRunning = state === "running";
   const isFailed = state === "failed";
   const isSuccess = state === "success";
 
+  const { data } = useDagServiceGetDagTags({
+    orderBy: "name",
+  });
+
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
 
@@ -79,6 +87,21 @@ export const DagsFilters = () => {
       },
       [pagination, searchParams, setSearchParams, setTableURLState, sorting],
     );
+  const handleSelectTagsChange = useCallback(
+    (
+      tags: MultiValue<{
+        label: string;
+        value: string;
+      }>,
+    ) => {
+      searchParams.delete(TAGS_PARAM);
+      tags.forEach(({ value }) => {
+        searchParams.append(TAGS_PARAM, value);
+      });
+      setSearchParams(searchParams);
+    },
+    [searchParams, setSearchParams],
+  );
 
   return (
     <HStack justifyContent="space-between">
@@ -133,7 +156,28 @@ export const DagsFilters = () => {
           </Select>
         </Box>
       </HStack>
-      <ReactSelect isDisabled placeholder="Filter by tag" />
+      <ReactSelect
+        aria-label="Filter Dags by tag"
+        chakraStyles={{
+          container: (provided) => ({
+            ...provided,
+            minWidth: 64,
+          }),
+        }}
+        isClearable
+        isMulti
+        noOptionsMessage={() => "No tags found"}
+        onChange={handleSelectTagsChange}
+        options={data?.tags.map((tag) => ({
+          label: tag,
+          value: tag,
+        }))}
+        placeholder="Filter by tag"
+        value={selectedTags.map((tag) => ({
+          label: tag,
+          value: tag,
+        }))}
+      />
     </HStack>
   );
 };

airflow/ui/src/pages/DagsList/DagsList.tsx

@@ -108,6 +108,7 @@ const {
   LAST_DAG_RUN_STATE: LAST_DAG_RUN_STATE_PARAM,
   NAME_PATTERN: NAME_PATTERN_PARAM,
   PAUSED: PAUSED_PARAM,
+  TAGS: TAGS_PARAM,
 }: SearchParamsKeysType = SearchParamsKeys;
 
 const cardDef: CardDef<DAGResponse> = {
@@ -125,6 +126,7 @@ export const DagsList = () => {
   const lastDagRunState = searchParams.get(
     LAST_DAG_RUN_STATE_PARAM,
   ) as DagRunState;
+  const selectedTags = searchParams.getAll(TAGS_PARAM);
 
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
@@ -163,8 +165,16 @@ export const DagsList = () => {
       onlyActive: true,
       orderBy,
       paused: showPaused === null ? undefined : showPaused === "true",
+      tags: selectedTags,
     },
-    [dagDisplayNamePattern, showPaused, lastDagRunState, pagination, orderBy],
+    [
+      dagDisplayNamePattern,
+      showPaused,
+      lastDagRunState,
+      pagination,
+      orderBy,
+      selectedTags,
+    ],
     {
       refetchOnMount: true,
       refetchOnReconnect: false,