Skip to content

Move dags list filters to buttongroups #60298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bbovenzi merged 1 commit into from
Jan 9, 2026
+158 −143
Merged

Move dags list filters to buttongroups #60298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 21 additions & 37 deletions airflow-core/src/airflow/ui/src/components/DataTable/ToggleTableDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
import { HStack, IconButton } from "@chakra-ui/react";
import { ButtonGroup, IconButton } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { FiAlignJustify, FiGrid } from "react-icons/fi";

import { Tooltip } from "src/components/ui";

type Display = "card" | "table";

type Props = {
Expand All @@ -33,39 +31,25 @@ export const ToggleTableDisplay = ({ display, setDisplay }: Props) => {
const { t: translate } = useTranslation("components");

return (
<HStack colorPalette="brand" gap={1} pb={2}>
<Tooltip content={translate("toggleCardView")}>
<IconButton
_hover={{ bg: "colorPalette.emphasized" }}
aria-label={translate("toggleCardView")}
bg={display === "card" ? "colorPalette.muted" : "bg"}
borderColor="border.emphasized"
borderWidth={1}
color="colorPalette.fg"
height={8}
minWidth={8}
onClick={() => setDisplay("card")}
width={8}
>
<FiGrid />
</IconButton>
</Tooltip>
<Tooltip content={translate("toggleTableView")}>
<IconButton
_hover={{ bg: "colorPalette.emphasized" }}
aria-label={translate("toggleTableView")}
bg={display === "table" ? "colorPalette.muted" : "bg"}
borderColor="border.emphasized"
borderWidth={1}
color="colorPalette.fg"
height={8}
minWidth={8}
onClick={() => setDisplay("table")}
width={8}
>
<FiAlignJustify />
</IconButton>
</Tooltip>
</HStack>
<ButtonGroup attached colorPalette="brand" pb={2} size="sm" variant="outline">
<IconButton
aria-label={translate("toggleCardView")}
bg={display === "card" ? "colorPalette.muted" : undefined}
onClick={() => setDisplay("card")}
title={translate("toggleCardView")}
variant={display === "card" ? "solid" : "outline"}
>
<FiGrid />
</IconButton>
<IconButton
aria-label={translate("toggleTableView")}
bg={display === "table" ? "colorPalette.muted" : undefined}
onClick={() => setDisplay("table")}
title={translate("toggleTableView")}
variant={display === "table" ? "solid" : "outline"}
>
<FiAlignJustify />
</IconButton>
</ButtonGroup>
);
};
60 changes: 29 additions & 31 deletions airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/DagsFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { Box, HStack } from "@chakra-ui/react";
import { Box, Flex } from "@chakra-ui/react";
import type { MultiValue } from "chakra-react-select";
import { useCallback, useState } from "react";
import { useSearchParams } from "react-router-dom";
Expand Down Expand Up @@ -72,14 +72,12 @@ export const DagsFilters = () => {
const { setTableURLState, tableURLState } = useTableURLState();
const { pagination, sorting } = tableURLState;

const handlePausedChange = useCallback(
({ value }: { value: Array<string> }) => {
const [val] = value;

if (val === undefined) {
const handlePausedChange: React.MouseEventHandler<HTMLButtonElement> = useCallback(
({ currentTarget: { value } }) => {
if (value === "all") {
searchParams.delete(PAUSED_PARAM);
} else {
searchParams.set(PAUSED_PARAM, val);
searchParams.set(PAUSED_PARAM, value);
}
setTableURLState({
pagination: { ...pagination, pageIndex: 0 },
Expand All @@ -91,14 +89,12 @@ export const DagsFilters = () => {
[pagination, searchParams, setSearchParams, setTableURLState, sorting],
);

const handleFavoriteChange = useCallback(
({ value }: { value: Array<string> }) => {
const [val] = value;

if (val === undefined || val === "all") {
const handleFavoriteChange: React.MouseEventHandler<HTMLButtonElement> = useCallback(
({ currentTarget: { value } }) => {
if (value === "all") {
searchParams.delete(FAVORITE_PARAM);
} else {
searchParams.set(FAVORITE_PARAM, val);
searchParams.set(FAVORITE_PARAM, value);
}
setTableURLState({
pagination: { ...pagination, pageIndex: 0 },
Expand Down Expand Up @@ -189,8 +185,8 @@ export const DagsFilters = () => {
});

return (
<HStack justifyContent="space-between">
<HStack gap={4}>
<Flex flexWrap="wrap" gap={4} justifyContent="space-between">
<Flex alignItems="center" flexWrap="wrap" gap={4}>
<StateFilters
isAll={isAll}
isFailed={isFailed}
Expand All @@ -205,25 +201,27 @@ export const DagsFilters = () => {
onPausedChange={handlePausedChange}
showPaused={showPaused}
/>
<TagFilter
onMenuScrollToBottom={() => {
void fetchNextPage();
}}
onMenuScrollToTop={() => {
void fetchPreviousPage();
}}
onSelectTagsChange={handleSelectTagsChange}
onTagModeChange={handleTagModeChange}
onUpdate={setPattern}
selectedTags={selectedTags}
tagFilterMode={tagFilterMode}
tags={data?.pages.flatMap((dagResponse) => dagResponse.tags) ?? []}
/>
<Box maxWidth="300px">
<TagFilter
onMenuScrollToBottom={() => {
void fetchNextPage();
}}
onMenuScrollToTop={() => {
void fetchPreviousPage();
}}
onSelectTagsChange={handleSelectTagsChange}
onTagModeChange={handleTagModeChange}
onUpdate={setPattern}
selectedTags={selectedTags}
tagFilterMode={tagFilterMode}
tags={data?.pages.flatMap((dagResponse) => dagResponse.tags) ?? []}
/>
</Box>
<FavoriteFilter onFavoriteChange={handleFavoriteChange} showFavorites={showFavorites} />
</HStack>
</Flex>
<Box>
<ResetButton filterCount={filterCount} onClearFilters={onClearFilters} />
</Box>
</HStack>
</Flex>
);
};
66 changes: 39 additions & 27 deletions airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,55 @@
* specific language governing permissions and limitations
* under the License.
*/
import { createListCollection, type SelectValueChangeDetails } from "@chakra-ui/react";
import { Button, ButtonGroup, Icon } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";

import { Select } from "src/components/ui";
import { FiStar } from "react-icons/fi";

type Props = {
readonly onFavoriteChange: (details: SelectValueChangeDetails<string>) => void;
readonly onFavoriteChange: React.MouseEventHandler<HTMLButtonElement>;
readonly showFavorites: string | null;
};

export const FavoriteFilter = ({ onFavoriteChange, showFavorites }: Props) => {
const { t: translate } = useTranslation("dags");

const enabledOptions = createListCollection({
items: [
{ label: translate("filters.favorite.all"), value: "all" },
{ label: translate("filters.favorite.favorite"), value: "true" },
{ label: translate("filters.favorite.unfavorite"), value: "false" },
],
});
const currentValue = showFavorites ?? "all";

return (
<Select.Root
collection={enabledOptions}
onValueChange={onFavoriteChange}
value={[showFavorites ?? "all"]}
>
<Select.Trigger colorPalette="brand" isActive={Boolean(showFavorites)}>
<Select.ValueText width={20} />
</Select.Trigger>
<Select.Content>
{enabledOptions.items.map((option) => (
<Select.Item item={option} key={option.label}>
{option.label}
</Select.Item>
))}
</Select.Content>
</Select.Root>
<ButtonGroup attached size="sm" variant="outline">
<Button
bg={currentValue === "all" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onFavoriteChange}
value="all"
variant={currentValue === "all" ? "solid" : "outline"}
>
{translate("filters.favorite.all")}
</Button>
<Button
bg={currentValue === "true" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onFavoriteChange}
value="true"
variant={currentValue === "true" ? "solid" : "outline"}
>
<Icon asChild color="brand.solid">
<FiStar style={{ fill: "currentColor" }} />
</Icon>
{translate("filters.favorite.favorite")}
</Button>
<Button
bg={currentValue === "false" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onFavoriteChange}
value="false"
variant={currentValue === "false" ? "solid" : "outline"}
>
<Icon asChild color="fg.muted">
<FiStar />
</Icon>
{translate("filters.favorite.unfavorite")}
</Button>
</ButtonGroup>
);
};
59 changes: 32 additions & 27 deletions airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,49 @@
* specific language governing permissions and limitations
* under the License.
*/
import { createListCollection, type SelectValueChangeDetails } from "@chakra-ui/react";
import { Button, ButtonGroup } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";

import { Select } from "src/components/ui";

type Props = {
readonly defaultShowPaused: string;
readonly onPausedChange: (details: SelectValueChangeDetails<string>) => void;
readonly onPausedChange: React.MouseEventHandler<HTMLButtonElement>;
readonly showPaused: string | null;
};

export const PausedFilter = ({ defaultShowPaused, onPausedChange, showPaused }: Props) => {
const { t: translate } = useTranslation("dags");

const enabledOptions = createListCollection({
items: [
{ label: translate("filters.paused.all"), value: "all" },
{ label: translate("filters.paused.active"), value: "false" },
{ label: translate("filters.paused.paused"), value: "true" },
],
});
const currentValue = showPaused ?? defaultShowPaused;

return (
<Select.Root
collection={enabledOptions}
onValueChange={onPausedChange}
value={[showPaused ?? defaultShowPaused]}
>
<Select.Trigger colorPalette="brand" isActive={Boolean(showPaused)}>
<Select.ValueText width={20} />
</Select.Trigger>
<Select.Content>
{enabledOptions.items.map((option) => (
<Select.Item item={option} key={option.label}>
{option.label}
</Select.Item>
))}
</Select.Content>
</Select.Root>
<ButtonGroup attached size="sm" variant="outline">
<Button
bg={currentValue === "all" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onPausedChange}
value="all"
variant={currentValue === "all" ? "solid" : "outline"}
>
{translate("filters.paused.all")}
</Button>
<Button
bg={currentValue === "false" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onPausedChange}
value="false"
variant={currentValue === "false" ? "solid" : "outline"}
>
{translate("filters.paused.active")}
</Button>
<Button
bg={currentValue === "true" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onPausedChange}
value="true"
variant={currentValue === "true" ? "solid" : "outline"}
>
{translate("filters.paused.paused")}
</Button>
</ButtonGroup>
);
};
Loading
Loading