Synced 2.0 updates

frontend/src/components/AppModal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
 import {
@@ -23,14 +23,14 @@ import ForkRightIcon from '@mui/icons-material/ForkRight';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import LaunchIcon from '@mui/icons-material/Launch';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { CloudDownloadOutlined } from '@mui/icons-material';
+import { CloudDownloadOutlined, Delete } from '@mui/icons-material';
 import { findSpecificApp } from '../components/AppFramework.jsx';
 import theme from "../theme.jsx";
 import YAML from 'yaml';
 import { toast } from 'react-toastify';
 import { Link } from 'react-router-dom';
 
-const AppModal = ({ open, onClose, app, globalUrl }) => {
+const AppModal = ({ open, onClose, app, globalUrl, getApps }) => {
 
   const [frameworkData, setFrameworkData] = useState({})
   const [userdata, setUserdata] = useState({})
@@ -41,6 +41,8 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
   const [latestUsecase, setLatestUsecase] = useState([])
   const [foundAppUsecase, setFoundAppUsecase] = useState({})
   const [usecaseLoading, setUsecaseLoading] = useState(false)
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+  const [sharingConfiguration, setSharingConfiguration] = React.useState("you");
   const navigate = useNavigate();
   const parseUsecase = (subcase) => {
     const srcdata = findSpecificApp(frameworkData, subcase.type)
@@ -294,8 +296,101 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
     setUsecaseLoading(true)
     getAvailableWorkflows()
     getFramework()
+    handleUpdateSharingConfiguration()
   }, [app])
 
+  const handleUpdateSharingConfiguration = useCallback(() => {
+    if (app?.sharing === true) {
+      setSharingConfiguration("public")
+    }else {
+      setSharingConfiguration("you")
+    }
+
+  }, [app?.id])
+
+  const deleteApp = (appId) => {
+      toast("Attempting to delete app");
+      fetch(globalUrl + "/api/v1/apps/" + appId, {
+        method: "DELETE",
+        headers: {
+          Accept: "application/json",
+        },
+        credentials: "include",
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            toast("Successfully deleted app");
+            setTimeout(() => {
+              //delete apps from local storage
+              localStorage.removeItem("apps");
+              getApps();
+            }, 1000);
+          } else {
+            toast("Failed deleting app. Does it still exist?");
+          }
+        })
+        .catch((error) => {
+          toast(error.toString());
+        });
+    };
+
+  const deleteModal = deleteModalOpen ? (
+      <Dialog
+        open={deleteModalOpen}
+        onClose={() => {
+          setDeleteModalOpen(false);
+        }}
+        PaperProps={{
+          sx: {
+            borderRadius: theme?.palette?.DialogStyle?.borderRadius,
+            border: theme?.palette?.DialogStyle?.border,
+            fontFamily: theme?.typography?.fontFamily,
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            zIndex: 1000,
+            minWidth: "500px",
+            overflow: "hidden",
+            '& .MuiDialogContent-root': {
+              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            },
+            '& .MuiDialogTitle-root': {
+              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            },
+          }
+        }}
+      >
+        <DialogTitle>
+          <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
+            Are you sure? <div />
+            Some workflows may stop working.
+          </div>
+        </DialogTitle>
+        <DialogContent
+          style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
+        >
+          <Button
+            style={{}}
+            onClick={() => {
+              deleteApp(app.id);
+              setDeleteModalOpen(false);
+            }}
+            color="primary"
+          >
+            Yes
+          </Button>
+          <Button
+            variant="outlined"
+            style={{marginLeft: 5}}
+            onClick={() => {
+              setDeleteModalOpen(false);
+            }}
+            color="primary"
+          >
+            No
+          </Button>
+        </DialogContent>
+      </Dialog>
+    ) : null;
+
 
   const downloadApp = (inputdata) => {
     const id = inputdata.id;
@@ -425,6 +520,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
         }
       }}
     >
+      {deleteModal}
       <DialogTitle
         sx={{
           display: 'flex',
@@ -457,7 +553,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
           <div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: theme?.typography?.fontFamily }}>
             <img
               alt={app?.name}
-              src={app?.large_image || app?.image_url}
+              src={app?.large_image || app?.image_url || "/images/no_image.png"}
               style={{
                 borderRadius: 4,
                 maxWidth: 100,
@@ -536,6 +632,35 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
                 </Button>
               </Tooltip>
             ) : null}
+            {(userdata?.id === app?.owner)? (
+              <Tooltip title={"Delete app (confirm box will show)"}> 
+              <Button
+                variant="outlined"
+                component="label"
+                color="primary"
+                sx={{
+                  bgcolor: '#494949',
+                  '&:hover': { bgcolor: '#494949', border: 'none' },
+                  textTransform: 'none',
+                  borderRadius: 1,
+                  minWidth: '45px',
+                  width: '45px',
+                  height: '40px',
+                  padding: 2,
+                  color: "#fff",
+                  fontFamily: theme?.typography?.fontFamily,
+                  border: 'none'
+                }}
+                onClick={() => {
+                  setDeleteModalOpen(true);
+                }}
+                disabled={(sharingConfiguration === undefined || sharingConfiguration === null || sharingConfiguration === "public") }
+              >
+                <Delete />
+              </Button>
+            </Tooltip>
+            ): null}
+            
             <Button
               variant="contained"
               sx={{