Unify Trigger and Clear Action button (apache#45097)

astronomer · Dec 20, 2024 · 20bbc35 · 20bbc35
1 parent 0465cdd
commit 20bbc35
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 99 deletions.
diff --git 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/...nents/TriggerDag/TriggerDAGIconButton.tsx → ...omponents/TriggerDag/TriggerDAGButton.tsx b/...nents/TriggerDag/TriggerDAGIconButton.tsx → ...omponents/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
diff --git a/airflow/ui/src/components/ui/ActionButton.tsx 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
@@ -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
@@ -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
@@ -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: "",
   },