This is an automated email from the ASF dual-hosted git repository.
jscheffl 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 48a72b04008 Action button setup for variables list (#45205)
48a72b04008 is described below
commit 48a72b0400874193cd189abb8cae58d8e38fda53
Author: Shubham Raj <[email protected]>
AuthorDate: Thu Dec 26 18:25:53 2024 +0530
Action button setup for variables list (#45205)
* initial action setup
* comment
* icons
* reviews
* fix rebase
---
.../src/pages/Variables/DeleteVariableButton.tsx | 44 ++++++++++++++++++++++
.../ui/src/pages/Variables/EditVariableButton.tsx | 44 ++++++++++++++++++++++
airflow/ui/src/pages/Variables/Variables.tsx | 24 +++++++-----
3 files changed, 102 insertions(+), 10 deletions(-)
diff --git a/airflow/ui/src/pages/Variables/DeleteVariableButton.tsx
b/airflow/ui/src/pages/Variables/DeleteVariableButton.tsx
new file mode 100644
index 00000000000..e9e63d233d8
--- /dev/null
+++ b/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;
diff --git a/airflow/ui/src/pages/Variables/EditVariableButton.tsx
b/airflow/ui/src/pages/Variables/EditVariableButton.tsx
new file mode 100644
index 00000000000..156fa1eff34
--- /dev/null
+++ b/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;
diff --git a/airflow/ui/src/pages/Variables/Variables.tsx
b/airflow/ui/src/pages/Variables/Variables.tsx
index cd5aa961e36..081d1444906 100644
--- a/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/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 = () => {
