From 067e465b594528910d842680d6e4d27a75ae9026 Mon Sep 17 00:00:00 2001
From: jcw-fisker <jwatson@fiskerinc.com>
Date: Wed, 9 Jun 2021 10:36:00 -0700
Subject: [PATCH] added delete button to deploy packages

---
 src/components/App/App.test.js                |  20 +--
 .../App/__snapshots__/App.test.js.snap        | 133 ++++++++++++++----
 src/components/App/index.jsx                  |   2 +-
 src/components/Contexts/UpdatesContext.jsx    |  21 +++
 .../Contexts/__mocks__/UpdatesContext.jsx     |   9 ++
 src/components/UpdatePackages/List/index.jsx  |  56 ++++++--
 src/services/updates.js                       |  12 +-
 7 files changed, 207 insertions(+), 46 deletions(-)

diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 86b9731..bbb378e 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -30,14 +30,14 @@ describe("App", () => {
   beforeAll(() => {
     // Stablize Table Pagination control ids 
     expect.addSnapshotSerializer({
-      test: function(val) {
-          return val && typeof val === "string" && val.indexOf("mui-") >= 0;
+      test: function (val) {
+        return val && typeof val === "string" && val.indexOf("mui-") >= 0;
       },
-      print: function(val) {
-          let str = val;
-          str = str.replace(/mui-[0-9]*/g, "mui-00000");        
-          
-          return `"${str}"`;
+      print: function (val) {
+        let str = val;
+        str = str.replace(/mui-[0-9]*/g, "mui-00000");
+
+        return `"${str}"`;
       }
     });
   });
@@ -127,10 +127,10 @@ describe("App", () => {
 
   it("Route /carupdate-status authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/carupdate-status/1", "h6", "");
+    await check("/carupdate-status/1", "h6", "Package Package 1.0");
   });
 
- it("Route /vehicles authenticated", async () => {
+  it("Route /vehicles authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicles", "h6", "Vehicles");
   });
@@ -156,7 +156,7 @@ describe("App", () => {
 
   it("Route /carupdate-deploy authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/carupdate-deploy/1", "h6", "Deploy  ");
+    await check("/carupdate-deploy/1", "h6", "Deploy Package 1.0");
   });
 
   it("Route /dashboard authenticated", async () => {
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 48a55c1..36241b1 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -308,7 +308,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
           <h6
             class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
           >
-            Deploy  
+            Deploy Package 1.0
           </h6>
           <button
             class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-812 MuiButton-colorInherit"
@@ -531,9 +531,9 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                     class="MuiTypography-root MuiTypography-body2"
                   >
                     Created 
-                    
+                    Invalid Date Invalid Date
                     . 
-                    No description
+                    Description
                   </p>
                   <div
                     class="MuiGrid-root makeStyles-root-802 MuiGrid-container MuiGrid-spacing-xs-2"
@@ -1020,7 +1020,9 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         >
           <h6
             class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-          />
+          >
+            Package Package 1.0
+          </h6>
           <button
             class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-612 MuiButton-colorInherit"
             tabindex="0"
@@ -3139,8 +3141,8 @@ exports[`App Route /update authenticated 1`] = `
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-filled"
-                    data-shrink="false"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
+                    data-shrink="true"
                   >
                     Create Date
                   </label>
@@ -3153,7 +3155,7 @@ exports[`App Route /update authenticated 1`] = `
                       maxlength="1024"
                       readonly=""
                       type="text"
-                      value=""
+                      value="Invalid Date Invalid Date"
                     />
                   </div>
                 </div>
@@ -3161,8 +3163,8 @@ exports[`App Route /update authenticated 1`] = `
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
                     for="packagename"
                     id="packagename-label"
                   >
@@ -3186,14 +3188,14 @@ exports[`App Route /update authenticated 1`] = `
                       name="packagename"
                       required=""
                       type="text"
-                      value=""
+                      value="Package"
                     />
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-585 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-587"
+                        class="PrivateNotchedOutline-legendLabelled-587 PrivateNotchedOutline-legendNotched-588"
                       >
                         <span>
                           Package name
@@ -3207,8 +3209,8 @@ exports[`App Route /update authenticated 1`] = `
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
                     for="version"
                     id="version-label"
                   >
@@ -3232,14 +3234,14 @@ exports[`App Route /update authenticated 1`] = `
                       name="version"
                       required=""
                       type="text"
-                      value=""
+                      value="1.0"
                     />
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-585 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-587"
+                        class="PrivateNotchedOutline-legendLabelled-587 PrivateNotchedOutline-legendNotched-588"
                       >
                         <span>
                           Version
@@ -3299,8 +3301,8 @@ exports[`App Route /update authenticated 1`] = `
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                    data-shrink="false"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    data-shrink="true"
                     for="description"
                     id="description-label"
                   >
@@ -3317,13 +3319,15 @@ exports[`App Route /update authenticated 1`] = `
                       name="description"
                       placeholder="Package description"
                       rows="4"
-                    />
+                    >
+                      Description
+                    </textarea>
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-585 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-587"
+                        class="PrivateNotchedOutline-legendLabelled-587 PrivateNotchedOutline-legendNotched-588"
                       >
                         <span>
                           Description
@@ -3336,8 +3340,8 @@ exports[`App Route /update authenticated 1`] = `
                   class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                    data-shrink="false"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    data-shrink="true"
                     for="releasenotes"
                     id="releasenotes-label"
                   >
@@ -3354,14 +3358,14 @@ exports[`App Route /update authenticated 1`] = `
                       name="releasenotes"
                       placeholder="Release Notes URL"
                       type="text"
-                      value=""
+                      value="https://www.google.com/"
                     />
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-585 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-587"
+                        class="PrivateNotchedOutline-legendLabelled-587 PrivateNotchedOutline-legendNotched-588"
                       >
                         <span>
                           Release Notes URL
@@ -3849,7 +3853,88 @@ exports[`App Route /updates authenticated 1`] = `
                 </thead>
                 <tbody
                   class="MuiTableBody-root"
-                />
+                >
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      0
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      Package
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      1.0
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      Invalid Date Invalid Date
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        class=""
+                        href="/carupdate-status/0"
+                        style="margin: 5px;"
+                        title="Status \\"Package 1.0\\""
+                      >
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Status Package 1.0"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                          />
+                        </svg>
+                      </a>
+                      <a
+                        class=""
+                        href="/carupdate-deploy/0"
+                        style="margin: 5px;"
+                        title="Deploy \\"Package 1.0\\""
+                      >
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Deploy Package 1.0"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
+                          />
+                        </svg>
+                      </a>
+                      <span
+                        class="MuiTypography-root MuiTypography-colorPrimary"
+                        title="Delete \\"Package 1.0\\""
+                      >
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete Package 1.0"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
                 <tfoot
                   class="MuiTableFooter-root"
                 >
diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
index 9997de3..fc8c79b 100644
--- a/src/components/App/index.jsx
+++ b/src/components/App/index.jsx
@@ -5,7 +5,7 @@ import { StatusProvider } from "../Contexts/StatusContext";
 import { CssBaseline } from "@material-ui/core";
 import MenuDrawer from "../Layouts/MenuDrawer";
 import SiteRoutes from "../Routes/SiteRoutes";
-import {} from "../../services/monitoring";
+//import {} from "../../services/monitoring";
 
 function App() {
   return (
diff --git a/src/components/Contexts/UpdatesContext.jsx b/src/components/Contexts/UpdatesContext.jsx
index 87b6c50..e371e0e 100644
--- a/src/components/Contexts/UpdatesContext.jsx
+++ b/src/components/Contexts/UpdatesContext.jsx
@@ -48,6 +48,26 @@ export const UpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const deletePackage = async (package_id, token) => {
+    let result;
+
+    let index = packages.findIndex((element) => {
+      return element.id === package_id;
+    });
+    packages.splice(index, 1);
+
+    try {
+      setBusy(true);
+      result = await api.deletePackage(package_id, token);
+      if (result.error)
+        throw new Error(`Delete package error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   const createCarUpdates = async (data, token) => {
     let result;
 
@@ -188,6 +208,7 @@ export const UpdatesProvider = ({ children }) => {
         totalCarUpdates,
         getPackages,
         updatePackage,
+        deletePackage,
         createCarUpdates,
         getCarUpdates,
         getVINUpdates,
diff --git a/src/components/Contexts/__mocks__/UpdatesContext.jsx b/src/components/Contexts/__mocks__/UpdatesContext.jsx
index 3de235d..054d6a8 100644
--- a/src/components/Contexts/__mocks__/UpdatesContext.jsx
+++ b/src/components/Contexts/__mocks__/UpdatesContext.jsx
@@ -4,6 +4,15 @@ const UpdatesContext = React.createContext();
 
 let busy = false;
 let packages = [];
+const examplePackage = {
+  id: 0,
+  package_name: "Package",
+  version: "1.0",
+  desc: "Description",
+  release_notes: "https://www.google.com/",
+  created: Date.now().toString(),
+};
+packages.push(examplePackage)
 let totalPackages = 0;
 let carUpdates = [];
 let totalCarUpdates = 0;
diff --git a/src/components/UpdatePackages/List/index.jsx b/src/components/UpdatePackages/List/index.jsx
index 603358c..e2cd1d5 100644
--- a/src/components/UpdatePackages/List/index.jsx
+++ b/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 (
diff --git a/src/services/updates.js b/src/services/updates.js
index 8e286c4..527a5b0 100644
--- a/src/services/updates.js
+++ b/src/services/updates.js
@@ -9,13 +9,19 @@ const updatesAPI = {
     body: JSON.stringify(data),
   })
     .then(fetchRespHandler),
-      
+
+  deletePackage: async (package_id, token) => fetch(`${API_ENDPOINT}/update?id=${package_id}`, {
+    method: "DELETE",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+  })
+    .then(fetchRespHandler),
+
   getPackages: async (search, token) => {
     var u = addQueryParams(`${API_ENDPOINT}/updates`, search);
     return fetch(u, {
       method: "GET",
       headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
-  
+
     })
       .then(fetchRespHandler);
   },
@@ -36,7 +42,7 @@ const updatesAPI = {
     })
       .then(fetchRespHandler);
   },
-  
+
   getVINUpdates: async (vin, token) => {
     var u = addQueryParams(`${API_ENDPOINT}/carupdates`, { vin });
     return fetch(u, {