#631: Added delete button to file UI

backend/go-app/go.mod

@@ -2,7 +2,7 @@ module main
 
 go 1.15
 
-replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
+//replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
 
 //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi
 //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch
@@ -22,7 +22,7 @@ require (
 	github.com/gorilla/mux v1.8.0
 	github.com/h2non/filetype v1.1.1
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.1.60
+	github.com/shuffle/shuffle-shared v0.1.61
 	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e // indirect
 	go4.org v0.0.0-20201209231011-d4a079459e60 // indirect
 	golang.org/x/crypto v0.0.0-20210921155107-089bfa567519

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   frontend:
-    #build: ./frontend
+    build: ./frontend
     image: ghcr.io/frikky/shuffle-frontend:nightly
     container_name: shuffle-frontend
     hostname: shuffle-frontend

frontend/src/views/Admin.jsx

@@ -1094,6 +1094,41 @@ const Admin = (props) => {
       });
   };
 
+  const deleteFile = (file) => {
+    fetch(globalUrl + "/api/v1/files/" + file.id, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for file delete :O!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+				if (responseJson.success) {
+					alert.info("Successfully deleted file "+file.name)
+					
+				} else if (responseJson.reason !== undefined && responseJson.reason !== null) {
+					alert.error("Failed to delete file: " + responseJson.reason)
+
+				}
+				setTimeout(() => {
+					getFiles();
+				}, 1500);
+
+        console.log(responseJson)
+      })
+      .catch((error) => {
+        alert.error(error.toString());
+      });
+  };
+
   const downloadFile = (file) => {
     fetch(globalUrl + "/api/v1/files/" + file.id + "/content", {
       method: "GET",
@@ -3118,7 +3153,6 @@ const Admin = (props) => {
                 style={{ minWidth: 125, maxWidth: 125 }}
               />
               <ListItemText primary="Actions" />
-              <ListItemText primary="File ID" />
             </ListItem>
             {files === undefined || files === null || files.length === 0
               ? null
@@ -3235,7 +3269,9 @@ const Admin = (props) => {
                         }}
                       />
                       <ListItemText
-                        primary=<Tooltip
+                        primary=
+												<span style={{display: "flex"}}>
+													<Tooltip
 														title={"Download file"}
 														style={{}}
 														aria-label={"Download"}
@@ -3256,27 +3292,33 @@ const Admin = (props) => {
                             </IconButton>
                           </span>
                         </Tooltip>
+												<Tooltip
+                          title={"Delete file"}
+                          style={{}}
+                          aria-label={"Delete"}
+                        >
+                          <span>
+                            <IconButton
+                              disabled={file.status !== "active"}
+                              onClick={() => {
+                                deleteFile(file);
+                              }}
+                            >
+                              <DeleteIcon
                                 style={{
-                          minWidth: 75,
+                                  color:
-                          maxWidth: 75,
+                                    file.status === "active" ? "white" : "grey",
-                          overflow: "hidden",
                                 }}
                               />
-                      {/*
+                            </IconButton>
-							<ListItemText>
+                          </span>
-								<Button 
+                        </Tooltip>
+												<Tooltip
+                          title={"Copy file ID"}
                           style={{}}
-									variant="contained"
+                          aria-label={"copy"}
-									color="primary"
-									disabled
-									onClick={() => deleteSchedule(file)}
                         >
-									Stop schedule	
+													<IconButton
-								</Button>
-							</ListItemText>
-							*/}
-                      <ListItemText
-                        primary=<IconButton
 														onClick={() => {
 															const elementName = "copy_element_shuffle";
 															var copyText = document.getElementById(elementName);
@@ -3305,6 +3347,13 @@ const Admin = (props) => {
 													>
 														<FileCopyIcon style={{ color: "white" }} />
 													</IconButton>
+												</Tooltip>
+												</span>
+                        style={{
+                          minWidth: 150,
+                          maxWidth: 150,
+                          overflow: "hidden",
+                        }}
                       />
                     </ListItem>
                   );
@@ -4095,7 +4144,7 @@ const Admin = (props) => {
         <Tabs
           value={curTab}
           indicatorColor="primary"
-					textColor="primary"
+					textColor="secondary"
           onChange={setConfig}
           aria-label="disabled tabs example"
         >

frontend/src/views/AppCreator.jsx

@@ -3501,6 +3501,9 @@ const AppCreator = (props) => {
 								}
 							}
 
+							// Found that dashes in the URL doesn't work
+							parsedurl = parsedurl.replace("-", "_")
+
               if (event.target.value !== parsedurl) {
                 setUrlPath(parsedurl);
                 setActionField("url", parsedurl);