This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 20bbc352b7b Unify Trigger and Clear Action button (#45097)
20bbc352b7b is described below
commit 20bbc352b7bba07efdf279dbbd9c46498d6c6523
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Fri Dec 20 23:55:42 2024 +0800
Unify Trigger and Clear Action button (#45097)
---
.../ui/src/components/ClearRun/ClearRunButton.tsx | 46 ++++++----------
...iggerDAGIconButton.tsx => TriggerDAGButton.tsx} | 29 +++++-----
.../components/TriggerDag/TriggerDAGTextButton.tsx | 52 ------------------
airflow/ui/src/components/ui/ActionButton.tsx | 61 ++++++++++++++++++++++
airflow/ui/src/pages/Dag/Header.tsx | 4 +-
airflow/ui/src/pages/DagsList/DagCard.tsx | 4 +-
airflow/ui/src/pages/DagsList/DagsList.tsx | 4 +-
7 files changed, 101 insertions(+), 99 deletions(-)
diff --git a/airflow/ui/src/components/ClearRun/ClearRunButton.tsx
b/airflow/ui/src/components/ClearRun/ClearRunButton.tsx
index ae0386612c3..f31b9f1a46a 100644
--- a/airflow/ui/src/components/ClearRun/ClearRunButton.tsx
+++ b/airflow/ui/src/components/ClearRun/ClearRunButton.tsx
@@ -16,19 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
-import {
- Box,
- type ButtonProps,
- IconButton,
- useDisclosure,
-} from "@chakra-ui/react";
-import { type FC, useState } from "react";
+import { Box, useDisclosure } from "@chakra-ui/react";
+import { useState } from "react";
import { FiRefreshCw } from "react-icons/fi";
import type { TaskInstanceCollectionResponse } from
"openapi/requests/types.gen";
-import { Button, Tooltip } from "src/components/ui";
import { useClearDagRun } from "src/queries/useClearRun";
+import ActionButton from "../ui/ActionButton";
import ClearRunDialog from "./ClearRunDialog";
type Props = {
@@ -48,8 +43,6 @@ const ClearRunButton = ({ dagId, dagRunId, withText = true }:
Props) => {
total_entries: 0,
});
- const ButtonComponent: FC<ButtonProps> = withText ? Button : IconButton;
-
const { isPending, mutate } = useClearDagRun({
dagId,
dagRunId,
@@ -59,25 +52,20 @@ const ClearRunButton = ({ dagId, dagRunId, withText = true
}: Props) => {
return (
<Box>
- <Tooltip content="Clear Dag Run" disabled={Boolean(withText)}>
- <ButtonComponent
- aria-label="Clear Dag Run"
- colorPalette={withText ? undefined : "blue"}
- onClick={() => {
- onOpen();
- mutate({
- dagId,
- dagRunId,
- requestBody: { dry_run: true, only_failed: onlyFailed },
- });
- }}
- size={withText ? "md" : "sm"}
- variant={withText ? "outline" : "ghost"}
- >
- <FiRefreshCw />
- {withText ? "Clear Run" : ""}
- </ButtonComponent>
- </Tooltip>
+ <ActionButton
+ actionName="Clear Dag Run"
+ icon={<FiRefreshCw />}
+ onClick={() => {
+ onOpen();
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: onlyFailed },
+ });
+ }}
+ text="Clear Run"
+ withText={withText}
+ />
<ClearRunDialog
affectedTasks={affectedTasks}
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
b/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx
similarity index 70%
rename from airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
rename to airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx
index 7f215314b27..8cf81afb9f7 100644
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGIconButton.tsx
+++ b/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx
@@ -16,32 +16,37 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, IconButton } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
import { useDisclosure } from "@chakra-ui/react";
import { FiPlay } from "react-icons/fi";
-import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import type {
+ DAGResponse,
+ DAGWithLatestDagRunsResponse,
+} from "openapi/requests/types.gen";
+import ActionButton from "../ui/ActionButton";
import TriggerDAGModal from "./TriggerDAGModal";
type Props = {
- readonly dag: DAGWithLatestDagRunsResponse;
+ readonly dag: DAGResponse | DAGWithLatestDagRunsResponse;
+ readonly withText?: boolean;
};
-const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
+const TriggerDAGButton: React.FC<Props> = ({ dag, withText = true }) => {
const { onClose, onOpen, open } = useDisclosure();
return (
<Box>
- <IconButton
- aria-label={`Trigger ${dag.dag_display_name}`}
+ <ActionButton
+ actionName="Trigger Dag"
colorPalette="blue"
+ icon={<FiPlay />}
onClick={onOpen}
- size="xs"
- variant="ghost"
- >
- <FiPlay />
- </IconButton>
+ text="Trigger"
+ variant="solid"
+ withText={withText}
+ />
<TriggerDAGModal
dagDisplayName={dag.dag_display_name}
@@ -54,4 +59,4 @@ const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
);
};
-export default TriggerDAGIconButton;
+export default TriggerDAGButton;
diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
b/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
deleted file mode 100644
index 663155bf092..00000000000
--- a/airflow/ui/src/components/TriggerDag/TriggerDAGTextButton.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
- * 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, Button } from "@chakra-ui/react";
-import { useDisclosure } from "@chakra-ui/react";
-import { FiPlay } from "react-icons/fi";
-
-import type { DAGResponse } from "openapi/requests/types.gen";
-
-import TriggerDAGModal from "./TriggerDAGModal";
-
-type Props = {
- readonly dag: DAGResponse;
-};
-
-const TriggerDAGIconButton: React.FC<Props> = ({ dag }) => {
- const { onClose, onOpen, open } = useDisclosure();
-
- return (
- <Box>
- <Button colorPalette="blue" onClick={onOpen}>
- <FiPlay />
- Trigger
- </Button>
-
- <TriggerDAGModal
- dagDisplayName={dag.dag_display_name}
- dagId={dag.dag_id}
- isPaused={dag.is_paused}
- onClose={onClose}
- open={open}
- />
- </Box>
- );
-};
-
-export default TriggerDAGIconButton;
diff --git a/airflow/ui/src/components/ui/ActionButton.tsx
b/airflow/ui/src/components/ui/ActionButton.tsx
new file mode 100644
index 00000000000..9820775223d
--- /dev/null
+++ b/airflow/ui/src/components/ui/ActionButton.tsx
@@ -0,0 +1,61 @@
+/*!
+ * 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 { type ButtonProps, IconButton } from "@chakra-ui/react";
+import type { FC, ReactElement } from "react";
+
+import { Button, Tooltip } from "src/components/ui";
+
+type Props = {
+ readonly actionName: string;
+ readonly colorPalette?: string;
+ readonly icon: ReactElement;
+ readonly onClick: () => void;
+ readonly text: string;
+ readonly variant?: string;
+ readonly withText?: boolean;
+} & ButtonProps;
+
+const ActionButton = ({
+ actionName,
+ colorPalette,
+ icon,
+ onClick,
+ text,
+ variant = "outline",
+ withText = true,
+}: Props) => {
+ const ButtonComponent: FC<ButtonProps> = withText ? Button : IconButton;
+
+ return (
+ <Tooltip content={actionName} disabled={Boolean(withText)}>
+ <ButtonComponent
+ aria-label={actionName}
+ colorPalette={withText ? colorPalette : "blue"}
+ onClick={onClick}
+ size={withText ? "md" : "sm"}
+ variant={withText ? variant : "ghost"}
+ >
+ {icon}
+ {withText ? text : ""}
+ </ButtonComponent>
+ </Tooltip>
+ );
+};
+
+export default ActionButton;
diff --git a/airflow/ui/src/pages/Dag/Header.tsx
b/airflow/ui/src/pages/Dag/Header.tsx
index 0772c960ea7..8371f68e3b9 100644
--- a/airflow/ui/src/pages/Dag/Header.tsx
+++ b/airflow/ui/src/pages/Dag/Header.tsx
@@ -29,7 +29,7 @@ import DocumentationModal from
"src/components/DocumentationModal";
import ParseDag from "src/components/ParseDag";
import { Stat } from "src/components/Stat";
import { TogglePause } from "src/components/TogglePause";
-import TriggerDAGTextButton from
"src/components/TriggerDag/TriggerDAGTextButton";
+import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
import { Tooltip } from "src/components/ui";
import { DagTags } from "../DagsList/DagTags";
@@ -64,7 +64,7 @@ export const Header = ({
<DocumentationModal docMd={dag.doc_md} docType="Dag" />
)}
<ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
- <TriggerDAGTextButton dag={dag} />
+ <TriggerDAGButton dag={dag} />
</HStack>
) : undefined}
</Flex>
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx
b/airflow/ui/src/pages/DagsList/DagCard.tsx
index 8b45a15cdda..854d6787bb0 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -23,7 +23,7 @@ import type { DAGWithLatestDagRunsResponse } from
"openapi/requests/types.gen";
import DagRunInfo from "src/components/DagRunInfo";
import { Stat } from "src/components/Stat";
import { TogglePause } from "src/components/TogglePause";
-import TriggerDAGIconButton from
"src/components/TriggerDag/TriggerDAGIconButton";
+import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
import { Tooltip } from "src/components/ui";
import { DagTags } from "./DagTags";
@@ -71,7 +71,7 @@ export const DagCard = ({ dag }: Props) => {
dagId={dag.dag_id}
isPaused={dag.is_paused}
/>
- <TriggerDAGIconButton dag={dag} />
+ <TriggerDAGButton dag={dag} withText={false} />
</HStack>
</Flex>
<SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx
b/airflow/ui/src/pages/DagsList/DagsList.tsx
index c35132c1564..fbe706bbd82 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -42,7 +42,7 @@ import { useTableURLState } from
"src/components/DataTable/useTableUrlState";
import { ErrorAlert } from "src/components/ErrorAlert";
import { SearchBar } from "src/components/SearchBar";
import { TogglePause } from "src/components/TogglePause";
-import TriggerDAGIconButton from
"src/components/TriggerDag/TriggerDAGIconButton";
+import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
import {
SearchParamsKeys,
type SearchParamsKeysType,
@@ -128,7 +128,7 @@ const columns:
Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
},
{
accessorKey: "trigger",
- cell: ({ row }) => <TriggerDAGIconButton dag={row.original} />,
+ cell: ({ row }) => <TriggerDAGButton dag={row.original} withText={false}
/>,
enableSorting: false,
header: "",
},
