Fixed file management component breakout to make it more smooth
This commit is contained in:
frikky
@@ -0,0 +1,812 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
IconButton,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemText,
|
||||||
|
ListItemAvatar,
|
||||||
|
ListItemSecondaryAction,
|
||||||
|
Tooltip,
|
||||||
|
Button,
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
TextField,
|
||||||
|
Divider,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
OpenInNew as OpenInNewIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
CloudDownload as CloudDownloadIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
FileCopy as FileCopyIcon,
|
||||||
|
Cached as CachedIcon,
|
||||||
|
Publish as PublishIcon,
|
||||||
|
Clear as ClearIcon,
|
||||||
|
Add as AddIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
import Dropzone from "../components/Dropzone.jsx";
|
||||||
|
import CodeEditor from "../components/ShuffleCodeEditor.jsx";
|
||||||
|
import theme from "../theme";
|
||||||
|
|
||||||
|
const Files = (props) => {
|
||||||
|
const { globalUrl, userdata, serverside, selectedOrganization, } = props;
|
||||||
|
|
||||||
|
const [files, setFiles] = React.useState([]);
|
||||||
|
const [selectedNamespace, setSelectedNamespace] = React.useState("default");
|
||||||
|
const [openFileId, setOpenFileId] = React.useState(false);
|
||||||
|
const [fileNamespaces, setFileNamespaces] = React.useState([]);
|
||||||
|
const [fileContent, setFileContent] = React.useState("");
|
||||||
|
const [openEditor, setOpenEditor] = React.useState(false);
|
||||||
|
const [renderTextBox, setRenderTextBox] = React.useState(false);
|
||||||
|
|
||||||
|
const alert = useAlert();
|
||||||
|
const allowedFileTypes = ["txt", "py", "yaml", "yml","json", "html", "js", "csv",]
|
||||||
|
var upload = "";
|
||||||
|
|
||||||
|
const handleKeyDown = (event) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
|
||||||
|
console.log('do validate')
|
||||||
|
console.log("new namespace name->",event.target.value);
|
||||||
|
fileNamespaces.push(event.target.value);
|
||||||
|
setSelectedNamespace(event.target.value);
|
||||||
|
setRenderTextBox(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Escape'){ // not working for some reasons
|
||||||
|
console.log('escape pressed')
|
||||||
|
setRenderTextBox(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const runUpdateText = (text) =>{
|
||||||
|
fetch(`${globalUrl}/api/v1/files/${openFileId}/edit`, {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
body:text,
|
||||||
|
credentials: "include",
|
||||||
|
}).then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Can't update file");
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
//console.log(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFiles = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/files", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.files !== undefined && responseJson.files !== null) {
|
||||||
|
setFiles(responseJson.files);
|
||||||
|
} else {
|
||||||
|
setFiles([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("NAMESPACES: ", responseJson.namespaces);
|
||||||
|
if (
|
||||||
|
responseJson.namespaces !== undefined &&
|
||||||
|
responseJson.namespaces !== null
|
||||||
|
) {
|
||||||
|
setFileNamespaces(responseJson.namespaces);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getFiles();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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 readFileData = (file) => {
|
||||||
|
fetch(globalUrl + "/api/v1/files/" + file.id + "/content", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for file :O!");
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then((respdata) => {
|
||||||
|
// console.log("respdata ->", respdata);
|
||||||
|
// console.log("respdata type ->", typeof(respdata));
|
||||||
|
|
||||||
|
if (respdata.length === 0) {
|
||||||
|
alert.error("Failed getting file. Is it deleted?");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return respdata
|
||||||
|
})
|
||||||
|
.then((responseData) => {
|
||||||
|
|
||||||
|
setFileContent(responseData);
|
||||||
|
//console.log("filecontent state ",fileContent);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const downloadFile = (file) => {
|
||||||
|
fetch(globalUrl + "/api/v1/files/" + file.id + "/content", {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Resp: ", response)
|
||||||
|
|
||||||
|
return response.blob()
|
||||||
|
})
|
||||||
|
.then((respdata) => {
|
||||||
|
if (respdata.length === 0) {
|
||||||
|
alert.error("Failed getting file. Is it deleted?");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var blob = new Blob([respdata], {
|
||||||
|
type: "application/octet-stream",
|
||||||
|
});
|
||||||
|
|
||||||
|
var url = URL.createObjectURL(blob);
|
||||||
|
var link = document.createElement("a");
|
||||||
|
link.setAttribute("href", url);
|
||||||
|
link.setAttribute("download", `${file.filename}`);
|
||||||
|
var event = document.createEvent("MouseEvents");
|
||||||
|
event.initMouseEvent(
|
||||||
|
"click",
|
||||||
|
true,
|
||||||
|
true,
|
||||||
|
window,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
0,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
link.dispatchEvent(event);
|
||||||
|
|
||||||
|
//return response.json()
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
//console.log(responseJson)
|
||||||
|
//setSchedules(responseJson)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateFile = (filename, file) => {
|
||||||
|
var data = {
|
||||||
|
filename: filename,
|
||||||
|
org_id: selectedOrganization.id,
|
||||||
|
workflow_id: "global",
|
||||||
|
};
|
||||||
|
|
||||||
|
if (
|
||||||
|
selectedNamespace !== undefined &&
|
||||||
|
selectedNamespace !== null &&
|
||||||
|
selectedNamespace.length > 0 &&
|
||||||
|
selectedNamespace !== "default"
|
||||||
|
) {
|
||||||
|
data.namespace = selectedNamespace;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(globalUrl + "/api/v1/files/create", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
//console.log("RESP: ", responseJson)
|
||||||
|
if (responseJson.success === true) {
|
||||||
|
handleFileUpload(responseJson.id, file);
|
||||||
|
} else {
|
||||||
|
alert.error("Failed to upload file ", filename);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error("Failed to upload file ", filename);
|
||||||
|
console.log(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleFileUpload = (file_id, file) => {
|
||||||
|
//console.log("FILE: ", file_id, file)
|
||||||
|
fetch(`${globalUrl}/api/v1/files/${file_id}/upload`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
body: file,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200 && response.status !== 201) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
alert.error("File was created, but failed to upload.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
//console.log("RESPONSE: ", responseJson)
|
||||||
|
//setFiles(responseJson)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadFiles = (files) => {
|
||||||
|
for (var key in files) {
|
||||||
|
try {
|
||||||
|
const filename = files[key].name;
|
||||||
|
var filedata = new FormData();
|
||||||
|
filedata.append("shuffle_file", files[key]);
|
||||||
|
|
||||||
|
if (typeof files[key] === "object") {
|
||||||
|
handleCreateFile(filename, filedata);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
reader.addEventListener('load', (e) => {
|
||||||
|
var data = e.target.result;
|
||||||
|
setIsDropzone(false)
|
||||||
|
console.log(filename)
|
||||||
|
console.log(data)
|
||||||
|
console.log(files[key])
|
||||||
|
})
|
||||||
|
reader.readAsText(files[key])
|
||||||
|
*/
|
||||||
|
} catch (e) {
|
||||||
|
console.log("Error in dropzone: ", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
getFiles();
|
||||||
|
}, 2500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadFile = (e) => {
|
||||||
|
const isDropzone =
|
||||||
|
e.dataTransfer === undefined ? false : e.dataTransfer.files.length > 0;
|
||||||
|
const files = isDropzone ? e.dataTransfer.files : e.target.files;
|
||||||
|
|
||||||
|
//const reader = new FileReader();
|
||||||
|
//alert.info("Starting fileupload")
|
||||||
|
uploadFiles(files);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropzone
|
||||||
|
style={{
|
||||||
|
maxWidth: window.innerWidth > 1366 ? 1366 : 1200,
|
||||||
|
margin: "auto",
|
||||||
|
padding: 20,
|
||||||
|
}}
|
||||||
|
onDrop={uploadFile}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div style={{ marginTop: 20, marginBottom: 20 }}>
|
||||||
|
<h2 style={{ display: "inline" }}>Files</h2>
|
||||||
|
<span style={{ marginLeft: 25 }}>
|
||||||
|
Files from Workflows.{" "}
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="https://shuffler.io/docs/organizations#files"
|
||||||
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => {
|
||||||
|
upload.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PublishIcon /> Upload files
|
||||||
|
</Button>
|
||||||
|
{/* <FileCategoryInput
|
||||||
|
isSet={renderTextBox} /> */}
|
||||||
|
<input
|
||||||
|
hidden
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
ref={(ref) => (upload = ref)}
|
||||||
|
onChange={(event) => {
|
||||||
|
//const file = event.target.value
|
||||||
|
//const fileObject = URL.createObjectURL(actualFile)
|
||||||
|
//setFile(fileObject)
|
||||||
|
//const files = event.target.files[0]
|
||||||
|
uploadFiles(event.target.files);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => getFiles()}
|
||||||
|
>
|
||||||
|
<CachedIcon />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{fileNamespaces !== undefined &&
|
||||||
|
fileNamespaces !== null &&
|
||||||
|
fileNamespaces.length > 1 ? (
|
||||||
|
<FormControl style={{ minWidth: 150, maxWidth: 150 }}>
|
||||||
|
<InputLabel id="input-namespace-label">File Category</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="input-namespace-select-label"
|
||||||
|
id="input-namespace-select-id"
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 150,
|
||||||
|
float: "right",
|
||||||
|
}}
|
||||||
|
value={selectedNamespace}
|
||||||
|
onChange={(event) => {
|
||||||
|
console.log("CHANGE NAMESPACE: ", event.target);
|
||||||
|
setSelectedNamespace(event.target.value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{fileNamespaces.map((data, index) => {
|
||||||
|
return (
|
||||||
|
<MenuItem
|
||||||
|
key={index}
|
||||||
|
value={data}
|
||||||
|
style={{ color: "white" }}
|
||||||
|
>
|
||||||
|
{data}
|
||||||
|
</MenuItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
) : null}
|
||||||
|
<div style={{display: "inline-flex", position:"relative"}}>
|
||||||
|
{renderTextBox ?
|
||||||
|
|
||||||
|
<Tooltip title={"Close"} style={{}} aria-label={""}>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setRenderTextBox(false);
|
||||||
|
console.log(" close clicked")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ClearIcon/>
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
:
|
||||||
|
<Tooltip title={"Add new file category"} style={{}} aria-label={""}>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setRenderTextBox(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AddIcon/>
|
||||||
|
</Button>
|
||||||
|
</Tooltip> }
|
||||||
|
{renderTextBox && <TextField
|
||||||
|
onKeyPress={(event)=>{
|
||||||
|
handleKeyDown(event);
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
placeholder="File category name"
|
||||||
|
required
|
||||||
|
margin="dense"
|
||||||
|
defaultValue={""}
|
||||||
|
autoFocus
|
||||||
|
/>}</div>
|
||||||
|
|
||||||
|
<CodeEditor
|
||||||
|
expansionModalOpen={openEditor}
|
||||||
|
setExpansionModalOpen={setOpenEditor}
|
||||||
|
setcodedata = {setFileContent}
|
||||||
|
codedata={fileContent}
|
||||||
|
isFileEditor = {true}
|
||||||
|
key = {fileContent} //https://reactjs.org/docs/reconciliation.html#recursing-on-children
|
||||||
|
runUpdateText = {runUpdateText}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Divider
|
||||||
|
style={{
|
||||||
|
marginTop: 20,
|
||||||
|
marginBottom: 20,
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemText
|
||||||
|
primary="Updated"
|
||||||
|
style={{ maxWidth: 225, minWidth: 225 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Name"
|
||||||
|
style={{
|
||||||
|
maxWidth: 150,
|
||||||
|
minWidth: 150,
|
||||||
|
overflow: "hidden",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Workflow"
|
||||||
|
style={{ maxWidth: 100, minWidth: 100, overflow: "hidden" }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Md5"
|
||||||
|
style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Status"
|
||||||
|
style={{ minWidth: 75, maxWidth: 75, marginLeft: 10 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Filesize"
|
||||||
|
style={{ minWidth: 125, maxWidth: 125 }}
|
||||||
|
/>
|
||||||
|
<ListItemText primary="Actions" />
|
||||||
|
</ListItem>
|
||||||
|
{files === undefined || files === null || files.length === 0 ? null :
|
||||||
|
files.map((file, index) => {
|
||||||
|
if (file.namespace === "") {
|
||||||
|
file.namespace = "default";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (file.namespace !== selectedNamespace) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bgColor = "#27292d";
|
||||||
|
if (index % 2 === 0) {
|
||||||
|
bgColor = "#1f2023";
|
||||||
|
}
|
||||||
|
|
||||||
|
const filenamesplit = file.filename.split(".")
|
||||||
|
const iseditable = file.filesize < 100000 && file.status === "active" && allowedFileTypes.includes(filenamesplit[filenamesplit.length-1])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
maxHeight: 100,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 225,
|
||||||
|
minWidth: 225,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
primary={new Date(file.updated_at * 1000).toISOString()}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 150,
|
||||||
|
minWidth: 150,
|
||||||
|
overflow: "hidden",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
primary={file.filename}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={
|
||||||
|
file.workflow_id === "global" ? (
|
||||||
|
<IconButton
|
||||||
|
disabled={file.workflow_id === "global"}
|
||||||
|
>
|
||||||
|
<OpenInNewIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.workflow_id !== "global"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
) : (
|
||||||
|
<Tooltip
|
||||||
|
title={"Go to workflow"}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Download"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<a
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
textDecoration: "none",
|
||||||
|
color: "#f85a3e",
|
||||||
|
}}
|
||||||
|
href={`/workflows/${file.workflow_id}`}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
disabled={file.workflow_id === "global"}
|
||||||
|
>
|
||||||
|
<OpenInNewIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.workflow_id !== "global"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={file.md5_sum}
|
||||||
|
style={{
|
||||||
|
minWidth: 300,
|
||||||
|
maxWidth: 300,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={file.status}
|
||||||
|
style={{
|
||||||
|
minWidth: 75,
|
||||||
|
maxWidth: 75,
|
||||||
|
overflow: "hidden",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={file.filesize}
|
||||||
|
style={{
|
||||||
|
minWidth: 125,
|
||||||
|
maxWidth: 125,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary=<span style={{ display:"inline"}}>
|
||||||
|
<Tooltip
|
||||||
|
title={`Edit File (${allowedFileTypes.join(", ")})`}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Edit"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
disabled={!iseditable}
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
onClick={() => {
|
||||||
|
setOpenEditor(true)
|
||||||
|
setOpenFileId(file.id)
|
||||||
|
readFileData(file)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon
|
||||||
|
style={{color: iseditable ? "white" : "grey",}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
title={"Download file"}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Download"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
disabled={file.status !== "active"}
|
||||||
|
onClick={() => {
|
||||||
|
downloadFile(file);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloudDownloadIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.status === "active"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
title={"Copy file ID"}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"copy"}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
onClick={() => {
|
||||||
|
const elementName = "copy_element_shuffle";
|
||||||
|
var copyText =
|
||||||
|
document.getElementById(elementName);
|
||||||
|
if (
|
||||||
|
copyText !== null &&
|
||||||
|
copyText !== undefined
|
||||||
|
) {
|
||||||
|
const clipboard = navigator.clipboard;
|
||||||
|
if (clipboard === undefined) {
|
||||||
|
alert.error(
|
||||||
|
"Can only copy over HTTPS (port 3443)"
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navigator.clipboard.writeText(file.id);
|
||||||
|
copyText.select();
|
||||||
|
copyText.setSelectionRange(
|
||||||
|
0,
|
||||||
|
99999
|
||||||
|
); /* For mobile devices */
|
||||||
|
|
||||||
|
/* Copy the text inside the text field */
|
||||||
|
document.execCommand("copy");
|
||||||
|
|
||||||
|
alert.info(file.id + " copied to clipboard");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FileCopyIcon style={{ color: "white" }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
title={"Delete file"}
|
||||||
|
style={{marginLeft: 15, }}
|
||||||
|
aria-label={"Delete"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
disabled={file.status !== "active"}
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
onClick={() => {
|
||||||
|
deleteFile(file);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.status === "active"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
style={{
|
||||||
|
minWidth: 250,
|
||||||
|
maxWidth: 250,
|
||||||
|
// overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
</Dropzone>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Files;
|
||||||
Reference in New Issue
Block a user