CEC-2548 Fixed delete confirmation not being pulled up (#202)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>

src/components/App/__snapshots__/App.test.js.snap

@@ -3329,7 +3329,6 @@ exports[`App Route /packages authenticated 1`] = `
                             />
                           </svg>
                         </a>
-                        <div />
                       </div>
                     </td>
                   </tr>
@@ -3460,6 +3459,7 @@ exports[`App Route /packages authenticated 1`] = `
                   </tr>
                 </tfoot>
               </table>
+              <div />
             </div>
           </div>
         </main>

src/components/Manifest/List/index.jsx

@@ -68,7 +68,11 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteId, setDeleteId] = useState("");
+  const [deleteRowName, setDeleteRowName] = useState("");
+
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -133,6 +137,12 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const setDeletePopup = (id, row) => {
+    setDeleteId(id);
+    setDeleteRowName(`${row.name} ${row.version}`);
+    setShowDeleteModal(true);
+  }
+
   const onDelete = async (manifest_id) => {
     try {
       await deleteManifest(parseInt(manifest_id), token);
@@ -182,16 +192,10 @@ const MainForm = () => {
         return (
           <div>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
-              <Link to="#" onClick={() => onDelete(action.id)}>
+              <Link to="#" onClick={() => setDeletePopup(action.id, row)}>
                 {action.icon}
               </Link>
             </Tooltip>
-            <DeleteConfirmation
-              message={action.id}
-              open={showDeleteModal}
-              close={() => setShowDeleteModal(false)}
-              deleteFunction={() => onDelete(action.id)}
-            />
           </div>
         );
       }
@@ -261,6 +265,11 @@ const MainForm = () => {
           </TableRow>
         </TableFooter>
       </Table>
+      <DeleteConfirmation
+        message={deleteRowName}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={() => onDelete(deleteId)} />
     </div>
   );
 };