added delete button to deploy packages

src/components/UpdatePackages/List/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import {
+  Button,
   Table,
   TableBody,
   TableCell,
@@ -9,9 +10,11 @@ import {
   TableRow,
   Toolbar,
   Tooltip,
+  Typography,
 } from "@material-ui/core";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
+import DeleteIcon from "@material-ui/icons/Delete";
 import useStyles from "../../useStyles";
 import {
   UpdatesProvider,
@@ -23,6 +26,7 @@ import { LocalDateTimeString } from "../../../utils/dates";
 import { Roles, hasRole } from "../../../utils/roles";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from "../../Controls/SearchField";
+import { MicNone, PrintOutlined } from "@material-ui/icons";
 
 const tableColumns = [
   {
@@ -54,7 +58,7 @@ const UpdatePackagesList = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
-  const { getPackages, packages, totalPackages } = useUpdatesContext();
+  const { getPackages, deletePackage, packages, totalPackages } = useUpdatesContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -107,6 +111,10 @@ const UpdatePackagesList = () => {
     setSearch(search);
   };
 
+  const onDelete = async (package_id) => {
+    await deletePackage(parseInt(package_id), token);
+  };
+
   const Actions = (row) => {
     let actions = [];
     if (hasRole([Roles.CREATE, Roles.READ], groups)) {
@@ -131,18 +139,50 @@ const UpdatePackagesList = () => {
             />
           ),
         },
+        {
+          tip: `Delete "${row.package_name} ${row.version}"`,
+          id: row.id,
+          icon: (
+            <DeleteIcon
+              aria-label={`Delete ${row.package_name} ${row.version}`}
+            />
+          ),
+        },
       ]);
     }
 
     if (actions.length === 0) return "No actions";
 
-    return actions.map((action) => (
-      <Tooltip key={action.link} title={action.tip}>
-        <Link to={action.link} style={{ margin: 5 }}>
-          {action.icon}
-        </Link>
-      </Tooltip>
-    ));
+    return actions.map((action) => {
+      if (action.link != null) {
+        return (
+          < Tooltip key={action.link} title={action.tip} >
+            <Link to={action.link} style={{ margin: 5 }}>
+              {action.icon}
+            </Link>
+          </Tooltip >
+        );
+      } else {
+        return (
+          < Tooltip key={action.link} title={action.tip} >
+            <Typography
+              color="primary"
+              variant="inherit"
+              onClick={() => onDelete(action.id)}
+            >
+              {action.icon}
+            </Typography>
+          </Tooltip >
+          /**
+          < Tooltip key={action.link} title={action.tip} >
+            <Link onClick={() => onDelete(action.id)} style={{ margin: 5 }}>
+              {action.icon}
+            </Link>
+          </Tooltip >
+          */
+        )
+      }
+    });
   };
 
   return (