Skip to content

Commit 20bbc35

Browse files
pierrejeambrunpierrejeambrun
authored
Unify Trigger and Clear Action button (#45097)
1 parent 0465cdd commit 20bbc35

File tree

7 files changed

+101
-99
lines changed

7 files changed

+101
-99
lines changed

‎airflow/ui/src/components/ClearRun/ClearRunButton.tsx

+17-29
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,14 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
import {
20-
Box,
21-
type ButtonProps,
22-
IconButton,
23-
useDisclosure,
24-
} from "@chakra-ui/react";
25-
import { type FC, useState } from "react";
19+
import { Box, useDisclosure } from "@chakra-ui/react";
20+
import { useState } from "react";
2621
import { FiRefreshCw } from "react-icons/fi";
2722

2823
import type { TaskInstanceCollectionResponse } from "openapi/requests/types.gen";
29-
import { Button, Tooltip } from "src/components/ui";
3024
import { useClearDagRun } from "src/queries/useClearRun";
3125

26+
import ActionButton from "../ui/ActionButton";
3227
import ClearRunDialog from "./ClearRunDialog";
3328

3429
type Props = {
@@ -48,8 +43,6 @@ const ClearRunButton = ({ dagId, dagRunId, withText = true }: Props) => {
4843
total_entries: 0,
4944
});
5045

51-
const ButtonComponent: FC<ButtonProps> = withText ? Button : IconButton;
52-
5346
const { isPending, mutate } = useClearDagRun({
5447
dagId,
5548
dagRunId,
@@ -59,25 +52,20 @@ const ClearRunButton = ({ dagId, dagRunId, withText = true }: Props) => {
5952

6053
return (
6154
<Box>
62-
<Tooltip content="Clear Dag Run" disabled={Boolean(withText)}>
63-
<ButtonComponent
64-
aria-label="Clear Dag Run"
65-
colorPalette={withText ? undefined : "blue"}
66-
onClick={() => {
67-
onOpen();
68-
mutate({
69-
dagId,
70-
dagRunId,
71-
requestBody: { dry_run: true, only_failed: onlyFailed },
72-
});
73-
}}
74-
size={withText ? "md" : "sm"}
75-
variant={withText ? "outline" : "ghost"}
76-
>
77-
<FiRefreshCw />
78-
{withText ? "Clear Run" : ""}
79-
</ButtonComponent>
80-
</Tooltip>
55+
<ActionButton
56+
actionName="Clear Dag Run"
57+
icon={<FiRefreshCw />}
58+
onClick={() => {
59+
onOpen();
60+
mutate({
61+
dagId,
62+
dagRunId,
63+
requestBody: { dry_run: true, only_failed: onlyFailed },
64+
});
65+
}}
66+
text="Clear Run"
67+
withText={withText}
68+
/>
8169

8270
<ClearRunDialog
8371
affectedTasks={affectedTasks}

‎airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx ‎airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx

+17-12
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,37 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
import { Box, IconButton } from "@chakra-ui/react";
19+
import { Box } from "@chakra-ui/react";
2020
import { useDisclosure } from "@chakra-ui/react";
2121
import { FiPlay } from "react-icons/fi";
2222

23-
import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
23+
import type {
24+
DAGResponse,
25+
DAGWithLatestDagRunsResponse,
26+
} from "openapi/requests/types.gen";
2427

28+
import ActionButton from "../ui/ActionButton";
2529
import TriggerDAGModal from "./TriggerDAGModal";
2630

2731
type Props = {
28-
readonly dag: DAGWithLatestDagRunsResponse;
32+
readonly dag: DAGResponse | DAGWithLatestDagRunsResponse;
33+
readonly withText?: boolean;
2934
};
3035

31-
const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
36+
const TriggerDAGButton: React.FC<Props> = ({ dag, withText = true }) => {
3237
const { onClose, onOpen, open } = useDisclosure();
3338

3439
return (
3540
<Box>
36-
<IconButton
37-
aria-label={`Trigger ${dag.dag_display_name}`}
41+
<ActionButton
42+
actionName="Trigger Dag"
3843
colorPalette="blue"
44+
icon={<FiPlay />}
3945
onClick={onOpen}
40-
size="xs"
41-
variant="ghost"
42-
>
43-
<FiPlay />
44-
</IconButton>
46+
text="Trigger"
47+
variant="solid"
48+
withText={withText}
49+
/>
4550

4651
<TriggerDAGModal
4752
dagDisplayName={dag.dag_display_name}
@@ -54,4 +59,4 @@ const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
5459
);
5560
};
5661

57-
export default TriggerDAGIconButton;
62+
export default TriggerDAGButton;

‎airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx

-52
This file was deleted.

‎airflow/ui/src/components/ui/ActionButton.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import { type ButtonProps, IconButton } from "@chakra-ui/react";
20+
import type { FC, ReactElement } from "react";
21+
22+
import { Button, Tooltip } from "src/components/ui";
23+
24+
type Props = {
25+
readonly actionName: string;
26+
readonly colorPalette?: string;
27+
readonly icon: ReactElement;
28+
readonly onClick: () => void;
29+
readonly text: string;
30+
readonly variant?: string;
31+
readonly withText?: boolean;
32+
} & ButtonProps;
33+
34+
const ActionButton = ({
35+
actionName,
36+
colorPalette,
37+
icon,
38+
onClick,
39+
text,
40+
variant = "outline",
41+
withText = true,
42+
}: Props) => {
43+
const ButtonComponent: FC<ButtonProps> = withText ? Button : IconButton;
44+
45+
return (
46+
<Tooltip content={actionName} disabled={Boolean(withText)}>
47+
<ButtonComponent
48+
aria-label={actionName}
49+
colorPalette={withText ? colorPalette : "blue"}
50+
onClick={onClick}
51+
size={withText ? "md" : "sm"}
52+
variant={withText ? variant : "ghost"}
53+
>
54+
{icon}
55+
{withText ? text : ""}
56+
</ButtonComponent>
57+
</Tooltip>
58+
);
59+
};
60+
61+
export default ActionButton;

‎airflow/ui/src/pages/Dag/Header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import DocumentationModal from "src/components/DocumentationModal";
2929
import ParseDag from "src/components/ParseDag";
3030
import { Stat } from "src/components/Stat";
3131
import { TogglePause } from "src/components/TogglePause";
32-
import TriggerDAGTextButton from "src/components/TriggerDag/TriggerDAGTextButton";
32+
import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
3333
import { Tooltip } from "src/components/ui";
3434

3535
import { DagTags } from "../DagsList/DagTags";
@@ -64,7 +64,7 @@ export const Header = ({
6464
<DocumentationModal docMd={dag.doc_md} docType="Dag" />
6565
)}
6666
<ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
67-
<TriggerDAGTextButton dag={dag} />
67+
<TriggerDAGButton dag={dag} />
6868
</HStack>
6969
) : undefined}
7070
</Flex>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
2323
import DagRunInfo from "src/components/DagRunInfo";
2424
import { Stat } from "src/components/Stat";
2525
import { TogglePause } from "src/components/TogglePause";
26-
import TriggerDAGIconButton from "src/components/TriggerDag/TriggerDAGIconButton";
26+
import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
2727
import { Tooltip } from "src/components/ui";
2828

2929
import { DagTags } from "./DagTags";
@@ -71,7 +71,7 @@ export const DagCard = ({ dag }: Props) => {
7171
dagId={dag.dag_id}
7272
isPaused={dag.is_paused}
7373
/>
74-
<TriggerDAGIconButton dag={dag} />
74+
<TriggerDAGButton dag={dag} withText={false} />
7575
</HStack>
7676
</Flex>
7777
<SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { useTableURLState } from "src/components/DataTable/useTableUrlState";
4242
import { ErrorAlert } from "src/components/ErrorAlert";
4343
import { SearchBar } from "src/components/SearchBar";
4444
import { TogglePause } from "src/components/TogglePause";
45-
import TriggerDAGIconButton from "src/components/TriggerDag/TriggerDAGIconButton";
45+
import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
4646
import {
4747
SearchParamsKeys,
4848
type SearchParamsKeysType,
@@ -128,7 +128,7 @@ const columns: Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
128128
},
129129
{
130130
accessorKey: "trigger",
131-
cell: ({ row }) => <TriggerDAGIconButton dag={row.original} />,
131+
cell: ({ row }) => <TriggerDAGButton dag={row.original} withText={false} />,
132132
enableSorting: false,
133133
header: "",
134134
},

0 commit comments

Comments
 (0)