Add object-level error message display in Downloads/Uploads panel (#2150)

This commit is contained in:
Paweł Kuffel
2022-06-29 17:26:22 +02:00
committed by GitHub
parent ff93109b57
commit 1c0632473a
8 changed files with 82 additions and 32 deletions

View File

@@ -783,8 +783,8 @@ const ListObjects = () => {
() => {
dispatch(completeObject(identityDownload));
},
() => {
dispatch(failObject(identityDownload));
(msg: string) => {
dispatch(failObject({ instanceID: identityDownload, msg }));
},
() => {
dispatch(cancelObjectInList(identityDownload));
@@ -804,6 +804,7 @@ const ListObjects = () => {
waitingForFile: true,
failed: false,
cancelled: false,
errorMessage: "",
})
);
@@ -924,14 +925,24 @@ const ListObjects = () => {
errorMessage = "something went wrong";
}
}
dispatch(failObject(identity));
dispatch(
failObject({
instanceID: identity,
msg: errorMessage,
})
);
reject({ status: xhr.status, message: errorMessage });
}
};
xhr.upload.addEventListener("error", (event) => {
reject(errorMessage);
dispatch(failObject(identity));
dispatch(
failObject({
instanceID: identity,
msg: "A network error occurred.",
})
);
return;
});
@@ -948,7 +959,12 @@ const ListObjects = () => {
xhr.onerror = () => {
reject(errorMessage);
dispatch(failObject(identity));
dispatch(
failObject({
instanceID: identity,
msg: "A network error occurred.",
})
);
return;
};
xhr.onloadend = () => {
@@ -977,6 +993,7 @@ const ListObjects = () => {
waitingForFile: false,
failed: false,
cancelled: false,
errorMessage: "",
})
);

View File

@@ -318,8 +318,8 @@ const ObjectDetailPanel = ({
() => {
dispatch(completeObject(identityDownload));
},
() => {
dispatch(failObject(identityDownload));
(msg: string) => {
dispatch(failObject({ instanceID: identityDownload, msg }));
},
() => {
dispatch(cancelObjectInList(identityDownload));
@@ -339,6 +339,7 @@ const ObjectDetailPanel = ({
waitingForFile: true,
failed: false,
cancelled: false,
errorMessage: "",
})
);

View File

@@ -263,8 +263,8 @@ const VersionsNavigator = ({
() => {
dispatch(completeObject(identityDownload));
},
() => {
dispatch(failObject(identityDownload));
(msg: string) => {
dispatch(failObject({ instanceID: identityDownload, msg }));
},
() => {
dispatch(cancelObjectInList(identityDownload));
@@ -284,6 +284,7 @@ const VersionsNavigator = ({
waitingForFile: true,
failed: false,
cancelled: false,
errorMessage: "",
})
);

View File

@@ -26,7 +26,7 @@ export const download = (
overrideFileName: string | null = null,
progressCallback: (progress: number) => void,
completeCallback: () => void,
errorCallback: () => void,
errorCallback: (msg: string) => void,
abortCallback: () => void
) => {
const anchor = document.createElement("a");
@@ -56,30 +56,43 @@ export const download = (
req.responseType = "blob";
req.onreadystatechange = () => {
if (req.readyState === 4 && req.status === 200) {
const rspHeader = req.getResponseHeader("Content-Disposition");
if (req.readyState === 4) {
if (req.status === 200) {
const rspHeader = req.getResponseHeader("Content-Disposition");
let filename = "download";
if (rspHeader) {
let rspHeaderDecoded = decodeURIComponent(rspHeader);
filename = rspHeaderDecoded.split('"')[1];
let filename = "download";
if (rspHeader) {
let rspHeaderDecoded = decodeURIComponent(rspHeader);
filename = rspHeaderDecoded.split('"')[1];
}
if (completeCallback) {
completeCallback();
}
var link = document.createElement("a");
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
if (req.getResponseHeader("Content-Type") === "application/json") {
const rspBody: { detailedMessage?: string } = JSON.parse(
req.response
);
if (rspBody.detailedMessage) {
errorCallback(rspBody.detailedMessage);
return;
}
}
errorCallback(`Unexpected response status code (${req.status}).`);
}
if (completeCallback) {
completeCallback();
}
var link = document.createElement("a");
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
req.onerror = () => {
if (errorCallback) {
errorCallback();
errorCallback("A network error occurred.");
}
};
req.onabort = () => {

View File

@@ -144,6 +144,13 @@ const styles = (theme: Theme) =>
color: "#696969",
fontWeight: "normal",
},
errorMessage: {
fontSize: 12,
color: "#C83B51",
fontWeight: "normal",
marginTop: 6,
overflowWrap: "break-word",
},
});
const ObjectHandled = ({
@@ -247,6 +254,12 @@ const ObjectHandled = ({
/>
)}
</div>
{objectToDisplay.errorMessage !== "" && (
<div className={classes.errorMessage}>
<strong>Error: </strong>
{objectToDisplay.errorMessage}
</div>
)}
</div>
</Fragment>
);

View File

@@ -101,8 +101,8 @@ const RenameLongFileName = ({
() => {
dispatch(completeObject(identityDownload));
},
() => {
dispatch(failObject(identityDownload));
(msg: string) => {
dispatch(failObject({ instanceID: identityDownload, msg }));
},
() => {
dispatch(cancelObjectInList(identityDownload));
@@ -122,6 +122,7 @@ const RenameLongFileName = ({
waitingForFile: true,
failed: false,
cancelled: false,
errorMessage: "",
})
);

View File

@@ -120,12 +120,15 @@ export const objectBrowserSlice = createSlice({
false;
state.objectManager.objectsToManage[objectToComplete].done = true;
},
failObject: (state, action: PayloadAction<string>) => {
failObject: (state, action: PayloadAction<{instanceID: string; msg: string}>) => {
const objectToFail = state.objectManager.objectsToManage.findIndex(
(item) => item.instanceID === action.payload
(item) => item.instanceID === action.payload.instanceID
);
state.objectManager.objectsToManage[objectToFail].failed = true;
state.objectManager.objectsToManage[objectToFail].waitingForFile = false;
state.objectManager.objectsToManage[objectToFail].done = true;
state.objectManager.objectsToManage[objectToFail].errorMessage = action.payload.msg;
},
cancelObjectInList: (state, action: PayloadAction<string>) => {
const objectToCancel = state.objectManager.objectsToManage.findIndex(

View File

@@ -99,6 +99,7 @@ export interface IFileItem {
waitingForFile: boolean;
failed: boolean;
cancelled: boolean;
errorMessage: string;
}
interface RewindSetEnabled {