Merge branch 'main' into reset_trigger_form

airflow/ui/src/pages/Variables/DeleteVariableButton.tsx

@@ -0,0 +1,44 @@
+/*!
+ * 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 } from "@chakra-ui/react";
+import { FiTrash } from "react-icons/fi";
+
+import ActionButton from "src/components/ui/ActionButton";
+
+type Props = {
+  readonly deleteKey: string;
+};
+
+const DeleteVariableButton = ({ deleteKey }: Props) => (
+  <Box>
+    <ActionButton
+      actionName="Delete Variable"
+      icon={<FiTrash />}
+      onClick={() =>
+        // TODO: Will be removed once implemented
+        // eslint-disable-next-line no-alert
+        alert(`To be implemented: Selected key is ${deleteKey}`)
+      }
+      text="Delete Variable"
+      withText={false}
+    />
+  </Box>
+);
+
+export default DeleteVariableButton;

airflow/ui/src/pages/Variables/EditVariableButton.tsx

@@ -0,0 +1,44 @@
+/*!
+ * 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 } from "@chakra-ui/react";
+import { FiEdit } from "react-icons/fi";
+
+import ActionButton from "src/components/ui/ActionButton";
+
+type Props = {
+  readonly editKey: string;
+};
+
+const EditVariableButton = ({ editKey }: Props) => (
+  <Box>
+    <ActionButton
+      actionName="Edit Variable"
+      icon={<FiEdit />}
+      onClick={() =>
+        // TODO: Will be removed once implemented
+        // eslint-disable-next-line no-alert
+        alert(`To be implemented: Selected key is ${editKey}`)
+      }
+      text="Edit Variable"
+      withText={false}
+    />
+  </Box>
+);
+
+export default EditVariableButton;

airflow/ui/src/pages/Variables/Variables.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, HStack, VStack } from "@chakra-ui/react";
+import { Box, Flex, HStack, VStack } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
@@ -33,33 +33,37 @@ import {
 } from "src/constants/searchParams";
 
 import AddVariableModal from "./AddVariableModal";
+import DeleteVariableButton from "./DeleteVariableButton";
+import EditVariableButton from "./EditVariableButton";
 
 const columns: Array<ColumnDef<VariableResponse>> = [
   {
     accessorKey: "key",
     header: "Key",
-    meta: {
-      skeletonWidth: 25,
-    },
   },
   {
     accessorKey: "value",
     header: "Value",
-    meta: {
-      skeletonWidth: 25,
-    },
   },
   {
     accessorKey: "description",
     header: "Description",
-    meta: {
-      skeletonWidth: 50,
-    },
   },
   {
     accessorKey: "is_encrypted",
     header: "Is Encrypted",
   },
+  {
+    accessorKey: "actions",
+    cell: ({ row: { original } }) => (
+      <Flex justifyContent="end">
+        <EditVariableButton editKey={original.key} />
+        <DeleteVariableButton deleteKey={original.key} />
+      </Flex>
+    ),
+    enableSorting: false,
+    header: "",
+  },
 ];
 
 export const Variables = () => {